@design-factory/design-factory 16.0.2 → 17.0.1

package/styles/scss/themes/brand2023/_variables.scss

@@ -9,57 +9,56 @@
 
 $prefix: df- !default;
 
-
 // scss-docs-start gray-color-variables
 $white: #fff !default;
-$black:  #000 !default; // changed
+$black: #000 !default; // changed
 
 // DF specific colors
 // Grey colors
-$gray-900: #1A1A1A !default;
+$gray-900: #1a1a1a !default;
 $gray-800: #333333 !default;
 $gray-700: #666666 !default;
 $gray-600: #808080 !default;
 $gray-500: #999999 !default;
-$gray-400: #B3B3B3 !default;
-$gray-300: #CCCCCC !default;
-$gray-200: #E6E6E6 !default;
-$gray-100: #F2F2F2 !default;
-$gray-50: #FAFAFA !default;
+$gray-400: #b3b3b3 !default;
+$gray-300: #cccccc !default;
+$gray-200: #e6e6e6 !default;
+$gray-100: #f2f2f2 !default;
+$gray-50: #fafafa !default;
 // scss-docs-end gray-color-variables
 
 // scss-docs-start color-variables
 // TODO attention maybe init this from the shades
-$blue: #0C66E1 !default;
+$blue: #0c66e1 !default;
 $indigo: #6610f2 !default; // not changed
-$purple: #9240CC !default;
-$pink: #CC468A !default; // fuchsia
-$red: #DF3127 !default;
-$orange: #FA6400 !default;
-$yellow: #E9CF1C !default;
-$green: #6DC354 !default;
-$teal: #0C66E1 !default; // put to blue, temporary ?
+$purple: #9240cc !default;
+$pink: #cc468a !default; // fuchsia
+$red: #df3127 !default;
+$orange: #fa6400 !default;
+$yellow: #e9cf1c !default;
+$green: #6dc354 !default;
+$teal: #0c66e1 !default; // put to blue, temporary ?
 $cyan: #009dd1 !default; // not changed
 
 // DF specific colors
 $dark-orange: #e95326 !default; // TODO verify usaged not changed
-$light-blue: #9bcaeb !default; // TODO verify this one 
+$light-blue: #9bcaeb !default; // TODO verify this one
 $brown: #9e6900 !default; // not changed
-$brand-green: #3A662E !default; // TODO check where used because not accessible with white
+$brand-green: #3a662e !default; // TODO check where used because not accessible with white
 // scss-docs-end color-variables
 
 // scss-docs-start theme-color-variables
 $primary: $blue !default;
 $secondary: $gray-700 !default; // not changed
-$success: #3A662E !default;
+$success: #3a662e !default;
 $info: $gray-500 !default; // gray-500 cloud 60
-$warning: #FA6400 !default; // Orange 500
-$danger: #DF3127 !default; // Crimson 500
+$warning: #fa6400 !default; // Orange 500
+$danger: #df3127 !default; // Crimson 500
 $light: $gray-50 !default; // changed
 $dark: $gray-700 !default; // changed
 $dark-sky: #000835 !default; // added
 $dark-primary: $dark-sky !default; // moved and changed
-$light-primary: #C5D5F9 !default; // create
+$light-primary: #c5d5f9 !default; // create
 $mystery: $purple !default;
 $love: $pink !default;
 $pacific: $light-blue !default; // to removed ? where used ?
@@ -67,14 +66,14 @@ $pacific: $light-blue !default; // to removed ? where used ?
 
 // scss-docs-start theme-colors-map
 $theme-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "success": $success,
-  "info": $info,
-  "warning": $warning,
-  "danger": $danger,
-  "light": $light,
-  "dark": $dark,
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger,
+  'light': $light,
+  'dark': $dark,
   'mystery': $mystery,
   'love': $love,
   'pacific': $pacific,
@@ -83,25 +82,25 @@ $theme-colors: (
 // scss-docs-end theme-colors-map
 
 // fusv-disable
-$blue-50: #EBF3FF !default;
-$blue-100: #C5D5F9 !default;
-$blue-200: #9FC6FF !default;
-$blue-300: #61A2FF !default;
-$blue-400: #3A8BFF !default;
+$blue-50: #ebf3ff !default;
+$blue-100: #c5d5f9 !default;
+$blue-200: #9fc6ff !default;
+$blue-300: #61a2ff !default;
+$blue-400: #3a8bff !default;
 $blue-500: $blue !default;
-$blue-600: #104EA4 !default;
-$blue-700: #0A2F62 !default;
+$blue-600: #104ea4 !default;
+$blue-700: #0a2f62 !default;
 $blue-800: #000835 !default;
 $blue-900: #000521 !default;
 
-$primary-50: #EBF3FF !default;
-$primary-100: #C5D5F9 !default;
-$primary-200: #9FC6FF !default;
-$primary-300: #61A2FF !default;
-$primary-400: #3A8BFF !default;
+$primary-50: #ebf3ff !default;
+$primary-100: #c5d5f9 !default;
+$primary-200: #9fc6ff !default;
+$primary-300: #61a2ff !default;
+$primary-400: #3a8bff !default;
 $primary-500: $primary !default;
-$primary-600: #104EA4 !default;
-$primary-700: #0A2F62 !default;
+$primary-600: #104ea4 !default;
+$primary-700: #0a2f62 !default;
 $primary-800: #000835 !default;
 $primary-900: #000521 !default;
 
@@ -116,318 +115,326 @@ $info-700: $gray-700 !default;
 $info-800: $gray-800 !default;
 $info-900: $gray-900 !default;
 
-$purple-50: #F8EEFF !default;
-$purple-100: #E4C7FF !default;
-$purple-200: #D396FF !default;
-$purple-300: #C573FF !default;
-$purple-400: #B650FF !default;
+$purple-50: #f8eeff !default;
+$purple-100: #e4c7ff !default;
+$purple-200: #d396ff !default;
+$purple-300: #c573ff !default;
+$purple-400: #b650ff !default;
 $purple-500: $purple !default;
-$purple-600: #6D3099 !default;
-$purple-700: #461B64 !default;
-$purple-800: #26005A !default;
+$purple-600: #6d3099 !default;
+$purple-700: #461b64 !default;
+$purple-800: #26005a !default;
 $purple-900: #160033 !default;
 
-$pink-50: #FFEEF7 !default;
-$pink-100: #FFC5F9 !default;
-$pink-200: #FF9BE3 !default;
-$pink-300: #FF79BD !default;
-$pink-400: #FF58AC !default;
+$pink-50: #ffeef7 !default;
+$pink-100: #ffc5f9 !default;
+$pink-200: #ff9be3 !default;
+$pink-300: #ff79bd !default;
+$pink-400: #ff58ac !default;
 $pink-500: $pink !default;
 $pink-600: #993567 !default;
 $pink-700: #662345 !default;
-$pink-800: #4F0230 !default;
-$pink-900: #34001F!default;
-
-$red-50: #FFEEED !default;
-$red-100: #FFD7D7 !default;
-$red-200: #FF9794 !default;
-$red-300: #FF7471 !default;
-$red-400: #FF514D !default;
+$pink-800: #4f0230 !default;
+$pink-900: #34001f !default;
+
+$red-50: #ffeeed !default;
+$red-100: #ffd7d7 !default;
+$red-200: #ff9794 !default;
+$red-300: #ff7471 !default;
+$red-400: #ff514d !default;
 $red-500: $red !default;
-$red-600: #B2271F !default;
-$red-700: #861D17 !default;
+$red-600: #b2271f !default;
+$red-700: #861d17 !default;
 $red-800: #560900 !default;
-$red-900: #430F0C !default;
+$red-900: #430f0c !default;
 
-$orange-50: #FFF0E6 !default;
-$orange-100: #FFD9C4 !default;
-$orange-200: #FFA366 !default;
-$orange-300: #FF8838 !default;
-$orange-400: #FF7920 !default;
+$orange-50: #fff0e6 !default;
+$orange-100: #ffd9c4 !default;
+$orange-200: #ffa366 !default;
+$orange-300: #ff8838 !default;
+$orange-400: #ff7920 !default;
 $orange-500: $orange !default;
-$orange-600: #C74905 !default;
+$orange-600: #c74905 !default;
 $orange-700: #863701 !default;
-$orange-800: #5B2500 !default;
-$orange-900: #3B1800 !default;
-
-$yellow-50: #FFFCE6 !default;
-$yellow-100: #FFFEB0 !default;
-$yellow-200: #FDF092 !default;
-$yellow-300: #FDEB6D !default;
-$yellow-400: #FCE649 !default;
+$orange-800: #5b2500 !default;
+$orange-900: #3b1800 !default;
+
+$yellow-50: #fffce6 !default;
+$yellow-100: #fffeb0 !default;
+$yellow-200: #fdf092 !default;
+$yellow-300: #fdeb6d !default;
+$yellow-400: #fce649 !default;
 $yellow-500: $yellow !default;
-$yellow-600: #AA9B2D !default;
-$yellow-700: #74691C !default;
-$yellow-800: #564A00 !default;
-$yellow-900: #2A2500 !default;
+$yellow-600: #aa9b2d !default;
+$yellow-700: #74691c !default;
+$yellow-800: #564a00 !default;
+$yellow-900: #2a2500 !default;
 
 $green-50: #f0ffec !default;
-$green-100: #C8FFC0 !default;
-$green-200: #BEFFAB !default;
-$green-300: #A8FF8F !default;
-$green-400: #92FF73 !default;
+$green-100: #c8ffc0 !default;
+$green-200: #beffab !default;
+$green-300: #a8ff8f !default;
+$green-400: #92ff73 !default;
 $green-500: $green !default;
 $green-600: #569643 !default;
-$green-700: #3A662E !default;
-$green-800: #023A00 !default;
-$green-900: #0F190B !default;
-
-$teal-50: #EBF3FF !default;
-$teal-100: #C5D5F9 !default;
-$teal-200: #9FC6FF !default;
-$teal-300: #61A2FF !default;
-$teal-400: #3A8BFF !default;
+$green-700: #3a662e !default;
+$green-800: #023a00 !default;
+$green-900: #0f190b !default;
+
+$teal-50: #ebf3ff !default;
+$teal-100: #c5d5f9 !default;
+$teal-200: #9fc6ff !default;
+$teal-300: #61a2ff !default;
+$teal-400: #3a8bff !default;
 $teal-500: $teal !default;
-$teal-600: #104EA4 !default;
-$teal-700: #0A2F62 !default;
+$teal-600: #104ea4 !default;
+$teal-700: #0a2f62 !default;
 $teal-800: #000835 !default;
 $teal-900: #000521 !default;
 
-$danger-50: #FFEEED !default;
-$danger-100: #FFD7D7 !default;
-$danger-200: #FF9794 !default;
-$danger-300: #FF7471 !default;
-$danger-400: #FF514D !default;
+$danger-50: #ffeeed !default;
+$danger-100: #ffd7d7 !default;
+$danger-200: #ff9794 !default;
+$danger-300: #ff7471 !default;
+$danger-400: #ff514d !default;
 $danger-500: $danger !default;
-$danger-600: #B2271F !default;
-$danger-700: #861D17 !default;
+$danger-600: #b2271f !default;
+$danger-700: #861d17 !default;
 $danger-800: #560900 !default;
-$danger-900: #430F0C !default;
-
-$warning-50: #FFF0E6 !default;
-$warning-100: #FFD9C4 !default;
-$warning-200: #FFA366 !default;
-$warning-300: #FF8838 !default;
-$warning-400: #FF7920 !default;
-$warning-500: #FA6400 !default;
-$warning-600: #C74905 !default;
+$danger-900: #430f0c !default;
+
+$warning-50: #fff0e6 !default;
+$warning-100: #ffd9c4 !default;
+$warning-200: #ffa366 !default;
+$warning-300: #ff8838 !default;
+$warning-400: #ff7920 !default;
+$warning-500: #fa6400 !default;
+$warning-600: #c74905 !default;
 $warning-700: #863701 !default;
-$warning-800: #5B2500 !default;
-$warning-900: #3B1800 !default;
-
-$success-50: #F0FFEC !default;
-$success-100: #C8FFC0 !default;
-$success-200: #BEFFAB !default;
-$success-300: #A8FF8F !default;
-$success-400: #92FF73 !default;
-$success-500: #6DC354 !default;
+$warning-800: #5b2500 !default;
+$warning-900: #3b1800 !default;
+
+$success-50: #f0ffec !default;
+$success-100: #c8ffc0 !default;
+$success-200: #beffab !default;
+$success-300: #a8ff8f !default;
+$success-400: #92ff73 !default;
+$success-500: #6dc354 !default;
 $success-600: #569643 !default;
-$success-700: #3A662E !default;
-$success-800: #023A00 !default;
-$success-900: #0F190B !default;
+$success-700: #3a662e !default;
+$success-800: #023a00 !default;
+$success-900: #0f190b !default;
 
 $secondaries: (
-  "secondary-50": $gray-50,
-  "secondary-100": $gray-100,
-  "secondary-200": $gray-200,
-  "secondary-300": $gray-300,
-  "secondary-400": $gray-400,
-  "secondary-500": $gray-500,
-  "secondary-600": $gray-600,
-  "secondary-700": $gray-700,
-  "secondary-800": $gray-800,
-  "secondary-900": $gray-900
+  'secondary-50': $gray-50,
+  'secondary-100': $gray-100,
+  'secondary-200': $gray-200,
+  '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;
 
 $grays-mapping: (
-  "border-color": var(--#{$prefix}gray-300),
-  "text-color": var(--#{$prefix}gray-600),
-  "text-hover-color": var(--#{$prefix}gray-800),
-  "text-active-color": var(--#{$prefix}secondary-900),
+  'border-color': var(--#{$prefix}gray-300),
+  'text-color': var(--#{$prefix}gray-600),
+  'text-hover-color': var(--#{$prefix}gray-800),
+  'text-active-color': var(--#{$prefix}secondary-900)
 ) !default;
 
-$secondaries-mapping: ( // different from old branding
-  "bg-color": var(--#{$prefix}secondary-700),
-  "bg-hover-color": var(--#{$prefix}secondary-900),
-  "bg-active-color": var(--#{$prefix}black),
-  "inert-color": var(--#{$prefix}secondary-700),
-  "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-700),
-  "text-color": var(--#{$prefix}secondary-700),
-  "text-hover-color": var(--#{$prefix}secondary-900),
-  "text-active-color": var(--#{$prefix}black),
+$secondaries-mapping: (
+  // different from old branding
+  'bg-color': var(--#{$prefix}secondary-700),
+  'bg-hover-color': var(--#{$prefix}secondary-900),
+  'bg-active-color': var(--#{$prefix}black),
+  'inert-color': var(--#{$prefix}secondary-700),
+  '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-700),
+  'text-color': var(--#{$prefix}secondary-700),
+  'text-hover-color': var(--#{$prefix}secondary-900),
+  'text-active-color': var(--#{$prefix}black)
 ) !default;
 
 $dark-primaries-mapping: (
-  "bg-color": var(--#{$prefix}primary-800),
-  "bg-hover-color": var(--#{$prefix}primary-600),
-  "bg-active-color": var(--#{$prefix}primary-500),
-  "inert-color": var(--#{$prefix}primary-800),
-  "bg-subtle-color": var(--#{$prefix}primary-50),
-  "bg-subtle-hover-color": var(--#{$prefix}primary-50),
-  "bg-subtle-active-color": var(--#{$prefix}primary-100),
-  "border-color": var(--#{$prefix}primary-800),
-  "text-color": var(--#{$prefix}primary-800),
-  "text-hover-color": var(--#{$prefix}primary-600),
-  "text-active-color": var(--#{$prefix}primary-500),
+  'bg-color': var(--#{$prefix}primary-800),
+  'bg-hover-color': var(--#{$prefix}primary-600),
+  'bg-active-color': var(--#{$prefix}primary-500),
+  'inert-color': var(--#{$prefix}primary-800),
+  'bg-subtle-color': var(--#{$prefix}primary-50),
+  'bg-subtle-hover-color': var(--#{$prefix}primary-50),
+  'bg-subtle-active-color': var(--#{$prefix}primary-100),
+  'border-color': var(--#{$prefix}primary-800),
+  'text-color': var(--#{$prefix}primary-800),
+  'text-hover-color': var(--#{$prefix}primary-600),
+  'text-active-color': var(--#{$prefix}primary-500)
 ) !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-600),
-  "text-color": var(--#{$prefix}pink-600),
-  "text-hover-color": var(--#{$prefix}pink-800),
-  "text-active-color": var(--#{$prefix}pink-900),
+  '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-600),
+  'text-color': var(--#{$prefix}pink-600),
+  'text-hover-color': var(--#{$prefix}pink-800),
+  'text-active-color': var(--#{$prefix}pink-900)
 ) !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-600),
-  "text-hover-color": var(--#{$prefix}love-800),
-  "text-active-color": var(--#{$prefix}love-900),
+  '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-600),
+  'text-hover-color': var(--#{$prefix}love-800),
+  'text-active-color': var(--#{$prefix}love-900)
 ) !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-600),
-  "text-hover-color": var(--#{$prefix}orange-800),
-  "text-active-color": var(--#{$prefix}orange-900),
+  'bg-color': var(--#{$prefix}orange-500),
+  'bg-hover-color': var(--#{$prefix}orange-700),
+  'bg-active-color': var(--#{$prefix}orange-800),
+  'inert-color': var(--#{$prefix}orange-600),
+  'bg-subtle-color': var(--#{$prefix}orange-50),
+  'bg-subtle-hover-color': var(--#{$prefix}orange-100),
+  'bg-subtle-active-color': var(--#{$prefix}orange-200),
+  'border-color': var(--#{$prefix}orange-500),
+  'text-color': var(--#{$prefix}orange-600),
+  'text-hover-color': var(--#{$prefix}orange-800),
+  '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-700),
-  "text-hover-color": var(--#{$prefix}yellow-800), // only +1 as no other possibility (to check)
-  "text-active-color": var(--#{$prefix}yellow-900),  
+  '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-700),
+  'text-hover-color': var(--#{$prefix}yellow-800),
+  // only +1 as no other possibility (to check)
+  'text-active-color': var(--#{$prefix}yellow-900)
 ) !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-700),
-  "text-hover-color": var(--#{$prefix}green-800), // idem
-  "text-active-color": var(--#{$prefix}green-900),
+  '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-700),
+  'text-hover-color': var(--#{$prefix}green-800),
+  // idem
+  'text-active-color': var(--#{$prefix}green-900)
 ) !default;
 
 $whites-mapping: (
-  "bg-color": var(--#{$prefix}white),
-  "bg-hover-color": var(--#{$prefix}primary-50),
-  "bg-active-color": var(--#{$prefix}primary-100),
-  "inert-color": var(--#{$prefix}white),
-  "bg-subtle-color": var(--#{$prefix}primary-50),
-  "bg-subtle-hover-color": var(--#{$prefix}primary-100),
-  "bg-subtle-active-color": var(--#{$prefix}primary-200),
-  "border-color": var(--#{$prefix}primary-50),
-  "text-color": var(--#{$prefix}gray-700),
-  "text-hover-color": var(--#{$prefix}gray-800),
-  "text-active-color": var(--#{$prefix}gray-900),
+  'bg-color': var(--#{$prefix}white),
+  'bg-hover-color': var(--#{$prefix}primary-50),
+  'bg-active-color': var(--#{$prefix}primary-100),
+  'inert-color': var(--#{$prefix}white),
+  'bg-subtle-color': var(--#{$prefix}primary-50),
+  'bg-subtle-hover-color': var(--#{$prefix}primary-100),
+  'bg-subtle-active-color': var(--#{$prefix}primary-200),
+  'border-color': var(--#{$prefix}primary-50),
+  'text-color': var(--#{$prefix}gray-700),
+  'text-hover-color': var(--#{$prefix}gray-800),
+  'text-active-color': var(--#{$prefix}gray-900)
 ) !default;
 
 $darks-mapping: (
-  "bg-color": var(--#{$prefix}dark-800),
-  "bg-hover-color": var(--#{$prefix}dark-900),
-  "bg-active-color": var(--#{$prefix}black),
-  "inert-color": var(--#{$prefix}dark-800),
-  "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-800),
-  "text-hover-color": var(--#{$prefix}dark-900),
-  "text-active-color": var(--#{$prefix}black),
+  'bg-color': var(--#{$prefix}dark-800),
+  'bg-hover-color': var(--#{$prefix}dark-900),
+  'bg-active-color': var(--#{$prefix}black),
+  'inert-color': var(--#{$prefix}dark-800),
+  '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-800),
+  'text-hover-color': var(--#{$prefix}dark-900),
+  'text-active-color': var(--#{$prefix}black)
 ) !default;
 
 $lights-mapping: (
-  "bg-color": var(--#{$prefix}light-200),
-  "bg-hover-color": var(--#{$prefix}light-300),
-  "bg-active-color": var(--#{$prefix}light-400),
-  "inert-color": var(--#{$prefix}light-200),
-  "bg-subtle-color": var(--#{$prefix}white),
-  "bg-subtle-hover-color": var(--#{$prefix}light-50),
-  "bg-subtle-active-color": var(--#{$prefix}light-100),
-  "border-color": var(--#{$prefix}light-500),
-  "text-color": var(--#{$prefix}light-600),
-  "text-hover-color": var(--#{$prefix}light-800),
-  "text-active-color": var(--#{$prefix}light-900),
+  'bg-color': var(--#{$prefix}light-200),
+  'bg-hover-color': var(--#{$prefix}light-300),
+  'bg-active-color': var(--#{$prefix}light-400),
+  'inert-color': var(--#{$prefix}light-200),
+  '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;
 
 $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-700), // first accessible green
-  "text-hover-color": var(--#{$prefix}success-800),
-  "text-active-color": var(--#{$prefix}success-900),
+  '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-700),
+  // first accessible green
+  'text-hover-color': var(--#{$prefix}success-800),
+  'text-active-color': var(--#{$prefix}success-900)
 ) !default;
 
 $warnings-mapping: (
-  "bg-color": var(--#{$prefix}warning-500),
-  "bg-hover-color": var(--#{$prefix}warning-700),
-  "bg-active-color": var(--#{$prefix}warning-800),
-  "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-600),
-  "text-hover-color": var(--#{$prefix}warning-800),
-  "text-active-color": var(--#{$prefix}warning-900),
+  'bg-color': var(--#{$prefix}warning-500),
+  'bg-hover-color': var(--#{$prefix}warning-700),
+  'bg-active-color': var(--#{$prefix}warning-800),
+  '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-600),
+  'text-hover-color': var(--#{$prefix}warning-800),
+  'text-active-color': var(--#{$prefix}warning-900)
 ) !default;
 
 $df-enableBranding2023: true !default;
 
 $shade-maps: () !default;
 // stylelint-disable  scss/dollar-variable-default
-$shade-maps: map.set($shade-maps, "dark-primary", $dark-primaries-mapping);
+$shade-maps: map.set($shade-maps, 'dark-primary', $dark-primaries-mapping);
 // stylelint-enable  scss/dollar-variable-default
 
-$body-bg: var(--#{$prefix}white) !default;
-$body-color: var(--#{$prefix}gray-900) !default;
-$color-contrast-dark: $gray-900 !default; // should be same as $body-color but not a CSS var
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+$color-contrast-dark: $body-color !default; // should be same as $body-color but not a CSS var
 $df-disabled-color: var(--#{$prefix}gray-400) !default;
 $df-disabled-bg-color: var(--#{$prefix}gray-200) !default;
-$df-focused-inset-box-shadow: inset 0 0 0 2px var(--#{$prefix}inner-box-shadow-color, $body-bg), inset 0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
-$input-btn-focus-box-shadow: 0 0 0 2px var(--#{$prefix}inner-box-shadow-color, $body-bg), 0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
+$df-focused-inset-box-shadow:
+  inset 0 0 0 2px var(--#{$prefix}inner-box-shadow-color, var(--#{$prefix}body-bg)),
+  inset 0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
+$input-btn-focus-box-shadow:
+  0 0 0 2px var(--#{$prefix}inner-box-shadow-color, var(--#{$prefix}body-bg)),
+  0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
 $input-focus-border-color: var(--#{$prefix}gray-700) !default;
 $input-border-color: $gray-700 !default;
 
@@ -457,13 +464,18 @@ $df-btn-focus-hover-box-shadow-color: var(--#{$prefix}btn-hover-bg) !default;
 $df-btn-focus-active-box-shadow-color: var(--#{$prefix}btn-active-bg) !default;
 $df-btn-outline-focus-hover-box-shadow-color: var(--#{$prefix}btn-hover-color) !default;
 $df-btn-outline-focus-active-box-shadow-color: var(--#{$prefix}btn-active-color) !default;
-$df-btn-focus-box-shadow: 0 0 0 2px var(--#{$prefix}inner-box-shadow-color, $body-bg), 0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
+$df-btn-focus-box-shadow:
+  0 0 0 2px var(--#{$prefix}inner-box-shadow-color, var(--#{$prefix}body-bg)),
+  0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
 $df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 1) !default;
 $df-btn-check-active-property: 'bg-active-color' !default;
 $df-btn-bg-color: var(--#{$prefix}white) !default;
 $df-btn-focus-only-bg-color: var(--#{$prefix}white) !default;
 $df-btn-outline-focus-box-shadow-color: var(--#{$prefix}btn-color) !default;
 
+// Button close
+$df-btn-close-focus-shadow-width: 2px !default;
+
 // Button link
 $df-btn-link-active-bg-color: var(--#{$prefix}primary-200) !default;
 $df-btn-link-active-color: var(--#{$prefix}primary-800) !default;
@@ -481,7 +493,7 @@ $df-card-focusable-bg-color: var(--#{$prefix}primary-50) !default; // shades-css
 
 // Datepicker
 $df-datepicker-day-range-bg-color: var(--#{$prefix}primary-50) !default;
-$df-datepicker-day-active-bg-color: var(--#{$prefix}primary-100)  !default;
+$df-datepicker-day-active-bg-color: var(--#{$prefix}primary-100) !default;
 $df-datepicker-day-active-color: var(--#{$prefix}primary-100-color) !default;
 
 // Dropdown
@@ -494,6 +506,7 @@ $dropdown-link-active-color: var(--#{$prefix}primary-100-color) !default;
 $figure-caption-color: var(--#{$prefix}gray-700) !default;
 
 // Fonts
+$font-family-sans-serif: 'Amadeus', sans-serif !default;
 $display-font-weight: 500 !default;
 
 // Footer
@@ -522,7 +535,7 @@ $list-group-active-color: var(--#{$prefix}primary-100-color) !default;
 $list-group-action-active-color: var(--#{$prefix}primary-100-color) !default;
 $list-group-action-active-bg: var(--#{$prefix}primary-100) !default;
 $list-group-disabled-color: $gray-400 !default; // default $gray-600, align with $df-disabled-color
-$list-group-disabled-bg: $gray-200 !default; 
+$list-group-disabled-bg: $gray-200 !default;
 $df-list-group-focus-box-shadow: $df-focused-inset-box-shadow !default;
 
 // Navbar
@@ -534,7 +547,7 @@ $navbar-light-brand-hover-color: var(--#{$prefix}primary-700) !default;
 $df-navbar-nav-link-focus-color: var(--#{$prefix}primary-900) !default;
 
 // Pagination
-$pagination-active-color: var(--#{$prefix}primary-100-color)  !default;
+$pagination-active-color: var(--#{$prefix}primary-100-color) !default;
 $pagination-active-bg: var(--#{$prefix}primary-100) !default;
 
 // Progress indicator
@@ -553,19 +566,24 @@ $df-sidenav-item-active-border-color: var(--#{$prefix}primary-800) !default;
 
 // Scrollspy
 $df-scrollspy-navpill-active-border-left: 3px solid var(--#{$prefix}primary-800) !default;
-$df-scrollspy-active-color: $body-color !default;
+$df-scrollspy-active-color: var(--#{$prefix}body-color) !default;
 
 // Stepper
-$df-stepper-steps-colors:  ("current": "dark-primary", "future" : "white", "completed": "primary", "warning": "danger") !default;
+$df-stepper-steps-colors: (
+  'current': 'dark-primary',
+  'future': 'white',
+  'completed': 'primary',
+  'warning': 'danger'
+) !default;
 
 // Tabset
 $df-tabs-focus-box-shadow: $df-focused-inset-box-shadow !default;
-$nav-tabs-link-active-color: $body-color !default;
-$nav-pills-link-active-color: $body-color !default;
+$nav-tabs-link-active-color: var(--#{$prefix}body-color) !default;
+$nav-pills-link-active-color: var(--#{$prefix}body-color) !default;
 $df-tabs-between-item-margin: 0px !default;
 $df-tabs-active-border-bottom: 3px solid var(--#{$prefix}primary-800) !default;
 $df-tabs-item-active-font-weight: 700 !default; // $font-weight-bold
-$nav-link-disabled-color: $df-disabled-color !default; // because of the 
+$nav-link-disabled-color: $df-disabled-color !default; // because of the
 
 // Toast
 $df-toast-close-inner-boxshadow-color: var(--#{$prefix}toast-bg) !default;
@@ -585,4 +603,4 @@ $df-checkbox-disabled-border-color: var(--#{$prefix}gray-400) !default;
 $tooltip-bg: var(--#{$prefix}gray-700) !default;
 
 // General
-$mark-bg: var(--#{$prefix}gray-700) !default;
+$mark-bg: var(--#{$prefix}gray-700) !default;