Add CSS vars for accordions (#36148)

* Add CSS vars for accordions

* Fix Bundlewatch

2 files changed, 29 insertions, 18 deletions

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 94f1e41397..00ce77cdc7 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "27.65 kB"
+      "maxSize": "27.75 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "25.75 kB"
+      "maxSize": "26.0 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index aac63ce2ff..b306540d73 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -4,13 +4,24 @@
 
 .accordion {
   // scss-docs-start accordion-css-vars
-  --#{$prefix}accordion-color: #{$accordion-color};
+  --#{$prefix}accordion-color: #{color-contrast($accordion-bg)};
   --#{$prefix}accordion-bg: #{$accordion-bg};
+  --#{$prefix}accordion-transition: #{$accordion-transition};
   --#{$prefix}accordion-border-color: #{$accordion-border-color};
   --#{$prefix}accordion-border-width: #{$accordion-border-width};
   --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
   --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
   --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-btn-color: #{$accordion-color};
+  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
+  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
+  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
+  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
+  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
   --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
   --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
   --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
@@ -25,13 +36,13 @@
   width: 100%;
   padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
   @include font-size($font-size-base);
-  color: var(--#{$prefix}accordion-color);
+  color: var(--#{$prefix}accordion-btn-color);
   text-align: left; // Reset button style
-  background-color: $accordion-button-bg;
+  background-color: var(--#{$prefix}accordion-btn-bg);
   border: 0;
   @include border-radius(0);
   overflow-anchor: none;
-  @include transition($accordion-transition);
+  @include transition(var(--#{$prefix}accordion-transition));
 
   &:not(.collapsed) {
     color: var(--#{$prefix}accordion-active-color);
@@ -39,22 +50,22 @@
     box-shadow: inset 0 calc(var(--#{$prefix}accordion-border-width) * -1) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
 
     &::after {
-      background-image: escape-svg($accordion-button-active-icon);
-      transform: $accordion-icon-transform;
+      background-image: var(--#{$prefix}accordion-btn-active-icon);
+      transform: var(--#{$prefix}accordion-btn-icon-transform);
     }
   }
 
   // Accordion icon
   &::after {
     flex-shrink: 0;
-    width: $accordion-icon-width;
-    height: $accordion-icon-width;
+    width: var(--#{$prefix}accordion-btn-icon-width);
+    height: var(--#{$prefix}accordion-btn-icon-width);
     margin-left: auto;
     content: "";
-    background-image: escape-svg($accordion-button-icon);
+    background-image: var(--#{$prefix}accordion-btn-icon);
     background-repeat: no-repeat;
-    background-size: $accordion-icon-width;
-    @include transition($accordion-icon-transition);
+    background-size: var(--#{$prefix}accordion-btn-icon-width);
+    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
   }
 
   &:hover {
@@ -63,9 +74,9 @@
 
   &:focus {
     z-index: 3;
-    border-color: $accordion-button-focus-border-color;
+    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
     outline: 0;
-    box-shadow: $accordion-button-focus-box-shadow;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
   }
 }
 
@@ -74,7 +85,7 @@
 }
 
 .accordion-item {
-  color: color-contrast($accordion-bg);
+  color: var(--#{$prefix}accordion-color);
   background-color: var(--#{$prefix}accordion-bg);
   border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
 
@@ -82,7 +93,7 @@
     @include border-top-radius(var(--#{$prefix}accordion-border-radius));
 
     .accordion-button {
-      @include border-top-radius($accordion-inner-border-radius); // todo
+      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
     }
   }
 
@@ -96,7 +107,7 @@
 
     .accordion-button {
       &.collapsed {
-        @include border-bottom-radius($accordion-inner-border-radius); // todo
+        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
       }
     }