From 0fc537b7b937d78bd0281ebc23555242c014d5dc Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Wed, 20 Sep 2023 10:57:38 +0200
Subject: [PATCH 1/2] Add accordions

---
 scss/_accordion.scss                          |  1 +
 scss/_variables.scss                          | 20 ++++++++++---------
 site/content/docs/5.3/components/accordion.md |  8 ++++++++
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 9e0d51eff2..82d0c5dcda 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -156,6 +156,7 @@
   // scss-docs-end accordion-lg-css-vars
 }
 
+// Deprecated in v5.3.3
 .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
index 5cd3f2dd2d..b8c7bbffe6 100644
--- 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;
 
@@ -1736,7 +1736,7 @@ $accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default
 $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
 $accordion-button-hover-bg:               var(--#{$prefix}secondary-bg) !default; // Boosted mod
 $accordion-button-active-bg:              null !default; // Boosted mod: instead of `var(--#{$prefix}primary-bg-subtle)`
-$accordion-button-active-color:           var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `var(--#{$prefix}primary-text-emphasis)`
+$accordion-button-active-color:           var(--#{$prefix}body-color) !default; // Boosted mod: instead of `var(--#{$prefix}primary-text-emphasis)`
 
 // Boosted mod: no $accordion-button-focus-border-color
 // Boosted mod: no $accordion-button-focus-box-shadow
@@ -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.3
+$accordion-dark-bg:                       $black !default; // Deprecated in v5.3.3
+$accordion-dark-border-color:             $gray-700 !default; // Deprecated in v5.3.3
+$accordion-dark-button-color:             $accordion-dark-color !default; // Deprecated in v5.3.3
+$accordion-dark-button-bg:                $accordion-dark-bg !default; // Deprecated in v5.3.3
+$accordion-dark-button-hover-bg:          $gray-900 !default; // Deprecated in v5.3.3
+$accordion-dark-button-active-color:      $white !default; // Deprecated in v5.3.3
 // 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
index 63de339877..690251b21a 100644
--- a/site/content/docs/5.3/components/accordion.md
+++ b/site/content/docs/5.3/components/accordion.md
@@ -202,6 +202,14 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord
 
 ## Dark variant
 
+{{< deprecated-in "5.3.3" >}}
+
+{{< callout warning >}}
+New dark accordions in v5.3.3 — 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" >}}).
+
+`.accordion-dark` will be removed in v6.
+{{< /callout >}}
+
 {{< added-in "5.2.0" >}}
 
 Add `.accordion-dark` to the `.accordion` for a dark variant.

From ed5bf7514d42b49bd3d5ae7635d0cc4aac69f039 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Tue, 26 Sep 2023 08:19:47 +0200
Subject: [PATCH 2/2] Enhance dark variant retrocompatibility

---
 scss/_root.scss                               | 85 ++++++++++---------
 site/content/docs/5.3/components/accordion.md |  6 +-
 2 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/scss/_root.scss b/scss/_root.scss
index 6824066ce7..0000ec6adb 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -142,49 +142,56 @@
 // scss-docs-start root-dark-rule
 // Boosted mod
 
-/* [class*="bg-black"],
-[class*="-dark"]:not(.border-dark):not(.text-dark):not(.btn-dark):not(.focus-ring-dark):not(.link-underline-dark):not(.link-dark),
-[class*="bg-secondary"] {
-  --#{$prefix}primary-text-rgb: #{to-rgb($brand-orange)};
-  --#{$prefix}link-color: #{$link-color-inverted};
-  --#{$prefix}link-hover-color: #{$link-hover-color-inverted};
-  --#{$prefix}link-color-rgb: #{to-rgb($link-color-inverted)};
-  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-inverted)};
-  --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-inverted};
-  --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-inverted};
-  --#{$prefix}caption-color: #{$table-caption-color-inverted};
-  --#{$prefix}code-color: #{$code-color-inverted};
-  --#{$prefix}highlight-color: #{$mark-color-inverted};
-  --#{$prefix}highlight-bg: #{$mark-bg-inverted};
-  --#{$prefix}kbd-color: #{$kbd-color-inverted};
-  --#{$prefix}kbd-bg: #{$kbd-bg-inverted};
-  --#{$prefix}pre-color: #{$pre-color-inverted};
-  --#{$prefix}body-color: #{$body-color-dark};
-  --#{$prefix}heading-color: #{$headings-color-dark};
-
-  // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
-  [class*="bg-"]:not(&):not(.bg-transparent) {
-    --#{$prefix}primary-text-rgb: #{to-rgb($accessible-orange)};
-    --#{$prefix}link-color: #{$link-color};
-    --#{$prefix}link-hover-color: #{$link-hover-color};
-    --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
-    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
-    --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color};
-    --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color};
-    --#{$prefix}caption-color: #{$table-caption-color};
-    --#{$prefix}code-color: #{$code-color};
-    --#{$prefix}highlight-color: #{$mark-color};
-    --#{$prefix}highlight-bg: #{$mark-bg};
-    --#{$prefix}kbd-color: #{$kbd-color};
-    --#{$prefix}kbd-bg: #{$kbd-bg};
-    --#{$prefix}pre-color: #{$pre-color};
-    --#{$prefix}body-color: #{$body-color};
-    --#{$prefix}heading-color: #{$headings-color};
+:not([data-bs-theme="dark"]) {
+  [class*="bg-black"],
+  [class*="-dark"]:not(.border-dark):not(.text-dark):not(.btn-dark):not(.focus-ring-dark):not(.link-underline-dark):not(.link-dark),
+  [class*="bg-secondary"] {
+    --#{$prefix}primary-text-rgb: #{to-rgb($brand-orange)};
+    --#{$prefix}link-color: #{$link-color-inverted};
+    --#{$prefix}link-hover-color: #{$link-hover-color-inverted};
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color-inverted)};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-inverted)};
+    --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-inverted};
+    --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-inverted};
+    --#{$prefix}caption-color: #{$table-caption-color-inverted};
+    --#{$prefix}code-color: #{$code-color-inverted};
+    --#{$prefix}highlight-color: #{$mark-color-inverted};
+    --#{$prefix}highlight-bg: #{$mark-bg-inverted};
+    --#{$prefix}kbd-color: #{$kbd-color-inverted};
+    --#{$prefix}kbd-bg: #{$kbd-bg-inverted};
+    --#{$prefix}pre-color: #{$pre-color-inverted};
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}heading-color: #{$headings-color-dark};
+
+    // For testing only
+    // --#{$prefix}code-color: #fd0;
+
+    // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
+    [class*="bg-"]:not(&):not(.bg-transparent) {
+      --#{$prefix}primary-text-rgb: #{to-rgb($accessible-orange)};
+      --#{$prefix}link-color: #{$link-color};
+      --#{$prefix}link-hover-color: #{$link-hover-color};
+      --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+      --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+      --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color};
+      --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color};
+      --#{$prefix}caption-color: #{$table-caption-color};
+      --#{$prefix}code-color: #{$code-color};
+      --#{$prefix}highlight-color: #{$mark-color};
+      --#{$prefix}highlight-bg: #{$mark-bg};
+      --#{$prefix}kbd-color: #{$kbd-color};
+      --#{$prefix}kbd-bg: #{$kbd-bg};
+      --#{$prefix}pre-color: #{$pre-color};
+      --#{$prefix}body-color: #{$body-color};
+      --#{$prefix}heading-color: #{$headings-color};
+
+      // For testing only
+      // --#{$prefix}code-color: #df0;
+    }
   }
 }
 // End mod
 // scss-docs-end root-dark-rule
-*/
 
 @if $enable-dark-mode {
   @include color-mode(dark, true) {
diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md
index 690251b21a..81f3d82b93 100644
--- a/site/content/docs/5.3/components/accordion.md
+++ b/site/content/docs/5.3/components/accordion.md
@@ -205,13 +205,9 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord
 {{< deprecated-in "5.3.3" >}}
 
 {{< callout warning >}}
-New dark accordions in v5.3.3 — 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" >}}).
-
-`.accordion-dark` will be removed in v6.
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode: 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.
 
 {{< example class="bg-dark" >}}