feat(css): CSS variables for Stepped process (#1281)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Jul 19, 2022 · 45a280e · 45a280e
1 parent 8fbfd20
commit 45a280e
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 83 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "36.0 kB"
+      "maxSize": "36.25 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "33.0 kB"
+      "maxSize": "33.25 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

diff --git a/scss/_stepped-process.scss b/scss/_stepped-process.scss
@@ -1,109 +1,137 @@
 //
 // Orange stepped process
 //
+
 .stepped-process {
+  // scss-docs-start stepped-process-css-vars
+  --#{$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-item-padding-y: #{$step-item-padding};
+  --#{$prefix}stepped-process-item-padding-x: 0;
+  --#{$prefix}stepped-process-item-margin-end: #{$step-item-margin-end};
+  --#{$prefix}stepped-process-item-bg: #{$step-item-bg};
+  --#{$prefix}stepped-process-item-active-bg: #{$step-item-active-bg};
+  --#{$prefix}stepped-process-item-next-bg: #{$step-item-next-bg};
+  --#{$prefix}stepped-process-item-drop-shadow: none;
+  --#{$prefix}stepped-process-item-arrow-width: 0;
+  --#{$prefix}stepped-process-item-arrow-shape: #{$step-item-arrow-shape};
+  --#{$prefix}stepped-process-link-width: #{$step-link-width};
+  --#{$prefix}stepped-process-link-color: #{$step-link-color};
+  --#{$prefix}stepped-process-link-active-color: #{$step-link-active-color};
+  --#{$prefix}stepped-process-link-marker: #{$step-link-marker};
+  --#{$prefix}stepped-process-link-text-decoration: #{$step-link-text-decoration};
+
+  @include media-breakpoint-up(sm) {
+    --#{$prefix}stepped-process-item-padding-x: 0;
+    --#{$prefix}stepped-process-item-margin-end: 0;
+    --#{$prefix}stepped-process-item-drop-shadow: #{$step-item-drop-shadow};
+    --#{$prefix}stepped-process-item-arrow-width: #{$step-item-arrow-width};
+  }
+
+  @include media-breakpoint-up(xl) {
+    --#{$prefix}stepped-process-link-width: none;
+    --#{$prefix}stepped-process-link-marker: #{$step-link-marker-lg};
+  }
+  // scss-docs-end stepped-process-css-vars
+
   ol {
     display: flex;
     padding: 0;
     margin: 0;
     overflow: hidden;
-    font-size: $small-font-size;
-    font-weight: $font-weight-bold;
+    font-size: var(--#{$prefix}stepped-process-font-size);
+    font-weight: var(--#{$prefix}stepped-process-font-weight);
     text-align: center;
     list-style: none;
-    counter-reset: $stepped-process-counter;
+    counter-reset: var(--#{$prefix}stepped-process-counter);
   }
 }
 
 .stepped-process-item {
+  position: relative;
   display: flex;
   flex: 1;
-  padding: $step-item-padding;
-  margin-right: $step-item-margin-end;
-  counter-increment: $stepped-process-counter;
-  background-color: $step-item-bg;
+  padding: var(--#{$prefix}stepped-process-item-padding-y) var(--#{$prefix}stepped-process-item-padding-x);
+  counter-increment: var(--#{$prefix}stepped-process-counter);
+  background-color: var(--#{$prefix}stepped-process-item-bg);
+  filter: var(--#{$prefix}stepped-process-item-drop-shadow);
+
+  &:not(:last-child) {
+    margin-right: var(--#{$prefix}stepped-process-item-margin-end);
+
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: subtract(100%, 1px);
+      z-index: -1;
+      width: var(--#{$prefix}stepped-process-item-arrow-width);
+      clip-path: var(--#{$prefix}stepped-process-item-arrow-shape);
+      content: "";
+      background-color: inherit;
+    }
+  }
 
   &.active {
-    background-color: $step-item-active-bg;
+    background-color: var(--#{$prefix}stepped-process-item-active-bg);
   }
 
   .active ~ & {
-    background-color: $step-item-next-bg;
+    background-color: var(--#{$prefix}stepped-process-item-next-bg);
+  }
+
+  & + & {
+    padding-left: var(--#{$prefix}stepped-process-item-arrow-width);
   }
 }
 
 .stepped-process-link {
-  flex: 1 0 $step-link-width;
-  max-width: $step-link-width;
+  flex: 1 0 var(--#{$prefix}stepped-process-link-width);
+  max-width: var(--#{$prefix}stepped-process-link-width);
   margin: auto;
   overflow: hidden;
   line-height: 1;
-  color: $step-link-color;
+  color: var(--#{$prefix}stepped-process-link-color);
   text-decoration: if($link-decoration == none, null, none);
   white-space: nowrap;
   outline-offset: $spacer;
 
   &::before {
-    content: $step-link-marker;
+    content: var(--#{$prefix}stepped-process-link-marker);
   }
 
   &:hover,
   &:focus {
-    color: $step-link-color;
+    color: var(--#{$prefix}stepped-process-link-color);
   }
 
   &:hover {
     text-decoration: if($link-hover-decoration == underline, null, underline);
   }
 
   &:focus {
-    text-decoration: $link-decoration;
+    text-decoration: var(--#{$prefix}stepped-process-link-text-decoration);
     outline-offset: $spacer * .25;
   }
 
   .active &,
   .active ~ .stepped-process-item & {
-    color: $step-link-active-color;
+    color: var(--#{$prefix}stepped-process-link-active-color);
   }
 }
 
-@include media-breakpoint-up(sm) {
-  .stepped-process-item {
-    position: relative;
-    padding: $step-item-padding 0;
-    margin: 0;
-    filter: $step-item-drop-shadow;
-
-    & + & {
-      padding-left: $step-item-padding-end;
-    }
-
-    &:not(:last-child)::after {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: subtract(100%, 1px);
-      z-index: -1;
-      width: $step-item-arrow-width;
-      clip-path: $step-item-arrow-shape;
-      content: "";
-      background-color: inherit;
-    }
-  }
-
-  @for $i from 1 through $stepped-process-max-items {
-    .stepped-process-item:nth-child(#{$i}) {
-      $index: subtract($stepped-process-max-items, $i);
-      z-index: if($index == 0, null, $index);
-    }
+@for $i from 1 through $stepped-process-max-items {
+  .stepped-process-item:nth-child(#{$i}) {
+    $index: subtract($stepped-process-max-items, $i);
+    z-index: if($index == 0, null, $index);
   }
+}
 
+@include media-breakpoint-up(sm) {
   .active .stepped-process-link {
+    --#{$prefix}stepped-process-link-marker: #{$step-link-marker-lg};
     max-width: none;
-
-    &::before {
-      content: $step-link-marker-lg;
-    }
   }
 }
 
@@ -112,13 +140,3 @@
     flex: $stepped-process-max-items - 1;
   }
 }
-
-@include media-breakpoint-up(xl) {
-  .stepped-process-link {
-    max-width: none;
-  }
-
-  .stepped-process-link::before {
-    content: $step-link-marker-lg;
-  }
-}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1967,26 +1967,31 @@ $back-to-top-icon-height:        subtract(1rem, 1px) !default;
 
 //// Stepped process
 // scss-docs-start stepped-process
-$stepped-process-max-items: 5 !default;
-$stepped-process-counter:   step !default; // Used as a counter name
-
-$step-item-margin-end:   $border-width !default;
-$step-item-padding:      .5rem !default;
-$step-item-bg:           $black !default;
-$step-item-active-bg:    $primary !default;
-$step-item-next-bg:      $gray-400 !default;
-$step-item-shadow-size:  $border-width * 1.5 !default;
-$step-item-drop-shadow:  drop-shadow($step-item-shadow-size 0 0 $white) #{"/* rtl:"} drop-shadow(-$step-item-shadow-size 0 0 $white) #{"*/"} !default;
-$step-item-padding-end:  $step-item-padding * 2 !default;
-
-$step-link-width:        1.25ch !default; // Matches width of a single number
-$step-link-color:        $white !default;
-$step-link-active-color: $black !default;
-$step-link-marker:       counter($stepped-process-counter) "\A0" !default;
-$step-link-marker-lg:    counter($stepped-process-counter) ".\A0" !default;
-
-$step-item-arrow-width:  1rem !default;
-$step-item-arrow-shape:  polygon(0% 0%, subtract(100%, $border-width) 50%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, $border-width 50%, 100% 100%) #{"*/"} !default; // Used in clip-path
+$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
+
+$step-item-padding:           .5rem !default;
+// fusv-disable
+$step-item-padding-end:       $step-item-padding * 2 !default; // Deprecated in v5.2.0
+// fusv-enable
+$step-item-margin-end:        $border-width !default;
+$step-item-bg:                $black !default;
+$step-item-active-bg:         $primary !default;
+$step-item-next-bg:           $gray-400 !default;
+$step-item-shadow-size:       $border-width * 1.5 !default;
+$step-item-drop-shadow:       drop-shadow($step-item-shadow-size 0 0 $white) #{"/* rtl:"} drop-shadow(-$step-item-shadow-size 0 0 $white) #{"*/"} !default;
+
+$step-item-arrow-width:       1rem !default;
+$step-item-arrow-shape:       polygon(0% 0%, subtract(100%, $border-width) 50%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, $border-width 50%, 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-active-color:      $black !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;
+$step-link-text-decoration:   $link-decoration !default;
 // scss-docs-end stepped-process
 
 //// Sticker

diff --git a/site/content/docs/5.2/components/stepped-process.md b/site/content/docs/5.2/components/stepped-process.md
@@ -39,10 +39,18 @@ Add `.active` to a `.stepped-process-item` to indicate the current step, alongsi
 </nav>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Boosted's evolving CSS variables approach, stepped processes now use local CSS variables on `.stepped-process` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="stepped-process-css-vars" file="scss/_stepped-process.scss" >}}
+
+### Sass variables
+
 For more details, please have a look at the exhaustive list of available variables:
 
-{{< scss-docs name="stepped-process" file="scss/_variables.scss" >}}
+{{< scss-docs name="stepped-process" file="scss/_variables.scss" >}}