Dark mode: Stepped process (#2273)

Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Louis-Maxime Piton <[email protected]>
Orange-OpenSource · Oct 3, 2023 · e2a770b · e2a770b
1 parent 938cb59
commit e2a770b
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 24 deletions.
diff --git a/scss/_stepped-process.scss b/scss/_stepped-process.scss
@@ -7,6 +7,7 @@
   --#{$prefix}stepped-process-font-size: #{$stepped-process-font-size};
   --#{$prefix}stepped-process-font-weight: #{$stepped-process-font-weight};
   --#{$prefix}stepped-process-counter: #{$stepped-process-counter};
+  --#{$prefix}stepped-process-bg: #{$stepped-process-bg};
   --#{$prefix}stepped-process-item-padding-y: #{$step-item-padding};
   --#{$prefix}stepped-process-item-padding-x: 0;
   --#{$prefix}stepped-process-item-margin-end: #{$step-item-margin-end};

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -89,7 +89,6 @@ $code-color-dark:                   tint-color($code-color, 40%) !default;
 $mark-color-dark:                   $black !default; // Boosted mod: instead of `$body-color-dark`
 $mark-bg-dark:                      $white !default; // Boosted mod: instead of `$yellow-800`
 
-
 //
 // Forms
 //

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -2206,26 +2206,27 @@ $stepped-process-font-size:   $small-font-size !default;
 $stepped-process-font-weight: $font-weight-bold !default;
 $stepped-process-max-items:   5 !default;
 $stepped-process-counter:     step !default; // Used as a counter name
+$stepped-process-bg:          var(--#{$prefix}body-bg) !default;
 
 $step-item-padding:           7px !default;
 // fusv-disable
 $step-item-padding-end:       $step-item-padding * 2 !default; // Deprecated in v5.2.0
 // fusv-enable
 $step-item-margin-end:        var(--#{$prefix}border-width) !default;
-$step-item-bg:                $black !default;
+$step-item-bg:                var(--#{$prefix}highlight-bg) !default;
 $step-item-active-bg:         $primary !default;
-$step-item-next-bg:           $gray-400 !default;
+$step-item-next-bg:           var(--#{$prefix}border-color-translucent) !default;
 $step-item-shadow-size:       calc(var(--#{$prefix}border-width) * 1.5) !default; // stylelint-disable-line function-disallowed-list
-$step-item-drop-shadow:       drop-shadow($step-item-shadow-size 0 0 $white) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 $white) #{"*/"} !default; // stylelint-disable-line function-disallowed-list
+$step-item-drop-shadow:       drop-shadow($step-item-shadow-size 0 0 var(--#{$prefix}stepped-process-bg)) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 var(--#{$prefix}stepped-process-bg)) #{"*/"} !default; // stylelint-disable-line function-disallowed-list
 
 $step-item-arrow-width:       .8125rem !default;
 $step-item-arrow-shape:       polygon(0% 0%, 1px 0%, subtract(100%, var(--#{$prefix}border-width)) 50%, 1px 100%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, subtract(100%, 1px) 0%, var(--#{$prefix}border-width) 50%, subtract(100%, 1px) 100%, 100% 100%) #{"*/"} !default; // Used in clip-path
 
 $step-link-width:             1.25ch !default; // Matches width of a single number
-$step-link-color:             $white !default;
+$step-link-color:             var(--#{$prefix}highlight-color) !default;
 $step-link-active-color:      $black !default;
 $step-link-active-outline:    $black !default;
-$step-link-next-color:        $black !default;
+$step-link-next-color:        var(--#{$prefix}link-color) !default;
 $step-link-line-height:       $line-height-sm !default;
 $step-link-marker:            counter(var(--bs-stepped-process-counter)) inspect("\A0") !default;
 $step-link-marker-lg:         counter(var(--bs-stepped-process-counter)) inspect(".\A0") !default;

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -46,6 +46,11 @@ sitemap_exclude: true
     <div style="width: 50px; height: 50px; background-color:var(--bs-secondary-color)" data-bs-theme="light"></div>
     <div style="width: 50px; height: 50px; background-color:var(--bs-secondary-color)" data-bs-theme="dark"></div>
   </div>
+  <div class="d-flex flex-row gap-2 align-items-center">
+    <div style="width: 200px">--bs-link-color</div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-link-color)" data-bs-theme="light"></div>
+    <div style="width: 50px; height: 50px; background-color:var(--bs-link-color)" data-bs-theme="dark"></div>
+  </div>
   <div class="d-flex flex-row gap-2 align-items-center">
     <div style="width: 200px">--bs-link-hover-color</div>
     <div style="width: 50px; height: 50px; background-color:var(--bs-link-hover-color)" data-bs-theme="light"></div>
@@ -121,7 +126,7 @@ sitemap_exclude: true
   </div>
 </div>
 
-### Local dark theme
+### Dark theme on container
 
 Using bg-body
 
@@ -164,7 +169,7 @@ Using bg-body
   </div>
 </div>
 
-### Local light theme
+### Light theme on container
 
 Using bg-body
 
@@ -209,7 +214,7 @@ Using bg-body
 
 ### Dark theme on component
 
-<div class="border border-tertiary p-3">
+<div class="border border-tertiary p-3" style="background-color: #282d55">
   <div class="accordion" id="accordionExample6" data-bs-theme="dark">
     <div class="accordion-item">
       <h2 class="accordion-header">
@@ -250,7 +255,7 @@ Using bg-body
 
 ### Light theme on component
 
-<div class="border border-tertiary p-3">
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
   <div class="accordion" id="accordionExample7" data-bs-theme="light">
     <div class="accordion-item">
       <h2 class="accordion-header">
@@ -312,7 +317,7 @@ Using bg-body
   </div>
 </div>
 
-### Local dark theme
+### Dark theme on container
 
 Using bg-body
 
@@ -335,7 +340,7 @@ Using bg-body
   </div>
 </div>
 
-### Local light theme
+### Light theme on container
 
 Using bg-body
 
@@ -360,7 +365,7 @@ Using bg-body
 
 ### Dark theme on component
 
-<div class="border border-tertiary p-3">
+<div class="border border-tertiary p-3" style="background-color: #282d55">
   <div class="alert alert-success bg-body" role="alert" data-bs-theme="dark">
     <span class="alert-icon"><span class="visually-hidden">Success</span></span>
     <p>Success notification text goes here.</p>
@@ -381,7 +386,7 @@ Using bg-body
 
 ### Light theme on component
 
-<div class="border border-tertiary p-3">
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
   <div class="alert alert-success bg-body" role="alert" data-bs-theme="light">
     <span class="alert-icon"><span class="visually-hidden">Success</span></span>
     <p>Success notification text goes here.</p>
@@ -427,7 +432,7 @@ Using bg-body
   </nav>
 </div>
 
-### Local dark theme
+### Dark theme on container
 
 Using bg-body
 
@@ -454,7 +459,7 @@ Using bg-body
   </nav>
 </div>
 
-### Local light theme
+### Light theme on container
 
 Using bg-body
 
@@ -483,8 +488,8 @@ Using bg-body
 
 ### Dark theme on component
 
-<div class="border border-tertiary p-3">
-  <nav class="stepped-process" aria-label="Checkout process" data-bs-theme="dark">
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <nav class="stepped-process" aria-label="Checkout process" data-bs-theme="dark" style="--bs-stepped-process-bg: #282d55;">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
       <li class="stepped-process-item">
@@ -508,8 +513,8 @@ Using bg-body
 
 ### Light theme on component
 
-<div class="border border-tertiary p-3">
-  <nav class="stepped-process" aria-label="Checkout process" data-bs-theme="light">
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <nav class="stepped-process" aria-label="Checkout process" data-bs-theme="light" style="--bs-stepped-process-bg: #b5e8f7;">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
       <li class="stepped-process-item">
@@ -552,7 +557,7 @@ Using bg-body
   </nav>
 </div>
 
-### Local dark theme
+### Dark theme on container
 
 Using bg-body
 
@@ -574,7 +579,7 @@ Using bg-body
   </nav>
 </div>
 
-### Local light theme
+### Light theme on container
 
 Using bg-body
 
@@ -598,7 +603,7 @@ Using bg-body
 
 ### Dark theme on component
 
-<div class="border border-tertiary p-3">
+<div class="border border-tertiary p-3" style="background-color: #282d55">
   <nav class="local-nav" aria-label="Basic local navigation" data-bs-theme="dark">
     <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav4" aria-expanded="false" aria-controls="collapseLocalNav4">
       <span class="container-xxl">Shop</span>
@@ -618,7 +623,7 @@ Using bg-body
 
 ### Light theme on component
 
-<div class="border border-tertiary p-3">
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
   <nav class="local-nav" aria-label="Basic local navigation" data-bs-theme="light">
     <button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav5" aria-expanded="false" aria-controls="collapseLocalNav5">
       <span class="container-xxl">Shop</span>
-Original file line number
+Diff line change
@@ Expand Up / @@ -89,7 +89,6 @@ $code-color-dark: tint-color($code-color, 40%) !default; @@
     $mark-color-dark:                   $black !default; // Boosted mod: instead of `$body-color-dark`
     $mark-bg-dark:                      $white !default; // Boosted mod: instead of `$yellow-800`
     //
     // Forms
     //
@@ Expand Down @@