@design-factory/design-factory 17.0.2 → 18.0.0

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

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:color';
 // stylelint-disable scss/dollar-variable-pattern
 // Variables
 //
@@ -15,7 +16,7 @@ $black: #000 !default; // changed
 
 // DF specific colors
 // Grey colors
-$gray-900: #1a1a1a !default;
+$gray-900: #1a1a1a !default; // cloud-100
 $gray-800: #333333 !default;
 $gray-700: #666666 !default;
 $gray-600: #808080 !default;
@@ -34,25 +35,25 @@ $indigo: #6610f2 !default; // not changed
 $purple: #9240cc !default;
 $pink: #cc468a !default; // fuchsia
 $red: #df3127 !default;
-$orange: #fa6400 !default;
+$orange: #ff8838 !default; // orange 400
 $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
+$dark-orange: #c74905 !default; // TODO verify usaged not changed
 $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
+$dark-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;
-$info: $gray-500 !default; // gray-500 cloud 60
-$warning: #fa6400 !default; // Orange 500
+$success: #6dc354 !default;
+$info: $blue !default; // Sky 60
+$warning: #ff8838 !default; // Orange 400
 $danger: #df3127 !default; // Crimson 500
 $light: $gray-50 !default; // changed
 $dark: $gray-700 !default; // changed
@@ -77,7 +78,8 @@ $theme-colors: (
   'mystery': $mystery,
   'love': $love,
   'pacific': $pacific,
-  'dark-primary': $dark-primary
+  'dark-primary': $dark-primary,
+  'dark-green': $dark-green
 ) !default;
 // scss-docs-end theme-colors-map
 
@@ -104,16 +106,16 @@ $primary-700: #0a2f62 !default;
 $primary-800: #000835 !default;
 $primary-900: #000521 !default;
 
-$info-50: $gray-50 !default;
-$info-100: $gray-100 !default;
-$info-200: $gray-200 !default;
-$info-300: $gray-300 !default;
-$info-400: $gray-400 !default;
+$info-50: $blue-50 !default;
+$info-100: $blue-100 !default;
+$info-200: $blue-200 !default;
+$info-300: $blue-300 !default;
+$info-400: $blue-400 !default;
 $info-500: $info !default;
-$info-600: $gray-600 !default;
-$info-700: $gray-700 !default;
-$info-800: $gray-800 !default;
-$info-900: $gray-900 !default;
+$info-600: $blue-600 !default;
+$info-700: $blue-700 !default;
+$info-800: $blue-800 !default;
+$info-900: $blue-900 !default;
 
 $purple-50: #f8eeff !default;
 $purple-100: #e4c7ff !default;
@@ -225,6 +227,17 @@ $success-700: #3a662e !default;
 $success-800: #023a00 !default;
 $success-900: #0f190b !default;
 
+$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;
+
 $secondaries: (
   'secondary-50': $gray-50,
   'secondary-100': $gray-100,
@@ -238,6 +251,37 @@ $secondaries: (
   'secondary-900': $gray-900
 ) !default;
 
+$primaries-mapping: (
+  'bg-color': var(--#{$prefix}primary-500),
+  'bg-hover-color': var(--#{$prefix}primary-700),
+  'bg-active-color': var(--#{$prefix}primary-800),
+  'inert-color': var(--#{$prefix}primary-500),
+  'bg-subtle-color': var(--#{$prefix}primary-100),
+  'bg-subtle-hover-color': var(--#{$prefix}primary-300),
+  'bg-subtle-active-color': var(--#{$prefix}primary-400),
+  'bg-subtle-text-color': var(--#{$prefix}primary-50-color),
+  'bg-hover-alt-color': var(--#{$prefix}primary-100),
+  'bg-active-alt-color': var(--#{$prefix}primary-200),
+  'bg-light-color': var(--#{$prefix}primary-100),
+  'bg-light-hover-color': var(--#{$prefix}primary-300),
+  'bg-light-active-color': var(--#{$prefix}primary-400),
+  'border-color': var(--#{$prefix}primary-500),
+  'text-color': var(--#{$prefix}primary-500),
+  'text-hover-color': var(--#{$prefix}primary-700),
+  'text-active-color': var(--#{$prefix}primary-800)
+) !default;
+
+$primaries-mirror-mapping: (
+  'bg-color': var(--#{$prefix}primary-400),
+  'bg-hover-color': var(--#{$prefix}primary-200),
+  'bg-active-color': var(--#{$prefix}primary-100),
+  'text-color': var(--#{$prefix}primary-800),
+  'text-hover-color': var(--#{$prefix}primary-700),
+  'text-active-color': var(--#{$prefix}primary-800),
+  'bg-hover-alt-color': var(--#{$prefix}primary-800),
+  'bg-active-alt-color': var(--#{$prefix}primary-700)
+) !default;
+
 $grays-mapping: (
   'border-color': var(--#{$prefix}gray-300),
   'text-color': var(--#{$prefix}gray-600),
@@ -254,20 +298,38 @@ $secondaries-mapping: (
   'bg-subtle-color': var(--#{$prefix}secondary-50),
   'bg-subtle-hover-color': var(--#{$prefix}secondary-100),
   'bg-subtle-active-color': var(--#{$prefix}secondary-200),
+  'bg-hover-alt-color': var(--#{$prefix}secondary-100),
+  'bg-active-alt-color': var(--#{$prefix}secondary-200),
+  'bg-light-color': var(--#{$prefix}secondary-100),
+  'bg-light-hover-color': var(--#{$prefix}secondary-300),
+  'bg-light-active-color': var(--#{$prefix}secondary-400),
   '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;
 
+$secondaries-mirror-mapping: (
+  'bg-color': var(--#{$prefix}secondary-200),
+  'bg-hover-color': var(--#{$prefix}secondary-50),
+  'bg-active-color': var(--#{$prefix}white),
+  'text-color': var(--#{$prefix}black),
+  'text-hover-color': var(--#{$prefix}black),
+  'text-active-color': var(--#{$prefix}black),
+  'bg-hover-alt-color': var(--#{$prefix}secondary-800),
+  'bg-active-alt-color': var(--#{$prefix}secondary-700)
+) !default;
+
 $dark-primaries-mapping: (
   'bg-color': var(--#{$prefix}primary-800),
-  'bg-hover-color': var(--#{$prefix}primary-600),
-  'bg-active-color': var(--#{$prefix}primary-500),
+  'bg-hover-color': var(--#{$prefix}primary-700),
+  'bg-active-color': var(--#{$prefix}primary-800),
   '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),
+  'bg-hover-alt-color': var(--#{$prefix}primary-100),
+  'bg-active-alt-color': var(--#{$prefix}primary-200),
   'border-color': var(--#{$prefix}primary-800),
   'text-color': var(--#{$prefix}primary-800),
   'text-hover-color': var(--#{$prefix}primary-600),
@@ -279,9 +341,14 @@ $pinks-mapping: (
   '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-color': var(--#{$prefix}pink-50),
   'bg-subtle-hover-color': var(--#{$prefix}pink-200),
   'bg-subtle-active-color': var(--#{$prefix}pink-300),
+  'bg-hover-alt-color': var(--#{$prefix}pink-100),
+  'bg-active-alt-color': var(--#{$prefix}pink-200),
+  'bg-light-color': var(--#{$prefix}pink-100),
+  'bg-light-hover-color': var(--#{$prefix}pink-300),
+  'bg-light-active-color': var(--#{$prefix}pink-400),
   'border-color': var(--#{$prefix}pink-600),
   'text-color': var(--#{$prefix}pink-600),
   'text-hover-color': var(--#{$prefix}pink-800),
@@ -289,13 +356,18 @@ $pinks-mapping: (
 ) !default;
 
 $loves-mapping: (
-  'bg-color': var(--#{$prefix}love-500),
+  'bg-color': var(--#{$prefix}love-300),
   '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),
+  'bg-subtle-color': var(--#{$prefix}love-100),
+  'bg-subtle-hover-color': var(--#{$prefix}love-300),
+  'bg-subtle-active-color': var(--#{$prefix}love-400),
+  'bg-hover-alt-color': var(--#{$prefix}love-100),
+  'bg-active-alt-color': var(--#{$prefix}love-200),
+  'bg-light-color': var(--#{$prefix}love-100),
+  'bg-light-hover-color': var(--#{$prefix}love-300),
+  'bg-light-active-color': var(--#{$prefix}love-400),
   'border-color': var(--#{$prefix}love-500),
   'text-color': var(--#{$prefix}love-600),
   'text-hover-color': var(--#{$prefix}love-800),
@@ -310,6 +382,11 @@ $oranges-mapping: (
   'bg-subtle-color': var(--#{$prefix}orange-50),
   'bg-subtle-hover-color': var(--#{$prefix}orange-100),
   'bg-subtle-active-color': var(--#{$prefix}orange-200),
+  'bg-hover-alt-color': var(--#{$prefix}orange-100),
+  'bg-active-alt-color': var(--#{$prefix}orange-200),
+  'bg-light-color': var(--#{$prefix}orange-100),
+  'bg-light-hover-color': var(--#{$prefix}orange-300),
+  'bg-light-active-color': var(--#{$prefix}orange-400),
   'border-color': var(--#{$prefix}orange-500),
   'text-color': var(--#{$prefix}orange-600),
   'text-hover-color': var(--#{$prefix}orange-800),
@@ -321,9 +398,14 @@ $yellows-mapping: (
   '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),
+  'bg-subtle-color': var(--#{$prefix}yellow-100),
+  'bg-subtle-hover-color': var(--#{$prefix}yellow-300),
+  'bg-subtle-active-color': var(--#{$prefix}yellow-400),
+  'bg-hover-alt-color': var(--#{$prefix}yellow-100),
+  'bg-active-alt-color': var(--#{$prefix}yellow-200),
+  'bg-light-color': var(--#{$prefix}yellow-100),
+  'bg-light-hover-color': var(--#{$prefix}yellow-300),
+  'bg-light-active-color': var(--#{$prefix}yellow-400),
   'border-color': var(--#{$prefix}yellow-500),
   'text-color': var(--#{$prefix}yellow-700),
   'text-hover-color': var(--#{$prefix}yellow-800),
@@ -339,6 +421,11 @@ $greens-mapping: (
   'bg-subtle-color': var(--#{$prefix}green-50),
   'bg-subtle-hover-color': var(--#{$prefix}green-100),
   'bg-subtle-active-color': var(--#{$prefix}green-200),
+  'bg-hover-alt-color': var(--#{$prefix}green-100),
+  'bg-active-alt-color': var(--#{$prefix}green-200),
+  'bg-light-color': var(--#{$prefix}green-100),
+  'bg-light-hover-color': var(--#{$prefix}green-300),
+  'bg-light-active-color': var(--#{$prefix}green-400),
   'border-color': var(--#{$prefix}green-500),
   'text-color': var(--#{$prefix}green-700),
   'text-hover-color': var(--#{$prefix}green-800),
@@ -348,12 +435,17 @@ $greens-mapping: (
 
 $whites-mapping: (
   'bg-color': var(--#{$prefix}white),
-  'bg-hover-color': var(--#{$prefix}primary-50),
-  'bg-active-color': var(--#{$prefix}primary-100),
+  'bg-hover-color': var(--#{$prefix}white-100),
+  'bg-active-color': var(--#{$prefix}primary-200),
   '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),
+  'bg-hover-alt-color': var(--#{$prefix}primary-100),
+  'bg-active-alt-color': var(--#{$prefix}primary-200),
+  'bg-light-color': var(--#{$prefix}primary-100),
+  'bg-light-hover-color': var(--#{$prefix}primary-200),
+  'bg-light-active-color': var(--#{$prefix}primary-300),
   'border-color': var(--#{$prefix}primary-50),
   'text-color': var(--#{$prefix}gray-700),
   'text-hover-color': var(--#{$prefix}gray-800),
@@ -361,14 +453,16 @@ $whites-mapping: (
 ) !default;
 
 $darks-mapping: (
-  'bg-color': var(--#{$prefix}dark-800),
-  'bg-hover-color': var(--#{$prefix}dark-900),
+  'bg-color': var(--#{$prefix}gray-700),
+  'bg-hover-color': var(--#{$prefix}gray-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),
+  'bg-hover-alt-color': var(--#{$prefix}dark-100),
+  'bg-active-alt-color': var(--#{$prefix}dark-200),
+  'border-color': var(--#{$prefix}dark-800),
   'text-color': var(--#{$prefix}dark-800),
   'text-hover-color': var(--#{$prefix}dark-900),
   'text-active-color': var(--#{$prefix}black)
@@ -382,6 +476,8 @@ $lights-mapping: (
   'bg-subtle-color': var(--#{$prefix}white),
   'bg-subtle-hover-color': var(--#{$prefix}light-50),
   'bg-subtle-active-color': var(--#{$prefix}light-100),
+  'bg-hover-alt-color': var(--#{$prefix}light-100),
+  'bg-active-alt-color': var(--#{$prefix}light-200),
   'border-color': var(--#{$prefix}light-500),
   'text-color': var(--#{$prefix}light-600),
   'text-hover-color': var(--#{$prefix}light-800),
@@ -394,8 +490,13 @@ $successes-mapping: (
   '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),
+  'bg-subtle-hover-color': var(--#{$prefix}success-300),
+  'bg-subtle-active-color': var(--#{$prefix}success-400),
+  'bg-hover-alt-color': var(--#{$prefix}success-100),
+  'bg-active-alt-color': var(--#{$prefix}success-200),
+  'bg-light-color': var(--#{$prefix}success-100),
+  'bg-light-hover-color': var(--#{$prefix}success-300),
+  'bg-light-active-color': var(--#{$prefix}success-400),
   'border-color': var(--#{$prefix}success-500),
   'text-color': var(--#{$prefix}success-700),
   // first accessible green
@@ -404,24 +505,138 @@ $successes-mapping: (
 ) !default;
 
 $warnings-mapping: (
-  'bg-color': var(--#{$prefix}warning-500),
+  'bg-color': var(--#{$prefix}warning-300),
   '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),
+  'bg-subtle-hover-color': var(--#{$prefix}warning-300),
+  'bg-subtle-active-color': var(--#{$prefix}warning-400),
+  'bg-hover-alt-color': var(--#{$prefix}warning-100),
+  'bg-active-alt-color': var(--#{$prefix}warning-200),
+  'bg-light-color': var(--#{$prefix}warning-100),
+  'bg-light-hover-color': var(--#{$prefix}warning-400),
+  'bg-light-active-color': var(--#{$prefix}warning-500),
   '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;
 
+$infos-mapping: (
+  'bg-color': var(--#{$prefix}info-500),
+  'bg-hover-color': var(--#{$prefix}info-700),
+  'bg-active-color': var(--#{$prefix}info-800),
+  'inert-color': var(--#{$prefix}info-500),
+  'bg-subtle-color': var(--#{$prefix}info-50),
+  'bg-subtle-hover-color': var(--#{$prefix}info-300),
+  'bg-subtle-active-color': var(--#{$prefix}info-400),
+  'bg-hover-alt-color': var(--#{$prefix}info-100),
+  'bg-active-alt-color': var(--#{$prefix}info-200),
+  'bg-light-color': var(--#{$prefix}info-100),
+  'bg-light-hover-color': var(--#{$prefix}info-300),
+  'bg-light-active-color': var(--#{$prefix}info-400),
+  'border-color': var(--#{$prefix}info-500),
+  'text-color': var(--#{$prefix}info-500),
+  'text-hover-color': var(--#{$prefix}info-700),
+  'text-active-color': var(--#{$prefix}info-800)
+) !default;
+
+$dangers-mapping: (
+  'bg-color': var(--#{$prefix}danger-500),
+  'bg-hover-color': var(--#{$prefix}danger-700),
+  'bg-active-color': var(--#{$prefix}danger-800),
+  'inert-color': var(--#{$prefix}danger-500),
+  'bg-subtle-color': var(--#{$prefix}danger-50),
+  'bg-subtle-hover-color': var(--#{$prefix}danger-300),
+  'bg-subtle-active-color': var(--#{$prefix}danger-400),
+  'bg-hover-alt-color': var(--#{$prefix}danger-100),
+  'bg-active-alt-color': var(--#{$prefix}danger-200),
+  'bg-light-color': var(--#{$prefix}danger-100),
+  'bg-light-hover-color': var(--#{$prefix}danger-300),
+  'bg-light-active-color': var(--#{$prefix}danger-400),
+  'border-color': var(--#{$prefix}danger-500),
+  'text-color': var(--#{$prefix}danger-500),
+  'text-hover-color': var(--#{$prefix}danger-700),
+  'text-active-color': var(--#{$prefix}danger-800)
+) !default;
+
+$danger-mirror-mapping: (
+  'bg-color': var(--#{$prefix}danger-400),
+  'bg-hover-color': var(--#{$prefix}danger-200),
+  'bg-active-color': var(--#{$prefix}danger-100),
+  'text-color': var(--#{$prefix}danger-800),
+  'text-hover-color': var(--#{$prefix}danger-700),
+  'text-active-color': var(--#{$prefix}danger-800),
+  'bg-hover-alt-color': var(--#{$prefix}danger-800),
+  'bg-active-alt-color': var(--#{$prefix}danger-700)
+) !default;
+
+$mysteries-mapping: (
+  'bg-color': var(--#{$prefix}mystery-500),
+  'bg-hover-color': var(--#{$prefix}mystery-700),
+  'bg-active-color': var(--#{$prefix}mystery-800),
+  'inert-color': var(--#{$prefix}mystery-500),
+  'bg-subtle-color': var(--#{$prefix}mystery-200),
+  'bg-subtle-hover-color': var(--#{$prefix}mystery-300),
+  'bg-subtle-active-color': var(--#{$prefix}mystery-400),
+  'bg-hover-alt-color': var(--#{$prefix}mystery-100),
+  'bg-active-alt-color': var(--#{$prefix}mystery-200),
+  'bg-light-color': var(--#{$prefix}mystery-100),
+  'bg-light-hover-color': var(--#{$prefix}mystery-300),
+  'bg-light-active-color': var(--#{$prefix}mystery-400),
+  'border-color': var(--#{$prefix}mystery-500),
+  'text-color': var(--#{$prefix}mystery-500),
+  'text-hover-color': var(--#{$prefix}mystery-700),
+  'text-active-color': var(--#{$prefix}mystery-800)
+) !default;
+
+$links-mapping: (
+  'text-color': var(--#{$prefix}primary-500),
+  'bg-color': transparent,
+  'text-hover-color': var(--#{$prefix}primary-700),
+  'bg-hover-color': var(--#{$prefix}primary-100),
+  'text-active-color': var(--#{$prefix}primary-800),
+  'bg-active-color': var(--#{$prefix}primary-200),
+  'text-visited-color': var(--#{$prefix}purple-500),
+  'text-visited-hover-color': var(--#{$prefix}purple-700),
+  'bg-visisted-hover-color': var(--#{$prefix}purple-100),
+  'text-visited-active-color': var(--#{$prefix}purple-800),
+  'bg-visited-active-color': var(--#{$prefix}purple-200)
+) !default;
+
+// scss-docs-start theme-bg-subtle-variables
+$primary-bg-subtle: map.get($primaries-mapping, 'bg-subtle-color') !default;
+$secondary-bg-subtle: map.get($secondaries-mapping, 'bg-subtle-color') !default;
+$success-bg-subtle: map.get($successes-mapping, 'bg-subtle-color') !default;
+$info-bg-subtle: map.get($infos-mapping, 'bg-subtle-color') !default;
+$warning-bg-subtle: map.get($warnings-mapping, 'bg-subtle-color') !default;
+$danger-bg-subtle: map.get($dangers-mapping, 'bg-subtle-color') !default;
+$light-bg-subtle: map.get($lights-mapping, 'bg-subtle-color') !default;
+$dark-bg-subtle: map.get($darks-mapping, 'bg-subtle-color') !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
+
 $df-enableBranding2023: true !default;
+$df-initialBranding: false !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, 'primary-mirror', $primaries-mirror-mapping);
+$shade-maps: map.set($shade-maps, 'danger-mirror', $danger-mirror-mapping);
+$shade-maps: map.set($shade-maps, 'secondary-mirror', $secondaries-mirror-mapping);
+$shade-maps: map.set($shade-maps, 'links', $links-mapping);
 // stylelint-enable  scss/dollar-variable-default
 
 $body-bg: $white !default;
@@ -435,12 +650,29 @@ $df-focused-inset-box-shadow:
 $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;
+$input-focus-border-color: var(--#{$prefix}gray-600) !default;
+$input-border-color: var(--#{$prefix}gray-600) !default;
+
+$df-box-shadow: 0px 0px 8px 0px rgba($gray-600, 0.75) !default;
+
+$df-box-shadow: 0px 0px 8px 0px rgba($gray-600, 0.75) !default;
+
+// scss-docs-start border-radius-variables
+$border-radius: 0.375rem !default;
+$border-radius-sm: 0.25rem !default;
+$border-radius-lg: 0.5rem !default;
+
+// scss font weight variables
+$font-weight-medium: 500 !default;
+$font-weight-bold: 700 !default;
 
 // Accordion
 $accordion-button-focus-box-shadow: $df-focused-inset-box-shadow !default;
-$accordion-icon-color: $gray-600 !default; // can not be css var as use in background-image
+$accordion-icon-color: $primary !default; // cannot be css var as used in background-image
+$accordion-icon-active-color: $primary !default; // cannot be css var as used in background-image
+$df-accordion-button-font-weight: $font-weight-bold !default;
+$df-accordion-button-hover-icon-color: $primary-700 !default; // cannot be css var as used in background-image
+$df-accordion-button-disabled-icon-color: $gray-400 !default; // cannot be css var as used in background-image
 
 // Alert
 // TODO we could add a variable color "purple" for this
@@ -448,16 +680,33 @@ $df-alert-tip-background: var(--#{$prefix}purple-50) !default;
 $df-alert-tip-border-color: var(--#{$prefix}purple-50) !default;
 $df-alert-tip-border-start-color: var(--#{$prefix}purple-500) !default; // should we link to the CSS var gray-700 ?
 $df-alert-tip-icon-color: var(--#{$prefix}purple-500) !default;
+$alert-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$df-alert-size-default-border-start-width: 4px !default;
+$df-page-alert-border-width: 0px 0px 4px 0px !default;
+$alert-border-width: 0px !default;
 
 // Autocomplete
-$dropdown-link-hover-bg: var(--#{$prefix}primary-50) !default;
-$dropdown-link-hover-color: var(--#{$prefix}primary-50-color) !default;
-$df-typeahead-active-color: var(--#{$prefix}primary-100-color) !default;
-$df-typeahead-active-bg-color: var(--#{$prefix}primary-100) !default;
+$dropdown-link-hover-bg: var(--#{$prefix}primary-100) !default;
+$dropdown-link-hover-color: var(--#{$prefix}primary-100-color) !default;
+$df-typeahead-active-color: var(--#{$prefix}primary-800) !default;
+$df-typeahead-active-bg-color: var(--#{$prefix}primary-200) !default;
 
 // Breadcrumb
-$breadcrumb-active-color: var(--#{$prefix}primary-800) !default;
-$breadcrumb-divider-color: var(--#{$prefix}primary-800) !default;
+$breadcrumb-active-color: var(--#{$prefix}secondary-900) !default;
+$breadcrumb-divider-color: var(--#{$prefix}secondary-900) !default;
+$breadcrumb-divider: '\f054' !default; // fa-chevron-right
+$breadcrumb-divider-flipped: '\f053' !default; // fa-chevron-left
+$df-breadcrumb-separator-font: 'Font Awesome 6 Pro' !default;
+$df-breadcrumb-icon-angle-left-content: '\f060' !default; // icon-arrow-left
+$df-breadcrumb-icon-angle-right-content: '\f061' !default; // fa-arrow-right
+$df-breadcrumb-icon-margin: 0rem 0.25rem !default;
+$df-breadcrumb-item-before-padding: 0px 10px !default;
+$df-breadcrumb-item-before-padding-sm: 0 9.5px !default;
+$df-breadcrumb-item-before-padding-lg: 0 10.5px !default;
+
+// Badge
+$badge-border-radius: 0.375rem !default;
+$df-badge-box-shadow-color: $gray-900 !default;
 
 // Button
 $df-btn-focus-hover-box-shadow-color: var(--#{$prefix}btn-hover-bg) !default;
@@ -469,9 +718,12 @@ $df-btn-focus-box-shadow:
   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;
+$df-btn-tertiary-border-color: var(--#{$prefix}btn-bg) !default;
+$df-btn-icononly-border-width: var(--#{$prefix}border-width) !default;
+$df-btn-icononly-border-radius: $border-radius !default;
+$df-btn-icononly-border-radius-sm: $border-radius-sm !default;
+$df-btn-icononly-border-radius-lg: $border-radius-lg !default;
 
 // Button close
 $df-btn-close-focus-shadow-width: 2px !default;
@@ -485,32 +737,70 @@ $df-btn-group-hover-box-shadow-color: var(--#{$prefix}btn-active-color) !default
 $df-btn-group-checked-box-shadow-color: var(--#{$prefix}btn-active-border-color) !default;
 
 // Card
-$df-card-selected-bg-color: var(--#{$prefix}primary-100) !default;
-$df-card-selected-hover-bg-color: var(--#{$prefix}primary-50) !default;
-$df-card-selected-bg-color: var(--#{$prefix}primary-100) !default;
+$card-inner-border-radius: $border-radius !default;
+$card-border-width: 0 !default;
+$card-box-shadow: 0px 0px 8px rgba(var(--#{$prefix}secondary-600-rgb), 0.25) !default;
+$df-card-selected-bg-color: var(--#{$prefix}primary-200) !default;
+$df-card-selected-hover-bg-color: var(--#{$prefix}primary-100) !default;
 $df-card-selected-border-color: var(--#{$prefix}primary-500) !default;
-$df-card-focusable-bg-color: var(--#{$prefix}primary-50) !default; // shades-css-var does not work here...
+$df-card-focusable-bg-color: var(--#{$prefix}primary-100) !default;
+$df-card-focusable-focus-box-shadow-color: var(--#{$prefix}secondary-900) !default;
+$df-card-focusable-border-color: none !default;
+$df-card-focusable-hover-border-color: none !default;
+$df-card-focusable-active-border-color: none !default;
+$df-accordion-card-between-border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}secondary-200) !default;
+$df-accordion-card-last-body-border-top: none !default;
+$df-card-title-font-weight: $font-weight-medium !default;
+$df-card-group-between-border-width: var(--#{$prefix}border-width) !default;
+$df-card-group-between-border-color: var(--#{$prefix}secondary-300) !default;
+$df-accordion-card-padding-start: 1rem !default;
+
+// Carousel
+
+$carousel-control-icon-width: 2.25rem !default;
+$df-carousel-indicator-border-radius: 0.375rem !default;
+$df-carousel-indicator-bg-color: color.adjust($gray-900, $alpha: -0.25) !default;
 
 // 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-color: var(--#{$prefix}primary-100-color) !default;
+$df-datepicker-day-active-bg-color: var(--#{$prefix}primary-200) !default;
+$df-datepicker-day-active-color: var(--#{$prefix}primary-200-color) !default;
+$df-datepicker-day-border-radius: var(--#{$prefix}border-radius) !default;
+$df-datepicker-day-hover-bg-color: var(--#{$prefix}primary-100) !default;
+$df-datepicker-day-focus-border-color: var(--#{$prefix}gray-900) !default;
+$df-datepicker-day-focus-border-width: 0.125rem !default;
+$df-datepicker-border-radius: var(--#{$prefix}border-radius) !default;
+$df-datepicker-panel-border: none !default;
+$df-datepicker-box-shadow: 0 0 8px rgba($gray-600, 0.25) !default;
+$df-datepicker-navigation-arrow-color: var(--#{$prefix}primary) !default;
+$df-datepicker-today-border: 0.0625rem solid var(--#{$prefix}gray-900) !default;
+$df-datepicker-day-hover-text-decoration: none !default;
+$df-input-datepicker-range-box-shadow-color: var(--#{$prefix}gray-600) !default;
+$df-input-datepicker-range-focus-border: var(--#{$prefix}border-width) solid var(--#{$prefix}gray-600) !default;
 
 // Dropdown
 $df-dropdown-item-focus-text-decoration: none !default;
 $df-dropdown-item-focused-border: none !default;
-$dropdown-link-active-bg: var(--#{$prefix}primary-100) !default;
+$dropdown-link-active-bg: var(--#{$prefix}primary-200) !default;
 $dropdown-link-active-color: var(--#{$prefix}primary-100-color) !default;
+$df-dropdown-item-focus-bg: unset !default;
+$df-dropdown-toggle-split-padding-x: 1em !default;
+$df-dropdown-item-border-width: 0 !default;
 
 // Figure
 $figure-caption-color: var(--#{$prefix}gray-700) !default;
 
 // Fonts
 $font-family-sans-serif: 'Amadeus', sans-serif !default;
+$font-weight-semibold: 500 !default;
 $display-font-weight: 500 !default;
 
 // Footer
 $blockquote-footer-color: var(--#{$prefix}gray-700) !default;
+$df-footer-line-padding-start: 0 !default;
+
+// Form
+$form-range-thumb-active-bg: var(--#{$prefix}primary-800) !default;
 
 // Icon
 $df-amadeuslogo: "<svg viewBox='0 0 113 16' xmlns='http://www.w3.org/2000/svg'><path d='M107.272 6.62415C105.258 5.92656 104.367 5.46175 104.367 4.4161C104.367 3.75718 104.793 2.75021 106.807 2.75021C108.705 2.75021 110.72 3.60249 110.72 3.60249V0.696849C109.868 0.348052 108.357 0 106.652 0C103.746 0 100.958 1.54913 100.958 4.61021C100.958 7.67128 103.747 8.52282 105.646 9.14307C107.428 9.7239 108.629 10.3055 108.629 11.4671C108.629 12.4749 107.931 13.249 105.646 13.249C103.708 13.249 101.384 12.4749 101.384 12.4749V15.3798C101.384 15.3798 103.63 16 105.801 16C108.667 16 112.038 14.9923 112.038 11.2344C112.038 8.67751 109.946 7.55378 107.273 6.62415H107.272Z' fill='#ffffff'/><path d='M34.2475 15.8059V0H29.8701L25.57 11.7773L21.2692 0H16.8917V15.8059H19.8747V3.87394L24.2135 15.8052H26.7316L31.2645 3.87394V15.8052H34.2475V15.8059Z' fill='#ffffff'/><path d='M44.7062 0H38.9343V3.06033C41.6853 2.94432 42.4595 2.90564 43.6605 2.90564C45.5585 2.90564 46.6822 3.60249 46.6822 5.46249V6.66357H43.6605C38.5855 6.66357 37.0364 8.71693 37.0364 11.3898C37.0364 14.8376 39.5932 16 42.1501 16C44.7069 16 46.2568 14.7989 46.7603 14.4501V15.8059H50.0921V4.99693C50.0921 1.35502 48.1168 0 44.7069 0H44.7062ZM46.6822 12.4354C45.8299 12.7456 44.28 13.2877 42.8082 13.2877C41.4138 13.2877 40.2901 12.6682 40.2901 11.157C40.2901 9.8005 41.1424 9.10365 43.0016 9.02631L46.6822 8.87087V12.4354Z' fill='#ffffff'/><path d='M73.8005 2.71154H81.7804V0H70.3906V15.8059H81.7804V13.0944H73.8005V9.25834H80.5793V6.58548H73.8005V2.71154Z' fill='#ffffff'/><path d='M98.2073 15.8059V0H94.7209V12.048C93.8686 12.4354 92.6675 13.0557 90.9243 13.0557C88.7549 13.0557 88.0967 11.8546 88.0967 9.29776V0H84.6095V9.7239C84.6095 13.7919 85.9266 16 90.072 16C92.3968 16 93.5592 15.1477 94.7982 14.4501V15.8059H98.2073Z' fill='#ffffff'/><path d='M59.8152 0H53.5398V15.8059H59.8152C65.123 15.8059 67.7958 13.3651 67.7958 7.74863C67.7958 2.8283 64.8902 0.000743702 59.8152 0.000743702V0ZM59.6597 13.0549H57.0255V2.75021H59.6597C62.2947 2.75021 64.2313 4.02863 64.2313 7.74789C64.2313 11.4671 62.9528 13.0549 59.6597 13.0549Z' fill='#ffffff'/><path d='M7.67054 0H1.89867V3.06033C4.64888 2.94432 5.42382 2.90564 6.6249 2.90564C8.52282 2.90564 9.64656 3.60249 9.64656 5.46249V6.66357H6.6249C1.54987 6.66357 0 8.71693 0 11.3898C0 14.8376 2.55685 16 5.11369 16C7.67054 16 9.22041 14.7989 9.7239 14.4501V15.8059H13.0557V4.99693C13.0557 1.35577 11.0797 0 7.67054 0ZM9.64656 12.4354C8.79427 12.7456 7.2444 13.2877 5.77261 13.2877C4.37817 13.2877 3.25444 12.6682 3.25444 11.157C3.25444 9.8005 4.10672 9.10365 5.96598 9.02631L9.64656 8.87087V12.4354Z' fill='#ffffff'/></svg>" !default;
@@ -519,24 +809,48 @@ $df-amadeuslogo: "<svg viewBox='0 0 113 16' xmlns='http://www.w3.org/2000/svg'><
 $input-disabled-bg: $gray-200 !default;
 $input-disabled-color: $gray-800 !default;
 $df-form-feedback-help-warning-color: var(--#{$prefix}warning-600) !default;
-$input-group-addon-bg: $gray-200 !default;
+$input-group-addon-bg: var(--#{$prefix}gray-100) !default;
 $input-placeholder-color: var(--#{$prefix}gray-700) !default;
+$df-iwi-icon-font-color: var(--#{$prefix}primary) !default;
+$df-iwi-icon-font-color: var(--#{$prefix}primary) !default;
 
 // Link
-$link-hover-color: var(--#{$prefix}primary-700) !default;
-$df-link-active-background: var(--#{$prefix}primary-200) !default;
-$df-link-visited-hover-background: var(--#{$prefix}purple-100) !default;
-$df-link-hover-background: var(--#{$prefix}primary-100) !default;
-$df-link-visited-hover-text-color: var(--#{$prefix}purple-700) !default;
+$df-link-icononly-color: var(--#{$prefix}gray-700) !default;
+$df-link-icononly-focus-box-shadow-color: $df-link-icononly-color !default;
+$df-link-icononly-height: 2.25rem !default;
+$df-link-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$df-link-disabled-color: $df-disabled-color !default;
+$df-link-focus-box-shadow-color: var(--#{$prefix}primary-500) !default;
 
 // List group
-$list-group-active-bg: var(--#{$prefix}primary-100) !default;
+$list-group-active-bg: var(--#{$prefix}primary-200) !default;
 $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-action-active-bg: var(--#{$prefix}primary-200) !default;
+$list-group-disabled-color: $df-disabled-color !default;
+$list-group-disabled-bg: $df-disabled-bg-color !default;
 $df-list-group-focus-box-shadow: $df-focused-inset-box-shadow !default;
+$list-group-hover-bg: var(--#{$prefix}primary-100) !default;
+$df-list-group-item-active-border-color: var(--#{$prefix}list-group-border-color) !default;
+$df-list-group-item-border-left-active: var(--#{$prefix}border-width) solid $df-list-group-item-active-border-color !default;
+
+// Media object
+$df-media-border-radius-sm: $border-radius-sm !default;
+$df-media-border-radius: $border-radius !default;
+$df-media-border-radius-lg: $border-radius-lg !default;
+$df-interactive-media-hover-background-color: var(--#{$prefix}primary-50) !default;
+$df-interactive-media-focused-background-color: inherit !default;
+$df-interactive-media-focus-box-shadow-color: var(--#{$prefix}black) !default;
+$df-interactive-media-date-color: var(--#{$prefix}gray-700) !default;
+$df-interactive-media-color: var(--#{$prefix}primary-50-color) !default;
+
+// Modal
+$modal-header-border-width: 0px !default;
+$modal-backdrop-bg: $blue-800 !default;
+$df-modal-backdrop-opacity: 0.9 !default;
+$df-modal-box-shadow: $df-box-shadow !default;
+$df-modal-header-padding: 1.5rem 1.5rem 1rem 1.5rem !default;
+$df-modal-footer-padding: 1rem 1.5rem 1.5rem 1.5rem !default;
 
 // Navbar
 $df-navbar-nav-link-box-shadow-opacity: 1 !default;
@@ -547,60 +861,166 @@ $navbar-light-brand-hover-color: var(--#{$prefix}primary-700) !default;
 $df-navbar-nav-link-focus-color: var(--#{$prefix}primary-900) !default;
 
 // Pagination
+$df-pagination-icon-color: var(--#{$prefix}primary-500) !default;
+$pagination-color: var(--#{$prefix}secondary-900) !default;
 $pagination-active-color: var(--#{$prefix}primary-100-color) !default;
-$pagination-active-bg: var(--#{$prefix}primary-100) !default;
+$pagination-active-bg: var(--#{$prefix}primary-200) !default;
+$df-pagination-active-link-bg: var(--#{$prefix}pagination-active-bg) !default;
+$df-pagination-size-sm: 1.875rem !default;
+$pagination-border-radius: $border-radius !default;
+$pagination-border-radius-sm: $border-radius-sm !default;
+$pagination-border-radius-lg: $border-radius-lg !default;
+$pagination-hover-bg: var(--#{$prefix}primary-100) !default;
+$df-pagination-hover-text-decoration: none !default;
+$df-pagination-icon-hover-color: var(--#{$prefix}secondary-900) !default;
+$df-pagination-box-shadow-color: var(--#{$prefix}primary-100-color) !default;
+$pagination-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-pagination-boundaries-focus-box-shadow:
+  0 0 0 2px var(--#{$prefix}inner-box-shadow-color, var(--#{$prefix}body-bg)),
+  0 0 0 4px var(--#{$prefix}pagination-icon-color, $primary) !default;
+
+// Popover
+$popover-border-color: var(--#{$prefix}gray-200) !default;
+$popover-box-shadow: 0px 0px 8px rgba($gray-600, 0.25) !default;
 
 // Progress indicator
 $df-progress-bar-text-color: $gray-800 !default;
 
+// Radio
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='#{$white}'/></svg>") !default;
+$df-form-check-radio-checked-bg-color: var(--#{$prefix}primary-500) !default;
+$df-form-check-radio-checked-disabled-bg-image: $form-check-radio-checked-bg-image !default;
+
 // Select
+$df-select-panel-border-radius: 6px !default;
 $form-select-disabled-color: $gray-400 !default;
 $form-select-disabled-bg: $gray-200 !default;
 $form-select-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$df-select-optionselected-background-color: var(--#{$prefix}primary-100) !default;
+$df-select-optionselected-background-color: var(--#{$prefix}primary-200) !default;
+$df-select-panel-box-shadow: $df-box-shadow !default;
+$df-select-panel-border: none !default;
 
 // Sidenav
-$df-sidenav-item-active-bg-color: var(--#{$prefix}primary-100) !default; // todo define a var for this ?
+$df-sidenav-item-active-bg-color: var(--#{$prefix}primary-200) !default; // todo define a var for this ?
 $df-sidenav-list-active-color: var(--#{$prefix}primary-100-color) !default;
 $df-sidenav-item-active-border-color: var(--#{$prefix}primary-800) !default;
+$df-sidenav-item-border-start-active: unset !default;
+$df-sidenav-menu-padding-inline: 0.5rem !default;
+$df-sidenav-item-border-radius: $border-radius !default;
+$df-sidenav-item-focused-box-shadow: $input-btn-focus-box-shadow !default;
+$df-sidenav-item-before-focused-content: unset !default;
+$df-sidenav-item-focused-box-shadow-color: var(--#{$prefix}primary-100-color) !default;
+$df-sidenav-item-focused-inner-box-shadow-color: var(--#{$prefix}white) !default;
+$df-sidenav-item-focused-z-index: 2 !default;
+$df-sidenav-item-margin: 0 0 1px 0 !default;
+$df-sidenav-item-padding-start: 1rem !default;
+$df-sidenav-item-padding-end: 1rem !default;
+$df-sidenav-item-icon-color: var(--#{$prefix}primary-100-color) !default;
+$df-sidenav-chevron-icon-color: var(--#{$prefix}primary-500) !default;
+$df-sidenav-chevron-icon-hover-color: var(--#{$prefix}primary-700) !default;
+$df-sidenav-chevron-icon-active-color: var(--#{$prefix}primary-800) !default;
+$df-sidenav-item-extra-icon-height: 0rem !default;
+$df-sidenav-withactivated-item-border-start: unset !default;
+
+// Slider
+$df-slider-pointer-hover-border-color: var(--#{$prefix}border-width) solid var(--#{$prefix}primary-800) !default;
+$df-slider-pointer-hover-color: var(--#{$prefix}primary-700) !default;
 
 // Scrollspy
-$df-scrollspy-navpill-active-border-left: 3px solid var(--#{$prefix}primary-800) !default;
+$df-scrollspy-active-border-left: unset !default;
+$df-scrollspy-border-left: unset !default;
+$df-scrollspy-border-width: unset !default;
 $df-scrollspy-active-color: var(--#{$prefix}body-color) !default;
+$df-scrollspy-hover-bg: var(--#{$prefix}primary-100) !default;
+$df-scrollspy-focus-active-hover-inner-box-shadow: var(--#{$prefix}primary-100) !default;
+$df-scrollspy-hover-active-font-weight: $font-weight-bold !default;
+$df-scrollspy-hover-text-decoration: unset !default;
+$df-scrollspy-active-font-weight: $font-weight-medium !default;
+$df-scrollspy-focus-active-inner-box-shadow: var(--#{$prefix}primary-200) !default;
+$df-scrollspy-focus-box-shadow-color: var(--#{$prefix}body-color) !default;
+$df-scrollspy-padding-x: var(--#{$prefix}scrollspy-active-padding-x) !default;
+$df-scrollspy-margin-y: 1px !default;
+$df-scrollspy-icon-active-color: var(--#{$prefix}secondary-900) !default;
+$df-scrollspy-margin-left: 0 !default;
+$df-scrollspy-active-margin-left: $df-scrollspy-margin-left !default;
+$nav-pills-link-active-bg: var(--#{$prefix}primary-200) !default;
+$nav-pills-border-radius: $border-radius-sm !default;
+$nav-link-padding-x: 0.5rem !default;
+
+// Skip to content
+$df-skip-links-border-radius: 0.375rem !default;
+$df-skip-links-border-width: 0 !default;
 
 // Stepper
 $df-stepper-steps-colors: (
-  'current': 'dark-primary',
-  'future': 'white',
+  'visited': 'primary',
+  'future': 'secondary',
   'completed': 'primary',
   'warning': 'danger'
 ) !default;
+$df-stepper-line-completed-color: var(--#{$prefix}gray-300) !default;
+$df-stepper-line-default-color: var(--#{$prefix}gray-300) !default;
+
+// Table
+
+$df-tables-aggrid-header-background-color: var(--#{$prefix}primary-50) !default;
+$df-tables-aggrid-expand-button-color: var(--#{$prefix}primary) !default;
+$df-tables-aggrid-expand-button-color-hover: var(--#{$prefix}primary-700) !default;
+$df-tables-aggrid-expand-button-color-selected: var(--#{$prefix}primary-800) !default;
+$df-tables-aggrid-divider-border: 1px solid var(--#{$prefix}gray-700) !default;
+$df-tables-aggrid-icon-color: var(--#{$prefix}primary) !default;
+$table-striped-bg: var(--#{$prefix}primary-50) !default;
+$table-hover-bg: var(--#{$prefix}primary-100) !default;
+$table-active-bg: var(--#{$prefix}primary-200) !default;
+$df-tables-aggrid-striped-row-color-hover: var(--#{$prefix}primary-100) !default;
+$df-tables-aggrid-alpine-active-color: var(--#{$prefix}primary-200) !default;
+$df-tables-aggrid-hover-color: var(--#{$prefix}primary-100) !default;
+$df-tables-aggrid-selected-row-background-color: var(--#{$prefix}primary-200) !default;
+$df-tables-aggrid-input-focus-border-color: var(--#{$prefix}gray-900) !default;
 
 // Tabset
+$df-tabs-active-border-bottom-width: 3px !default;
 $df-tabs-focus-box-shadow: $df-focused-inset-box-shadow !default;
+$df-tabs-active-inner-box-shadow-color: var(--#{$prefix}primary-100) !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
+$df-tabs-active-border-bottom: $df-tabs-active-border-bottom-width solid var(--#{$prefix}primary-800) !default;
+$df-tabs-item-active-font-weight: $font-weight-bold !default;
 $nav-link-disabled-color: $df-disabled-color !default; // because of the
-
+$df-tabs-hover-text-decoration: none !default;
+$nav-link-hover-color: var(--#{$prefix}body-color) !default;
+$df-tabs-active-hover-border-bottom: $df-tabs-active-border-bottom-width solid var(--#{$prefix}primary-700) !default;
 // Toast
+$toast-border-width: 0 !default;
+$toast-padding-y: 0.6rem !default;
+$df-toast-insert-icon-top: 0.8rem !default;
+$df-toast-btn-font-weight: $font-weight-semibold !default;
 $df-toast-close-inner-boxshadow-color: var(--#{$prefix}toast-bg) !default;
 $df-toast-close-box-shadow-color: var(--#{$prefix}toast-color) !default;
+$df-toast-btn-close-margin: calc(var(--#{$prefix}toast-padding-y) - 0.2em) var(--#{$prefix}toast-btn-close-margin-x) !default;
 $toast-header-color: var(--#{$prefix}gray-700) !default;
 $df-toast-subtle-border-color-alpha: 0 !default; // no border in new toast subtle
 $df-toast-subtle-box-shadow-opacity: 1 !default;
 $df-toast-close-box-shadow-opacity: 1 !default;
+$df-toast-line-height: 1.75rem !default;
 
 // Toggle/switch
 $df-switch-box-shadow-opacity: 1 !default;
-$form-switch-color: $gray-700 !default; // can not be CSS var because use for bg-image
+$form-switch-color: $gray-900 !default; // can not be CSS var because use for bg-image
+$df-switch-border-color: var(--#{$prefix}gray-900) !default;
 $df-checkbox-checked-disabled-bg-color: var(--#{$prefix}gray-200) !default;
 $df-checkbox-disabled-border-color: var(--#{$prefix}gray-400) !default;
+$df-checkbox-box-shadow-color: $input-border-color !default;
 
 // Tooltip
 $tooltip-bg: var(--#{$prefix}gray-700) !default;
+$tooltip-border-radius: $border-radius !default;
 
 // General
 $mark-bg: var(--#{$prefix}gray-700) !default;
+
+// Separator
+$hr-color: $gray-300 !default;