@design-factory/design-factory 17.1.0 → 18.0.0

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

@@ -1,3 +1,4 @@
+@use 'sass:meta';
 @import 'button.utils';
 
 .btn {
@@ -13,7 +14,6 @@
   --#{$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;
@@ -37,7 +37,9 @@
     cursor: var(--#{$prefix}btn-cursor-disabled);
     pointer-events: auto; // override
   }
-  [class*='icon-']:only-of-type {
+
+  [class*='icon-']:only-of-type,
+  [class*='fa-']:only-of-type {
     &::before {
       @include ltr {
         margin-right: var(--#{$prefix}btn-icon-margin-end);
@@ -61,6 +63,10 @@
     opacity: $placeholder-opacity-max;
     pointer-events: none;
   }
+
+  &.df-btn-bg-white:not(:hover):not(:active) {
+    background-color: $df-btn-bg-color-white;
+  }
 }
 
 .btn-close {
@@ -89,13 +95,17 @@
   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};
@@ -108,6 +118,21 @@
 }
 
 .btn-check {
+  &:checked {
+    + .btn:hover {
+      --#{$prefix}btn-active-bg: #{shades-css-var('primary', 'bg-hover-color')};
+      --#{$prefix}btn-active-border-color: #{shades-css-var('primary', 'bg-hover-color')};
+    }
+  }
+
+  &: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 {
@@ -116,7 +141,8 @@
       border-color: var(--#{$prefix}btn-focus-only-border-color);
     }
   }
-  @if variable-exists(df-btn-group-hover-box-shadow-color) {
+
+  @if meta.variable-exists(df-btn-group-hover-box-shadow-color) {
     &:focus-visible:not(:checked):hover {
       // override BS (issue to open)
       + .btn {
@@ -124,7 +150,7 @@
       }
     }
   }
-  @if variable-exists(df-btn-group-checked-box-shadow-color) {
+  @if meta.variable-exists(df-btn-group-checked-box-shadow-color) {
     &:focus-visible:checked {
       // override BS (issue to open)
       + .btn {
@@ -132,6 +158,7 @@
       }
     }
   }
+
   &:focus-visible {
     + .btn {
       // Avoid using mixin so we can pass custom focus shadow properly
@@ -168,6 +195,7 @@
 
   &.df-btn-group-spaced {
     flex-wrap: wrap;
+
     > .btn {
       flex: 0 1 auto;
       margin-bottom: var(--#{$prefix}btn-group-spaced-margin-bottom);
@@ -227,16 +255,20 @@
     &: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};
@@ -274,31 +306,69 @@
     --#{$prefix}btn-focus-shadow-rgb: #{shades-rgb-css-var($color, 'bg-color')};
     // stylelint-enable custom-property-no-missing-var-function
     &:focus-visible {
-      --#{$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-visible:hover:not(:active) {
       --#{$prefix}box-shadow-color: #{$df-btn-focus-hover-box-shadow-color};
     }
+
     &:focus-visible:active {
       --#{$prefix}box-shadow-color: #{$df-btn-focus-active-box-shadow-color};
     }
   }
 
+  .df-btn-#{$color}-mirror {
+    // stylelint-disable custom-property-no-missing-var-function
+    --#{$prefix}btn-color: #{shades-css-var($color, 'text-color', false, true)};
+    --#{$prefix}btn-bg: #{shades-css-var($color, 'bg-color', false, true)};
+    --#{$prefix}btn-border-color: var(--#{$prefix}btn-bg);
+    --#{$prefix}btn-hover-color: #{shades-css-var($color, 'text-color', false, true)};
+    --#{$prefix}btn-hover-bg: #{shades-css-var($color, 'bg-hover-color', false, true)};
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}btn-hover-bg);
+    --#{$prefix}btn-active-color: #{shades-css-var($color, 'text-color', false, true)};
+    --#{$prefix}btn-active-bg: #{shades-css-var($color, 'bg-active-color', false, true)};
+    --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-active-bg);
+    --#{$prefix}btn-disabled-color: #{$df-btn-disabled-text-color};
+    --#{$prefix}btn-disabled-bg: #{$df-btn-disabled-bg-color};
+    --#{$prefix}btn-disabled-border-color: #{$df-btn-disabled-border-color};
+    --#{$prefix}btn-focus-only-color: #{shades-css-var($color, 'text-color', false, true)};
+    --#{$prefix}btn-focus-only-bg: #{$bgFocusOnlyColor};
+    --#{$prefix}btn-focus-only-border-color: #{$bgFocusOnlyColor};
+    // stylelint-enable custom-property-no-missing-var-function
+    &:focus-visible {
+      --#{$prefix}box-shadow-color: var(--#{$prefix}btn-bg);
+
+      &: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: var(--#{$prefix}btn-hover-bg);
+      }
+
+      &:active {
+        --#{$prefix}box-shadow-color: var(--#{$prefix}btn-active-bg);
+      }
+    }
+  }
+
   .btn-outline-#{$color} {
     // stylelint-disable custom-property-no-missing-var-function
     --#{$prefix}btn-color: #{shades-css-var($color, 'text-color')};
     --#{$prefix}btn-border-color: #{shades-css-var($color, 'border-color')};
     --#{$prefix}btn-hover-color: #{shades-css-var($color, 'text-hover-color')};
     --#{$prefix}btn-hover-border-color: #{shades-css-var($color, 'bg-hover-color')};
-    --#{$prefix}btn-hover-bg: #{shades-css-var($color, 'bg-subtle-hover-color')};
+    --#{$prefix}btn-hover-bg: #{shades-css-var($color, 'bg-hover-alt-color')}; //bg-subtle-hover-color
     --#{$prefix}btn-disabled-color: #{$df-btn-outline-disabled-text-color};
     --#{$prefix}btn-disabled-border-color: #{$df-btn-disabled-border-color};
     --#{$prefix}btn-active-color: #{shades-css-var($color, 'bg-active-color')};
     --#{$prefix}btn-active-border-color: #{shades-css-var($color, 'bg-active-color')};
-    --#{$prefix}btn-active-bg: #{shades-css-var($color, 'bg-subtle-active-color')};
+    --#{$prefix}btn-active-bg: #{shades-css-var($color, 'bg-active-alt-color')}; //bg-subtle-active-color
     --#{$prefix}btn-focus-only-color: #{shades-css-var($color, 'text-color')};
     --#{$prefix}btn-focus-only-bg: #{var(--#{$prefix}btn-bg)};
     --#{$prefix}btn-focus-only-border-color: #{shades-css-var($color, 'border-color')};
@@ -312,15 +382,63 @@
       --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-box-shadow-color};
       box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
+
     &:focus-visible:hover:not(:active):not(.active) {
       --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-hover-box-shadow-color};
     }
+
     &:focus-visible:active,
     &.active:focus-visible {
       --#{$prefix}box-shadow-color: #{$df-btn-outline-focus-active-box-shadow-color};
     }
   }
 
+  .df-btn-outline-#{$color}-mirror {
+    // stylelint-disable custom-property-no-missing-var-function
+    --#{$prefix}btn-color: #{shades-css-var($color, 'bg-color', false, true)};
+    --#{$prefix}btn-border-color: var(--#{$prefix}btn-color);
+    --#{$prefix}btn-hover-color: #{shades-css-var($color, 'bg-hover-color', false, true)};
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}btn-hover-color);
+    --#{$prefix}btn-hover-bg: #{shades-css-var($color, 'bg-hover-alt-color', false, true)};
+    --#{$prefix}btn-disabled-color: #{$df-btn-outline-disabled-text-color};
+    --#{$prefix}btn-disabled-border-color: #{$df-btn-disabled-border-color};
+    --#{$prefix}btn-active-color: #{shades-css-var($color, 'bg-active-color', false, true)};
+    --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-active-color);
+    --#{$prefix}btn-active-bg: #{shades-css-var($color, 'bg-active-alt-color', false, true)};
+    --#{$prefix}btn-focus-only-color: #{shades-css-var($color, 'bg-color', false, true)};
+    --#{$prefix}btn-focus-only-border-color: var(--#{$prefix}btn-focus-only-color);
+    // stylelint-enable custom-property-no-missing-var-function
+    &:focus-visible {
+      --#{$prefix}box-shadow-color: var(--#{$prefix}btn-color);
+
+      &:not(:active):not(:hover) {
+        color: var(--#{$prefix}btn-color);
+        border-color: var(--#{$prefix}btn-color);
+      }
+
+      &:hover {
+        --#{$prefix}box-shadow-color: var(--#{$prefix}btn-hover-color);
+      }
+
+      &:active {
+        --#{$prefix}box-shadow-color: var(--#{$prefix}btn-active-color);
+      }
+    }
+  }
+
+  .btn-outline-#{$color}.df-btn-tertiary,
+  .df-btn-outline-#{$color}-mirror.df-btn-tertiary {
+    --#{$prefix}btn-border-color: #{$df-btn-tertiary-border-color};
+    --#{$prefix}btn-hover-border-color: #{$df-btn-tertiary-border-color};
+    --#{$prefix}btn-active-border-color: #{$df-btn-tertiary-border-color};
+    --#{$prefix}btn-focus-only-border-color: #{$df-btn-tertiary-border-color};
+    --#{$prefix}btn-disabled-border-color: #{$df-btn-tertiary-border-color};
+
+    &:focus-visible:not(:active):not(:hover) {
+      border-color: var(--#{$prefix}btn-focus-only-border-color);
+    }
+  }
+
   .btn-check {
     // override default behavior of outline in case of btn-check
     &:checked {

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

@@ -2,6 +2,8 @@
 
 $df-btn-display: inline-flex !default;
 $df-btn-icononly-border-radius: 50% !default;
+$df-btn-icononly-border-radius-sm: 50% !default;
+$df-btn-icononly-border-radius-lg: 50% !default;
 $df-btn-icononly-border-width: 0 !default;
 $df-btn-icononly-padding-x: 0 !default;
 $df-btn-icononly-padding-y: 0 !default;
@@ -42,3 +44,7 @@ $df-btn-close-focus-shadow-width: $focus-ring-width !default;
 // TODO - To be removed when CSS var and focus-ring will be fully used
 $df-btn-focus-box-shadow-blur: $focus-ring-blur !default;
 $df-btn-focus-box-shadow: $df-focused-box-shadow !default; // this value is the default value in buttons.scss of bootstrap
+// Only for the new branding here to avoid errors
+$df-btn-tertiary-border-color: transparent !default;
+$df-btn-outline-focus-inner-box-shadow-color: $df-btn-bg-color !default;
+$df-btn-bg-color-white: var(--#{$prefix}white) !default;

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

@@ -5,6 +5,7 @@
 // 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-title-font-weight: #{$df-card-title-font-weight};
   --#{$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};
@@ -21,57 +22,78 @@
   --#{$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}card-group-between-border-width: #{$df-card-group-between-border-width};
+  --#{$prefix}card-group-between-border-color: #{$df-card-group-between-border-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};
+  --#{$prefix}accordion-card-between-border-radius: #{$df-accordion-card-between-border-radius};
+  --#{$prefix}accordion-card-between-border-top: #{$df-accordion-card-between-border-top};
+
+  box-shadow: var(--#{$prefix}card-box-shadow);
+
+  .card-title {
+    font-weight: var(--#{$prefix}card-title-font-weight);
+  }
+
+  .border-0 {
+    box-shadow: none;
+  }
 
   &.btn-outline-primary {
     display: block;
-    @include rtl {
-      text-align: right;
-    }
-    @include ltr {
-      text-align: left;
-    }
+    text-align: start;
     color: var(--#{$prefix}card-focusable-color);
     border: var(--#{$prefix}card-focusable-border-color);
     border-radius: var(--#{$prefix}card-focusable-border-radius);
     height: inherit;
 
+    &:focus-visible {
+      --#{$prefix}box-shadow-color: #{$df-card-focusable-focus-box-shadow-color};
+      &:not(:hover):not(:active) {
+        color: var(--#{$prefix}card-focusable-color);
+      }
+    }
+
     &: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'],
+    &[aria-disabled='true']:hover,
+    &[aria-disabled='true']:active,
     &.disabled,
-    &[disabled] {
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:active,
+    &.disabled:hover,
+    &.disabled:active {
       color: var(--#{$prefix}card-focusable-disabled-color);
       background-color: var(--#{$prefix}card-focusable-disabled-background);
       opacity: var(--#{$prefix}card-focusable-disabled-opacity);
@@ -80,26 +102,75 @@
   }
 }
 
-.df-accordion-card.card, .df-accordion-card > .card {
-  .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);
+.df-accordion-card {
+  box-shadow: var(--#{$prefix}card-box-shadow);
+  border-radius: var(--#{$prefix}card-border-radius);
+
+  &.card,
+  & > .card {
+    .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);
+    }
+
+    box-shadow: none;
+
+    &:not(:last-of-type) {
+      border-bottom-left-radius: var(--#{$prefix}accordion-card-between-border-radius);
+      border-bottom-right-radius: var(--#{$prefix}accordion-card-between-border-radius);
+      border-bottom-width: var(--#{$prefix}accordion-card-last-border-bottom-width);
+    }
+
+    &:not(:first-of-type) {
+      border-top-left-radius: var(--#{$prefix}accordion-card-between-border-radius);
+      border-top-right-radius: var(--#{$prefix}accordion-card-between-border-radius);
+
+      border-top: var(--#{$prefix}accordion-card-between-border-top);
+    }
+
+    &:last-of-type .card-header {
+      border-bottom-left-radius: var(--#{$prefix}card-border-radius);
+      border-bottom-right-radius: var(--#{$prefix}card-border-radius);
     }
-    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);
+}
+
+@include media-breakpoint-up(md) {
+  .card-group {
+    box-shadow: var(--#{$prefix}card-box-shadow);
+    border-bottom-right-radius: var(--#{$prefix}card-border-radius);
+    border-bottom-left-radius: var(--#{$prefix}card-border-radius);
+
+    .card {
+      box-shadow: none;
+
+      &:not(:last-of-type) {
+        border-inline-end: var(--#{$prefix}card-group-between-border-width) solid
+          var(--#{$prefix}card-group-between-border-color);
+      }
+
+      &:first-of-type,
+      &:first-of-type .card-img-top {
+        border-start-start-radius: var(--#{$prefix}card-border-radius);
+        border-start-end-radius: 0;
+      }
+
+      &:last-of-type,
+      &:last-of-type .card-img-top {
+        border-start-end-radius: var(--#{$prefix}card-border-radius);
+        border-start-start-radius: 0;
+      }
+    }
   }
 }

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

@@ -1,22 +1,31 @@
+$df-card-title-font-weight: inherit !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; // todo link this to the css var
+$df-card-focusable-focus-box-shadow-color: inherit !default;
+$df-card-focusable-focus-inner-box-shadow-color: inherit !default;
 $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-focusable-font-weight: $font-weight-normal !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-card-selected-hover-bg-color: shades-css-var(
+  'teal',
+  'bg-subtle-hover-color'
+) !default; // todo link this to the css var
+$df-card-group-between-border-width: $border-width !default;
+$df-card-group-between-border-color: var(--#{$prefix}gray-200) !default;
 $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; // 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;
+$df-accordion-card-last-body-border-top: $border-width $border-style var(--#{$prefix}gray-200) !default;
+$df-accordion-card-between-border-radius: 0px !default;
+$df-accordion-card-between-border-top: $border-width $border-style var(--#{$prefix}gray-200) !default;

package/styles/scss/components/checkbox/_checkbox.scss

@@ -1,7 +1,10 @@
 @use 'sass:math';
 
 .form-check {
-  --#{$prefix}checkbox-invalid-feedback-margin-start: #{math.div($form-check-padding-start, $form-feedback-font-size) * - 1em};
+  --#{$prefix}checkbox-invalid-feedback-margin-start: #{-1em * math.div(
+      $form-check-padding-start,
+      $form-feedback-font-size
+    )};
   --#{$prefix}checkbox-disabled-background-color: #{$df-checkbox-disabled-background-color};
   --#{$prefix}checkbox-checked-disabled-bg-color: #{$df-checkbox-checked-disabled-bg-color};
   --#{$prefix}checkbox-disabled-border-color: #{$df-checkbox-disabled-border-color};
@@ -9,7 +12,7 @@
 
   .form-check-input {
     &:not([disabled]):not(.disabled) {
-      cursor:pointer;
+      cursor: pointer;
     }
 
     & ~ .invalid-feedback {
@@ -29,8 +32,9 @@
       &:not([checked]) {
         background-color: var(--#{$prefix}checkbox-disabled-background-color);
       }
-      &:checked, &:indeterminate {
-        &[type="checkbox"] {
+      &:checked,
+      &:indeterminate {
+        &[type='checkbox'] {
           background-color: var(--#{$prefix}checkbox-checked-disabled-bg-color);
         }
       }
@@ -41,3 +45,9 @@
     }
   }
 }
+
+.form-check-input {
+  &:not(:checked):not(.is-invalid):not(:indeterminate):focus {
+    --#{$prefix}box-shadow-color: #{$df-checkbox-box-shadow-color};
+  }
+}

package/styles/scss/components/checkbox/_checkbox.variables.scss

@@ -3,4 +3,5 @@ $df-checkbox-checked-disabled-bg-color: $gray-300 !default;
 $df-checkbox-disabled-border-color: $gray-300 !default;
 $df-checkbox-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-checkbox-radio-margin-bottom: 0.5rem !default;
-$df-checkbox-radio-margin-end: 0.75rem !default;
+$df-checkbox-radio-margin-end: 0.75rem !default;
+$df-checkbox-box-shadow-color: #{$focus-ring-color} !default;

package/styles/scss/components/collapse/_collapse.scss

@@ -35,9 +35,4 @@ a.df-collapse {
   &:visited:hover {
     @include df-link();
   }
-
-  [class^='icon-'],
-  [class*=' icon-'] {
-    vertical-align: inherit;
-  }
 }