@design-factory/design-factory 17.1.0 → 18.0.1

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

@@ -1,4 +1,44 @@
 @use 'sass:map';
+@import 'badge.mixins';
+
+%bg-badge-common {
+  &:not(.rounded-pill):not(.df-badge-dot) {
+    &:not(.df-closable) {
+      &:hover:not([disabled]):not(.disabled) {
+        color: var(--#{$prefix}badge-hover-color);
+        background-color: var(--#{$prefix}badge-hover-background-color) !important;
+      }
+
+      &:active:not([disabled]):not(.disabled) {
+        color: var(--#{$prefix}badge-active-color);
+        background-color: var(--#{$prefix}badge-active-background-color) !important;
+      }
+    }
+  }
+
+  &.df-closable {
+    button:hover,
+    span[role='button']:hover {
+      color: var(--#{$prefix}badge-hover-color);
+      background-color: var(--#{$prefix}badge-hover-background-color);
+    }
+  }
+
+  &[disabled],
+  &.disabled,
+  &:has([disabled]),
+  &:has(.disabled) {
+    @include df-disable-badge(var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-bg-color));
+
+    & > *:hover {
+      @include df-disable-badge(var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-bg-color));
+    }
+  }
+
+  &.df-badge-dot::before {
+    background-color: var(--#{$prefix}badge-dot-background-color);
+  }
+}
 
 .badge {
   --#{$prefix}badge-focus-box-shadow: #{$df-badge-focus-box-shadow};
@@ -7,6 +47,8 @@
   --#{$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}badge-inner-elements-focus-box-shadow: #{$df-badge-inner-elements-focus-box-shadow};
   // override
   text-transform: var(--#{$prefix}badge-text-transform);
   display: inline-flex;
@@ -17,9 +59,17 @@
   &.df-badge-dot {
     cursor: text;
   }
+
   // interactive badges
   &:not(.rounded-pill):not(.df-badge-dot) {
     cursor: pointer;
+    align-items: stretch;
+    &[disabled],
+    &.disabled,
+    &:has([disabled]),
+    &:has(.disabled) {
+      cursor: var(--#{$prefix}disabled-cursor);
+    }
   }
 
   &:focus,
@@ -29,144 +79,146 @@
   }
 
   .df-badge-icon {
-    @include ltr {
-      margin-left: var(--#{$prefix}badge-icon-margin-start);
-      margin-right: var(--#{$prefix}badge-icon-margin-end);
-    }
-    @include rtl {
-      margin-left: var(--#{$prefix}badge-icon-margin-end);
-      margin-right: var(--#{$prefix}badge-icon-margin-start);
-    }
+    margin-inline-start: var(--#{$prefix}badge-icon-margin-start);
+    margin-inline-end: var(--#{$prefix}badge-icon-margin-end);
   }
 
   &.df-badge-dot {
     background-color: transparent !important;
     color: inherit !important;
+
     &::before {
       content: '';
       height: var(--#{$prefix}badge-dot-font-size);
       width: var(--#{$prefix}badge-dot-font-size);
       border-radius: 50%;
       display: inline-block;
-      @include ltr {
-        margin-right: var(--#{$prefix}badge-dot-margin-end);
-      }
-      @include rtl {
-        margin-left: var(--#{$prefix}badge-dot-margin-end);
-      }
+      margin-inline-end: var(--#{$prefix}badge-dot-margin-end);
     }
   }
 
   @each $color, $value in $utilities-bg-colors {
     &.bg-#{$color} {
+      --#{$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')};
-      &:not(.rounded-pill):not(.df-badge-dot) {
-        &:not(.df-closable) {
-          &:hover {
-              color: var(--#{$prefix}badge-hover-color);
-              background-color: var(--#{$prefix}badge-hover-background-color) !important;
-            }
-          &:active {
-            color: var(--#{$prefix}badge-active-color);
-            background-color: var(--#{$prefix}badge-active-background-color) !important;
-          }
+      --#{$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-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')};
+      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);
         }
       }
-      &.df-closable { 
-        button:hover, span[role='button']:hover {
-          color: var(--#{$prefix}badge-hover-color);
-          background-color: var(--#{$prefix}badge-hover-background-color);
+
+      &:not([disabled]):not(.disabled) {
+        button,
+        span[role='button'],
+        &[role='button'] {
+          &:hover:not([disabled]):not(.disabled) {
+            color: var(--#{$prefix}badge-hover-color);
+            background-color: var(
+              --#{$prefix}badge-hover-background-color
+            ) !important; // overriding the bg-#{$color} utility background-color
+          }
         }
       }
-      &.df-badge-dot::before {
-        background-color: var(--#{$prefix}badge-dot-background-color);
-      }
-      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
-        &:focus {
-          --#{$prefix}box-shadow-color: #{shades-css-var($color, 'bg-color')};
-          &:hover:not(:active) {
-            --#{$prefix}box-shadow-color: #{shades-css-var($color, 'bg-hover-color')};
-          }
-          &:active {
-            --#{$prefix}box-shadow-color: #{shades-css-var($color, 'bg-active-color')};
-          }
+      &[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 {
+      --#{$prefix}body-bg: unset; // need it to fix the focus internal box-shadow color
+      --#{$prefix}badge-color: #{shades-css-var($color, 'bg-light-color', true)};
+      --#{$prefix}badge-hover-background-color: #{shades-css-var($color, 'bg-light-hover-color')};
+      --#{$prefix}badge-hover-color: #{shades-css-var($color, 'bg-light-hover-color', true)};
+      --#{$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')};
+      @extend %bg-badge-common;
+    }
   }
 }
 
-.badge.df-closable { // badge interactive closable
+.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: #{$btn-focus-box-shadow};
+  --#{$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: var(--#{$prefix}badge-interactive-container-padding-y) var(--#{$prefix}badge-interactive-container-padding-end) var(--#{$prefix}badge-interactive-container-padding-y) var(--#{$prefix}badge-interactive-container-padding-start);
+  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);
+  }
+
+  *:focus,
+  *.focus {
+    outline: var(--#{$prefix}badge-interactive-close-outline);
+    box-shadow: var(--#{$prefix}badge-inner-elements-focus-box-shadow);
+  }
 
   button {
     background-color: inherit;
     color: inherit;
-    
+
     &:hover {
       cursor: pointer;
     }
+
     border: var(--#{$prefix}badge-interactive-close-border);
     padding: var(--#{$prefix}badge-interactive-close-padding);
-
-    &:focus,
-    &.focus {
-      outline: var(--#{$prefix}badge-interactive-close-outline);
-      box-shadow: var(--#{$prefix}badge-interactive-close-box-shadow);
-    }
-    @include ltr {
-      border-top-right-radius: var(--#{$prefix}badge-interactive-close-end-radius);
-      border-bottom-right-radius: var(--#{$prefix}badge-interactive-close-end-radius);
-    }
-    @include rtl {
-      border-top-left-radius: var(--#{$prefix}badge-interactive-close-end-radius);
-      border-bottom-left-radius: var(--#{$prefix}badge-interactive-close-end-radius);
-    }
+    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
+  &: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
-      @include ltr {
-        padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-interactive-button-padding-end) var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
-      }
-      @include rtl {
-        padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x) var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-interactive-button-padding-end);
-      }
-      @include ltr {
-        border-top-left-radius: var(--#{$prefix}badge-interactive-button-start-radius);
-        border-bottom-left-radius: var(--#{$prefix}badge-interactive-button-start-radius);
-      }
-      @include rtl {
-        border-top-right-radius: var(--#{$prefix}badge-interactive-button-start-radius);
-        border-bottom-right-radius: var(--#{$prefix}badge-interactive-button-start-radius);
-      }
+      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);
-    @include rtl {
-      --#{$prefix}badge-interactive-container-padding-start: 0;
-      --#{$prefix}badge-interactive-container-padding-end: var(--#{$prefix}badge-padding-x);
-    }
   }
 }
-

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

@@ -14,3 +14,6 @@ $df-badge-icon-margin-start: -0.17em !default;
 $df-badge-icon-margin-end: 0.3em !default;
 $df-badge-button-focus-outline: var(--#{$prefix}focus-outline) !default;
 $df-badge-focus-box-shadow: $btn-focus-box-shadow !default;
+$df-badge-box-shadow-color: var(--#{$prefix}box-shadow-color) !default;
+
+$df-badge-inner-elements-focus-box-shadow: none !default;

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

@@ -1,9 +1,11 @@
 @use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
 
 @mixin df-bg-variant($parent, $color, $colorName) {
   a#{$parent},
   button#{$parent} {
-    @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'bg-color', true)};
       &:focus {
         background-color: shades-css-var($colorName, 'bg-color') !important;
@@ -24,3 +26,14 @@
     }
   }
 }
+
+@mixin df-bg-color-css-var($utility) {
+  @if map.has-key($utility, class) and map.get($utility, class) == 'bg' {
+    $values: map.get($utility, values);
+    @each $color, $value in $values {
+      .bg-#{$color} {
+        --#{$prefix}body-bg: #{$value};
+      }
+    }
+  }
+}

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

@@ -14,3 +14,7 @@
 @each $color, $value in $colors {
   @include df-bg-variant('.bg-#{$color}', $value, $color);
 }
+// We need this mixin to achieve the outline focus in buttons on different backgrounds
+@each $key, $utility in $utilities {
+  @include df-bg-color-css-var($utility);
+}

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

@@ -12,16 +12,25 @@
 
   &.breadcrumb-sm {
     --#{$prefix}breadcrumb-font-size: #{$font-size-sm};
+    --#{$prefix}breadcrumb-item-before-padding: #{$df-breadcrumb-item-before-padding-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};
   }
 
   .breadcrumb-item {
+    & + .breadcrumb-item + .breadcrumb-item:before {
+      @include rtl {
+        content: var(--#{prefix}breadcrumb-divider, $breadcrumb-divider-flipped);
+      }
+    }
+
     &:before {
       padding: var(--#{$prefix}breadcrumb-item-before-padding);
+      font-family: $df-breadcrumb-separator-font;
     }
 
     @include rtl {
@@ -31,10 +40,19 @@
     }
 
     a {
-      &:focus {
+      &: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;
+      }
+    }
+
+    .df-breadcrumb-item-icon {
+      margin-inline-end: $df-breadcrumb-item-icon-margin-inline-end;
     }
 
     &:nth-of-type(2):before {
@@ -57,21 +75,25 @@
     // hidden by default
     display: var(--#{$prefix}breadcrumb-icon-display);
     color: var(--#{$prefix}breadcrumb-icon-color);
-    margin: var(--#{$prefix}breadcrumb-icon-margin);
 
-    &:before {
-        // custom df class for breadcrumb icon
-        // extends icon-angle-(left or right) class depending on the direction
-        @extend %df-icon-style;
-    
-        @include ltr {
-          // content cannot be a CSS variable
-          content: $df-breadcrumb-icon-angle-left-content;
-        }
-    
-        @include rtl {
-          content: $df-breadcrumb-icon-angle-right-content;
-        }
+    &:before,
+    &:after {
+      margin: var(--#{$prefix}breadcrumb-icon-margin);
+      // custom df class for breadcrumb icon
+      // extends icon-angle-(left or right) class depending on the direction
+      @extend %df-icon-style;
+    }
+
+    @include ltr {
+      &:before {
+        // content cannot be a CSS variable
+        content: $df-breadcrumb-icon-angle-left-content;
+      }
+    }
+    @include rtl {
+      &:after {
+        content: $df-breadcrumb-icon-angle-right-content;
+      }
     }
   }
 
@@ -83,9 +105,8 @@
         display: var(--#{$prefix}breadcrumb-item-display);
       }
 
-      &:nth-last-of-type(2),
       &:nth-last-of-type(1) {
-        // two last items are displayed
+        // only last items is displayed
         display: var(--#{$prefix}breadcrumb-item-two-last-items-display);
       }
 

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

@@ -1,4 +1,6 @@
 $df-breadcrumb-item-before-padding: 0rem 0.5rem !default;
+$df-breadcrumb-item-before-padding-sm: 0rem 0.5rem !default;
+$df-breadcrumb-item-before-padding-lg: 0rem 0.5rem !default;
 $df-breadcrumb-item-before-content: none !default;
 $df-breadcrumb-item-active-font-weight: 500 !default;
 $df-breadcrumb-item-before-font-weight: normal !default;
@@ -6,10 +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-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: '\e92a' !default; // icon-angle-left
-$df-breadcrumb-icon-angle-right-content: '\e92b' !default; // icon-angle-right
+$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;