@design-factory/design-factory 17.1.0 → 18.0.0

package/styles/scss/bootstrap/_variables.scss

@@ -11,6 +11,8 @@
 
 $prefix: df- !default;
 
+$df-initialBranding: true !default;
+
 // scss-docs-start gray-color-variables
 $white: #fff !default;
 $black: #000 !default; // changed
@@ -423,8 +425,8 @@ $purples: (
 
 $mysteries: (
   'mystery-50': $purple-50,
-  'mystery-100': $purple-200,
-  'mystery-200': $purple-100,
+  'mystery-100': $purple-100,
+  'mystery-200': $purple-200,
   'mystery-300': $purple-300,
   'mystery-400': $purple-400,
   'mystery-500': $purple-500,
@@ -648,7 +650,9 @@ $secondaries-mapping: (
   'border-color': var(--#{$prefix}secondary-600),
   'text-color': var(--#{$prefix}secondary-600),
   'text-hover-color': var(--#{$prefix}secondary-800),
-  'text-active-color': var(--#{$prefix}secondary-900)
+  'text-active-color': var(--#{$prefix}secondary-900),
+  'bg-hover-alt-color': var(--#{$prefix}secondary-100),
+  'bg-active-alt-color': var(--#{$prefix}secondary-200)
 ) !default;
 
 $blues-mapping: (
@@ -662,7 +666,9 @@ $blues-mapping: (
   'border-color': var(--#{$prefix}blue-500),
   'text-color': var(--#{$prefix}blue-500),
   'text-hover-color': var(--#{$prefix}blue-700),
-  'text-active-color': var(--#{$prefix}blue-800)
+  'text-active-color': var(--#{$prefix}blue-800),
+  'bg-hover-alt-color': var(--#{$prefix}blue-100),
+  'bg-active-alt-color': var(--#{$prefix}blue-200)
 ) !default;
 
 $pacifics-mapping: (
@@ -676,7 +682,9 @@ $pacifics-mapping: (
   'border-color': var(--#{$prefix}pacific-500),
   'text-color': var(--#{$prefix}pacific-500),
   'text-hover-color': var(--#{$prefix}pacific-700),
-  'text-active-color': var(--#{$prefix}pacific-800)
+  'text-active-color': var(--#{$prefix}pacific-800),
+  'bg-hover-alt-color': var(--#{$prefix}pacific-100),
+  'bg-active-alt-color': var(--#{$prefix}pacific-200)
 ) !default;
 
 $lights-mapping: (
@@ -690,7 +698,9 @@ $lights-mapping: (
   'border-color': var(--#{$prefix}light-500),
   'text-color': var(--#{$prefix}light-600),
   'text-hover-color': var(--#{$prefix}light-800),
-  'text-active-color': var(--#{$prefix}light-900)
+  'text-active-color': var(--#{$prefix}light-900),
+  'bg-hover-alt-color': var(--#{$prefix}light-50),
+  'bg-active-alt-color': var(--#{$prefix}light-100)
 ) !default;
 
 $whites-mapping: (
@@ -704,7 +714,9 @@ $whites-mapping: (
   'border-color': var(--#{$prefix}white-50),
   'text-color': var(--#{$prefix}white-600),
   'text-hover-color': var(--#{$prefix}white-800),
-  'text-active-color': var(--#{$prefix}white-900)
+  'text-active-color': var(--#{$prefix}white-900),
+  'bg-hover-alt-color': var(--#{$prefix}white-100),
+  'bg-active-alt-color': var(--#{$prefix}white-500)
 ) !default;
 
 $primaries-mapping: (
@@ -719,7 +731,9 @@ $primaries-mapping: (
   'border-color': var(--#{$prefix}primary-500),
   'text-color': var(--#{$prefix}primary-500),
   'text-hover-color': var(--#{$prefix}primary-700),
-  'text-active-color': var(--#{$prefix}primary-800)
+  'text-active-color': var(--#{$prefix}primary-800),
+  'bg-hover-alt-color': var(--#{$prefix}primary-100),
+  'bg-active-alt-color': var(--#{$prefix}primary-200)
 ) !default;
 
 $darks-mapping: (
@@ -733,7 +747,9 @@ $darks-mapping: (
   'border-color': var(--#{$prefix}dark-500),
   'text-color': var(--#{$prefix}dark-700),
   'text-hover-color': var(--#{$prefix}dark-900),
-  'text-active-color': var(--#{$prefix}black)
+  'text-active-color': var(--#{$prefix}black),
+  'bg-hover-alt-color': var(--#{$prefix}dark-600),
+  'bg-active-alt-color': var(--#{$prefix}dark-700)
 ) !default;
 
 $indigos-mapping: (
@@ -747,7 +763,9 @@ $indigos-mapping: (
   'border-color': var(--#{$prefix}indigo-500),
   'text-color': var(--#{$prefix}indigo-500),
   'text-hover-color': var(--#{$prefix}indigo-700),
-  'text-active-color': var(--#{$prefix}indigo-800)
+  'text-active-color': var(--#{$prefix}indigo-800),
+  'bg-hover-alt-color': var(--#{$prefix}indigo-100),
+  'bg-active-alt-color': var(--#{$prefix}indigo-200)
 ) !default;
 
 $purples-mapping: (
@@ -761,7 +779,9 @@ $purples-mapping: (
   'border-color': var(--#{$prefix}purple-500),
   'text-color': var(--#{$prefix}purple-500),
   'text-hover-color': var(--#{$prefix}purple-700),
-  'text-active-color': var(--#{$prefix}purple-800)
+  'text-active-color': var(--#{$prefix}purple-800),
+  'bg-hover-alt-color': var(--#{$prefix}purple-100),
+  'bg-active-alt-color': var(--#{$prefix}purple-200)
 ) !default;
 
 $mysteries-mapping: (
@@ -775,7 +795,9 @@ $mysteries-mapping: (
   'border-color': var(--#{$prefix}mystery-500),
   'text-color': var(--#{$prefix}mystery-500),
   'text-hover-color': var(--#{$prefix}mystery-700),
-  'text-active-color': var(--#{$prefix}mystery-800)
+  'text-active-color': var(--#{$prefix}mystery-800),
+  'bg-hover-alt-color': var(--#{$prefix}mystery-100),
+  'bg-active-alt-color': var(--#{$prefix}mystery-300)
 ) !default;
 
 $pinks-mapping: (
@@ -789,7 +811,9 @@ $pinks-mapping: (
   'border-color': var(--#{$prefix}pink-500),
   'text-color': var(--#{$prefix}pink-500),
   'text-hover-color': var(--#{$prefix}pink-700),
-  'text-active-color': var(--#{$prefix}pink-800)
+  'text-active-color': var(--#{$prefix}pink-800),
+  'bg-hover-alt-color': var(--#{$prefix}pink-200),
+  'bg-active-alt-color': var(--#{$prefix}pink-300)
 ) !default;
 
 $loves-mapping: (
@@ -803,7 +827,9 @@ $loves-mapping: (
   'border-color': var(--#{$prefix}love-500),
   'text-color': var(--#{$prefix}love-500),
   'text-hover-color': var(--#{$prefix}love-700),
-  'text-active-color': var(--#{$prefix}love-800)
+  'text-active-color': var(--#{$prefix}love-800),
+  'bg-hover-alt-color': var(--#{$prefix}love-100),
+  'bg-active-alt-color': var(--#{$prefix}love-200)
 ) !default;
 
 $reds-mapping: (
@@ -817,7 +843,9 @@ $reds-mapping: (
   'border-color': var(--#{$prefix}red-500),
   'text-color': var(--#{$prefix}red-500),
   'text-hover-color': var(--#{$prefix}red-700),
-  'text-active-color': var(--#{$prefix}red-800)
+  'text-active-color': var(--#{$prefix}red-800),
+  'bg-hover-alt-color': var(--#{$prefix}red-100),
+  'bg-active-alt-color': var(--#{$prefix}red-200)
 ) !default;
 
 $oranges-mapping: (
@@ -831,7 +859,9 @@ $oranges-mapping: (
   'border-color': var(--#{$prefix}orange-500),
   'text-color': var(--#{$prefix}orange-800),
   'text-hover-color': var(--#{$prefix}orange-900),
-  'text-active-color': var(--#{$prefix}orange-900)
+  'text-active-color': var(--#{$prefix}orange-900),
+  'bg-hover-alt-color': var(--#{$prefix}orange-100),
+  'bg-active-alt-color': var(--#{$prefix}orange-200)
 ) !default;
 
 $yellows-mapping: (
@@ -845,7 +875,9 @@ $yellows-mapping: (
   'border-color': var(--#{$prefix}yellow-500),
   'text-color': var(--#{$prefix}yellow-500),
   'text-hover-color': var(--#{$prefix}yellow-700),
-  'text-active-color': var(--#{$prefix}yellow-800)
+  'text-active-color': var(--#{$prefix}yellow-800),
+  'bg-hover-alt-color': var(--#{$prefix}yellow-100),
+  'bg-active-alt-color': var(--#{$prefix}yellow-200)
 ) !default;
 
 $greens-mapping: (
@@ -859,7 +891,9 @@ $greens-mapping: (
   'border-color': var(--#{$prefix}green-500),
   'text-color': var(--#{$prefix}green-500),
   'text-hover-color': var(--#{$prefix}green-700),
-  'text-active-color': var(--#{$prefix}green-800)
+  'text-active-color': var(--#{$prefix}green-800),
+  'bg-hover-alt-color': var(--#{$prefix}green-100),
+  'bg-active-alt-color': var(--#{$prefix}green-200)
 ) !default;
 
 $teals-mapping: (
@@ -873,7 +907,9 @@ $teals-mapping: (
   'border-color': var(--#{$prefix}teal-500),
   'text-color': var(--#{$prefix}teal-500),
   'text-hover-color': var(--#{$prefix}teal-700),
-  'text-active-color': var(--#{$prefix}teal-800)
+  'text-active-color': var(--#{$prefix}teal-800),
+  'bg-hover-alt-color': var(--#{$prefix}teal-100),
+  'bg-active-alt-color': var(--#{$prefix}teal-200)
 ) !default;
 
 $infos-mapping: (
@@ -887,7 +923,9 @@ $infos-mapping: (
   'border-color': var(--#{$prefix}info-500),
   'text-color': var(--#{$prefix}info-500),
   'text-hover-color': var(--#{$prefix}info-700),
-  'text-active-color': var(--#{$prefix}info-800)
+  'text-active-color': var(--#{$prefix}info-800),
+  'bg-hover-alt-color': var(--#{$prefix}info-100),
+  'bg-active-alt-color': var(--#{$prefix}info-200)
 ) !default;
 
 $successes-mapping: (
@@ -901,7 +939,9 @@ $successes-mapping: (
   'border-color': var(--#{$prefix}success-500),
   'text-color': var(--#{$prefix}success-500),
   'text-hover-color': var(--#{$prefix}success-700),
-  'text-active-color': var(--#{$prefix}success-800)
+  'text-active-color': var(--#{$prefix}success-800),
+  'bg-hover-alt-color': var(--#{$prefix}success-100),
+  'bg-active-alt-color': var(--#{$prefix}success-200)
 ) !default;
 
 $dangers-mapping: (
@@ -915,7 +955,9 @@ $dangers-mapping: (
   'border-color': var(--#{$prefix}danger-500),
   'text-color': var(--#{$prefix}danger-500),
   'text-hover-color': var(--#{$prefix}danger-700),
-  'text-active-color': var(--#{$prefix}danger-800)
+  'text-active-color': var(--#{$prefix}danger-800),
+  'bg-hover-alt-color': var(--#{$prefix}danger-100),
+  'bg-active-alt-color': var(--#{$prefix}danger-200)
 ) !default;
 
 $warnings-mapping: (
@@ -929,7 +971,9 @@ $warnings-mapping: (
   'border-color': var(--#{$prefix}warning-500),
   'text-color': var(--#{$prefix}warning-800),
   'text-hover-color': var(--#{$prefix}warning-900),
-  'text-active-color': var(--#{$prefix}warning-900)
+  'text-active-color': var(--#{$prefix}warning-900),
+  'bg-hover-alt-color': var(--#{$prefix}warning-100),
+  'bg-active-alt-color': var(--#{$prefix}warning-200)
 ) !default;
 
 $cyans-mapping: (
@@ -943,7 +987,23 @@ $cyans-mapping: (
   'border-color': var(--#{$prefix}cyan-500),
   'text-color': var(--#{$prefix}cyan-500),
   'text-hover-color': var(--#{$prefix}cyan-700),
-  'text-active-color': var(--#{$prefix}cyan-800)
+  'text-active-color': var(--#{$prefix}cyan-800),
+  'bg-hover-alt-color': var(--#{$prefix}cyan-100),
+  'bg-active-alt-color': var(--#{$prefix}cyan-200)
+) !default;
+
+$links-mapping: (
+  'text-color': var(--#{$prefix}primary-500),
+  'bg-color': transparent,
+  'text-hover-color': var(--#{$prefix}primary-500),
+  'bg-hover-color': var(--#{$prefix}primary-100),
+  'text-active-color': var(--#{$prefix}primary-800),
+  'bg-active-color': transparent,
+  'text-visited-color': var(--#{$prefix}purple-500),
+  'text-visited-hover-color': var(--#{$prefix}purple-500),
+  'bg-visisted-hover-color': var(--#{$prefix}primary-100),
+  'text-visited-active-color': var(--#{$prefix}primary-800),
+  'bg-visited-active-color': transparent
 ) !default;
 
 // Create a map of all colors shades
@@ -974,6 +1034,7 @@ $shade-maps: map.set($shade-maps, 'dark', $darks-mapping);
 $shade-maps: map.set($shade-maps, 'pacific', $pacifics-mapping);
 $shade-maps: map.set($shade-maps, 'gray', $grays-mapping);
 $shade-maps: map.set($shade-maps, 'secondary', $secondaries-mapping);
+$shade-maps: map.set($shade-maps, 'links', $links-mapping);
 
 $shade-colors: map.merge(
   $map1: $shade-colors,
@@ -1341,12 +1402,15 @@ $border-radius-lg: $border-radius * map.get($df-size-ratios, 'lg') !default;
 // scss-docs-end box-shadow-variables
 
 $component-active-color: $white !default;
-$component-active-bg: $primary !default;
+$component-active-bg: var(--#{$prefix}primary-500) !default; // $primary !default;
 
 // scss-docs-start focus-ring-variables
 $focus-ring-width: 0.25rem !default;
 $focus-ring-opacity: 0.25 !default;
-$focus-ring-color: rgba($component-active-bg, $focus-ring-opacity) !default;
+$focus-ring-color: rgba(
+  var(--#{$prefix}primary-500-rgb),
+  $focus-ring-opacity
+) !default; // default rgba($component-active-bg, $focus-ring-opacity)
 $focus-ring-blur: 0 !default;
 $focus-ring-box-shadow: 0 0 var(--#{$prefix}box-shadow-blur, $focus-ring-blur)
   var(--#{$prefix}box-shadow-width, $focus-ring-width) var(--#{$prefix}box-shadow-color, $focus-ring-color) !default;
@@ -1732,7 +1796,7 @@ $form-check-input-checked-color: $component-active-color !default;
 $form-check-input-checked-bg-color: $component-active-bg !default;
 $form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
 $form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 14 12'><path d='M3.265 8a.995.995 0 0 1-.717-.306L.297 5.369a1.071 1.071 0 0 1 0-1.48.99.99 0 0 1 1.434 0l1.534 1.584L8.27.307a.99.99 0 0 1 1.433 0 1.07 1.07 0 0 1 0 1.482l-5.72 5.905A.995.995 0 0 1 3.266 8' fill='#{$form-check-input-checked-color}' stroke-width='0' fill-rule='evenodd'/></svg>") !default;
-$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='#{$form-check-input-checked-border-color}'/></svg>") !default;
+$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='#{$primary}'/></svg>") !default;
 
 $form-check-input-indeterminate-color: $component-active-color !default;
 // $form-check-input-indeterminate-bg-color:       $component-active-bg !default;
@@ -1835,7 +1899,7 @@ $form-range-track-bg: var(--#{$prefix}gray-300) !default;
 // $form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
 // $form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
 // $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
-// $form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
+$form-range-thumb-active-bg: tint-color($primary, 70%) !default; // tint-color($component-active-bg, 70%)
 $form-range-thumb-disabled-bg: var(--#{$prefix}gray-500) !default;
 // $form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 // scss-docs-end form-range-variables
@@ -2258,7 +2322,7 @@ $toast-border-radius: 0.25rem !default;
 // $badge-font-size:                   .75em !default;
 $badge-font-weight: $font-weight-semibold !default;
 // $badge-color:                       $white !default;
-$badge-padding-y: 0.38em !default;
+$badge-padding-y: 0.334em !default;
 $badge-padding-x: 0.86em !default;
 $badge-border-radius: 0.25rem !default;
 // scss-docs-end badge-variables

package/styles/scss/components/accordion/_accordion.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 .accordion {
   --#{$prefix}accordion-button-hover-bg: #{$df-accordion-button-hover-bg};
   --#{$prefix}accordion-button-reverse-margin-end: #{$df-accordion-button-reverse-margin-end};
@@ -10,17 +12,38 @@
   --#{$prefix}accordion-icon-width: #{$accordion-icon-width};
   --#{$prefix}accordion-button-padding-y: #{$accordion-button-padding-y};
   --#{$prefix}accordion-button-padding-x: #{$accordion-button-padding-x};
-  @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+  --#{$prefix}accordion-border-radius-sm: #{$df-accordion-border-radius-sm};
+  --#{$prefix}accordion-border-radius: #{$df-accordion-border-radius};
+  --#{$prefix}accordion-border-radius-lg: #{$df-accordion-border-radius-lg};
+  --#{$prefix}accordion-button-font-weight: #{$df-accordion-button-font-weight};
+  --#{$prefix}accordion-button-hover-icon: #{escape-svg($df-accordion-button-hover-icon)};
+  --#{$prefix}accordion-button-disabled-icon: #{escape-svg($df-accordion-button-disabled-icon)};
+  --#{$prefix}accordion-subtitle-font-weight: #{$df-accordion-subtitle-font-weight};
+  @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
     --#{$prefix}box-shadow-color: var(--#{$prefix}accordion-active-color);
   }
 
   .accordion-button {
+    font-weight: var(--#{$prefix}accordion-button-font-weight);
+
+    .df-subtitle {
+      font-weight: var(--#{$prefix}accordion-subtitle-font-weight);
+    }
+
+    &:not(.collapsed):not(:focus) {
+      box-shadow: none;
+    }
+
     &:not([aria-disabled='true']):not(.disabled):not([disabled]) {
       &:hover {
         --#{$prefix}inner-box-shadow-color: var(--#{$prefix}accordion-button-hover-bg);
         --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
         background-color: var(--#{$prefix}accordion-button-hover-bg);
         color: var(--#{$prefix}accordion-link-hover-color);
+
+        &::after {
+          background-image: var(--#{$prefix}accordion-button-hover-icon);
+        }
       }
     }
     &[aria-disabled='true'],
@@ -30,6 +53,22 @@
       background-color: var(--#{$prefix}accordion-disabled-bg-color);
       opacity: var(--#{$prefix}accordion-disabled-opacity);
       cursor: var(--#{$prefix}accordion-disabled-cursor);
+
+      .df-subtitle {
+        color: var(--#{$prefix}accordion-disabled-color);
+      }
+
+      .df-accordion-number {
+        color: var(--#{$prefix}accordion-disabled-color);
+      }
+
+      &::after {
+        background-image: var(--#{$prefix}accordion-button-disabled-icon);
+      }
+    }
+
+    .df-accordion-number {
+      color: var(--#{$prefix}accordion-title-number-color);
     }
   }
 
@@ -49,7 +88,7 @@
         @include rtl {
           margin-left: var(--#{$prefix}accordion-button-reverse-margin-end);
         }
-        content: "";
+        content: '';
         background-image: escape-svg($accordion-button-icon);
         background-repeat: no-repeat;
         background-size: var(--#{$prefix}accordion-icon-width);
@@ -61,14 +100,21 @@
           transform: $accordion-icon-transform;
         }
       }
+      &[aria-disabled='true'],
+      &.disabled,
+      &[disabled] {
+        &::before {
+          background-image: var(--#{$prefix}accordion-button-disabled-icon);
+        }
+      }
     }
   }
 
-  // Without separator accordion
-  &.df-accordion-withoutsep {
+  // Accordion with a separator
+  &.df-accordion-withsep {
     .accordion-button {
       &:not(.collapsed):not(:focus) {
-        box-shadow: none;
+        box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);
       }
     }
   }
@@ -77,7 +123,8 @@
     $icon-with: calc(#{$ratio} * var(--#{$prefix}accordion-icon-width));
     &.df-accordion-#{$extension} {
       .accordion-button {
-        padding: calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-y)) calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-x));
+        padding: calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-y))
+          calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-x));
         font-size: $ratio * $font-size-base;
 
         &::after {
@@ -95,10 +142,28 @@
           }
         }
       }
-    }
-  }
+      .accordion-item {
+        &:first-of-type {
+          @include border-top-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
+          .accordion-button {
+            @include border-top-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
+          }
+        }
+        // Only set a border-radius on the last item if the accordion is collapsed
+        &:last-of-type {
+          @include border-bottom-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
+
+          > .accordion-header .accordion-button {
+            &.collapsed {
+              @include border-bottom-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
+            }
+          }
 
-  .df-accordion-number {
-    color: var(--#{$prefix}accordion-title-number-color);
+          > .accordion-collapse {
+            @include border-bottom-radius(var(--#{$prefix}accordion-border-radius-#{$extension}));
+          }
+        }
+      }
+    }
   }
-}
+}

package/styles/scss/components/accordion/_accordion.variables.scss

@@ -6,3 +6,12 @@ $df-accordion-disabled-color: var(--#{$prefix}disabled-color) !default;
 $df-accordion-disabled-opacity: var(--#{$prefix}disabled-opacity) !default;
 $df-accordion-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-accordion-title-number-color: $gray-600 !default;
+$df-accordion-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$df-accordion-border-radius: var(--#{$prefix}border-radius) !default;
+$df-accordion-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+$df-accordion-button-font-weight: $font-weight-normal !default;
+$df-accordion-subtitle-font-weight: $font-weight-normal !default;
+$df-accordion-button-hover-icon-color: $accordion-icon-color !default; // cannot be css var as used in background-image
+$df-accordion-button-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$df-accordion-button-hover-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+$df-accordion-button-disabled-icon-color: $accordion-icon-color !default; // cannot be css var as used in background-image
+$df-accordion-button-disabled-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$df-accordion-button-disabled-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;

package/styles/scss/components/alert/_alert.scss

@@ -1,7 +1,8 @@
+@use 'sass:meta';
+
 .alert {
   --#{$prefix}alert-color: #{$df-alert-global-color};
   --#{$prefix}alert-border-start-width: #{$df-alert-size-default-border-start-width};
-  --#{$prefix}alert-icon-top: #{$df-alert-size-default-icon-top};
   --#{$prefix}alert-icon-margin-start: #{$df-alert-size-default-icon-margin-start};
   --#{$prefix}alert-icon-font-weight: #{$df-icon-solid-font-weight};
   --#{$prefix}alert-icon-padding-start: #{$df-alert-size-default-insert-alert-icon};
@@ -34,12 +35,12 @@
 
   &:not(.df-card-alert):not(.df-page-alert) {
     @include ltr {
-        border-left-width: var(--#{$prefix}alert-border-start-width);
-        border-left-color: var(--#{$prefix}alert-border-start-color);
+      border-left-width: var(--#{$prefix}alert-border-start-width);
+      border-left-color: var(--#{$prefix}alert-border-start-color);
     }
     @include rtl {
-        border-right-width: var(--#{$prefix}alert-border-start-width);
-        border-right-color: var(--#{$prefix}alert-border-start-color);
+      border-right-width: var(--#{$prefix}alert-border-start-width);
+      border-right-color: var(--#{$prefix}alert-border-start-color);
     }
   }
 
@@ -51,7 +52,6 @@
   // Alert icon
   span.df-insert-icon {
     position: absolute;
-    top: var(--#{$prefix}alert-icon-top);
     font-weight: var(--#{$prefix}alert-icon-font-weight);
     @include ltr {
       margin-left: var(--#{$prefix}alert-icon-margin-start);
@@ -92,7 +92,7 @@
       --#{$prefix}border-color-opacity: #{$df-alert-border-color-opacity};
       --#{$prefix}alert-color: #{shades-css-var($state, 'bg-subtle-color', true)};
       --#{$prefix}alert-bg-color: #{shades-css-var($state, 'bg-subtle-color')};
-      @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
         --#{$prefix}alert-border-color: #{shades-css-var($state, 'bg-subtle-color')};
         hr {
           border-top-color: shades-css-var($state, 'bg-subtle-active-color');
@@ -105,7 +105,7 @@
     }
   }
   &.alert-tip {
-    @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+    @if meta.variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
       hr {
         border-top-color: shades-css-var('purple', 'bg-subtle-active-color');
       }
@@ -121,7 +121,6 @@
 
   // Alerts sizes
   &.df-alert-sm {
-    --#{$prefix}alert-icon-top: #{$df-alert-size-sm-icon-top};
     --#{$prefix}alert-icon-margin-start: #{$df-alert-size-sm-icon-margin-start};
     --#{$prefix}alert-icon-padding-start: #{$df-alert-size-sm-insert-alert-icon};
     --#{$prefix}alert-font-size: #{$df-alert-size-sm-font-size};
@@ -134,7 +133,6 @@
     }
   }
   &.df-alert-lg {
-    --#{$prefix}alert-icon-top: #{$df-alert-size-lg-icon-top};
     --#{$prefix}alert-icon-margin-start: #{$df-alert-size-lg-icon-margin-start};
     --#{$prefix}alert-icon-padding-start: #{$df-alert-size-lg-insert-alert-icon};
     --#{$prefix}alert-font-size: #{$df-alert-size-lg-font-size};

package/styles/scss/components/alert/_alert.variables.scss

@@ -35,7 +35,6 @@ $df-alert-border-color-opacity: 0.4 !default;
 $df-alert-size-default-insert-alert-icon: 2.5rem !default;
 $df-alert-size-default-font-size: 1rem !default;
 $df-alert-size-default-border-start-width: 3px !default;
-$df-alert-size-default-icon-top: 0.9375rem !default;
 $df-alert-size-default-icon-margin-start: -1.558rem !default;
 $df-alert-tip-size-default-icon-margin-start: -1.40175rem !default;
 $df-alert-collapse-icon-margin-start: 1rem !default;
@@ -45,7 +44,6 @@ $df-alert-size-sm-insert-alert-icon: $df-alert-size-default-insert-alert-icon *
 $df-alert-size-sm-font-size: $df-alert-size-default-font-size * map.get($df-size-ratios, 'sm') !default;
 $df-alert-size-sm-padding-y: $alert-padding-y * map.get($df-size-ratios, 'sm') !default;
 $df-alert-size-sm-padding-x: $alert-padding-x * map.get($df-size-ratios, 'sm') !default;
-$df-alert-size-sm-icon-top: $df-alert-size-default-icon-top * map.get($df-size-ratios, 'sm') !default;
 $df-alert-size-sm-icon-margin-start: $df-alert-size-default-icon-margin-start * map.get($df-size-ratios, 'sm') !default;
 $df-alert-tip-size-sm-icon-margin-start: $df-alert-tip-size-default-icon-margin-start * map.get($df-size-ratios, 'sm') !default;
 
@@ -54,6 +52,5 @@ $df-alert-size-lg-insert-alert-icon: $df-alert-size-default-insert-alert-icon *
 $df-alert-size-lg-font-size: $df-alert-size-default-font-size * map.get($df-size-ratios, 'lg') !default;
 $df-alert-size-lg-padding-y: $alert-padding-y * map.get($df-size-ratios, 'lg') !default;
 $df-alert-size-lg-padding-x: $alert-padding-x * map.get($df-size-ratios, 'lg') !default;
-$df-alert-size-lg-icon-top: $df-alert-size-default-icon-top * map.get($df-size-ratios, 'lg') !default;
 $df-alert-size-lg-icon-margin-start: $df-alert-size-default-icon-margin-start * map.get($df-size-ratios, 'lg') !default;
 $df-alert-tip-size-lg-icon-margin-start: $df-alert-tip-size-default-icon-margin-start * map.get($df-size-ratios, 'lg') !default;

package/styles/scss/components/badge/_badge.mixins.scss

@@ -0,0 +1,13 @@
+@mixin df-disable-badge($color, $bg-color, $changeBorder: false) {
+  cursor: var(--#{$prefix}disabled-cursor);
+  color: $color !important;
+  background-color: $bg-color !important;
+  @if $changeBorder {
+    border-color: $color;
+  }
+  &:focus-visible,
+  &:focus,
+  &:focus-within {
+    box-shadow: none;
+  }
+}