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

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 + &,
@@ -125,8 +138,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 +305,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 +472,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 +752,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/checkbox/_checkbox.scss

@@ -1,10 +1,14 @@
 @use 'sass:math';
+@use 'sass:meta';
 
 .form-check {
-  --#{$prefix}checkbox-invalid-feedback-margin-start: #{-1em * math.div(
-      $form-check-padding-start,
-      $form-feedback-font-size
-    )};
+  //TODO: change to use spacing tokens
+  @if (meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023) {
+    --#{$prefix}checkbox-invalid-feedback-margin-start: #{-1em * math.div($form-check-padding-start, 0.875em)};
+  } @else {
+    --#{$prefix}checkbox-invalid-feedback-margin-start: #{-1em * math.div($form-check-padding-start, $form-feedback-font-size)};
+  }
+
   --#{$prefix}checkbox-disabled-background-color: #{$df-checkbox-disabled-background-color};
   --#{$prefix}checkbox-checked-disabled-bg-color: #{$df-checkbox-checked-disabled-bg-color};
   --#{$prefix}checkbox-disabled-border-color: #{$df-checkbox-disabled-border-color};
@@ -29,15 +33,18 @@
       cursor: var(--#{$prefix}checkbox-disabled-cursor);
       pointer-events: auto;
       border-color: var(--#{$prefix}checkbox-disabled-border-color);
+
       &:not([checked]) {
         background-color: var(--#{$prefix}checkbox-disabled-background-color);
       }
+
       &:checked,
       &:indeterminate {
         &[type='checkbox'] {
           background-color: var(--#{$prefix}checkbox-checked-disabled-bg-color);
         }
       }
+
       & ~ .form-check-label {
         color: var(--#{$prefix}checkbox-checked-disabled-bg-color);
         cursor: var(--#{$prefix}checkbox-disabled-cursor);

package/styles/scss/components/dropdown/_dropdown.scss

@@ -106,7 +106,9 @@ body,
 
 .dropdown-item {
   border: var(--#{$prefix}dropdown-item-border-width) solid transparent;
-
+  &.active {
+    font-weight: $df-dropdown-item-active-font-weight;
+  }
   &:focus,
   &.focus {
     @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {

package/styles/scss/components/dropdown/_dropdown.variables.scss

@@ -21,3 +21,4 @@ $df-dropdown-disabled-pointer: var(--#{$prefix}disabled-cursor) !default;
 $df-dropdown-disabled-color: $df-btn-outline-disabled-text-color !default;
 $df-dropdown-item-focused-border: $df-focused-border !default;
 $df-dropdown-item-focus-box-shadow: $df-focused-box-shadow !default;
+$df-dropdown-item-active-font-weight: $font-weight-normal !default;

package/styles/scss/components/fieldset/_fieldset.scss

@@ -1,8 +1,8 @@
 fieldset {
   --#{$prefix}fieldset-legend-font-size: #{$df-fieldset-legend-font-size};
-  --#{$prefix}fieldset-legent-font-weight: #{$df-fieldset-legent-font-weight};
+  --#{$prefix}fieldset-legend-font-weight: #{$df-fieldset-legend-font-weight};
   > legend {
-    font-weight: var(--#{$prefix}fieldset-legent-font-weight);
+    font-weight: var(--#{$prefix}fieldset-legend-font-weight);
     font-size: var(--#{$prefix}fieldset-legend-font-size);
   }
 }

package/styles/scss/components/fieldset/_fieldset.variables.scss

@@ -1,2 +1,2 @@
 $df-fieldset-legend-font-size: $font-size-base !default;
-$df-fieldset-legent-font-weight: $df-font-weight-semi-bold !default;
+$df-fieldset-legend-font-weight: $df-font-weight-semi-bold !default;