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

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

@@ -14,11 +14,24 @@
   --#{$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 {
+    --#{$prefix}btn-border-radius: var(--#{$prefix}button-borderRadius-main-medium);
+  }
 
   display: var(--#{$prefix}btn-display);
   align-items: center;
   justify-content: center;
 
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    &.btn-sm {
+      --#{$prefix}btn-border-radius: var(--#{$prefix}button-borderRadius-main-small);
+    }
+
+    &.btn-lg {
+      --#{$prefix}btn-border-radius: var(--#{$prefix}button-borderRadius-main-large);
+    }
+  }
+
   &.disabled,
   &:disabled {
     .btn-check:checked + &,
@@ -76,6 +89,14 @@
 
 .btn-close {
   --#{$prefix}box-shadow-width: #{$df-btn-close-focus-shadow-width};
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    &: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 {
@@ -125,8 +146,16 @@
 .btn-check {
   &:checked {
     + .btn:hover {
-      --#{$prefix}btn-active-bg: #{shades-css-var('primary', 'bg-hover-color')};
-      --#{$prefix}btn-active-border-color: #{shades-css-var('primary', 'bg-hover-color')};
+      --#{$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'
+        )};
     }
   }
 
@@ -284,67 +313,165 @@
 
 // Modify actual button from bootstrap
 @each $color, $value in $theme-colors {
-  $bgHoverColor: shades-css-var($color, 'bg-hover-color');
-  $bgActiveColor: shades-css-var($color, 'bg-active-color');
-  $bgFocusOnlyColor: shades-css-var($color, 'bg-color');
+  $bgHoverColor: shades-css-var-brand2023(
+    'button-solid-basic-color-' + #{$color} + '-hovered-background',
+    $color,
+    'bg-hover-color'
+  );
+  $bgActiveColor: shades-css-var-brand2023(
+    'button-solid-basic-color-' + #{$color} + '-pressed-background',
+    $color,
+    'bg-active-color'
+  );
+  $bgFocusOnlyColor: shades-css-var-brand2023(
+    'button-solid-basic-color-' + #{$color} + '-default-background',
+    $color,
+    'bg-color'
+  );
 
   .btn-#{$color} {
     // stylelint-disable custom-property-no-missing-var-function
-    --#{$prefix}btn-color: #{shades-css-var($color, 'bg-color', true)};
-    --#{$prefix}btn-bg: #{shades-css-var($color, 'bg-color')};
-    --#{$prefix}btn-border-color: #{shades-css-var($color, 'bg-color')};
-    --#{$prefix}btn-hover-color: #{shades-css-var($color, 'bg-hover-color', true)};
+    --#{$prefix}btn-color: #{shades-css-var-brand2023(
+        'button-solid-basic-color-' + #{$color} + '-default-foreground',
+        $color,
+        'bg-color',
+        true
+      )};
+    --#{$prefix}btn-bg: #{shades-css-var-brand2023(
+        'button-solid-basic-color-' + #{$color} + '-default-background',
+        $color,
+        'bg-color'
+      )};
+    --#{$prefix}btn-border-color: #{shades-css-var-brand2023(
+        'button-solid-basic-color-' + #{$color} + '-default-border',
+        $color,
+        'bg-color'
+      )};
+    --#{$prefix}btn-hover-color: #{shades-css-var-brand2023(
+        'button-solid-basic-color-' + #{$color} + '-hovered-foreground',
+        $color,
+        'bg-hover-color',
+        true
+      )};
     --#{$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($color, 'bg-active-color', true)};
+    --#{$prefix}btn-active-color: #{shades-css-var-brand2023(
+        'button-solid-basic-color-' + #{$color} + '-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-focus-only-color: #{shades-css-var($color, 'bg-color', true)};
+    --#{$prefix}btn-focus-only-color: #{shades-css-var-brand2023(
+        'button-solid-basic-color-' + #{$color} + '-default-foreground',
+        $color,
+        'bg-color',
+        true
+      )};
     --#{$prefix}btn-focus-only-bg: #{$bgFocusOnlyColor};
     --#{$prefix}btn-focus-only-border-color: #{$bgFocusOnlyColor};
     --#{$prefix}btn-check-active-hover-color: #{var(--#{$prefix}btn-active-color)};
     --#{$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($color, 'bg-color')};
+    --#{$prefix}btn-focus-shadow-rgb: #{shades-rgb-css-var-brand2023(
+        'button-solid-basic-color-' + #{$color} + '-default-border',
+        $color,
+        'bg-color'
+      )};
     // stylelint-enable custom-property-no-missing-var-function
     &:focus-visible {
       --#{$prefix}btn-focus-box-shadow: #{$df-btn-focus-box-shadow}; // override BS
-      --#{$prefix}box-shadow-color: #{$df-btn-focus-box-shadow-color};
+      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+          'button-solid-basic-color-' + #{$color} + '-default-border',
+          $df-btn-focus-box-shadow-color
+        )};
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
 
     &:focus-visible:hover:not(:active) {
-      --#{$prefix}box-shadow-color: #{$df-btn-focus-hover-box-shadow-color};
+      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+          'button-solid-basic-color-' + #{$color} + '-hovered-border',
+          $df-btn-focus-hover-box-shadow-color
+        )};
     }
 
     &:focus-visible:active {
-      --#{$prefix}box-shadow-color: #{$df-btn-focus-active-box-shadow-color};
+      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+          'button-solid-basic-color-' + #{$color} + '-pressed-border',
+          $df-btn-focus-active-box-shadow-color
+        )};
     }
   }
 
   .df-btn-#{$color}-mirror {
     // stylelint-disable custom-property-no-missing-var-function
-    --#{$prefix}btn-color: #{shades-css-var($color, 'text-color', false, true)};
-    --#{$prefix}btn-bg: #{shades-css-var($color, 'bg-color', false, true)};
+    --#{$prefix}btn-color: #{shades-css-var-brand2023(
+        'button-solid-mirror-color-' + #{$color} + '-default-foreground',
+        $color,
+        'text-color',
+        false,
+        true
+      )};
+    --#{$prefix}btn-bg: #{shades-css-var-brand2023(
+        'button-solid-mirror-color-' + #{$color} + '-default-background',
+        $color,
+        'bg-color',
+        false,
+        true
+      )};
     --#{$prefix}btn-border-color: var(--#{$prefix}btn-bg);
-    --#{$prefix}btn-hover-color: #{shades-css-var($color, 'text-color', false, true)};
-    --#{$prefix}btn-hover-bg: #{shades-css-var($color, 'bg-hover-color', false, true)};
+    --#{$prefix}btn-hover-color: #{shades-css-var-brand2023(
+        'button-solid-mirror-color-' + #{$color} + '-hovered-foreground',
+        $color,
+        'text-color',
+        false,
+        true
+      )};
+    --#{$prefix}btn-hover-bg: #{shades-css-var-brand2023(
+        'button-solid-mirror-color-' + #{$color} + '-hovered-background',
+        $color,
+        'bg-hover-color',
+        false,
+        true
+      )};
     --#{$prefix}btn-hover-border-color: var(--#{$prefix}btn-hover-bg);
-    --#{$prefix}btn-active-color: #{shades-css-var($color, 'text-color', false, true)};
-    --#{$prefix}btn-active-bg: #{shades-css-var($color, 'bg-active-color', false, true)};
+    --#{$prefix}btn-active-color: #{shades-css-var-brand2023(
+        'button-solid-mirror-color-' + #{$color} + '-pressed-foreground',
+        $color,
+        'text-color',
+        false,
+        true
+      )};
+    --#{$prefix}btn-active-bg: #{shades-css-var-brand2023(
+        'button-solid-mirror-color-' + #{$color} + '-pressed-background',
+        $color,
+        'bg-active-color',
+        false,
+        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-focus-only-color: #{shades-css-var($color, 'text-color', false, true)};
+    --#{$prefix}btn-focus-only-color: #{shades-css-var-brand2023(
+        'button-solid-mirror-color-' + #{$color} + '-default-foreground',
+        $color,
+        'text-color',
+        false,
+        true
+      )};
     --#{$prefix}btn-focus-only-bg: #{$bgFocusOnlyColor};
     --#{$prefix}btn-focus-only-border-color: #{$bgFocusOnlyColor};
     // stylelint-enable custom-property-no-missing-var-function
     &:focus-visible {
-      --#{$prefix}box-shadow-color: var(--#{$prefix}btn-bg);
+      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+          'button-solid-mirror-color-' + #{$color} + '-default-border',
+          var(--#{$prefix}btn-bg)
+        )};
 
       &:not(:active):not(:hover) {
         color: var(--#{$prefix}btn-color);
@@ -353,91 +480,276 @@
       }
 
       &:hover {
-        --#{$prefix}box-shadow-color: var(--#{$prefix}btn-hover-bg);
+        --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+            'button-solid-mirror-color-' + #{$color} + '-hovered-border',
+            var(--#{$prefix}btn-hover-bg)
+          )};
       }
 
       &:active {
-        --#{$prefix}box-shadow-color: var(--#{$prefix}btn-active-bg);
+        --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+            'button-solid-mirror-color-' + #{$color} + '-pressed-border',
+            var(--#{$prefix}btn-active-bg)
+          )};
       }
     }
   }
 
   .btn-outline-#{$color} {
     // stylelint-disable custom-property-no-missing-var-function
-    --#{$prefix}btn-color: #{shades-css-var($color, 'text-color')};
-    --#{$prefix}btn-border-color: #{shades-css-var($color, 'border-color')};
-    --#{$prefix}btn-hover-color: #{shades-css-var($color, 'text-hover-color')};
-    --#{$prefix}btn-hover-border-color: #{shades-css-var($color, 'bg-hover-color')};
-    --#{$prefix}btn-hover-bg: #{shades-css-var($color, 'bg-hover-alt-color')}; //bg-subtle-hover-color
+    --#{$prefix}btn-color: #{shades-css-var-brand2023(
+        'button-outline-basic-color-' + #{$color} + '-default-foreground',
+        $color,
+        'text-color'
+      )};
+    --#{$prefix}btn-border-color: #{shades-css-var-brand2023(
+        'button-outline-basic-color-' + #{$color} + '-default-border',
+        $color,
+        'border-color'
+      )};
+    --#{$prefix}btn-hover-color: #{shades-css-var-brand2023(
+        'button-outline-basic-color-' + #{$color} + '-hovered-foreground',
+        $color,
+        'text-hover-color'
+      )};
+    --#{$prefix}btn-hover-border-color: #{shades-css-var-brand2023(
+        'button-outline-basic-color-' + #{$color} + '-hovered-border',
+        $color,
+        'bg-hover-color'
+      )};
+    --#{$prefix}btn-hover-bg: #{shades-css-var-brand2023(
+        'button-outline-basic-color-' + #{$color} + '-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-active-color: #{shades-css-var($color, 'bg-active-color')};
-    --#{$prefix}btn-active-border-color: #{shades-css-var($color, 'bg-active-color')};
-    --#{$prefix}btn-active-bg: #{shades-css-var($color, 'bg-active-alt-color')}; //bg-subtle-active-color
-    --#{$prefix}btn-focus-only-color: #{shades-css-var($color, 'text-color')};
+    --#{$prefix}btn-active-color: #{shades-css-var-brand2023(
+        'button-outline-basic-color-' + #{$color} + '-pressed-foreground',
+        $color,
+        'bg-active-color'
+      )};
+    --#{$prefix}btn-active-border-color: #{shades-css-var-brand2023(
+        'button-outline-basic-color-' + #{$color} + '-pressed-border',
+        $color,
+        'bg-active-color'
+      )};
+    --#{$prefix}btn-active-bg: #{shades-css-var-brand2023(
+        'button-outline-basic-color-' + #{$color} + '-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',
+        $color,
+        'text-color'
+      )};
     --#{$prefix}btn-focus-only-bg: #{var(--#{$prefix}btn-bg)};
-    --#{$prefix}btn-focus-only-border-color: #{shades-css-var($color, 'border-color')};
-    --#{$prefix}btn-check-active-hover-color: #{shades-css-var($color, 'bg-active-color', true)};
+    --#{$prefix}btn-focus-only-border-color: #{shades-css-var-brand2023(
+        'button-outline-basic-color-' + #{$color} + '-default-border',
+        $color,
+        'border-color'
+      )};
+    --#{$prefix}btn-check-active-hover-color: #{shades-css-var-brand2023(
+        'button-outline-basic-color-' + #{$color} + '-activeHovered-foreground',
+        $color,
+        'bg-active-color',
+        true
+      )};
     --#{$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($color, 'bg-color')};
+    --#{$prefix}btn-focus-shadow-rgb: #{shades-rgb-css-var-brand2023(
+        'df-button-outline-basic-color-#{$color}-default-border',
+        $color,
+        'bg-color'
+      )};
     // stylelint-enable custom-property-no-missing-var-function
     &:focus-visible {
       --#{$prefix}btn-focus-box-shadow: #{$df-btn-focus-box-shadow}; // override BS
-      --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-box-shadow-color};
+      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+          'button-outline-basic-color-' + #{$color} + '-default-border',
+          $df-btn-outline-focus-box-shadow-color
+        )};
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
 
     &:focus-visible:hover:not(:active):not(.active) {
-      --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-hover-box-shadow-color};
+      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+          'button-outline-basic-color-' + #{$color} + '-hovered-border',
+          $df-btn-outline-focus-hover-box-shadow-color
+        )};
     }
 
     &:focus-visible:active,
     &.active:focus-visible {
-      --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-active-box-shadow-color};
+      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+          'button-outline-basic-color-' + #{$color} + '-pressed-border',
+          $df-btn-outline-focus-active-box-shadow-color
+        )};
     }
   }
 
   .df-btn-outline-#{$color}-mirror {
     // stylelint-disable custom-property-no-missing-var-function
-    --#{$prefix}btn-color: #{shades-css-var($color, 'bg-color', false, true)};
+    --#{$prefix}btn-color: #{shades-css-var-brand2023(
+        'button-outline-mirror-color-' + #{$color} + '-default-foreground',
+        $color,
+        'bg-color',
+        false,
+        true
+      )};
     --#{$prefix}btn-border-color: var(--#{$prefix}btn-color);
-    --#{$prefix}btn-hover-color: #{shades-css-var($color, 'bg-hover-color', false, true)};
+    --#{$prefix}btn-hover-color: #{shades-css-var-brand2023(
+        'button-outline-mirror-color-' + #{$color} + '-hovered-foreground',
+        $color,
+        'bg-hover-color',
+        false,
+        true
+      )};
     --#{$prefix}btn-hover-border-color: var(--#{$prefix}btn-hover-color);
-    --#{$prefix}btn-hover-bg: #{shades-css-var($color, 'bg-hover-alt-color', false, true)};
+    --#{$prefix}btn-hover-bg: #{shades-css-var-brand2023(
+        'button-outline-mirror-color-' + #{$color} + '-hovered-background',
+        $color,
+        'bg-hover-alt-color',
+        false,
+        true
+      )};
     --#{$prefix}btn-disabled-color: #{$df-btn-outline-disabled-text-color};
     --#{$prefix}btn-disabled-border-color: #{$df-btn-disabled-border-color};
-    --#{$prefix}btn-active-color: #{shades-css-var($color, 'bg-active-color', false, true)};
+    --#{$prefix}btn-active-color: #{shades-css-var-brand2023(
+        'button-outline-mirror-color-' + #{$color} + '-pressed-foreground',
+        $color,
+        'bg-active-color',
+        false,
+        true
+      )};
     --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-active-color);
-    --#{$prefix}btn-active-bg: #{shades-css-var($color, 'bg-active-alt-color', false, true)};
-    --#{$prefix}btn-focus-only-color: #{shades-css-var($color, 'bg-color', false, true)};
+    --#{$prefix}btn-active-bg: #{shades-css-var-brand2023(
+        'button-outline-mirror-color-' + #{$color} + '-pressed-background',
+        $color,
+        'bg-active-alt-color',
+        false,
+        true
+      )};
+    --#{$prefix}btn-focus-only-color: #{shades-css-var-brand2023(
+        'button-outline-mirror-color-' + #{$color} + '-default-foreground',
+        $color,
+        'bg-color',
+        false,
+        true
+      )};
     --#{$prefix}btn-focus-only-border-color: var(--#{$prefix}btn-focus-only-color);
     // stylelint-enable custom-property-no-missing-var-function
     &:focus-visible {
-      --#{$prefix}box-shadow-color: var(--#{$prefix}btn-color);
+      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+          'button-outline-mirror-color-' + #{$color} + '-default-border',
+          var(--#{$prefix}btn-color)
+        )};
 
       &:not(:active):not(:hover) {
         color: var(--#{$prefix}btn-color);
-        border-color: var(--#{$prefix}btn-color);
       }
 
       &:hover {
-        --#{$prefix}box-shadow-color: var(--#{$prefix}btn-hover-color);
+        --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+            'button-outline-mirror-color-' + #{$color} + '-hovered-border',
+            var(--#{$prefix}btn-hover-color)
+          )};
       }
 
       &:active {
-        --#{$prefix}box-shadow-color: var(--#{$prefix}btn-active-color);
+        --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+            'button-outline-mirror-color-' + #{$color} + '-pressed-border',
+            var(--#{$prefix}btn-active-color)
+          )};
       }
     }
   }
 
-  .btn-outline-#{$color}.df-btn-tertiary,
+  .btn-outline-#{$color}.df-btn-tertiary {
+    --#{$prefix}btn-color: var(--#{$prefix}button-text-basic-color-#{$color}-default-foreground);
+    --#{$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-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-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-border-color: transparent;
+    --#{$prefix}btn-check-active-hover-color: var(
+      --#{$prefix}button-text-basic-color-#{$color}-activeHovered-foreground
+    );
+    --#{$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}box-shadow-color: #{variable-switch-brand2023(
+        'button-text-basic-color-#{$color}-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',
+        $color,
+        'bg-color'
+      )};
+
+    &:focus-visible:not(:active):not(:hover) {
+      border-color: var(--#{$prefix}btn-focus-only-border-color);
+    }
+
+    &:focus-visible:hover:not(:active):not(.active) {
+      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+          'button-outline-basic-color-' + #{$color} + '-hovered-foreground',
+          $df-btn-outline-focus-hover-box-shadow-color
+        )};
+    }
+  }
+
   .df-btn-outline-#{$color}-mirror.df-btn-tertiary {
-    --#{$prefix}btn-border-color: #{$df-btn-tertiary-border-color};
-    --#{$prefix}btn-hover-border-color: #{$df-btn-tertiary-border-color};
-    --#{$prefix}btn-active-border-color: #{$df-btn-tertiary-border-color};
-    --#{$prefix}btn-focus-only-border-color: #{$df-btn-tertiary-border-color};
-    --#{$prefix}btn-disabled-border-color: #{$df-btn-tertiary-border-color};
+    --#{$prefix}btn-color: var(--#{$prefix}button-text-mirror-color-#{$color}-default-foreground);
+    --#{$prefix}btn-border-color: transparent;
+
+    --#{$prefix}btn-hover-color: var(--#{$prefix}button-text-mirror-color-#{$color}-hovered-foreground);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}button-text-mirror-color-#{$color}-hovered-background);
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}button-text-mirror-color-#{$color}-hovered-background);
+
+    --#{$prefix}btn-active-color: var(--#{$prefix}button-text-mirror-color-#{$color}-pressed-foreground);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}button-text-mirror-color-#{$color}-pressed-background);
+    --#{$prefix}btn-active-border-color: var(--#{$prefix}button-text-mirror-color-#{$color}-pressed-background);
+
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}button-text-mirror-color-disabled-foreground);
+    --#{$prefix}btn-disabled-bg: var(--#{$prefix}button-text-mirror-color-disabled-background);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}button-text-mirror-color-disabled-background);
+
+    --#{$prefix}btn-focus-only-color: var(--#{$prefix}button-text-mirror-color-#{$color}-default-foreground);
+    --#{$prefix}btn-focus-only-border-color: transparent;
+
+    --#{$prefix}btn-check-active-hover-color: var(
+      --#{$prefix}button-text-mirror-color-#{$color}-activeHovered-foreground
+    );
+    --#{$prefix}btn-check-active-hover-bg: var(--#{$prefix}button-text-mirror-color-#{$color}-activeHovered-background);
+    --#{$prefix}btn-check-active-hover-border-color: var(
+      --#{$prefix}button-text-mirror-color-#{$color}-activeHovered-background
+    );
+
+    --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
+        'button-text-mirror-color-' + #{$color} + '-default-border',
+        var(--#{$prefix}button-text-mirror-color-#{$color}-main-default-border)
+      )};
+    --#{$prefix}btn-focus-shadow-rgb: #{shades-rgb-css-var-brand2023(
+        'button-text-mirror-color-#{$color}-default-border',
+        $color,
+        'bg-color'
+      )};
 
     &:focus-visible:not(:active):not(:hover) {
       border-color: var(--#{$prefix}btn-focus-only-border-color);
@@ -448,9 +760,22 @@
     // override default behavior of outline in case of btn-check
     &:checked {
       + .btn-outline-#{$color} {
-        --#{$prefix}btn-active-color: #{shades-css-var($color, $df-btn-check-active-property, true)};
-        --#{$prefix}btn-active-bg: #{shades-css-var($color, $df-btn-check-active-property)};
-        --#{$prefix}btn-active-border-color: #{shades-css-var($color, $df-btn-check-active-property)};
+        --#{$prefix}btn-active-color: #{shades-css-var-brand2023(
+            'button-solid-basic-color-' + #{$color} + '-pressed-foreground',
+            $color,
+            $df-btn-check-active-property,
+            true
+          )};
+        --#{$prefix}btn-active-bg: #{shades-css-var-brand2023(
+            'button-solid-basic-color-' + #{$color} + '-pressed-background',
+            $color,
+            $df-btn-check-active-property
+          )};
+        --#{$prefix}btn-active-border-color: #{shades-css-var-brand2023(
+            'button-solid-basic-color-' + #{$color} + '-pressed-border',
+            $color,
+            $df-btn-check-active-property
+          )};
       }
     }
   }

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

@@ -18,7 +18,7 @@ $df-btn-outline-disabled-text-color: var(--#{$prefix}disabled-color) !default;
 $df-btn-min-width-xl: 6.25em !default;
 $df-btn-padding-y-xl: $btn-padding-y-lg !default;
 $df-btn-padding-x-xl: $btn-padding-x-lg !default;
-$df-btn-font-size-xl: $font-size-base * map.get($df-size-ratios, 'xl') !default;
+$df-btn-font-size-xl: calc($font-size-base * map.get($df-size-ratios, 'xl')) !default;
 $df-btn-border-radius-xl: 1.5rem !default; //default ngBootstrap value of $btn-border-radius-lg
 $df-btn-link-td: none !default;
 $df-btn-link-hover-td: none !default;
@@ -44,7 +44,5 @@ $df-btn-close-focus-shadow-width: $focus-ring-width !default;
 // TODO - To be removed when CSS var and focus-ring will be fully used
 $df-btn-focus-box-shadow-blur: $focus-ring-blur !default;
 $df-btn-focus-box-shadow: $df-focused-box-shadow !default; // this value is the default value in buttons.scss of bootstrap
-// Only for the new branding here to avoid errors
-$df-btn-tertiary-border-color: transparent !default;
 $df-btn-outline-focus-inner-box-shadow-color: $df-btn-bg-color !default;
 $df-btn-bg-color-white: var(--#{$prefix}white) !default;

package/styles/scss/components/card/_card.scss

@@ -32,6 +32,8 @@
   --#{$prefix}accordion-card-last-body-border-top: #{$df-accordion-card-last-body-border-top};
   --#{$prefix}accordion-card-between-border-radius: #{$df-accordion-card-between-border-radius};
   --#{$prefix}accordion-card-between-border-top: #{$df-accordion-card-between-border-top};
+  --#{$prefix}card-text-margin-block-end: #{$df-card-text-margin-block-end};
+  --#{$prefix}card-subtitle-margin-block-end: #{$df-card-subtitle-margin-block-end};
 
   box-shadow: var(--#{$prefix}card-box-shadow);
 
@@ -39,6 +41,18 @@
     font-weight: var(--#{$prefix}card-title-font-weight);
   }
 
+  .card-text {
+    margin-block-end: var(--#{$prefix}card-text-block-end);
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+
+  .card-subtitle {
+    margin-block-end: var(--#{$prefix}card-subtitle-margin-block-end);
+  }
+
   &.border-0 {
     box-shadow: none;
   }

package/styles/scss/components/card/_card.variables.scss

@@ -29,3 +29,5 @@ $df-accordion-card-last-border-bottom-width: 0px !default;
 $df-accordion-card-last-body-border-top: $border-width $border-style var(--#{$prefix}gray-200) !default;
 $df-accordion-card-between-border-radius: 0px !default;
 $df-accordion-card-between-border-top: $border-width $border-style var(--#{$prefix}gray-200) !default;
+$df-card-text-margin-block-end: 1rem !default;
+$df-card-subtitle-margin-block-end: 0.25rem !default;

package/styles/scss/components/carousel/_carousel.scss

@@ -8,7 +8,7 @@
   --#{$prefix}carousel-caption-padding-bottom: #{$df-carousel-caption-padding-bottom};
   --#{$prefix}carousel-caption-padding-top: #{$df-carousel-caption-padding-top};
   --#{$prefix}carousel-indicator-bg-size: 50% 50%;
-  &:focus {
+  &:focus-visible {
     outline: var(--#{$prefix}carousel-outline);
     box-shadow: $df-carousel-focused-box-shadow;
   }
@@ -38,7 +38,7 @@
     }
     background-size: var(--#{$prefix}carousel-indicator-bg-size);
   }
-  
+
   .carousel-caption {
     background-color: var(--#{$prefix}carousel-indicator-bg-color); // add
     bottom: var(--#{$prefix}carousel-caption-bottom); // override