Refactor accordion button to use mask, remove some Sass vars and dark mode styles...

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index b69d921a3e285a32617692732449272af631b5c6..33e04a4cfe2361ed165b55f72388680f2c5da36f 100644 (file)
--- 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 641f21aa80a0d40772c34052bc52b13d85e3b267..08e68fd005b5ec8162de023660283596bdb7db8e 100644 (file)
--- 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
-$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
-$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
 // scss-docs-end sass-dark-mode-vars