@design-factory/design-factory 16.0.2 → 17.0.1

package/styles/scss/bootstrap/_variables.scss

@@ -11,10 +11,9 @@
 
 $prefix: df- !default;
 
-
 // scss-docs-start gray-color-variables
 $white: #fff !default;
-$black:  #000 !default; // changed
+$black: #000 !default; // changed
 
 // DF specific colors
 // Grey colors
@@ -33,16 +32,16 @@ $gray-50: #f2f2f2 !default;
 // fusv-disable
 // scss-docs-start gray-colors-map
 $grays: (
-  "50": $gray-50,
-  "100": $gray-100,
-  "200": $gray-200,
-  "300": $gray-300,
-  "400": $gray-400,
-  "500": $gray-500,
-  "600": $gray-600,
-  "700": $gray-700,
-  "800": $gray-800,
-  "900": $gray-900,
+  '50': $gray-50,
+  '100': $gray-100,
+  '200': $gray-200,
+  '300': $gray-300,
+  '400': $gray-400,
+  '500': $gray-500,
+  '600': $gray-600,
+  '700': $gray-700,
+  '800': $gray-800,
+  '900': $gray-900
 ) !default;
 // scss-docs-end gray-colors-map
 // fusv-enable
@@ -108,22 +107,22 @@ $light-primary: color.mix($primary, $white, 10%) !default;
 
 // scss-docs-start theme-colors-map
 $theme-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "success": $success,
-  "info": $info,
-  "warning": $warning,
-  "danger": $danger,
-  "light": $light,
-  "dark": $dark,
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger,
+  'light': $light,
+  'dark': $dark,
   'mystery': $mystery,
   'love': $love,
-  'pacific': $pacific,
+  'pacific': $pacific
 ) !default;
 // scss-docs-end theme-colors-map
 
 // scss-docs-start theme-colors-rgb
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
 // scss-docs-end theme-colors-rgb
 
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
@@ -136,14 +135,14 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 
 $dark-900: color.adjust($dark, $lightness: -10%) !default;
 $dark-800: color.adjust($dark, $lightness: -5%) !default;
-$dark-700: $dark !default;  // normal dark
+$dark-700: $dark !default; // normal dark
 $dark-600: #666 !default;
 $dark-500: #808080 !default;
 $dark-400: #999 !default;
 $dark-300: #b3b3b3 !default;
 $dark-200: #ccc !default;
 $dark-100: #e6e6e6 !default;
-$dark-50: #FAFAFA !default; // added to the olf DF palette
+$dark-50: #fafafa !default; // added to the olf DF palette
 
 $light-900: #1a1a1a !default;
 $light-800: #333 !default;
@@ -153,8 +152,8 @@ $light-500: #808080 !default;
 $light-400: #999 !default;
 $light-300: color.adjust($light, $lightness: -10%) !default;
 $light-200: color.adjust($light, $lightness: -5%) !default;
-$light-100: $light !default;  // normal light
-$light-50: #FAFAFA !default; // added to the olf DF palette
+$light-100: $light !default; // normal light
+$light-50: #fafafa !default; // added to the olf DF palette
 
 $white-900: #1a1a1a !default;
 $white-800: #333 !default;
@@ -163,7 +162,7 @@ $white-600: #666 !default;
 $white-500: #808080 !default;
 $white-400: #999 !default;
 $white-300: #b3b3b3 !default;
-$white-200: color.adjust($white, $lightness: -10%) !default;  // normal white
+$white-200: color.adjust($white, $lightness: -10%) !default; // normal white
 $white-100: color.adjust($white, $lightness: -5%) !default; // added to the olf DF palette
 $white-50: $white !default;
 
@@ -171,10 +170,10 @@ $white-50: $white !default;
 $blue-50: color.mix($blue, $white, 5%) !default;
 $blue-100: color.mix($blue, $white, 10%) !default;
 $blue-200: color.mix($blue, $white, 15%) !default;
-$blue-300: #61A2FF !default;
-$blue-400: #3A8BFF !default;
+$blue-300: #61a2ff !default;
+$blue-400: #3a8bff !default;
 $blue-500: $blue !default;
-$blue-600: #104EA4 !default;
+$blue-600: #104ea4 !default;
 $blue-700: color.adjust($blue, $lightness: -5%) !default;
 $blue-800: color.adjust($blue, $lightness: -10%) !default;
 $blue-900: #000521 !default;
@@ -182,10 +181,10 @@ $blue-900: #000521 !default;
 $pacific-50: color.mix($pacific, $white, 5%) !default;
 $pacific-100: color.mix($pacific, $white, 10%) !default;
 $pacific-200: color.mix($pacific, $white, 15%) !default;
-$pacific-300: #61A2FF !default;  // not used ?
-$pacific-400: #3A8BFF !default;
+$pacific-300: #61a2ff !default; // not used ?
+$pacific-400: #3a8bff !default;
 $pacific-500: $pacific !default;
-$pacific-600: #104EA4 !default;
+$pacific-600: #104ea4 !default;
 $pacific-700: color.adjust($pacific, $lightness: -5%) !default;
 $pacific-800: color.adjust($pacific, $lightness: -10%) !default;
 $pacific-900: #000521 !default;
@@ -193,10 +192,10 @@ $pacific-900: #000521 !default;
 $primary-50: color.mix($primary, $white, 5%) !default;
 $primary-100: color.mix($primary, $white, 10%) !default;
 $primary-200: color.mix($primary, $white, 15%) !default;
-$primary-300: #61A2FF !default;
-$primary-400: #3A8BFF !default;
+$primary-300: #61a2ff !default;
+$primary-400: #3a8bff !default;
 $primary-500: $primary !default;
-$primary-600: #104EA4 !default;
+$primary-600: #104ea4 !default;
 $primary-700: color.adjust($primary, $lightness: -5%) !default;
 $primary-800: color.adjust($primary, $lightness: -10%) !default;
 $primary-900: #000521 !default;
@@ -215,10 +214,10 @@ $indigo-900: shade-color($indigo, 80%) !default;
 $purple-50: color.mix($purple, $white, 5%) !default;
 $purple-100: color.mix($purple, $white, 10%) !default;
 $purple-200: color.mix($purple, $white, 15%) !default;
-$purple-300: #C573FF !default;
-$purple-400: #B650FF !default;
+$purple-300: #c573ff !default;
+$purple-400: #b650ff !default;
 $purple-500: $purple !default;
-$purple-600: #6D3099 !default;
+$purple-600: #6d3099 !default;
 $purple-700: color.adjust($purple, $lightness: -5%) !default;
 $purple-800: color.adjust($purple, $lightness: -10%) !default;
 $purple-900: #160033 !default;
@@ -226,65 +225,65 @@ $purple-900: #160033 !default;
 $pink-50: color.mix($pink, $white, 5%) !default;
 $pink-100: color.mix($pink, $white, 10%) !default;
 $pink-200: color.mix($pink, $white, 15%) !default;
-$pink-300: #FF79BD !default;
-$pink-400: #FF58AC !default;
+$pink-300: #ff79bd !default;
+$pink-400: #ff58ac !default;
 $pink-500: $pink !default;
 $pink-600: #993567 !default;
 $pink-700: color.adjust($pink, $lightness: -5%) !default;
 $pink-800: color.adjust($pink, $lightness: -10%) !default;
-$pink-900: #34001F!default;
+$pink-900: #34001f !default;
 
 $red-50: color.mix($red, $white, 5%) !default;
 $red-100: color.mix($red, $white, 10%) !default;
 $red-200: color.mix($red, $white, 15%) !default;
-$red-300: #FF7471 !default;
-$red-400: #FF514D !default;
+$red-300: #ff7471 !default;
+$red-400: #ff514d !default;
 $red-500: $red !default;
-$red-600: #B2271F !default;
+$red-600: #b2271f !default;
 $red-700: color.adjust($red, $lightness: -5%) !default;
 $red-800: color.adjust($red, $lightness: -10%) !default;
-$red-900: #430F0C !default;
+$red-900: #430f0c !default;
 
 $orange-50: color.mix($orange, $white, 5%) !default;
 $orange-100: color.mix($orange, $white, 10%) !default;
 $orange-200: color.mix($orange, $white, 15%) !default;
-$orange-300: #FF8838 !default;
-$orange-400: #FF7920 !default;
+$orange-300: #ff8838 !default;
+$orange-400: #ff7920 !default;
 $orange-500: $orange !default;
 $orange-600: color.adjust($orange, $lightness: -5%) !default;
 $orange-700: color.adjust($orange, $lightness: -10%) !default;
-$orange-800: #9e6900  !default; // Brown in the old branding as this is used as color for warning as text only
+$orange-800: #9e6900 !default; // Brown in the old branding as this is used as color for warning as text only
 $orange-900: color.adjust(#9e6900, $lightness: -5%) !default;
 
 $yellow-50: color.mix($yellow, $white, 5%) !default;
 $yellow-100: color.mix($yellow, $white, 10%) !default;
 $yellow-200: color.mix($yellow, $white, 15%) !default;
-$yellow-300: #FDEB6D !default;
-$yellow-400: #FCE649 !default;
+$yellow-300: #fdeb6d !default;
+$yellow-400: #fce649 !default;
 $yellow-500: $yellow !default;
-$yellow-600: #978A2C !default;
+$yellow-600: #978a2c !default;
 $yellow-700: color.adjust($yellow, $lightness: -5%) !default;
 $yellow-800: color.adjust($yellow, $lightness: -10%) !default;
-$yellow-900: #2A2500 !default;
+$yellow-900: #2a2500 !default;
 
 $green-50: color.mix($green, $white, 5%) !default;
 $green-100: color.mix($green, $white, 10%) !default;
 $green-200: color.mix($green, $white, 15%) !default;
-$green-300: #A8FF8F !default;
-$green-400: #92FF73 !default;
+$green-300: #a8ff8f !default;
+$green-400: #92ff73 !default;
 $green-500: $green !default;
 $green-600: #569643 !default;
 $green-700: color.adjust($green, $lightness: -5%) !default;
 $green-800: color.adjust($green, $lightness: -10%) !default;
-$green-900: #0F190B !default;
+$green-900: #0f190b !default;
 
 $teal-50: color.mix($teal, $white, 5%) !default;
 $teal-100: color.mix($teal, $white, 10%) !default;
 $teal-200: color.mix($teal, $white, 15%) !default;
-$teal-300: #61A2FF !default;
-$teal-400: #3A8BFF !default;
+$teal-300: #61a2ff !default;
+$teal-400: #3a8bff !default;
 $teal-500: $teal !default;
-$teal-600: #104EA4 !default;
+$teal-600: #104ea4 !default;
 $teal-700: color.adjust($teal, $lightness: -5%) !default;
 $teal-800: color.adjust($teal, $lightness: -10%) !default;
 $teal-900: #000521 !default;
@@ -292,10 +291,10 @@ $teal-900: #000521 !default;
 $info-50: color.mix($teal, $white, 5%) !default;
 $info-100: color.mix($teal, $white, 10%) !default;
 $info-200: color.mix($teal, $white, 15%) !default;
-$info-300: #61A2FF !default; // not used ?
-$info-400: #3A8BFF !default;
+$info-300: #61a2ff !default; // not used ?
+$info-400: #3a8bff !default;
 $info-500: $info !default;
-$info-600: #104EA4 !default;
+$info-600: #104ea4 !default;
 $info-700: color.adjust($teal, $lightness: -5%) !default;
 $info-800: color.adjust($teal, $lightness: -5%) !default;
 $info-900: #000521 !default;
@@ -303,19 +302,19 @@ $info-900: #000521 !default;
 $danger-50: color.mix($danger, $white, 5%) !default;
 $danger-100: color.mix($danger, $white, 10%) !default;
 $danger-200: color.mix($danger, $white, 15%) !default;
-$danger-300: #FF7471 !default;
-$danger-400: #FF514D !default;
+$danger-300: #ff7471 !default;
+$danger-400: #ff514d !default;
 $danger-500: $danger !default;
-$danger-600: #B2271F !default;
+$danger-600: #b2271f !default;
 $danger-700: color.adjust($danger, $lightness: -5%) !default;
 $danger-800: color.adjust($danger, $lightness: -5%) !default;
-$danger-900: #430F0C !default;
+$danger-900: #430f0c !default;
 
 $warning-50: color.mix($warning, $white, 5%) !default;
 $warning-100: color.mix($warning, $white, 10%) !default;
 $warning-200: color.mix($warning, $white, 15%) !default;
-$warning-300: #FF8838 !default;
-$warning-400: #FF7920 !default;
+$warning-300: #ff8838 !default;
+$warning-400: #ff7920 !default;
 $warning-500: $warning !default;
 $warning-600: color.adjust($warning, $lightness: -5%) !default;
 $warning-700: color.adjust($warning, $lightness: -10%) !default;
@@ -325,13 +324,13 @@ $warning-900: color.adjust(#9e6900, $lightness: -5%) !default;
 $success-50: color.mix($success, $white, 5%) !default;
 $success-100: color.mix($success, $white, 10%) !default;
 $success-200: color.mix($success, $white, 15%) !default;
-$success-300: #A8FF8F !default;
-$success-400: #92FF73 !default;
+$success-300: #a8ff8f !default;
+$success-400: #92ff73 !default;
 $success-500: $success !default;
 $success-600: #569643 !default;
 $success-700: color.adjust($success, $lightness: -5%) !default;
 $success-800: color.adjust($success, $lightness: -10%) !default;
-$success-900: #0F190B !default;
+$success-900: #0f190b !default;
 
 $cyan-50: tint-color($cyan, 90%) !default;
 $cyan-100: tint-color($cyan, 80%) !default;
@@ -345,610 +344,606 @@ $cyan-800: shade-color($cyan, 60%) !default;
 $cyan-900: shade-color($cyan, 80%) !default;
 
 $blues: (
-  "blue-50": $blue-50,
-  "blue-100": $blue-100,
-  "blue-200": $blue-200,
-  "blue-300": $blue-300,
-  "blue-400": $blue-400,
-  "blue-500": $blue-500,
-  "blue-600": $blue-600,
-  "blue-700": $blue-700,
-  "blue-800": $blue-800,
-  "blue-900": $blue-900
+  'blue-50': $blue-50,
+  'blue-100': $blue-100,
+  'blue-200': $blue-200,
+  'blue-300': $blue-300,
+  'blue-400': $blue-400,
+  'blue-500': $blue-500,
+  'blue-600': $blue-600,
+  'blue-700': $blue-700,
+  'blue-800': $blue-800,
+  'blue-900': $blue-900
 ) !default;
 
 $secondaries: (
-  "secondary-50": $gray-50,
-  "secondary-100": color.mix($secondary, $white, 10%),
-  "secondary-200": color.mix($secondary, $white, 15%),
-  "secondary-300": $gray-300,
-  "secondary-400": $gray-400,
-  "secondary-500": $gray-500,
-  "secondary-600": $gray-600,
-  "secondary-700": $gray-700,
-  "secondary-800": $gray-800,
-  "secondary-900": $gray-900
+  'secondary-50': $gray-50,
+  'secondary-100': color.mix($secondary, $white, 10%),
+  'secondary-200': color.mix($secondary, $white, 15%),
+  'secondary-300': $gray-300,
+  'secondary-400': $gray-400,
+  'secondary-500': $gray-500,
+  'secondary-600': $gray-600,
+  'secondary-700': $gray-700,
+  'secondary-800': $gray-800,
+  'secondary-900': $gray-900
 ) !default;
 
 $pacifics: (
-  "pacific-50": $pacific-50,
-  "pacific-100": $pacific-100,
-  "pacific-200": $pacific-200,
-  "pacific-300": $pacific-300,
-  "pacific-400": $pacific-400,
-  "pacific-500": $pacific-500,
-  "pacific-600": $pacific-600,
-  "pacific-700": $pacific-700,
-  "pacific-800": $pacific-800,
-  "pacific-900": $pacific-900
+  'pacific-50': $pacific-50,
+  'pacific-100': $pacific-100,
+  'pacific-200': $pacific-200,
+  'pacific-300': $pacific-300,
+  'pacific-400': $pacific-400,
+  'pacific-500': $pacific-500,
+  'pacific-600': $pacific-600,
+  'pacific-700': $pacific-700,
+  'pacific-800': $pacific-800,
+  'pacific-900': $pacific-900
 ) !default;
 
 $primaries: (
-  "primary-50": $primary-50,
-  "primary-100": $primary-100,
-  "primary-200": $primary-200,
-  "primary-300": $primary-300,
-  "primary-400": $primary-400,
-  "primary-500": $primary-500,
-  "primary-600": $primary-600,
-  "primary-700": $primary-700,
-  "primary-800": $primary-800,
-  "primary-900": $primary-900
+  'primary-50': $primary-50,
+  'primary-100': $primary-100,
+  'primary-200': $primary-200,
+  'primary-300': $primary-300,
+  'primary-400': $primary-400,
+  'primary-500': $primary-500,
+  'primary-600': $primary-600,
+  'primary-700': $primary-700,
+  'primary-800': $primary-800,
+  'primary-900': $primary-900
 ) !default;
 
 $indigos: (
-  "indigo-50": $indigo-50,
-  "indigo-100": $indigo-100,
-  "indigo-200": $indigo-200,
-  "indigo-300": $indigo-300,
-  "indigo-400": $indigo-400,
-  "indigo-500": $indigo-500,
-  "indigo-600": $indigo-600,
-  "indigo-700": $indigo-700,
-  "indigo-800": $indigo-800,
-  "indigo-900": $indigo-900
+  'indigo-50': $indigo-50,
+  'indigo-100': $indigo-100,
+  'indigo-200': $indigo-200,
+  'indigo-300': $indigo-300,
+  'indigo-400': $indigo-400,
+  'indigo-500': $indigo-500,
+  'indigo-600': $indigo-600,
+  'indigo-700': $indigo-700,
+  'indigo-800': $indigo-800,
+  'indigo-900': $indigo-900
 ) !default;
 
 $purples: (
-  "purple-50": $purple-50,
-  "purple-100": $purple-100,
-  "purple-200": $purple-200,
-  "purple-300": $purple-300,
-  "purple-400": $purple-400,
-  "purple-500": $purple-500,
-  "purple-600": $purple-600,
-  "purple-700": $purple-700,
-  "purple-800": $purple-800,
-  "purple-900": $purple-900
+  'purple-50': $purple-50,
+  'purple-100': $purple-100,
+  'purple-200': $purple-200,
+  'purple-300': $purple-300,
+  'purple-400': $purple-400,
+  'purple-500': $purple-500,
+  'purple-600': $purple-600,
+  'purple-700': $purple-700,
+  'purple-800': $purple-800,
+  'purple-900': $purple-900
 ) !default;
 
 $mysteries: (
-  "mystery-50": $purple-50,
-  "mystery-100": $purple-200,
-  "mystery-200": $purple-100,
-  "mystery-300": $purple-300,
-  "mystery-400": $purple-400,
-  "mystery-500": $purple-500,
-  "mystery-600": $purple-600,
-  "mystery-700": $purple-700,
-  "mystery-800": $purple-800,
-  "mystery-900": $purple-900
+  'mystery-50': $purple-50,
+  'mystery-100': $purple-200,
+  'mystery-200': $purple-100,
+  'mystery-300': $purple-300,
+  'mystery-400': $purple-400,
+  'mystery-500': $purple-500,
+  'mystery-600': $purple-600,
+  'mystery-700': $purple-700,
+  'mystery-800': $purple-800,
+  'mystery-900': $purple-900
 ) !default;
 
 $pinks: (
-  "pink-50": $pink-50,
-  "pink-100": $pink-100,
-  "pink-200": $pink-200,
-  "pink-300": $pink-300,
-  "pink-400": $pink-400,
-  "pink-500": $pink-500,
-  "pink-600": $pink-600,
-  "pink-700": $pink-700,
-  "pink-800": $pink-800,
-  "pink-900": $pink-900
+  'pink-50': $pink-50,
+  'pink-100': $pink-100,
+  'pink-200': $pink-200,
+  'pink-300': $pink-300,
+  'pink-400': $pink-400,
+  'pink-500': $pink-500,
+  'pink-600': $pink-600,
+  'pink-700': $pink-700,
+  'pink-800': $pink-800,
+  'pink-900': $pink-900
 ) !default;
 
 $loves: (
-  "love-50": $pink-50,
-  "love-100": $pink-100,
-  "love-200": $pink-200,
-  "love-300": $pink-300,
-  "love-400": $pink-400,
-  "love-500": $pink-500,
-  "love-600": $pink-600,
-  "love-700": $pink-700,
-  "love-800": $pink-800,
-  "love-900": $pink-900
+  'love-50': $pink-50,
+  'love-100': $pink-100,
+  'love-200': $pink-200,
+  'love-300': $pink-300,
+  'love-400': $pink-400,
+  'love-500': $pink-500,
+  'love-600': $pink-600,
+  'love-700': $pink-700,
+  'love-800': $pink-800,
+  'love-900': $pink-900
 ) !default;
 
 $reds: (
-  "red-50": $red-50,
-  "red-100": $red-100,
-  "red-200": $red-200,
-  "red-300": $red-300,
-  "red-400": $red-400,
-  "red-500": $red-500,
-  "red-600": $red-600,
-  "red-700": $red-700,
-  "red-800": $red-800,
-  "red-900": $red-900
+  'red-50': $red-50,
+  'red-100': $red-100,
+  'red-200': $red-200,
+  'red-300': $red-300,
+  'red-400': $red-400,
+  'red-500': $red-500,
+  'red-600': $red-600,
+  'red-700': $red-700,
+  'red-800': $red-800,
+  'red-900': $red-900
 ) !default;
 
 $oranges: (
-  "orange-50": $orange-50,
-  "orange-100": $orange-100,
-  "orange-200": $orange-200,
-  "orange-300": $orange-300,
-  "orange-400": $orange-400,
-  "orange-500": $orange-500,
-  "orange-600": $orange-600,
-  "orange-700": $orange-700,
-  "orange-800": $orange-800,
-  "orange-900": $orange-900
+  'orange-50': $orange-50,
+  'orange-100': $orange-100,
+  'orange-200': $orange-200,
+  'orange-300': $orange-300,
+  'orange-400': $orange-400,
+  'orange-500': $orange-500,
+  'orange-600': $orange-600,
+  'orange-700': $orange-700,
+  'orange-800': $orange-800,
+  'orange-900': $orange-900
 ) !default;
 
 $teals: (
-  "teal-50": $teal-50,
-  "teal-100": $teal-100,
-  "teal-200": $teal-200,
-  "teal-300": $teal-300,
-  "teal-400": $teal-400,
-  "teal-500": $teal-500,
-  "teal-600": $teal-600,
-  "teal-700": $teal-700,
-  "teal-800": $teal-800,
-  "teal-900": $teal-900
+  'teal-50': $teal-50,
+  'teal-100': $teal-100,
+  'teal-200': $teal-200,
+  'teal-300': $teal-300,
+  'teal-400': $teal-400,
+  'teal-500': $teal-500,
+  'teal-600': $teal-600,
+  'teal-700': $teal-700,
+  'teal-800': $teal-800,
+  'teal-900': $teal-900
 ) !default;
 
 $yellows: (
-  "yellow-50": $yellow-50,
-  "yellow-100": $yellow-100,
-  "yellow-200": $yellow-200,
-  "yellow-300": $yellow-300,
-  "yellow-400": $yellow-400,
-  "yellow-500": $yellow-500,
-  "yellow-600": $yellow-600,
-  "yellow-700": $yellow-700,
-  "yellow-800": $yellow-800,
-  "yellow-900": $yellow-900
+  'yellow-50': $yellow-50,
+  'yellow-100': $yellow-100,
+  'yellow-200': $yellow-200,
+  'yellow-300': $yellow-300,
+  'yellow-400': $yellow-400,
+  'yellow-500': $yellow-500,
+  'yellow-600': $yellow-600,
+  'yellow-700': $yellow-700,
+  'yellow-800': $yellow-800,
+  'yellow-900': $yellow-900
 ) !default;
 
 $greens: (
-  "green-50": $green-50,
-  "green-100": $green-100,
-  "green-200": $green-200,
-  "green-300": $green-300,
-  "green-400": $green-400,
-  "green-500": $green-500,
-  "green-600": $green-600,
-  "green-700": $green-700,
-  "green-800": $green-800,
-  "green-900": $green-900
+  'green-50': $green-50,
+  'green-100': $green-100,
+  'green-200': $green-200,
+  'green-300': $green-300,
+  'green-400': $green-400,
+  'green-500': $green-500,
+  'green-600': $green-600,
+  'green-700': $green-700,
+  'green-800': $green-800,
+  'green-900': $green-900
 ) !default;
 
 $infos: (
-  "info-50": $info-50,
-  "info-100": $info-100,
-  "info-200": $info-200,
-  "info-300": $info-300,
-  "info-400": $info-400,
-  "info-500": $info-500,
-  "info-600": $info-600,
-  "info-700": $info-700,
-  "info-800": $info-800,
-  "info-900": $info-900
+  'info-50': $info-50,
+  'info-100': $info-100,
+  'info-200': $info-200,
+  'info-300': $info-300,
+  'info-400': $info-400,
+  'info-500': $info-500,
+  'info-600': $info-600,
+  'info-700': $info-700,
+  'info-800': $info-800,
+  'info-900': $info-900
 ) !default;
 
 $successes: (
-  "success-50": $success-50,
-  "success-100": $success-100,
-  "success-200": $success-200,
-  "success-300": $success-300,
-  "success-400": $success-400,
-  "success-500": $success-500,
-  "success-600": $success-600,
-  "success-700": $success-700,
-  "success-800": $success-800,
-  "success-900": $success-900
+  'success-50': $success-50,
+  'success-100': $success-100,
+  'success-200': $success-200,
+  'success-300': $success-300,
+  'success-400': $success-400,
+  'success-500': $success-500,
+  'success-600': $success-600,
+  'success-700': $success-700,
+  'success-800': $success-800,
+  'success-900': $success-900
 ) !default;
 
 $lights: (
-  "light-50": $light-50,
-  "light-100": $light-100,
-  "light-200": $light-200,
-  "light-300": $light-300,
-  "light-400": $light-400,
-  "light-500": $light-500,
-  "light-600": $light-600,
-  "light-700": $light-700,
-  "light-800": $light-800,
-  "light-900": $light-900,
-
-  ) !default;
+  'light-50': $light-50,
+  'light-100': $light-100,
+  'light-200': $light-200,
+  'light-300': $light-300,
+  'light-400': $light-400,
+  'light-500': $light-500,
+  'light-600': $light-600,
+  'light-700': $light-700,
+  'light-800': $light-800,
+  'light-900': $light-900
+) !default;
 
 $whites: (
-  "white-50": $white-50,
-  "white-100": $white-100,
-  "white-200": $white-200,
-  "white-300": $white-300,
-  "white-400": $white-400,
-  "white-500": $white-500,
-  "white-600": $white-600,
-  "white-700": $white-700,
-  "white-800": $white-800,
-  "white-900": $white-900,
+  'white-50': $white-50,
+  'white-100': $white-100,
+  'white-200': $white-200,
+  'white-300': $white-300,
+  'white-400': $white-400,
+  'white-500': $white-500,
+  'white-600': $white-600,
+  'white-700': $white-700,
+  'white-800': $white-800,
+  'white-900': $white-900
 ) !default;
 
 $darks: (
-  "dark-50": $dark-50,
-  "dark-100": $dark-100,
-  "dark-200": $dark-200,
-  "dark-300": $dark-300,
-  "dark-400": $dark-400,
-  "dark-500": $dark-500,
-  "dark-600": $dark-600,
-  "dark-700": $dark-700,
-  "dark-800": $dark-800,
-  "dark-900": $dark-900,
+  'dark-50': $dark-50,
+  'dark-100': $dark-100,
+  'dark-200': $dark-200,
+  'dark-300': $dark-300,
+  'dark-400': $dark-400,
+  'dark-500': $dark-500,
+  'dark-600': $dark-600,
+  'dark-700': $dark-700,
+  'dark-800': $dark-800,
+  'dark-900': $dark-900
 ) !default;
 
 $dangers: (
-  "danger-50": $danger-50,
-  "danger-100": $danger-100,
-  "danger-200": $danger-200,
-  "danger-300": $danger-300,
-  "danger-400": $danger-400,
-  "danger-500": $danger-500,
-  "danger-600": $danger-600,
-  "danger-700": $danger-700,
-  "danger-800": $danger-800,
-  "danger-900": $danger-900
+  'danger-50': $danger-50,
+  'danger-100': $danger-100,
+  'danger-200': $danger-200,
+  'danger-300': $danger-300,
+  'danger-400': $danger-400,
+  'danger-500': $danger-500,
+  'danger-600': $danger-600,
+  'danger-700': $danger-700,
+  'danger-800': $danger-800,
+  'danger-900': $danger-900
 ) !default;
 
-
 $warnings: (
-  "warning-50": $warning-50,
-  "warning-100": $warning-100,
-  "warning-200": $warning-200,
-  "warning-300": $warning-300,
-  "warning-400": $warning-400,
-  "warning-500": $warning-500,
-  "warning-600": $warning-600,
-  "warning-700": $warning-700,
-  "warning-800": $warning-800,
-  "warning-900": $warning-900
+  'warning-50': $warning-50,
+  'warning-100': $warning-100,
+  'warning-200': $warning-200,
+  'warning-300': $warning-300,
+  'warning-400': $warning-400,
+  'warning-500': $warning-500,
+  'warning-600': $warning-600,
+  'warning-700': $warning-700,
+  'warning-800': $warning-800,
+  'warning-900': $warning-900
 ) !default;
 
 $cyans: (
-  "cyan-50": $cyan-50,
-  "cyan-100": $cyan-100,
-  "cyan-200": $cyan-200,
-  "cyan-300": $cyan-300,
-  "cyan-400": $cyan-400,
-  "cyan-500": $cyan-500,
-  "cyan-600": $cyan-600,
-  "cyan-700": $cyan-700,
-  "cyan-800": $cyan-800,
-  "cyan-900": $cyan-900
+  'cyan-50': $cyan-50,
+  'cyan-100': $cyan-100,
+  'cyan-200': $cyan-200,
+  'cyan-300': $cyan-300,
+  'cyan-400': $cyan-400,
+  'cyan-500': $cyan-500,
+  'cyan-600': $cyan-600,
+  'cyan-700': $cyan-700,
+  'cyan-800': $cyan-800,
+  'cyan-900': $cyan-900
 ) !default;
 
 // TODO we can create utils to fill this with a function.
 $grays-mapping: (
-  "border-color": var(--#{$prefix}gray-200),
-  "text-color": var(--#{$prefix}gray-600),
-  "text-hover-color": var(--#{$prefix}gray-800),
-  "text-active-color": var(--#{$prefix}secondary-900),
+  'border-color': var(--#{$prefix}gray-200),
+  'text-color': var(--#{$prefix}gray-600),
+  'text-hover-color': var(--#{$prefix}gray-800),
+  'text-active-color': var(--#{$prefix}secondary-900)
 ) !default;
 
 $secondaries-mapping: (
-  "bg-color": var(--#{$prefix}secondary-600),
-  "bg-hover-color": var(--#{$prefix}secondary-800),
-  "bg-active-color": var(--#{$prefix}secondary-900),
-  "inert-color": var(--#{$prefix}secondary-600),
-  "bg-subtle-color": var(--#{$prefix}secondary-50),
-  "bg-subtle-hover-color": var(--#{$prefix}secondary-100),
-  "bg-subtle-active-color": var(--#{$prefix}secondary-200),
-  "border-color": var(--#{$prefix}secondary-600),
-  "text-color": var(--#{$prefix}secondary-600),
-  "text-hover-color": var(--#{$prefix}secondary-800),
-  "text-active-color": var(--#{$prefix}secondary-900),
+  'bg-color': var(--#{$prefix}secondary-600),
+  'bg-hover-color': var(--#{$prefix}secondary-800),
+  'bg-active-color': var(--#{$prefix}secondary-900),
+  'inert-color': var(--#{$prefix}secondary-600),
+  'bg-subtle-color': var(--#{$prefix}secondary-50),
+  'bg-subtle-hover-color': var(--#{$prefix}secondary-100),
+  'bg-subtle-active-color': var(--#{$prefix}secondary-200),
+  'border-color': var(--#{$prefix}secondary-600),
+  'text-color': var(--#{$prefix}secondary-600),
+  'text-hover-color': var(--#{$prefix}secondary-800),
+  'text-active-color': var(--#{$prefix}secondary-900)
 ) !default;
 
 $blues-mapping: (
-  "bg-color": var(--#{$prefix}blue-500),
-  "bg-hover-color": var(--#{$prefix}blue-700),
-  "bg-active-color": var(--#{$prefix}blue-800),
-  "inert-color": var(--#{$prefix}blue-500),
-  "bg-subtle-color": var(--#{$prefix}blue-50),
-  "bg-subtle-hover-color": var(--#{$prefix}blue-100),
-  "bg-subtle-active-color": var(--#{$prefix}blue-200),
-  "border-color": var(--#{$prefix}blue-500),
-  "text-color": var(--#{$prefix}blue-500),
-  "text-hover-color": var(--#{$prefix}blue-700),
-  "text-active-color": var(--#{$prefix}blue-800),
+  'bg-color': var(--#{$prefix}blue-500),
+  'bg-hover-color': var(--#{$prefix}blue-700),
+  'bg-active-color': var(--#{$prefix}blue-800),
+  'inert-color': var(--#{$prefix}blue-500),
+  'bg-subtle-color': var(--#{$prefix}blue-50),
+  'bg-subtle-hover-color': var(--#{$prefix}blue-100),
+  'bg-subtle-active-color': var(--#{$prefix}blue-200),
+  'border-color': var(--#{$prefix}blue-500),
+  'text-color': var(--#{$prefix}blue-500),
+  'text-hover-color': var(--#{$prefix}blue-700),
+  'text-active-color': var(--#{$prefix}blue-800)
 ) !default;
 
 $pacifics-mapping: (
-  "bg-color": var(--#{$prefix}pacific-500),
-  "bg-hover-color": var(--#{$prefix}pacific-700),
-  "bg-active-color": var(--#{$prefix}pacific-800),
-  "inert-color": var(--#{$prefix}pacific-500),
-  "bg-subtle-color": var(--#{$prefix}pacific-50),
-  "bg-subtle-hover-color": var(--#{$prefix}pacific-100),
-  "bg-subtle-active-color": var(--#{$prefix}pacific-200),
-  "border-color": var(--#{$prefix}pacific-500),
-  "text-color": var(--#{$prefix}pacific-500),
-  "text-hover-color": var(--#{$prefix}pacific-700),
-  "text-active-color": var(--#{$prefix}pacific-800),
+  'bg-color': var(--#{$prefix}pacific-500),
+  'bg-hover-color': var(--#{$prefix}pacific-700),
+  'bg-active-color': var(--#{$prefix}pacific-800),
+  'inert-color': var(--#{$prefix}pacific-500),
+  'bg-subtle-color': var(--#{$prefix}pacific-50),
+  'bg-subtle-hover-color': var(--#{$prefix}pacific-100),
+  'bg-subtle-active-color': var(--#{$prefix}pacific-200),
+  'border-color': var(--#{$prefix}pacific-500),
+  'text-color': var(--#{$prefix}pacific-500),
+  'text-hover-color': var(--#{$prefix}pacific-700),
+  'text-active-color': var(--#{$prefix}pacific-800)
 ) !default;
 
 $lights-mapping: (
-  "bg-color": var(--#{$prefix}light-100),
-  "bg-hover-color": var(--#{$prefix}light-200),
-  "bg-active-color": var(--#{$prefix}light-300),
-  "inert-color": var(--#{$prefix}light-100),
-  "bg-subtle-color": var(--#{$prefix}white),
-  "bg-subtle-hover-color": var(--#{$prefix}light-50),
-  "bg-subtle-active-color": var(--#{$prefix}light-100),
-  "border-color": var(--#{$prefix}light-500),
-  "text-color": var(--#{$prefix}light-600),
-  "text-hover-color": var(--#{$prefix}light-800),
-  "text-active-color": var(--#{$prefix}light-900),
+  'bg-color': var(--#{$prefix}light-100),
+  'bg-hover-color': var(--#{$prefix}light-200),
+  'bg-active-color': var(--#{$prefix}light-300),
+  'inert-color': var(--#{$prefix}light-100),
+  'bg-subtle-color': var(--#{$prefix}white),
+  'bg-subtle-hover-color': var(--#{$prefix}light-50),
+  'bg-subtle-active-color': var(--#{$prefix}light-100),
+  'border-color': var(--#{$prefix}light-500),
+  'text-color': var(--#{$prefix}light-600),
+  'text-hover-color': var(--#{$prefix}light-800),
+  'text-active-color': var(--#{$prefix}light-900)
 ) !default;
 
 $whites-mapping: (
-  "bg-color": var(--#{$prefix}white-50),
-  "bg-hover-color": var(--#{$prefix}white-100),
-  "bg-active-color": var(--#{$prefix}white-200),
-  "inert-color": var(--#{$prefix}white-50),
-  "bg-subtle-color": var(--#{$prefix}white-50),
-  "bg-subtle-hover-color": var(--#{$prefix}white-100),
-  "bg-subtle-active-color": var(--#{$prefix}white-500),
-  "border-color": var(--#{$prefix}white-50),
-  "text-color": var(--#{$prefix}white-600),
-  "text-hover-color": var(--#{$prefix}white-800),
-  "text-active-color": var(--#{$prefix}white-900),
+  'bg-color': var(--#{$prefix}white-50),
+  'bg-hover-color': var(--#{$prefix}white-100),
+  'bg-active-color': var(--#{$prefix}white-200),
+  'inert-color': var(--#{$prefix}white-50),
+  'bg-subtle-color': var(--#{$prefix}white-50),
+  'bg-subtle-hover-color': var(--#{$prefix}white-100),
+  'bg-subtle-active-color': var(--#{$prefix}white-500),
+  'border-color': var(--#{$prefix}white-50),
+  'text-color': var(--#{$prefix}white-600),
+  'text-hover-color': var(--#{$prefix}white-800),
+  'text-active-color': var(--#{$prefix}white-900)
 ) !default;
 
 $primaries-mapping: (
-  "bg-color": var(--#{$prefix}primary-500),
-  "bg-hover-color": var(--#{$prefix}primary-700),
-  "bg-active-color": var(--#{$prefix}primary-800),
-  "inert-color": var(--#{$prefix}primary-500),
-  "bg-subtle-color": var(--#{$prefix}primary-50),
-  "bg-subtle-hover-color": var(--#{$prefix}primary-100),
-  "bg-subtle-active-color": var(--#{$prefix}primary-200),
-  "bg-subtle-text-color": var(--#{$prefix}primary-50-color),
-  "border-color": var(--#{$prefix}primary-500),
-  "text-color": var(--#{$prefix}primary-500),
-  "text-hover-color": var(--#{$prefix}primary-700),
-  "text-active-color": var(--#{$prefix}primary-800),
+  'bg-color': var(--#{$prefix}primary-500),
+  'bg-hover-color': var(--#{$prefix}primary-700),
+  'bg-active-color': var(--#{$prefix}primary-800),
+  'inert-color': var(--#{$prefix}primary-500),
+  'bg-subtle-color': var(--#{$prefix}primary-50),
+  'bg-subtle-hover-color': var(--#{$prefix}primary-100),
+  'bg-subtle-active-color': var(--#{$prefix}primary-200),
+  'bg-subtle-text-color': var(--#{$prefix}primary-50-color),
+  'border-color': var(--#{$prefix}primary-500),
+  'text-color': var(--#{$prefix}primary-500),
+  'text-hover-color': var(--#{$prefix}primary-700),
+  'text-active-color': var(--#{$prefix}primary-800)
 ) !default;
 
 $darks-mapping: (
-  "bg-color": var(--#{$prefix}dark-700),
-  "bg-hover-color": var(--#{$prefix}dark-800),
-  "bg-active-color": var(--#{$prefix}dark-900),
-  "inert-color": var(--#{$prefix}dark-700),
-  "bg-subtle-color": var(--#{$prefix}dark-500),
-  "bg-subtle-hover-color": var(--#{$prefix}dark-600),
-  "bg-subtle-active-color": var(--#{$prefix}dark-700),
-  "border-color": var(--#{$prefix}dark-500),
-  "text-color": var(--#{$prefix}dark-700),
-  "text-hover-color": var(--#{$prefix}dark-900),
-  "text-active-color": var(--#{$prefix}black),
+  'bg-color': var(--#{$prefix}dark-700),
+  'bg-hover-color': var(--#{$prefix}dark-800),
+  'bg-active-color': var(--#{$prefix}dark-900),
+  'inert-color': var(--#{$prefix}dark-700),
+  'bg-subtle-color': var(--#{$prefix}dark-500),
+  'bg-subtle-hover-color': var(--#{$prefix}dark-600),
+  'bg-subtle-active-color': var(--#{$prefix}dark-700),
+  'border-color': var(--#{$prefix}dark-500),
+  'text-color': var(--#{$prefix}dark-700),
+  'text-hover-color': var(--#{$prefix}dark-900),
+  'text-active-color': var(--#{$prefix}black)
 ) !default;
 
-
 $indigos-mapping: (
-  "bg-color": var(--#{$prefix}indigo-500),
-  "bg-hover-color": var(--#{$prefix}indigo-700),
-  "bg-active-color": var(--#{$prefix}indigo-800),
-  "inert-color": var(--#{$prefix}indigo-500),
-  "bg-subtle-color": var(--#{$prefix}indigo-50),
-  "bg-subtle-hover-color": var(--#{$prefix}indigo-100),
-  "bg-subtle-active-color": var(--#{$prefix}indigo-200),
-  "border-color": var(--#{$prefix}indigo-500),
-  "text-color": var(--#{$prefix}indigo-500),
-  "text-hover-color": var(--#{$prefix}indigo-700),
-  "text-active-color": var(--#{$prefix}indigo-800),
+  'bg-color': var(--#{$prefix}indigo-500),
+  'bg-hover-color': var(--#{$prefix}indigo-700),
+  'bg-active-color': var(--#{$prefix}indigo-800),
+  'inert-color': var(--#{$prefix}indigo-500),
+  'bg-subtle-color': var(--#{$prefix}indigo-50),
+  'bg-subtle-hover-color': var(--#{$prefix}indigo-100),
+  'bg-subtle-active-color': var(--#{$prefix}indigo-200),
+  'border-color': var(--#{$prefix}indigo-500),
+  'text-color': var(--#{$prefix}indigo-500),
+  'text-hover-color': var(--#{$prefix}indigo-700),
+  'text-active-color': var(--#{$prefix}indigo-800)
 ) !default;
 
 $purples-mapping: (
-  "bg-color": var(--#{$prefix}purple-500),
-  "bg-hover-color": var(--#{$prefix}purple-700),
-  "bg-active-color": var(--#{$prefix}purple-800),
-  "inert-color": var(--#{$prefix}purple-500),
-  "bg-subtle-color": var(--#{$prefix}purple-50),
-  "bg-subtle-hover-color": var(--#{$prefix}purple-100),
-  "bg-subtle-active-color": var(--#{$prefix}purple-200),
-  "border-color": var(--#{$prefix}purple-500),
-  "text-color": var(--#{$prefix}purple-500),
-  "text-hover-color": var(--#{$prefix}purple-700),
-  "text-active-color": var(--#{$prefix}purple-800),
+  'bg-color': var(--#{$prefix}purple-500),
+  'bg-hover-color': var(--#{$prefix}purple-700),
+  'bg-active-color': var(--#{$prefix}purple-800),
+  'inert-color': var(--#{$prefix}purple-500),
+  'bg-subtle-color': var(--#{$prefix}purple-50),
+  'bg-subtle-hover-color': var(--#{$prefix}purple-100),
+  'bg-subtle-active-color': var(--#{$prefix}purple-200),
+  'border-color': var(--#{$prefix}purple-500),
+  'text-color': var(--#{$prefix}purple-500),
+  'text-hover-color': var(--#{$prefix}purple-700),
+  'text-active-color': var(--#{$prefix}purple-800)
 ) !default;
 
 $mysteries-mapping: (
-  "bg-color": var(--#{$prefix}mystery-500),
-  "bg-hover-color": var(--#{$prefix}mystery-700),
-  "bg-active-color": var(--#{$prefix}mystery-800),
-  "inert-color": var(--#{$prefix}mystery-500),
-  "bg-subtle-color": var(--#{$prefix}mystery-100),
-  "bg-subtle-hover-color": var(--#{$prefix}mystery-100),
-  "bg-subtle-active-color": var(--#{$prefix}mystery-300),
-  "border-color": var(--#{$prefix}mystery-500),
-  "text-color": var(--#{$prefix}mystery-500),
-  "text-hover-color": var(--#{$prefix}mystery-700),
-  "text-active-color": var(--#{$prefix}mystery-800),
+  'bg-color': var(--#{$prefix}mystery-500),
+  'bg-hover-color': var(--#{$prefix}mystery-700),
+  'bg-active-color': var(--#{$prefix}mystery-800),
+  'inert-color': var(--#{$prefix}mystery-500),
+  'bg-subtle-color': var(--#{$prefix}mystery-100),
+  'bg-subtle-hover-color': var(--#{$prefix}mystery-100),
+  'bg-subtle-active-color': var(--#{$prefix}mystery-300),
+  'border-color': var(--#{$prefix}mystery-500),
+  'text-color': var(--#{$prefix}mystery-500),
+  'text-hover-color': var(--#{$prefix}mystery-700),
+  'text-active-color': var(--#{$prefix}mystery-800)
 ) !default;
 
 $pinks-mapping: (
-  "bg-color": var(--#{$prefix}pink-500),
-  "bg-hover-color": var(--#{$prefix}pink-700),
-  "bg-active-color": var(--#{$prefix}pink-800),
-  "inert-color": var(--#{$prefix}pink-500),
-  "bg-subtle-color": var(--#{$prefix}pink-100),
-  "bg-subtle-hover-color": var(--#{$prefix}pink-200),
-  "bg-subtle-active-color": var(--#{$prefix}pink-300),
-  "border-color": var(--#{$prefix}pink-500),
-  "text-color": var(--#{$prefix}pink-500),
-  "text-hover-color": var(--#{$prefix}pink-700),
-  "text-active-color": var(--#{$prefix}pink-800),
+  'bg-color': var(--#{$prefix}pink-500),
+  'bg-hover-color': var(--#{$prefix}pink-700),
+  'bg-active-color': var(--#{$prefix}pink-800),
+  'inert-color': var(--#{$prefix}pink-500),
+  'bg-subtle-color': var(--#{$prefix}pink-100),
+  'bg-subtle-hover-color': var(--#{$prefix}pink-200),
+  'bg-subtle-active-color': var(--#{$prefix}pink-300),
+  'border-color': var(--#{$prefix}pink-500),
+  'text-color': var(--#{$prefix}pink-500),
+  'text-hover-color': var(--#{$prefix}pink-700),
+  'text-active-color': var(--#{$prefix}pink-800)
 ) !default;
 
 $loves-mapping: (
-  "bg-color": var(--#{$prefix}love-500),
-  "bg-hover-color": var(--#{$prefix}love-700),
-  "bg-active-color": var(--#{$prefix}love-800),
-  "inert-color": var(--#{$prefix}love-500),
-  "bg-subtle-color": var(--#{$prefix}love-50),
-  "bg-subtle-hover-color": var(--#{$prefix}love-100),
-  "bg-subtle-active-color": var(--#{$prefix}love-200),
-  "border-color": var(--#{$prefix}love-500),
-  "text-color": var(--#{$prefix}love-500),
-  "text-hover-color": var(--#{$prefix}love-700),
-  "text-active-color": var(--#{$prefix}love-800),
+  'bg-color': var(--#{$prefix}love-500),
+  'bg-hover-color': var(--#{$prefix}love-700),
+  'bg-active-color': var(--#{$prefix}love-800),
+  'inert-color': var(--#{$prefix}love-500),
+  'bg-subtle-color': var(--#{$prefix}love-50),
+  'bg-subtle-hover-color': var(--#{$prefix}love-100),
+  'bg-subtle-active-color': var(--#{$prefix}love-200),
+  'border-color': var(--#{$prefix}love-500),
+  'text-color': var(--#{$prefix}love-500),
+  'text-hover-color': var(--#{$prefix}love-700),
+  'text-active-color': var(--#{$prefix}love-800)
 ) !default;
 
 $reds-mapping: (
-  "bg-color": var(--#{$prefix}red-500),
-  "bg-hover-color": var(--#{$prefix}red-700),
-  "bg-active-color": var(--#{$prefix}red-800),
-  "inert-color": var(--#{$prefix}red-500),
-  "bg-subtle-color": var(--#{$prefix}red-50),
-  "bg-subtle-hover-color": var(--#{$prefix}red-100),
-  "bg-subtle-active-color": var(--#{$prefix}red-200),
-  "border-color": var(--#{$prefix}red-500),
-  "text-color": var(--#{$prefix}red-500),
-  "text-hover-color": var(--#{$prefix}red-700),
-  "text-active-color": var(--#{$prefix}red-800),
+  'bg-color': var(--#{$prefix}red-500),
+  'bg-hover-color': var(--#{$prefix}red-700),
+  'bg-active-color': var(--#{$prefix}red-800),
+  'inert-color': var(--#{$prefix}red-500),
+  'bg-subtle-color': var(--#{$prefix}red-50),
+  'bg-subtle-hover-color': var(--#{$prefix}red-100),
+  'bg-subtle-active-color': var(--#{$prefix}red-200),
+  'border-color': var(--#{$prefix}red-500),
+  'text-color': var(--#{$prefix}red-500),
+  'text-hover-color': var(--#{$prefix}red-700),
+  'text-active-color': var(--#{$prefix}red-800)
 ) !default;
 
 $oranges-mapping: (
-  "bg-color": var(--#{$prefix}orange-500),
-  "bg-hover-color": var(--#{$prefix}orange-700),
-  "bg-active-color": var(--#{$prefix}orange-800),
-  "inert-color": var(--#{$prefix}orange-600),
-  "bg-subtle-color": var(--#{$prefix}orange-50),
-  "bg-subtle-hover-color": var(--#{$prefix}orange-100),
-  "bg-subtle-active-color": var(--#{$prefix}orange-200),
-  "border-color": var(--#{$prefix}orange-500),
-  "text-color": var(--#{$prefix}orange-800),
-  "text-hover-color": var(--#{$prefix}orange-900),
-  "text-active-color": var(--#{$prefix}orange-900),
+  'bg-color': var(--#{$prefix}orange-500),
+  'bg-hover-color': var(--#{$prefix}orange-700),
+  'bg-active-color': var(--#{$prefix}orange-800),
+  'inert-color': var(--#{$prefix}orange-600),
+  'bg-subtle-color': var(--#{$prefix}orange-50),
+  'bg-subtle-hover-color': var(--#{$prefix}orange-100),
+  'bg-subtle-active-color': var(--#{$prefix}orange-200),
+  'border-color': var(--#{$prefix}orange-500),
+  'text-color': var(--#{$prefix}orange-800),
+  'text-hover-color': var(--#{$prefix}orange-900),
+  'text-active-color': var(--#{$prefix}orange-900)
 ) !default;
 
-
 $yellows-mapping: (
-  "bg-color": var(--#{$prefix}yellow-500),
-  "bg-hover-color": var(--#{$prefix}yellow-700),
-  "bg-active-color": var(--#{$prefix}yellow-800),
-  "inert-color": var(--#{$prefix}yellow-500),
-  "bg-subtle-color": var(--#{$prefix}yellow-50),
-  "bg-subtle-hover-color": var(--#{$prefix}yellow-100),
-  "bg-subtle-active-color": var(--#{$prefix}yellow-200),
-  "border-color": var(--#{$prefix}yellow-500),
-  "text-color": var(--#{$prefix}yellow-500),
-  "text-hover-color": var(--#{$prefix}yellow-700),
-  "text-active-color": var(--#{$prefix}yellow-800),
+  'bg-color': var(--#{$prefix}yellow-500),
+  'bg-hover-color': var(--#{$prefix}yellow-700),
+  'bg-active-color': var(--#{$prefix}yellow-800),
+  'inert-color': var(--#{$prefix}yellow-500),
+  'bg-subtle-color': var(--#{$prefix}yellow-50),
+  'bg-subtle-hover-color': var(--#{$prefix}yellow-100),
+  'bg-subtle-active-color': var(--#{$prefix}yellow-200),
+  'border-color': var(--#{$prefix}yellow-500),
+  'text-color': var(--#{$prefix}yellow-500),
+  'text-hover-color': var(--#{$prefix}yellow-700),
+  'text-active-color': var(--#{$prefix}yellow-800)
 ) !default;
 
 $greens-mapping: (
-  "bg-color": var(--#{$prefix}green-500),
-  "bg-hover-color": var(--#{$prefix}green-700),
-  "bg-active-color": var(--#{$prefix}green-800),
-  "inert-color": var(--#{$prefix}green-500),
-  "bg-subtle-color": var(--#{$prefix}green-50),
-  "bg-subtle-hover-color": var(--#{$prefix}green-100),
-  "bg-subtle-active-color": var(--#{$prefix}green-200),
-  "border-color": var(--#{$prefix}green-500),
-  "text-color": var(--#{$prefix}green-500),
-  "text-hover-color": var(--#{$prefix}green-700),
-  "text-active-color": var(--#{$prefix}green-800),
+  'bg-color': var(--#{$prefix}green-500),
+  'bg-hover-color': var(--#{$prefix}green-700),
+  'bg-active-color': var(--#{$prefix}green-800),
+  'inert-color': var(--#{$prefix}green-500),
+  'bg-subtle-color': var(--#{$prefix}green-50),
+  'bg-subtle-hover-color': var(--#{$prefix}green-100),
+  'bg-subtle-active-color': var(--#{$prefix}green-200),
+  'border-color': var(--#{$prefix}green-500),
+  'text-color': var(--#{$prefix}green-500),
+  'text-hover-color': var(--#{$prefix}green-700),
+  'text-active-color': var(--#{$prefix}green-800)
 ) !default;
 
 $teals-mapping: (
-  "bg-color": var(--#{$prefix}teal-500),
-  "bg-hover-color": var(--#{$prefix}teal-700),
-  "bg-active-color": var(--#{$prefix}teal-800),
-  "inert-color": var(--#{$prefix}teal-500),
-  "bg-subtle-color": var(--#{$prefix}teal-50),
-  "bg-subtle-hover-color": var(--#{$prefix}teal-100),
-  "bg-subtle-active-color": var(--#{$prefix}teal-200),
-  "border-color": var(--#{$prefix}teal-500),
-  "text-color": var(--#{$prefix}teal-500),
-  "text-hover-color": var(--#{$prefix}teal-700),
-  "text-active-color": var(--#{$prefix}teal-800),
+  'bg-color': var(--#{$prefix}teal-500),
+  'bg-hover-color': var(--#{$prefix}teal-700),
+  'bg-active-color': var(--#{$prefix}teal-800),
+  'inert-color': var(--#{$prefix}teal-500),
+  'bg-subtle-color': var(--#{$prefix}teal-50),
+  'bg-subtle-hover-color': var(--#{$prefix}teal-100),
+  'bg-subtle-active-color': var(--#{$prefix}teal-200),
+  'border-color': var(--#{$prefix}teal-500),
+  'text-color': var(--#{$prefix}teal-500),
+  'text-hover-color': var(--#{$prefix}teal-700),
+  'text-active-color': var(--#{$prefix}teal-800)
 ) !default;
 
 $infos-mapping: (
-  "bg-color": var(--#{$prefix}info-500),
-  "bg-hover-color": var(--#{$prefix}info-700),
-  "bg-active-color": var(--#{$prefix}info-800),
-  "inert-color": var(--#{$prefix}info-500),
-  "bg-subtle-color": var(--#{$prefix}info-50),
-  "bg-subtle-hover-color": var(--#{$prefix}info-100),
-  "bg-subtle-active-color": var(--#{$prefix}info-200),
-  "border-color": var(--#{$prefix}info-500),
-  "text-color": var(--#{$prefix}info-500),
-  "text-hover-color": var(--#{$prefix}info-700),
-  "text-active-color": var(--#{$prefix}info-800),
+  'bg-color': var(--#{$prefix}info-500),
+  'bg-hover-color': var(--#{$prefix}info-700),
+  'bg-active-color': var(--#{$prefix}info-800),
+  'inert-color': var(--#{$prefix}info-500),
+  'bg-subtle-color': var(--#{$prefix}info-50),
+  'bg-subtle-hover-color': var(--#{$prefix}info-100),
+  'bg-subtle-active-color': var(--#{$prefix}info-200),
+  'border-color': var(--#{$prefix}info-500),
+  'text-color': var(--#{$prefix}info-500),
+  'text-hover-color': var(--#{$prefix}info-700),
+  'text-active-color': var(--#{$prefix}info-800)
 ) !default;
 
 $successes-mapping: (
-  "bg-color": var(--#{$prefix}success-500),
-  "bg-hover-color": var(--#{$prefix}success-700),
-  "bg-active-color": var(--#{$prefix}success-800),
-  "inert-color": var(--#{$prefix}success-500),
-  "bg-subtle-color": var(--#{$prefix}success-50),
-  "bg-subtle-hover-color": var(--#{$prefix}success-100),
-  "bg-subtle-active-color": var(--#{$prefix}success-200),
-  "border-color": var(--#{$prefix}success-500),
-  "text-color": var(--#{$prefix}success-500),
-  "text-hover-color": var(--#{$prefix}success-700),
-  "text-active-color": var(--#{$prefix}success-800),
+  'bg-color': var(--#{$prefix}success-500),
+  'bg-hover-color': var(--#{$prefix}success-700),
+  'bg-active-color': var(--#{$prefix}success-800),
+  'inert-color': var(--#{$prefix}success-500),
+  'bg-subtle-color': var(--#{$prefix}success-50),
+  'bg-subtle-hover-color': var(--#{$prefix}success-100),
+  'bg-subtle-active-color': var(--#{$prefix}success-200),
+  'border-color': var(--#{$prefix}success-500),
+  'text-color': var(--#{$prefix}success-500),
+  'text-hover-color': var(--#{$prefix}success-700),
+  'text-active-color': var(--#{$prefix}success-800)
 ) !default;
 
 $dangers-mapping: (
-  "bg-color": var(--#{$prefix}danger-500),
-  "bg-hover-color": var(--#{$prefix}danger-700),
-  "bg-active-color": var(--#{$prefix}danger-800),
-  "inert-color": var(--#{$prefix}danger-500),
-  "bg-subtle-color": var(--#{$prefix}danger-50),
-  "bg-subtle-hover-color": var(--#{$prefix}danger-100),
-  "bg-subtle-active-color": var(--#{$prefix}danger-200),
-  "border-color": var(--#{$prefix}danger-500),
-  "text-color": var(--#{$prefix}danger-500),
-  "text-hover-color": var(--#{$prefix}danger-700),
-  "text-active-color": var(--#{$prefix}danger-800),
+  'bg-color': var(--#{$prefix}danger-500),
+  'bg-hover-color': var(--#{$prefix}danger-700),
+  'bg-active-color': var(--#{$prefix}danger-800),
+  'inert-color': var(--#{$prefix}danger-500),
+  'bg-subtle-color': var(--#{$prefix}danger-50),
+  'bg-subtle-hover-color': var(--#{$prefix}danger-100),
+  'bg-subtle-active-color': var(--#{$prefix}danger-200),
+  'border-color': var(--#{$prefix}danger-500),
+  'text-color': var(--#{$prefix}danger-500),
+  'text-hover-color': var(--#{$prefix}danger-700),
+  'text-active-color': var(--#{$prefix}danger-800)
 ) !default;
 
 $warnings-mapping: (
-  "bg-color": var(--#{$prefix}warning-500),
-  "bg-hover-color": var(--#{$prefix}warning-600),
-  "bg-active-color": var(--#{$prefix}warning-700),
-  "inert-color": var(--#{$prefix}warning-500),
-  "bg-subtle-color": var(--#{$prefix}warning-50),
-  "bg-subtle-hover-color": var(--#{$prefix}warning-100),
-  "bg-subtle-active-color": var(--#{$prefix}warning-200),
-  "border-color": var(--#{$prefix}warning-500),
-  "text-color": var(--#{$prefix}warning-800),
-  "text-hover-color": var(--#{$prefix}warning-900),
-  "text-active-color": var(--#{$prefix}warning-900),
+  'bg-color': var(--#{$prefix}warning-500),
+  'bg-hover-color': var(--#{$prefix}warning-600),
+  'bg-active-color': var(--#{$prefix}warning-700),
+  'inert-color': var(--#{$prefix}warning-500),
+  'bg-subtle-color': var(--#{$prefix}warning-50),
+  'bg-subtle-hover-color': var(--#{$prefix}warning-100),
+  'bg-subtle-active-color': var(--#{$prefix}warning-200),
+  'border-color': var(--#{$prefix}warning-500),
+  'text-color': var(--#{$prefix}warning-800),
+  'text-hover-color': var(--#{$prefix}warning-900),
+  'text-active-color': var(--#{$prefix}warning-900)
 ) !default;
 
 $cyans-mapping: (
-  "bg-color": var(--#{$prefix}cyan-500),
-  "bg-hover-color": var(--#{$prefix}cyan-700),
-  "bg-active-color": var(--#{$prefix}cyan-800),
-  "inert-color": var(--#{$prefix}cyan-500),
-  "bg-subtle-color": var(--#{$prefix}cyan-50),
-  "bg-subtle-hover-color": var(--#{$prefix}cyan-100),
-  "bg-subtle-active-color": var(--#{$prefix}cyan-200),
-  "border-color": var(--#{$prefix}cyan-500),
-  "text-color": var(--#{$prefix}cyan-500),
-  "text-hover-color": var(--#{$prefix}cyan-700),
-  "text-active-color": var(--#{$prefix}cyan-800),
+  'bg-color': var(--#{$prefix}cyan-500),
+  'bg-hover-color': var(--#{$prefix}cyan-700),
+  'bg-active-color': var(--#{$prefix}cyan-800),
+  'inert-color': var(--#{$prefix}cyan-500),
+  'bg-subtle-color': var(--#{$prefix}cyan-50),
+  'bg-subtle-hover-color': var(--#{$prefix}cyan-100),
+  'bg-subtle-active-color': var(--#{$prefix}cyan-200),
+  'border-color': var(--#{$prefix}cyan-500),
+  'text-color': var(--#{$prefix}cyan-500),
+  'text-hover-color': var(--#{$prefix}cyan-700),
+  'text-active-color': var(--#{$prefix}cyan-800)
 ) !default;
 
 // Create a map of all colors shades
@@ -956,57 +951,159 @@ $shade-colors: () !default;
 $shade-maps: () !default;
 
 // stylelint-disable  scss/dollar-variable-default
-$shade-maps: map.set($shade-maps, "blue", $blues-mapping);
-$shade-maps: map.set($shade-maps, "cyan", $cyans-mapping);
-$shade-maps: map.set($shade-maps, "teal", $teals-mapping);
-$shade-maps: map.set($shade-maps, "green", $greens-mapping);
-$shade-maps: map.set($shade-maps, "yellow", $yellows-mapping);
-$shade-maps: map.set($shade-maps, "orange", $oranges-mapping);
-$shade-maps: map.set($shade-maps, "red", $reds-mapping);
-$shade-maps: map.set($shade-maps, "pink", $pinks-mapping);
-$shade-maps: map.set($shade-maps, "love", $loves-mapping);
-$shade-maps: map.set($shade-maps, "mystery", $mysteries-mapping);
-$shade-maps: map.set($shade-maps, "info", $infos-mapping);
-$shade-maps: map.set($shade-maps, "success", $successes-mapping);
-$shade-maps: map.set($shade-maps, "warning", $warnings-mapping);
-$shade-maps: map.set($shade-maps, "danger", $dangers-mapping);
-$shade-maps: map.set($shade-maps, "purple", $purples-mapping);
-$shade-maps: map.set($shade-maps, "indigo", $indigos-mapping);
-$shade-maps: map.set($shade-maps, "primary", $primaries-mapping);
-$shade-maps: map.set($shade-maps, "white", $whites-mapping);
-$shade-maps: map.set($shade-maps, "light", $lights-mapping);
-$shade-maps: map.set($shade-maps, "dark", $darks-mapping);
-$shade-maps: map.set($shade-maps, "pacific", $pacifics-mapping);
-$shade-maps: map.set($shade-maps, "gray", $grays-mapping);
-$shade-maps: map.set($shade-maps, "secondary", $secondaries-mapping);
-
-$shade-colors: map.merge($map1: $shade-colors, $map2: $infos);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $successes);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $warnings);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $dangers);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $primaries);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $blues);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $cyans);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $teals);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $greens);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $yellows);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $oranges);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $reds);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $pinks);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $purples);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $indigos);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $lights);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $darks);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $whites);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $loves);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $mysteries);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $pacifics);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $grays);
-$shade-colors: map.merge($map1: $shade-colors, $map2: $secondaries);
+$shade-maps: map.set($shade-maps, 'blue', $blues-mapping);
+$shade-maps: map.set($shade-maps, 'cyan', $cyans-mapping);
+$shade-maps: map.set($shade-maps, 'teal', $teals-mapping);
+$shade-maps: map.set($shade-maps, 'green', $greens-mapping);
+$shade-maps: map.set($shade-maps, 'yellow', $yellows-mapping);
+$shade-maps: map.set($shade-maps, 'orange', $oranges-mapping);
+$shade-maps: map.set($shade-maps, 'red', $reds-mapping);
+$shade-maps: map.set($shade-maps, 'pink', $pinks-mapping);
+$shade-maps: map.set($shade-maps, 'love', $loves-mapping);
+$shade-maps: map.set($shade-maps, 'mystery', $mysteries-mapping);
+$shade-maps: map.set($shade-maps, 'info', $infos-mapping);
+$shade-maps: map.set($shade-maps, 'success', $successes-mapping);
+$shade-maps: map.set($shade-maps, 'warning', $warnings-mapping);
+$shade-maps: map.set($shade-maps, 'danger', $dangers-mapping);
+$shade-maps: map.set($shade-maps, 'purple', $purples-mapping);
+$shade-maps: map.set($shade-maps, 'indigo', $indigos-mapping);
+$shade-maps: map.set($shade-maps, 'primary', $primaries-mapping);
+$shade-maps: map.set($shade-maps, 'white', $whites-mapping);
+$shade-maps: map.set($shade-maps, 'light', $lights-mapping);
+$shade-maps: map.set($shade-maps, 'dark', $darks-mapping);
+$shade-maps: map.set($shade-maps, 'pacific', $pacifics-mapping);
+$shade-maps: map.set($shade-maps, 'gray', $grays-mapping);
+$shade-maps: map.set($shade-maps, 'secondary', $secondaries-mapping);
+
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $infos
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $successes
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $warnings
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $dangers
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $primaries
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $blues
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $cyans
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $teals
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $greens
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $yellows
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $oranges
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $reds
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $pinks
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $purples
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $indigos
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $lights
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $darks
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $whites
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $loves
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $mysteries
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $pacifics
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $grays
+);
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $secondaries
+);
 // stylelint-enable  scss/dollar-variable-default
 
 // fusv-enable
 
+// scss-docs-start theme-text-variables
+// $primary-text-emphasis:   shade-color($primary, 60%) !default;
+// $secondary-text-emphasis: shade-color($secondary, 60%) !default;
+// $success-text-emphasis:   shade-color($success, 60%) !default;
+// $info-text-emphasis:      shade-color($info, 60%) !default;
+// $warning-text-emphasis:   shade-color($warning, 60%) !default;
+// $danger-text-emphasis:    shade-color($danger, 60%) !default;
+// $light-text-emphasis:     $gray-700 !default;
+// $dark-text-emphasis:      $gray-700 !default;
+// scss-docs-end theme-text-variables
+
+// scss-docs-start theme-bg-subtle-variables
+// $primary-bg-subtle:       tint-color($primary, 80%) !default;
+// $secondary-bg-subtle:     tint-color($secondary, 80%) !default;
+// $success-bg-subtle:       tint-color($success, 80%) !default;
+// $info-bg-subtle:          tint-color($info, 80%) !default;
+// $warning-bg-subtle:       tint-color($warning, 80%) !default;
+// $danger-bg-subtle:        tint-color($danger, 80%) !default;
+// $light-bg-subtle:         mix($gray-100, $white) !default;
+// $dark-bg-subtle:          $gray-400 !default;
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+// $primary-border-subtle:   tint-color($primary, 60%) !default;
+// $secondary-border-subtle: tint-color($secondary, 60%) !default;
+// $success-border-subtle:   tint-color($success, 60%) !default;
+// $info-border-subtle:      tint-color($info, 60%) !default;
+// $warning-border-subtle:   tint-color($warning, 60%) !default;
+// $danger-border-subtle:    tint-color($danger, 60%) !default;
+// $light-border-subtle:     $gray-200 !default;
+// $dark-border-subtle:      $gray-500 !default;
+// scss-docs-end theme-border-subtle-variables
+
 // Characters which are escaped by the escape-svg function
 // $escaped-characters: (
 //   ("<", "%3c"),
@@ -1022,12 +1119,13 @@ $shade-colors: map.merge($map1: $shade-colors, $map2: $secondaries);
 
 // $enable-caret:                true !default;
 // $enable-rounded:              true !default;
-$enable-shadows:              false !default;
+$enable-shadows: false !default;
 // $enable-gradients:            false !default;
 // $enable-transitions:          true !default;
 // $enable-reduced-motion:       true !default;
 // $enable-smooth-scroll:        true !default;
 // $enable-grid-classes:         true !default;
+// $enable-container-classes:    true !default;
 // $enable-cssgrid:              false !default;
 // $enable-button-pointers:      true !default;
 // $enable-rfs:                  true !default;
@@ -1036,7 +1134,8 @@ $enable-negative-margins: true !default;
 // $enable-deprecation-messages: true !default;
 // $enable-important-utilities:  true !default;
 
-// Prefix for :root CSS variables
+$enable-dark-mode: false !default;
+// $color-mode-type:             data !default; // `data` or `media-query`
 
 // Gradient
 //
@@ -1108,9 +1207,17 @@ $spacers: (
 //
 // Settings for the `<body>` element.
 
-$body-bg: var(--#{$prefix}white) !default;
-$body-color: var(--#{$prefix}gray-900) !default;
 // $body-text-align:           null !default;
+$body-color: $gray-900 !default;
+$body-bg: $white !default;
+
+$body-secondary-color: $gray-700 !default;
+$body-secondary-bg: $gray-200 !default;
+
+// $body-tertiary-color:       rgba($body-color, .5) !default;
+$body-tertiary-bg: $gray-100 !default;
+
+$body-emphasis-color: $black !default;
 
 // Links
 //
@@ -1125,13 +1232,21 @@ $link-hover-decoration: underline !default;
 // $stretched-link-pseudo-element:           after !default;
 // $stretched-link-z-index:                  1 !default;
 
+// Icon links
+// scss-docs-start icon-link-variables
+// $icon-link-gap:               .375rem !default;
+// $icon-link-underline-offset:  .25em !default;
+// $icon-link-icon-size:         1em !default;
+// $icon-link-icon-transition:   .2s ease-in-out transform !default;
+// $icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
+
 // Paragraphs
 //
 // Style p element.
 
 // $paragraph-margin-bottom:   1rem !default;
 
-
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
@@ -1152,7 +1267,6 @@ $grid-breakpoints: (
 // @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 // @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
 
-
 // Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.
@@ -1170,7 +1284,6 @@ $container-max-widths: (
 
 // @include _assert-ascending($container-max-widths, "$container-max-widths");
 
-
 // Grid columns
 //
 // Set the number of columns and specify the width of the gutters.
@@ -1179,13 +1292,10 @@ $container-max-widths: (
 // $grid-gutter-width:           1.5rem !default;
 // $grid-row-columns:            6 !default;
 
-// $gutters: $spacers !default;
-
 // Container padding
 
 // $container-padding-x: $grid-gutter-width * .5 !default;
 
-
 // Components
 //
 // Define common padding and border radius sizes and more.
@@ -1199,7 +1309,6 @@ $border-width: 1px !default;
 //   4: 4px,
 //   5: 5px
 // ) !default;
-
 // $border-style:                solid !default;
 $border-color: #{shades-css-var('gray', 'border-color')} !default;
 // $border-color-translucent:    rgba($black, .175) !default;
@@ -1210,9 +1319,12 @@ $border-radius: 0.175rem !default;
 $border-radius-sm: $border-radius * map.get($df-size-ratios, 'sm') !default;
 $border-radius-lg: $border-radius * map.get($df-size-ratios, 'lg') !default;
 // $border-radius-xl:            1rem !default;
-// $border-radius-2xl:           2rem !default;
+// $border-radius-xxl:           2rem !default;
 // $border-radius-pill:          50rem !default;
 // scss-docs-end border-radius-variables
+// fusv-disable
+// $border-radius-2xl:           $border-radius-xxl !default; // Deprecated in v5.3.0
+// fusv-enable
 
 // scss-docs-start box-shadow-variables
 // $box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
@@ -1224,6 +1336,15 @@ $border-radius-lg: $border-radius * map.get($df-size-ratios, 'lg') !default;
 $component-active-color: $white !default;
 $component-active-bg: $primary !default;
 
+// scss-docs-start focus-ring-variables
+$focus-ring-width: 0.25rem !default;
+$focus-ring-opacity: 0.25 !default;
+$focus-ring-color: rgba($component-active-bg, $focus-ring-opacity) !default;
+$focus-ring-blur: 0 !default;
+$focus-ring-box-shadow: 0 0 var(--#{$prefix}box-shadow-blur, $focus-ring-blur)
+  var(--#{$prefix}box-shadow-width, $focus-ring-width) var(--#{$prefix}box-shadow-color, $focus-ring-color) !default;
+// scss-docs-end focus-ring-variables
+
 // scss-docs-start caret-variables
 // $caret-width:                 .3em !default;
 // $caret-vertical-align:        $caret-width * .85 !default;
@@ -1270,6 +1391,7 @@ $font-size-lg: $font-size-base * map.get($df-size-ratios, 'lg') !default;
 // $font-weight-lighter:         lighter !default;
 $font-weight-light: 100 !default;
 // $font-weight-normal:          400 !default;
+// $font-weight-medium:          500 !default;
 $font-weight-semibold: 500 !default;
 // $font-weight-bold:            700 !default;
 // $font-weight-bolder:          bolder !default;
@@ -1305,7 +1427,7 @@ $headings-font-family: 'Amadeus', sans-serif !default;
 // $headings-font-style:         null !default;
 $headings-font-weight: 400 !default;
 $headings-line-height: 1.5 !default;
-// $headings-color:              null !default;
+// $headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
@@ -1332,7 +1454,9 @@ $display-line-height: 1.1 !default;
 
 // $sub-sup-font-size:           .75em !default;
 
-$text-muted:                  $gray-700 !default;
+// fusv-disable
+$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
+// fusv-enable
 
 // $initialism-font-size:        $small-font-size !default;
 
@@ -1350,9 +1474,13 @@ $hr-margin-y: 1.5rem !default;
 // fusv-enable
 
 // $hr-border-color:             null !default; // Allows for inherited colors
-// $hr-border-width:             $border-width !default;
+// $hr-border-width:             var(--#{$prefix}border-width) !default;
 // $hr-opacity:                  .25 !default;
 
+// scss-docs-start vr-variables
+// $vr-border-width:             var(--#{$prefix}border-width) !default;
+// scss-docs-end vr-variables
+
 // $legend-margin-bottom:        .5rem !default;
 // $legend-font-size:            1.5rem !default;
 // $legend-font-weight:          null !default;
@@ -1362,50 +1490,50 @@ $hr-margin-y: 1.5rem !default;
 // $list-inline-padding:         .5rem !default;
 
 // $mark-padding:                .1875em !default;
-$mark-bg: $gray-600 !default;
+// $mark-color:                  $body-color !default;
+$mark-bg: var(--#{$prefix}gray-600) !default;
 // scss-docs-end type-variables
 
-
 // Tables
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
 // scss-docs-start table-variables
-$table-cell-padding-y: .75rem !default;
-$table-cell-padding-x: .75rem !default;
-$table-cell-padding-y-sm: .3rem !default;
-$table-cell-padding-x-sm: .3rem !default;
+$table-cell-padding-y: 0.75rem !default;
+$table-cell-padding-x: 0.75rem !default;
+$table-cell-padding-y-sm: 0.3rem !default;
+$table-cell-padding-x-sm: 0.3rem !default;
 
 // $table-cell-vertical-align:   top !default;
 
-// $table-color:                 var(--#{$prefix}body-color) !default;
-// $table-bg:                    transparent !default;
+$table-color: var(--#{$prefix}body-color) !default;
+$table-bg: transparent !default;
 // $table-accent-bg:             transparent !default;
 
 $table-th-font-weight: 500 !default;
 
 // $table-striped-color:         $table-color !default;
 // $table-striped-bg-factor:     .05 !default;
-// $table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
+// $table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
 
 // $table-active-color:          $table-color !default;
 // $table-active-bg-factor:      .1 !default;
-// $table-active-bg:             rgba($black, $table-active-bg-factor) !default;
+// $table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
 
 // $table-hover-color:           $table-color !default;
 // $table-hover-bg-factor:       .075 !default;
-// $table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
+// $table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
 
 // $table-border-factor:         .1 !default;
-// $table-border-width:          $border-width !default;
-// $table-border-color:          $border-color !default;
+// $table-border-width:          var(--#{$prefix}border-width) !default;
+// $table-border-color:          var(--#{$prefix}border-color) !default;
 
 // $table-striped-order:         odd !default;
 // $table-striped-columns-order: even !default;
 
 $table-group-separator-color: var(--#{$prefix}gray-400) !default;
 
-// $table-caption-color:         $text-muted !default;
+// $table-caption-color:         var(--#{$prefix}secondary-color) !default;
 
 // $table-bg-scale:              -80% !default;
 // scss-docs-end table-variables
@@ -1423,7 +1551,6 @@ $table-group-separator-color: var(--#{$prefix}gray-400) !default;
 // ) !default;
 // scss-docs-end table-loop
 
-
 // Buttons + Forms
 //
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
@@ -1435,11 +1562,11 @@ $input-btn-padding-x: 1rem !default;
 // $input-btn-font-size:         $font-size-base !default;
 // $input-btn-line-height:       $line-height-base !default;
 
-$input-btn-focus-width:         .25rem !default;
-$input-btn-focus-color-opacity: .25 !default;
-$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
-$input-btn-focus-blur:          0 !default;
-$input-btn-focus-box-shadow:    0 0 var(--#{$prefix}box-shadow-blur, $input-btn-focus-blur) var(--#{$prefix}box-shadow-width, $input-btn-focus-width) var(--#{$prefix}box-shadow-color, $input-btn-focus-color) !default;
+// $input-btn-focus-width:         $focus-ring-width !default;
+// $input-btn-focus-color-opacity: $focus-ring-opacity !default;
+// $input-btn-focus-color:         $focus-ring-color !default;
+// $input-btn-focus-blur:          $focus-ring-blur !default;
+$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
 
 $input-btn-padding-y-sm: $input-btn-padding-y * map.get($df-sizing-ratios, 'sm') !default;
 $input-btn-padding-x-sm: $input-btn-padding-x * map.get($df-sizing-ratios, 'sm') !default;
@@ -1449,15 +1576,15 @@ $input-btn-padding-y-lg: $input-btn-padding-y * map.get($df-sizing-ratios, 'lg')
 $input-btn-padding-x-lg: $input-btn-padding-x * map.get($df-sizing-ratios, 'lg') !default;
 // $input-btn-font-size-lg:      $font-size-lg !default;
 
-// $input-btn-border-width:      $border-width !default;
+// $input-btn-border-width:      var(--#{$prefix}border-width) !default;
 // scss-docs-end input-btn-variables
 
-
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 // scss-docs-start btn-variables
+// $btn-color:                   var(--#{$prefix}body-color) !default;
 // $btn-padding-y:               $input-btn-padding-y !default;
 // $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family: $font-family-sans-serif !default;
@@ -1482,9 +1609,10 @@ $btn-font-weight: $font-weight-semibold !default;
 $btn-disabled-opacity: 1 !default;
 // $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
-// $btn-link-color:              $link-color !default;
-// $btn-link-hover-color:        $link-hover-color !default;
+// $btn-link-color:              var(--#{$prefix}link-color) !default;
+// $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color: var(--#{$prefix}gray-400) !default; // default $gray-600 but we align with $df-disabled-color
+$btn-link-focus-shadow-rgb: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5) !default;
 
 // Allows for customizing button radius independently from global border radius
 // $btn-border-radius:           $border-radius !default;
@@ -1503,7 +1631,6 @@ $btn-link-disabled-color: var(--#{$prefix}gray-400) !default; // default $gray-6
 // $btn-active-border-tint-amount:   10% !default;
 // scss-docs-end btn-variables
 
-
 // Forms
 
 // scss-docs-start form-text-variables
@@ -1511,7 +1638,7 @@ $btn-link-disabled-color: var(--#{$prefix}gray-400) !default; // default $gray-6
 // $form-text-font-size:                   $small-font-size !default;
 // $form-text-font-style:                  null !default;
 // $form-text-font-weight:                 null !default;
-$form-text-color: $body-color !default;
+$form-text-color: var(--#{$prefix}body-color) !default;
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
@@ -1538,30 +1665,30 @@ $input-padding-x-sm: $input-padding-x * map.get($df-size-ratios, 'sm') !default;
 $input-padding-x-lg: $input-padding-x * map.get($df-size-ratios, 'lg') !default;
 // $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
-// $input-bg:                              $body-bg !default;
+// $input-bg:                              var(--#{$prefix}body-bg) !default;
 // $input-disabled-color:                  null !default;
-$input-disabled-bg: $gray-100 !default;
+$input-disabled-bg: var(--#{$prefix}gray-100) !default;
 // $input-disabled-border-color:           null !default;
 
-// $input-color:                           $body-color !default;
-// $input-border-color:                    $gray-400 !default;
+// $input-color:                           var(--#{$prefix}body-color) !default;
+$input-border-color: var(--#{$prefix}gray-400) !default;
 // $input-border-width:                    $input-btn-border-width !default;
-// $input-box-shadow:                      $box-shadow-inset !default;
+// $input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
 
-// $input-border-radius:                   $border-radius !default;
-// $input-border-radius-sm:                $border-radius-sm !default;
-// $input-border-radius-lg:                $border-radius-lg !default;
+// $input-border-radius:                   var(--#{$prefix}border-radius) !default;
+// $input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
+// $input-border-radius-lg:                var(--#{$prefix}border-radius-lg) !default;
 
 // $input-focus-bg:                        $input-bg !default;
-$input-focus-border-color: $primary !default;
+$input-focus-border-color: var(--#{$prefix}primary) !default;
 // $input-focus-color:                     $input-color !default;
 // $input-focus-width:                     $input-btn-focus-width !default;
 // $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 
-// $input-placeholder-color:               $gray-600 !default;
-// $input-plaintext-color:                 $body-color !default;
+$input-placeholder-color: var(--#{$prefix}gray-600) !default;
+// $input-plaintext-color:                 var(--#{$prefix}body-color) !default;
 
-// $input-height-border:                   $input-border-width * 2 !default;
+// $input-height-border:                   calc(#{$input-border-width} * 2) !default;
 
 // $input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
 // $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
@@ -1579,7 +1706,7 @@ $input-focus-border-color: $primary !default;
 // scss-docs-start form-check-variables
 $form-check-input-width: 1em !default;
 // $form-check-min-height:                   $font-size-base * $line-height-base !default;
-$form-check-padding-start: $form-check-input-width + .375em !default;
+$form-check-padding-start: $form-check-input-width + 0.375em !default;
 // $form-check-margin-bottom:                .125rem !default;
 // $form-check-label-color:                  null !default;
 $form-check-label-cursor: pointer !default;
@@ -1588,11 +1715,11 @@ $form-check-label-cursor: pointer !default;
 $form-check-input-active-filter: none !default;
 
 // $form-check-input-bg:                     $input-bg !default;
-$form-check-input-border: 2px solid $gray-600 !default;
+$form-check-input-border: 2px solid var(--#{$prefix}gray-600) !default;
 $form-check-input-border-radius: 0.125em !default;
 // $form-check-radio-border-radius:          50% !default;
-$form-check-input-focus-border: $gray-600 !default;
-// $form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow !default;
+$form-check-input-focus-border: var(--#{$prefix}gray-600) !default;
+$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
 
 $form-check-input-checked-color: $component-active-color !default;
 $form-check-input-checked-bg-color: $component-active-bg !default;
@@ -1615,7 +1742,7 @@ $form-check-input-disabled-opacity: 1 !default;
 // scss-docs-start form-switch-variables
 $form-switch-color: $gray-600 !default;
 $form-switch-width: 3em !default;
-$form-switch-padding-start:   0 !default; //  $form-switch-width + .5em
+$form-switch-padding-start: 0 !default; //  $form-switch-width + .5em
 // $form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
 $form-switch-border-radius: math.div($form-switch-width, 2) !default;
 // $form-switch-transition:          background-position .15s ease-in-out !default;
@@ -1633,7 +1760,7 @@ $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.o
 // $input-group-addon-padding-x:           $input-padding-x !default;
 // $input-group-addon-font-weight:         $input-font-weight !default;
 // $input-group-addon-color:               $input-color !default;
-$input-group-addon-bg: $gray-100 !default;
+// $input-group-addon-bg:                  var(--#{$prefix}tertiary-bg) !default;
 // $input-group-addon-border-color:        $input-border-color !default;
 // scss-docs-end input-group-variables
 
@@ -1647,8 +1774,8 @@ $input-group-addon-bg: $gray-100 !default;
 // $form-select-line-height:           $input-line-height !default;
 // $form-select-color:                 $input-color !default;
 // $form-select-bg:                    $input-bg !default;
-$form-select-disabled-color: $gray-300 !default;
-$form-select-disabled-bg: $gray-100 !default;
+$form-select-disabled-color: var(--#{$prefix}disabled-color) !default;
+// $form-select-disabled-bg:           $input-disabled-bg !default;
 // $form-select-disabled-border-color: $input-disabled-border-color !default;
 // $form-select-bg-position:           right $form-select-padding-x center !default;
 $form-select-bg-size: 16px 16px !default; // In pixels because image dimensions
@@ -1666,7 +1793,7 @@ $form-select-indicator: str-replace(
 // $form-select-border-width:        $input-border-width !default;
 // $form-select-border-color:        $input-border-color !default;
 // $form-select-border-radius:       $input-border-radius !default;
-// $form-select-box-shadow:          $box-shadow-inset !default;
+// $form-select-box-shadow:          var(--#{$prefix}box-shadow-inset) !default;
 
 // $form-select-focus-border-color:  $input-focus-border-color !default;
 // $form-select-focus-width:         $input-focus-width !default;
@@ -1689,9 +1816,9 @@ $form-select-indicator: str-replace(
 // $form-range-track-width:          100% !default;
 // $form-range-track-height:         .5rem !default;
 // $form-range-track-cursor:         pointer !default;
-// $form-range-track-bg:             $gray-300 !default;
+$form-range-track-bg: var(--#{$prefix}gray-300) !default;
 // $form-range-track-border-radius:  1rem !default;
-// $form-range-track-box-shadow:     $box-shadow-inset !default;
+// $form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;
 
 // $form-range-thumb-width:                   1rem !default;
 // $form-range-thumb-height:                  $form-range-thumb-width !default;
@@ -1702,14 +1829,14 @@ $form-select-indicator: str-replace(
 // $form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
 // $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
 // $form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
-// $form-range-thumb-disabled-bg:             $gray-500 !default;
+$form-range-thumb-disabled-bg: var(--#{$prefix}gray-500) !default;
 // $form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 // scss-docs-end form-range-variables
 
 // scss-docs-start form-file-variables
-$form-file-button-color: $white !default;
+$form-file-button-color: var(--#{$prefix}white) !default;
 $form-file-button-bg: $primary !default;
-// $form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%) !default;
+$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
 // scss-docs-end form-file-variables
 
 // scss-docs-start form-floating-variables
@@ -1721,6 +1848,7 @@ $form-file-button-bg: $primary !default;
 // $form-floating-input-padding-b:   .625rem !default;
 // $form-floating-label-opacity:     .65 !default;
 // $form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;
+// $form-floating-label-disabled-color:    $gray-600 !default;
 // $form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;
 // scss-docs-end form-floating-variables
 
@@ -1730,26 +1858,41 @@ $form-file-button-bg: $primary !default;
 // $form-feedback-margin-top:          $form-text-margin-top !default;
 // $form-feedback-font-size:           $form-text-font-size !default;
 // $form-feedback-font-style:          $form-text-font-style !default;
-// $form-feedback-valid-color:         $success !default;
-// $form-feedback-invalid-color:       $danger !default;
+$form-feedback-valid-color: $success !default;
+$form-feedback-invalid-color: $danger !default;
 
-// $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-// $form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
-// $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
-// $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
+$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 // scss-docs-end form-feedback-variables
 
+// scss-docs-start form-validation-colors
+// $form-valid-color:                  $form-feedback-valid-color !default;
+// $form-valid-border-color:           $form-feedback-valid-color !default;
+// $form-invalid-color:                $form-feedback-invalid-color !default;
+// $form-invalid-border-color:         $form-feedback-invalid-color !default;
+// scss-docs-end form-validation-colors
+
 // scss-docs-start form-validation-states
-// $form-validation-states: (
-//   "valid": (
-//     "color": $form-feedback-valid-color,
-//     "icon": $form-feedback-icon-valid
-//   ),
-//   "invalid": (
-//     "color": $form-feedback-invalid-color,
-//     "icon": $form-feedback-icon-invalid
-//   )
-// ) !default;
+$form-validation-states: (
+  'valid': (
+    'color': var(--#{$prefix}form-valid-color),
+    'icon': $form-feedback-icon-valid,
+    'tooltip-color': #fff,
+    'tooltip-bg-color': var(--#{$prefix}success),
+    'focus-box-shadow': $input-btn-focus-box-shadow,
+    'border-color': var(--#{$prefix}form-valid-border-color)
+  ),
+  'invalid': (
+    'color': var(--#{$prefix}form-invalid-color),
+    'icon': $form-feedback-icon-invalid,
+    'tooltip-color': #fff,
+    'tooltip-bg-color': var(--#{$prefix}danger),
+    'focus-box-shadow': $input-btn-focus-box-shadow,
+    'border-color': var(--#{$prefix}form-invalid-border-color)
+  )
+) !default;
 // scss-docs-end form-validation-states
 
 // Z-index master list
@@ -1767,8 +1910,18 @@ $form-file-button-bg: $primary !default;
 // $zindex-modal:                      1055 !default;
 // $zindex-popover:                    1070 !default;
 // $zindex-tooltip:                    1080 !default;
+// $zindex-toast:                      1090 !default;
 // scss-docs-end zindex-stack
 
+// scss-docs-start zindex-levels-map
+// $zindex-levels: (
+//   n1: -1,
+//   0: 0,
+//   1: 1,
+//   2: 2,
+//   3: 3
+// ) !default;
+// scss-docs-end zindex-levels-map
 
 // Navs
 
@@ -1777,25 +1930,29 @@ $form-file-button-bg: $primary !default;
 // $nav-link-padding-x:                1rem !default;
 // $nav-link-font-size:                null !default;
 // $nav-link-font-weight:              null !default;
-// $nav-link-color:                    $link-color !default;
-// $nav-link-hover-color:              $link-hover-color !default;
+// $nav-link-color:                    var(--#{$prefix}link-color) !default;
+// $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
 // $nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
-$nav-link-disabled-color: $gray-300 !default;
+$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
+// $nav-link-focus-box-shadow:         $focus-ring-box-shadow !default;
 
-// $nav-tabs-border-color:             $gray-300 !default;
-// $nav-tabs-border-width:             $border-width !default;
+// $nav-tabs-border-color:             var(--#{$prefix}border-color) !default;
+// $nav-tabs-border-width:             var(--#{$prefix}border-width !default;
 $nav-tabs-border-radius: 0 !default;
-// $nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
-$nav-tabs-link-active-color: $primary !default;
-$nav-tabs-link-active-bg: $white !default;
-// $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
-
-$nav-pills-border-radius:           0 !default; // $border-radius
-$nav-pills-link-active-color:       $primary !default;
-$nav-pills-link-active-bg:          $white !default;
+// $nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: var(--#{$prefix}primary) !default;
+$nav-tabs-link-active-bg: var(--#{$prefix}white) !default;
+// $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg  !default;
+
+$nav-pills-border-radius: 0 !default; // $border-radius
+$nav-pills-link-active-color: var(--#{$prefix}primary) !default;
+$nav-pills-link-active-bg: var(--#{$prefix}white) !default;
+
+// $nav-underline-gap:                 1rem !default;
+// $nav-underline-border-width:        .125rem !default;
+// $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
 // scss-docs-end nav-variables
 
-
 // Navbar
 
 // scss-docs-start navbar-variables
@@ -1809,7 +1966,7 @@ $navbar-padding-x: 0 !default;
 // $nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 // $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
 // $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;
-$navbar-brand-margin-end:           0px !default; // default 1rem
+$navbar-brand-margin-end: 0px !default; // default 1rem
 
 $navbar-toggler-padding-y: 0.125rem !default;
 $navbar-toggler-padding-x: 0.125rem !default;
@@ -1817,30 +1974,30 @@ $navbar-toggler-padding-x: 0.125rem !default;
 // $navbar-toggler-border-radius:      $btn-border-radius !default;
 // $navbar-toggler-focus-width:        $btn-focus-width !default;
 // $navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
+
+$navbar-light-color: var(--#{$prefix}primary-500) !default;
+$navbar-light-hover-color: var(--#{$prefix}primary-500) !default; // TODO 600
+$navbar-light-active-color: var(--#{$prefix}primary-500) !default;
+$navbar-light-disabled-color: var(--#{$prefix}gray-500) !default;
+// $navbar-light-icon-color:           rgba($body-color, .75) !default;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$primary-500}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-light-toggler-border-color: var(--#{$prefix}white) !default;
+// $navbar-light-brand-color:          $navbar-light-active-color !default;
+// $navbar-light-brand-hover-color:    $navbar-light-active-color !default;
 // scss-docs-end navbar-variables
 
-// scss-docs-start navbar-theme-variables
+// scss-docs-start navbar-dark-variables
 $navbar-dark-color: var(--#{$prefix}black) !default;
 $navbar-dark-hover-color: var(--#{$prefix}black) !default;
-$navbar-dark-active-color:  var(--#{$prefix}black) !default;
+$navbar-dark-active-color: var(--#{$prefix}black) !default;
 $navbar-dark-disabled-color: var(--#{$prefix}gray-500) !default; // verified this
+// $navbar-dark-icon-color:            $navbar-dark-color !default;
 // TODO for bg image correct the dark mode
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$white}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$white}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-dark-toggler-border-color: transparent !default;
-
-$navbar-light-color: var(--#{$prefix}primary-500) !default;
-$navbar-light-hover-color: var(--#{$prefix}primary-500) !default; // TODO 600
-$navbar-light-active-color: var(--#{$prefix}primary-500) !default;
-$navbar-light-disabled-color: var(--#{$prefix}gray-500) !default;
-$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$primary-500}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: $white !default;
-
-// $navbar-light-brand-color:                $navbar-light-active-color !default;
-// $navbar-light-brand-hover-color:          $navbar-light-active-color !default;
-// $navbar-dark-brand-color:                 $navbar-dark-active-color !default;
-// $navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
-// scss-docs-end navbar-theme-variables
-
+// $navbar-dark-brand-color:           $navbar-dark-active-color !default;
+// $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
+// scss-docs-end navbar-dark-variables
 
 // Dropdowns
 //
@@ -1852,30 +2009,34 @@ $navbar-light-toggler-border-color: $white !default;
 // $dropdown-padding-y:                .5rem !default;
 // $dropdown-spacer:                   .125rem !default;
 // $dropdown-font-size:                $font-size-base !default;
-// $dropdown-color:                    $body-color !default;
+// $dropdown-color:                    var(--#{$prefix}body-color) !default;
 // $dropdown-bg:                       $white !default;
-$dropdown-border-color: $border-color !default;
-// $dropdown-border-radius:            $border-radius !default;
-// $dropdown-border-width:             $border-width !default;
-// $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-border-color: var(--#{$prefix}border-color) !default;
+// $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
+// $dropdown-border-width:             var(--#{$prefix}border-width) !default;
+// $dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
 // $dropdown-divider-bg:               $dropdown-border-color !default;
 // $dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
+// $dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
-// $dropdown-link-color:               $gray-900 !default;
-// $dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%) !default;
+// $dropdown-link-color:               var(--#{$prefix}body-color) !default;
+// $dropdown-link-hover-color:         $dropdown-link-color !default;
 $dropdown-link-hover-bg: $gray-100 !default;
 
 $dropdown-link-active-color: shades-css-var('primary', 'bg-color', true) !default;
 $dropdown-link-active-bg: shades-css-var('primary', 'bg-color') !default;
 
-// $dropdown-link-disabled-color:      $gray-500 !default;
+$dropdown-link-disabled-color: var(--#{$prefix}gray-500) !default;
 
 // $dropdown-item-padding-y:           $spacer * .25 !default;
 // $dropdown-item-padding-x:           $spacer !default;
 
-$dropdown-header-color: $white !default;
-// $dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
+$dropdown-header-color: var(--#{$prefix}white) !default;
+// $dropdown-header-padding-x:         $dropdown-item-padding-x !default;
+// $dropdown-header-padding-y:         $dropdown-padding-y !default;
+// fusv-disable
+// $dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
+// fusv-enable
 // scss-docs-end dropdown-variables
 
 // scss-docs-start dropdown-dark-variables
@@ -1893,7 +2054,6 @@ $dropdown-header-color: $white !default;
 // $dropdown-dark-header-color:        $gray-500 !default;
 // scss-docs-end dropdown-dark-variables
 
-
 // Pagination
 
 // scss-docs-start pagination-variables
@@ -1906,37 +2066,36 @@ $pagination-padding-x-lg: 0.5rem !default;
 
 // $pagination-font-size:              $font-size-base !default;
 
-$pagination-color: $black !default;
-// $pagination-bg:                     $white !default;
-// $pagination-border-width:           $border-width !default;
-// $pagination-border-radius:          $border-radius !default;
-// $pagination-margin-start:           -$pagination-border-width !default;
-// $pagination-border-color:           $gray-300 !default;
+$pagination-color: var(--#{$prefix}black) !default;
+// $pagination-bg:                     var(--#{$prefix}body-bg) !default;
+// $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
+// $pagination-border-width:           var(--#{$prefix}border-width) !default;
+// $pagination-margin-start:           calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
+// $pagination-border-color:           var(--#{$prefix}border-color) !default;
 
-$pagination-focus-color:        shades-css-var('white', 'bg-color', true)    !default; // $link-hover-color
-$pagination-focus-bg:               shades-css-var('white', 'bg-color') !default; // default $gray-200
-// $pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
+$pagination-focus-color: shades-css-var('white', 'bg-color', true) !default; // $link-hover-color
+$pagination-focus-bg: shades-css-var('white', 'bg-color') !default; // default $gray-200
+// $pagination-focus-box-shadow:       $focus-ring-box-shadow !default;
 // $pagination-focus-outline:          0 !default;
 
-$pagination-hover-color:         shades-css-var('white', 'bg-hover-color', true) !default;
-$pagination-hover-bg:            shades-css-var('white', 'bg-hover-color') !default; // default $gray-200
-// $pagination-hover-border-color:     $gray-300 !default;
+$pagination-hover-color: shades-css-var('white', 'bg-hover-color', true) !default;
+$pagination-hover-bg: shades-css-var('white', 'bg-hover-color') !default; // default $gray-200
+// $pagination-hover-border-color:     var(--#{$prefix}border-color) !default;
 
 // $pagination-active-color:           $component-active-color !default;
 // $pagination-active-bg:              $component-active-bg !default;
 // $pagination-active-border-color:    $pagination-active-bg !default;
 
-$pagination-disabled-color: $gray-300 !default;
-// $pagination-disabled-bg:            $white !default;
-// $pagination-disabled-border-color:  $gray-300 !default;
+$pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
+$pagination-disabled-bg: var(--#{$prefix}white) !default;
+// $pagination-disabled-border-color:  var(--#{$prefix}border-color) !default;
 
 // $pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
-// $pagination-border-radius-sm:       $border-radius-sm !default;
-// $pagination-border-radius-lg:       $border-radius-lg !default;
+// $pagination-border-radius-sm:       var(--#{$prefix}border-radius-sm) !default;
+// $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
 // scss-docs-end pagination-variables
 
-
 // Placeholders
 
 // scss-docs-start placeholders
@@ -1950,18 +2109,20 @@ $pagination-disabled-color: $gray-300 !default;
 // $card-spacer-y:                     $spacer !default;
 $card-spacer-x: 1rem !default;
 // $card-title-spacer-y:               $spacer * .5 !default;
-// $card-border-width:                 $border-width !default;
-$card-border-color: $border-color !default;
-$card-border-radius: $border-radius-lg !default;
+// $card-title-color:                  null !default;
+// $card-subtitle-color:               null !default;
+// $card-border-width:                 var(--#{$prefix}border-width) !default;
+$card-border-color: var(--#{$prefix}border-color) !default;
+$card-border-radius: var(--#{$prefix}border-radius-lg) !default;
 // $card-box-shadow:                   null !default;
 // $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
 // $card-cap-padding-y:                $card-spacer-y * .5 !default;
 // $card-cap-padding-x:                $card-spacer-x !default;
-// $card-cap-bg:                       rgba($black, .03) !default;
+// $card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03) !default;
 // $card-cap-color:                    null !default;
 // $card-height:                       null !default;
 // $card-color:                        null !default;
-// $card-bg:                           $white !default;
+// $card-bg:                           var(--#{$prefix}body-bg) !default;
 // $card-img-overlay-padding:          $spacer !default;
 // $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-end card-variables
@@ -1971,11 +2132,11 @@ $card-border-radius: $border-radius-lg !default;
 // scss-docs-start accordion-variables
 $accordion-padding-y: 0.75rem !default;
 $accordion-padding-x: 1rem !default;
-$accordion-color: $body-color !default;
-$accordion-bg: $body-bg !default;
-// $accordion-border-width:                  $border-width !default;
-$accordion-border-color: $border-color !default;
-// $accordion-border-radius:                 $border-radius !default;
+$accordion-color: var(--#{$prefix}body-color) !default;
+$accordion-bg: var(--#{$prefix}body-bg) !default;
+// $accordion-border-width:                  var(--#{$prefix}border-width) !default;
+// $accordion-border-color:                  var(--#{$prefix}border-color) !default;
+// $accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
 // $accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;
 
 // $accordion-body-padding-y:                $accordion-padding-y !default;
@@ -1983,8 +2144,8 @@ $accordion-border-color: $border-color !default;
 
 // $accordion-button-padding-y:              $accordion-padding-y !default;
 // $accordion-button-padding-x:              $accordion-padding-x !default;
-// $accordion-button-color:                  $accordion-color !default;
-// $accordion-button-bg:                     $accordion-bg !default;
+// $accordion-button-color:                  var(--#{$prefix}body-color) !default;
+// $accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
 // $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
 $accordion-button-active-bg: $accordion-bg !default;
 $accordion-button-active-color: $accordion-color !default;
@@ -2005,19 +2166,21 @@ $accordion-icon-active-color: $accordion-icon-color !default;
 // Tooltips
 
 // scss-docs-start tooltip-variables
-$tooltip-font-size:           1em * map.get($df-size-ratios, 'sm') !default;//   $font-size-sm !default;
+$tooltip-font-size: 1em * map.get($df-size-ratios, 'sm') !default; //   $font-size-sm !default;
 // $tooltip-max-width:                 200px !default;
-// $tooltip-color:                     $white !default;
-$tooltip-bg: $gray-600 !default;
+// $tooltip-color:                     var(--#{$prefix}body-bg) !default;
+$tooltip-bg: var(--#{$prefix}gray-600) !default;
 $tooltip-border-radius: 0.25rem !default;
 $tooltip-opacity: 1 !default;
 $tooltip-padding-y: 0.25rem !default;
 $tooltip-padding-x: 0.75rem !default;
-// $tooltip-margin:                    0 !default;
+// $tooltip-margin:                    null !default; // TODO: remove this in v6
 
 // $tooltip-arrow-width:               .8rem !default;
 // $tooltip-arrow-height:              .4rem !default;
-// $tooltip-arrow-color:               $tooltip-bg !default;
+// fusv-disable
+// $tooltip-arrow-color:               null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
+// fusv-enable
 // scss-docs-end tooltip-variables
 
 // Form tooltips must come after regular tooltips
@@ -2030,26 +2193,25 @@ $tooltip-padding-x: 0.75rem !default;
 // $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 // scss-docs-end tooltip-feedback-variables
 
-
 // Popovers
 
 // scss-docs-start popover-variables
 $popover-font-size: $font-size-base !default;
-// $popover-bg:                        $white !default;
+// $popover-bg:                        var(--#{$prefix}body-bg) !default;
 $popover-max-width: 50vw !default; // default 276px
-// $popover-border-width:              $border-width !default;
-$popover-border-color: $border-color !default;
-$popover-border-radius: $border-radius !default;
-// $popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
+// $popover-border-width:              var(--#{$prefix}border-width) !default;
+$popover-border-color: var(--#{$prefix}border-color) !default;
+$popover-border-radius: var(--#{$prefix}border-radius) !default;
+// $popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
 $popover-box-shadow: var(--#{$prefix}box-shadow) !default;
 
 // $popover-header-font-size:          $font-size-base !default;
-$popover-header-bg: $white !default;
-// $popover-header-color:              var(--#{$prefix}heading-color) !default;
+$popover-header-bg: var(--#{$prefix}white) !default;
+// $popover-header-color:              $headings-color !default;
 $popover-header-padding-y: 0 !default;
 $popover-header-padding-x: 0 !default;
 
-// $popover-body-color:                $body-color !default;
+// $popover-body-color:                var(--#{$prefix}body-color) !default;
 $popover-body-padding-y: 0 !default;
 $popover-body-padding-x: 0 !default;
 
@@ -2060,10 +2222,9 @@ $popover-arrow-width: 1.3rem !default;
 // fusv-disable
 // Deprecated in Bootstrap 5.2.0 for CSS variables
 // $popover-arrow-color:               $popover-bg !default;
-$popover-arrow-outer-color: $gray-200 !default;
+$popover-arrow-outer-color: var(--#{$prefix}gray-200) !default;
 // fusv-enable
 
-
 // Toasts
 
 // scss-docs-start toast-variables
@@ -2072,31 +2233,29 @@ $toast-padding-x: 1rem !default;
 $toast-padding-y: 0.75rem !default;
 // $toast-font-size:                   .875rem !default;
 // $toast-color:                       null !default;
-// $toast-background-color:            rgba($white, .85) !default;
-// $toast-border-width:                1px !default;
-// $toast-border-color:                rgba($black, .1) !default;
+// $toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+// $toast-border-width:                var(--#{$prefix}border-width) !default;
+// $toast-border-color:                var(--#{$prefix}border-color-translucent) !default;
 $toast-border-radius: 0.25rem !default;
-// $toast-box-shadow:                  $box-shadow !default;
+// $toast-box-shadow:                  var(--#{$prefix}box-shadow) !default;
 // $toast-spacing:                     $container-padding-x !default;
 
-// $toast-header-color:                $gray-600 !default;
-// $toast-header-background-color:     rgba($white, .85) !default;
-// $toast-header-border-color:         rgba($black, .05) !default;
+// $toast-header-color:                var(--#{$prefix}secondary-color) !default;
+// $toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+// $toast-header-border-color:         $toast-border-color !default;
 // scss-docs-end toast-variables
 
-
 // Badges
 
 // scss-docs-start badge-variables
 // $badge-font-size:                   .75em !default;
 $badge-font-weight: $font-weight-semibold !default;
 // $badge-color:                       $white !default;
-$badge-padding-y: .38em !default;
-$badge-padding-x: .86em !default;
+$badge-padding-y: 0.38em !default;
+$badge-padding-x: 0.86em !default;
 $badge-border-radius: 0.25rem !default;
 // scss-docs-end badge-variables
 
-
 // Modals
 
 // scss-docs-start modal-variables
@@ -2110,13 +2269,13 @@ $badge-border-radius: 0.25rem !default;
 $modal-title-line-height: 1.3 !default;
 
 // $modal-content-color:               null !default;
-// $modal-content-bg:                  $white !default;
+// $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color: none !default;
-// $modal-content-border-width:        $border-width !default;
-// $modal-content-border-radius:       $border-radius-lg !default;
+// $modal-content-border-width:        var(--#{$prefix}border-width) !default;
+// $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 // $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-// $modal-content-box-shadow-xs:       $box-shadow-sm !default;
-// $modal-content-box-shadow-sm-up:    $box-shadow !default;
+// $modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm) !default;
+// $modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow) !default;
 
 // $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity: 0.1 !default;
@@ -2142,7 +2301,6 @@ $modal-backdrop-opacity: 0.1 !default;
 // $modal-scale-transform:             scale(1.02) !default;
 // scss-docs-end modal-variables
 
-
 // Alerts
 //
 // Define alert colors, border radius, and padding.
@@ -2151,92 +2309,92 @@ $modal-backdrop-opacity: 0.1 !default;
 $alert-padding-y: 0.7rem !default;
 $alert-padding-x: 1.25rem !default;
 // $alert-margin-bottom:           1rem !default;
-// $alert-border-radius:           $border-radius !default;
+// $alert-border-radius:           var(--#{$prefix}border-radius) !default;
 // $alert-link-font-weight:        $font-weight-bold !default;
-// $alert-border-width:            $border-width !default;
-// $alert-bg-scale:                -80% !default;
-// $alert-border-scale:            -70% !default;
-// $alert-color-scale:             40% !default;
+// $alert-border-width:            var(--#{$prefix}border-width) !default;
 $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 // scss-docs-end alert-variables
 
+// fusv-disable
+// $alert-bg-scale:                -80% !default; // Deprecated in v5.2.0, to be removed in v6
+// $alert-border-scale:            -70% !default; // Deprecated in v5.2.0, to be removed in v6
+// $alert-color-scale:             40% !default; // Deprecated in v5.2.0, to be removed in v6
+// fusv-enable
 
 // Progress bars
 
 // scss-docs-start progress-variables
 $progress-height: 5px !default;
 // $progress-font-size:                $font-size-base * .75 !default;
-$progress-bg: $gray-100 !default;
-$progress-border-radius: 1rem !default;
-// $progress-box-shadow:               $box-shadow-inset !default;
+$progress-bg: var(--#{$prefix}gray-100) !default;
+$progress-border-radius: var(--#{$prefix}border-radius-xl) !default;
+// $progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
 // $progress-bar-color:                $white !default;
 // $progress-bar-bg:                   $primary !default;
 // $progress-bar-animation-timing:     1s linear infinite !default;
 // $progress-bar-transition:           width .6s ease !default;
 // scss-docs-end progress-variables
 
-
 // List group
 
 // scss-docs-start list-group-variables
-// $list-group-color:                  $gray-900 !default;
-// $list-group-bg:                     $white !default;
-$list-group-border-color:           $border-color !default; // default rgba($black, .125)
-// $list-group-border-width:           $border-width !default;
-// $list-group-border-radius:          $border-radius !default;
+// $list-group-color:                  var(--#{$prefix}body-color) !default;
+// $list-group-bg:                     var(--#{$prefix}body-bg) !default;
+// $list-group-border-color:           var(--#{$prefix}border-color) !default;
+// $list-group-border-width:           var(--#{$prefix}border-width) !default;
+// $list-group-border-radius:          var(--#{$prefix}border-radius) !default;
 
 $list-group-item-padding-y: 0.6875rem !default;
 $list-group-item-padding-x: 1rem !default;
-// $list-group-item-bg-scale:          -80% !default;
-// $list-group-item-color-scale:       40% !default;
+// fusv-disable
+// $list-group-item-bg-scale:          -80% !default; // Deprecated in v5.3.0
+// $list-group-item-color-scale:       40% !default; // Deprecated in v5.3.0
+// fusv-enable
 
-$list-group-hover-bg:               shades-css-var('white', 'bg-hover-color') !default; // default $gray-100 $df-hover-bg-color
+$list-group-hover-bg: shades-css-var('white', 'bg-hover-color') !default; // default $gray-100 $df-hover-bg-color
 $list-group-active-color: shades-css-var('primary', 'bg-color') !default; // default  $component-active-color
 $list-group-active-bg: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.1) !default; // $component-active-bg
-$list-group-active-border-color:    $gray-100 !default; // $list-group-active-bg
+$list-group-active-border-color: var(--#{$prefix}gray-100) !default; // $list-group-active-bg
 
-$list-group-disabled-color: $gray-300 !default; // default $gray-600, align with $df-disabled-color
-$list-group-disabled-bg: $gray-100 !default; // default $list-group-bg, align with $df-disabled-bg-color
+$list-group-disabled-color: var(--#{$prefix}disabled-color) !default;
+$list-group-disabled-bg: var(--#{$prefix}gray-100) !default; // default $list-group-bg, align with $df-disabled-bg-color
 
-$list-group-action-color:           $gray-900 !default; // default $gray-700
-// $list-group-action-hover-color:     $list-group-action-color !default;
+$list-group-action-color: var(--#{$prefix}gray-900) !default; // default var(--#{$prefix}secondary-color)
+$list-group-action-hover-color: $list-group-action-color !default;
 
-$list-group-action-active-color:    shades-css-var('primary', 'bg-color') !default;
-$list-group-action-active-bg:       rgba(shades-rgb-css-var('primary', 'bg-color'), 0.1) !default; // default $gray-200
+$list-group-action-active-color: shades-css-var('primary', 'bg-color') !default;
+$list-group-action-active-bg: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.1) !default; // default $gray-200
 // scss-docs-end list-group-variables
 
-
 // Image thumbnails
 
 // scss-docs-start thumbnail-variables
 // $thumbnail-padding:                 .25rem !default;
-// $thumbnail-bg:                      $body-bg !default;
-// $thumbnail-border-width:            $border-width !default;
-// $thumbnail-border-color:            $gray-300 !default;
-// $thumbnail-border-radius:           $border-radius !default;
-// $thumbnail-box-shadow:              $box-shadow-sm !default;
+// $thumbnail-bg:                      var(--#{$prefix}body-bg) !default;
+// $thumbnail-border-width:            var(--#{$prefix}border-width) !default;
+// $thumbnail-border-color:            var(--#{$prefix}border-color) !default;
+// $thumbnail-border-radius:           var(--#{$prefix}border-radius) !default;
+// $thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm) !default;
 // scss-docs-end thumbnail-variables
 
-
 // Figures
 
 // scss-docs-start figure-variables
 // $figure-caption-font-size:          $small-font-size !default;
-// $figure-caption-color:              $gray-600 !default;
+$figure-caption-color: var(--#{$prefix}gray-600) !default;
 // scss-docs-end figure-variables
 
-
 // Breadcrumbs
 
 // scss-docs-start breadcrumb-variables
 // $breadcrumb-font-size:              null !default;
 // $breadcrumb-padding-y:              0 !default;
 // $breadcrumb-padding-x:              0 !default;
-$breadcrumb-item-padding-x:         0 !default; //.5rem default
+$breadcrumb-item-padding-x: 0 !default; //.5rem default
 // $breadcrumb-margin-bottom:          1rem !default;
 $breadcrumb-bg: none !default;
-// $breadcrumb-divider-color:          $gray-600 !default;
-// $breadcrumb-active-color:           $gray-600 !default;
+$breadcrumb-divider-color: var(--#{$prefix}gray-600) !default;
+$breadcrumb-active-color: var(--#{$prefix}gray-600) !default;
 // $breadcrumb-divider:                quote("/") !default;
 // $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
 // $breadcrumb-border-radius:          null !default;
@@ -2245,7 +2403,7 @@ $breadcrumb-bg: none !default;
 // Carousel
 
 // scss-docs-start carousel-variables
-$carousel-control-color:             $white !default;
+$carousel-control-color: $white !default;
 // $carousel-control-width:             15% !default;
 $carousel-control-opacity: 1 !default;
 // $carousel-control-hover-opacity:     .9 !default;
@@ -2272,12 +2430,13 @@ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w
 
 // $carousel-transition-duration:       .6s !default;
 // $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+// scss-docs-end carousel-variables
 
+// scss-docs-start carousel-dark-variables
 // $carousel-dark-indicator-active-bg:  $black !default;
 // $carousel-dark-caption-color:        $black !default;
 // $carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
-// scss-docs-end carousel-variables
-
+// scss-docs-end carousel-dark-variables
 
 // Spinners
 
@@ -2293,16 +2452,15 @@ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w
 // $spinner-border-width-sm: .2em !default;
 // scss-docs-end spinner-variables
 
-
 // Close
 
 // scss-docs-start close-variables
-$btn-close-width: 0.80em !default;
+$btn-close-width: 0.8em !default;
 // $btn-close-height:           $btn-close-width !default;
-$btn-close-padding-x:        .3em !default;
+$btn-close-padding-x: 0.3em !default;
 // $btn-close-padding-y:        $btn-close-padding-x !default;
-$btn-close-color:            $black !default;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$btn-close-color: $black !default;
+$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
 // $btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
 $btn-close-opacity: 0.55 !default;
 // $btn-close-hover-opacity:    .75 !default;
@@ -2311,7 +2469,6 @@ $btn-close-opacity: 0.55 !default;
 // $btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
 // scss-docs-end close-variables
 
-
 // Offcanvas
 
 // scss-docs-start offcanvas-variables
@@ -2323,8 +2480,8 @@ $btn-close-opacity: 0.55 !default;
 // $offcanvas-border-color:            $modal-content-border-color !default;
 // $offcanvas-border-width:            $modal-content-border-width !default;
 // $offcanvas-title-line-height:       $modal-title-line-height !default;
-// $offcanvas-bg-color:                $modal-content-bg !default;
-// $offcanvas-color:                   $modal-content-color !default;
+// $offcanvas-bg-color:                var(--#{$prefix}body-bg) !default;
+// $offcanvas-color:                   var(--#{$prefix}body-color) !default;
 // $offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
 // $offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
 // $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
@@ -2338,7 +2495,8 @@ $code-color: shades-css-var('pink', 'text-color') !default;
 // $kbd-padding-y:                     .2rem !default;
 // $kbd-padding-x:                     .4rem !default;
 // $kbd-font-size:                     $code-font-size !default;
-// $kbd-color:                         $white !default;
-// $kbd-bg:                            $gray-900 !default;
+// $kbd-color:                         var(--#{$prefix}body-bg) !default;
+// $kbd-bg:                            var(--#{$prefix}body-color) !default;
+// $nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, removing in v6
 
 // $pre-color:                         null !default;