@design-factory/styles 21.0.0-next.0

package/scss/bootstrap/_variables.scss

@@ -0,0 +1,1118 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:color';
+@use 'sass:meta';
+
+// stylelint-disable scss/dollar-variable-pattern
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+
+// scss-docs-start gray-color-variables
+$white: #fff !default;
+$black: #000 !default; // changed
+
+// DF specific colors
+// Grey colors
+$gray-1000: #000000 !default;
+$gray-900: #1a1a1a !default;
+$gray-800: #333 !default;
+$gray-700: #4d4d4d !default;
+$gray-600: #666 !default;
+$gray-500: #808080 !default;
+$gray-400: #999 !default;
+$gray-300: #b3b3b3 !default;
+$gray-200: #ccc !default;
+$gray-100: #e6e6e6 !default;
+$gray-50: #f2f2f2 !default;
+$gray-0: #ffffff !default;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+  '0': $gray-0,
+  '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,
+  '1000': $gray-1000
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue: #005eb8 !default;
+$indigo: #6610f2 !default;
+$purple: #6f2b8d !default;
+$pink: #ce0058 !default;
+$red: #c60000 !default;
+$orange: #f7a827 !default;
+$yellow: #feeb3d !default;
+$green: #008540 !default;
+$teal: #1a7ead !default;
+$cyan: #009dd1 !default;
+
+// DF specific colors
+$dark-orange: #e95326 !default;
+$light-blue: #9bcaeb !default;
+$brown: #9e6900 !default;
+$brand-green: #00a34e !default;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+  'blue': $blue,
+  'purple': $purple,
+  'pink': $pink,
+  'red': $red,
+  'orange': $orange,
+  'dark-orange': $dark-orange,
+  'yellow': $yellow,
+  'green': $green,
+  'teal': $teal,
+  'cyan': $cyan,
+  'white': $white,
+  'brown': $brown,
+  'brand-green': $brand-green,
+  'light-blue': $light-blue,
+  'black': $black
+) !default;
+// scss-docs-end colors-map
+
+// scss-docs-start theme-color-variables
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $teal !default;
+$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
+$light-primary: color.mix($primary, $white, 10%) !default;
+// scss-docs-end theme-color-variables
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger,
+  'light': $light,
+  'dark': $dark,
+  'mystery': $mystery,
+  'love': $love,
+  '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;
+// 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.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+// $min-contrast-ratio:   4.5 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+// $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-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;
+
+$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;
+
+$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;
+
+$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;
+
+$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;
+
+$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;
+
+$mysteries: (
+  'mystery-50': $purple-50,
+  'mystery-100': $purple-100,
+  'mystery-200': $purple-200,
+  '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
+) !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;
+
+// Create a map of all colors shades
+$shade-colors: () !default;
+
+// stylelint-disable  scss/dollar-variable-default
+$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
+);
+
+// Grays map does not include gray prefix in the color name by default
+$grays-names: ();
+@each $colorName, $colorValue in $grays {
+  $grays-names: map.set($grays-names, gray-#{$colorName}, $colorValue);
+}
+
+$shade-colors: map.merge(
+  $map1: $shade-colors,
+  $map2: $grays-names
+);
+$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"),
+//   (">", "%3e"),
+//   ("#", "%23"),
+//   ("(", "%28"),
+//   (")", "%29"),
+// ) !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+// $enable-caret:                true !default;
+// $enable-rounded:              true !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;
+$enable-validation-icons: false !default;
+// $enable-deprecation-messages: true !default;
+// $enable-important-utilities:  true !default;
+
+$enable-dark-mode: false !default;
+// $color-mode-type:             data !default; // `data` or `media-query`
+
+// Gradient
+//
+// The gradient which is added to components if `$enable-gradients` is `true`
+// This gradient is also added to elements with `.bg-gradient`
+// scss-docs-start variable-gradient
+// $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+// scss-docs-end variable-gradient
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+// scss-docs-start spacer-variables-maps
+$spacer: 1rem !default;
+$spacers: (
+  0: 0,
+  1: (
+    $spacer * 0.125
+  ),
+  2: (
+    $spacer * 0.25
+  ),
+  3: (
+    $spacer * 0.5
+  ),
+  4: (
+    $spacer * 0.75
+  ),
+  5: (
+    $spacer * 1
+  ),
+  6: (
+    $spacer * 1.5
+  ),
+  7: (
+    $spacer * 2
+  ),
+  8: (
+    $spacer * 2.5
+  ),
+  9: (
+    $spacer * 3
+  ),
+  10: (
+    $spacer * 4
+  ),
+  11: (
+    $spacer * 6
+  )
+) !default;
+// scss-docs-end spacer-variables-maps
+
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+
+// scss-docs-start position-map
+// $position-values: (
+//   0: 0,
+//   50: 50%,
+//   100: 100%
+// ) !default;
+// scss-docs-end position-map
+
+// Body
+//
+// Settings for the `<body>` element.
+
+// $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;
+
+// Paragraphs
+//
+// Style p element.
+
+// $paragraph-margin-bottom:   1rem !default;
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  xxxl: 1600px
+) !default;
+// scss-docs-end 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.
+
+// scss-docs-start container-max-widths
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px,
+  xxxl: 1580px
+) !default;
+// scss-docs-end 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.
+
+// $grid-columns:                12 !default;
+// $grid-gutter-width:           1.5rem !default;
+// $grid-row-columns:            6 !default;
+
+// Container padding
+
+// $container-padding-x: $grid-gutter-width * .5 !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+// scss-docs-start border-variables
+$border-width: 1px !default;
+// $border-widths: (
+//   1: 1px,
+//   2: 2px,
+//   3: 3px,
+//   4: 4px,
+//   5: 5px
+// ) !default;
+// $border-style:                solid !default;
+$border-color: var(--df-color-inert-neutral-main-border) !default;
+// $border-color-translucent:    rgba($black, .175) !default;
+// scss-docs-end border-variables
+
+// scss-docs-start border-radius-variables
+$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-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;
+// $box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
+// $box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
+// $box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
+// scss-docs-end box-shadow-variables
+
+$component-active-color: $white !default;
+$component-active-bg: var(--df-primary-500) !default; // $primary !default;
+
+// scss-docs-start focus-ring-variables
+$focus-ring-width: 0.25rem !default;
+$focus-ring-opacity: 0.25 !default;
+$focus-ring-color: rgba(
+  var(--df-primary-500-rgb),
+  $focus-ring-opacity
+) !default; // default rgba($component-active-bg, $focus-ring-opacity)
+$focus-ring-blur: 0 !default;
+$focus-ring-box-shadow: 0 0 var(--df-box-shadow-blur, $focus-ring-blur) var(--df-box-shadow-width, $focus-ring-width)
+  var(--df-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;
+// $caret-spacing:               $caret-width * .85 !default;
+// scss-docs-end caret-variables
+
+// $transition-base:             all .2s ease-in-out !default;
+// $transition-fade:             opacity .15s linear !default;
+// scss-docs-start collapse-transition
+// $transition-collapse:         height .35s ease !default;
+// $transition-collapse-width:   width .35s ease !default;
+// scss-docs-end collapse-transition
+
+// stylelint-disable function-disallowed-list
+// scss-docs-start aspect-ratios
+// $aspect-ratios: (
+//   "1x1": 100%,
+//   "4x3": calc(3 / 4 * 100%),
+//   "16x9": calc(9 / 16 * 100%),
+//   "21x9": calc(9 / 21 * 100%)
+// ) !default;
+// scss-docs-end aspect-ratios
+// stylelint-enable function-disallowed-list
+
+// 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;
+
+// $dt-font-weight:              $font-weight-bold !default;
+
+// $list-inline-padding:         .5rem !default;
+// scss-docs-end type-variables
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+// scss-docs-start input-btn-variables
+$input-btn-padding-y: 0.3125rem !default;
+$input-btn-padding-x: 1rem !default;
+// $input-btn-font-family:       null !default;
+// $input-btn-font-size:         $font-size-base !default;
+// $input-btn-line-height:       $line-height-base !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;
+// $input-btn-font-size-sm:      $font-size-sm !default;
+
+$input-btn-padding-y-lg: $input-btn-padding-y * map.get($df-sizing-ratios, 'lg') !default;
+$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:      var(--#{$prefix}border-width) !default;
+// scss-docs-end input-btn-variables
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+// scss-docs-start zindex-stack
+// $zindex-dropdown:                   1000 !default;
+// $zindex-sticky:                     1020 !default;
+// $zindex-fixed:                      1030 !default;
+// $zindex-offcanvas-backdrop:         1040 !default;
+// $zindex-offcanvas:                  1045 !default;
+// $zindex-modal-backdrop:             1050 !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
+
+// Close
+
+// scss-docs-start close-variables
+$btn-close-width: 0.8em !default;
+// $btn-close-height:           $btn-close-width !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-focus-shadow:     $input-btn-focus-box-shadow !default;
+$btn-close-opacity: 0.55 !default;
+// $btn-close-hover-opacity:    .75 !default;
+// $btn-close-focus-opacity:    1 !default;
+// $btn-close-disabled-opacity: .25 !default;
+// $btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
+// scss-docs-end close-variables
+
+// Code
+
+// $code-font-size:                    $small-font-size !default;
+$code-color: var(--df-color-chromatic2-alt-default-foreground) !default;
+
+// $kbd-padding-y:                     .2rem !default;
+// $kbd-padding-x:                     .4rem !default;
+// $kbd-font-size:                     $code-font-size !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;