@design-factory/design-factory 20.0.1 → 21.0.0-next.0

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

@@ -1,1141 +0,0 @@
-@use 'sass:map';
-@use 'sass:color';
-@import '../../utilities/rgb';
-@import './tokens/sass-vars.gen';
-@import './tokens/root.gen';
-@import './tokens/mapping.gen';
-
-// stylelint-disable scss/dollar-variable-pattern
-// Variables
-//
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-// Color system
-
-$prefix: df- !default;
-
-// scss-docs-start gray-color-variables
-$white: #fff !default;
-$black: #000 !default; // changed
-
-// DF specific colors
-// Grey colors
-$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
-
-// scss-docs-start color-variables
-// TODO attention maybe init this from the shades
-$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: $df-colorPalette-pumpkin-70 !default; // TODO verify usaged not changed
-$light-blue: #9bcaeb !default; // TODO verify this one
-$brown: #9e6900 !default; // not changed
-$dark-green: $df-colorPalette-forest-80 !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: $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
-$dark-primary: $dark-sky !default; // moved and changed
-$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 ?
-// scss-docs-end theme-color-variables
-
-// scss-docs-start theme-colors-map
-$theme-colors: (
-  'primary': $primary,
-  'secondary': $secondary,
-  'success': $success,
-  'info': $info,
-  'warning': $warning,
-  'danger': $danger,
-  'light': $light,
-  'neutral': $dark,
-  'dark': $dark,
-  'tip': $tip,
-  'chromatic1': $chromatic1,
-  'chromatic2': $chromatic2
-) !default;
-// scss-docs-end theme-colors-map
-
-// fusv-disable
-$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;
-
-$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;
-
-$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;
-
-$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;
-
-$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;
-
-$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,
-  '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;
-
-$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;
-
-$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),
-  '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),
-  'separator-color': var(--#{$prefix}secondary-200)
-) !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-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),
-  '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-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),
-  'text-active-color': var(--#{$prefix}pink-900),
-  'separator-color': var(--#{$prefix}pink-200)
-) !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),
-  '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),
-  'text-active-color': var(--#{$prefix}orange-900),
-  'separator-color': var(--#{$prefix}orange-200)
-) !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),
-  '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),
-  // idem
-  'text-active-color': var(--#{$prefix}green-900),
-  'separator-color': var(--#{$prefix}green-200)
-) !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),
-  '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-200),
-  'text-hover-color': var(--#{$prefix}light-800),
-  'text-active-color': var(--#{$prefix}light-900),
-  'separator-color': var(--#{$prefix}light-200)
-) !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;
-
-$links-mapping: (
-  'text-color': var(--#{$prefix}link-color-primary-default-foreground),
-  'box-shadow-color': var(--#{$prefix}link-color-primary-default-border),
-  'bg-color': transparent,
-  'text-hover-color': var(--#{$prefix}link-color-primary-hovered-foreground),
-  'bg-hover-color': var(--#{$prefix}link-color-primary-hovered-background),
-  'box-shadow-hover-color': var(--#{$prefix}link-color-primary-hovered-border),
-  'text-active-color': var(--#{$prefix}link-color-primary-pressed-foreground),
-  'box-shadow-active-color': var(--#{$prefix}link-color-primary-pressed-border),
-  'bg-active-color': var(--#{$prefix}link-color-primary-pressed-background),
-  'text-visited-color': var(--#{$prefix}link-color-visited-default-foreground),
-  'text-visited-hover-color': var(--#{$prefix}link-color-visited-hovered-foreground),
-  'bg-visited-hover-color': var(--#{$prefix}link-color-visited-hovered-background),
-  'text-visited-active-color': var(--#{$prefix}link-color-visited-pressed-foreground),
-  'bg-visited-active-color': var(--#{$prefix}link-color-visited-pressed-background)
-) !default;
-
-$grays-mapping: (
-  'border-color': var(--#{$prefix}color-inert-neutral-main-border),
-  'border-hover-color': var(--#{$prefix}color-inert-neutral-main-border),
-  'text-active-color': var(--#{$prefix}color-inert-neutral-alt-foreground),
-  'text-color': var(--#{$prefix}color-inert-neutral-alt-foreground),
-  'text-hover-color': var(--#{$prefix}color-inert-neutral-alt-foreground)
-) !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;
-// 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);
-$shade-maps: map.set($shade-maps, 'neutral', $neutrals-mapping);
-$shade-maps: map.set($shade-maps, 'tip', $tips-mapping);
-$shade-maps: map.set($shade-maps, 'chromatic1', $chromatics1-mapping);
-$shade-maps: map.set($shade-maps, 'chromatic2', $chromatics2-mapping);
-// stylelint-enable  scss/dollar-variable-default
-
-// Spacing
-//
-// Control the default styling of most Bootstrap elements by modifying these
-// variables. Mostly focused on spacing.
-// You can add more entries to the $spacers map, should you need more variation.
-
-// scss-docs-start spacer-variables-maps
-$spacer: $df-spacing-5 !default;
-$spacers: () !default;
-$negative-spacers: () !default;
-@for $i from 0 through 12 {
-  $spacers: map.set($spacers, $i, var(--#{$prefix}spacing-#{$i}));
-  @if $i > 0 {
-    $negative-spacers: map.set($negative-spacers, 'n' + $i, calc(-1 * var(--#{$prefix}spacing-#{$i})));
-  }
-}
-// scss-docs-end spacer-variables-maps
-
-$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, 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-600) !default;
-$input-border-color: var(--#{$prefix}gray-600) !default;
-
-$df-box-shadow: 0px 0px 8px 0px rgba($gray-600, 0.75) !default;
-$df-hover-bg-color: var(--#{$prefix}primary-100) !default;
-
-// scss-docs-start border-radius-variables
-$border-radius: var(--#{$prefix}borderRadius-main-medium) !default;
-$border-radius-sm: var(--#{$prefix}borderRadius-main-small) !default;
-$border-radius-lg: var(--#{$prefix}borderRadius-main-large) !default;
-$border-radius-pill: var(--#{$prefix}borderRadius-main-rounded) !default;
-
-// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
-
-// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
-// $font-size-base affects the font size of the body text
-$font-size-base: var(--#{$prefix}typo-sizing-default) !default; // Assumes the browser default, typically `16px`
-$font-size-sm: var(--#{$prefix}typo-sizing-small) !default;
-$font-size-lg: var(--#{$prefix}typo-sizing-large) !default;
-
-// scss-docs-start font-variables
-$font-weight-light: var(--#{$prefix}typo-weight-light) !default;
-$font-weight-normal: var(--#{$prefix}typo-weight-regular) !default;
-$font-weight-medium: var(--#{$prefix}typo-weight-medium) !default;
-$font-weight-bold: var(--#{$prefix}typo-weight-bold) !default;
-// scss-docs-end font-variables
-
-// scss-docs-start headings-variables
-$headings-margin-bottom: calc($spacer * 0.5) !default;
-$headings-font-weight: 500 !default;
-// scss-docs-end headings-variables
-
-//redefining bootstrap value here since we do not have a token yet and they are used for some calculations
-$line-height-base: 1.5 !default;
-$line-height-sm: 1.25 !default;
-$line-height-lg: 2 !default;
-
-$h1-font-size: var(--#{$prefix}typo-sizing-4xlarge) !default;
-$h2-font-size: var(--#{$prefix}typo-sizing-3xlarge) !default;
-$h3-font-size: var(--#{$prefix}typo-sizing-2xlarge) !default;
-$h4-font-size: $font-size-lg !default;
-$h5-font-size: $font-size-base !default;
-$h6-font-size: $font-size-sm !default;
-// scss-docs-end font-variables
-// scss-docs-start font-sizes
-$font-sizes: (
-  1: $h1-font-size,
-  2: $h2-font-size,
-  3: $h3-font-size,
-  4: $h4-font-size,
-  5: $h5-font-size,
-  6: $h6-font-size
-) !default;
-// scss-docs-end font-sizes
-
-// scss-docs-start headings-variables
-
-$headings-font-family: var(--#{$prefix}typo-font-primaryFamily), sans-serif !default;
-$headings-font-weight: $font-weight-normal !default;
-
-// scss-docs-start display-headings
-$display-font-sizes: (
-  1: var(--#{$prefix}typo-sizing-9xlarge),
-  2: var(--#{$prefix}typo-sizing-8xlarge),
-  3: var(--#{$prefix}typo-sizing-7xlarge),
-  4: var(--#{$prefix}typo-sizing-6xlarge),
-  5: var(--#{$prefix}typo-sizing-5xlarge),
-  6: $h1-font-size
-) !default;
-
-$df-size-ratios-font: (
-  'sm': $font-size-sm,
-  'lg': $font-size-lg,
-  'md': $font-size-base,
-  'xl': $h3-font-size
-) !default;
-
-$df-size-ratios-font-body: (
-  'sm': $font-size-sm,
-  'lg': $font-size-lg,
-  'md': $font-size-base,
-  'xl': $h3-font-size
-) !default;
-$df-font-size-xs: var(--#{$prefix}typo-sizing-xsmall) !default;
-
-$small-font-size: $font-size-sm !default;
-
-// scss-docs-end display-headings
-$lead-font-size: $font-size-lg !default;
-$blockquote-font-size: $font-size-lg !default;
-
-// Accordion
-$accordion-padding-y: var(--#{$prefix}spacing-4) !default;
-$accordion-padding-x: var(--#{$prefix}spacing-5) !default;
-$accordion-body-padding-y: var(--#{$prefix}spacing-5) !default;
-$accordion-body-padding-x: var(--#{$prefix}spacing-5) !default;
-$accordion-button-focus-box-shadow: $df-focused-inset-box-shadow !default;
-$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
-$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: $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;
-$df-alert-size-sm-font-size: $font-size-sm !default;
-$df-alert-size-lg-font-size: $font-size-lg !default;
-
-// Autocomplete
-$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;
-$df-dropdown-item-focus-box-shadow: $df-focused-inset-box-shadow !default;
-
-// Breadcrumb
-$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 var(--#{$prefix}spacing-3) !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;
-$df-breadcrumb-item-active-font-weight: $font-weight-medium !default;
-
-// Badge
-$badge-border-radius: $border-radius !default;
-$df-badge-box-shadow-color: $gray-900 !default;
-$badge-padding-x: var(--#{$prefix}spacing-3) !default;
-$df-badge-icon-margin-end: var(--#{$prefix}spacing-2) !default;
-$df-badge-interactive-button-padding-end: var(--#{$prefix}spacing-1) !default;
-
-// scss-docs-start input-btn-variables
-$input-btn-padding-x: $df-spacing-4 !default;
-$input-btn-padding-x-sm: $df-spacing-3 !default;
-$input-btn-padding-x-lg: $df-spacing-5 !default;
-
-// scss-docs-end input-btn-variables
-
-// Button
-$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, var(--#{$prefix}body-bg)),
-  0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
-$df-btn-focus-box-shadow-color: var(--#{$prefix}btn-focus-shadow) !default;
-$df-btn-check-active-property: 'bg-active-color' !default;
-$df-btn-outline-focus-box-shadow-color: var(--#{$prefix}btn-color) !default;
-$df-btn-icononly-border-width: var(--#{$prefix}border-width) !default;
-$df-btn-icononly-border-radius: var(--#{$prefix}button-borderRadius-main-medium) !default;
-$df-btn-icononly-border-radius-sm: var(--#{$prefix}button-borderRadius-main-small) !default;
-$df-btn-icononly-border-radius-lg: var(--#{$prefix}button-borderRadius-main-large) !default;
-$df-btn-icon-margin-end: var(--#{$prefix}spacing-3) !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;
-
-// Button group
-$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;
-$btn-font-weight: $font-weight-medium !default;
-
-// Breadcrumb
-$df-breadcrumb-item-icon-margin-inline-end: var(--#{$prefix}spacing-2) !default;
-$df-breadcrumb-item-icon-margin-inline-end-sm: var(--#{$prefix}spacing-1) !default;
-$df-breadcrumb-item-icon-margin-inline-end-lg: var(--#{$prefix}spacing-3) !default;
-
-// Card
-$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-100) !default;
-$df-card-focusable-focus-box-shadow-color: var(--#{$prefix}color-focus-main-border) !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: var(--#{$prefix}spacing-5) !default;
-$card-spacer-y: var(--#{$prefix}spacing-5) !default;
-$card-spacer-x: var(--#{$prefix}spacing-5) !default;
-$card-cap-padding-y: var(--#{$prefix}spacing-3) !default;
-$card-cap-padding-x: var(--#{$prefix}spacing-5) !default;
-$card-title-spacer-y: var(--#{$prefix}spacing-5) !default;
-$df-card-text-margin-block-end: var(--#{$prefix}spacing-5) !default;
-$df-card-subtitle-margin-block-end: var(--#{$prefix}spacing-5) !default;
-
-// Carousel
-
-$carousel-control-icon-width: 2.25rem !default;
-$df-carousel-indicator-border-radius: $border-radius !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-200) !default;
-$df-datepicker-day-active-color: var(--#{$prefix}primary-200-color) !default;
-$df-datepicker-day-border-radius: $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: $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;
-$df-datepicker-weekday-font-size: $font-size-sm !default;
-$df-datepicker-navigation-literal-font-size: $font-size-lg !default;
-$df-datepicker-day-font-weight: $font-weight-bold !default;
-$df-datepicker-navigation-literal-font-weight: $font-weight-medium !default;
-$df-datepicker-padding: var(--#{$prefix}spacing-5) !default;
-
-// Dropdown
-$df-dropdown-item-focus-text-decoration: none !default;
-$df-dropdown-item-focused-border: none !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: var(--#{$prefix}spacing-4) !default;
-$df-dropdown-item-border-width: 0 !default;
-$df-dropdown-item-active-font-weight: $font-weight-bold !default;
-$dropdown-padding-y: var(--#{$prefix}spacing-3) !default;
-$dropdown-divider-margin-y: calc($spacer * 0.5) !default;
-$dropdown-item-padding-y: calc($spacer * 0.25) !default;
-$df-dropdown-toggle-margin: var(--#{$prefix}spacing-3) !default;
-// Fieldset
-$df-fieldset-legend-font-weight: $font-weight-normal !default;
-
-// Figure
-$figure-caption-color: var(--#{$prefix}gray-700) !default;
-
-// Fonts
-$font-family-sans-serif: var(--#{$prefix}typo-font-primaryFamily), sans-serif !default;
-$font-weight-semibold: $font-weight-medium !default;
-$display-font-weight: $font-weight-medium !default;
-
-// Footer
-$blockquote-footer-color: var(--#{$prefix}gray-700) !default;
-$df-footer-line-padding-start: 0 !default;
-
-// scss-docs-start form-input-variables
-// $input-padding-y:                       $input-btn-padding-y !default;
-$input-padding-x: $df-spacing-3 !default;
-$input-padding-x-sm: var(--#{$prefix}spacing-3) !default;
-$input-padding-x-lg: var(--#{$prefix}spacing-3) !default;
-// scss-docs-end form-input-variables
-
-// Form
-$form-select-padding-x: $input-padding-x !default;
-$form-select-indicator-padding: calc($form-select-padding-x * 3) !default; // Extra padding for background-image
-$form-range-thumb-active-bg: var(--#{$prefix}primary-800) !default;
-$form-check-min-height: calc($font-size-base * $line-height-base) !default;
-$df-form-placeholder-font-style: var(--#{$prefix}typo-style-italic) !default;
-$form-label-margin-bottom: var(--#{$prefix}spacing-3) !default;
-$form-check-margin-bottom: var(--#{$prefix}spacing-3) !default;
-$form-select-feedback-icon-padding-end: calc($form-select-padding-x * 2.5 + $form-select-indicator-padding) !default;
-$form-text-margin-top: var(--#{$prefix}spacing-3) !default;
-
-// scss-docs-start input-group-variables
-$input-group-addon-padding-x: var(--#{$prefix}spacing-3) !default;
-// scss-docs-end input-group-variables
-
-// 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;
-
-// Input
-$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: 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;
-$df-iwi-append-text-padding-right: var(--#{$prefix}spacing-3) !default;
-$df-iwi-append-text-padding-left: var(--#{$prefix}spacing-3) !default;
-$df-iwi-prepend-text-padding-right: var(--#{$prefix}spacing-3) !default;
-$df-iwi-prepend-text-padding-left: var(--#{$prefix}spacing-3) !default;
-
-// Link
-$df-link-icononly-color: var(--#{$prefix}link-color-neutral-default-foreground) !default;
-$df-link-icononly-hover-color: var(--#{$prefix}link-color-neutral-hovered-foreground) !default;
-$df-link-icononly-active-color: var(--#{$prefix}link-color-neutral-pressed-foreground) !default;
-$df-link-icononly-focus-box-shadow-color: $df-link-icononly-color !default;
-$df-link-icononly-height: 2.25rem !default;
-$df-link-icononly-border-radius: $border-radius !default;
-$df-link-icononly-hover-bg-color: var(--#{$prefix}link-color-neutral-hovered-background) !default;
-$df-link-icononly-active-bg-color: var(--#{$prefix}link-color-neutral-pressed-background) !default;
-$df-link-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$df-link-disabled-color: var(--#{$prefix}link-color-disabled-foreground) !default;
-$df-link-disabled-border-bottom-color: var(--#{$prefix}link-color-disabled-foreground) !default;
-$df-link-focus-box-shadow-color: map.get($links-mapping, 'box-shadow-color') !default;
-$df-link-icononly-height-sm: 1.875rem !default;
-$df-link-icononly-height-lg: 3rem !default;
-$df-link-font-size: var(--#{$prefix}typo-sizing-2xlarge) !default;
-$df-link-font-size-sm: var(--#{$prefix}typo-sizing-large) !default;
-$df-link-font-size-lg: var(--#{$prefix}typo-sizing-3xlarge) !default;
-
-// List group
-$list-group-active-bg: var(--#{$prefix}primary-200) !default;
-$list-group-active-color: var(--#{$prefix}primary-100-color) !default;
-$df-list-group-active-font-weight: $font-weight-bold !default;
-$list-group-action-active-color: var(--#{$prefix}primary-100-color) !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;
-$list-group-item-padding-x: var(--#{$prefix}spacing-5) !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}color-primary-alt-hovered-background) !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}color-subtext-foreground) !default;
-$df-interactive-media-hover-date-color: var(--#{$prefix}color-neutral-alt-hovered-foreground) !default;
-$df-interactive-media-color: var(--#{$prefix}color-neutral-alt-default-foreground) !default;
-$df-interactive-media-heading-font-size-lg: $h2-font-size !default;
-$df-interactive-media-heading-font-size: $h3-font-size !default;
-$df-interactive-media-heading-font-size-sm: $font-size-lg !default;
-$df-interactive-media-font-size-sm: $font-size-sm !default;
-$df-interactive-media-font-size-lg: $font-size-lg !default;
-
-// Modal
-$modal-header-border-width: 0px !default;
-$modal-backdrop-bg: var(--#{$prefix}color-backdrop-background) !default;
-$df-modal-backdrop-opacity: 1 !default; // opacity defined in the color itself
-$df-modal-box-shadow: $df-box-shadow !default;
-$df-modal-header-padding: var(--#{$prefix}spacing-5) var(--#{$prefix}spacing-6) var(--#{$prefix}spacing-5)
-  var(--#{$prefix}spacing-6) !default;
-$df-modal-footer-padding: var(--#{$prefix}spacing-3) var(--#{$prefix}spacing-6) var(--#{$prefix}spacing-6)
-  var(--#{$prefix}spacing-6) !default;
-$df-modal-body-padding: var(--#{$prefix}spacing-5) var(--#{$prefix}spacing-6) var(--#{$prefix}spacing-6)
-  var(--#{$prefix}spacing-6) !default;
-$df-modal-body-alert-icon-size: var(--#{$prefix}icons-sizing-3xlarge) !default;
-
-// scss-docs-start nav-variables
-// it is the bootstrap value, we need it since we redefine the fontsize using a css var
-$nav-link-padding-y: 0.5rem !default;
-// scss-docs-end nav-variables
-
-// Navbar
-// we need this because multiple variables depend on this
-$navbar-brand-font-size: $font-size-lg !default;
-$df-navbar-font-family: $font-family-sans-serif !default;
-$df-navbar-nav-font-size: $font-size-base !default;
-$nav-link-height: calc($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
-$navbar-brand-height: calc($font-size-lg * $line-height-base) !default;
-$navbar-brand-padding-y: calc(($nav-link-height - $navbar-brand-height) * 0.5) !default;
-$df-navbar-nav-link-box-shadow-opacity: 1 !default;
-$df-navbar-light-text-hover-color: var(--#{$prefix}primary-700) !default;
-$df-navbar-light-text-active-color: var(--#{$prefix}primary-600) !default;
-$navbar-light-brand-hover-color: var(--#{$prefix}primary-700) !default;
-$df-navbar-nav-link-focus-color: var(--#{$prefix}primary-900) !default;
-$df-navbar-brand-font-weight: $font-weight-medium !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-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;
-$df-pagination-font-size-lg: $font-size-lg !default;
-$df-pagination-font-size-active-lg: $h3-font-size !default;
-$pagination-disabled-color: var(--#{$prefix}color-disabled-main-foreground) !default;
-$df-pagination-between-list-item-space: var(--#{$prefix}spacing-2) !default;
-
-// Popover
-$popover-border-color: var(--#{$prefix}gray-200) !default;
-$popover-box-shadow: 0px 0px 8px rgba($gray-600, 0.25) !default;
-$df-popover-border-radius-sm: $border-radius-lg !default;
-$popover-border-radius: $border-radius-lg !default;
-$df-popover-border-radius-lg: $border-radius-lg !default;
-$df-popover-header-font-size: $h3-font-size !default;
-$df-popover-header-font-size-sm: $font-size-lg !default;
-$df-popover-header-font-size-lg: $h2-font-size !default;
-$df-popover-padding: var(--#{$prefix}spacing-5) !default;
-$df-popover-header-default-margin: 0 0 var(--#{$prefix}spacing-3) !default;
-$popover-bg: var(--#{$prefix}color-inert-neutral-main-background) !default;
-
-// Progress indicator
-$df-progress-bar-text-color: $gray-800 !default;
-$progress-font-size: $font-size-sm !default;
-$progress-bg: var(--#{$prefix}color-inert-neutral-main-background) !default;
-$progress-bar-bg: var(--#{$prefix}color-primary-main-default-background) !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;
-$df-radio-group-legend-font-weight: $font-weight-normal !default;
-
-// Rating
-$df-rating-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;
-
-// Select
-$df-select-panel-border-radius: $border-radius !default;
-$df-select-panel-border-radius-sm: $border-radius-sm !default;
-$df-select-panel-border-radius-lg: $border-radius-lg !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-200) !default;
-$df-select-panel-box-shadow: $df-box-shadow !default;
-$df-select-panel-border: none !default;
-$df-select-value-height: calc(var(--#{prefix}typo-sizing-default) * $line-height-base) !default;
-$df-select-value-height-sm: calc(var(--#{prefix}typo-sizing-small) * $line-height-sm) !default;
-$df-select-value-height-lg: calc(var(--#{prefix}typo-sizing-large) * $line-height-lg) !default;
-$df-select-witharrow-clear-button-margin: var(--#{$prefix}spacing-3) !default;
-$df-select-disabled-bg: var(--#{$prefix}color-disabled-main-background) !default;
-$df-select-value-margin-sm: 0.125rem !default;
-$df-select-value-margin-lg: 0.5rem !default;
-
-// Sidenav
-$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: var(--#{$prefix}spacing-3) !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: var(--#{$prefix}spacing-5) !default;
-$df-sidenav-item-padding-end: var(--#{$prefix}spacing-5) !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;
-$df-sidenav-item-active-font-weight: $font-weight-bold !default;
-$df-sidenav-menu-padding-top: var(--#{$prefix}spacing-5) !default;
-$df-navbar-toggle-icon-width: 2.25rem !default;
-$df-navbar-toggle-margin-left: var(--#{$prefix}spacing-3) !default;
-$df-navbar-toggle-margin-right: var(--#{$prefix}spacing-3) !default;
-$navbar-toggler-padding-x: 0 !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;
-$df-slider-pointer-box-shadow: var(--#{$prefix}primary-500) !default; // primary bg-color mapping
-
-// Scrollspy
-$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}color-neutral-alt-active-foreground) !default;
-$df-scrollspy-hover-bg: var(--#{$prefix}color-primary-alt-hovered-background) !default;
-$df-scrollspy-focus-active-hover-inner-box-shadow: var(--#{$prefix}color-primary-alt-activeHovered-background) !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-bold !default;
-$df-scrollspy-focus-active-inner-box-shadow: var(--#{$prefix}color-primary-alt-active-background) !default;
-$df-scrollspy-focus-box-shadow-color: var(--#{$prefix}color-focus-main-border) !default;
-$df-scrollspy-padding-x: var(--#{$prefix}spacing-3) !default;
-$df-scrollspy-active-padding-x: var(--#{$prefix}spacing-3) !default;
-$df-scrollspy-margin-y: 1px !default;
-$df-scrollspy-icon-active-color: var(--#{$prefix}color-neutral-alt-active-foreground) !default;
-$df-scrollspy-margin-left: 0 !default;
-$df-scrollspy-active-margin-left: $df-scrollspy-margin-left !default;
-$nav-pills-link-active-bg: var(--#{$prefix}color-primary-alt-active-background) !default;
-$nav-pills-border-radius: $border-radius !default;
-$nav-link-padding-x: var(--#{$prefix}spacing-5) !default;
-$df-scrollspy-color: var(--#{$prefix}color-neutral-alt-default-foreground) !default;
-
-// Skip to content
-$df-skip-links-border-radius: $border-radius !default;
-$df-skip-links-border-width: 0 !default;
-
-// Speech bubble
-$df-speech-border-radius: $border-radius !default;
-$df-speech-border-radius-sm: $border-radius-sm !default;
-$df-speech-border-radius-lg: $border-radius-lg !default;
-$df-speech-btn-border-radius: $border-radius !default;
-$df-speech-padding-x: var(--#{$prefix}spacing-5) !default;
-$df-speech-user-bg-color: var(--#{$prefix}color-primary-main-default-background) !default;
-$df-speech-user-color: var(--#{$prefix}color-primary-main-default-foreground) !default;
-$df-speech-interlocutor-bg-color: var(--#{$prefix}color-primary-subtle-background) !default;
-$df-speech-interlocutor-color: var(--#{$prefix}color-inert-neutral-main-foreground) !default;
-
-// Stepper
-$df-stepper-steps-colors: (
-  '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;
-$df-stepper-optional-label-font-size: $df-font-size-xs !default;
-$df-stepper-font-size-lg: $font-size-lg !default;
-$df-stepper-outline-number-visited-font-weight: $font-weight-medium !default;
-$df-stepper-label-font-weight: $font-weight-medium !default;
-$df-stepper-optional-label-font-weight: $font-weight-normal !default;
-$df-stepper-border-radius-sm: $border-radius-sm !default;
-$df-stepper-border-radius: $border-radius !default;
-$df-stepper-border-radius-lg: $border-radius-lg !default;
-
-// Table
-$df-table-caption-font-size: $font-size-sm !default;
-$df-table-th-font-size: $font-size-sm !default;
-
-$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;
-$table-cell-padding-x: var(--#{$prefix}spacing-3) !default;
-$df-tables-aggrid-cell-padding-left: var(--#{$prefix}spacing-3) !default;
-$df-tables-aggrid-cell-padding-right: var(--#{$prefix}spacing-3) !default;
-
-$df-tables-aggrid-pagination-secondary-elements-font-size: $font-size-sm !default; // 14px normal
-// 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}color-primary-alt-hovered-background) !default;
-$nav-tabs-link-active-color: var(--#{$prefix}color-neutral-alt-active-foreground) !default;
-$nav-pills-link-active-color: var(--#{$prefix}color-neutral-alt-active-foreground) !default;
-$df-tabs-between-item-margin: 0px !default;
-$df-tabs-active-border-bottom: $df-tabs-active-border-bottom-width solid
-  var(--#{$prefix}color-primary-alt-active-border) !default;
-$df-tabs-item-active-font-weight: $font-weight-bold !default;
-$df-tabs-links-not-active-color: var(--#{$prefix}color-neutral-alt-default-foreground) !default;
-$df-tabs-disabled-color: var(--#{$prefix}color-disabled-main-foreground) !default;
-$df-tabs-hover-text-decoration: none !default;
-$nav-link-hover-color: var(--#{$prefix}color-neutral-alt-hovered-foreground) !default;
-$df-tabs-active-hover-border-bottom: $df-tabs-active-border-bottom-width solid
-  var(--#{$prefix}color-primary-alt-activeHovered-border) !default;
-$df-tabs-content-tab-pane-padding: var(--#{$prefix}spacing-6) var(--#{$prefix}spacing-5) !default;
-$df-tabs-padding-y: var(--#{$prefix}spacing-3) !default;
-$nav-tabs-border-color: var(--#{$prefix}color-inert-neutral-main-border) !default;
-$df-tabs-hover-bg-color: var(--#{$prefix}color-primary-alt-hovered-background) !default;
-
-// Timepicker
-$df-timepicker-spacer-width: var(--#{$prefix}spacing-5) !default;
-
-// Toast
-$toast-border-width: 0 !default;
-$toast-padding-y: 0.6rem !default;
-$toast-padding-x: var(--#{$prefix}spacing-5) !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;
-$toast-font-size: $font-size-sm !default;
-$toast-border-radius: var(--#{$prefix}borderRadius-main-small) !default;
-$df-toast-btn-close-border-radius: $border-radius-sm !default;
-$df-toast-btn-close-margin-x: var(--#{$prefix}spacing-3) !default;
-
-// Toggle/switch
-$df-switch-box-shadow-opacity: 1 !default;
-$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;
-$df-switch-label-font-weight: $font-weight-medium !default;
-$df-switch-label-padding-start: var(--#{$prefix}spacing-3) !default;
-$df-switch-container-margin-top: var(--#{$prefix}spacing-3) !default;
-
-// Tooltip
-$tooltip-bg: var(--#{$prefix}color-tooltip-background) !default;
-$tooltip-color: var(--#{$prefix}color-inert-neutral-alt-foreground) !default;
-$tooltip-border-radius: $border-radius !default;
-$tooltip-font-size: $font-size-base !default;
-$tooltip-padding-x: var(--#{$prefix}spacing-5) !default;
-$df-tooltip-padding-x-sm: var(--#{$prefix}spacing-3) !default;
-$df-tooltip-padding-x-lg: var(--#{$prefix}spacing-6) !default;
-
-// General
-$mark-bg: var(--#{$prefix}gray-700) !default;
-
-// Separator
-$hr-color: $gray-300 !default;