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

package/styles/scss/_common.root.scss

@@ -24,9 +24,26 @@
 
   // Form
   --#{$prefix}form-valid-color-rgb: #{to-rgb($form-valid-color)};
-  --#{$prefix}form-invalid-color-rgb: #{to-rgb($form-invalid-color)};
-  --#{$prefix}form-warning-color: #{$df-form-feedback-warning-color};
-  --#{$prefix}form-warning-color-rgb: #{to-rgb($df-form-feedback-warning-color)};
+  --#{$prefix}form-invalid-border-color: #{variable-switch-brand2023(
+      'color-danger-alt-default-border',
+      $form-invalid-color
+    )};
+  --#{$prefix}form-invalid-color: #{variable-switch-brand2023(
+      'color-danger-alt-default-foreground',
+      $form-invalid-color
+    )};
+  --#{$prefix}form-invalid-color-rgb: #{variable-switch-brand2023(
+      'color-danger-alt-default-border-rgb',
+      to-rgb($form-invalid-color)
+    )};
+  --#{$prefix}form-warning-color: #{variable-switch-brand2023(
+      'color-warning-alt-default-foreground',
+      $df-form-feedback-warning-color
+    )};
+  --#{$prefix}form-warning-color-rgb: #{variable-switch-brand2023(
+      'color-warning-alt-default-foreground-rgb',
+      to-rgb($df-form-feedback-warning-color)
+    )};
   --#{$prefix}form-feedback-warning-color: #{$df-form-feedback-warning-color};
   --#{$prefix}form-feedback-help-warning-color: #{$df-form-feedback-help-warning-color};
   --#{$prefix}form-feedback-warning-icon: #{$df-form-feedback-warning-icon};

package/styles/scss/_common.scss

@@ -1,6 +1,6 @@
 .mandatory-indicator {
   // add
-  color: $df-mandatory-indicator-color;
+  color: #{variable-switch-brand2023('color-danger-alt-default-foreground', $df-mandatory-indicator-color)};
   font-weight: $df-mandatory-indicator-font-weight;
   margin-left: $df-mandatory-indicator-margin;
   margin-right: $df-mandatory-indicator-margin;

package/styles/scss/bootstrap/_utilities-override.scss

@@ -4,16 +4,22 @@
 $utilities: map.merge(
   $utilities,
   (
-    "swatch": (
+    'swatch': (
       property: background-color,
       class: swatch,
       values: $grays
     ),
-    "width": map.merge(
-      map.get($utilities, "width"), ( responsive: true )
-    ),
-    "height": map.merge(
-      map.get($utilities, "height"), ( responsive: true )
-    )
+    'width': map.merge(
+        map.get($utilities, 'width'),
+        (
+          responsive: true
+        )
+      ),
+    'height': map.merge(
+        map.get($utilities, 'height'),
+        (
+          responsive: true
+        )
+      )
   )
-);
+);

package/styles/scss/bootstrap/_variables.scss

@@ -707,7 +707,7 @@ $lights-mapping: (
   'bg-subtle-hover-color': var(--#{$prefix}light-50),
   'bg-subtle-active-color': var(--#{$prefix}light-100),
   'border-color': var(--#{$prefix}light-500),
-  'text-color': var(--#{$prefix}light-600),
+  'text-color': var(--#{$prefix}light-100),
   'text-hover-color': var(--#{$prefix}light-800),
   'text-active-color': var(--#{$prefix}light-900),
   'bg-hover-alt-color': var(--#{$prefix}light-50),
@@ -723,7 +723,7 @@ $whites-mapping: (
   'bg-subtle-hover-color': var(--#{$prefix}white-100),
   'bg-subtle-active-color': var(--#{$prefix}white-500),
   'border-color': var(--#{$prefix}white-50),
-  'text-color': var(--#{$prefix}white-600),
+  'text-color': var(--#{$prefix}white-50),
   'text-hover-color': var(--#{$prefix}white-800),
   'text-active-color': var(--#{$prefix}white-900),
   'bg-hover-alt-color': var(--#{$prefix}white-100),

package/styles/scss/components/alert/_alert.scss

@@ -105,23 +105,33 @@
       } @else {
         --#{$prefix}alert-border-color: #{shades-rgba-css-var-with-opacity($state, 'border-color')};
       }
-      --#{$prefix}alert-border-start-color: #{shades-css-var($state, 'inert-color')};
+      --#{$prefix}alert-border-start-color: #{shades-css-var-brand2023(
+          'color-' + $state + '-alt-default-border',
+          $state,
+          'inert-color'
+        )};
       --#{$prefix}alert-icon-color: #{shades-css-var($state, 'inert-color')};
     }
   }
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    &.alert-warning {
+      --#{$prefix}alert-icon-color: var(--#{$prefix}color-icon-warning-foreground);
+    }
+  }
   &.alert-tip {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       hr {
         border-top-color: shades-css-var('mystery', 'separator-color');
       }
+    } @else {
+      --#{$prefix}alert-color: #{$df-alert-tip-color};
+      --#{$prefix}alert-bg-color: #{$df-alert-tip-background};
+      --#{$prefix}alert-border-color: #{$df-alert-tip-border-color};
+      --#{$prefix}alert-border-start-color: #{$df-alert-tip-border-start-color};
+      --#{$prefix}alert-icon-font-weight: #{$df-icon-light-font-weight};
+      --#{$prefix}alert-icon-margin-start: #{$df-alert-tip-size-default-icon-margin-start};
+      --#{$prefix}alert-icon-color: #{$df-alert-tip-icon-color};
     }
-    --#{$prefix}alert-color: #{$df-alert-tip-color};
-    --#{$prefix}alert-bg-color: #{$df-alert-tip-background};
-    --#{$prefix}alert-border-color: #{$df-alert-tip-border-color};
-    --#{$prefix}alert-border-start-color: #{$df-alert-tip-border-start-color};
-    --#{$prefix}alert-icon-font-weight: #{$df-icon-light-font-weight};
-    --#{$prefix}alert-icon-margin-start: #{$df-alert-tip-size-default-icon-margin-start};
-    --#{$prefix}alert-icon-color: #{$df-alert-tip-icon-color};
   }
 
   // Alerts sizes
@@ -180,14 +190,16 @@
     @each $state, $value in $theme-colors {
       &.alert-#{$state} {
         --#{$prefix}alert-border-bottom-color: #{shades-css-var-brand2023(
-            'color-#{$state}-main-default-border',
+            'color-#{$state}-alt-default-border',
             $state,
             'border-color'
           )};
       }
     }
-    &.alert-tip {
-      --#{$prefix}alert-border-bottom-color: #{$df-alert-tip-border-start-color};
+    @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 {
+      &.alert-tip {
+        --#{$prefix}alert-border-bottom-color: #{$df-alert-tip-border-start-color};
+      }
     }
   }
 

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

@@ -1,12 +1,10 @@
 @use 'sass:meta';
 
-@mixin df-disable-badge($color, $bg-color, $changeBorder: false) {
+@mixin df-disable-badge($color, $bg-color, $border-color) {
   cursor: var(--#{$prefix}disabled-cursor);
   color: $color !important;
   background-color: $bg-color !important;
-  @if $changeBorder {
-    border-color: $color;
-  }
+  border-color: $border-color;
   &:focus-visible,
   &:focus,
   &:focus-within {

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,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
+      );
     }
   }
 
@@ -78,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);
@@ -169,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;
       }
@@ -202,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) {
@@ -230,6 +271,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 +286,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 +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(
@@ -278,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',
@@ -288,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);
         }
       }
@@ -298,9 +362,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 +432,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 {