feat(css): CSS variables in stickers (#1251)

Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>

scss/_sticker.scss

@@ -1,39 +1,42 @@
 .sticker {
+  // scss-docs-start sticker-css-vars
+  --#{$prefix}sticker-size: #{$sticker-size-md};
+  --#{$prefix}sticker-font-weight: #{$font-weight-bold};
+  --#{$prefix}sticker-background-color: #{$brand-orange};
+  --#{$prefix}sticker-content-max-width: #{$sticker-content-max-width-md};
+  // scss-docs-end sticker-css-vars
+
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: $sticker-size-md;
-  height: $sticker-size-md;
-  font-weight: $font-weight-bold;
+  width: var(--#{$prefix}sticker-size);
+  height: var(--#{$prefix}sticker-size);
+  font-weight: var(--#{$prefix}sticker-font-weight);
   text-align: center;
   word-wrap: break-word;
-  background-color: $brand-orange;
-  border-radius: $sticker-size-lg; // stylelint-disable-line property-disallowed-list
+  background-color: var(--#{$prefix}sticker-background-color);
+  border-radius: var(--#{$prefix}sticker-size); // stylelint-disable-line property-disallowed-list
 
   > * {
-    max-width: $sticker-content-max-width-md;
+    max-width: var(--#{$prefix}sticker-content-max-width);
   }
 
   // Large sticker
 
   &.sticker-lg {
-    width: $sticker-size-lg;
-    height: $sticker-size-lg;
-
-    > * {
-      max-width: $sticker-content-max-width-lg;
-    }
+    // scss-docs-start sticker-lg-css-vars
+    --#{$prefix}sticker-size: #{$sticker-size-lg};
+    --#{$prefix}sticker-content-max-width: #{$sticker-content-max-width-lg};
+    // scss-docs-end sticker-lg-css-vars
   }
 
   // Small sticker
 
   &.sticker-sm {
-    width: $sticker-size-sm;
-    height: $sticker-size-sm;
-
-    > * {
-      max-width: $sticker-content-max-width-sm;
-    }
+    // scss-docs-start sticker-sm-css-vars
+    --#{$prefix}sticker-size: #{$sticker-size-sm};
+    --#{$prefix}sticker-content-max-width: #{$sticker-content-max-width-sm};
+    // scss-docs-end sticker-sm-css-vars
   }
 }

site/content/docs/5.1/components/sticker.md

@@ -68,7 +68,7 @@ Fancy larger or smaller stickers? Add `.sticker-lg` or `.sticker-sm` for additio
 Since stickers only provide a container, accessibility becomes specific to the sticker content:
 * [Showing and vocalizing prices](https://a11y-guidelines.orange.com/en/web/components-examples/price-vocalization) can help when stickers contain prices.
 * [Accessibility and SVGs](https://a11y-guidelines.orange.com/en/articles/accessible-svg) can help with the SVGs.
-* You must semantize the informative content in context with HTML elements, such as `<p>` (as shown in our examples), `<h1>` to `<h6>`, etc. 
+* You must semantize the informative content in context with HTML elements, such as `<p>` (as shown in our examples), `<h1>` to `<h6>`, etc.
 
 ### Focus on one use case
 
@@ -83,8 +83,22 @@ Since stickers only provide a container, accessibility becomes specific to the s
 </div>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
+As part of Boosted's evolving CSS variables approach, stickers now use local CSS variables on `.sticker` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="sticker-css-vars" file="scss/_sticker.scss" >}}
+
+Small and large sticker modifier classes are used to update the value of these CSS variables as needed.
+
+{{< scss-docs name="sticker-sm-css-vars" file="scss/_sticker.scss" >}}
+
+{{< scss-docs name="sticker-lg-css-vars" file="scss/_sticker.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="sticker" file="scss/_variables.scss" >}}