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

package/styles/scss/components/badge/_badge.scss

@@ -2,14 +2,24 @@
 @use 'sass:map';
 @import 'badge.mixins';
 
+/* stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default */
+$isBrand2023: meta.variable-exists(
+    $name: 'df-enableBranding2023'
+  )
+  and $df-enableBranding2023;
+
 $df-solidMappedColors: () !default;
 $df-lightMappedColors: () !default;
 @each $color, $value in $utilities-bg-colors {
   $df-solidMappedColors: map.set($df-solidMappedColors, $color, $color);
-  $df-lightMappedColors: map.set($df-lightMappedColors, $color, $color + '-light');
+  @if $isBrand2023 {
+    $df-lightMappedColors: map.set($df-lightMappedColors, $color, $color + '-soft');
+  } @else {
+    $df-lightMappedColors: map.set($df-lightMappedColors, $color, $color + '-light');
+  }
 }
 
-@if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+@if $isBrand2023 {
   /* stylelint-disable-next-line scss/dollar-variable-default */
   $df-solidMappedColors: map.set($df-solidMappedColors, 'white', 'neutral-alt');
 
@@ -21,9 +31,10 @@ $df-lightMappedColors: () !default;
 }
 
 %bg-badge-common {
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @if $isBrand2023 {
     background-color: var(--#{$prefix}badge-background-color) !important;
   }
+
   &:not(.rounded-pill):not(.df-badge-dot) {
     &:not(.df-closable) {
       &:hover:not([disabled]):not(.disabled) {
@@ -54,14 +65,26 @@ $df-lightMappedColors: () !default;
     }
   }
 
+  $disabled-border-color: variable-switch-brand2023(
+    var(--#{$prefix}disabled-border-color),
+    var(--#{$prefix}disabled-color)
+  );
   &[disabled],
   &.disabled,
   &:has([disabled]),
   &:has(.disabled) {
-    @include df-disable-badge(var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-bg-color));
+    @include df-disable-badge(
+      var(--#{$prefix}disabled-color),
+      var(--#{$prefix}disabled-bg-color),
+      $disabled-border-color
+    );
 
     & > *:hover {
-      @include df-disable-badge(var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-bg-color));
+      @include df-disable-badge(
+        var(--#{$prefix}disabled-color),
+        var(--#{$prefix}disabled-bg-color),
+        $disabled-border-color
+      );
     }
   }
 
@@ -77,7 +100,10 @@ $df-lightMappedColors: () !default;
   --#{$prefix}badge-icon-margin-end: #{$df-badge-icon-margin-end};
   --#{$prefix}badge-dot-font-size: #{$df-badge-dot-font-size};
   --#{$prefix}badge-dot-margin-end: #{$df-badge-dot-margin-end};
-  --#{$prefix}box-shadow-color: #{$df-badge-box-shadow-color};
+  --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+      'badge-solid-color-focus-main-border',
+      #{$df-badge-box-shadow-color}
+    )};
   --#{$prefix}badge-inner-elements-focus-box-shadow: #{$df-badge-inner-elements-focus-box-shadow};
   // override
   text-transform: var(--#{$prefix}badge-text-transform);
@@ -93,7 +119,7 @@ $df-lightMappedColors: () !default;
   // interactive badges
   &:not(.rounded-pill):not(.df-badge-dot) {
     cursor: pointer;
-    align-items: stretch;
+
     &[disabled],
     &.disabled,
     &:has([disabled]),
@@ -102,7 +128,7 @@ $df-lightMappedColors: () !default;
     }
   }
 
-  &:focus,
+  &:focus-visible,
   &.focus {
     outline: $df-badge-button-focus-outline;
     box-shadow: var(--#{$prefix}badge-focus-box-shadow);
@@ -168,7 +194,19 @@ $df-lightMappedColors: () !default;
             $color,
             'bg-color'
           )};
-        --#{$prefix}badge-disabled-color: var(--#{$prefix}disabled-color);
+        @if $isBrand2023 {
+          --#{$prefix}disabled-color: #{variable-switch-brand2023(
+              'badge-solid-color-disabled-default-foreground',
+              var(--#{$prefix}disabled-color)
+            )};
+          --#{$prefix}disabled-bg-color: var(--#{$prefix}badge-solid-color-disabled-default-background);
+        } @else {
+          --#{$prefix}badge-disabled-color: var(--#{$prefix}disabled-color);
+        }
+
+        @if $color == 'white' {
+          --#{$prefix}box-shadow-color: var(--#{$prefix}badge-solid-color-focus-alt-border);
+        }
 
         @extend %bg-badge-common;
       }
@@ -201,17 +239,21 @@ $df-lightMappedColors: () !default;
           $color,
           'border-hover-color'
         )};
+
+      @if $isBrand2023 {
+        --#{$prefix}badge-active-border-color: var(--#{$prefix}badge-outline-color-#{$mappedColor}-pressed-border);
+        --#{$prefix}badge-active-background-color: var(--#{$prefix}badge-outline-color-#{$color}-pressed-background);
+        --#{$prefix}badge-active-color: var(--#{$prefix}badge-outline-color-#{$color}-pressed-foreground);
+        --#{$prefix}disabled-color: var(--#{$prefix}badge-outline-color-disabled-default-foreground);
+        --#{$prefix}disabled-bg-color: var(--#{$prefix}badge-outline-color-disabled-default-background);
+        --#{$prefix}disabled-border-color: var(--#{$prefix}badge-outline-color-disabled-default-border);
+        --#{$prefix}box-shadow-color: var(--#{$prefix}badge-outline-color-focus-main-border);
+      }
+
       background-color: var(--#{$prefix}badge-background-color);
       color: var(--#{$prefix}badge-color);
       border: var(--#{$prefix}border-width) solid var(--#{$prefix}badge-border-color);
 
-      &.df-badge-dot {
-        color: var(--#{$prefix}badge-color) !important; //important needed to override 'important' in df-badge-dot
-        &::before {
-          background-color: var(--#{$prefix}badge-color);
-        }
-      }
-
       &:not([disabled]):not(.disabled) {
         &:has(button) {
           &:hover:not([disabled]):not(.disabled) {
@@ -229,13 +271,34 @@ $df-lightMappedColors: () !default;
               --#{$prefix}badge-hover-background-color
             ) !important; // overriding the bg-#{$color} utility background-color
           }
+
+          @if $isBrand2023 {
+            &:active:not([disabled]):not(.disabled) {
+              color: var(--#{$prefix}badge-active-color);
+              border-color: var(--#{$prefix}badge-active-border-color);
+              background-color: var(--#{$prefix}badge-active-background-color) !important;
+            }
+          }
         }
       }
+
       &[disabled],
       &.disabled,
       &:has([disabled]),
       &:has(.disabled) {
-        @include df-disable-badge(var(--#{$prefix}disabled-color), var(--#{$prefix}badge-background-color), true);
+        @if $isBrand2023 {
+          @include df-disable-badge(
+            var(--#{$prefix}disabled-color),
+            var(--#{$prefix}disabled-bg-color),
+            var(--#{$prefix}disabled-border-color)
+          );
+        } @else {
+          @include df-disable-badge(
+            var(--#{$prefix}disabled-color),
+            var(--#{$prefix}badge-background-color),
+            var(--#{$prefix}disabled-color)
+          );
+        }
         & > *:hover {
           cursor: var(--#{$prefix}disabled-cursor);
         }
@@ -261,7 +324,7 @@ $df-lightMappedColors: () !default;
           $color,
           'text-light-hover-color'
         )};
-      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      @if $isBrand2023 {
         --#{$prefix}badge-hover-border-color: var(--#{$prefix}badge-soft-color-#{$mappedColor}-hovered-border);
       }
       --#{$prefix}badge-active-background-color: #{shades-css-var-brand2023(
@@ -275,8 +338,12 @@ $df-lightMappedColors: () !default;
           'bg-light-active-color',
           true
         )};
-      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      @if $isBrand2023 {
+        --#{$prefix}box-shadow-color: var(--#{$prefix}badge-soft-color-focus-main-border);
         --#{$prefix}badge-active-border-color: var(--#{$prefix}badge-soft-color-#{$color}-pressed-border);
+        --#{$prefix}disabled-color: var(--#{$prefix}badge-soft-color-disabled-default-foreground);
+        --#{$prefix}disabled-bg-color: var(--#{$prefix}badge-soft-color-disabled-default-background);
+        --#{$prefix}disabled-border-color: var(--#{$prefix}badge-soft-color-disabled-default-border);
       }
       --#{$prefix}badge-dot-background-color: #{shades-css-var-brand2023(
           'badge-soft-color-' + #{$mappedColor} + '-default-background',
@@ -285,8 +352,8 @@ $df-lightMappedColors: () !default;
         )};
       background-color: #{shades-css-var-brand2023('', $color, 'bg-light-color')};
 
-      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        &:not(.df-badge-dot) {
+      @if $isBrand2023 {
+        &:not([disabled]):not(.disabled):not(.df-badge-dot) {
           --#{$prefix}badge-border-color: var(--#{$prefix}badge-soft-color-#{$mappedColor}-default-border);
         }
       }
@@ -295,72 +362,125 @@ $df-lightMappedColors: () !default;
       @extend %bg-badge-common;
     }
 
-    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    @if $isBrand2023 {
       // Additional colors mix (light grey background with colored icon)
-      &.bg-light {
+      &.bg-neutral-soft {
         .df-badge-icon.text-#{$color} {
           color: var(--#{$prefix}badge-solid-color-#{$color}-default-background) !important;
         }
       }
     }
   }
-}
 
-.badge.df-closable {
-  // badge interactive closable
-  --#{$prefix}badge-interactive-container-padding-y: 0;
-  --#{$prefix}badge-interactive-container-padding-start: 0;
-  --#{$prefix}badge-interactive-container-padding-end: 0;
-  --#{$prefix}badge-interactive-button-start-radius: #{$badge-border-radius};
-  --#{$prefix}badge-interactive-button-padding-end: #{$df-badge-interactive-button-padding-end};
-  --#{$prefix}badge-interactive-close-box-shadow: #{$df-btn-focus-box-shadow};
-  --#{$prefix}badge-interactive-close-end-radius: #{$badge-border-radius};
-  --#{$prefix}badge-interactive-close-padding: #{$df-badge-interactive-close-padding};
-  --#{$prefix}badge-interactive-close-border: #{$df-badge-interactive-close-border};
-  --#{$prefix}badge-interactive-close-outline: #{$df-badge-button-focus-outline};
-  padding-block: var(--#{$prefix}badge-interactive-container-padding-y);
-  padding-inline: var(--#{$prefix}badge-interactive-container-padding-start)
-    var(--#{$prefix}badge-interactive-container-padding-end);
-
-  &:focus-within {
-    outline: var(--#{$prefix}badge-interactive-close-outline);
-    box-shadow: var(--#{$prefix}badge-interactive-close-box-shadow);
-  }
+  &.df-closable {
+    // badge interactive closable
+    --#{$prefix}badge-interactive-container-padding-y: 0;
+    --#{$prefix}badge-interactive-container-padding-start: 0;
+    --#{$prefix}badge-interactive-container-padding-end: 0;
+    --#{$prefix}badge-interactive-button-start-radius: #{$badge-border-radius};
+    --#{$prefix}badge-interactive-button-padding-end: #{$df-badge-interactive-button-padding-end};
+    --#{$prefix}badge-interactive-close-box-shadow: #{$df-btn-focus-box-shadow};
+    --#{$prefix}badge-interactive-close-end-radius: #{$badge-border-radius};
+    --#{$prefix}badge-interactive-close-padding: #{$df-badge-interactive-close-padding};
+    --#{$prefix}badge-interactive-close-border: #{$df-badge-interactive-close-border};
+    --#{$prefix}badge-interactive-close-outline: #{$df-badge-button-focus-outline};
+    padding-block: var(--#{$prefix}badge-interactive-container-padding-y);
+    padding-inline: var(--#{$prefix}badge-interactive-container-padding-start)
+      var(--#{$prefix}badge-interactive-container-padding-end);
+
+    &:has(button:focus-visible) {
+      outline: var(--#{$prefix}badge-interactive-close-outline);
+      box-shadow: var(--#{$prefix}badge-interactive-close-box-shadow);
+    }
 
-  *:focus,
-  *.focus {
-    outline: var(--#{$prefix}badge-interactive-close-outline);
-    box-shadow: var(--#{$prefix}badge-inner-elements-focus-box-shadow);
-  }
+    *:focus-visible,
+    *.focus {
+      outline: var(--#{$prefix}badge-interactive-close-outline);
+      box-shadow: var(--#{$prefix}badge-inner-elements-focus-box-shadow);
+    }
 
-  button {
-    background-color: inherit;
-    color: inherit;
+    button {
+      background-color: inherit;
+      color: inherit;
 
-    &:hover {
-      cursor: pointer;
+      &:hover {
+        cursor: pointer;
+      }
+
+      border: var(--#{$prefix}badge-interactive-close-border);
+      padding: var(--#{$prefix}badge-interactive-close-padding);
+      border-start-end-radius: var(--#{$prefix}badge-interactive-close-end-radius);
+      border-end-end-radius: var(--#{$prefix}badge-interactive-close-end-radius);
     }
 
-    border: var(--#{$prefix}badge-interactive-close-border);
-    padding: var(--#{$prefix}badge-interactive-close-padding);
-    border-start-end-radius: var(--#{$prefix}badge-interactive-close-end-radius);
-    border-end-end-radius: var(--#{$prefix}badge-interactive-close-end-radius);
-  }
+    &:not(.rounded-pill) {
+      // round-pill does not have internal button as span
+      // add
+      span[role='button'] {
+        // We put the badge padding on the button except for the side that touches the close button
+        padding-block: var(--#{$prefix}badge-padding-y);
+        padding-inline: var(--#{$prefix}badge-padding-x) var(--#{$prefix}badge-interactive-button-padding-end);
+        border-start-start-radius: var(--#{$prefix}badge-interactive-button-start-radius);
+        border-end-start-radius: var(--#{$prefix}badge-interactive-button-start-radius);
+      }
+    }
 
-  &:not(.rounded-pill) {
-    // round-pill does not have internal button as span
-    // add
-    span[role='button'] {
-      // We put the badge padding on the button except for the side that touches the close button
-      padding-block: var(--#{$prefix}badge-padding-y);
-      padding-inline: var(--#{$prefix}badge-padding-x) var(--#{$prefix}badge-interactive-button-padding-end);
-      border-start-start-radius: var(--#{$prefix}badge-interactive-button-start-radius);
-      border-end-start-radius: var(--#{$prefix}badge-interactive-button-start-radius);
+    &.rounded-pill {
+      --#{$prefix}badge-interactive-close-end-radius: #{$border-radius-pill};
+      --#{$prefix}badge-interactive-container-padding-start: var(--#{$prefix}badge-padding-x);
     }
   }
 
-  &.rounded-pill {
-    --#{$prefix}badge-interactive-close-end-radius: #{$border-radius-pill};
-    --#{$prefix}badge-interactive-container-padding-start: var(--#{$prefix}badge-padding-x);
+  //sizing
+  @if $isBrand2023 {
+    // TODO: when removing old branding move it to the .df-closable class and merge the padding
+    &,
+    &.df-closable {
+      &.rounded-pill > button {
+        margin-inline-start: var(--#{$prefix}spacing-1);
+      }
+
+      button,
+      [role='button'] {
+        height: 100%;
+        padding: unset;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    font-weight: var(--#{$prefix}typo-weight-medium);
+
+    @include df-badge-sizing(
+      $df-badge-height,
+      var(--#{$prefix}typo-sizing-xsmall),
+      var(--#{$prefix}spacing-3),
+      $df-badge-close-button-width
+    );
+    &.df-badge-sm {
+      @include df-badge-sizing(
+        $df-badge-height-sm,
+        var(--#{$prefix}typo-sizing-xsmall),
+        var(--#{$prefix}spacing-3),
+        $df-badge-close-button-width
+      );
+    }
+    &.df-badge-lg {
+      @include df-badge-sizing(
+        $df-badge-height-lg,
+        var(--#{$prefix}typo-sizing-small),
+        var(--#{$prefix}spacing-4),
+        $df-badge-close-button-width-lg
+      );
+    }
+    &.df-badge-xl {
+      @include df-badge-sizing(
+        $df-badge-height-xl,
+        var(--#{$prefix}typo-sizing-default),
+        var(--#{$prefix}spacing-5),
+        $df-badge-close-button-width-xl
+      );
+    }
   }
 }

package/styles/scss/components/badge/_badge.variables.scss

@@ -18,3 +18,11 @@ $df-badge-box-shadow-color: var(--#{$prefix}box-shadow-color) !default;
 
 $df-badge-inner-elements-focus-box-shadow: none !default;
 $df-badge-text-transform: none !default;
+
+$df-badge-height-sm: 1.25rem !default; // 20px
+$df-badge-height: 1.5rem !default; // 24px
+$df-badge-height-lg: 1.875rem !default; // 30px
+$df-badge-height-xl: 2.5rem !default; // 40px
+$df-badge-close-button-width: 1.5rem !default; // 24px
+$df-badge-close-button-width-lg: 1.75rem !default; // 26px
+$df-badge-close-button-width-xl: 2rem !default; // 28px

package/styles/scss/components/brand-color/_brand-color.mixins.scss

@@ -7,7 +7,7 @@
   button#{$parent} {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'bg-color', true)};
-      &:focus {
+      &:focus-visible {
         background-color: shades-css-var($colorName, 'bg-color') !important;
       }
       &:hover {
@@ -20,7 +20,7 @@
       }
     } @else {
       &:hover,
-      &:focus {
+      &:focus-visible {
         background-color: color.adjust($color, $lightness: -10%) !important;
       }
     }

package/styles/scss/components/breadcrumbs/_breadcrumbs.scss

@@ -11,16 +11,19 @@
   --#{$prefix}breadcrumb-icon-margin: #{$df-breadcrumb-icon-margin};
   --#{$prefix}breadcrumb-icon-angle-left-content: #{$df-breadcrumb-icon-angle-left-content};
   --#{$prefix}breadcrumb-icon-angle-right-content: #{$df-breadcrumb-icon-angle-right-content};
+  --#{$prefix}breadcrumb-item-icon-margin-inline-end: #{$df-breadcrumb-item-icon-margin-inline-end};
 
   &.breadcrumb-sm {
     --#{$prefix}breadcrumb-font-size: #{$font-size-sm};
     --#{$prefix}breadcrumb-item-before-padding: #{$df-breadcrumb-item-before-padding-sm};
+    --#{$prefix}breadcrumb-item-icon-margin-inline-end: #{$df-breadcrumb-item-icon-margin-inline-end-sm};
   }
 
   &.breadcrumb-lg {
     // todo create a css variable for body-font-size-lg and sm
     --#{$prefix}breadcrumb-font-size: #{$font-size-lg};
     --#{$prefix}breadcrumb-item-before-padding: #{$df-breadcrumb-item-before-padding-lg};
+    --#{$prefix}breadcrumb-item-icon-margin-inline-end: #{$df-breadcrumb-item-icon-margin-inline-end-lg};
   }
 
   .breadcrumb-item {
@@ -52,7 +55,7 @@
     }
 
     .df-breadcrumb-item-icon {
-      margin-inline-end: $df-breadcrumb-item-icon-margin-inline-end;
+      margin-inline-end: var(--#{$prefix}breadcrumb-item-icon-margin-inline-end);
     }
 
     &:nth-of-type(2):before {

package/styles/scss/components/breadcrumbs/_breadcrumbs.variables.scss

@@ -8,7 +8,9 @@ $df-breadcrumb-item-display: none !default;
 $df-breadcrumb-icon-display: none !default;
 $df-breadcrumb-item-two-last-items-display: inline !default;
 
-$df-breadcrumb-item-icon-margin-inline-end: 0.125rem !default;
+$df-breadcrumb-item-icon-margin-inline-end: 0.25rem !default;
+$df-breadcrumb-item-icon-margin-inline-end-sm: 0.125rem !default;
+$df-breadcrumb-item-icon-margin-inline-end-lg: 0.5rem !default;
 
 $df-breadcrumb-icon-xs-display: inline !default;
 $df-breadcrumb-icon-color: shades-css-var('primary', 'inert-color') !default;