@design-factory/design-factory 15.2.3 → 16.0.1

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

@@ -2,12 +2,18 @@
 
 .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: transparent;
-  --#{$prefix}btn-focus-only-border-color: transparent;
+  --#{$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};
+  --#{$prefix}inner-box-shadow-color: #{$df-btn-bg-color};
 
   display: var(--#{$prefix}btn-display);
   align-items: center;
@@ -15,7 +21,7 @@
 
   &.disabled,
   &:disabled {
-    cursor: $df-btn-cursor-disabled;
+    cursor: var(--#{$prefix}btn-cursor-disabled);
     pointer-events: auto; // override
   }
   [class*='icon-']:only-of-type {
@@ -29,16 +35,7 @@
     }
   }
 
-  &:not(:disabled):not(.disabled) {
-    .show > &.dropdown-toggle {
-      &:not(.nav-link) {
-        color: var(--#{$prefix}btn-active-color);
-        background-color: var(--#{$prefix}btn-active-bg);
-      }
-    }
-  }
-
-  &:focus:not(:hover) {
+  &:focus: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);
@@ -53,6 +50,13 @@
   }
 }
 
+.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)};
@@ -87,28 +91,46 @@
 }
 
 .btn-check {
-  --#{$prefix}btn-check-active-hover-color: #{$body-color};
-  --#{$prefix}btn-check-active-hover-bg: transparent;
-  --#{$prefix}btn-check-active-hover-border-color: transparent;
-
-  &:checked {
+  &:focus:not(:checked):not(:hover) { // override BS (issue to open)
     + .btn {
-      &:hover {
-        color: var(--#{$prefix}btn-check-active-hover-color);
-        background-color: var(--#{$prefix}btn-check-active-hover-bg);
-        border-color: var(--#{$prefix}btn-check-active-hover-border-color); 
+      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 variable-exists(df-btn-group-hover-box-shadow-color) {
+    &:focus:not(:checked):hover { // override BS (issue to open)
+      + .btn {
+        --#{$prefix}box-shadow-color: #{$df-btn-group-hover-box-shadow-color};
       }
     }
   }
+  @if variable-exists(df-btn-group-checked-box-shadow-color) {
+    &:focus:checked { // override BS (issue to open)
+      + .btn {
+        --#{$prefix}box-shadow-color: #{$df-btn-group-checked-box-shadow-color};
+      }
+    }
+  }
+  &:focus {
+    + .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: $df-btn-cursor-disabled;
+      cursor: var(--#{$prefix}btn-cursor-disabled);
       pointer-events: auto;
-      color: var(--df-btn-disabled-color);
-      background-color: var(--df-btn-disabled-bg);
-      border-color: var(--df-btn-disabled-border-color);
-      opacity: var(--df-btn-disabled-opacity);
+      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);
     }
   }
 }
@@ -125,8 +147,8 @@
 
 // Spaced button group override
 .btn-group {
-  --#{$prefix}btn-group-spaced-margin-bottom: #{$df-checkbox-radio-margin-bottom};
-  --#{$prefix}btn-group-spaced-margin-end: #{$df-checkbox-radio-margin-end};
+  --#{$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;
@@ -163,10 +185,11 @@
   --#{$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-focus-box-shadow};
+  --#{$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);
 
@@ -192,57 +215,99 @@
     }
     &:focus {
       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 $color, $value in $theme-colors {
-  $hoverColor: df-getBGHoverColor($color);
-  $activeColor: df-getBGActiveColor($color);
-  $secondaryHoverColor: df-getBGSecondaryHoverColor($color);
-  $secondaryActiveColor: df-getBGSecondaryActiveColor($color);
+  $bgHoverColor: shades-css-var($color, 'bg-hover-color');
+  $bgActiveColor: shades-css-var($color, 'bg-active-color');
+  $bgFocusOnlyColor: shades-css-var($color, 'bg-color');
 
   .btn-#{$color} {
     // stylelint-disable custom-property-no-missing-var-function
-    --#{$prefix}btn-hover-color: #{color-contrast($hoverColor)};
-    --#{$prefix}btn-hover-bg: #{$hoverColor};
-    --#{$prefix}btn-hover-border-color: #{$hoverColor};
-    --#{$prefix}btn-active-color: #{color-contrast($activeColor)};
-    --#{$prefix}btn-active-bg: #{$activeColor};
+    --#{$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-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-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: #{var(--#{$prefix}btn-hover-color)};
-    --#{$prefix}btn-focus-only-bg: #{var(--#{$prefix}btn-hover-bg)};
-    --#{$prefix}btn-focus-only-border-color: #{var(--#{$prefix}btn-hover-border-color)};
+    --#{$prefix}btn-focus-only-color: #{shades-css-var($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')};
     // stylelint-enable custom-property-no-missing-var-function
+    &:focus {
+      --#{$prefix}inner-box-shadow-color: var(--#{$prefix}btn-color);
+      --#{$prefix}btn-focus-box-shadow: #{$df-btn-focus-box-shadow}; // override BS
+      --#{$prefix}box-shadow-color: #{$df-btn-focus-box-shadow-color};
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+    &:focus:hover:not(:active) {
+      --#{$prefix}box-shadow-color: #{$df-btn-focus-hover-box-shadow-color};
+    }
+    &:focus:active {
+      --#{$prefix}box-shadow-color: #{$df-btn-focus-active-box-shadow-color};
+    }
   }
 
   .btn-outline-#{$color} {
-    --#{$prefix}btn-hover-color: #{color-contrast($body-bg, $value)};
-    --#{$prefix}btn-hover-bg: #{$secondaryHoverColor};
+    // 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-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: #{color-contrast($secondaryActiveColor, $activeColor)};
-    --#{$prefix}btn-active-bg: #{$secondaryActiveColor};
-    --#{$prefix}btn-focus-only-color: #{$value};
+    --#{$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-subtle-active-color')};
+    --#{$prefix}btn-focus-only-color: #{shades-css-var($color, 'text-color')};
     --#{$prefix}btn-focus-only-bg: #{var(--#{$prefix}btn-bg)};
-    --#{$prefix}btn-focus-only-border-color: #{$value};
-    --#{$prefix}btn-check-active-hover-color: #{color-contrast($hoverColor)};
-    --#{$prefix}btn-check-active-hover-bg: #{$hoverColor};
-    --#{$prefix}btn-check-active-hover-border-color: #{$hoverColor};
+    --#{$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-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')};
+      // stylelint-enable custom-property-no-missing-var-function
+    &:focus {
+      --#{$prefix}btn-focus-box-shadow: #{$df-btn-focus-box-shadow}; // override BS
+      --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-box-shadow-color};
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+    &:focus:hover:not(:active):not(.active) {
+      --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-hover-box-shadow-color};
+    }
+    &:focus:active, &.active:focus {
+      --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-active-box-shadow-color};
+    }
   }
 
-  .btn-check {
+  .btn-check { // override default behavior of outline in case of btn-check
     &:checked {
       + .btn-outline-#{$color} {
-        --#{$prefix}btn-active-color: #{color-contrast($value)};
-        --#{$prefix}btn-active-bg: #{$value};
-        --#{$prefix}btn-active-border-color: #{$value};
+        --#{$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)};
       }
     }
   }

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

@@ -6,12 +6,13 @@ $df-btn-icononly-border-width: 0 !default;
 $df-btn-icononly-padding-x: 0 !default;
 $df-btn-icononly-padding-y: 0 !default;
 $df-btn-icon-margin-end: 0.25em !default;
-$df-btn-link-hover-bg-color: $df-disabled-bg-color !default;
+$df-btn-link-hover-bg-color: $df-hover-bg-color !default;
 $df-btn-link-active-bg-color: $df-btn-link-hover-bg-color !default;
+$df-btn-link-active-color: $btn-link-hover-color !default;
 $df-btn-disabled-bg-color: $df-disabled-bg-color !default;
 $df-btn-disabled-border-color: $df-btn-disabled-bg-color !default;
-$df-btn-disabled-text-color: $df-disabled-color !default;
-$df-btn-outline-disabled-text-color: $df-disabled-color !default;
+$df-btn-disabled-text-color: var(--#{$prefix}disabled-color) !default;
+$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;
@@ -24,4 +25,17 @@ $df-btn-link-active-td: none !default;
 $df-btn-link-padding-x-sm: 0.5rem !default;
 $df-btn-link-padding-x: $btn-padding-x-sm !default;
 $df-btn-link-padding-x-lg: $btn-padding-x !default;
-$df-btn-cursor-disabled: $df-disabled-cursor !default;
+$df-btn-cursor-disabled: var(--#{$prefix}disabled-cursor) !default;
+$df-btn-group-spaced-margin-end: 0.75rem !default; // replace $df-checkbox-radio-margin-end
+$df-btn-group-spaced-margin-bottom: 0.5rem !default; // replace $df-checkbox-radio-margin-bottom
+$df-btn-focus-box-shadow-blur: 0 !default;
+$df-btn-focus-box-shadow-color: rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5) !default;
+$df-btn-focus-box-shadow: $df-focused-box-shadow !default; // this value is the default value in buttons.scss of bootstrap
+$df-btn-focus-hover-box-shadow-color: $df-btn-focus-box-shadow-color !default;
+$df-btn-focus-active-box-shadow-color: $df-btn-focus-box-shadow-color !default;
+$df-btn-outline-focus-hover-box-shadow-color: $df-btn-focus-box-shadow-color !default;
+$df-btn-outline-focus-active-box-shadow-color: $df-btn-focus-box-shadow-color !default;
+$df-btn-check-active-property: 'bg-color' !default;
+$df-btn-bg-color: transparent !default;
+$df-btn-focus-only-bg-color: transparent !default;
+$df-btn-outline-focus-box-shadow-color: $df-btn-focus-box-shadow-color !default;

package/styles/scss/components/button/_button_container.scss

@@ -1,6 +1,6 @@
 @use 'sass:color';
 
-@each $color, $value in $theme-colors {
+@each $state, $value in $theme-colors {
   $colorbtn: color-contrast($value);
   $hover-background: if($colorbtn == $color-contrast-light, shade-color($value, $btn-hover-bg-shade-amount), tint-color($value, $btn-hover-bg-tint-amount));
   $hover-border: if($colorbtn == $color-contrast-light, shade-color($value, $btn-hover-border-shade-amount), tint-color($value, $btn-hover-border-tint-amount));
@@ -13,53 +13,17 @@
   $active-border-outline: $value;
   $active-color-outline: color-contrast($active-background-outline);
 
+  // this code is because
+  // .btn-check:focus + &
+  // from the file _buttons.scss is not working with the wrapper
   #{$df-css-namespace-selector} {
-    .btn-check:focus {
-      & + .btn-#{$color} {
-        color: $hover-color;
-        @include gradient-bg($hover-background);
-        border-color: $hover-border;
-        @if $enable-shadows {
-          @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(color.mix($value, $value, 15%), .5));
-        } @else {
-          // Avoid using mixin so we can pass custom focus shadow properly
-          box-shadow: 0 0 0 $btn-focus-width rgba(color.mix($value, $value, 15%), .5);
-        }
-      }
-      & + .btn-outline-#{$color} {
-        box-shadow: 0 0 0 $btn-focus-width rgba($value, .5);
-      }
-    }
     .btn-check:checked,
     .btn-check:active {
-      & + .btn-#{$color} {
-        color: $active-color;
-        background-color: $active-background;
-        border-color: $active-border;
-      }
-      & + .btn-outline-#{$color} {
-        color: $active-color-outline;
-        background-color: $active-background-outline;
-        border-color: $active-border-outline;
-      }
-
-      &:focus {
-        & + .btn-#{$color} {
-          @if $enable-shadows {
-            @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(color.mix($colorbtn, $value, 15%), .5));
-          } @else {
-            // Avoid using mixin so we can pass custom focus shadow properly
-            box-shadow: 0 0 0 $btn-focus-width rgba(color.mix($colorbtn, $value, 15%), .5);
-          }
-        }
-        & + .btn-outline-#{$color} {
-          @if $enable-shadows {
-            @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($value, .5));
-          } @else {
-            // Avoid using mixin so we can pass custom focus shadow properly
-            box-shadow: 0 0 0 $btn-focus-width rgba($value, .5);
-          }
-        }
+      & + .btn-#{$state}, & + .btn-outline-#{$state} {
+        color: var(--#{$prefix}btn-active-color);
+        background-color: var(--#{$prefix}btn-active-bg);
+        border-color: var(--#{$prefix}btn-active-border-color);
+        background-image: if($enable-gradients, none, null);
       }
     }
   }

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

@@ -2,72 +2,104 @@
   --#{$prefix}btn-font-weight: #{$df-card-focusable-font-weight};
 }
 
-.card.btn-outline-primary {
-  display: block;
-  @include rtl {
-    text-align: right;
-  }
-  @include ltr {
-    text-align: left;
-  }
-  color: $df-card-focusable-color;
-  border: $df-card-focusable-border;
-  border-radius: $df-card-focusable-border-radius;
-  height: inherit;
+// TODO instead of creating css var for the card here we could override the css var
+// of the btn-outline-primary in the card for our behavior
+.card {
+  --#{$prefix}card-focusable-border-color: #{$df-card-focusable-border-color};
+  --#{$prefix}card-focusable-hover-border-color: #{$df-card-focusable-hover-border-color};
+  --#{$prefix}card-focusable-active-border-color: #{$df-card-focusable-active-border-color};
+  --#{$prefix}card-focusable-border-radius: #{$df-card-focusable-border-radius};
+  --#{$prefix}card-focusable-color: #{$df-card-focusable-color};
+  --#{$prefix}card-focusable-hover-color: #{$df-card-focusable-hover-color};
+  --#{$prefix}card-focusable-bg-color: #{$df-card-focusable-bg-color};
+  --#{$prefix}card-focusable-disabled-color: #{$df-card-focusable-disabled-color};
+  --#{$prefix}card-focusable-disabled-opacity: #{$df-card-focusable-disabled-opacity};
+  --#{$prefix}card-focusable-disabled-cursor: #{$df-card-focusable-disabled-cursor};
+  --#{$prefix}card-focusable-disabled-background: #{$df-card-focusable-disabled-background};
+  --#{$prefix}card-focusable-font-weight: #{$df-card-focusable-font-weight};
+  --#{$prefix}card-selected-bg-color: #{$df-card-selected-bg-color};
+  --#{$prefix}btn-active-bg: var(--#{$prefix}card-selected-bg-color);
+  --#{$prefix}card-selected-border-color: #{$df-card-selected-border-color};
+  --#{$prefix}card-selected-hover-bg-color: #{$df-card-selected-hover-bg-color};
+  --#{$prefix}accordion-card-padding-start: #{$df-accordion-card-padding-start};
+  --#{$prefix}accordion-card-end-padding-end: #{$df-accordion-card-end-padding-end};
+  --#{$prefix}accordion-card-end-padding-start: #{$df-accordion-card-end-padding-start};
+  --#{$prefix}accordion-card-background-color: #{$df-accordion-card-background-color};
+  --#{$prefix}accordion-card-last-border-bottom-width: #{$df-accordion-card-last-border-bottom-width};
+  --#{$prefix}accordion-card-last-body-border-top: #{$df-accordion-card-last-body-border-top};
+  --#{$prefix}accordion-between-card-border-radius: #{$df-accordion-between-card-border-radius};
+  --#{$prefix}accordion-card-last-body-border-top: #{$df-accordion-card-last-body-border-top};
 
-  &:not([aria-disabled='true']):not([disabled]):not(.disabled) {
-    &.df-card-selected {
-      // TODO change the color also for accessibility reason if we change the main color.
-      background-color: $df-card-selected-bg-color;
-      border-color: $df-card-selected-border-color;
-      &:hover {
-        background-color: $df-card-selected-hover-bg-color;
-      }
-    }
-    &:hover {
-      background-color: $df-card-focusable-background;
-      border: $df-card-focusable-border-hover;
-      color: $df-card-focusable-hover-color;
+  &.btn-outline-primary {
+    display: block;
+    @include rtl {
+      text-align: right;
     }
-    &:active {
-      background-color: $df-card-focusable-background;
-      border: $df-card-focusable-border-active;
+    @include ltr {
+      text-align: left;
     }
-    &:focus:not(:hover) {
-      color: $df-card-focusable-color;
+    color: var(--#{$prefix}card-focusable-color);
+    border: var(--#{$prefix}card-focusable-border-color);
+    border-radius: var(--#{$prefix}card-focusable-border-radius);
+    height: inherit;
+
+    &:not([aria-disabled='true']):not([disabled]):not(.disabled) {
+      &.df-card-selected {
+        // TODO change the color also for accessibility reason if we change the main color.
+        background-color: var(--#{$prefix}card-selected-bg-color);
+        border-color: var(--#{$prefix}card-selected-border-color);
+        &:hover {
+          background-color: var(--#{$prefix}card-selected-hover-bg-color);
+        }
+      }
+      &:hover {
+        background-color: var(--#{$prefix}card-focusable-bg-color);
+        border: var(--#{$prefix}card-focusable-hover-border-color);
+        color: var(--#{$prefix}card-focusable-hover-color);
+        &:active {
+          background-color: var(--#{$prefix}btn-active-bg);
+          border: var(--#{$prefix}card-focusable-active-border-color);
+        }
+      }
+      &:active {
+        border: var(--#{$prefix}card-focusable-active-border-color);
+      }
+      &:focus:not(:hover) {
+        color: var(--#{$prefix}card-focusable-color);
+      }
     }
-  }
 
-  &[aria-disabled='true'],
-  &.disabled,
-  &[disabled] {
-    color: $df-card-focusable-disabled-color;
-    background-color: $df-card-focusable-disabled-background;
-    opacity: $df-card-focusable-disabled-opacity;
-    cursor: $df-card-focusable-disabled-cursor;
+    &[aria-disabled='true'],
+    &.disabled,
+    &[disabled] {
+      color: var(--#{$prefix}card-focusable-disabled-color);
+      background-color: var(--#{$prefix}card-focusable-disabled-background);
+      opacity: var(--#{$prefix}card-focusable-disabled-opacity);
+      cursor: var(--#{$prefix}card-focusable-disabled-cursor);
+    }
   }
 }
 
 .df-accordion-card.card, .df-accordion-card > .card {
-    .card-header {
-      padding-left: $df-accordion-card-padding-start;
-      border-bottom-width: $df-accordion-card-last-border-bottom-width;
-      &.df-card-header-end {
-        padding-right: $df-accordion-card-end-padding-end;
-        padding-left: $df-accordion-card-end-padding-start;
-      }
-      background-color: $df-accordion-card-background-color;
-    }
-    .card-body {
-      border-top: $df-accordion-card-last-body-border-top;
-    }
-    &:not(:last-of-type) {
-      border-bottom-left-radius: $df-accordion-between-card-border-radius;
-      border-bottom-right-radius: $df-accordion-between-card-border-radius;
-      border-bottom-width: $df-accordion-card-last-border-bottom-width;
-    }
-    &:not(:first-of-type) {
-      border-top-left-radius: $df-accordion-between-card-border-radius;
-      border-top-right-radius: $df-accordion-between-card-border-radius;
+  .card-header {
+    padding-left: var(--#{$prefix}accordion-card-padding-start);
+    border-bottom-width: var(--#{$prefix}accordion-card-last-border-bottom-width);
+    &.df-card-header-end {
+      padding-right: var(--#{$prefix}accordion-card-end-padding-end);
+      padding-left: var(--#{$prefix}accordion-card-end-padding-start);
     }
+    background-color: var(--#{$prefix}accordion-card-background-color);
+  }
+  .card-body {
+    border-top: var(--#{$prefix}accordion-card-last-body-border-top);
+  }
+  &:not(:last-of-type) {
+    border-bottom-left-radius: var(--#{$prefix}accordion-between-card-border-radius);
+    border-bottom-right-radius: var(--#{$prefix}accordion-between-card-border-radius);
+    border-bottom-width: var(--#{$prefix}accordion-card-last-border-bottom-width);
   }
+  &:not(:first-of-type) {
+    border-top-left-radius: var(--#{$prefix}accordion-between-card-border-radius);
+    border-top-right-radius: var(--#{$prefix}accordion-between-card-border-radius);
+  }
+}

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

@@ -1,22 +1,22 @@
-$df-card-focusable-border: $border-width solid $border-color !default;
-$df-card-focusable-border-hover: $border-width solid $primary !default;
-$df-card-focusable-border-active: $border-width solid $dark-primary !default;
+$df-card-focusable-border-color: $border-width solid $border-color !default;
+$df-card-focusable-hover-border-color: $border-width solid shades-css-var('primary', 'border-color') !default;
+$df-card-focusable-active-border-color: $border-width solid $dark-primary !default;
 $df-card-focusable-border-radius: $border-radius-sm !default;
 $df-card-focusable-color: $body-color !default; // todo is it linked to body-color ?
-$df-card-focusable-hover-color: $body-color !default;
-$df-card-focusable-background: transparent !default;
-$df-card-focusable-disabled-color: $df-disabled-color !default;
-$df-card-focusable-disabled-opacity: $df-disabled-opacity !default;
-$df-card-focusable-disabled-cursor: $df-disabled-cursor !default;
-$df-card-focusable-disabled-background: $df-disabled-bg-color !default;
+$df-card-focusable-hover-color: $body-color !default; // todo link this to the css var
+$df-card-focusable-bg-color: transparent !default;
+$df-card-focusable-disabled-color: var(--#{$prefix}disabled-color) !default;
+$df-card-focusable-disabled-opacity: var(--#{$prefix}disabled-opacity) !default;
+$df-card-focusable-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
+$df-card-focusable-disabled-background: var(--#{$prefix}disabled-bg-color) !default;
 $df-card-focusable-font-weight: $font-weight-normal !default; 
-$df-card-selected-bg-color: df-getBGColor('info') !default;
-$df-card-selected-border-color: $primary !default;
-$df-card-selected-hover-bg-color: df-getBGSecondaryActiveColor('primary') !default;
+$df-card-selected-bg-color: shades-css-var('teal', 'bg-subtle-color') !default;
+$df-card-selected-border-color: shades-css-var('teal', 'border-color') !default; // todo link this to the css var
+$df-card-selected-hover-bg-color: shades-css-var('teal', 'bg-subtle-hover-color') !default; // todo link this to the css var
 $df-accordion-card-padding-start: 0.3125rem !default;
 $df-accordion-card-end-padding-end: $df-accordion-card-padding-start !default;
 $df-accordion-card-end-padding-start: $accordion-padding-x !default;
-$df-accordion-card-background-color: $body-bg !default;
+$df-accordion-card-background-color: $body-bg !default; // todo link this to the css var
 $df-accordion-card-last-border-bottom-width: 0px !default;
 $df-accordion-card-last-body-border-top: $border-width $border-style $gray-200 !default;
 $df-accordion-between-card-border-radius: 0px !default;

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

@@ -1,7 +1,16 @@
 .carousel {
+  --#{$prefix}carousel-indicator-bg-color: #{$df-carousel-indicator-bg-color};
+  --#{$prefix}carousel-indicator-bg-color-hover: #{$df-carousel-indicator-bg-color-hover};
+  --#{$prefix}carousel-indicator-border-radius: #{$df-carousel-indicator-border-radius};
+  --#{$prefix}carousel-outline: #{$df-carousel-outline};
+  --#{$prefix}carousel-indicator-bottom: #{$df-carousel-indicator-bottom};
+  --#{$prefix}carousel-caption-bottom: #{$df-carousel-caption-bottom};
+  --#{$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 {
-    outline: $df-carousel-outline;
-    box-shadow: $df-focused-box-shadow;
+    outline: var(--#{$prefix}carousel-outline);
+    box-shadow: $df-carousel-focused-box-shadow;
   }
   &.df-carousel-isFirst {
     .carousel-control-prev-icon {
@@ -14,39 +23,29 @@
   &.df-carousel-isLast {
     .carousel-control-next-icon {
       display: none;
-      cursor: $df-disabled-cursor;
+      cursor: var(--#{$prefix}disabled-cursor);
     }
     .carousel-control-next {
       cursor: initial;
     }
   }
+  .carousel-control-prev-icon,
   .carousel-control-next-icon {
-    //add
-    border-radius: $df-carousel-indicator-border-radius;
-    background-color: $df-carousel-indicator-bg-color;
-    &:hover {
-      background-color: $df-carousel-indicator-bg-color-hover;
-    }
-  }
-  .carousel-control-prev-icon {
-    border-radius: $df-carousel-indicator-border-radius;
-    background-color: $df-carousel-indicator-bg-color;
+    border-radius: var(--#{$prefix}carousel-indicator-border-radius);
+    background-color: var(--#{$prefix}carousel-indicator-bg-color);
     &:hover {
-      background-color: $df-carousel-indicator-bg-color-hover;
+      background-color: var(--#{$prefix}carousel-indicator-bg-color-hover);
     }
-  }
-  .carousel-control-prev-icon,
-  .carousel-control-next-icon {
-    background-size: 50% 50%;
+    background-size: var(--#{$prefix}carousel-indicator-bg-size);
   }
   
   .carousel-caption {
-    background-color: $df-carousel-indicator-bg-color; // add
-    bottom: $df-carousel-caption-bottom; // override
-    padding-bottom: $df-carousel-caption-padding-bottom; // override
-    padding-top: $df-carousel-caption-padding-top; // override as no variable is set
+    background-color: var(--#{$prefix}carousel-indicator-bg-color); // add
+    bottom: var(--#{$prefix}carousel-caption-bottom); // override
+    padding-bottom: var(--#{$prefix}carousel-caption-padding-bottom); // override
+    padding-top: var(--#{$prefix}carousel-caption-padding-top); // override as no variable is set
   }
   .carousel-indicators {
-    bottom: $df-carousel-indicator-bottom; // override
+    bottom: var(--#{$prefix}carousel-indicator-bottom); // override
   }
 }