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

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

@@ -1,7 +1,30 @@
+@use 'sass:meta';
 @use 'sass:map';
 @import 'badge.mixins';
 
+$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 meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  /* stylelint-disable-next-line scss/dollar-variable-default */
+  $df-solidMappedColors: map.set($df-solidMappedColors, 'white', 'neutral-alt');
+
+  /* stylelint-disable-next-line scss/dollar-variable-default */
+  $df-solidMappedColors: map.set($df-solidMappedColors, 'light', 'neutral');
+
+  /* stylelint-disable-next-line scss/dollar-variable-default */
+  $df-lightMappedColors: map.set($df-lightMappedColors, 'light', 'light');
+}
+
 %bg-badge-common {
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    background-color: var(--#{$prefix}badge-background-color) !important;
+  }
+
   &:not(.rounded-pill):not(.df-badge-dot) {
     &:not(.df-closable) {
       &:hover:not([disabled]):not(.disabled) {
@@ -22,6 +45,14 @@
       color: var(--#{$prefix}badge-hover-color);
       background-color: var(--#{$prefix}badge-hover-background-color);
     }
+
+    &:not(.disabled) {
+      button:active,
+      span[role='button']:active {
+        color: var(--#{$prefix}badge-active-color);
+        background-color: var(--#{$prefix}badge-active-background-color);
+      }
+    }
   }
 
   &[disabled],
@@ -63,7 +94,7 @@
   // interactive badges
   &:not(.rounded-pill):not(.df-badge-dot) {
     cursor: pointer;
-    align-items: stretch;
+
     &[disabled],
     &.disabled,
     &:has([disabled]),
@@ -72,7 +103,7 @@
     }
   }
 
-  &:focus,
+  &:focus-visible,
   &.focus {
     outline: $df-badge-button-focus-outline;
     box-shadow: var(--#{$prefix}badge-focus-box-shadow);
@@ -98,27 +129,79 @@
   }
 
   @each $color, $value in $utilities-bg-colors {
-    &.bg-#{$color} {
-      // in this case we also handle the .badge.bg-light
-      // TODO: Check if the tokens fixes the issue
-      --#{$prefix}body-bg: unset; // need it to fix the focus internal box-shadow color
-      --#{$prefix}badge-color: #{shades-css-var($color, 'bg-color', true)};
-      --#{$prefix}badge-hover-background-color: #{shades-css-var($color, 'bg-hover-color')};
-      --#{$prefix}badge-hover-color: #{shades-css-var($color, 'bg-hover-color', true)};
-      --#{$prefix}badge-active-background-color: #{shades-css-var($color, 'bg-active-color')};
-      --#{$prefix}badge-active-color: #{shades-css-var($color, 'bg-active-color', true)};
-      --#{$prefix}badge-dot-background-color: #{shades-css-var($color, 'bg-color')};
-      --#{$prefix}badge-disabled-color: var(--#{$prefix}disabled-color);
-      @extend %bg-badge-common;
+    $mappedColor: map.get($df-solidMappedColors, $color);
+    @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 or $color != 'light' {
+      &.bg-#{$color} {
+        // in this case we also handle the .badge.bg-light
+        // TODO: Check if the tokens fixes the issue
+        --#{$prefix}body-bg: unset; // need it to fix the focus internal box-shadow color
+        --#{$prefix}badge-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-default-foreground',
+            $color,
+            'bg-color',
+            true
+          )};
+        --#{$prefix}badge-background-color: var(--#{$prefix}badge-solid-color-#{$mappedColor}-default-background);
+        --#{$prefix}badge-hover-background-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-hovered-background',
+            $color,
+            'bg-hover-color'
+          )};
+        --#{$prefix}badge-hover-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-hovered-foreground',
+            $color,
+            'bg-hover-color',
+            true
+          )};
+        --#{$prefix}badge-active-background-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-pressed-background',
+            $color,
+            'bg-active-color'
+          )};
+        --#{$prefix}badge-active-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-pressed-foreground',
+            $color,
+            'bg-active-color',
+            true
+          )};
+        --#{$prefix}badge-dot-background-color: #{shades-css-var-brand2023(
+            'badge-solid-color-' + #{$mappedColor} + '-default-background',
+            $color,
+            'bg-color'
+          )};
+        --#{$prefix}badge-disabled-color: var(--#{$prefix}disabled-color);
+
+        @extend %bg-badge-common;
+      }
     }
 
     &.df-badge-outline-#{$color} {
-      --#{$prefix}badge-color: #{shades-css-var($color, 'text-color')};
+      --#{$prefix}badge-color: #{shades-css-var-brand2023(
+          'badge-outline-color-' + #{$color} + '-default-foreground',
+          $color,
+          'text-color'
+        )};
       --#{$prefix}badge-background-color: transparent;
-      --#{$prefix}badge-border-color: #{shades-css-var($color, 'border-color')};
-      --#{$prefix}badge-hover-background-color: #{shades-css-var($color, 'bg-hover-alt-color')};
-      --#{$prefix}badge-hover-color: #{shades-css-var($color, 'text-hover-color')};
-      --#{$prefix}badge-hover-border-color: #{shades-css-var($color, 'border-hover-color')};
+      --#{$prefix}badge-border-color: #{shades-css-var-brand2023(
+          'badge-outline-color-' + #{$color} + '-default-border',
+          $color,
+          'border-color'
+        )};
+      --#{$prefix}badge-hover-background-color: #{shades-css-var-brand2023(
+          'badge-outline-color-' + #{$color} + '-hovered-background',
+          $color,
+          'bg-hover-alt-color'
+        )};
+      --#{$prefix}badge-hover-color: #{shades-css-var-brand2023(
+          'badge-outline-color-' + #{$color} + '-hovered-foreground',
+          $color,
+          'text-hover-color'
+        )};
+      --#{$prefix}badge-hover-border-color: #{shades-css-var-brand2023(
+          'badge-outline-color-' + #{$color} + '-hovered-border',
+          $color,
+          'border-hover-color'
+        )};
       background-color: var(--#{$prefix}badge-background-color);
       color: var(--#{$prefix}badge-color);
       border: var(--#{$prefix}border-width) solid var(--#{$prefix}badge-border-color);
@@ -149,86 +232,191 @@
           }
         }
       }
+
       &[disabled],
       &.disabled,
       &:has([disabled]),
       &:has(.disabled) {
         @include df-disable-badge(var(--#{$prefix}disabled-color), var(--#{$prefix}badge-background-color), true);
+
         & > *:hover {
           cursor: var(--#{$prefix}disabled-cursor);
         }
       }
     }
 
-    &.bg-#{$color}-light {
+    $lightClassname: map.get($df-lightMappedColors, $color);
+    &.bg-#{$lightClassname} {
       --#{$prefix}body-bg: unset; // need it to fix the focus internal box-shadow color
-      --#{$prefix}badge-color: #{shades-css-var($color, 'text-light-color')};
-      --#{$prefix}badge-hover-background-color: #{shades-css-var($color, 'bg-light-hover-color')};
-      --#{$prefix}badge-hover-color: #{shades-css-var($color, 'text-light-hover-color')};
-      --#{$prefix}badge-active-background-color: #{shades-css-var($color, 'bg-light-active-color')};
-      --#{$prefix}badge-active-color: #{shades-css-var($color, 'bg-light-active-color', true)};
-      --#{$prefix}badge-dot-background-color: #{shades-css-var($color, 'bg-light-color')};
-      background-color: #{shades-css-var($color, 'bg-light-color')};
+      --#{$prefix}badge-background-color: var(--#{$prefix}badge-soft-color-#{$mappedColor}-default-background);
+      --#{$prefix}badge-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-default-foreground',
+          $color,
+          'text-light-color'
+        )};
+      --#{$prefix}badge-hover-background-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-hovered-background',
+          $color,
+          'bg-light-hover-color'
+        )};
+      --#{$prefix}badge-hover-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-hovered-foreground',
+          $color,
+          'text-light-hover-color'
+        )};
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        --#{$prefix}badge-hover-border-color: var(--#{$prefix}badge-soft-color-#{$mappedColor}-hovered-border);
+      }
+      --#{$prefix}badge-active-background-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-pressed-background',
+          $color,
+          'bg-light-active-color'
+        )};
+      --#{$prefix}badge-active-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-pressed-foreground',
+          $color,
+          'bg-light-active-color',
+          true
+        )};
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        --#{$prefix}badge-active-border-color: var(--#{$prefix}badge-soft-color-#{$color}-pressed-border);
+      }
+      --#{$prefix}badge-dot-background-color: #{shades-css-var-brand2023(
+          'badge-soft-color-' + #{$mappedColor} + '-default-background',
+          $color,
+          'bg-light-color'
+        )};
+      background-color: #{shades-css-var-brand2023('', $color, 'bg-light-color')};
+
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+        &:not(.df-badge-dot) {
+          --#{$prefix}badge-border-color: var(--#{$prefix}badge-soft-color-#{$mappedColor}-default-border);
+        }
+      }
+
+      border: var(--#{$prefix}border-width) solid var(--#{$prefix}badge-border-color);
       @extend %bg-badge-common;
     }
-  }
-}
 
-.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);
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      // Additional colors mix (light grey background with colored icon)
+      &.bg-light {
+        .df-badge-icon.text-#{$color} {
+          color: var(--#{$prefix}badge-solid-color-#{$color}-default-background) !important;
+        }
+      }
+    }
   }
 
-  *:focus,
-  *.focus {
-    outline: var(--#{$prefix}badge-interactive-close-outline);
-    box-shadow: var(--#{$prefix}badge-inner-elements-focus-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);
 
-  button {
-    background-color: inherit;
-    color: inherit;
+    &:has(button:focus-visible) {
+      outline: var(--#{$prefix}badge-interactive-close-outline);
+      box-shadow: var(--#{$prefix}badge-interactive-close-box-shadow);
+    }
 
-    &:hover {
-      cursor: pointer;
+    *:focus-visible,
+    *.focus {
+      outline: var(--#{$prefix}badge-interactive-close-outline);
+      box-shadow: var(--#{$prefix}badge-inner-elements-focus-box-shadow);
     }
 
-    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);
-  }
+    button {
+      background-color: inherit;
+      color: inherit;
+
+      &:hover {
+        cursor: pointer;
+      }
 
-  &: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);
+      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);
+      }
+    }
+
+    &.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 meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    // 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

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 .breadcrumb {
   --#{$prefix}breadcrumb-item-before-padding: #{$df-breadcrumb-item-before-padding};
   --#{$prefix}breadcrumb-item-active-font-weight: #{$df-breadcrumb-item-active-font-weight};
@@ -9,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 {
@@ -40,19 +45,17 @@
     }
 
     a {
-      &:focus-visible {
-        box-shadow: $df-breadcrumb-item-link-focus-box-shadow;
-        outline: $df-breadcrumb-item-link-outline;
-      }
-
-      &:hover:not([aria-disabled='true']) {
-        border-bottom-style: solid;
-        @include df-link-hover;
+      border-bottom: 0;
+      @if (not meta.variable-exists($name: 'df-enableBranding2023')) {
+        &:hover {
+          border-bottom: var(--#{$prefix}link-border-bottom);
+          border-bottom-width: var(--#{$prefix}link-hover-border-bottom-width);
+        }
       }
     }
 
     .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,14 +8,14 @@ $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;
 $df-breadcrumb-icon-margin: 0rem 0.5rem !default;
 $df-breadcrumb-icon-angle-left-content: '\f104' !default; // fa-angle-left
 $df-breadcrumb-icon-angle-right-content: '\f105' !default; // fa-angle-right
-$df-breadcrumb-item-link-focus-box-shadow: var(--#{$prefix}link-focus-box-shadow) !default;
-$df-breadcrumb-item-link-outline: none !default;
 
 $df-breadcrumb-separator-font: Font Awesome 6 Pro !default;