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

package/styles/scss/components/button/_button.scss

@@ -1,6 +1,25 @@
 @use 'sass:meta';
+@use 'sass:map';
 @import 'button.utils';
 
+// stylelint-disable scss/dollar-variable-pattern, scss/dollar-variable-default
+$isBrand2023: meta.variable-exists(
+    $name: 'df-enableBranding2023'
+  )
+  and $df-enableBranding2023;
+
+$mapped-theme-colors: ();
+@each $color, $value in $theme-colors {
+  $mapped-theme-colors: map.set($mapped-theme-colors, $color, $color);
+}
+@if ($isBrand2023) {
+  $mapped-theme-colors: map.set($mapped-theme-colors, 'info', 'primary');
+  $mapped-theme-colors: map.remove($mapped-theme-colors, 'secondary');
+  $mapped-theme-colors: map.remove($mapped-theme-colors, 'light');
+  $mapped-theme-colors: map.remove($mapped-theme-colors, 'dark');
+}
+// stylelint-enable scss/dollar-variable-pattern, scss/dollar-variable-default
+
 .btn {
   // DF variables
   --#{$prefix}btn-cursor-disabled: #{$df-btn-cursor-disabled};
@@ -14,7 +33,7 @@
   --#{$prefix}box-shadow-color: #{$df-btn-focus-box-shadow-color};
   --#{$prefix}btn-focus-box-shadow: #{$df-btn-focus-box-shadow}; // override BS
   --#{$prefix}btn-bg: #{$df-btn-bg-color};
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @if $isBrand2023 {
     --#{$prefix}btn-border-radius: var(--#{$prefix}button-borderRadius-main-medium);
   }
 
@@ -22,7 +41,7 @@
   align-items: center;
   justify-content: center;
 
-  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  @if $isBrand2023 {
     &.btn-sm {
       --#{$prefix}btn-border-radius: var(--#{$prefix}button-borderRadius-main-small);
     }
@@ -82,6 +101,8 @@
     pointer-events: none;
   }
 
+  //TODO: delete brand2023 => needed only for old branding
+  //TODO: remember to delete all usages
   &.df-btn-bg-white:not(:hover):not(:active) {
     background-color: $df-btn-bg-color-white;
   }
@@ -89,6 +110,14 @@
 
 .btn-close {
   --#{$prefix}box-shadow-width: #{$df-btn-close-focus-shadow-width};
+  @if $isBrand2023 {
+    &:hover {
+      background-color: var(--#{$prefix}button-text-basic-color-neutral-hovered-background);
+    }
+    &:active {
+      background-color: var(--#{$prefix}button-text-basic-color-neutral-pressed-background);
+    }
+  }
 }
 
 .show > .btn:not(:disabled):not(.disabled).dropdown-toggle {
@@ -136,18 +165,20 @@
 }
 
 .btn-check {
-  &:checked {
-    + .btn:hover {
-      --#{$prefix}btn-active-bg: #{shades-css-var-brand2023(
-          'button-solid-basic-color-primary-hovered-background',
-          'primary',
-          'bg-hover-color'
-        )};
-      --#{$prefix}btn-active-border-color: #{shades-css-var-brand2023(
-          'button-solid-basic-color-primary-hovered-background',
-          'primary',
-          'bg-hover-color'
-        )};
+  @if not $isBrand2023 {
+    &:checked {
+      + .btn:hover {
+        --#{$prefix}btn-active-bg: #{shades-css-var-brand2023(
+            'button-solid-basic-color-primary-hovered-background',
+            'primary',
+            'bg-hover-color'
+          )};
+        --#{$prefix}btn-active-border-color: #{shades-css-var-brand2023(
+            'button-solid-basic-color-primary-hovered-background',
+            'primary',
+            'bg-hover-color'
+          )};
+      }
     }
   }
 
@@ -304,43 +335,64 @@
 }
 
 // Modify actual button from bootstrap
-@each $color, $value in $theme-colors {
+@each $colorClass, $color in $mapped-theme-colors {
   $bgHoverColor: shades-css-var-brand2023(
-    'button-solid-basic-color-' + #{$color} + '-hovered-background',
+    varWithDefault(
+      'button-solid-basic-color-' + #{$color} + '-hovered-background',
+      'color-' + #{$color} + '-main-hovered-background'
+    ),
     $color,
     'bg-hover-color'
   );
   $bgActiveColor: shades-css-var-brand2023(
-    'button-solid-basic-color-' + #{$color} + '-pressed-background',
+    varWithDefault(
+      'button-solid-basic-color-' + #{$color} + '-pressed-background',
+      'color-' + #{$color} + '-main-pressed-background'
+    ),
     $color,
     'bg-active-color'
   );
   $bgFocusOnlyColor: shades-css-var-brand2023(
-    'button-solid-basic-color-' + #{$color} + '-default-background',
+    varWithDefault(
+      'button-solid-basic-color-' + #{$color} + '-default-background',
+      'color-' + #{$color} + '-main-default-background'
+    ),
     $color,
     'bg-color'
   );
 
-  .btn-#{$color} {
+  .btn-#{$colorClass} {
     // stylelint-disable custom-property-no-missing-var-function
     --#{$prefix}btn-color: #{shades-css-var-brand2023(
-        'button-solid-basic-color-' + #{$color} + '-default-foreground',
+        varWithDefault(
+          'button-solid-basic-color-' + #{$color} + '-default-foreground',
+          'color-' + #{$color} + '-main-default-foreground'
+        ),
         $color,
         'bg-color',
         true
       )};
     --#{$prefix}btn-bg: #{shades-css-var-brand2023(
-        'button-solid-basic-color-' + #{$color} + '-default-background',
+        varWithDefault(
+          'button-solid-basic-color-' + #{$color} + '-default-background',
+          'color-' + #{$color} + '-main-default-background'
+        ),
         $color,
         'bg-color'
       )};
     --#{$prefix}btn-border-color: #{shades-css-var-brand2023(
-        'button-solid-basic-color-' + #{$color} + '-default-border',
+        varWithDefault(
+          'button-solid-basic-color-' + #{$color} + '-default-border',
+          'color-' + #{$color} + '-main-default-border'
+        ),
         $color,
         'bg-color'
       )};
     --#{$prefix}btn-hover-color: #{shades-css-var-brand2023(
-        'button-solid-basic-color-' + #{$color} + '-hovered-foreground',
+        varWithDefault(
+          'button-solid-basic-color-' + #{$color} + '-hovered-foreground',
+          'color-' + #{$color} + '-main-hovered-foreground'
+        ),
         $color,
         'bg-hover-color',
         true
@@ -348,18 +400,37 @@
     --#{$prefix}btn-hover-bg: #{$bgHoverColor};
     --#{$prefix}btn-hover-border-color: #{$bgHoverColor}; // Should we use a border color mapping here ?
     --#{$prefix}btn-active-color: #{shades-css-var-brand2023(
-        'button-solid-basic-color-' + #{$color} + '-pressed-foreground',
+        varWithDefault(
+          'button-solid-basic-color-' + #{$color} + '-pressed-foreground',
+          'color-' + #{$color} + '-main-pressed-foreground'
+        ),
         $color,
         'bg-active-color',
         true
       )};
     --#{$prefix}btn-active-bg: #{$bgActiveColor};
     --#{$prefix}btn-active-border-color: #{$bgActiveColor};
-    --#{$prefix}btn-disabled-color: #{$df-btn-disabled-text-color};
-    --#{$prefix}btn-disabled-bg: #{$df-btn-disabled-bg-color};
-    --#{$prefix}btn-disabled-border-color: #{$df-btn-disabled-border-color};
+
+    --#{$prefix}btn-disabled-color: #{variable-switch-brand2023(
+        'button-solid-basic-color-disabled-foreground',
+        $df-btn-disabled-text-color
+      )};
+
+    --#{$prefix}btn-disabled-bg: #{variable-switch-brand2023(
+        'button-solid-basic-color-disabled-background',
+        $df-btn-disabled-bg-color
+      )};
+
+    --#{$prefix}btn-disabled-border-color: #{variable-switch-brand2023(
+        'button-solid-basic-color-disabled-background',
+        $df-btn-disabled-border-color
+      )};
+
     --#{$prefix}btn-focus-only-color: #{shades-css-var-brand2023(
-        'button-solid-basic-color-' + #{$color} + '-default-foreground',
+        varWithDefault(
+          'button-solid-basic-color-' + #{$color} + '-default-foreground',
+          'color-' + #{$color} + '-main-default-foreground'
+        ),
         $color,
         'bg-color',
         true
@@ -370,7 +441,10 @@
     --#{$prefix}btn-check-active-hover-bg: #{var(--#{$prefix}btn-active-bg)};
     --#{$prefix}btn-check-active-hover-border-color: #{var(--#{$prefix}btn-active-border-color)};
     --#{$prefix}btn-focus-shadow-rgb: #{shades-rgb-css-var-brand2023(
-        'button-solid-basic-color-' + #{$color} + '-default-border',
+        varWithDefault(
+          'button-solid-basic-color-' + #{$color} + '-default-border',
+          'color-' + #{$color} + '-main-default-border'
+        ),
         $color,
         'bg-color'
       )};
@@ -378,7 +452,10 @@
     &:focus-visible {
       --#{$prefix}btn-focus-box-shadow: #{$df-btn-focus-box-shadow}; // override BS
       --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-          'button-solid-basic-color-' + #{$color} + '-default-border',
+          varWithDefault(
+            'button-solid-basic-color-' + #{$color} + '-default-border',
+            'color-' + #{$color} + '-main-default-border'
+          ),
           $df-btn-focus-box-shadow-color
         )};
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
@@ -386,20 +463,26 @@
 
     &:focus-visible:hover:not(:active) {
       --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-          'button-solid-basic-color-' + #{$color} + '-hovered-border',
+          varWithDefault(
+            'button-solid-basic-color-' + #{$color} + '-hovered-border',
+            'color-' + #{$color} + '-main-hovered-border'
+          ),
           $df-btn-focus-hover-box-shadow-color
         )};
     }
 
     &:focus-visible:active {
       --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-          'button-solid-basic-color-' + #{$color} + '-pressed-border',
+          varWithDefault(
+            'button-solid-basic-color-' + #{$color} + '-pressed-border',
+            'color-' + #{$color} + '-main-pressed-border'
+          ),
           $df-btn-focus-active-box-shadow-color
         )};
     }
   }
 
-  .df-btn-#{$color}-mirror {
+  .df-btn-#{$colorClass}-mirror {
     // stylelint-disable custom-property-no-missing-var-function
     --#{$prefix}btn-color: #{shades-css-var-brand2023(
         'button-solid-mirror-color-' + #{$color} + '-default-foreground',
@@ -446,9 +529,22 @@
         true
       )};
     --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-active-bg);
-    --#{$prefix}btn-disabled-color: #{$df-btn-disabled-text-color};
-    --#{$prefix}btn-disabled-bg: #{$df-btn-disabled-bg-color};
-    --#{$prefix}btn-disabled-border-color: #{$df-btn-disabled-border-color};
+
+    --#{$prefix}btn-disabled-color: #{variable-switch-brand2023(
+        'button-solid-mirror-color-disabled-foreground',
+        $df-btn-disabled-text-color
+      )};
+
+    --#{$prefix}btn-disabled-bg: #{variable-switch-brand2023(
+        'button-solid-mirror-color-disabled-background',
+        $df-btn-disabled-bg-color
+      )};
+
+    --#{$prefix}btn-disabled-border-color: #{variable-switch-brand2023(
+        'button-solid-mirror-color-disabled-background',
+        $df-btn-disabled-border-color
+      )};
+
     --#{$prefix}btn-focus-only-color: #{shades-css-var-brand2023(
         'button-solid-mirror-color-' + #{$color} + '-default-foreground',
         $color,
@@ -487,63 +583,111 @@
     }
   }
 
-  .btn-outline-#{$color} {
+  .btn-outline-#{$colorClass} {
     // stylelint-disable custom-property-no-missing-var-function
     --#{$prefix}btn-color: #{shades-css-var-brand2023(
-        'button-outline-basic-color-' + #{$color} + '-default-foreground',
+        varWithDefault(
+          'button-outline-basic-color-' + #{$color} + '-default-foreground',
+          'color-' + #{$color} + '-alt-default-border'
+        ),
         $color,
         'text-color'
       )};
+    @if $isBrand2023 {
+      --#{$prefix}btn-bg: var(--#{$prefix}button-outline-basic-color-#{$color}-default-background);
+    }
     --#{$prefix}btn-border-color: #{shades-css-var-brand2023(
-        'button-outline-basic-color-' + #{$color} + '-default-border',
+        varWithDefault(
+          'button-outline-basic-color-' + #{$color} + '-default-border',
+          'color-' + #{$color} + '-alt-default-border'
+        ),
         $color,
         'border-color'
       )};
     --#{$prefix}btn-hover-color: #{shades-css-var-brand2023(
-        'button-outline-basic-color-' + #{$color} + '-hovered-foreground',
+        varWithDefault(
+          'button-outline-basic-color-' + #{$color} + '-hovered-foreground',
+          'color-' + #{$color} + '-alt-hovered-foreground'
+        ),
         $color,
         'text-hover-color'
       )};
     --#{$prefix}btn-hover-border-color: #{shades-css-var-brand2023(
-        'button-outline-basic-color-' + #{$color} + '-hovered-border',
+        varWithDefault(
+          'button-outline-basic-color-' + #{$color} + '-hovered-border',
+          'color-' + #{$color} + '-alt-hovered-border'
+        ),
         $color,
         'bg-hover-color'
       )};
     --#{$prefix}btn-hover-bg: #{shades-css-var-brand2023(
-        'button-outline-basic-color-' + #{$color} + '-hovered-background',
+        varWithDefault(
+          'button-outline-basic-color-' + #{$color} + '-hovered-background',
+          'color-' + #{$color} + '-alt-hovered-background'
+        ),
         $color,
         'bg-hover-alt-color'
       )}; //bg-subtle-hover-color
-    --#{$prefix}btn-disabled-color: #{$df-btn-outline-disabled-text-color};
-    --#{$prefix}btn-disabled-border-color: #{$df-btn-disabled-border-color};
+    --#{$prefix}btn-disabled-color: #{variable-switch-brand2023(
+        'button-outline-basic-color-disabled-foreground',
+        $df-btn-disabled-text-color
+      )};
+
+    @if $isBrand2023 {
+      --#{$prefix}btn-disabled-bg: var(--#{$prefix}button-outline-basic-color-disabled-background);
+    }
+
+    --#{$prefix}btn-disabled-border-color: #{variable-switch-brand2023(
+        'button-outline-basic-color-disabled-border',
+        $df-btn-disabled-border-color
+      )};
+
     --#{$prefix}btn-active-color: #{shades-css-var-brand2023(
-        'button-outline-basic-color-' + #{$color} + '-pressed-foreground',
+        varWithDefault(
+          'button-outline-basic-color-' + #{$color} + '-pressed-foreground',
+          'color-' + #{$color} + '-alt-pressed-foreground'
+        ),
         $color,
         'bg-active-color'
       )};
     --#{$prefix}btn-active-border-color: #{shades-css-var-brand2023(
-        'button-outline-basic-color-' + #{$color} + '-pressed-border',
+        varWithDefault(
+          'button-outline-basic-color-' + #{$color} + '-pressed-border',
+          'color-' + #{$color} + '-alt-pressed-border'
+        ),
         $color,
         'bg-active-color'
       )};
     --#{$prefix}btn-active-bg: #{shades-css-var-brand2023(
-        'button-outline-basic-color-' + #{$color} + '-pressed-background',
+        varWithDefault(
+          'button-outline-basic-color-' + #{$color} + '-pressed-background',
+          'color-' + #{$color} + '-alt-pressed-background'
+        ),
         $color,
         'bg-active-alt-color'
       )}; //bg-subtle-active-color
     --#{$prefix}btn-focus-only-color: #{shades-css-var-brand2023(
-        'button-outline-basic-color-' + #{$color} + '-default-foreground',
+        varWithDefault(
+          'button-outline-basic-color-' + #{$color} + '-default-foreground',
+          'color-' + #{$color} + '-alt-default-foreground'
+        ),
         $color,
         'text-color'
       )};
     --#{$prefix}btn-focus-only-bg: #{var(--#{$prefix}btn-bg)};
     --#{$prefix}btn-focus-only-border-color: #{shades-css-var-brand2023(
-        'button-outline-basic-color-' + #{$color} + '-default-border',
+        varWithDefault(
+          'button-outline-basic-color-' + #{$color} + '-default-border',
+          'color-' + #{$color} + '-alt-default-border'
+        ),
         $color,
         'border-color'
       )};
     --#{$prefix}btn-check-active-hover-color: #{shades-css-var-brand2023(
-        'button-outline-basic-color-' + #{$color} + '-activeHovered-foreground',
+        varWithDefault(
+          'button-outline-basic-color-' + #{$color} + '-activeHovered-foreground',
+          'color-' + #{$color} + '-alt-activeHovered-foreground'
+        ),
         $color,
         'bg-active-color',
         true
@@ -551,7 +695,10 @@
     --#{$prefix}btn-check-active-hover-bg: #{$bgHoverColor};
     --#{$prefix}btn-check-active-hover-border-color: #{var(--#{$prefix}btn-active-border-color)};
     --#{$prefix}btn-focus-shadow-rgb: #{shades-rgb-css-var-brand2023(
-        'df-button-outline-basic-color-#{$color}-default-border',
+        varWithDefault(
+          'df-button-outline-basic-color-#{$color}-default-border',
+          'color-' + #{$color} + '-alt-default-border'
+        ),
         $color,
         'bg-color'
       )};
@@ -559,7 +706,10 @@
     &:focus-visible {
       --#{$prefix}btn-focus-box-shadow: #{$df-btn-focus-box-shadow}; // override BS
       --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-          'button-outline-basic-color-' + #{$color} + '-default-border',
+          varWithDefault(
+            'button-outline-basic-color-' + #{$color} + '-default-border',
+            'color-' + #{$color} + '-alt-default-border'
+          ),
           $df-btn-outline-focus-box-shadow-color
         )};
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
@@ -567,7 +717,10 @@
 
     &:focus-visible:hover:not(:active):not(.active) {
       --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-          'button-outline-basic-color-' + #{$color} + '-hovered-border',
+          varWithDefault(
+            'button-outline-basic-color-' + #{$color} + '-hovered-border',
+            'color-' + #{$color} + '-alt-hovered-border'
+          ),
           $df-btn-outline-focus-hover-box-shadow-color
         )};
     }
@@ -575,13 +728,16 @@
     &:focus-visible:active,
     &.active:focus-visible {
       --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-          'button-outline-basic-color-' + #{$color} + '-pressed-border',
+          varWithDefault(
+            'button-outline-basic-color-' + #{$color} + '-pressed-border',
+            'color-' + #{$color} + '-alt-pressed-border'
+          ),
           $df-btn-outline-focus-active-box-shadow-color
         )};
     }
   }
 
-  .df-btn-outline-#{$color}-mirror {
+  .df-btn-outline-#{$colorClass}-mirror {
     // stylelint-disable custom-property-no-missing-var-function
     --#{$prefix}btn-color: #{shades-css-var-brand2023(
         'button-outline-mirror-color-' + #{$color} + '-default-foreground',
@@ -590,6 +746,9 @@
         false,
         true
       )};
+    @if $isBrand2023 {
+      --#{$prefix}btn-bg: var(--#{$prefix}button-outline-mirror-color-#{$color}-default-background);
+    }
     --#{$prefix}btn-border-color: var(--#{$prefix}btn-color);
     --#{$prefix}btn-hover-color: #{shades-css-var-brand2023(
         'button-outline-mirror-color-' + #{$color} + '-hovered-foreground',
@@ -606,8 +765,19 @@
         false,
         true
       )};
-    --#{$prefix}btn-disabled-color: #{$df-btn-outline-disabled-text-color};
-    --#{$prefix}btn-disabled-border-color: #{$df-btn-disabled-border-color};
+
+    --#{$prefix}btn-disabled-color: #{variable-switch-brand2023(
+        'button-outline-mirror-color-disabled-foreground',
+        $df-btn-outline-disabled-text-color
+      )};
+    @if $isBrand2023 {
+      --#{$prefix}btn-disabled-bg: var(--#{$prefix}button-outline-mirror-color-disabled-background);
+    }
+    --#{$prefix}btn-disabled-border-color: #{variable-switch-brand2023(
+        'button-outline-mirror-color-disabled-border',
+        $df-btn-disabled-border-color
+      )};
+
     --#{$prefix}btn-active-color: #{shades-css-var-brand2023(
         'button-outline-mirror-color-' + #{$color} + '-pressed-foreground',
         $color,
@@ -658,38 +828,77 @@
     }
   }
 
-  .btn-outline-#{$color}.df-btn-tertiary {
-    --#{$prefix}btn-color: var(--#{$prefix}button-text-basic-color-#{$color}-default-foreground);
+  .btn-outline-#{$colorClass}.df-btn-tertiary {
+    --#{$prefix}btn-color: var(
+      --#{$prefix}button-text-basic-color-#{$color}-default-foreground,
+      var(--#{$prefix}color-#{$color}-alt-default-foreground)
+    );
+    @if $isBrand2023 {
+      --#{$prefix}btn-bg: transparent;
+    }
+
     --#{$prefix}btn-border-color: transparent;
 
-    --#{$prefix}btn-hover-color: var(--#{$prefix}button-text-basic-color-#{$color}-hovered-foreground);
-    --#{$prefix}btn-hover-bg: var(--#{$prefix}button-text-basic-color-#{$color}-hovered-background);
-    --#{$prefix}btn-hover-border-color: var(--#{$prefix}button-text-basic-color-#{$color}-hovered-background);
+    --#{$prefix}btn-hover-color: var(
+      --#{$prefix}button-text-basic-color-#{$color}-hovered-foreground,
+      var(--#{$prefix}color-#{$color}-alt-hovered-foreground)
+    );
+    --#{$prefix}btn-hover-bg: var(
+      --#{$prefix}button-text-basic-color-#{$color}-hovered-background,
+      var(--#{$prefix}color-#{$color}-alt-hovered-background)
+    );
+    --#{$prefix}btn-hover-border-color: var(
+      --#{$prefix}button-text-basic-color-#{$color}-hovered-background,
+      var(--#{$prefix}color-#{$color}-alt-hovered-background)
+    );
 
-    --#{$prefix}btn-active-color: var(--#{$prefix}button-text-basic-color-#{$color}-pressed-foreground);
-    --#{$prefix}btn-active-bg: var(--#{$prefix}button-text-basic-color-#{$color}-pressed-background);
-    --#{$prefix}btn-active-border-color: var(--#{$prefix}button-text-basic-color-#{$color}-pressed-background);
+    --#{$prefix}btn-active-color: var(
+      --#{$prefix}button-text-basic-color-#{$color}-pressed-foreground,
+      var(--#{$prefix}color-#{$color}-alt-pressed-foreground)
+    );
+    --#{$prefix}btn-active-bg: var(
+      --#{$prefix}button-text-basic-color-#{$color}-pressed-background,
+      var(--#{$prefix}color-#{$color}-alt-pressed-background)
+    );
+    --#{$prefix}btn-active-border-color: var(
+      --#{$prefix}button-text-basic-color-#{$color}-pressed-background,
+      var(--#{$prefix}color-#{$color}-alt-pressed-background)
+    );
 
     --#{$prefix}btn-disabled-color: var(--#{$prefix}button-text-basic-color-disabled-foreground);
     --#{$prefix}btn-disabled-bg: var(--#{$prefix}button-text-basic-color-disabled-background);
     --#{$prefix}btn-disabled-border-color: var(--#{$prefix}button-text-basic-color-disabled-background);
 
-    --#{$prefix}btn-focus-only-color: var(--#{$prefix}button-text-basic-color-#{$color}-default-foreground);
+    --#{$prefix}btn-focus-only-color: var(
+      --#{$prefix}button-text-basic-color-#{$color}-default-foreground,
+      var(--#{$prefix}color-#{$color}-alt-default-foreground)
+    );
     --#{$prefix}btn-focus-only-border-color: transparent;
     --#{$prefix}btn-check-active-hover-color: var(
-      --#{$prefix}button-text-basic-color-#{$color}-activeHovered-foreground
+      --#{$prefix}button-text-basic-color-#{$color}-activeHovered-foreground,
+      var(--#{$prefix}color-#{$color}-alt-activeHovered-foreground)
+    );
+    --#{$prefix}btn-check-active-hover-bg: var(
+      --#{$prefix}button-text-basic-color-#{$color}-activeHovered-background,
+      var(--#{$prefix}color-#{$color}-alt-activeHovered-background)
     );
-    --#{$prefix}btn-check-active-hover-bg: var(--#{$prefix}button-text-basic-color-#{$color}-activeHovered-background);
     --#{$prefix}btn-check-active-hover-border-color: var(
-      --#{$prefix}button-text-basic-color-#{$color}-activeHovered-background
+      --#{$prefix}button-text-basic-color-#{$color}-activeHovered-background,
+      var(--#{$prefix}color-#{$color}-alt-activeHovered-background)
     );
 
     --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-        'button-text-basic-color-#{$color}-default-foreground',
+        varWithDefault(
+          'button-text-basic-color-#{$color}-default-foreground',
+          'color-' + #{$color} + '-alt-default-foreground'
+        ),
         var(--#{$prefix}color-#{$color}-main-default-border)
       )};
     --#{$prefix}btn-focus-shadow-rgb: #{shades-rgb-css-var-brand2023(
-        'button-text-basic-color-#{$color}-default-foreground',
+        varWithDefault(
+          'button-text-basic-color-#{$color}-default-foreground',
+          'color-' + #{$color} + '-alt-default-foreground'
+        ),
         $color,
         'bg-color'
       )};
@@ -700,14 +909,20 @@
 
     &:focus-visible:hover:not(:active):not(.active) {
       --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-          'button-outline-basic-color-' + #{$color} + '-hovered-foreground',
+          varWithDefault(
+            'button-outline-basic-color-' + #{$color} + '-hovered-border',
+            'color-' + #{$color} + '-alt-hovered-border'
+          ),
           $df-btn-outline-focus-hover-box-shadow-color
         )};
     }
   }
 
-  .df-btn-outline-#{$color}-mirror.df-btn-tertiary {
+  .df-btn-outline-#{$colorClass}-mirror.df-btn-tertiary {
     --#{$prefix}btn-color: var(--#{$prefix}button-text-mirror-color-#{$color}-default-foreground);
+    @if $isBrand2023 {
+      --#{$prefix}btn-bg: transparent;
+    }
     --#{$prefix}btn-border-color: transparent;
 
     --#{$prefix}btn-hover-color: var(--#{$prefix}button-text-mirror-color-#{$color}-hovered-foreground);
@@ -749,9 +964,109 @@
   }
 
   .btn-check {
+    @if $isBrand2023 {
+      &:checked {
+        + .btn-#{$colorClass} {
+          --#{$prefix}btn-active-color: var(--#{$prefix}button-solid-basic-color-#{$color}-active-foreground);
+          --#{$prefix}btn-active-bg: var(--#{$prefix}button-solid-basic-color-#{$color}-active-background);
+          --#{$prefix}btn-active-border-color: var(--#{$prefix}button-solid-basic-color-#{$color}-active-border);
+
+          &:hover {
+            --#{$prefix}btn-active-color: var(--#{$prefix}button-solid-basic-color-#{$color}-activeHovered-foreground);
+            --#{$prefix}btn-active-bg: var(--#{$prefix}button-solid-basic-color-#{$color}-activeHovered-background);
+            --#{$prefix}btn-active-border-color: var(
+              --#{$prefix}button-solid-basic-color-#{$color}-activeHovered-border
+            );
+          }
+
+          &:active {
+            --#{$prefix}btn-active-color: var(--#{$prefix}button-solid-basic-color-#{$color}-activePressed-foreground);
+            --#{$prefix}btn-active-bg: var(--#{$prefix}button-solid-basic-color-#{$color}-activePressed-background);
+            --#{$prefix}btn-active-border-color: var(
+              --#{$prefix}button-solid-basic-color-#{$color}-activePressed-border
+            );
+          }
+        }
+
+        + .df-btn-#{$colorClass}-mirror {
+          --#{$prefix}btn-active-color: var(--#{$prefix}button-solid-mirror-color-#{$color}-active-foreground);
+          --#{$prefix}btn-active-bg: var(--#{$prefix}button-solid-mirror-color-#{$color}-active-background);
+          --#{$prefix}btn-active-border-color: var(--#{$prefix}button-solid-mirror-color-#{$color}-active-border);
+
+          &:hover {
+            --#{$prefix}btn-active-color: var(--#{$prefix}button-solid-mirror-color-#{$color}-activeHovered-foreground);
+            --#{$prefix}btn-active-bg: var(--#{$prefix}button-solid-mirror-color-#{$color}-activeHovered-background);
+            --#{$prefix}btn-active-border-color: var(
+              --#{$prefix}button-solid-mirror-color-#{$color}-activeHovered-border
+            );
+          }
+
+          &:active {
+            --#{$prefix}btn-active-color: var(--#{$prefix}button-solid-mirror-color-#{$color}-activePressed-foreground);
+            --#{$prefix}btn-active-bg: var(--#{$prefix}button-solid-mirror-color-#{$color}-activePressed-background);
+            --#{$prefix}btn-active-border-color: var(
+              --#{$prefix}button-solid-mirror-color-#{$color}-activePressed-border
+            );
+          }
+        }
+
+        + .btn-outline-#{$colorClass} {
+          --#{$prefix}btn-active-color: var(--#{$prefix}button-outline-basic-color-#{$color}-active-foreground);
+          --#{$prefix}btn-active-bg: var(--#{$prefix}button-outline-basic-color-#{$color}-active-background);
+          --#{$prefix}btn-active-border-color: var(--#{$prefix}button-outline-basic-color-#{$color}-active-border);
+
+          &:hover {
+            --#{$prefix}btn-active-color: var(
+              --#{$prefix}button-outline-basic-color-#{$color}-activeHovered-foreground
+            );
+            --#{$prefix}btn-active-bg: var(--#{$prefix}button-outline-basic-color-#{$color}-activeHovered-background);
+            --#{$prefix}btn-active-border-color: var(
+              --#{$prefix}button-outline-basic-color-#{$color}-activeHovered-border
+            );
+          }
+
+          &:active {
+            --#{$prefix}btn-active-color: var(
+              --#{$prefix}button-outline-basic-color-#{$color}-activePressed-foreground
+            );
+            --#{$prefix}btn-active-bg: var(--#{$prefix}button-outline-basic-color-#{$color}-activePressed-background);
+            --#{$prefix}btn-active-border-color: var(
+              --#{$prefix}button-outline-basic-color-#{$color}-activePressed-border
+            );
+          }
+        }
+
+        + .df-btn-outline-#{$colorClass}-mirror {
+          --#{$prefix}btn-active-color: var(--#{$prefix}button-outline-mirror-color-#{$color}-active-foreground);
+          --#{$prefix}btn-active-bg: var(--#{$prefix}button-outline-mirror-color-#{$color}-active-background);
+          --#{$prefix}btn-active-border-color: var(--#{$prefix}button-outline-mirror-color-#{$color}-active-border);
+
+          &:hover {
+            --#{$prefix}btn-active-color: var(
+              --#{$prefix}button-outline-mirror-color-#{$color}-activeHovered-foreground
+            );
+            --#{$prefix}btn-active-bg: var(--#{$prefix}button-outline-mirror-color-#{$color}-activeHovered-background);
+            --#{$prefix}btn-active-border-color: var(
+              --#{$prefix}button-outline-mirror-color-#{$color}-activeHovered-border
+            );
+          }
+
+          &:active {
+            --#{$prefix}btn-active-color: var(
+              --#{$prefix}button-outline-mirror-color-#{$color}-activePressed-foreground
+            );
+            --#{$prefix}btn-active-bg: var(--#{$prefix}button-outline-mirror-color-#{$color}-activePressed-background);
+            --#{$prefix}btn-active-border-color: var(
+              --#{$prefix}button-outline-mirror-color-#{$color}-activePressed-border
+            );
+          }
+        }
+      }
+    }
+
     // override default behavior of outline in case of btn-check
     &:checked {
-      + .btn-outline-#{$color} {
+      + .btn-outline-#{$colorClass} {
         --#{$prefix}btn-active-color: #{shades-css-var-brand2023(
             'button-solid-basic-color-' + #{$color} + '-pressed-foreground',
             $color,