Add accordions

Orange-OpenSource · Sep 20, 2023 · 2ead11f · 2ead11f
1 parent 1ad2b7d
commit 2ead11f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -156,6 +156,7 @@
   // scss-docs-end accordion-lg-css-vars
 }
 
+// Deprecated in v5.3.2
 .accordion-dark {
   // scss-docs-start accordion-dark-css-vars
   --#{$prefix}accordion-btn-color: #{$accordion-dark-button-color};

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1716,7 +1716,7 @@ $accordion-color:                         var(--#{$prefix}body-color) !default;
 $accordion-bg:                            var(--#{$prefix}body-bg) !default;
 // stylelint-disable-next-line function-disallowed-list
 $accordion-border-width:                  calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod
-$accordion-border-color:                  $gray-500 !default; // Boosted mod
+$accordion-border-color:                  var(--#{$prefix}border-color-translucent) !default; // Boosted mod
 $accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
 $accordion-inner-border-radius:           subtract($accordion-border-radius, #{$accordion-border-width}) !default;
 
@@ -1764,15 +1764,17 @@ $accordion-button-letter-spacing-lg:      $h2-spacing !default;
 // End mod
 // scss-docs-end accordion-variables
 
+// Boosted mod
 // scss-docs-start accordion-dark-variables
-$accordion-dark-color:                    $white !default; // Boosted mod
-$accordion-dark-bg:                       $black !default; // Boosted mod
-$accordion-dark-border-color:             $gray-700 !default; // Boosted mod
-$accordion-dark-button-color:             $accordion-dark-color !default; // Boosted mod
-$accordion-dark-button-bg:                $accordion-dark-bg !default; // Boosted mod
-$accordion-dark-button-hover-bg:          $gray-900 !default; // Boosted mod
-$accordion-dark-button-active-color:      $white !default; // Boosted mod
+$accordion-dark-color:                    $white !default; // Deprecated in v5.3.2
+$accordion-dark-bg:                       $black !default; // Deprecated in v5.3.2
+$accordion-dark-border-color:             $gray-700 !default; // Deprecated in v5.3.2
+$accordion-dark-button-color:             $accordion-dark-color !default; // Deprecated in v5.3.2
+$accordion-dark-button-bg:                $accordion-dark-bg !default; // Deprecated in v5.3.2
+$accordion-dark-button-hover-bg:          $gray-900 !default; // Deprecated in v5.3.2
+$accordion-dark-button-active-color:      $white !default; // Deprecated in v5.3.2
 // scss-docs-end accordion-dark-variables
+// End mod
 
 // Tooltips
 

diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md
@@ -202,6 +202,12 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord
 
 ## Dark variant
 
+{{< deprecated-in "5.3.2" >}}
+
+{{< callout warning >}}
+New dark accordions in v5.3.2 — We’ve deprecated `.accordion-dark` in favor of the new `data-bs-theme="dark"`. Add `data-bs-theme="dark"` to the `.accordion` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
+
 {{< added-in "5.2.0" >}}
 
 Add `.accordion-dark` to the `.accordion` for a dark variant.