src/sass/components/_utilities.scssto generate additional utility classes to cover its own design system. The customized utility SASS variables are defined in
										src/sass/components/_variables.scssand in
										src/sass/components/_variables.custom.scssyou can override any variable for your needs.src/sass/components/_variables.scss:
// Theme colors
$theme-colors: (
    "white":      $white,  // custom color type
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
) !default;
// Active and hover states colors
$theme-active-colors: (
    "white":      $white-active,   // custom color type
    "primary":    $primary-active,
    "secondary":  $secondary-active,
    "success":    $success-active,
    "info":       $info-active,
    "warning":    $warning-active,
    "danger":     $danger-active,
    "light":      $light-active,
    "dark":       $dark-active
) !default;  // Custom variable
// Inverse colors
$theme-inverse-colors: (
    "white":      $white-inverse,
    "primary":    $primary-inverse,
    "secondary":  $secondary-inverse,
    "success":    $success-inverse,
    "info":       $info-inverse,
    "warning":    $warning-inverse,
    "danger":     $danger-inverse,
    "light":      $light-inverse,
    "dark":       $dark-inverse
) !default;  // Custom variable
// Light colors
$theme-light-colors: (
    "white":      $white-light,
    "primary":    $primary-light,
    "secondary":  $secondary-light,
    "success":    $success-light,
    "info":       $info-light,
    "warning":    $warning-light,
    "danger":     $danger-light,
    "light":      $light-light,
    "dark":       $dark-light
) !default;  // Custom variable
// Text colors
$theme-text-colors: (
    "white":      $white,
    "primary":    $primary,
    "secondary":  $dark,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark,
    "muted":      $text-muted,
    "gray-100":   $gray-100,
    "gray-200":   $gray-200,
    "gray-300":   $gray-300,
    "gray-400":   $gray-400,
    "gray-500":   $gray-500,
    "gray-600":   $gray-600,
    "gray-700":   $gray-700,
    "gray-800":   $gray-800,
    "gray-900":   $gray-900
) !default;  // Custom variable
												Custom variablecomment in
												_variables.scss  file.
$spacers: (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: ($spacer * .75),
    4: ($spacer * 1),
    5: ($spacer * 1.25),
    6: ($spacer * 1.5),
    7: ($spacer * 1.75),
    8: ($spacer * 2),
    9: ($spacer * 2.25),
    10: ($spacer * 2.5),
    11: ($spacer * 2.75),
    12: ($spacer * 3),
    13: ($spacer * 3.25),
    14: ($spacer * 3.5),
    15: ($spacer * 3.75),
    16: ($spacer * 4),
    17: ($spacer * 4.25),
    18: ($spacer * 4.5),
    19: ($spacer * 4.75),
    20: ($spacer * 5)
);
												
$font-sizes: (
    1: $h1-font-size,   // 22.75px
    2: $h2-font-size,   // 19.50px
    3: $h3-font-size,   // 17.55px
    4: $h4-font-size,   // 16.25px
    5: $h5-font-size,   // 14.95px
    6: $h6-font-size,   // 13.95px
    7: $font-size-base * 0.95,  // 12.35px
    8: $font-size-base * 0.85,  // 11.05px
    9: $font-size-base * 0.75,  // 9.75px
    10: $font-size-base * 0.5,  // 6.50px
    base: $font-size-base, // 13px
    fluid: 100%, // 100%
    2x: $font-size-base * 2,        // 26px
    2qx: $font-size-base * 2.25,    // 29.25px
    2hx: $font-size-base * 2.5,     // 32.5px
    2tx: $font-size-base * 2.75,    // 35.75px
    3x: $font-size-base * 3,        // 39px
    3qx: $font-size-base * 3.25,    // 42.25px
    3hx: $font-size-base * 3.5,     // 45.5px
    3tx: $font-size-base * 3.75,    // 48.75px
    4x: $font-size-base * 4,        // 52px
    4qx: $font-size-base * 4.25,    // 55.25px
    4hx: $font-size-base * 4.5,     // 58.5px
    4tx: $font-size-base * 4.75,    // 61.75px
    5x: $font-size-base * 5,        // 65px
    5qx: $font-size-base * 5.25,    // 68.25px
    5hx: $font-size-base * 5.5,     // 71.5px
    5tx: $font-size-base * 5.75     // 74.75px
) !default;
												.lh-{value}class to set an element's line height where
										valueis one of:1- for classes that set line height to
											1sm- for classes that set line height to
											1.25base- for classes that set line height to
											1.5lg- for classes that set line height to
											1.75xl- for classes that set line height to
											2xxl- for classes that set line height to
											2.25.lh-1.lh-sm.lh-base.lh-lg.lh-xl.lh-xxl
<div class="lh-1">Example text for .lh-1</div>
<div class="lh-sm">Example text for .lh-sm</div>
<div class="lh-base">Example text for .lh-base</div>
<div class="lh-lg">Example text for .lh-lg</div>
<div class="lh-xl">Example text for .lh-xl</div>
<div class="lh-xxl">Example text for .lh-xxl</div>
												.ls-{value}class to set an element's letter spacing where
										valueis one of:1- for classes that set letter spacing to
											0.1rem2- for classes that set letter spacing to
											0.115rem3- for classes that set letter spacing to
											0.125rem4- for classes that set letter spacing to
											0.25rem5- for classes that set letter spacing to
											0.5remn1- for classes that set letter spacing to
											-0.1remn2- for classes that set letter spacing to
											-0.115remn3- for classes that set letter spacing to
											-0.125remn4- for classes that set letter spacing to
											-0.25remn5- for classes that set letter spacing to
											-0.5rem.ls-1.ls-2.ls-3.ls-4.ls-5.ls-n1.ls-n2.ls-n3.ls-n4.ls-n5
<div class="ls-1">Example text for .ls-1</div>
<div class="ls-2">Example text for .ls-2</div>
<div class="ls-3">Example text for .ls-3</div>
<div class="ls-4">Example text for .ls-4</div>
<div class="ls-5">Example text for .ls-5</div>
<div class="ls-n1">Example text for .ls-n1</div>
<div class="ls-n2">Example text for .ls-n2</div>
<div class="ls-n3">Example text for .ls-n3</div>
<div class="ls-n4">Example text for .ls-n4</div>
<div class="ls-n5">Example text for .ls-n5</div>
												height,
										min-height,
										max-height,
										width,
										min-withand
										max-widthvalues to an element with shorthand classes. The classes are named using the format
										{property}-{size}for
										xsand
										{property}-{breakpoint}-{size}for
										sm,
										md,
										lg,
										xl, and
										xxl.propertyis one of:
										h- for classes that set heightmh- for classes that set max heightmin-h- for classes that set min heightw- for classes that set widthmw- for classes that set max widthmin-w- for classes that set min widthsizedefined with
										$custom-sizesvariable in
										sass/_variables.scssis one of-
										25- for 25%50- for 50%75- for 75%100- for 100%auto- for auto1px
											2px
											3px
											4px
											5px
											6px
											7px
											8px
											9px
											10px
											15px
											20px
											25px
											30px
											35px
											40px
											45px
											50px
											55px
											60px
											65px
											70px
											75px
											80px
											85px
											90px
											95px
											100px
											125px
											150px
											175px
											200px
											225px
											250px
											275px
											300px
											325px
											350px
											375px
											400px
											425px
											450px
											475px
											500px
											550px
											600px
											650px
											700px
											750px
											800px
											850px
											900px
											950px
											1000px
											
<div class="w-100px h-100px"></div>
<div class="w-150px h-150px"></div>
<div class="w-200px h-200px"></div>
<div class="w-250px h-250px"></div>
<div class="min-w-100px min-h-100px mw-100px mh-100px"></div>
<div class="min-w-150px min-h-150px mw-150px mh-150px"></div>
<div class="min-w-200px min-h-200px mw-200px mh-200px"></div>
<div class="min-w-250px min-h-250px mw-250px mh-250px"></div>
												.z-index-{value}class to set an element's z-index:valueis one of:
										n1- for classes that set z-index
											n1n2- for classes that set z-index
											n20- for classes that set z-index
											01- for classes that set z-index
											12- for classes that set z-index
											23- for classes that set z-index
											3
<div class="z-index-n1"></div>
<div class="z-index-n2"></div>
<div class="z-index-0"></div>
<div class="z-index-1"></div>
<div class="z-index-2"></div>
<div class="z-index-3"></div>
												--bs-light-primary- Light version of primary color hex value.--bs-active-primary- Active version of primary color hex value.--bs-light-success- Light version of success color hex value.--bs-active-success- Active version of success color hex value.--bs-light-info- Light version of info color hex value.--bs-active-info- Active version of info color hex value.--bs-light-warning- Light version of warning color hex value.--bs-active-warning- Active version of warning color hex value.--bs-light-danger- Light version of danger color hex value.--bs-active-danger- Active version of danger color hex value.--bs-light-dark- Light version of dark color hex value.--bs-active-dark- Active version of dark color hex value.--bs-gray-100- Gray 100 color hex value.--bs-gray-200- Gray 200 color hex value.--bs-gray-300- Gray 300 color hex value.--bs-gray-400- Gray 400 color hex value.--bs-gray-500- Gray 500 color hex value.--bs-gray-600- Gray 600 color hex value.--bs-gray-700- Gray 700 color hex value.--bs-gray-800- Gray 800 color hex value.--bs-gray-900- Gray 900 color hex value.--bs-xs- Extra small breakpoint width value - 0.--bs-sm- Extra small breakpoint width value - 576px.--bs-md- Medium small breakpoint width value - 768px.--bs-lg- Large small breakpoint width value - 992px.--bs-xl- Extra large small breakpoint width value - 1200px.--bs-xxl- Double extra large breakpoint width value - 1400px.--bs-font-sans-serif- Main font family. E.g:
												"Roboto", sans-serif.KTUtil.getCssVariableValue('css variable name').
										
var primaryColor = KTUtil.getCssVariableValue("--bs-primary");
var breakpointLg = KTUtil.getCssVariableValue("--bs-lg");
var fontFamily = KTUtil.getCssVariableValue("--bs-font-sans-serif");