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

package/styles/scss/components/tooltip/_tooltip_container.scss

@@ -19,7 +19,7 @@
   display: block;
   padding: var(--#{$prefix}tooltip-arrow-height);
   margin: var(--#{$prefix}tooltip-margin);
-  @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
+  @include deprecate('`$tooltip-margin`', 'v5', 'v5.x', true);
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -28,7 +28,9 @@
   word-wrap: break-word;
   opacity: 0;
 
-  &.show { opacity: var(--#{$prefix}tooltip-opacity); }
+  &.show {
+    opacity: var(--#{$prefix}tooltip-opacity);
+  }
 
   .tooltip-arrow {
     display: block;
@@ -37,7 +39,7 @@
 
     &::before {
       position: absolute;
-      content: "";
+      content: '';
       border-color: transparent;
       border-style: solid;
     }
@@ -49,7 +51,7 @@
 
       &::before {
         top: -1px;
-        border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+        border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
         border-top-color: var(--#{$prefix}tooltip-bg);
       }
     }
@@ -63,7 +65,8 @@
 
       &::before {
         right: -1px;
-        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height)
+          calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
         border-right-color: var(--#{$prefix}tooltip-bg);
       }
     }
@@ -75,7 +78,7 @@
 
       &::before {
         bottom: -1px;
-        border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+        border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
         border-bottom-color: var(--#{$prefix}tooltip-bg);
       }
     }
@@ -89,24 +92,25 @@
 
       &::before {
         left: -1px;
-        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+        border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0
+          calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
         border-left-color: var(--#{$prefix}tooltip-bg);
       }
     }
   }
-  
+
   &.bs-tooltip-auto {
-    &[data-popper-placement^="top"] {
+    &[data-popper-placement^='top'] {
       @extend .bs-tooltip-top;
     }
-    &[data-popper-placement^="right"] {
+    &[data-popper-placement^='right'] {
       @extend .bs-tooltip-end;
     }
-    &[data-popper-placement^="bottom"] {
+    &[data-popper-placement^='bottom'] {
       @extend .bs-tooltip-bottom;
     }
-    &[data-popper-placement^="left"] {
+    &[data-popper-placement^='left'] {
       @extend .bs-tooltip-start;
     }
   }
-}
+}

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;
@@ -469,8 +477,12 @@ $shade-maps: map.set($shade-maps, 'chromatic2', $chromatics2-mapping);
 // 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
 
@@ -732,13 +744,13 @@ $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: 1em !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-2) !default;
+$df-dropdown-toggle-margin: var(--#{$prefix}spacing-3) !default;
 // Fieldset
 $df-fieldset-legend-font-weight: $font-weight-normal !default;
 
@@ -805,6 +817,11 @@ $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;
@@ -824,11 +841,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 +864,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
@@ -903,10 +922,13 @@ $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;
@@ -933,6 +955,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 +980,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 +994,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;
@@ -995,6 +1023,10 @@ $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: (
@@ -1040,18 +1072,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 +1110,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;
@@ -1086,7 +1124,8 @@ $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}gray-700) !default;
+$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;