@design-factory/design-factory 20.0.2 → 21.0.0-next.1

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

@@ -1,1090 +0,0 @@
-@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};
-  --#{$prefix}btn-display: #{$df-btn-display};
-  --#{$prefix}btn-icon-margin-end: #{$df-btn-icon-margin-end};
-  --#{$prefix}btn-min-width-xl: #{$df-btn-min-width-xl};
-  --#{$prefix}btn-focus-only-color: #{$body-color};
-  --#{$prefix}btn-focus-only-bg: #{$df-btn-focus-only-bg-color};
-  --#{$prefix}btn-focus-only-border-color: #{$df-btn-focus-only-bg-color};
-  --#{$prefix}box-shadow-blur: #{$df-btn-focus-box-shadow-blur};
-  --#{$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 $isBrand2023 {
-    --#{$prefix}btn-border-radius: var(--#{$prefix}button-borderRadius-main-medium);
-  }
-
-  display: var(--#{$prefix}btn-display);
-  align-items: center;
-  justify-content: center;
-
-  @if $isBrand2023 {
-    &.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 + &,
-    :not(.btn-check) + &:active,
-    &:first-child:active,
-    &.active,
-    &.show {
-      color: var(--#{$prefix}btn-disabled-color);
-      background-color: var(--#{$prefix}btn-disabled-bg);
-      background-image: if($enable-gradients, none, null);
-      border-color: var(--#{$prefix}btn-disabled-border-color);
-      opacity: var(--#{$prefix}btn-disabled-opacity);
-      @include box-shadow(none);
-    }
-
-    cursor: var(--#{$prefix}btn-cursor-disabled);
-    pointer-events: auto; // override
-  }
-
-  [class*='icon-']:only-of-type,
-  [class*='fa-']:only-of-type {
-    &::before {
-      @include ltr {
-        margin-right: var(--#{$prefix}btn-icon-margin-end);
-      }
-      @include rtl {
-        margin-left: var(--#{$prefix}btn-icon-margin-end);
-      }
-    }
-  }
-
-  &:focus-visible:not(:hover):not(:active) {
-    color: var(--#{$prefix}btn-focus-only-color);
-    background-color: var(--#{$prefix}btn-focus-only-bg);
-    border-color: var(--#{$prefix}btn-focus-only-border-color);
-
-    // workaround for high contrast mode that doesn't display box-shadow
-    @media (prefers-contrast: more) {
-      outline: 2px solid transparent;
-    }
-  }
-
-  // TODO - Rework the placeholder component and the style of the button
-  &.placeholder {
-    display: inline-block;
-    background-color: currentColor;
-    opacity: $placeholder-opacity-max;
-    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;
-  }
-}
-
-.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 {
-  &:not(.nav-link) {
-    color: var(--#{$prefix}btn-active-color);
-    background-color: var(--#{$prefix}btn-active-bg);
-  }
-}
-
-.df-btn-icononly {
-  --#{$prefix}btn-icononly-size: #{df-button-icononly-size($btn-padding-y)};
-  --#{$prefix}btn-icononly-size-sm: #{df-button-icononly-size($btn-padding-y-sm)};
-  --#{$prefix}btn-icononly-size-lg: #{df-button-icononly-size($btn-padding-y-lg)};
-  --#{$prefix}btn-icononly-size-xl: #{df-button-icononly-size($btn-padding-y-lg)};
-
-  --#{$prefix}btn-border-width: #{$df-btn-icononly-border-width};
-  --#{$prefix}btn-border-radius: #{$df-btn-icononly-border-radius};
-  --#{$prefix}btn-padding-x: #{$df-btn-icononly-padding-x};
-  --#{$prefix}btn-padding-y: #{$df-btn-icononly-padding-y};
-
-  width: var(--#{$prefix}btn-icononly-size);
-  height: var(--#{$prefix}btn-icononly-size);
-
-  &.btn-sm {
-    --#{$prefix}btn-border-radius: #{$df-btn-icononly-border-radius-sm};
-    width: var(--#{$prefix}btn-icononly-size-sm);
-    height: var(--#{$prefix}btn-icononly-size-sm);
-  }
-
-  &.btn-lg {
-    --#{$prefix}btn-border-radius: #{$df-btn-icononly-border-radius-lg};
-    width: var(--#{$prefix}btn-icononly-size-lg);
-    height: var(--#{$prefix}btn-icononly-size-lg);
-  }
-
-  &.df-btn-xl {
-    --#{$prefix}btn-padding-x: #{$df-btn-icononly-padding-x};
-    --#{$prefix}btn-padding-y: #{$df-btn-icononly-padding-y};
-    --#{$prefix}btn-border-radius: #{$df-btn-icononly-border-radius};
-
-    width: var(--#{$prefix}btn-icononly-size-xl);
-    height: var(--#{$prefix}btn-icononly-size-xl);
-    min-width: auto;
-  }
-}
-
-.btn-check {
-  @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'
-          )};
-      }
-    }
-  }
-
-  &:not(:checked) {
-    + .btn:hover {
-      --#{$prefix}btn-bg: var(--#{$prefix}btn-hover-bg);
-      --#{$prefix}btn-border-color: var(--#{$prefix}btn-hover-border-color);
-      --#{$prefix}btn-color: var(--#{$prefix}btn-hover-color);
-    }
-  }
-
-  &:focus-visible:not(:checked):not(:hover) {
-    // override BS (issue to open)
-    + .btn {
-      color: var(--#{$prefix}btn-focus-only-color);
-      @include gradient-bg(var(--#{$prefix}btn-focus-only-bg));
-      border-color: var(--#{$prefix}btn-focus-only-border-color);
-    }
-  }
-
-  @if meta.variable-exists(df-btn-group-hover-box-shadow-color) {
-    &:focus-visible:not(:checked):hover {
-      // override BS (issue to open)
-      + .btn {
-        --#{$prefix}box-shadow-color: #{$df-btn-group-hover-box-shadow-color};
-      }
-    }
-  }
-  @if meta.variable-exists(df-btn-group-checked-box-shadow-color) {
-    &:focus-visible:checked {
-      // override BS (issue to open)
-      + .btn {
-        --#{$prefix}box-shadow-color: #{$df-btn-group-checked-box-shadow-color};
-      }
-    }
-  }
-
-  &:focus-visible {
-    + .btn {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      @if $enable-shadows {
-        box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
-      } @else {
-        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
-      }
-    }
-  }
-
-  &.disabled,
-  &:disabled {
-    + .btn {
-      cursor: var(--#{$prefix}btn-cursor-disabled);
-      pointer-events: auto;
-      color: var(--#{$prefix}btn-disabled-color);
-      background-color: var(--#{$prefix}btn-disabled-bg);
-      border-color: var(--#{$prefix}btn-disabled-border-color);
-      opacity: var(--#{$prefix}btn-disabled-opacity);
-    }
-  }
-}
-
-.df-btn-xl {
-  @include button-size($df-btn-padding-y-xl, $df-btn-padding-x-xl, $df-btn-font-size-xl, $df-btn-border-radius-xl);
-  min-width: var(--#{$prefix}btn-min-width-xl);
-}
-
-// Spaced button group override
-.btn-group {
-  --#{$prefix}btn-group-spaced-margin-bottom: #{$df-btn-group-spaced-margin-bottom};
-  --#{$prefix}btn-group-spaced-margin-end: #{$df-btn-group-spaced-margin-end};
-
-  &.df-btn-group-spaced {
-    flex-wrap: wrap;
-
-    > .btn {
-      flex: 0 1 auto;
-      margin-bottom: var(--#{$prefix}btn-group-spaced-margin-bottom);
-      @include ltr {
-        margin-right: var(--#{$prefix}btn-group-spaced-margin-end);
-      }
-      @include rtl {
-        margin-left: var(--#{$prefix}btn-group-spaced-margin-end);
-      }
-    }
-
-    &.btn-group-sm {
-      @include df-reset-buttongroup-radius($btn-border-radius-sm);
-    }
-
-    &.btn-group-lg {
-      @include df-reset-buttongroup-radius($btn-border-radius-lg);
-    }
-
-    &:not(.btn-group-sm):not(.btn-group-lg) {
-      @include df-reset-buttongroup-radius($btn-border-radius);
-    }
-  }
-}
-
-// btn-link
-// Make a button look and behave like a link
-.btn-link {
-  --#{$prefix}btn-link-text-decoration: #{$df-btn-link-td};
-  --#{$prefix}btn-link-hover-text-decoration: #{$df-btn-link-hover-td};
-  --#{$prefix}btn-link-focus-text-decoration: #{$df-btn-link-focus-td};
-  --#{$prefix}btn-link-active-text-decoration: #{$df-btn-link-active-td};
-  --#{$prefix}btn-padding-x: #{$df-btn-link-padding-x};
-  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-  --#{$prefix}btn-hover-bg: #{$df-btn-link-hover-bg-color};
-  --#{$prefix}btn-active-bg: #{$df-btn-link-active-bg-color};
-  --#{$prefix}btn-focus-only-color: var(--#{$prefix}link-color);
-  --#{$prefix}btn-active-color: #{$df-btn-link-active-color}; // override BS that does not have a var
-
-  text-decoration: var(--#{$prefix}btn-link-text-decoration);
-
-  &.btn-lg {
-    --#{$prefix}btn-padding-x: #{$df-btn-link-padding-x-lg};
-  }
-
-  &.btn-sm {
-    --#{$prefix}btn-padding-x: #{$df-btn-link-padding-x-sm};
-  }
-
-  &:disabled,
-  &.disabled {
-    color: var(--#{$prefix}btn-disabled-color);
-    text-decoration: var(--#{$prefix}btn-link-text-decoration);
-  }
-
-  &:not(:disabled):not(.disabled) {
-    &:hover {
-      text-decoration: var(--#{$prefix}btn-link-hover-text-decoration);
-    }
-
-    &:active,
-    &.active {
-      text-decoration: var(--#{$prefix}btn-link-active-text-decoration);
-    }
-
-    &:focus-visible {
-      text-decoration: var(--#{$prefix}btn-link-focus-text-decoration);
-      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
-
-      &:hover:not(:active) {
-        --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-hover-box-shadow-color};
-      }
-
-      &:active {
-        color: var(--#{$prefix}btn-active-color);
-        --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-active-box-shadow-color};
-      }
-    }
-  }
-}
-
-// Modify actual button from bootstrap
-@each $colorClass, $color in $mapped-theme-colors {
-  $bgHoverColor: shades-css-var-brand2023(
-    varWithDefault(
-      'button-solid-basic-color-' + #{$color} + '-hovered-background',
-      'color-' + #{$color} + '-main-hovered-background'
-    ),
-    $color,
-    'bg-hover-color'
-  );
-  $bgActiveColor: shades-css-var-brand2023(
-    varWithDefault(
-      'button-solid-basic-color-' + #{$color} + '-pressed-background',
-      'color-' + #{$color} + '-main-pressed-background'
-    ),
-    $color,
-    'bg-active-color'
-  );
-  $bgFocusOnlyColor: shades-css-var-brand2023(
-    varWithDefault(
-      'button-solid-basic-color-' + #{$color} + '-default-background',
-      'color-' + #{$color} + '-main-default-background'
-    ),
-    $color,
-    'bg-color'
-  );
-
-  .btn-#{$colorClass} {
-    // stylelint-disable custom-property-no-missing-var-function
-    --#{$prefix}btn-color: #{shades-css-var-brand2023(
-        varWithDefault(
-          'button-solid-basic-color-' + #{$color} + '-default-foreground',
-          'color-' + #{$color} + '-main-default-foreground'
-        ),
-        $color,
-        'bg-color',
-        true
-      )};
-    --#{$prefix}btn-bg: #{shades-css-var-brand2023(
-        varWithDefault(
-          'button-solid-basic-color-' + #{$color} + '-default-background',
-          'color-' + #{$color} + '-main-default-background'
-        ),
-        $color,
-        'bg-color'
-      )};
-    --#{$prefix}btn-border-color: #{shades-css-var-brand2023(
-        varWithDefault(
-          'button-solid-basic-color-' + #{$color} + '-default-border',
-          'color-' + #{$color} + '-main-default-border'
-        ),
-        $color,
-        'bg-color'
-      )};
-    --#{$prefix}btn-hover-color: #{shades-css-var-brand2023(
-        varWithDefault(
-          'button-solid-basic-color-' + #{$color} + '-hovered-foreground',
-          'color-' + #{$color} + '-main-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-brand2023(
-        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: #{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(
-        varWithDefault(
-          'button-solid-basic-color-' + #{$color} + '-default-foreground',
-          'color-' + #{$color} + '-main-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-brand2023(
-        varWithDefault(
-          'button-solid-basic-color-' + #{$color} + '-default-border',
-          'color-' + #{$color} + '-main-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: #{variable-switch-brand2023(
-          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);
-    }
-
-    &:focus-visible:hover:not(:active) {
-      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-          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(
-          varWithDefault(
-            'button-solid-basic-color-' + #{$color} + '-pressed-border',
-            'color-' + #{$color} + '-main-pressed-border'
-          ),
-          $df-btn-focus-active-box-shadow-color
-        )};
-    }
-  }
-
-  .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',
-        $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-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-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: #{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,
-        '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: #{variable-switch-brand2023(
-          'button-solid-mirror-color-' + #{$color} + '-default-border',
-          var(--#{$prefix}btn-bg)
-        )};
-
-      &:not(:active):not(:hover) {
-        color: var(--#{$prefix}btn-color);
-        background-color: var(--#{$prefix}btn-bg);
-        border-color: var(--#{$prefix}btn-bg);
-      }
-
-      &:hover {
-        --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-            'button-solid-mirror-color-' + #{$color} + '-hovered-border',
-            var(--#{$prefix}btn-hover-bg)
-          )};
-      }
-
-      &:active {
-        --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-            'button-solid-mirror-color-' + #{$color} + '-pressed-border',
-            var(--#{$prefix}btn-active-bg)
-          )};
-      }
-    }
-  }
-
-  .btn-outline-#{$colorClass} {
-    // stylelint-disable custom-property-no-missing-var-function
-    --#{$prefix}btn-color: #{shades-css-var-brand2023(
-        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(
-        varWithDefault(
-          'button-outline-basic-color-' + #{$color} + '-default-border',
-          'color-' + #{$color} + '-alt-default-border'
-        ),
-        $color,
-        'border-color'
-      )};
-    --#{$prefix}btn-hover-color: #{shades-css-var-brand2023(
-        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(
-        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(
-        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: #{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(
-        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(
-        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(
-        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(
-        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(
-        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(
-        varWithDefault(
-          'button-outline-basic-color-' + #{$color} + '-activeHovered-foreground',
-          'color-' + #{$color} + '-alt-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-brand2023(
-        varWithDefault(
-          'df-button-outline-basic-color-#{$color}-default-border',
-          'color-' + #{$color} + '-alt-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: #{variable-switch-brand2023(
-          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);
-    }
-
-    &:focus-visible:hover:not(:active):not(.active) {
-      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-          varWithDefault(
-            'button-outline-basic-color-' + #{$color} + '-hovered-border',
-            'color-' + #{$color} + '-alt-hovered-border'
-          ),
-          $df-btn-outline-focus-hover-box-shadow-color
-        )};
-    }
-
-    &:focus-visible:active,
-    &.active:focus-visible {
-      --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-          varWithDefault(
-            'button-outline-basic-color-' + #{$color} + '-pressed-border',
-            'color-' + #{$color} + '-alt-pressed-border'
-          ),
-          $df-btn-outline-focus-active-box-shadow-color
-        )};
-    }
-  }
-
-  .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',
-        $color,
-        'bg-color',
-        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',
-        $color,
-        'bg-hover-color',
-        false,
-        true
-      )};
-    --#{$prefix}btn-hover-border-color: var(--#{$prefix}btn-hover-color);
-    --#{$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: #{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,
-        'bg-active-color',
-        false,
-        true
-      )};
-    --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-active-color);
-    --#{$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: #{variable-switch-brand2023(
-          'button-outline-mirror-color-' + #{$color} + '-default-border',
-          var(--#{$prefix}btn-color)
-        )};
-
-      &:not(:active):not(:hover) {
-        color: var(--#{$prefix}btn-color);
-      }
-
-      &:hover {
-        --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-            'button-outline-mirror-color-' + #{$color} + '-hovered-border',
-            var(--#{$prefix}btn-hover-color)
-          )};
-      }
-
-      &:active {
-        --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-            'button-outline-mirror-color-' + #{$color} + '-pressed-border',
-            var(--#{$prefix}btn-active-color)
-          )};
-      }
-    }
-  }
-
-  .btn-outline-#{$colorClass}.df-btn-tertiary {
-    --#{$prefix}btn-border-color: transparent;
-
-    @if $isBrand2023 {
-      --#{$prefix}btn-bg: transparent;
-
-      --#{$prefix}btn-color: var(
-        --#{$prefix}button-text-basic-color-#{$color}-default-foreground,
-        var(--#{$prefix}color-#{$color}-alt-default-foreground)
-      );
-
-      --#{$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,
-        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,
-        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,
-        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-border-color: var(
-        --#{$prefix}button-text-basic-color-#{$color}-activeHovered-background,
-        var(--#{$prefix}color-#{$color}-alt-activeHovered-background)
-      );
-    }
-
-    --#{$prefix}box-shadow-color: #{variable-switch-brand2023(
-        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(
-        varWithDefault(
-          'button-text-basic-color-#{$color}-default-foreground',
-          'color-' + #{$color} + '-alt-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(
-          varWithDefault(
-            'button-outline-basic-color-' + #{$color} + '-hovered-border',
-            'color-' + #{$color} + '-alt-hovered-border'
-          ),
-          $df-btn-outline-focus-hover-box-shadow-color
-        )};
-    }
-  }
-
-  .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);
-    --#{$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);
-    }
-  }
-
-  .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-#{$colorClass} {
-        --#{$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
-          )};
-      }
-    }
-  }
-}