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

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,7 +31,7 @@ $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;
   }
 
@@ -55,14 +65,23 @@ $df-lightMappedColors: () !default;
     }
   }
 
+  $disabled-border-color: #{variable-switch-brand2023('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
+      );
     }
   }
 
@@ -78,7 +97,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);
@@ -169,7 +191,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;
       }
@@ -202,17 +236,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) {
@@ -230,6 +268,14 @@ $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;
+            }
+          }
         }
       }
 
@@ -237,8 +283,19 @@ $df-lightMappedColors: () !default;
       &.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);
         }
@@ -264,7 +321,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(
@@ -278,8 +335,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',
@@ -288,8 +349,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);
         }
       }
@@ -298,9 +359,9 @@ $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;
         }
@@ -368,7 +429,7 @@ $df-lightMappedColors: () !default;
   }
 
   //sizing
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @if $isBrand2023 {
     // TODO: when removing old branding move it to the .df-closable class and merge the padding
     &,
     &.df-closable {