diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index b69d921a3e..33e04a4cfe 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -29,7 +29,6 @@
--#{$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-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};
@@ -71,9 +70,8 @@
height: var(--#{$prefix}accordion-btn-icon-width);
margin-left: auto;
content: "";
- background-image: var(--#{$prefix}accordion-btn-icon);
- background-repeat: no-repeat;
- background-size: var(--#{$prefix}accordion-btn-icon-width);
+ background-color: var(--#{$prefix}accordion-btn-color);
+ mask: var(--#{$prefix}accordion-btn-icon) no-repeat center 100%;
@include transition(var(--#{$prefix}accordion-btn-icon-transition));
}
@@ -153,12 +151,12 @@
}
}
- @if $enable-dark-mode {
- @include color-mode(dark) {
- .accordion-button::after {
- --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
- --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
- }
- }
- }
+ // @if $enable-dark-mode {
+ // @include color-mode(dark) {
+ // .accordion-button::after {
+ // --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+ // --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+ // }
+ // }
+ // }
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 641f21aa80..08e68fd005 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1070,7 +1070,7 @@ $accordion-color: var(--#{$prefix}body-color) !default;
$accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
-$accordion-border-radius: var(--#{$prefix}border-radius) !default;
+$accordion-border-radius: var(--#{$prefix}border-radius-lg) !default;
$accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
@@ -1078,24 +1078,21 @@ $accordion-body-padding-x: $accordion-padding-x !default;
$accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-padding-x: $accordion-padding-x !default;
-$accordion-button-color: var(--#{$prefix}body-color) !default;
+$accordion-button-color: var(--#{$prefix}fg-2) !default;
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
$accordion-transition: $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
-$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
+$accordion-button-active-bg: var(--#{$prefix}bg-2) !default;
+$accordion-button-active-color: var(--#{$prefix}fg) !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
-$accordion-icon-color: var(--#{$prefix}body-color) !default;
-$accordion-icon-active-color: var(--#{$prefix}primary-text-emphasis) !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;
-
-$accordion-button-icon: url("data:image/svg+xml,") !default;
-$accordion-button-active-icon: url("data:image/svg+xml,") !default;
+$accordion-button-icon: url("data:image/svg+xml,") !default;
// scss-docs-end accordion-variables
+
// Tooltips
// scss-docs-start tooltip-variables
@@ -1482,17 +1479,6 @@ $form-valid-border-color-dark: $green-300 !default;
$form-invalid-color-dark: $red-300 !default;
$form-invalid-border-color-dark: $red-300 !default;
// scss-docs-end form-validation-colors-dark
-
-
-//
-// Accordion
-//
-
-$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
-$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
-
-$accordion-button-icon-dark: url("data:image/svg+xml,") !default;
-$accordion-button-active-icon-dark: url("data:image/svg+xml,") !default;
// scss-docs-end sass-dark-mode-vars