@design-factory/design-factory 15.2.0

package/styles/scss/components/brand-color/_brand-color.variables.scss

@@ -0,0 +1,158 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+@function df-format-transform-name($color, $action, $params) {
+  $name: $action;
+  @each $param in $params {
+    $name: $name + '-' + $param;
+  }
+  $name: $name + '-' + $color;
+  @return $name;
+}
+
+@function df-transform-loop($arrayIn, $arrayOut, $action, $params...) {
+  @each $color, $value in $arrayIn {
+    $arrayOut: map.merge(
+      (
+        df-format-transform-name($color, $action, $params): meta.call(meta.get-function($action), $value, $params...)
+      ),
+      $arrayOut
+    );
+  }
+  @return $arrayOut;
+}
+
+// Hover color
+$df-colors-transformed: () !default;
+$df-hover-transform: 'darken' !default;
+$df-hover-transform-param: 5% !default;
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$df-colors-transformed: df-transform-loop(
+  $colors,
+  $df-colors-transformed,
+  $df-hover-transform,
+  $df-hover-transform-param
+);
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$df-colors-transformed: df-transform-loop(
+  $theme-colors,
+  $df-colors-transformed,
+  $df-hover-transform,
+  $df-hover-transform-param
+);
+
+$df-active-transform: 'darken' !default;
+$df-active-transform-param: 10% !default;
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$df-colors-transformed: df-transform-loop(
+  $colors,
+  $df-colors-transformed,
+  $df-active-transform,
+  $df-active-transform-param
+);
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$df-colors-transformed: df-transform-loop(
+  $theme-colors,
+  $df-colors-transformed,
+  $df-active-transform,
+  $df-active-transform-param
+);
+
+// init specific variables for dark-colors. For backward compatibility
+// stylelint-disable-next-line scss/dollar-variable-pattern
+$dark-primary: map.get(
+  $df-colors-transformed,
+  $df-active-transform + '-' + $df-active-transform-param + '-primary'
+) !default;
+
+$df-bg-active-transform: 'mix' !default;
+$df-bg-active-transform-param1: $white !default;
+$df-bg-active-transform-param2: 15% !default;
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$df-colors-transformed: df-transform-loop(
+  $colors,
+  $df-colors-transformed,
+  $df-bg-active-transform,
+  $df-bg-active-transform-param1,
+  $df-bg-active-transform-param2
+);
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$df-colors-transformed: df-transform-loop(
+  $theme-colors,
+  $df-colors-transformed,
+  $df-bg-active-transform,
+  $df-bg-active-transform-param1,
+  $df-bg-active-transform-param2
+);
+
+$df-bg-hover-transform: 'mix' !default;
+$df-bg-hover-transform-param1: $white !default;
+$df-bg-hover-transform-param2: 10% !default;
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$df-colors-transformed: df-transform-loop(
+  $colors,
+  $df-colors-transformed,
+  $df-bg-hover-transform,
+  $df-bg-hover-transform-param1,
+  $df-bg-hover-transform-param2
+);
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$df-colors-transformed: df-transform-loop(
+  $theme-colors,
+  $df-colors-transformed,
+  $df-bg-hover-transform,
+  $df-bg-hover-transform-param1,
+  $df-bg-hover-transform-param2
+);
+
+$df-bg-transform: 'mix' !default;
+$df-bg-transform-param1: $white !default;
+$df-bg-transform-param2: 5% !default;
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$df-colors-transformed: df-transform-loop(
+  $colors,
+  $df-colors-transformed,
+  $df-bg-transform,
+  $df-bg-transform-param1,
+  $df-bg-transform-param2
+);
+
+// stylelint-disable-next-line scss/dollar-variable-default
+$df-colors-transformed: df-transform-loop(
+  $theme-colors,
+  $df-colors-transformed,
+  $df-bg-transform,
+  $df-bg-transform-param1,
+  $df-bg-transform-param2
+);
+
+/**
+ * Gradients
+ */
+// stylelint-disable-next-line scss/dollar-variable-pattern
+$gradients: () !default;
+// stylelint-disable-next-line
+$gradients: map-merge(
+  (
+    'gradient-blue': (
+      'from': $blue,
+      'to': $cyan
+    )
+  ),
+  $gradients
+);
+
+// Keep for backward compatibility, must be change with version 8?
+$df-primary-lighten-60: map.get(
+  $df-colors-transformed,
+  $df-bg-hover-transform + '-' + $df-bg-hover-transform-param1 + '-' + $df-bg-hover-transform-param2 + '-' + 'primary'
+) !default;

package/styles/scss/components/breadcrumbs/_breadcrumbs.scss

@@ -0,0 +1,91 @@
+.breadcrumb {
+
+  &.breadcrumb-sm {
+    font-size: $font-size-sm;
+  }
+
+  &.breadcrumb-lg {
+    font-size: $font-size-lg;
+  }
+}
+
+.breadcrumb-item {
+  @include ltr {
+    padding: $df-breadcrumb-item-padding;
+
+    &:before {
+      padding: $df-breadcrumb-item-before-padding;
+    }
+  }
+
+  @include rtl {
+    padding: $df-breadcrumb-item-padding;
+
+    &:before {
+      float: right;
+      padding: $df-breadcrumb-item-before-padding;
+    }
+  }
+
+  &:nth-of-type(2):before {
+    // first item after arrow should not have slash char before text
+    content: $df-breadcrumb-item-before-content;
+  }
+
+  &.active {
+    // active item in bold
+    font-weight: $df-breadcrumb-item-active-font-weight;
+  }
+
+  &.active:before {
+    // no bold for the slash before active item
+    font-weight: $df-breadcrumb-item-normal-font-weight;
+  }
+}
+
+.df-breadcrumb-icon {
+  // hide arrow item
+  display: $df-breadcrumb-item-display;
+}
+
+.df-breadcrumb-icon:before {
+  // custom df class for breadcrumb icon
+  // extends icon-angle-(left or right) class depending on the direction
+  @extend %df-icon-style;
+
+  @include ltr {
+    content: $df-breadcrumb-icon-angle-left-content;
+  }
+
+  @include rtl {
+    content: $df-breadcrumb-icon-angle-right-content;
+  }
+}
+
+// Mobile breakpoint
+@include media-breakpoint-only(xs) {
+  .breadcrumb-item {
+    &:not(:nth-of-type(1)) {
+      // items are hidden
+      display: $df-breadcrumb-item-display;
+    }
+
+    &:nth-last-of-type(2),
+    &:nth-last-of-type(1) {
+      // two last items are displayed
+      display: $df-breadcrumb-item-two-last-items-display;
+    }
+
+    &:nth-last-of-type(2):before {
+      // first item after arrow should not have slash char before text
+      content: $df-breadcrumb-item-before-content;
+    }
+  }
+
+  .df-breadcrumb-icon {
+    // arrow displayed
+    display: $df-breadcrumb-icon-display;
+    color: $df-breadcrumb-icon-color;
+    margin: $df-breadcrumb-icon-margin;
+  }
+}

package/styles/scss/components/breadcrumbs/_breadcrumbs.variables.scss

@@ -0,0 +1,13 @@
+$df-breadcrumb-item-padding: 0rem !default;
+$df-breadcrumb-item-before-padding: 0rem 0.5rem !default;
+$df-breadcrumb-item-before-content: none !default;
+$df-breadcrumb-item-active-font-weight: 500 !default;
+$df-breadcrumb-item-normal-font-weight: normal !default;
+$df-breadcrumb-item-display: none !default;
+$df-breadcrumb-item-two-last-items-display: inline !default;
+
+$df-breadcrumb-icon-display: inline !default;
+$df-breadcrumb-icon-color: $primary !default;
+$df-breadcrumb-icon-margin: 0rem 0.5rem !default;
+$df-breadcrumb-icon-angle-left-content: '\e92a' !default; // icon-angle-left
+$df-breadcrumb-icon-angle-right-content: '\e92b' !default; // icon-angle-right

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

@@ -0,0 +1,249 @@
+@import 'button.utils';
+
+.btn {
+  // DF variables
+  --#{$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;
+
+  display: var(--#{$prefix}btn-display);
+  align-items: center;
+  justify-content: center;
+
+  &.disabled,
+  &:disabled {
+    cursor: $df-btn-cursor-disabled;
+    pointer-events: auto; // override
+  }
+  [class*='icon-']:only-of-type {
+    &::before {
+      @include ltr {
+        margin-right: var(--#{$prefix}btn-icon-margin-end);
+      }
+      @include rtl {
+        margin-left: var(--#{$prefix}btn-icon-margin-end);
+      }
+    }
+  }
+
+  &: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) {
+    color: var(--#{$prefix}btn-focus-only-color);
+    background-color: var(--#{$prefix}btn-focus-only-bg);
+    border-color: var(--#{$prefix}btn-focus-only-border-color);
+  }
+
+  // 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;
+  }
+}
+
+.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 {
+    width: var(--#{$prefix}btn-icononly-size-sm);
+    height: var(--#{$prefix}btn-icononly-size-sm);
+  }
+  &.btn-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 {
+  --#{$prefix}btn-check-active-hover-color: #{$body-color};
+  --#{$prefix}btn-check-active-hover-bg: transparent;
+  --#{$prefix}btn-check-active-hover-border-color: transparent;
+
+  &:checked {
+    + .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); 
+      }
+    }
+  }
+
+  &.disabled, &:disabled {
+    + .btn { 
+      cursor: $df-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);
+    }
+  }
+}
+
+.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-checkbox-radio-margin-bottom};
+  --#{$prefix}btn-group-spaced-margin-end: #{$df-checkbox-radio-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-focus-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);
+
+  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 {
+      text-decoration: var(--#{$prefix}btn-link-focus-text-decoration);
+    }
+  }
+}
+
+// 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);
+
+  .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-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-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)};
+    // stylelint-enable custom-property-no-missing-var-function
+  }
+
+  .btn-outline-#{$color} {
+    --#{$prefix}btn-hover-color: #{color-contrast($body-bg, $value)};
+    --#{$prefix}btn-hover-bg: #{$secondaryHoverColor};
+    --#{$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-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};
+  }
+
+  .btn-check {
+    &:checked {
+      + .btn-outline-#{$color} {
+        --#{$prefix}btn-active-color: #{color-contrast($value)};
+        --#{$prefix}btn-active-bg: #{$value};
+        --#{$prefix}btn-active-border-color: #{$value};
+      }
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+@function df-button-icononly-size($padding-y) {
+  @return calc(#{$btn-line-height * 1em} + #{$padding-y * 2} + #{$btn-border-width * 2});
+}
+
+@mixin df-reset-buttongroup-radius($radius) {
+  // Set back the radius
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-end-radius($radius);
+  }
+  > .btn:nth-child(n + 3),
+  > :not(.btn-check) + .btn,
+  > .btn-group:not(:first-child) > .btn {
+    @include border-start-radius($radius);
+  }
+}

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

@@ -0,0 +1,27 @@
+@use 'sass:map';
+
+$df-btn-display: inline-flex !default;
+$df-btn-icononly-border-radius: 50% !default;
+$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-active-bg-color: $df-btn-link-hover-bg-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-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-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;
+$df-btn-link-focus-td: none !default;
+$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;

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

@@ -0,0 +1,66 @@
+@use 'sass:color';
+
+@each $color, $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));
+  $hover-color: color-contrast($hover-background);
+  $active-background: if($colorbtn == $color-contrast-light, shade-color($value, $btn-active-bg-shade-amount), tint-color($value, $btn-active-bg-tint-amount));
+  $active-color: color-contrast($active-background);
+  $active-border: if($colorbtn == $color-contrast-light, shade-color($value, $btn-active-border-shade-amount), tint-color($value, $btn-active-border-tint-amount));
+
+  $active-background-outline: $value;
+  $active-border-outline: $value;
+  $active-color-outline: color-contrast($active-background-outline);
+
+  #{$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);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+.card.btn {
+  --#{$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;
+
+  &: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;
+    }
+    &:active {
+      background-color: $df-card-focusable-background;
+      border: $df-card-focusable-border-active;
+    }
+    &:focus:not(:hover) {
+      color: $df-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;
+  }
+}
+
+.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;
+    }
+  }