@design-factory/design-factory 15.2.3 → 16.0.1

package/styles/scss/bootstrap/_variables.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use 'sass:map';
+@use 'sass:color';
 // stylelint-disable scss/dollar-variable-pattern
 // Variables
 //
@@ -8,8 +9,15 @@
 
 // Color system
 
+$prefix: df- !default;
+
+
 // scss-docs-start gray-color-variables
 $white: #fff !default;
+$black:  #000 !default; // changed
+
+// DF specific colors
+// Grey colors
 $gray-900: #1a1a1a !default;
 $gray-800: #333 !default;
 $gray-700: #4d4d4d !default;
@@ -19,15 +27,13 @@ $gray-400: #999 !default;
 $gray-300: #b3b3b3 !default;
 $gray-200: #ccc !default;
 $gray-100: #e6e6e6 !default;
-$black: #000 !default;
-// DF specific colors
 $gray-50: #f2f2f2 !default;
 // scss-docs-end gray-color-variables
 
 // fusv-disable
 // scss-docs-start gray-colors-map
 $grays: (
-  '50': $gray-50,
+  "50": $gray-50,
   "100": $gray-100,
   "200": $gray-200,
   "300": $gray-300,
@@ -36,7 +42,7 @@ $grays: (
   "600": $gray-600,
   "700": $gray-700,
   "800": $gray-800,
-  "900": $gray-900
+  "900": $gray-900,
 ) !default;
 // scss-docs-end gray-colors-map
 // fusv-enable
@@ -89,10 +95,15 @@ $warning: $orange !default;
 $danger: $red !default;
 $light: $gray-100 !default;
 $dark: $gray-700 !default;
+
 // DF Theme colors
 $mystery: $purple !default;
 $love: $pink !default;
 $pacific: $light-blue !default;
+
+// Added DF theme colors
+$dark-primary: color.adjust($primary, $lightness: -10%) !default;
+$light-primary: color.mix($primary, $white, 10%) !default;
 // scss-docs-end theme-color-variables
 
 // scss-docs-start theme-colors-map
@@ -107,7 +118,7 @@ $theme-colors: (
   "dark": $dark,
   'mystery': $mystery,
   'love': $love,
-  'pacific': $pacific
+  'pacific': $pacific,
 ) !default;
 // scss-docs-end theme-colors-map
 
@@ -123,226 +134,877 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 // $color-contrast-dark:      $black !default;
 // $color-contrast-light:     $white !default;
 
+$dark-900: color.adjust($dark, $lightness: -10%) !default;
+$dark-800: color.adjust($dark, $lightness: -5%) !default;
+$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
+
+$light-900: #1a1a1a !default;
+$light-800: #333 !default;
+$light-700: #4d4d4d !default;
+$light-600: #666 !default;
+$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
+
+$white-900: #1a1a1a !default;
+$white-800: #333 !default;
+$white-700: #4d4d4d !default;
+$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-100: color.adjust($white, $lightness: -5%) !default; // added to the olf DF palette
+$white-50: $white !default;
+
 // fusv-disable
-// $blue-100: tint-color($blue, 80%) !default;
-// $blue-200: tint-color($blue, 60%) !default;
-// $blue-300: tint-color($blue, 40%) !default;
-// $blue-400: tint-color($blue, 20%) !default;
-// $blue-500: $blue !default;
-// $blue-600: shade-color($blue, 20%) !default;
-// $blue-700: shade-color($blue, 40%) !default;
-// $blue-800: shade-color($blue, 60%) !default;
-// $blue-900: shade-color($blue, 80%) !default;
-
-// $indigo-100: tint-color($indigo, 80%) !default;
-// $indigo-200: tint-color($indigo, 60%) !default;
-// $indigo-300: tint-color($indigo, 40%) !default;
-// $indigo-400: tint-color($indigo, 20%) !default;
-// $indigo-500: $indigo !default;
-// $indigo-600: shade-color($indigo, 20%) !default;
-// $indigo-700: shade-color($indigo, 40%) !default;
-// $indigo-800: shade-color($indigo, 60%) !default;
-// $indigo-900: shade-color($indigo, 80%) !default;
-
-// $purple-100: tint-color($purple, 80%) !default;
-// $purple-200: tint-color($purple, 60%) !default;
-// $purple-300: tint-color($purple, 40%) !default;
-// $purple-400: tint-color($purple, 20%) !default;
-// $purple-500: $purple !default;
-// $purple-600: shade-color($purple, 20%) !default;
-// $purple-700: shade-color($purple, 40%) !default;
-// $purple-800: shade-color($purple, 60%) !default;
-// $purple-900: shade-color($purple, 80%) !default;
-
-// $pink-100: tint-color($pink, 80%) !default;
-// $pink-200: tint-color($pink, 60%) !default;
-// $pink-300: tint-color($pink, 40%) !default;
-// $pink-400: tint-color($pink, 20%) !default;
-// $pink-500: $pink !default;
-// $pink-600: shade-color($pink, 20%) !default;
-// $pink-700: shade-color($pink, 40%) !default;
-// $pink-800: shade-color($pink, 60%) !default;
-// $pink-900: shade-color($pink, 80%) !default;
-
-// $red-100: tint-color($red, 80%) !default;
-// $red-200: tint-color($red, 60%) !default;
-// $red-300: tint-color($red, 40%) !default;
-// $red-400: tint-color($red, 20%) !default;
-// $red-500: $red !default;
-// $red-600: shade-color($red, 20%) !default;
-// $red-700: shade-color($red, 40%) !default;
-// $red-800: shade-color($red, 60%) !default;
-// $red-900: shade-color($red, 80%) !default;
-
-// $orange-100: tint-color($orange, 80%) !default;
-// $orange-200: tint-color($orange, 60%) !default;
-// $orange-300: tint-color($orange, 40%) !default;
-// $orange-400: tint-color($orange, 20%) !default;
-// $orange-500: $orange !default;
-// $orange-600: shade-color($orange, 20%) !default;
-// $orange-700: shade-color($orange, 40%) !default;
-// $orange-800: shade-color($orange, 60%) !default;
-// $orange-900: shade-color($orange, 80%) !default;
-
-// $yellow-100: tint-color($yellow, 80%) !default;
-// $yellow-200: tint-color($yellow, 60%) !default;
-// $yellow-300: tint-color($yellow, 40%) !default;
-// $yellow-400: tint-color($yellow, 20%) !default;
-// $yellow-500: $yellow !default;
-// $yellow-600: shade-color($yellow, 20%) !default;
-// $yellow-700: shade-color($yellow, 40%) !default;
-// $yellow-800: shade-color($yellow, 60%) !default;
-// $yellow-900: shade-color($yellow, 80%) !default;
-
-// $green-100: tint-color($green, 80%) !default;
-// $green-200: tint-color($green, 60%) !default;
-// $green-300: tint-color($green, 40%) !default;
-// $green-400: tint-color($green, 20%) !default;
-// $green-500: $green !default;
-// $green-600: shade-color($green, 20%) !default;
-// $green-700: shade-color($green, 40%) !default;
-// $green-800: shade-color($green, 60%) !default;
-// $green-900: shade-color($green, 80%) !default;
-
-// $teal-100: tint-color($teal, 80%) !default;
-// $teal-200: tint-color($teal, 60%) !default;
-// $teal-300: tint-color($teal, 40%) !default;
-// $teal-400: tint-color($teal, 20%) !default;
-// $teal-500: $teal !default;
-// $teal-600: shade-color($teal, 20%) !default;
-// $teal-700: shade-color($teal, 40%) !default;
-// $teal-800: shade-color($teal, 60%) !default;
-// $teal-900: shade-color($teal, 80%) !default;
-
-// $cyan-100: tint-color($cyan, 80%) !default;
-// $cyan-200: tint-color($cyan, 60%) !default;
-// $cyan-300: tint-color($cyan, 40%) !default;
-// $cyan-400: tint-color($cyan, 20%) !default;
-// $cyan-500: $cyan !default;
-// $cyan-600: shade-color($cyan, 20%) !default;
-// $cyan-700: shade-color($cyan, 40%) !default;
-// $cyan-800: shade-color($cyan, 60%) !default;
-// $cyan-900: shade-color($cyan, 80%) !default;
-
-// $blues: (
-//   "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;
+$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-500: $blue !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;
+
+$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-500: $pacific !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;
+
+$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-500: $primary !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;
+
+$indigo-50: tint-color($indigo, 90%) !default;
+$indigo-100: tint-color($indigo, 80%) !default;
+$indigo-200: tint-color($indigo, 60%) !default;
+$indigo-300: tint-color($indigo, 40%) !default;
+$indigo-400: tint-color($indigo, 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: shade-color($indigo, 20%) !default;
+$indigo-700: shade-color($indigo, 40%) !default;
+$indigo-800: shade-color($indigo, 60%) !default;
+$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-500: $purple !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;
+
+$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-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;
+
+$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-500: $red !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;
+
+$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-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-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-500: $yellow !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;
+
+$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-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;
+
+$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-500: $teal !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;
+
+$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-500: $info !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;
+
+$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-500: $danger !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;
+
+$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-500: $warning !default;
+$warning-600: color.adjust($warning, $lightness: -5%) !default;
+$warning-700: color.adjust($warning, $lightness: -10%) !default;
+$warning-800: #9e6900 !default; // brown as it is used as text color for warning
+$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-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;
+
+$cyan-50: tint-color($cyan, 90%) !default;
+$cyan-100: tint-color($cyan, 80%) !default;
+$cyan-200: tint-color($cyan, 60%) !default;
+$cyan-300: tint-color($cyan, 40%) !default;
+$cyan-400: tint-color($cyan, 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: shade-color($cyan, 20%) !default;
+$cyan-700: shade-color($cyan, 40%) !default;
+$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
+) !default;
 
-// $indigos: (
-//   "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;
+$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
+) !default;
 
-// $purples: (
-//   "purple-100": $purple-200,
-//   "purple-200": $purple-100,
-//   "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;
+$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
+) !default;
 
-// $pinks: (
-//   "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;
+$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
+) !default;
 
-// $reds: (
-//   "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;
+$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
+) !default;
 
-// $oranges: (
-//   "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;
+$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
+) !default;
 
-// $yellows: (
-//   "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;
+$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
+) !default;
 
-// $greens: (
-//   "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;
+$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
+) !default;
 
-// $teals: (
-//   "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;
+$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
+) !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
+) !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
+) !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
+) !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
+) !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
+) !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
+) !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
+) !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;
+
+$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,
+) !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,
+) !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
+) !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
+) !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
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !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),
+) !default;
+
+// Create a map of all colors shades
+$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);
+// stylelint-enable  scss/dollar-variable-default
 
-// $cyans: (
-//   "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;
 // fusv-enable
 
 // Characters which are escaped by the escape-svg function
@@ -360,7 +1022,7 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 
 // $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;
@@ -376,9 +1038,6 @@ $enable-negative-margins: true !default;
 
 // Prefix for :root CSS variables
 
-$variable-prefix: df- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
-// $prefix: $variable-prefix !default;
-
 // Gradient
 //
 // The gradient which is added to components if `$enable-gradients` is `true`
@@ -449,15 +1108,15 @@ $spacers: (
 //
 // Settings for the `<body>` element.
 
-$body-bg: $white !default;
-$body-color: $gray-900 !default;
+$body-bg: var(--#{$prefix}white) !default;
+$body-color: var(--#{$prefix}gray-900) !default;
 // $body-text-align:           null !default;
 
 // Links
 //
 // Style anchor elements.
 
-$link-color: $primary !default;
+$link-color: shades-css-var('primary') !default;
 $link-decoration: none !default;
 // $link-shade-percentage:                   20% !default;
 $link-hover-color: $link-color !default;
@@ -542,7 +1201,7 @@ $border-width: 1px !default;
 // ) !default;
 
 // $border-style:                solid !default;
-$border-color: $gray-200 !default;
+$border-color: #{shades-css-var('gray', 'border-color')} !default;
 // $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
@@ -598,8 +1257,8 @@ $component-active-bg: $primary !default;
 $font-family-sans-serif: 'Source Sans Pro', sans-serif !default;
 // $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
-// $font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;
-// $font-family-code:            var(--#{$variable-prefix}font-monospace) !default;
+// $font-family-base:            var(--#{$prefix}font-sans-serif) !default;
+// $font-family-code:            var(--#{$prefix}font-monospace) !default;
 
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
 // $font-size-base affects the font size of the body text
@@ -673,7 +1332,7 @@ $display-line-height: 1.1 !default;
 
 // $sub-sup-font-size:           .75em !default;
 
-// $text-muted:                  $gray-600 !default;
+$text-muted:                  $gray-700 !default;
 
 // $initialism-font-size:        $small-font-size !default;
 
@@ -744,7 +1403,7 @@ $table-th-font-weight: 500 !default;
 // $table-striped-order:         odd !default;
 // $table-striped-columns-order: even !default;
 
-$table-group-separator-color: $gray-400 !default;
+$table-group-separator-color: var(--#{$prefix}gray-400) !default;
 
 // $table-caption-color:         $text-muted !default;
 
@@ -776,11 +1435,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 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !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-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;
@@ -825,7 +1484,7 @@ $btn-disabled-opacity: 1 !default;
 
 // $btn-link-color:              $link-color !default;
 // $btn-link-hover-color:        $link-hover-color !default;
-$btn-link-disabled-color: $gray-400 !default;
+$btn-link-disabled-color: var(--#{$prefix}gray-400) !default; // default $gray-600 but we align with $df-disabled-color
 
 // Allows for customizing button radius independently from global border radius
 // $btn-border-radius:           $border-radius !default;
@@ -956,7 +1615,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:       $form-switch-width + .5em !default;
+$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;
@@ -1150,7 +1809,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:           1rem !default;
+$navbar-brand-margin-end:           0px !default; // default 1rem
 
 $navbar-toggler-padding-y: 0.125rem !default;
 $navbar-toggler-padding-x: 0.125rem !default;
@@ -1161,18 +1820,19 @@ $navbar-toggler-padding-x: 0.125rem !default;
 // scss-docs-end navbar-variables
 
 // scss-docs-start navbar-theme-variables
-$navbar-dark-color: $white !default;
-$navbar-dark-hover-color: $white !default;
-// $navbar-dark-active-color:          $white !default;
-$navbar-dark-disabled-color: $gray-500 !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='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$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-disabled-color: var(--#{$prefix}gray-500) !default; // verified this
+// 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-border-color: transparent !default;
 
-$navbar-light-color: $primary !default;
-$navbar-light-hover-color: $primary !default;
-$navbar-light-active-color: $primary !default;
-$navbar-light-disabled-color: $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='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !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;
@@ -1200,14 +1860,14 @@ $dropdown-border-color: $border-color !default;
 // $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
 // $dropdown-divider-bg:               $dropdown-border-color !default;
 // $dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow: $df-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-hover-bg: $gray-100 !default;
 
-$dropdown-link-active-color: $black !default;
-$dropdown-link-active-bg: $gray-200 !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;
 
@@ -1253,16 +1913,16 @@ $pagination-color: $black !default;
 // $pagination-margin-start:           -$pagination-border-width !default;
 // $pagination-border-color:           $gray-300 !default;
 
-// $pagination-focus-color:            $link-hover-color !default;
-// $pagination-focus-bg:               $gray-200 !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-outline:          0 !default;
 
-$pagination-hover-color: $black !default;
-// $pagination-hover-bg:               $gray-200 !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-active-color: $white !default;
+// $pagination-active-color:           $component-active-color !default;
 // $pagination-active-bg:              $component-active-bg !default;
 // $pagination-active-border-color:    $pagination-active-bg !default;
 
@@ -1345,7 +2005,7 @@ $accordion-icon-active-color: $accordion-icon-color !default;
 // Tooltips
 
 // scss-docs-start tooltip-variables
-// $tooltip-font-size:                 $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;
@@ -1376,12 +2036,12 @@ $tooltip-padding-x: 0.75rem !default;
 // scss-docs-start popover-variables
 $popover-font-size: $font-size-base !default;
 // $popover-bg:                        $white !default;
-// $popover-max-width:                 276px !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-box-shadow: $df-box-shadow !default;
+$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
 
 // $popover-header-font-size:          $font-size-base !default;
 $popover-header-bg: $white !default;
@@ -1521,7 +2181,7 @@ $progress-border-radius: 1rem !default;
 // scss-docs-start list-group-variables
 // $list-group-color:                  $gray-900 !default;
 // $list-group-bg:                     $white !default;
-// $list-group-border-color:           rgba($black, .125) !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;
 
@@ -1530,19 +2190,19 @@ $list-group-item-padding-x: 1rem !default;
 // $list-group-item-bg-scale:          -80% !default;
 // $list-group-item-color-scale:       40% !default;
 
-// $list-group-hover-bg:               $gray-100 !default;
-$list-group-active-color: $primary !default; // default  $component-active-color
-$list-group-active-bg: rgba($list-group-active-color, 0.1) !default; // $component-active-bg
+$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-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-action-color:           $gray-700 !default;
+$list-group-action-color:           $gray-900 !default; // default $gray-700
 // $list-group-action-hover-color:     $list-group-action-color !default;
 
-// $list-group-action-active-color:    $body-color !default;
-// $list-group-action-active-bg:       $gray-200 !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
 // scss-docs-end list-group-variables
 
 
@@ -1572,7 +2232,7 @@ $list-group-disabled-bg: $gray-100 !default; // default $list-group-bg, align wi
 // $breadcrumb-font-size:              null !default;
 // $breadcrumb-padding-y:              0 !default;
 // $breadcrumb-padding-x:              0 !default;
-// $breadcrumb-item-padding-x:         .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;
@@ -1641,8 +2301,8 @@ $btn-close-width: 0.80em !default;
 // $btn-close-height:           $btn-close-width !default;
 $btn-close-padding-x:        .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;
@@ -1673,7 +2333,7 @@ $btn-close-opacity: 0.55 !default;
 // Code
 
 // $code-font-size:                    $small-font-size !default;
-// $code-color:                        $pink !default;
+$code-color: shades-css-var('pink', 'text-color') !default;
 
 // $kbd-padding-y:                     .2rem !default;
 // $kbd-padding-x:                     .4rem !default;