@design-factory/design-factory 15.2.3 → 16.0.0

package/styles/scss/df-styles.scss

@@ -7,9 +7,14 @@
 @import 'components/fonts/multi-lang.mixins';
 @import 'common.mixins';
 
+// Root
+@import 'bootstrap/scss/root';
+@import 'common.root';
+@import 'components/fonts/fonts.root';
+@import 'components/inputs/inputs.root';
+
 /** BOOTSTRAP IMPORTS **/
 // Components
-@import 'bootstrap/scss/root';
 @import 'bootstrap/scss/reboot';
 @import 'bootstrap/scss/type';
 @import 'bootstrap/scss/images';
@@ -51,7 +56,6 @@
 
 /** DESIGN FACTORY IMPORTS **/
 @import 'common';
-
 @import 'components/fonts/icon-font';
 @import 'components/fonts/fonts';
 @import 'components/accordion/accordion';
@@ -86,7 +90,6 @@
 @import 'components/collapse/collapse';
 @import 'components/progressbar/progressbar';
 @import 'components/spinner/spinner';
-@import 'components/tooltip/tooltip';
 @import 'components/rating/rating';
 @import 'components/speechbubble/speechbubble';
 @import 'components/list/list';

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

@@ -0,0 +1,585 @@
+@use 'sass:map';
+// 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-900: #1A1A1A !default;
+$gray-800: #333333 !default;
+$gray-700: #666666 !default;
+$gray-600: #808080 !default;
+$gray-500: #999999 !default;
+$gray-400: #B3B3B3 !default;
+$gray-300: #CCCCCC !default;
+$gray-200: #E6E6E6 !default;
+$gray-100: #F2F2F2 !default;
+$gray-50: #FAFAFA !default;
+// scss-docs-end gray-color-variables
+
+// scss-docs-start color-variables
+// TODO attention maybe init this from the shades
+$blue: #0C66E1 !default;
+$indigo: #6610f2 !default; // not changed
+$purple: #9240CC !default;
+$pink: #CC468A !default; // fuchsia
+$red: #DF3127 !default;
+$orange: #FA6400 !default;
+$yellow: #E9CF1C !default;
+$green: #6DC354 !default;
+$teal: #0C66E1 !default; // put to blue, temporary ?
+$cyan: #009dd1 !default; // not changed
+
+// DF specific colors
+$dark-orange: #e95326 !default; // TODO verify usaged not changed
+$light-blue: #9bcaeb !default; // TODO verify this one 
+$brown: #9e6900 !default; // not changed
+$brand-green: #3A662E !default; // TODO check where used because not accessible with white
+// scss-docs-end color-variables
+
+// scss-docs-start theme-color-variables
+$primary: $blue !default;
+$secondary: $gray-700 !default; // not changed
+$success: #3A662E !default;
+$info: $gray-500 !default; // gray-500 cloud 60
+$warning: #FA6400 !default; // Orange 500
+$danger: #DF3127 !default; // Crimson 500
+$light: $gray-50 !default; // changed
+$dark: $gray-700 !default; // changed
+$dark-sky: #000835 !default; // added
+$dark-primary: $dark-sky !default; // moved and changed
+$light-primary: #C5D5F9 !default; // create
+$mystery: $purple !default;
+$love: $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,
+  "dark": $dark,
+  'mystery': $mystery,
+  'love': $love,
+  'pacific': $pacific,
+  'dark-primary': $dark-primary
+) !default;
+// scss-docs-end theme-colors-map
+
+// fusv-disable
+$blue-50: #EBF3FF !default;
+$blue-100: #C5D5F9 !default;
+$blue-200: #9FC6FF !default;
+$blue-300: #61A2FF !default;
+$blue-400: #3A8BFF !default;
+$blue-500: $blue !default;
+$blue-600: #104EA4 !default;
+$blue-700: #0A2F62 !default;
+$blue-800: #000835 !default;
+$blue-900: #000521 !default;
+
+$primary-50: #EBF3FF !default;
+$primary-100: #C5D5F9 !default;
+$primary-200: #9FC6FF !default;
+$primary-300: #61A2FF !default;
+$primary-400: #3A8BFF !default;
+$primary-500: $primary !default;
+$primary-600: #104EA4 !default;
+$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-500: $info !default;
+$info-600: $gray-600 !default;
+$info-700: $gray-700 !default;
+$info-800: $gray-800 !default;
+$info-900: $gray-900 !default;
+
+$purple-50: #F8EEFF !default;
+$purple-100: #E4C7FF !default;
+$purple-200: #D396FF !default;
+$purple-300: #C573FF !default;
+$purple-400: #B650FF !default;
+$purple-500: $purple !default;
+$purple-600: #6D3099 !default;
+$purple-700: #461B64 !default;
+$purple-800: #26005A !default;
+$purple-900: #160033 !default;
+
+$pink-50: #FFEEF7 !default;
+$pink-100: #FFC5F9 !default;
+$pink-200: #FF9BE3 !default;
+$pink-300: #FF79BD !default;
+$pink-400: #FF58AC !default;
+$pink-500: $pink !default;
+$pink-600: #993567 !default;
+$pink-700: #662345 !default;
+$pink-800: #4F0230 !default;
+$pink-900: #34001F!default;
+
+$red-50: #FFEEED !default;
+$red-100: #FFD7D7 !default;
+$red-200: #FF9794 !default;
+$red-300: #FF7471 !default;
+$red-400: #FF514D !default;
+$red-500: $red !default;
+$red-600: #B2271F !default;
+$red-700: #861D17 !default;
+$red-800: #560900 !default;
+$red-900: #430F0C !default;
+
+$orange-50: #FFF0E6 !default;
+$orange-100: #FFD9C4 !default;
+$orange-200: #FFA366 !default;
+$orange-300: #FF8838 !default;
+$orange-400: #FF7920 !default;
+$orange-500: $orange !default;
+$orange-600: #C74905 !default;
+$orange-700: #863701 !default;
+$orange-800: #5B2500 !default;
+$orange-900: #3B1800 !default;
+
+$yellow-50: #FFFCE6 !default;
+$yellow-100: #FFFEB0 !default;
+$yellow-200: #FDF092 !default;
+$yellow-300: #FDEB6D !default;
+$yellow-400: #FCE649 !default;
+$yellow-500: $yellow !default;
+$yellow-600: #AA9B2D !default;
+$yellow-700: #74691C !default;
+$yellow-800: #564A00 !default;
+$yellow-900: #2A2500 !default;
+
+$green-50: #f0ffec !default;
+$green-100: #C8FFC0 !default;
+$green-200: #BEFFAB !default;
+$green-300: #A8FF8F !default;
+$green-400: #92FF73 !default;
+$green-500: $green !default;
+$green-600: #569643 !default;
+$green-700: #3A662E !default;
+$green-800: #023A00 !default;
+$green-900: #0F190B !default;
+
+$teal-50: #EBF3FF !default;
+$teal-100: #C5D5F9 !default;
+$teal-200: #9FC6FF !default;
+$teal-300: #61A2FF !default;
+$teal-400: #3A8BFF !default;
+$teal-500: $teal !default;
+$teal-600: #104EA4 !default;
+$teal-700: #0A2F62 !default;
+$teal-800: #000835 !default;
+$teal-900: #000521 !default;
+
+$danger-50: #FFEEED !default;
+$danger-100: #FFD7D7 !default;
+$danger-200: #FF9794 !default;
+$danger-300: #FF7471 !default;
+$danger-400: #FF514D !default;
+$danger-500: $danger !default;
+$danger-600: #B2271F !default;
+$danger-700: #861D17 !default;
+$danger-800: #560900 !default;
+$danger-900: #430F0C !default;
+
+$warning-50: #FFF0E6 !default;
+$warning-100: #FFD9C4 !default;
+$warning-200: #FFA366 !default;
+$warning-300: #FF8838 !default;
+$warning-400: #FF7920 !default;
+$warning-500: #FA6400 !default;
+$warning-600: #C74905 !default;
+$warning-700: #863701 !default;
+$warning-800: #5B2500 !default;
+$warning-900: #3B1800 !default;
+
+$success-50: #F0FFEC !default;
+$success-100: #C8FFC0 !default;
+$success-200: #BEFFAB !default;
+$success-300: #A8FF8F !default;
+$success-400: #92FF73 !default;
+$success-500: #6DC354 !default;
+$success-600: #569643 !default;
+$success-700: #3A662E !default;
+$success-800: #023A00 !default;
+$success-900: #0F190B !default;
+
+$secondaries: (
+  "secondary-50": $gray-50,
+  "secondary-100": $gray-100,
+  "secondary-200": $gray-200,
+  "secondary-300": $gray-300,
+  "secondary-400": $gray-400,
+  "secondary-500": $gray-500,
+  "secondary-600": $gray-600,
+  "secondary-700": $gray-700,
+  "secondary-800": $gray-800,
+  "secondary-900": $gray-900
+) !default;
+
+$grays-mapping: (
+  "border-color": var(--#{$prefix}gray-300),
+  "text-color": var(--#{$prefix}gray-600),
+  "text-hover-color": var(--#{$prefix}gray-800),
+  "text-active-color": var(--#{$prefix}secondary-900),
+) !default;
+
+$secondaries-mapping: ( // different from old branding
+  "bg-color": var(--#{$prefix}secondary-700),
+  "bg-hover-color": var(--#{$prefix}secondary-900),
+  "bg-active-color": var(--#{$prefix}black),
+  "inert-color": var(--#{$prefix}secondary-700),
+  "bg-subtle-color": var(--#{$prefix}secondary-50),
+  "bg-subtle-hover-color": var(--#{$prefix}secondary-100),
+  "bg-subtle-active-color": var(--#{$prefix}secondary-200),
+  "border-color": var(--#{$prefix}secondary-700),
+  "text-color": var(--#{$prefix}secondary-700),
+  "text-hover-color": var(--#{$prefix}secondary-900),
+  "text-active-color": var(--#{$prefix}black),
+) !default;
+
+$dark-primaries-mapping: (
+  "bg-color": var(--#{$prefix}primary-800),
+  "bg-hover-color": var(--#{$prefix}primary-600),
+  "bg-active-color": var(--#{$prefix}primary-500),
+  "inert-color": var(--#{$prefix}primary-800),
+  "bg-subtle-color": var(--#{$prefix}primary-50),
+  "bg-subtle-hover-color": var(--#{$prefix}primary-50),
+  "bg-subtle-active-color": var(--#{$prefix}primary-100),
+  "border-color": var(--#{$prefix}primary-800),
+  "text-color": var(--#{$prefix}primary-800),
+  "text-hover-color": var(--#{$prefix}primary-600),
+  "text-active-color": var(--#{$prefix}primary-500),
+) !default;
+
+$pinks-mapping: (
+  "bg-color": var(--#{$prefix}pink-500),
+  "bg-hover-color": var(--#{$prefix}pink-700),
+  "bg-active-color": var(--#{$prefix}pink-800),
+  "inert-color": var(--#{$prefix}pink-500),
+  "bg-subtle-color": var(--#{$prefix}pink-100),
+  "bg-subtle-hover-color": var(--#{$prefix}pink-200),
+  "bg-subtle-active-color": var(--#{$prefix}pink-300),
+  "border-color": var(--#{$prefix}pink-600),
+  "text-color": var(--#{$prefix}pink-600),
+  "text-hover-color": var(--#{$prefix}pink-800),
+  "text-active-color": var(--#{$prefix}pink-900),
+) !default;
+
+$loves-mapping: (
+  "bg-color": var(--#{$prefix}love-500),
+  "bg-hover-color": var(--#{$prefix}love-700),
+  "bg-active-color": var(--#{$prefix}love-800),
+  "inert-color": var(--#{$prefix}love-500),
+  "bg-subtle-color": var(--#{$prefix}love-50),
+  "bg-subtle-hover-color": var(--#{$prefix}love-100),
+  "bg-subtle-active-color": var(--#{$prefix}love-200),
+  "border-color": var(--#{$prefix}love-500),
+  "text-color": var(--#{$prefix}love-600),
+  "text-hover-color": var(--#{$prefix}love-800),
+  "text-active-color": var(--#{$prefix}love-900),
+) !default;
+
+$oranges-mapping: (
+  "bg-color": var(--#{$prefix}orange-500),
+  "bg-hover-color": var(--#{$prefix}orange-700),
+  "bg-active-color": var(--#{$prefix}orange-800),
+  "inert-color": var(--#{$prefix}orange-600),
+  "bg-subtle-color": var(--#{$prefix}orange-50),
+  "bg-subtle-hover-color": var(--#{$prefix}orange-100),
+  "bg-subtle-active-color": var(--#{$prefix}orange-200),
+  "border-color": var(--#{$prefix}orange-500),
+  "text-color": var(--#{$prefix}orange-600),
+  "text-hover-color": var(--#{$prefix}orange-800),
+  "text-active-color": var(--#{$prefix}orange-900),
+) !default;
+
+$yellows-mapping: (
+  "bg-color": var(--#{$prefix}yellow-500),
+  "bg-hover-color": var(--#{$prefix}yellow-700),
+  "bg-active-color": var(--#{$prefix}yellow-800),
+  "inert-color": var(--#{$prefix}yellow-500),
+  "bg-subtle-color": var(--#{$prefix}yellow-50),
+  "bg-subtle-hover-color": var(--#{$prefix}yellow-100),
+  "bg-subtle-active-color": var(--#{$prefix}yellow-200),
+  "border-color": var(--#{$prefix}yellow-500),
+  "text-color": var(--#{$prefix}yellow-700),
+  "text-hover-color": var(--#{$prefix}yellow-800), // only +1 as no other possibility (to check)
+  "text-active-color": var(--#{$prefix}yellow-900),  
+) !default;
+
+$greens-mapping: (
+  "bg-color": var(--#{$prefix}green-500),
+  "bg-hover-color": var(--#{$prefix}green-700),
+  "bg-active-color": var(--#{$prefix}green-800),
+  "inert-color": var(--#{$prefix}green-500),
+  "bg-subtle-color": var(--#{$prefix}green-50),
+  "bg-subtle-hover-color": var(--#{$prefix}green-100),
+  "bg-subtle-active-color": var(--#{$prefix}green-200),
+  "border-color": var(--#{$prefix}green-500),
+  "text-color": var(--#{$prefix}green-700),
+  "text-hover-color": var(--#{$prefix}green-800), // idem
+  "text-active-color": var(--#{$prefix}green-900),
+) !default;
+
+$whites-mapping: (
+  "bg-color": var(--#{$prefix}white),
+  "bg-hover-color": var(--#{$prefix}primary-50),
+  "bg-active-color": var(--#{$prefix}primary-100),
+  "inert-color": var(--#{$prefix}white),
+  "bg-subtle-color": var(--#{$prefix}primary-50),
+  "bg-subtle-hover-color": var(--#{$prefix}primary-100),
+  "bg-subtle-active-color": var(--#{$prefix}primary-200),
+  "border-color": var(--#{$prefix}primary-50),
+  "text-color": var(--#{$prefix}gray-700),
+  "text-hover-color": var(--#{$prefix}gray-800),
+  "text-active-color": var(--#{$prefix}gray-900),
+) !default;
+
+$darks-mapping: (
+  "bg-color": var(--#{$prefix}dark-800),
+  "bg-hover-color": var(--#{$prefix}dark-900),
+  "bg-active-color": var(--#{$prefix}black),
+  "inert-color": var(--#{$prefix}dark-800),
+  "bg-subtle-color": var(--#{$prefix}dark-500),
+  "bg-subtle-hover-color": var(--#{$prefix}dark-600),
+  "bg-subtle-active-color": var(--#{$prefix}dark-700),
+  "border-color": var(--#{$prefix}dark-500),
+  "text-color": var(--#{$prefix}dark-800),
+  "text-hover-color": var(--#{$prefix}dark-900),
+  "text-active-color": var(--#{$prefix}black),
+) !default;
+
+$lights-mapping: (
+  "bg-color": var(--#{$prefix}light-200),
+  "bg-hover-color": var(--#{$prefix}light-300),
+  "bg-active-color": var(--#{$prefix}light-400),
+  "inert-color": var(--#{$prefix}light-200),
+  "bg-subtle-color": var(--#{$prefix}white),
+  "bg-subtle-hover-color": var(--#{$prefix}light-50),
+  "bg-subtle-active-color": var(--#{$prefix}light-100),
+  "border-color": var(--#{$prefix}light-500),
+  "text-color": var(--#{$prefix}light-600),
+  "text-hover-color": var(--#{$prefix}light-800),
+  "text-active-color": var(--#{$prefix}light-900),
+) !default;
+
+$successes-mapping: (
+  "bg-color": var(--#{$prefix}success-500),
+  "bg-hover-color": var(--#{$prefix}success-700),
+  "bg-active-color": var(--#{$prefix}success-800),
+  "inert-color": var(--#{$prefix}success-500),
+  "bg-subtle-color": var(--#{$prefix}success-50),
+  "bg-subtle-hover-color": var(--#{$prefix}success-100),
+  "bg-subtle-active-color": var(--#{$prefix}success-200),
+  "border-color": var(--#{$prefix}success-500),
+  "text-color": var(--#{$prefix}success-700), // first accessible green
+  "text-hover-color": var(--#{$prefix}success-800),
+  "text-active-color": var(--#{$prefix}success-900),
+) !default;
+
+$warnings-mapping: (
+  "bg-color": var(--#{$prefix}warning-500),
+  "bg-hover-color": var(--#{$prefix}warning-700),
+  "bg-active-color": var(--#{$prefix}warning-800),
+  "inert-color": var(--#{$prefix}warning-500),
+  "bg-subtle-color": var(--#{$prefix}warning-50),
+  "bg-subtle-hover-color": var(--#{$prefix}warning-100),
+  "bg-subtle-active-color": var(--#{$prefix}warning-200),
+  "border-color": var(--#{$prefix}warning-500),
+  "text-color": var(--#{$prefix}warning-600),
+  "text-hover-color": var(--#{$prefix}warning-800),
+  "text-active-color": var(--#{$prefix}warning-900),
+) !default;
+
+$df-enableBranding2023: true !default;
+
+$shade-maps: () !default;
+// stylelint-disable  scss/dollar-variable-default
+$shade-maps: map.set($shade-maps, "dark-primary", $dark-primaries-mapping);
+// stylelint-enable  scss/dollar-variable-default
+
+$body-bg: var(--#{$prefix}white) !default;
+$body-color: var(--#{$prefix}gray-900) !default;
+$color-contrast-dark: $gray-900 !default; // should be same as $body-color but not a CSS var
+$df-disabled-color: var(--#{$prefix}gray-400) !default;
+$df-disabled-bg-color: var(--#{$prefix}gray-200) !default;
+$df-focused-inset-box-shadow: inset 0 0 0 2px var(--#{$prefix}inner-box-shadow-color, $body-bg), inset 0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
+$input-btn-focus-box-shadow: 0 0 0 2px var(--#{$prefix}inner-box-shadow-color, $body-bg), 0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
+$input-focus-border-color: var(--#{$prefix}gray-700) !default;
+$input-border-color: $gray-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
+
+// 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;
+
+// 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;
+
+// Breadcrumb
+$breadcrumb-active-color: var(--#{$prefix}primary-800) !default;
+$breadcrumb-divider-color: var(--#{$prefix}primary-800) !default;
+
+// 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, $body-bg), 0 0 0 4px var(--#{$prefix}box-shadow-color, $primary) !default;
+$df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 1) !default;
+$df-btn-check-active-property: 'bg-active-color' !default;
+$df-btn-bg-color: var(--#{$prefix}white) !default;
+$df-btn-focus-only-bg-color: var(--#{$prefix}white) !default;
+$df-btn-outline-focus-box-shadow-color: var(--#{$prefix}btn-color) !default;
+
+// Button 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;
+
+// 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;
+$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...
+
+// 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;
+
+// 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-color: var(--#{$prefix}primary-100-color) !default;
+
+// Figure
+$figure-caption-color: var(--#{$prefix}gray-700) !default;
+
+// Fonts
+$display-font-weight: 500 !default;
+
+// Footer
+$blockquote-footer-color: var(--#{$prefix}gray-700) !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;
+
+// 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: $gray-200 !default;
+$input-placeholder-color: var(--#{$prefix}gray-700) !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;
+
+// List group
+$list-group-active-bg: var(--#{$prefix}primary-100) !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; 
+$df-list-group-focus-box-shadow: $df-focused-inset-box-shadow !default;
+
+// Navbar
+$df-navbar-nav-link-box-shadow-opacity: 1 !default;
+$df-navbar-light-text-color: var(--#{$prefix}primary-800) !default; // sky-90
+$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;
+
+// Pagination
+$pagination-active-color: var(--#{$prefix}primary-100-color)  !default;
+$pagination-active-bg: var(--#{$prefix}primary-100) !default;
+
+// Select
+$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;
+
+// Sidenav
+$df-sidenav-item-active-bg-color: var(--#{$prefix}primary-100) !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;
+
+// Scrollspy
+$df-scrollspy-navpill-active-border-left: 3px solid var(--#{$prefix}primary-800) !default;
+$df-scrollspy-active-color: $body-color !default;
+
+// Stepper
+$df-stepper-steps-colors:  ("current": "dark-primary", "future" : "white", "completed": "primary", "warning": "danger") !default;
+
+// Tabset
+$df-tabs-focus-box-shadow: $df-focused-inset-box-shadow !default;
+$nav-tabs-link-active-color: $body-color !default;
+$nav-pills-link-active-color: $body-color !default;
+$df-tabs-between-item-margin: 0px !default;
+$df-tabs-active-border-bottom: 3px solid var(--#{$prefix}primary-800) !default;
+$df-tabs-item-active-font-weight: 700 !default; // $font-weight-bold
+$nav-link-disabled-color: $df-disabled-color !default; // because of the 
+
+// Toast
+$df-toast-close-inner-boxshadow-color: var(--#{$prefix}toast-bg) !default;
+$df-toast-close-box-shadow-color: var(--#{$prefix}toast-color) !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;
+
+// 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
+$df-checkbox-checked-disabled-bg-color: var(--#{$prefix}gray-200) !default;
+$df-checkbox-disabled-border-color: var(--#{$prefix}gray-400) !default;
+
+// Tooltip
+$tooltip-bg: var(--#{$prefix}gray-700) !default;
+
+// General
+$mark-bg: var(--#{$prefix}gray-700) !default;