@design-factory/styles 21.0.0-next.0 → 21.0.0-next.1

package/scss/bootstrap/_variables.scss

@@ -1,7 +1,10 @@
-@use 'sass:math';
 @use 'sass:map';
 @use 'sass:color';
-@use 'sass:meta';
+@import '@design-factory/tokens/scss/vars-light';
+@import '@design-factory/tokens/scss/root';
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$prefix: df-;
 
 // stylelint-disable scss/dollar-variable-pattern
 // Variables
@@ -17,18 +20,18 @@ $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;
+$gray-1000: $df-theme-neutral-110 !default;
+$gray-900: $df-theme-neutral-100 !default; // cloud-100
+$gray-800: $df-theme-neutral-90 !default;
+$gray-700: $df-theme-neutral-80 !default;
+$gray-600: $df-theme-neutral-70 !default;
+$gray-500: $df-theme-neutral-60 !default;
+$gray-400: $df-theme-neutral-50 !default;
+$gray-300: $df-theme-neutral-40 !default;
+$gray-200: $df-theme-neutral-30 !default;
+$gray-100: $df-theme-neutral-20 !default;
+$gray-50: $df-theme-neutral-10 !default;
+$gray-0: $df-theme-neutral-0 !default;
 // scss-docs-end gray-color-variables
 
 // fusv-disable
@@ -51,21 +54,21 @@ $grays: (
 // 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;
+$blue: $df-colorPalette-sky-60 !default;
+$indigo: #6610f2 !default; // not changed
+$purple: $df-colorPalette-violet-60 !default;
+$pink: $df-colorPalette-fuchsia-60 !default; // fuchsia
+$red: $df-colorPalette-crimson-60 !default;
+$orange: $df-colorPalette-pumpkin-40 !default; // orange 400
+$yellow: $df-colorPalette-canary-60 !default;
+$green: $df-colorPalette-forest-60 !default;
+$teal: $df-colorPalette-sky-60 !default; // put to blue, temporary ?
+$cyan: #009dd1 !default; // not changed
 
 // DF specific colors
-$dark-orange: #e95326 !default;
-$light-blue: #9bcaeb !default;
-$brown: #9e6900 !default;
+$dark-orange: $df-colorPalette-pumpkin-70 !default; // TODO verify usaged not changed
+$light-blue: #9bcaeb !default; // TODO verify this one
+$brown: #9e6900 !default; // not changed
 $brand-green: #00a34e !default;
 // scss-docs-end color-variables
 
@@ -91,18 +94,24 @@ $colors: (
 
 // 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;
+$secondary: $gray-700 !default; // not changed
+$success: $df-theme-success-60 !default;
+$info: $blue !default; // Sky 60
+$warning: $df-theme-warning-40 !default; // Orange 400
+$danger: $df-theme-danger-60 !default; // Crimson 500
+$light: $gray-50 !default; // changed
+$dark: $gray-700 !default; // changed
+$dark-sky: $df-theme-primary-90 !default; // added
 
 // DF Theme colors
 $mystery: $purple !default;
 $love: $pink !default;
 $pacific: $light-blue !default;
+$light-primary: $df-theme-primary-20 !default; // create
+$tip: $purple !default;
+$chromatic1: $yellow !default;
+$chromatic2: $pink !default;
+$pacific: $light-blue !default; // to removed ? where used ?
 
 // Added DF theme colors
 $light-primary: color.mix($primary, $white, 10%) !default;
@@ -111,16 +120,14 @@ $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,
-  'mystery': $mystery,
-  'love': $love,
-  'pacific': $pacific
+  'neutral': $dark,
+  'tip': $tip,
+  'chromatic1': $chromatic1,
+  'chromatic2': $chromatic2
 ) !default;
 // scss-docs-end theme-colors-map
 
@@ -136,16 +143,16 @@ $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
+$dark-50: $gray-50 !default;
+$dark-100: $gray-100 !default;
+$dark-200: $gray-200 !default;
+$dark-300: $gray-300 !default;
+$dark-400: $gray-400 !default;
+$dark-500: $gray-500 !default;
+$dark-600: $gray-600 !default;
+$dark-700: $gray-700 !default;
+$dark-800: $gray-800 !default;
+$dark-900: $gray-900 !default;
 
 $light-900: #1a1a1a !default;
 $light-800: #333 !default;
@@ -170,16 +177,16 @@ $white-100: color.adjust($white, $lightness: -5%) !default; // added to the olf
 $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;
+$blue-50: $df-colorPalette-sky-10 !default;
+$blue-100: $df-colorPalette-sky-20 !default;
+$blue-200: $df-colorPalette-sky-30 !default;
+$blue-300: $df-colorPalette-sky-40 !default;
+$blue-400: $df-colorPalette-sky-50 !default;
+$blue-500: $df-colorPalette-sky-60 !default;
+$blue-600: $df-colorPalette-sky-70 !default;
+$blue-700: $df-colorPalette-sky-80 !default;
+$blue-800: $df-colorPalette-sky-90 !default;
+$blue-900: $df-colorPalette-sky-100 !default;
 
 $pacific-50: color.mix($pacific, $white, 5%) !default;
 $pacific-100: color.mix($pacific, $white, 10%) !default;
@@ -192,16 +199,16 @@ $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;
+$primary-50: $df-theme-primary-10 !default;
+$primary-100: $df-theme-primary-20 !default;
+$primary-200: $df-theme-primary-30 !default;
+$primary-300: $df-theme-primary-40 !default;
+$primary-400: $df-theme-primary-50 !default;
+$primary-500: $df-theme-primary-60 !default;
+$primary-600: $df-theme-primary-70 !default;
+$primary-700: $df-theme-primary-80 !default;
+$primary-800: $df-theme-primary-90 !default;
+$primary-900: $df-theme-primary-100 !default;
 
 $indigo-50: tint-color($indigo, 90%) !default;
 $indigo-100: tint-color($indigo, 80%) !default;
@@ -214,126 +221,126 @@ $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;
+$purple-50: $df-colorPalette-violet-10 !default;
+$purple-100: $df-colorPalette-violet-20 !default;
+$purple-200: $df-colorPalette-violet-30 !default;
+$purple-300: $df-colorPalette-violet-40 !default;
+$purple-400: $df-colorPalette-violet-50 !default;
+$purple-500: $df-colorPalette-violet-60 !default;
+$purple-600: $df-colorPalette-violet-70 !default;
+$purple-700: $df-colorPalette-violet-80 !default;
+$purple-800: $df-colorPalette-violet-90 !default;
+$purple-900: $df-colorPalette-violet-100 !default;
+
+$pink-50: $df-colorPalette-fuchsia-10 !default;
+$pink-100: $df-colorPalette-fuchsia-20 !default;
+$pink-200: $df-colorPalette-fuchsia-30 !default;
+$pink-300: $df-colorPalette-fuchsia-40 !default;
+$pink-400: $df-colorPalette-fuchsia-50 !default;
+$pink-500: $df-colorPalette-fuchsia-60 !default;
+$pink-600: $df-colorPalette-fuchsia-70 !default;
+$pink-700: $df-colorPalette-fuchsia-80 !default;
+$pink-800: $df-colorPalette-fuchsia-90 !default;
+$pink-900: $df-colorPalette-fuchsia-100 !default;
+
+$red-50: $df-colorPalette-crimson-10 !default;
+$red-100: $df-colorPalette-crimson-20 !default;
+$red-200: $df-colorPalette-crimson-30 !default;
+$red-300: $df-colorPalette-crimson-40 !default;
+$red-400: $df-colorPalette-crimson-50 !default;
+$red-500: $df-colorPalette-crimson-60 !default;
+$red-600: $df-colorPalette-crimson-70 !default;
+$red-700: $df-colorPalette-crimson-80 !default;
+$red-800: $df-colorPalette-crimson-90 !default;
+$red-900: $df-colorPalette-crimson-100 !default;
+
+$orange-50: $df-colorPalette-pumpkin-10 !default;
+$orange-100: $df-colorPalette-pumpkin-20 !default;
+$orange-200: $df-colorPalette-pumpkin-30 !default;
+$orange-300: $df-colorPalette-pumpkin-40 !default;
+$orange-400: $df-colorPalette-pumpkin-50 !default;
+$orange-500: $df-colorPalette-pumpkin-60 !default;
+$orange-600: $df-colorPalette-pumpkin-70 !default;
+$orange-700: $df-colorPalette-pumpkin-80 !default;
+$orange-800: $df-colorPalette-pumpkin-90 !default;
+$orange-900: $df-colorPalette-pumpkin-100 !default;
+
+$yellow-50: $df-colorPalette-canary-10 !default;
+$yellow-100: $df-colorPalette-canary-20 !default;
+$yellow-200: $df-colorPalette-canary-30 !default;
+$yellow-300: $df-colorPalette-canary-40 !default;
+$yellow-400: $df-colorPalette-canary-50 !default;
+$yellow-500: $df-colorPalette-canary-60 !default;
+$yellow-600: $df-colorPalette-canary-70 !default;
+$yellow-700: $df-colorPalette-canary-80 !default;
+$yellow-800: $df-colorPalette-canary-90 !default;
+$yellow-900: $df-colorPalette-canary-100 !default;
+
+$green-50: $df-colorPalette-forest-10 !default;
+$green-100: $df-colorPalette-forest-20 !default;
+$green-200: $df-colorPalette-forest-30 !default;
+$green-300: $df-colorPalette-forest-40 !default;
+$green-400: $df-colorPalette-forest-50 !default;
+$green-500: $df-colorPalette-forest-60 !default;
+$green-600: $df-colorPalette-forest-70 !default;
+$green-700: $df-colorPalette-forest-80 !default;
+$green-800: $df-colorPalette-forest-90 !default;
+$green-900: $df-colorPalette-forest-100 !default;
+
+$teal-50: $df-colorPalette-sky-10 !default;
+$teal-100: $df-colorPalette-sky-20 !default;
+$teal-200: $df-colorPalette-sky-30 !default;
+$teal-300: $df-colorPalette-sky-40 !default;
+$teal-400: $df-colorPalette-sky-50 !default;
+$teal-500: $df-colorPalette-sky-60 !default;
+$teal-600: $df-colorPalette-sky-70 !default;
+$teal-700: $df-colorPalette-sky-80 !default;
+$teal-800: $df-colorPalette-sky-90 !default;
+$teal-900: $df-colorPalette-sky-100 !default;
+
+$info-50: $df-theme-info-10 !default;
+$info-100: $df-theme-info-20 !default;
+$info-200: $df-theme-info-30 !default;
+$info-300: $df-theme-info-40 !default;
+$info-400: $df-theme-info-50 !default;
+$info-500: $df-theme-info-60 !default;
+$info-600: $df-theme-info-70 !default;
+$info-700: $df-theme-info-80 !default;
+$info-800: $df-theme-info-90 !default;
+$info-900: $df-theme-info-100 !default;
+
+$danger-50: $df-theme-danger-10 !default;
+$danger-100: $df-theme-danger-20 !default;
+$danger-200: $df-theme-danger-30 !default;
+$danger-300: $df-theme-danger-40 !default;
+$danger-400: $df-theme-danger-50 !default;
+$danger-500: $df-theme-danger-60 !default;
+$danger-600: $df-theme-danger-70 !default;
+$danger-700: $df-theme-danger-80 !default;
+$danger-800: $df-theme-danger-90 !default;
+$danger-900: $df-theme-danger-100 !default;
+
+$warning-50: $df-theme-warning-10 !default;
+$warning-100: $df-theme-warning-20 !default;
+$warning-200: $df-theme-warning-30 !default;
+$warning-300: $df-theme-warning-40 !default;
+$warning-400: $df-theme-warning-50 !default;
+$warning-500: $df-theme-warning-60 !default;
+$warning-600: $df-theme-warning-70 !default;
+$warning-700: $df-theme-warning-80 !default;
+$warning-800: $df-theme-warning-90 !default;
+$warning-900: $df-theme-warning-100 !default;
+
+$success-50: $df-theme-success-10 !default;
+$success-100: $df-theme-success-20 !default;
+$success-200: $df-theme-success-30 !default;
+$success-300: $df-theme-success-40 !default;
+$success-400: $df-theme-success-50 !default;
+$success-500: $df-theme-success-60 !default;
+$success-600: $df-theme-success-70 !default;
+$success-700: $df-theme-success-80 !default;
+$success-800: $df-theme-success-90 !default;
+$success-900: $df-theme-success-100 !default;
 
 $cyan-50: tint-color($cyan, 90%) !default;
 $cyan-100: tint-color($cyan, 80%) !default;
@@ -632,111 +639,6 @@ $cyans: (
   '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
@@ -751,14 +653,15 @@ $shade-colors: map.merge(
 // 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;
+$primary-bg-subtle: var(--df-color-primary-subtle-background) !default;
+// TODO check where this is used in bootstrap
+$secondary-bg-subtle: var(--df-secondary-50) !default;
+$success-bg-subtle: var(--df-color-success-subtle-background) !default;
+$info-bg-subtle: var(--df-color-info-subtle-background) !default;
+$warning-bg-subtle: var(--df-color-warning-subtle-background) !default;
+$danger-bg-subtle: var(--df-color-danger-subtle-background) !default;
+// TODO check where this is used in bootstrap
+$light-bg-subtle: var(--df-white) !default;
 // scss-docs-end theme-bg-subtle-variables
 
 // scss-docs-start theme-border-subtle-variables
@@ -819,43 +722,23 @@ $enable-dark-mode: false !default;
 // 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;
+$spacer: $df-spacing-5 !default;
+$spacers: () !default;
+
+$enable-negative-margins: false !default;
+
+@for $i from 0 through 12 {
+  $spacers: map.set($spacers, $i, var(--df-spacing-#{$i}));
+}
+
+@if $enable-negative-margins {
+  $negative-spacers: () !default;
+  @for $i from 1 through 12 {
+    $negative-spacers: map.set($negative-spacers, 'n' + $i, calc(-1 * var(--df-spacing-#{$i})));
+  }
+} @else {
+  $negative-spacers: null !default;
+}
 // scss-docs-end spacer-variables-maps
 
 // Position
@@ -886,6 +769,8 @@ $body-tertiary-bg: $gray-100 !default;
 
 $body-emphasis-color: $black !default;
 
+$color-contrast-dark: $body-color !default; // should be same as $body-color but not a CSS var
+
 // Paragraphs
 //
 // Style p element.
@@ -960,9 +845,10 @@ $border-color: var(--df-color-inert-neutral-main-border) !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: var(--df-borderRadius-main-medium) !default;
+$border-radius-sm: var(--df-borderRadius-main-small) !default;
+$border-radius-lg: var(--df-borderRadius-main-large) !default;
+$border-radius-pill: var(--df-borderRadius-main-rounded) !default;
 // $border-radius-xl:            1rem !default;
 // $border-radius-xxl:           2rem !default;
 // $border-radius-pill:          50rem !default;
@@ -1018,7 +904,7 @@ $focus-ring-box-shadow: 0 0 var(--df-box-shadow-blur, $focus-ring-blur) var(--df
 // stylelint-enable function-disallowed-list
 
 // scss-docs-start vr-variables
-// $vr-border-width:             var(--#{$prefix}border-width) !default;
+// $vr-border-width:             var(--df-border-width) !default;
 // scss-docs-end vr-variables
 
 // $legend-margin-bottom:        .5rem !default;
@@ -1035,8 +921,6 @@ $focus-ring-box-shadow: 0 0 var(--df-box-shadow-blur, $focus-ring-blur) var(--df
 // 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;
@@ -1045,17 +929,11 @@ $input-btn-padding-x: 1rem !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;
+// $input-btn-border-width:      var(--df-border-width) !default;
 // scss-docs-end input-btn-variables
 
 // Z-index master list
@@ -1107,12 +985,14 @@ $btn-close-opacity: 0.55 !default;
 
 // $code-font-size:                    $small-font-size !default;
 $code-color: var(--df-color-chromatic2-alt-default-foreground) !default;
+// have to override code-color-dark even though it is not used, as sass compilation fails otherwise
+$code-color-dark: tint-color($pink, 40%) !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;
+// $kbd-color:                         var(--df-body-bg) !default;
+// $kbd-bg:                            var(--df-body-color) !default;
 // $nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, removing in v6
 
 // $pre-color:                         null !default;