From 441862c39399a22db53c944dcccc4c2c25c3b248 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Mon, 9 Oct 2023 15:19:51 +0200
Subject: [PATCH] Dark mode: Stickers (#2288)

---
 scss/_sticker.scss                 |   6 +-
 scss/_variables.scss               |   4 ++
 site/content/docs/5.3/dark-mode.md | 107 +++++++++++++++++++++++++++++
 3 files changed, 115 insertions(+), 2 deletions(-)

diff --git a/scss/_sticker.scss b/scss/_sticker.scss
index 704c34bf1a..8bb9e66de1 100644
--- a/scss/_sticker.scss
+++ b/scss/_sticker.scss
@@ -1,8 +1,9 @@
 .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-font-weight: #{$sticker-font-weight};
+  --#{$prefix}sticker-color: #{$sticker-color};
+  --#{$prefix}sticker-background-color: #{$sticker-background-color};
   --#{$prefix}sticker-content-max-width: #{$sticker-content-max-width-md};
   // scss-docs-end sticker-css-vars
 
@@ -13,6 +14,7 @@
   width: var(--#{$prefix}sticker-size);
   height: var(--#{$prefix}sticker-size);
   font-weight: var(--#{$prefix}sticker-font-weight);
+  color: var(--#{$prefix}sticker-color);
   text-align: center;
   word-wrap: break-word;
   background-color: var(--#{$prefix}sticker-background-color);
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3f168797df..15216208c2 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2243,6 +2243,10 @@ $step-link-text-decoration:   $link-decoration !default;
 
 //// Sticker
 // scss-docs-start sticker
+$sticker-color:                         $black !default;
+$sticker-background-color:              $brand-orange !default;
+$sticker-font-weight:                   $font-weight-bold !default;
+
 $sticker-size-sm:                       $spacer * 7 !default;
 $sticker-size-md:                       $spacer * 9 !default;
 $sticker-size-lg:                       $spacer * 14 !default;
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index ae59c18522..e9b0db5b69 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -644,6 +644,113 @@ Additional variables for dark-mode (temporary)
   </nav>
 </div>
 
+### Stickers
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3 d-flex">
+  <div class="sticker sticker-sm">
+    <p class="mb-0">
+      <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
+      <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
+      <span aria-hidden="true">Per month</span>
+      <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
+    </p>
+  </div>
+  <div class="sticker sticker-sm">
+    <svg width="35" height="35" aria-hidden="true" focusable="false">
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    </svg>
+    <p class="mb-2">
+      <span class="sticker-fs-m">Free delivery</span>
+    </p>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body d-flex" data-bs-theme="dark">
+  <div class="sticker sticker-sm">
+    <p class="mb-0">
+      <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
+      <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
+      <span aria-hidden="true">Per month</span>
+      <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
+    </p>
+  </div>
+  <div class="sticker sticker-sm">
+    <svg width="35" height="35" aria-hidden="true" focusable="false">
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    </svg>
+    <p class="mb-2">
+      <span class="sticker-fs-m">Free delivery</span>
+    </p>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body d-flex" data-bs-theme="light">
+  <div class="sticker sticker-sm">
+    <p class="mb-0">
+      <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
+      <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
+      <span aria-hidden="true">Per month</span>
+      <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
+    </p>
+  </div>
+  <div class="sticker sticker-sm">
+    <svg width="35" height="35" aria-hidden="true" focusable="false">
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    </svg>
+    <p class="mb-2">
+      <span class="sticker-fs-m">Free delivery</span>
+    </p>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3 d-flex" style="background-color: #282d55;">
+  <div class="sticker sticker-sm" data-bs-theme="dark">
+    <p class="mb-0">
+      <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
+      <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
+      <span aria-hidden="true">Per month</span>
+      <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
+    </p>
+  </div>
+  <div class="sticker sticker-sm" data-bs-theme="dark">
+    <svg width="35" height="35" aria-hidden="true" focusable="false">
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    </svg>
+    <p class="mb-2">
+      <span class="sticker-fs-m">Free delivery</span>
+    </p>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3 d-flex" style="background-color: #b5e8f7">
+  <div class="sticker sticker-sm" data-bs-theme="light">
+    <p class="mb-0">
+      <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
+      <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
+      <span aria-hidden="true">Per month</span>
+      <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
+    </p>
+  </div>
+  <div class="sticker sticker-sm" data-bs-theme="light">
+    <svg width="35" height="35" aria-hidden="true" focusable="false">
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+    </svg>
+    <p class="mb-2">
+      <span class="sticker-fs-m">Free delivery</span>
+    </p>
+  </div>
+</div>
+
 ## Forms
 
 ### Color