Enhance dark variant retrocompatibility

Orange-OpenSource · Sep 26, 2023 · ed5bf75 · ed5bf75
1 parent 0fc537b
commit ed5bf75
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 44 deletions.
diff --git 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
@@ -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" >}}