@design-factory/design-factory 15.2.3 → 16.0.1

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

@@ -1,113 +1,41 @@
 @use 'sass:map';
 
-div.badge {
-  padding-top: 0; // forced override for complex badge (badge with interactions)
-  padding-bottom: 0; // forced override for complex badge (badge with interactions)
-
-  &.df-closable {
-    // add
-    @include ltr {
-      padding-right: 0;
-    }
-    @include rtl {
-      padding-left: 0;
-    }
-
-    button {
-      background-color: inherit;
-      color: inherit;
-      
-      &:hover {
-        cursor: pointer;
-      }
-      border: $df-badge-close-border;
-      padding: $df-badge-close-padding;
-
-      span {
-        font-size: $df-badge-close-font-size;
-        vertical-align: inherit;
-      }
-
-      &:focus,
-      &.focus {
-        outline: 0;
-        box-shadow: $btn-focus-box-shadow;
-      }
-    }
-  }
-
-  &:not(.rounded-pill) {
-    &.df-closable {
-      // add
-      display: inline-flex;
-      padding-left: 0;
-
-      span[role='button'] {
-        padding: $badge-padding-y $df-badge-interactive-close-padding-left $badge-padding-y $badge-padding-x;
-        @include ltr {
-          border-top-left-radius: $badge-border-radius;
-          border-bottom-left-radius: $badge-border-radius;
-        }
-        @include rtl {
-          border-top-right-radius: $badge-border-radius;
-          border-bottom-right-radius: $badge-border-radius;
-        }
-      }
-      button {
-        @include ltr {
-          border-top-right-radius: $badge-border-radius;
-          border-bottom-right-radius: $badge-border-radius;
-        }
-        @include rtl {
-          border-top-left-radius: $badge-border-radius;
-          border-bottom-left-radius: $badge-border-radius;
-        }
-      }
-    }
-  }
-
-  &.rounded-pill {
-    &.df-closable {
-      // add
-      button {
-        @include ltr {
-          border-top-right-radius: $border-radius-pill;
-          border-bottom-right-radius: $border-radius-pill;
-        }
-        @include rtl {
-          border-top-left-radius: $border-radius-pill;
-          border-bottom-left-radius: $border-radius-pill;
-        }
-      }
-    }
-  }
-}
-
 .badge {
+  --#{$prefix}badge-focus-box-shadow: #{$df-badge-focus-box-shadow};
+  --#{$prefix}badge-text-transform: uppercase;
+  --#{$prefix}badge-icon-margin-start: #{$df-badge-icon-margin-start};
+  --#{$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};
   // override
-  text-transform: uppercase;
+  text-transform: var(--#{$prefix}badge-text-transform);
+  display: inline-flex;
+  align-items: center;
+
+  // not interactive badges
   &.rounded-pill,
   &.df-badge-dot {
     cursor: text;
   }
+  // interactive badges
   &:not(.rounded-pill):not(.df-badge-dot) {
     cursor: pointer;
+  }
 
-    &:focus,
-    &.focus {
-      outline: 0;
-      box-shadow: $btn-focus-box-shadow;
-    }
+  &:focus,
+  &.focus {
+    outline: $df-badge-button-focus-outline;
+    box-shadow: var(--#{$prefix}badge-focus-box-shadow);
   }
 
   .df-badge-icon {
     @include ltr {
-      margin-left: $df-badge-icon-margin-left;
-      margin-right: $df-badge-icon-margin-right;
+      margin-left: var(--#{$prefix}badge-icon-margin-start);
+      margin-right: var(--#{$prefix}badge-icon-margin-end);
     }
     @include rtl {
-      margin-left: $df-badge-icon-margin-right;
-      margin-right: $df-badge-icon-margin-left;
+      margin-left: var(--#{$prefix}badge-icon-margin-end);
+      margin-right: var(--#{$prefix}badge-icon-margin-start);
     }
   }
 
@@ -116,45 +44,129 @@ div.badge {
     color: inherit !important;
     &::before {
       content: '';
-      height: $df-df-badge-dot-font-size;
-      width: $df-df-badge-dot-font-size;
+      height: var(--#{$prefix}badge-dot-font-size);
+      width: var(--#{$prefix}badge-dot-font-size);
       border-radius: 50%;
       display: inline-block;
       @include ltr {
-        margin-right: $df-df-badge-dot-margin-right;
+        margin-right: var(--#{$prefix}badge-dot-margin-end);
       }
       @include rtl {
-        margin-left: $df-df-badge-dot-margin-right;
+        margin-left: var(--#{$prefix}badge-dot-margin-end);
       }
     }
   }
 
   @each $color, $value in $utilities-bg-colors {
-    $hexaValue: map.get($theme-colors, $color);
-    @if not $hexaValue {
-      $hexaValue: map.get($colors, $color);
-    }
-    @if $hexaValue {
-      $hover-background-color: df-getBGHoverColor($color);
-      $hover-color-value: color-contrast($hover-background-color);
-      &.bg-#{$color} {
-        color: color-contrast($hexaValue);
-        &:not(.rounded-pill):not(.df-badge-dot):hover {
-          &:not(.df-closable) {
-            color: $hover-color-value;
-            background-color: $hover-background-color !important;
+    &.bg-#{$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;
           }
         }
-        &.df-closable { 
-          button:hover, span[role='button']:hover {
-            color: $hover-color-value;
-            background-color: $hover-background-color;
-          }
+      }
+      &.df-closable { 
+        button:hover, span[role='button']:hover {
+          color: var(--#{$prefix}badge-hover-color);
+          background-color: var(--#{$prefix}badge-hover-background-color);
         }
-        &.df-badge-dot::before {
-          background-color: $value;
+      }
+      &.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')};
+          }
         }
       }
     }
   }
-}
+}
+
+.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-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);
+
+  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);
+    }
+  }
+
+  &: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);
+      }
+    }
+  }
+
+  &.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

@@ -1,10 +1,16 @@
 // Closable feature
-$df-badge-close-font-size: $badge-font-size !default;
-$df-badge-close-border: none !default;
-$df-badge-close-padding: $badge-padding-y !default;
-$df-badge-interactive-close-padding-left: 0.38em !default;
+// close button font-size should not be linked to badge font-size as when we change
+// the badge font size the close button already evolve due to the em unit
+$df-badge-interactive-close-font-size: 0.75em !default;
+$df-badge-interactive-close-border: none !default;
+// We could adjust the padding start and padding-y to make the close button bigger or smaller
+$df-badge-interactive-close-padding: var(--#{$prefix}badge-padding-y) !default;
+// We want to put the same padding as top and bottom between the text the the close button
+$df-badge-interactive-button-padding-end: $badge-padding-y !default;
 
-$df-df-badge-dot-font-size: 0.8em !default;
-$df-df-badge-dot-margin-right: 0.38em !default;
-$df-badge-icon-margin-left: -0.17em !default;
-$df-badge-icon-margin-right: 0.3em !default;
+$df-badge-dot-font-size: 0.8em !default;
+$df-badge-dot-margin-end: 0.38em !default;
+$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;

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

@@ -1,11 +1,26 @@
 @use 'sass:color';
 
-@mixin df-bg-variant($parent, $color) {
+@mixin df-bg-variant($parent, $color, $colorName) {
   a#{$parent},
   button#{$parent} {
-    &:hover,
-    &:focus {
-      background-color: color.adjust($color, $lightness: -10%) !important;
+    @if 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;
+      }
+      &:hover {
+        --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'bg-hover-color', true)};
+        background-color: shades-css-var($colorName, 'bg-hover-color') !important;
+      }
+      &:active {
+        --#{$prefix}box-shadow-color: #{shades-css-var($colorName, 'bg-active-color', true)};
+        background-color: shades-css-var($colorName, 'bg-active-color') !important;
+      }
+    } @else {
+      &:hover,
+      &:focus {
+        background-color: color.adjust($color, $lightness: -10%) !important;
+      }
     }
   }
 }

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

@@ -8,11 +8,9 @@
   }
 }
 
+// TODO see how we can remove this because it was removed from bootstrap
+// Maybe generate the classes for the others colors see _maps.scss in bootstrap
+// to know what is already generated
 @each $color, $value in $colors {
-  @include df-bg-variant('.bg-#{$color}', $value);
-}
-
-:root {
-  --#{$variable-prefix}dark-primary: #{$dark-primary};
-  --#{$variable-prefix}yellow-rgb: #{to-rgb($yellow)};
+  @include df-bg-variant('.bg-#{$color}', $value, $color);
 }

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

@@ -62,13 +62,7 @@ $df-colors-transformed: df-transform-loop(
   $df-active-transform-param
 );
 
-// init specific variables for dark-colors. For backward compatibility
 // stylelint-disable-next-line scss/dollar-variable-pattern
-$dark-primary: map.get(
-  $df-colors-transformed,
-  $df-active-transform + '-' + $df-active-transform-param + '-primary'
-) !default;
-
 $df-bg-active-transform: 'mix' !default;
 $df-bg-active-transform-param1: $white !default;
 $df-bg-active-transform-param2: 15% !default;
@@ -141,7 +135,7 @@ $df-colors-transformed: df-transform-loop(
 // stylelint-disable-next-line scss/dollar-variable-pattern
 $gradients: () !default;
 // stylelint-disable-next-line
-$gradients: map-merge(
+$gradients: map.merge(
   (
     'gradient-blue': (
       'from': $blue,

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

@@ -0,0 +1,28 @@
+// stylelint-disable scss/dollar-variable-pattern
+$shade-colors-rgb: map-loop($shade-colors, to-rgb, "$value") !default;
+$shade-colors-text: map-loop($shade-colors, color-contrast, "$value") !default;
+$shade-colors-text-rgb: map-loop($shade-colors-text, to-rgb, "$value") !default;
+
+#{$df-css-namespace-selector} {
+  --#{$prefix}dark-primary: #{$dark-primary};
+  --#{$prefix}yellow-rgb: #{to-rgb($yellow)};
+  --#{$prefix}dark-primary-rgb: #{to-rgb($dark-primary)};
+  --#{$prefix}white-color: #{color-contrast($white)};
+  --#{$prefix}black-color: #{color-contrast($black)};
+
+  @each $color, $value in $shade-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $shade-colors-rgb {
+    --#{$prefix}#{$color}-rgb: #{$value};
+  }
+
+  @each $color, $value in $shade-colors-text {
+    --#{$prefix}#{$color}-color: #{$value};
+  }
+
+  @each $color, $value in $shade-colors-text-rgb {
+    --#{$prefix}#{$color}-color-rgb: #{$value};
+  }
+}

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

@@ -1,91 +1,103 @@
 .breadcrumb {
+  --#{$prefix}breadcrumb-item-before-padding: #{$df-breadcrumb-item-before-padding};
+  --#{$prefix}breadcrumb-item-active-font-weight: #{$df-breadcrumb-item-active-font-weight};
+  --#{$prefix}breadcrumb-item-before-font-weight: #{$df-breadcrumb-item-before-font-weight};
+  --#{$prefix}breadcrumb-item-display: #{$df-breadcrumb-item-display};
+  --#{$prefix}breadcrumb-icon-display: #{$df-breadcrumb-icon-display};
+  --#{$prefix}breadcrumb-item-two-last-items-display: #{$df-breadcrumb-item-two-last-items-display};
+  --#{$prefix}breadcrumb-icon-color: #{$df-breadcrumb-icon-color};
+  --#{$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};
 
   &.breadcrumb-sm {
-    font-size: $font-size-sm;
+    --#{$prefix}breadcrumb-font-size: #{$font-size-sm};
   }
 
   &.breadcrumb-lg {
-    font-size: $font-size-lg;
+    // todo create a css variable for body-font-size-lg and sm
+    --#{$prefix}breadcrumb-font-size: #{$font-size-lg};
   }
-}
-
-.breadcrumb-item {
-  @include ltr {
-    padding: $df-breadcrumb-item-padding;
 
+  .breadcrumb-item {
     &:before {
-      padding: $df-breadcrumb-item-before-padding;
+      padding: var(--#{$prefix}breadcrumb-item-before-padding);
     }
-  }
 
-  @include rtl {
-    padding: $df-breadcrumb-item-padding;
-
-    &:before {
-      float: right;
-      padding: $df-breadcrumb-item-before-padding;
+    @include rtl {
+      &:before {
+        float: right;
+      }
     }
-  }
-
-  &:nth-of-type(2):before {
-    // first item after arrow should not have slash char before text
-    content: $df-breadcrumb-item-before-content;
-  }
-
-  &.active {
-    // active item in bold
-    font-weight: $df-breadcrumb-item-active-font-weight;
-  }
 
-  &.active:before {
-    // no bold for the slash before active item
-    font-weight: $df-breadcrumb-item-normal-font-weight;
-  }
-}
+    a {
+      &:focus {
+        box-shadow: $df-breadcrumb-item-link-focus-box-shadow;
+        outline: $df-breadcrumb-item-link-outline;
+      }
+    }
 
-.df-breadcrumb-icon {
-  // hide arrow item
-  display: $df-breadcrumb-item-display;
-}
+    &:nth-of-type(2):before {
+      // first item after arrow should not have slash char before text
+      content: $df-breadcrumb-item-before-content;
+    }
 
-.df-breadcrumb-icon:before {
-  // custom df class for breadcrumb icon
-  // extends icon-angle-(left or right) class depending on the direction
-  @extend %df-icon-style;
+    &.active {
+      // active item in bold
+      font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
+    }
 
-  @include ltr {
-    content: $df-breadcrumb-icon-angle-left-content;
+    &.active:before {
+      // no bold for the slash before active item
+      font-weight: var(--#{$prefix}breadcrumb-item-before-font-weight);
+    }
   }
 
-  @include rtl {
-    content: $df-breadcrumb-icon-angle-right-content;
-  }
-}
+  .df-breadcrumb-icon {
+    // hidden by default
+    display: var(--#{$prefix}breadcrumb-icon-display);
+    color: var(--#{$prefix}breadcrumb-icon-color);
+    margin: var(--#{$prefix}breadcrumb-icon-margin);
 
-// Mobile breakpoint
-@include media-breakpoint-only(xs) {
-  .breadcrumb-item {
-    &:not(:nth-of-type(1)) {
-      // items are hidden
-      display: $df-breadcrumb-item-display;
+    &: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;
+        }
     }
+  }
 
-    &:nth-last-of-type(2),
-    &:nth-last-of-type(1) {
-      // two last items are displayed
-      display: $df-breadcrumb-item-two-last-items-display;
+  // Mobile breakpoint
+  @include media-breakpoint-only(xs) {
+    .breadcrumb-item {
+      &:not(:nth-of-type(1)) {
+        // items are hidden
+        display: var(--#{$prefix}breadcrumb-item-display);
+      }
+
+      &:nth-last-of-type(2),
+      &:nth-last-of-type(1) {
+        // two last items are displayed
+        display: var(--#{$prefix}breadcrumb-item-two-last-items-display);
+      }
+
+      &:nth-last-of-type(2):before {
+        // first item after arrow should not have slash char before text
+        content: $df-breadcrumb-item-before-content;
+      }
     }
 
-    &:nth-last-of-type(2):before {
-      // first item after arrow should not have slash char before text
-      content: $df-breadcrumb-item-before-content;
+    .df-breadcrumb-icon {
+      // arrow displayed
+      --#{$prefix}breadcrumb-icon-display: #{$df-breadcrumb-icon-xs-display};
     }
   }
-
-  .df-breadcrumb-icon {
-    // arrow displayed
-    display: $df-breadcrumb-icon-display;
-    color: $df-breadcrumb-icon-color;
-    margin: $df-breadcrumb-icon-margin;
-  }
 }

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

@@ -1,13 +1,15 @@
-$df-breadcrumb-item-padding: 0rem !default;
 $df-breadcrumb-item-before-padding: 0rem 0.5rem !default;
 $df-breadcrumb-item-before-content: none !default;
 $df-breadcrumb-item-active-font-weight: 500 !default;
-$df-breadcrumb-item-normal-font-weight: normal !default;
+$df-breadcrumb-item-before-font-weight: normal !default;
 $df-breadcrumb-item-display: none !default;
+$df-breadcrumb-icon-display: none !default;
 $df-breadcrumb-item-two-last-items-display: inline !default;
 
-$df-breadcrumb-icon-display: inline !default;
-$df-breadcrumb-icon-color: $primary !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-item-link-focus-box-shadow: var(--#{$prefix}link-focus-box-shadow) !default;
+$df-breadcrumb-item-link-outline: none !default;