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

package/styles/scss/components/modal/_modal.scss

@@ -1,6 +1,12 @@
 @use 'sass:map';
 @use 'sass:meta';
 
+/* stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default */
+$isBrand2023: meta.variable-exists(
+    $name: 'df-enableBranding2023'
+  )
+  and $df-enableBranding2023;
+
 .modal {
   // TODO remove this in the next major release
   --#{$prefix}modal-backdrop-opacity: #{$df-modal-backdrop-opacity};
@@ -12,22 +18,43 @@
   --#{$prefix}modal-header-button-close-padding-y: #{$df-modal-header-button-close-padding-y};
   --#{$prefix}modal-header-button-close-border-radius: #{$df-modal-header-button-close-border-radius};
 
-  --#{$prefix}modal-header-icon-font-color: #{shades-css-var(secondary, 'text-color')};
-
-  --#{$prefix}modal-header-button-color-hover: #{shades-css-var(secondary, 'text-hover-color')};
-  --#{$prefix}modal-header-button-color-hover-bg: #{shades-css-var(secondary, 'bg-subtle-hover-color')};
-
-  --#{$prefix}modal-header-button-active-bg: #{shades-css-var(secondary, 'bg-subtle-active-color')};
+  @if not $isBrand2023 {
+    --#{$prefix}modal-header-icon-font-color: #{shades-css-var(secondary, 'text-color')};
+    --#{$prefix}modal-header-button-color-hover: #{shades-css-var(secondary, 'text-hover-color')};
+  }
 
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-    --#{$prefix}modal-header-button-color-focus: #{shades-css-var(secondary, 'text-color')};
-    --#{$prefix}modal-header-button-color-hover-focus: #{shades-css-var(secondary, 'text-hover-color')};
+  --#{$prefix}modal-header-button-color-hover-bg: #{shades-css-var-brand2023(
+      'button-text-basic-color-neutral-hovered-background',
+      secondary,
+      'bg-subtle-hover-color'
+    )};
+  --#{$prefix}modal-header-button-active-bg: #{shades-css-var-brand2023(
+      'button-text-basic-color-neutral-pressed-background',
+      secondary,
+      'bg-subtle-active-color'
+    )};
+
+  @if $isBrand2023 {
+    --#{$prefix}modal-header-button-color-focus: #{shades-css-var-brand2023(
+        'button-text-basic-color-neutral-default-foreground',
+        secondary,
+        'text-color'
+      )};
+    --#{$prefix}modal-header-button-color-hover-focus: #{shades-css-var-brand2023(
+        'button-text-basic-color-neutral-hovered-foreground',
+        secondary,
+        'text-hover-color'
+      )};
   } @else {
     --#{$prefix}modal-header-button-color-focus: rgba(#{shades-rgb-css-var(secondary, 'bg-color')}, 0.5);
     --#{$prefix}modal-header-button-color-hover-focus: rgba(#{shades-rgb-css-var(secondary, 'bg-hover-color')}, 0.5);
   }
 
-  --#{$prefix}modal-header-button-active-color: #{shades-css-var(secondary, 'bg-active-color')};
+  --#{$prefix}modal-header-button-active-color: #{shades-css-var-brand2023(
+      'button-text-basic-color-neutral-pressed-foreground',
+      secondary,
+      'bg-active-color'
+    )};
   --#{$prefix}modal-header-padding: #{$df-modal-header-padding};
 
   --#{$prefix}modal-body-padding-x: #{$df-modal-body-padding-x};
@@ -41,6 +68,7 @@
   --#{$prefix}modal-xs-footer-margin-top: #{$df-modal-xs-footer-margin-top};
   --#{$prefix}modal-last-paragraph-margin-bottom: #{$df-modal-last-paragraph-margin-bottom};
   --#{$prefix}modal-footer-padding: #{$df-modal-footer-padding};
+  --#{$prefix}modal-body-padding: #{$df-modal-body-padding};
 
   overflow-x: hidden;
   overflow-y: auto;
@@ -70,11 +98,14 @@
             margin-right: auto;
             margin-left: 0;
           }
-          &:focus:not(:hover):not(:active) {
+          &:focus:not(:focus-visible) {
+            box-shadow: none;
+          }
+          &:focus-visible:not(:hover):not(:active) {
             color: var(--#{$prefix}modal-header-button-color-focus);
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-focus);
           }
-          &:focus:hover:not(:active) {
+          &:focus-visible:hover:not(:active) {
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
             color: var(--#{$prefix}modal-header-button-color-hover-focus);
           }
@@ -84,16 +115,24 @@
             $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
             background: var(--#{$prefix}modal-header-button-color-hover-bg) $btn-close-bg center/0.8rem auto no-repeat;
           }
-          &:focus:active:not(:hover) {
+          &:focus-visible:active:not(:hover) {
             color: var(--#{$prefix}modal-header-button-active-color);
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-active-color);
 
             $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
             background: var(--#{$prefix}modal-header-button-active-bg) $btn-close-bg center/0.8rem auto no-repeat;
           }
-          &:focus:active:hover {
+          &:focus-visible:active:hover {
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
           }
+          @if $isBrand2023 {
+            &:hover {
+              background-color: var(--#{$prefix}button-text-basic-color-neutral-hovered-background);
+            }
+            &:active {
+              background-color: var(--#{$prefix}button-text-basic-color-neutral-pressed-background);
+            }
+          }
         }
 
         .alert-modal-icon {
@@ -110,6 +149,7 @@
       }
 
       .modal-body {
+        padding: var(--#{$prefix}modal-body-padding);
         p:last-child {
           margin-bottom: var(--#{$prefix}modal-last-paragraph-margin-bottom);
         }

package/styles/scss/components/modal/_modal.variables.scss

@@ -24,5 +24,6 @@ $df-modal-xs-footer-margin-top: 0.9375rem !default;
 
 $df-modal-last-paragraph-margin-bottom: 0 !default;
 $df-modal-footer-padding: map.get($spacers, 5) map.get($spacers, 6) !default;
+$df-modal-body-padding: map.get($spacers, 5) map.get($spacers, 6) !default;
 $df-modal-btn-close-opacity: 1 !default;
 $df-modal-btn-close-hover-opacity: 1 !default;

package/styles/scss/components/navbar/_navbar.scss

@@ -331,6 +331,18 @@
         border-left: inherit;
         border-radius: inherit;
       }
+
+      span[data-text] {
+        text-align: center;
+        &::before {
+          content: attr(data-text);
+          font-weight: var(--#{$prefix}typo-weight-bold);
+          visibility: hidden;
+          height: 0;
+          overflow: hidden;
+          display: block;
+        }
+      }
     }
 
     .active > .nav-link,

package/styles/scss/components/pagination/_pagination.scss

@@ -78,11 +78,16 @@
       }
 
       &:focus {
+        box-shadow: none;
+      }
+
+      &:focus-visible {
         z-index: 2;
 
         &:hover {
           --#{$prefix}pagination-focus-bg: var(--#{$prefix}pagination-hover-bg);
         }
+        box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
       }
 
       z-index: initial; // overides z-index: 2 so that it is below the active page link

package/styles/scss/components/pagination/_pagination_container.scss

@@ -14,4 +14,4 @@
     background-color: var(--#{$prefix}pagination-disabled-bg);
     border-color: var(--#{$prefix}pagination-disabled-border-color);
   }
-}
+}

package/styles/scss/components/progressbar/_progressbar.variables.scss

@@ -4,16 +4,25 @@ $df-progress-bar-display: block !default;
 $df-progress-bar-infinite-animation-function: linear !default;
 $df-progress-border-width: 0.5px !default;
 $df-progress-border-style: solid !default;
-$df-progress-border-color: $gray-700 !default;
+$df-progress-border-color: variable-switch-brand2023('color-progressIndicator-main-border', $gray-700) !default;
 
-$df-darkBackgroundVersion-progress-border-color: $white !default;
+$df-darkBackgroundVersion-progress-border-color: variable-switch-brand2023(
+  'color-progressIndicator-alt-border',
+  $white
+) !default;
 
 /**
   Color of the progressbar background (~color of the progressbar with 0% progress) for the 'dark background' version
 */
-$df-darkBackgroundVersion-progressbar-background-color: $dark-primary !default;
+$df-darkBackgroundVersion-progressbar-background-color: variable-switch-brand2023(
+  'color-inert-neutral-alt-background',
+  $dark-primary
+) !default;
 
 /**
   Color of the progressbar (~color of the progressbar with 100% progress) for the 'dark background' version
 */
-$df-darkBackgroundVersion-progressbar-color: white !default;
+$df-darkBackgroundVersion-progressbar-color: variable-switch-brand2023(
+  'color-primary-alt-default-background',
+  white
+) !default;

package/styles/scss/components/rating/_rating.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use 'sass:meta';
 
 // flag angular
 // stylelint-disable-next-line selector-type-no-unknown
@@ -20,6 +21,9 @@ ngb-rating {
   --#{$prefix}rating-box-shadow: #{$df-rating-box-shadow};
   --#{$prefix}rating-focus-box-shadow: #{$df-rating-focus-box-shadow};
   --#{$prefix}rating-border-color: #{$df-rating-border-color};
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    --#{$prefix}box-shadow-color: var(--#{$prefix}rating-color);
+  }
 
   font-size: var(--#{$prefix}rating-font-size);
   color: var(--#{$prefix}rating-color);
@@ -37,17 +41,23 @@ ngb-rating {
   box-shadow: var(--#{$prefix}rating-box-shadow);
   border-color: var(--#{$prefix}rating-border-color);
 
-  &:not([aria-disabled='true']):focus {
+  &:not([aria-disabled='true']):focus-visible {
     border: var(--#{$prefix}rating-focus-border);
     box-shadow: var(--#{$prefix}rating-focus-box-shadow);
   }
 
   &:hover {
     color: var(--#{$prefix}rating-hover-color);
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      --#{$prefix}box-shadow-color: var(--#{$prefix}rating-hover-color);
+    }
   }
 
   &:active {
     color: var(--#{$prefix}rating-active-color);
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      --#{$prefix}box-shadow-color: var(--#{$prefix}rating-active-color);
+    }
   }
 
   &[aria-disabled='true'] {
@@ -60,7 +70,13 @@ ngb-rating {
   }
 
   &.ng-invalid {
-    @extend .text-danger;
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      --#{$prefix}rating-color: var(--#{$prefix}color-danger-alt-default-foreground);
+      --#{$prefix}rating-hover-color: var(--#{$prefix}color-danger-alt-hovered-foreground);
+      --#{$prefix}rating-active-color: var(--#{$prefix}color-danger-alt-pressed-foreground);
+    } @else {
+      @extend .text-danger;
+    }
   }
 
   //the 0px margins belows ensure that the full stars overlap the empty ones

package/styles/scss/components/rating/_rating.variables.scss

@@ -7,7 +7,7 @@ $df-rating-tiny-color: $black !default;
 $df-rating-hover-color: shades-css-var('primary', 'bg-hover-color') !default;
 $df-rating-active-color: shades-css-var('primary', 'bg-active-color') !default;
 $df-rating-disabled-color: var(--#{$prefix}disabled-color) !default;
-$df-rating-disabled-cursor: $df-select-disabled-cursor !default;
+$df-rating-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-rating-star-to-star-distance: 0.2em !default;
 $df-rating-number-to-stars-distance: 0.4em !default;
 $df-rating-padding: $btn-padding-y !default;

package/styles/scss/components/scrollspy/_scrollspy.scss

@@ -32,6 +32,7 @@
   border-left: var(--#{$prefix}scrollspy-navpill-border-left);
   //used when not active for old branding for the border-left to imitate a scrollbar
   border-width: var(--#{$prefix}scrollspy-navpill-border-width);
+  display: flex;
 
   &.active {
     .df-icon-inlink {
@@ -59,7 +60,6 @@
     }
   }
 
-  &:focus,
   &:focus-visible {
     // we are using this new scss var and not --#{$prefix}scrollspy-color because it will impact the old branding
     --#{$prefix}box-shadow-color: #{$df-scrollspy-focus-box-shadow-color};

package/styles/scss/components/select/_select.scss

@@ -274,15 +274,18 @@
       .ng-arrow-wrapper {
         // override
         cursor: var(--#{$prefix}select-disabled-cursor);
+
+        .ng-arrow {
+          &:before {
+            color: var(--#{$prefix}button-text-basic-color-disabled-foreground);
+          }
+        }
       }
 
       .ng-value {
         background-color: var(--#{$prefix}select-disabled-bg) !important; // override
         .badge {
-          // add
-          cursor: var(--#{$prefix}select-disabled-cursor);
-          background-color: var(--#{$prefix}select-disabled-bg);
-          color: var(--#{$prefix}select-disabled-color);
+          @extend [disabled];
         }
       }
     }
@@ -292,17 +295,6 @@
     > .ng-select-container {
       background-color: var(--#{$prefix}select-readonly-bg);
       color: var(--#{$prefix}select-readonly-color);
-
-      .badge {
-        // add
-        background-color: var(--#{$prefix}select-readonly-bg);
-        color: var(--#{$prefix}select-readonly-color);
-      }
-
-      .ng-arrow-wrapper {
-        // override
-        cursor: default;
-      }
     }
   }
   @each $state, $data in $form-validation-states {
@@ -506,7 +498,8 @@
       .ng-optgroup,
       .ng-option {
         white-space: normal;
-        word-break: break-word;
+        word-break: normal;
+        overflow-wrap: anywhere;
         &.ng-option-selected {
           background-color: var(--#{$prefix}select-optionselected-background-color);
           &.ng-option-marked {
@@ -607,9 +600,6 @@
       margin-left: var(--#{$prefix}select-arrow-wrapper-margin-right);
     }
     display: flex;
-    &:hover {
-      background-color: var(--#{$prefix}select-arrow-wrapper-hover-background-color);
-    }
     text-align: var(--#{$prefix}select-arrow-text-align);
     .ng-arrow {
       width: var(--#{$prefix}select-arrow-width) !important;
@@ -620,6 +610,11 @@
       }
     }
   }
+  &:not(.ng-select-disabled):not(.df-ng-select-readonly) {
+    .ng-arrow-wrapper:hover {
+      background-color: var(--#{$prefix}select-arrow-wrapper-hover-background-color);
+    }
+  }
   @include df-select-border-radius-panel($df-select-panel-border-radius);
   .ng-dropdown-panel {
     background-color: #fff;

package/styles/scss/components/separator/_separator.variables.scss

@@ -1 +1 @@
-$df-vertical-separator-width: 1px !default;
+$df-vertical-separator-width: 1px !default;

package/styles/scss/components/sidenav/_sidenav.scss

@@ -87,7 +87,6 @@
   width: var(--#{$prefix}sidenav-expand-width);
   background-color: var(--#{$prefix}sidenav-bg-color);
   overflow-x: var(--#{$prefix}sidenav-menu-overflow-x);
-  z-index: var(--#{$prefix}sidenav-menu-zindex);
   border-inline-end: var(--#{$prefix}sidenav-menu-border);
   // When one item is active in the menu only the first element is having the has Active look
   > df-sidenavlist > .df-sidenav-list {
@@ -198,7 +197,7 @@
           }
         }
 
-        &:focus,
+        &:focus-visible,
         &.focus {
           // Title can never be focus
           --#{$prefix}box-shadow-color: var(--#{$prefix}sidenav-item-focused-box-shadow-color);
@@ -234,7 +233,7 @@
           font-weight: var(--#{$prefix}sidenav-item-active-font-weight);
           border-inline-start: var(--#{$prefix}sidenav-item-border-start-active);
 
-          &:focus,
+          &:focus-visible,
           &.focus {
             // Title can never be focus
             &:before {
@@ -296,6 +295,7 @@
   &.df-sidenav-menu-overlay {
     position: var(--#{$prefix}sidenav-menu-overlay-position);
     height: var(--#{$prefix}sidenav-menu-overlay-height);
+    z-index: var(--#{$prefix}sidenav-menu-zindex);
   }
 
   .df-sidenav-icon {

package/styles/scss/components/sidenav/_sidenav.variables.scss

@@ -55,7 +55,8 @@ $df-sidenav-item-extra-icon-height: 0.5rem !default;
 $df-sidenav-item-extra-icon-height-level3: 0.25rem !default;
 $df-sidenav-item-basic-height: 2.5rem !default;
 $df-sidenav-item-height: calc(
-  var(--#{$prefix}sidenav-item-basic-height, #{$df-sidenav-item-basic-height}) + var(--#{$prefix}sidenav-item-extra-icon-height, 0rem)
+  var(--#{$prefix}sidenav-item-basic-height, #{$df-sidenav-item-basic-height}) +
+    var(--#{$prefix}sidenav-item-extra-icon-height, 0rem)
 ) !default;
 $df-sidenav-item-text-align: start !default;
 $df-sidenav-item-text-decoration: none !default;
@@ -72,11 +73,12 @@ $df-sidenav-icon-box-margin-end: calc((#{$df-sidenav-text-padding-start} - #{$df
 $df-sidenav-icon-box-margin-start: calc(
   #{$df-sidenav-icon-box-margin-end} - #{$df-sidenav-item-first-level-padding-start}
 ) !default;
-$df-sidenav-item-withicon-extra-padding-start:
-  $df-sidenav-text-padding-start - $df-sidenav-item-first-level-padding-start !default; // 2.375rem !default;
+$df-sidenav-item-withicon-extra-padding-start: $df-sidenav-text-padding-start -
+  $df-sidenav-item-first-level-padding-start !default; // 2.375rem !default;
 $df-sidenav-item-extra-padding-start: 0rem !default;
 $df-sidenav-item-padding-start: calc(
-  #{$df-sidenav-item-first-level-padding-start} + var(--#{$prefix}sidenav-item-icon-extra-padding) - var(--#{$prefix}sidenav-item-withactived-border-width, 0px)
+  #{$df-sidenav-item-first-level-padding-start} +
+    var(--#{$prefix}sidenav-item-icon-extra-padding) - var(--#{$prefix}sidenav-item-withactived-border-width, 0px)
 ) !default;
 $df-sidenav-item-padding-level2-start: calc(#{$df-sidenav-item-padding-start} + 0.5rem) !default;
 $df-sidenav-item-padding-level3-start: calc(

package/styles/scss/components/spinner/_spinner.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 .spinner-border {
   --#{$prefix}spinner-overflow: #{$df-spinner-overflow};
   --#{$prefix}spinner-circumference: #{$df-spinner-circumference};
@@ -43,6 +45,18 @@
   --#{$prefix}spinner-outline-color: #{$df-darkBackgroundVersion-spinner-outline-color};
 }
 
+@if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @each $state, $value in $theme-colors {
+    .spinner-border.df-spinner-#{$state} {
+      border-left-color: #{if(
+          $state == 'light',
+          var(--#{$prefix}color-primary-alt-default-background),
+          shades-css-var($state, 'bg-color')
+        )};
+    }
+  }
+}
+
 .btn {
   .spinner-border-sm {
     --#{$prefix}spinner-circumference: #{$df-spinner-btn-sm-circumference};

package/styles/scss/components/spinner/_spinner.variables.scss

@@ -4,8 +4,8 @@ $df-spinner-overflow: visible !default;
 $df-spinner-circumference: 2.7rem !default;
 $df-spinner-sm-circumference: math.div($df-spinner-circumference, 1.5) !default;
 $df-spinner-border-width: 0.19em !default;
-$df-spinner-border-color: $light !default;
-$df-spinner-dark-border-color: $dark-primary !default;
+$df-spinner-border-color: variable-switch-brand2023('color-inert-neutral-main-background', $light) !default;
+$df-spinner-dark-border-color: variable-switch-brand2023('color-inert-neutral-alt-background', $dark-primary) !default;
 $df-spinner-sm-border-width: math.div($df-spinner-border-width, 2) !default;
 // Spinner in button
 $df-spinner-btn-circumference: 1.25rem !default;
@@ -20,8 +20,11 @@ $df-progressindicator-backdrop-global-opacity: 0.5 !default;
 $df-progressindicator-backdrop-contextual-bg-color: $white !default;
 $df-progressindicator-backdrop-contextual-opacity: 0.5 !default;
 
-$df-spinner-outline-color: $gray-700 !default;
+$df-spinner-outline-color: variable-switch-brand2023('color-progressIndicator-main-border', $gray-700) !default;
 $df-spinner-outline-style: solid !default;
 $df-spinner-outline-width: 0.5px !default;
 
-$df-darkBackgroundVersion-spinner-outline-color: $white !default;
+$df-darkBackgroundVersion-spinner-outline-color: variable-switch-brand2023(
+  'color-progressIndicator-alt-border',
+  $white
+) !default;

package/styles/scss/components/stepper/_stepper.variables.scss

@@ -35,11 +35,11 @@ $df-stepper-step-padding-y: $btn-padding-y !default;
 $df-stepper-step-padding-x: 0.75rem !default;
 // TODO put a link in this ot the ratios of the button? Must be the same
 $df-stepper-step-padding-y-sm: $btn-padding-y * map.get($df-sizing-ratios, 'sm') !default;
-$df-stepper-step-padding-x-sm: $btn-padding-x * map.get($df-size-ratios, 'sm') !default;
+$df-stepper-step-padding-x-sm: calc($btn-padding-x * map.get($df-size-ratios, 'sm')) !default;
 $df-stepper-step-padding-y-lg: $btn-padding-y * map.get($df-sizing-ratios, 'lg') !default;
-$df-stepper-step-padding-x-lg: $btn-padding-x * map.get($df-size-ratios, 'lg') !default;
+$df-stepper-step-padding-x-lg: calc($btn-padding-x * map.get($df-size-ratios, 'lg')) !default;
 $df-stepper-step-padding-y-xl: $btn-padding-y * map.get($df-sizing-ratios, 'xl') !default;
-$df-stepper-step-padding-x-xl: $btn-padding-x * map.get($df-size-ratios, 'xl') !default;
+$df-stepper-step-padding-x-xl: calc($btn-padding-x * map.get($df-size-ratios, 'xl')) !default;
 $df-stepper-step-height: auto !default;
 $df-stepper-hl-height: 0px !default;
 $df-stepper-hl-margin: 2 * $border-width 0 0 0 !default; //0.5

package/styles/scss/components/tabs/_tabs.scss

@@ -63,6 +63,10 @@
     }
 
     &:focus {
+      box-shadow: none;
+    }
+
+    &:focus-visible {
       // override
       outline: var(--#{$prefix}tabs-focus-outline); // add to override default
       box-shadow: var(--#{$prefix}tabs-focus-box-shadow); // add
@@ -198,6 +202,9 @@
 
     a.nav-link {
       border-bottom: 0;
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        padding-inline-start: var(--#{$prefix}spacing-5);
+      }
     }
 
     .nav-link {
@@ -217,7 +224,7 @@
         }
       }
 
-      &:focus {
+      &:focus-visible {
         outline: 0;
         box-shadow: $df-tabs-focus-box-shadow;
       }

package/styles/scss/components/timepicker/_timepicker.scss

@@ -0,0 +1,5 @@
+ngb-timepicker {
+  .ngb-tp-spacer {
+    width: $df-timepicker-spacer-width !important;
+  }
+}

package/styles/scss/components/timepicker/_timepicker.variables.scss

@@ -0,0 +1 @@
+$df-timepicker-spacer-width: 1em !default;

package/styles/scss/components/toast/_toast.scss

@@ -10,7 +10,7 @@
   --#{$prefix}toast-subtle-border-color-alpha: #{$df-toast-subtle-border-color-alpha};
   --#{$prefix}toast-icon-top: #{$df-toast-insert-icon-top};
   --#{$prefix}toast-icon-font-weight: #{$df-icon-solid-font-weight};
-  --#{$prefix}toast-icon-padding-start: #{$df-toast-insert-icon-space};
+  --#{$prefix}toast-icon-padding-start: #{$df-toast-insert-icon-space}; //TODO: brand2023 - remove when removing old branding since new toast depends on fontsize and tokens
   --#{$prefix}toast-btn-font-weight: #{$df-toast-btn-font-weight};
   --#{$prefix}toast-btn-close-border-radius: #{$df-toast-btn-close-border-radius};
   --#{$prefix}toast-btn-close-border-width: #{$df-toast-btn-close-border-width};
@@ -33,23 +33,11 @@
   &.df-toast-dismissible {
     .toast-body,
     .toast-header {
-      @include ltr {
-        padding-right: var(--#{$prefix}toast-dismissible-padding-end);
-      }
-
-      @include rtl {
-        padding-left: var(--#{$prefix}toast-dismissible-padding-end);
-      }
+      padding-inline-end: var(--#{$prefix}toast-dismissible-padding-end);
     }
 
     .toast-header + .toast-body {
-      @include ltr {
-        padding-right: var(--#{$prefix}toast-padding-x);
-      }
-
-      @include rtl {
-        padding-left: var(--#{$prefix}toast-padding-x);
-      }
+      padding-inline-end: var(--#{$prefix}toast-padding-x);
     }
   }
 
@@ -86,6 +74,7 @@
 
       // override BS
       background: transparent;
+
       &:before {
         content: '';
         display: block;
@@ -98,6 +87,7 @@
 
       &:hover {
         background-color: var(--#{$prefix}btn-hover-bg);
+
         &:before {
           background-color: var(--#{$prefix}btn-hover-color);
         }
@@ -106,6 +96,7 @@
       // To be kept after hover as it has the same specificity
       &:active {
         background-color: var(--#{$prefix}btn-active-bg);
+
         &:before {
           background-color: var(--#{$prefix}btn-active-color);
         }
@@ -181,6 +172,7 @@
       &:active {
         color: var(--#{$prefix}primary-800);
         background-color: var(--#{$prefix}primary-200);
+
         &:focus-visible {
           --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
               'button-text-basic-color-primary-active-border',
@@ -215,25 +207,20 @@
     top: var(--#{$prefix}toast-icon-top);
     font-weight: var(--#{$prefix}toast-icon-font-weight);
 
-    @include ltr {
-      padding-left: var(--#{$prefix}toast-padding-x);
-    }
-
-    @include rtl {
-      padding-right: var(--#{$prefix}toast-padding-x);
-    }
+    padding-inline-start: var(--#{$prefix}toast-padding-x);
   }
 
   &[dfInsertToastIcon] {
     div:first-of-type {
       &.toast-body,
       &.toast-header {
-        @include ltr {
-          padding-left: calc(var(--#{$prefix}toast-icon-padding-start) + var(--#{$prefix}toast-padding-x));
-        }
-
-        @include rtl {
-          padding-right: calc(var(--#{$prefix}toast-icon-padding-start) + var(--#{$prefix}toast-padding-x));
+        @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+          // --#{$prefix}toast-font-size for the size of the icon
+          padding-inline-start: calc(
+            var(--#{$prefix}toast-padding-x) + var(--#{$prefix}toast-font-size) + var(--#{$prefix}spacing-3)
+          );
+        } @else {
+          padding-inline-start: calc(var(--#{$prefix}toast-icon-padding-start) + var(--#{$prefix}toast-padding-x));
         }
       }
     }
@@ -247,7 +234,7 @@
       $toast-subtle-close-box-shadow-color: shades-rgb-css-var($state, 'bg-subtle-color', true);
     }
     $toast-bg-hover: shades-css-var($state, 'bg-hover-color');
-    $toast-icon-color: shades-css-var($state, 'border-color'); // todo add a icon color ?
+    $toast-icon-color: shades-css-var-brand2023($state, 'inert-color'); // todo add a icon color ?
     $toast-text-color: shades-css-var($state, 'bg-color', true);
     $toast-btn-close-color: map.get($shade-colors-text, $state + '-500');
     $toast-subtle-bg-color: shades-css-var($state, 'bg-subtle-color');
@@ -256,7 +243,11 @@
     $toast-subtle-hover-bg-color: shades-css-var($state, 'bg-subtle-hover-color');
     $toast-subtle-active-bg-color: shades-css-var($state, 'bg-subtle-active-color');
     $toast-subtle-border-color: shades-rgba-css-var-with-opacity($state, 'border-color');
-    $toast-subtle-border-start-color: shades-css-var($state, 'inert-color');
+    $toast-subtle-border-start-color: shades-css-var-brand2023(
+      'color-' + $state + '-alt-default-border',
+      $state,
+      'inert-color'
+    );
 
     &.toast-#{$state} {
       // DF CSS Variable