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

package/styles/scss/components/link/_link.variables.scss

@@ -1,7 +1,7 @@
 $df-link-border-bottom-width: $border-width !default;
 $df-link-border-bottom: $df-link-border-bottom-width solid !default;
 
-$df-link-hover-border-bottom-width: $df-link-border-bottom-width * 2 !default;
+$df-link-hover-border-bottom-width: $df-link-border-bottom-width !default;
 
 $df-link-visited-border-bottom-width: $df-link-border-bottom-width !default;
 $df-link-visited-hover-border-bottom-width: $df-link-hover-border-bottom-width !default;
@@ -20,7 +20,7 @@ $df-link-disabled-border-bottom-width: $df-link-border-bottom-width !default;
 $df-link-disabled-border-bottom-color: $df-btn-disabled-border-color !default;
 $df-link-disabled-background: transparent !default;
 
-$df-link-active-border-bottom-width: $df-link-border-bottom-width * 2 !default;
+$df-link-active-border-bottom-width: $df-link-border-bottom-width !default;
 $df-link-visited-active-border-bottom-width: $df-link-active-border-bottom-width !default;
 
 $df-link-external-icon: '\00a0\f08e' !default; // Empty space + .fa-external-link
@@ -37,6 +37,9 @@ $df-link-more-icon-top: 0.125rem !default;
 $df-link-icononly-height: 2rem !default;
 $df-link-icononly-height-sm: 1.75rem !default;
 $df-link-icononly-height-lg: 2.25rem !default;
+$df-link-font-size: $font-size-base !default;
+$df-link-font-size-sm: $font-size-base !default;
+$df-link-font-size-lg: $font-size-base !default;
 $df-link-icononly-display: flex !default;
 $df-link-icononly-align: center !default;
 $df-link-icononly-justify-content: center !default;

package/styles/scss/components/media/_media.scss

@@ -33,6 +33,10 @@
 
   &:hover {
     background-color: var(--#{$prefix}interactive-media-hover-background-color);
+
+    time {
+      color: #{$df-interactive-media-hover-date-color};
+    }
   }
 
   @include heading {

package/styles/scss/components/media/_media.variables.scss

@@ -10,6 +10,7 @@ $df-media-border-radius-sm: 0 !default;
 $df-media-border-radius: 0 !default;
 $df-media-border-radius-lg: 0 !default;
 $df-interactive-media-date-color: var(--#{$prefix}gray-600) !default;
+$df-interactive-media-hover-date-color: var(--#{$prefix}gray-600) !default;
 $df-interactive-media-heading-font-size-sm: 1.125rem !default;
 $df-interactive-media-heading-font-size: 1.25rem !default;
 $df-interactive-media-heading-font-size-lg: 1.5rem !default;

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};
@@ -9,25 +15,7 @@
   --#{$prefix}modal-border-radius: #{$df-modal-border-radius};
   --#{$prefix}modal-border: #{$df-modal-border};
   --#{$prefix}modal-header-title-break-word: #{$df-modal-header-title-break-word};
-  --#{$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 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')};
-  } @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-padding: #{$df-modal-header-padding};
 
   --#{$prefix}modal-body-padding-x: #{$df-modal-body-padding-x};
@@ -58,6 +46,50 @@
           word-break: var(--#{$prefix}modal-header-title-break-word);
         }
         .btn-close {
+          --#{$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};
+
+          @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')};
+          }
+
+          --#{$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-brand2023(
+              'button-text-basic-color-neutral-pressed-foreground',
+              secondary,
+              'bg-active-color'
+            )};
+
           --#{$prefix}btn-close-hover-opacity: #{$df-modal-btn-close-hover-opacity};
           --#{$prefix}btn-close-opacity: #{$df-modal-btn-close-opacity};
           padding-top: var(--#{$prefix}modal-header-button-close-padding-y);
@@ -98,7 +130,7 @@
           &:focus-visible:active:hover {
             --#{$prefix}box-shadow-color: var(--#{$prefix}modal-header-button-color-hover-focus);
           }
-          @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+          @if $isBrand2023 {
             &:hover {
               background-color: var(--#{$prefix}button-text-basic-color-neutral-hovered-background);
             }

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

@@ -101,6 +101,7 @@
         background-color: var(--#{$prefix}pagination-disabled-bg);
         border-color: var(--#{$prefix}pagination-disabled-border-color);
         font-weight: inherit;
+        --#{$prefix}link-disabled-display: block;
       }
     }
 

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/radio/_radio.scss

@@ -8,7 +8,7 @@ fieldset[role='radiogroup'] {
   //TODO: remove the old "span" selector in DF 21
   > span,
   > legend {
-    font-weight: var(--#{$df-radio-group-legend-font-weight});
+    font-weight: var(--#{$prefix}radiogroup-legend-font-weight);
     font-size: var(--#{$prefix}radiogroup-font-size);
     display: block;
     margin-bottom: var(--#{$prefix}radiogroup-legend-margin-bottom);

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

@@ -71,9 +71,9 @@ ngb-rating {
 
   &.ng-invalid {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-      --#{$prefix}rating-color: var(--#{$prefix}color-danger-main-default-foreground);
-      --#{$prefix}rating-hover-color: var(--#{$prefix}color-danger-main-hovered-foreground);
-      --#{$prefix}rating-active-color: var(--#{$prefix}color-danger-main-pressed-foreground);
+      --#{$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;
     }

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

@@ -1,6 +1,9 @@
 .df-icon-inlink {
-  text-decoration: none;
-  display: inline-block;
+  &,
+  &::before {
+    display: inline-block;
+    text-decoration: none;
+  }
 }
 
 // Todo should we wrap this into a class specific for scrollspy ?

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 {
@@ -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/tabs/_tabs.scss

@@ -202,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 {

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);
         }
@@ -135,6 +126,10 @@
       &:not(:hover) {
         color: var(--#{$prefix}toast-color);
       }
+
+      &.df-toast-action {
+        --#{$prefix}btn-icon-margin-end: var(--#{$prefix}spacing-1);
+      }
     }
   }
 
@@ -181,6 +176,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 +211,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,16 +238,30 @@
       $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-text-color: shades-css-var($state, 'bg-color', true);
+    $toast-icon-color: shades-css-var-brand2023($state, 'inert-color'); // todo add a icon color ?
+    $toast-text-color: shades-css-var-brand2023(
+      'color-' + $state + '-main-default-foreground',
+      $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');
-    $toast-subtle-text-color: shades-css-var($state, 'bg-subtle-color', true);
+    $toast-subtle-text-color: shades-css-var-brand2023(
+      'color-inert-neutral-main-foreground',
+      $state,
+      'bg-subtle-color',
+      true
+    );
     $toast-subtle-btn-close-color: map.get($shade-colors-text, $state + '-100');
     $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 + '-main-default-background',
+      $state,
+      'inert-color'
+    );
 
     &.toast-#{$state} {
       // DF CSS Variable