From a6c33cccfd5fae6a707fdd4e9802ec35b70aa78a Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 13 Nov 2023 15:46:17 +0100
Subject: [PATCH] Dark mode: Grid example (#2368)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
---
 site/content/docs/5.3/examples/grid/grid.css   | 11 +++++++----
 site/content/docs/5.3/examples/grid/index.html |  7 ++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/site/content/docs/5.3/examples/grid/grid.css b/site/content/docs/5.3/examples/grid/grid.css
index 4550500a22..93793be2ef 100644
--- a/site/content/docs/5.3/examples/grid/grid.css
+++ b/site/content/docs/5.3/examples/grid/grid.css
@@ -1,14 +1,17 @@
 .themed-grid-col {
   padding-top: .75rem;
   padding-bottom: .75rem;
-  background-color: #eee; /* Boosted mod */
-  outline: 1px solid #ddd; /* Boosted mod */
+  background-color: var(--bs-secondary-bg); /* Boosted mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */
+  /* Boosted mod: no `border` */
+  outline: 1px solid var(--bs-border-color-translucent); /* Boosted mod */
 }
 
 .themed-container {
+  /* Boosted mod: no `padding` */
   padding-top: .75rem; /* Boosted mod */
   padding-bottom: .75rem; /* Boosted mod */
   margin-bottom: 1.5rem;
-  background-color: #b5e8f7;
-  outline: 1px solid #4bb4e6; /* Boosted mod */
+  background-color: var(--bs-secondary-bg); /* Boosted mod: instead of `rgba(112.520718, 44.062154, 249.437846, .15)` */
+  /* Boosted mod: no `border` */
+  outline: 1px solid var(--bs-border-color-translucent); /* Boosted mod */
 }
diff --git a/site/content/docs/5.3/examples/grid/index.html b/site/content/docs/5.3/examples/grid/index.html
index 8270af8674..49748fc4c3 100644
--- a/site/content/docs/5.3/examples/grid/index.html
+++ b/site/content/docs/5.3/examples/grid/index.html
@@ -86,9 +86,10 @@ <h2 class="mt-4">Two columns</h2>
     </div>
 
     <h2 class="mt-4">Full width, single column</h2>
-    <p class="text-warning">
-      No grid classes are necessary for full-width elements.
-    </p>
+    <div class="alert alert-warning">
+      <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+      <p>No grid classes are necessary for full-width elements.</p>
+    </div>
 
     <hr class="my-4">