From f2edff617d6ec88a185c0e48d075fe954031113e Mon Sep 17 00:00:00 2001
From: MewenLeHo <mewen.leho.ext@orange.com>
Date: Wed, 13 Sep 2023 12:51:24 +0200
Subject: [PATCH] Add red background toggle button

---
 .../content/docs/5.3/examples/fonts/fonts.css | 11 ++++++----
 .../docs/5.3/examples/fonts/index.html        | 20 ++++++++++++++++---
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/site/content/docs/5.3/examples/fonts/fonts.css b/site/content/docs/5.3/examples/fonts/fonts.css
index 2239a3a3d9..c13d22d39b 100644
--- a/site/content/docs/5.3/examples/fonts/fonts.css
+++ b/site/content/docs/5.3/examples/fonts/fonts.css
@@ -79,14 +79,17 @@
 }
 
 .letter-spacing-n0-25 {
-  letter-spacing: -0.25px;
+  letter-spacing: -.25px;
 }
 
 .letter-spacing-n0-5 {
-  letter-spacing: -0.5px;
+  letter-spacing: -.5px;
 }
 
 .bg-light-gray {
-  background-color: rgba(256, 0, 0, 0.4);
+  background-color: rgba(256, 0, 0, .4);
+}
+
+.bg-none {
+  background-color: none;
 }
-  
\ No newline at end of file
diff --git a/site/content/docs/5.3/examples/fonts/index.html b/site/content/docs/5.3/examples/fonts/index.html
index 7bbe43a3c1..f386518d42 100644
--- a/site/content/docs/5.3/examples/fonts/index.html
+++ b/site/content/docs/5.3/examples/fonts/index.html
@@ -19,7 +19,10 @@
   <h1 class="visually-hidden">Fonts examples</h1>
 
   <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
-  <label class="btn btn-primary mb-5" for="btn-check" onclick="toggle()">Toggle yellow lines display</label>
+  <label class="btn btn-primary mb-5" for="btn-check" onclick="toggleLines()">Toggle yellow lines display</label>
+
+  <input type="checkbox" class="btn-check" id="btn-bg" autocomplete="off">
+  <label class="btn btn-primary mb-5" for="btn-bg" onclick="toggleBackground()">Toggle red background display</label>
 
   <div class="d-flex flex-column fw-700 text-white lh-40px letter-spacing-n1 fs-40px">
     <hr>
@@ -165,9 +168,20 @@ <h1 class="visually-hidden">Fonts examples</h1>
 </main>
 
 <script>
-  function toggle() {
+  function toggleLines() {
     document.querySelectorAll('.position-absolute').forEach(function(el) {
       el.classList.toggle('d-none');
     });
   }
-</script>
\ No newline at end of file
+  function toggleBackground() {
+    document.querySelectorAll('span').forEach(function(el) {
+      if (el.classList.contains('bg-light-gray')) {
+        el.classList.remove('bg-light-gray')
+        el.classList.add('bg-none')
+      } else {
+        el.classList.remove('bg-none')
+        el.classList.add('bg-light-gray')
+      }
+    });
+  }
+</script>