@design-factory/design-factory 20.0.0-next.1 → 20.0.0-next.2

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

@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use 'sass:color';
-@import './tokens/figma.gen';
+@import '../../utilities/rgb';
+@import './tokens/sass-vars.gen';
+@import './tokens/root.gen';
 @import './tokens/mapping.gen';
 
 // stylelint-disable scss/dollar-variable-pattern
@@ -66,7 +68,7 @@ $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: $pink !default;
+$chromatic1: $yellow !default;
 $chromatic2: $pink !default;
 $pacific: $light-blue !default; // to removed ? where used ?
 // scss-docs-end theme-color-variables
@@ -81,12 +83,10 @@ $theme-colors: (
   'danger': $danger,
   'light': $light,
   'neutral': $dark,
+  'dark': $dark,
   'tip': $tip,
   'chromatic1': $chromatic1,
-  'chromatic2': $chromatic2,
-  'pacific': $pacific,
-  'dark-primary': $dark-primary,
-  'dark-green': $dark-green
+  'chromatic2': $chromatic2
 ) !default;
 // scss-docs-end theme-colors-map
 
@@ -389,7 +389,7 @@ $lights-mapping: (
   '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-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)
@@ -423,6 +423,14 @@ $links-mapping: (
   '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;
@@ -824,11 +832,12 @@ $list-group-item-padding-x: var(--#{$prefix}spacing-5) !default;
 $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-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}gray-700) !default;
-$df-interactive-media-color: var(--#{$prefix}primary-50-color) !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;
@@ -846,6 +855,7 @@ $df-modal-footer-padding: var(--#{$prefix}spacing-3) 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
@@ -907,6 +917,8 @@ $df-popover-header-default-margin: 0 0 var(--#{$prefix}spacing-3) !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;
@@ -933,6 +945,7 @@ $df-select-value-height: calc(var(--#{prefix}typo-sizing-default) * $line-height
 $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;
 
 // Sidenav
 $df-sidenav-item-active-bg-color: var(--#{$prefix}primary-200) !default; // todo define a var for this ?
@@ -957,6 +970,10 @@ $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;
@@ -967,23 +984,24 @@ $df-slider-pointer-box-shadow: var(--#{$prefix}primary-500) !default; // primary
 $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-medium !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-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-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}secondary-900) !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}primary-200) !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;
@@ -1040,18 +1058,23 @@ $df-tables-aggrid-pagination-secondary-elements-font-size: $font-size-sm !defaul
 // 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-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}primary-800) !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;
-$nav-link-disabled-color: $df-disabled-color !default; // because of the
+$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}body-color) !default;
-$df-tabs-active-hover-border-bottom: $df-tabs-active-border-bottom-width solid var(--#{$prefix}primary-700) !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;
@@ -1073,6 +1096,7 @@ $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;