From 2c719a19d94bcd4b12c8c54a96120a70aab82ded Mon Sep 17 00:00:00 2001
From: Herwin Bozet <herwin.bozet@gmail.com>
Date: Wed, 20 Nov 2024 23:17:23 +0100
Subject: [PATCH] Added colored backgrounds Update backgrounds.php and
 backgrounds.scss

---
 htdocs/parts/backgrounds.php | 48 +++++++++++++++++++++++++++++++++++-
 scss/site/backgrounds.scss   | 32 ++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/htdocs/parts/backgrounds.php b/htdocs/parts/backgrounds.php
index 0401a5e..33d9a79 100644
--- a/htdocs/parts/backgrounds.php
+++ b/htdocs/parts/backgrounds.php
@@ -56,7 +56,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         </div>
     </div>
 
-    <h3 class="t-w-500 t-size-12 my-s mt-l">Other backgrounds</h3>
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Special backgrounds</h3>
     <div class="grid col-3 grid-gap-l px-s">
         <div>
             <p class="t-w-500">Transparent</p>
@@ -64,4 +64,50 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
             <span class="code">.bkgd-transparent</span>
         </div>
     </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Colored backgrounds</h3>
+    <div class="grid col-4 col-medium-2 grid-gap-l px-s">
+        <div>
+            <p class="t-w-500">Blue</p>
+            <div class="p-l border r-xl bkgd-blue my-xs"></div>
+            <span class="code">.bkgd-blue</span>
+        </div>
+        <div>
+            <p class="t-w-500">Light blue</p>
+            <div class="p-l border r-xl bkgd-blue-light my-xs"></div>
+            <span class="code">.bkgd-blue-light</span>
+        </div>
+        <div>
+            <p class="t-w-500">Green</p>
+            <div class="p-l border r-xl bkgd-green my-xs"></div>
+            <span class="code">.bkgd-green</span>
+        </div>
+        <div>
+            <p class="t-w-500">Light green</p>
+            <div class="p-l border r-xl bkgd-green-light my-xs"></div>
+            <span class="code">.bkgd-green-light</span>
+        </div>
+    </div>
+    <div class="grid col-4 col-medium-2 grid-gap-l px-s mt-m">
+        <div>
+            <p class="t-w-500">Red</p>
+            <div class="p-l border r-xl bkgd-red my-xs"></div>
+            <span class="code">.bkgd-red</span>
+        </div>
+        <div>
+            <p class="t-w-500">Light red</p>
+            <div class="p-l border r-xl bkgd-red-light my-xs"></div>
+            <span class="code">.bkgd-red-light</span>
+        </div>
+        <div>
+            <p class="t-w-500">Orange</p>
+            <div class="p-l border r-xl bkgd-orange my-xs"></div>
+            <span class="code">.bkgd-orange</span>
+        </div>
+        <div>
+            <p class="t-w-500">Light orange</p>
+            <div class="p-l border r-xl bkgd-orange-light my-xs"></div>
+            <span class="code">.bkgd-orange-light</span>
+        </div>
+    </div>
 </section>
diff --git a/scss/site/backgrounds.scss b/scss/site/backgrounds.scss
index abb2a57..28f0114 100644
--- a/scss/site/backgrounds.scss
+++ b/scss/site/backgrounds.scss
@@ -47,3 +47,35 @@
 .bkgd-transparent {
 	background: rgba(0, 0, 0, 0);
 }
+
+.bkgd-blue {
+	background-color: #{$color-background-button-primary};
+}
+
+.bkgd-blue-light {
+	background-color: #{$color-background-button-primary-hover};
+}
+
+.bkgd-green {
+	background-color: #{$color-background-button-success};
+}
+
+.bkgd-green-light {
+	background-color: #{$color-background-button-success-hover};
+}
+
+.bkgd-red {
+	background-color: #{$color-background-button-error};
+}
+
+.bkgd-red-light {
+	background-color: #{$color-background-button-error-hover};
+}
+
+.bkgd-orange {
+	background-color: #{$color-background-button-warning};
+}
+
+.bkgd-orange-light {
+	background-color: #{$color-background-button-warning-hover};
+}