Use mobile demo app colors

Orange-OpenSource · Oct 23, 2024 · 1ff6aa9 · 1ff6aa9
1 parent 9def8ad
commit 1ff6aa9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git a/site/content/docs/0.0/examples/grid-system/grid-system.css b/site/content/docs/0.0/examples/grid-system/grid-system.css
@@ -1,5 +1,12 @@
-:root {
-  --bs-example-bg-col: #ffe2e2;
+:root,
+[data-bs-theme="light"] {
+  --bs-example-color-bg-emphasized-primary: #141414;
+  --bs-example-color-decorative-accent-2-default: #4ab4e6;
+  --bs-example-color-decorative-accent-2-muted: #a5daf3;
+}
+
+[data-bs-theme="dark"] {
+  --bs-example-color-bg-emphasized-primary: #333;
 }
 
 .legend {
@@ -12,17 +19,21 @@
   min-height: 150px;
 }
 
+.bg-container {
+  background-color: var(--bs-example-color-decorative-accent-2-default);
+}
+
 .bg-example {
-  background-color: #ff9f9f;
+  background-color: var(--bs-example-color-bg-emphasized-primary);
 }
 
 .bg-col {
-  background-color: var(--bs-example-bg-col);
+  background-color: var(--bs-example-color-decorative-accent-2-muted);
 }
 
 .col {
   text-align: center;
-  background-color: var(--bs-example-bg-col);
+  background-color: var(--bs-example-color-decorative-accent-2-muted);
   background-clip: content-box;
 }
 

diff --git a/site/content/docs/0.0/examples/grid-system/index.html b/site/content/docs/0.0/examples/grid-system/index.html
@@ -23,13 +23,13 @@ <h1>OUDS Web grid system example</h1>
     <p class="lead">Use this page to see how containers behave while resizing the browser.</p>
     <h2>Legend</h2>
     <p class="d-flex align-items-center">
-      <span class="bg-light legend border me-2"></span>Containers padding color (<code>#CCCCCC</code>)
+      <span class="bg-container legend border me-2"></span>Containers padding color (<code>#4ab4e6</code>)
     </p>
     <p class="d-flex align-items-center">
-      <span class="bg-col legend border me-2"></span>Columns color (<code>#FFE2E2</code>)
+      <span class="bg-col legend border me-2"></span>Columns color (<code>#a5daf3</code>)
     </p>
     <p class="d-flex align-items-center">
-      <span class="bg-white legend border me-2"></span>Gutters color (<code>#FFFFFF</code>)
+      <span class="bg-white legend border me-2"></span>Gutters color (<code>#fff</code>)
     </p>
   </div>
 
@@ -40,7 +40,7 @@ <h2>Default grid</h2>
     </p>
   </div>
   <div class="bg-example py-3">
-    <div class="container-fluid container-max-width bg-light">
+    <div class="container-fluid container-max-width bg-container">
       <div class="row">
         <div class="col"></div>
         <div class="col"></div>
@@ -65,7 +65,7 @@ <h2>Need more space?</h2>
     </p>
   </div>
   <div class="bg-example py-3">
-    <div class="container-fluid bg-light">
+    <div class="container-fluid bg-container">
       <div class="row">
         <div class="col"></div>
         <div class="col"></div>
@@ -91,7 +91,7 @@ <h2>Need more space?</h2>
   <hr class="border-none">
 
   <div class="bg-example py-3">
-    <div class="container bg-light">
+    <div class="container bg-container">
       <div class="row">
         <div class="col"></div>
         <div class="col"></div>
@@ -112,7 +112,7 @@ <h2>Need more space?</h2>
   <hr class="border-none">
 
   <div class="bg-example py-3">
-    <div class="container-xs bg-light">
+    <div class="container-xs bg-container">
       <div class="row">
         <div class="col"></div>
         <div class="col"></div>
@@ -133,7 +133,7 @@ <h2>Need more space?</h2>
   <hr class="border-none">
 
   <div class="bg-example py-3">
-    <div class="container-sm bg-light">
+    <div class="container-sm bg-container">
       <div class="row">
         <div class="col"></div>
         <div class="col"></div>
@@ -154,7 +154,7 @@ <h2>Need more space?</h2>
   <hr class="border-none">
 
   <div class="bg-example py-3">
-    <div class="container-md bg-light">
+    <div class="container-md bg-container">
       <div class="row">
         <div class="col"></div>
         <div class="col"></div>
@@ -175,7 +175,7 @@ <h2>Need more space?</h2>
   <hr class="border-none">
 
   <div class="bg-example py-3">
-    <div class="container-lg bg-light">
+    <div class="container-lg bg-container">
       <div class="row">
         <div class="col"></div>
         <div class="col"></div>
@@ -196,7 +196,7 @@ <h2>Need more space?</h2>
   <hr class="border-none">
 
   <div class="bg-example py-3">
-    <div class="container-xl bg-light">
+    <div class="container-xl bg-container">
       <div class="row">
         <div class="col"></div>
         <div class="col"></div>
@@ -217,7 +217,7 @@ <h2>Need more space?</h2>
   <hr class="border-none">
 
   <div class="bg-example py-3">
-    <div class="container-2xl bg-light">
+    <div class="container-2xl bg-container">
       <div class="row">
         <div class="col"></div>
         <div class="col"></div>
@@ -238,7 +238,7 @@ <h2>Need more space?</h2>
   <hr class="border-none">
 
   <div class="bg-example py-3">
-    <div class="container-3xl bg-light">
+    <div class="container-3xl bg-container">
       <div class="row">
         <div class="col"></div>
         <div class="col"></div>