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

package/styles/scss/components/toggle/_toggle.scss

@@ -24,6 +24,7 @@
   --#{$prefix}switch-name-padding-start: 0;
   --#{$prefix}switch-padding-start: #{$form-switch-padding-start};
   --#{$prefix}switch-input-padding-start: 0;
+  --#{$prefix}switch-container-margin-top: #{$df-switch-container-margin-top};
 
   display: flex;
   align-items: center;
@@ -138,7 +139,7 @@
     .df-form-switch-container {
       display: flex;
       align-items: center;
-      margin-top: #{($line-height-base - $form-check-input-width) * 0.5};
+      margin-top: var(--#{$prefix}switch-container-margin-top);
     }
   }
 }

package/styles/scss/components/toggle/_toggle.variables.scss

@@ -19,3 +19,4 @@ $df-switch-rtl-checked-bg-position: left center !default;
 $df-switch-rtl-bg-position: right center !default;
 $df-switch-box-shadow-opacity: $input-btn-focus-color-opacity !default;
 $df-switch-box-shadow: $form-check-input-focus-box-shadow !default;
+$df-switch-container-margin-top: #{($line-height-base - $form-check-input-width) * 0.5} !default;

package/styles/scss/components/tooltip/_tooltip.scss

@@ -1,12 +1,17 @@
 .tooltip {
   --#{$prefix}tooltip-border-radius-sm: #{$df-tooltip-border-radius-sm};
   --#{$prefix}tooltip-border-radius-lg: #{$df-tooltip-border-radius-lg};
+  --#{$prefix}tooltip-padding-x-sm: #{$df-tooltip-padding-x-sm};
+  --#{$prefix}tooltip-padding-x-lg: #{$df-tooltip-padding-x-lg};
+  --#{$prefix}tooltip-padding-y-sm: #{$df-tooltip-padding-y-sm};
+  --#{$prefix}tooltip-padding-y-lg: #{$df-tooltip-padding-y-lg};
 
   @each $extension, $ratio in $df-size-ratios {
     &.tooltip-inner-#{$extension} {
       .tooltip-inner {
         @include border-radius(var(--#{$prefix}tooltip-border-radius-#{$extension}));
         font-size: get-sizing-brand2023($extension, $ratio);
+        padding: var(--#{$prefix}tooltip-padding-y-#{$extension}) var(--#{$prefix}tooltip-padding-x-#{$extension});
       }
     }
   }

package/styles/scss/components/tooltip/_tooltip.variables.scss

@@ -1,2 +1,6 @@
 $df-tooltip-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $df-tooltip-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+$df-tooltip-padding-x-sm: 0.75rem !default;
+$df-tooltip-padding-x-lg: 0.75rem !default;
+$df-tooltip-padding-y-sm: 0.25rem !default;
+$df-tooltip-padding-y-lg: 0.375rem !default;

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/df-styles.scss

@@ -103,6 +103,7 @@
 @import 'components/footer/footer';
 @import 'components/toast/toast';
 @import 'components/scrollspy/scrollspy';
+@import 'components/timepicker/timepicker';
 @import 'components/tooltip/tooltip';
 
 @import 'bootstrap/rtl-styles-override';

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;
@@ -460,6 +468,20 @@ $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;
+@for $i from 0 through 12 {
+  $spacers: map.set($spacers, $i, 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
@@ -501,6 +523,7 @@ $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
 
@@ -564,6 +587,10 @@ $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
@@ -599,7 +626,7 @@ $breadcrumb-divider-flipped: '\f053' !default; // fa-chevron-left
 $df-breadcrumb-separator-font: 'Font Awesome 6 Pro' !default;
 $df-breadcrumb-icon-angle-left-content: '\f060' !default; // icon-arrow-left
 $df-breadcrumb-icon-angle-right-content: '\f061' !default; // fa-arrow-right
-$df-breadcrumb-icon-margin: 0rem 0.25rem !default;
+$df-breadcrumb-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;
@@ -608,6 +635,16 @@ $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;
@@ -624,6 +661,7 @@ $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;
@@ -637,6 +675,11 @@ $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;
@@ -645,7 +688,7 @@ $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}secondary-900) !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;
@@ -654,7 +697,14 @@ $df-accordion-card-last-body-border-top: none !default;
 $df-card-title-font-weight: $font-weight-medium !default;
 $df-card-group-between-border-width: var(--#{$prefix}border-width) !default;
 $df-card-group-between-border-color: var(--#{$prefix}secondary-300) !default;
-$df-accordion-card-padding-start: 1rem !default;
+$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
 
@@ -682,6 +732,7 @@ $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;
@@ -692,6 +743,10 @@ $df-dropdown-item-focus-bg: unset !default;
 $df-dropdown-toggle-split-padding-x: 1em !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;
 // Fieldset
 $df-fieldset-legend-font-weight: $font-weight-normal !default;
 
@@ -707,10 +762,27 @@ $display-font-weight: $font-weight-medium !default;
 $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;
@@ -723,6 +795,10 @@ $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;
@@ -750,16 +826,18 @@ $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}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;
@@ -768,12 +846,16 @@ $df-interactive-media-font-size-lg: $font-size-lg !default;
 
 // Modal
 $modal-header-border-width: 0px !default;
-// $modal-backdrop-bg: $df-color-backdrop-background !default;
-$modal-backdrop-bg: var(--color-backdrop-background) !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: 1.5rem 1.5rem 1rem 1.5rem !default;
-$df-modal-footer-padding: 1rem 1.5rem 1.5rem 1.5rem !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
@@ -818,6 +900,7 @@ $df-pagination-boundaries-focus-box-shadow:
 $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;
@@ -828,10 +911,14 @@ $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;
 
 // 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;
@@ -839,6 +926,11 @@ $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;
@@ -852,13 +944,15 @@ $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;
 
 // 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: 0.5rem !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;
@@ -866,8 +960,8 @@ $df-sidenav-item-focused-box-shadow-color: var(--#{$prefix}primary-100-color) !d
 $df-sidenav-item-focused-inner-box-shadow-color: var(--#{$prefix}white) !default;
 $df-sidenav-item-focused-z-index: 2 !default;
 $df-sidenav-item-margin: 0 0 1px 0 !default;
-$df-sidenav-item-padding-start: 1rem !default;
-$df-sidenav-item-padding-end: 1rem !default;
+$df-sidenav-item-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;
@@ -875,6 +969,11 @@ $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;
@@ -885,22 +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-padding-x: var(--#{$prefix}scrollspy-active-padding-x) !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: 0.5rem !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;
@@ -911,6 +1012,7 @@ $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;
 
 // Stepper
 $df-stepper-steps-colors: (
@@ -948,24 +1050,39 @@ $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}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;
+
 // 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;
@@ -979,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;
@@ -988,11 +1106,16 @@ $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}gray-700) !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;