Drop dark stepped process

Orange-OpenSource · Sep 27, 2023 · d080862 · d080862
1 parent 26699d0
commit d080862
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 55 deletions.
diff --git a/scss/_stepped-process.scss b/scss/_stepped-process.scss
@@ -143,15 +143,3 @@
     flex: $stepped-process-max-items - 1;
   }
 }
-
-.stepped-process-dark {
-  // scss-docs-start stepped-process-dark-css-vars
-  --#{$prefix}stepped-process-item-bg: #{$step-item-dark-bg};
-  --#{$prefix}stepped-process-item-active-bg: #{$step-item-dark-active-bg};
-  --#{$prefix}stepped-process-item-next-bg: #{$step-item-dark-next-bg};
-  --#{$prefix}stepped-process-item-drop-shadow: #{$step-item-dark-drop-shadow};
-  --#{$prefix}stepped-process-link-color: #{$step-link-dark-color};
-  --#{$prefix}stepped-process-link-active-color: #{$step-link-dark-active-color};
-  --#{$prefix}stepped-process-link-next-color: #{$step-link-dark-next-color};
-  // scss-docs-end stepped-process-dark-css-vars
-}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -2242,15 +2242,6 @@ $step-link-marker-lg:         counter(var(--bs-stepped-process-counter)) inspect
 $step-link-text-decoration:   $link-decoration !default;
 // scss-docs-end stepped-process
 
-// scss-docs-start stepped-process-dark-variables
-$step-item-dark-bg:           $white !default;
-$step-item-dark-active-bg:    $brand-orange !default;
-$step-item-dark-next-bg:      $gray-700 !default;
-$step-item-dark-drop-shadow:  drop-shadow($step-item-shadow-size 0 0 $black) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 $black) #{"*/"} !default; // stylelint-disable-line function-disallowed-list
-$step-link-dark-color:        $black !default;
-$step-link-dark-active-color: $black !default;
-$step-link-dark-next-color:   $white !default;
-// scss-docs-end stepped-process-dark-variables
 
 //// Sticker
 // scss-docs-start sticker

diff --git a/site/content/docs/5.3/components/stepped-process.md b/site/content/docs/5.3/components/stepped-process.md
@@ -47,32 +47,13 @@ Add `.active` to a `.stepped-process-item` to indicate the current step, alongsi
 
 ## Dark variant
 
-{{< added-in "5.2.1" >}}
+{{< deprecated-in "5.3.3" >}}
 
-Add `.stepped-process-dark` to the `.stepped-process` for a dark variant.
+{{< callout warning >}}
+**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.
 
-{{< example class="bg-dark" >}}
-<nav class="stepped-process stepped-process-dark" aria-label="Checkout process">
-  <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
-  <ol>
-    <li class="stepped-process-item">
-      <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
-    </li>
-    <li class="stepped-process-item active">
-      <a class="stepped-process-link" title="2. Review" aria-current="step">Review</a>
-    </li>
-    <li class="stepped-process-item">
-      <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
-    </li>
-    <li class="stepped-process-item">
-      <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
-    </li>
-    <li class="stepped-process-item">
-      <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
-    </li>
-  </ol>
-</nav>
-{{< /example >}}
+Add `data-bs-theme="dark"` to the `.stepped-process` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}).
+{{< /callout >}}
 
 ## CSS
 
@@ -84,16 +65,6 @@ As part of Boosted's evolving CSS variables approach, stepped processes now use
 
 {{< scss-docs name="stepped-process-css-vars" file="scss/_stepped-process.scss" >}}
 
-Customization through CSS variables can be seen on the `.stepped-process-dark` modifier class where we override specific values without adding duplicate CSS selectors.
-
-{{< scss-docs name="stepped-process-dark-css-vars" file="scss/_stepped-process.scss" >}}
-
 ### Sass variables
 
-Variables for all stepped processes:
-
 {{< scss-docs name="stepped-process" file="scss/_variables.scss" >}}
-
-Variables for the [dark stepped process](#dark-variant):
-
-{{< scss-docs name="stepped-process-dark-variables" file="scss/_variables.scss" >}}