From 9fb377828f1d8750d7e163832256fe529e9a4b25 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Tue, 2 May 2023 11:58:09 +0200
Subject: [PATCH] fix: plus petite palette

Fixes #15
---
 home.php                       |   2 +-
 scss/definitions/_palette.scss |   6 +-
 scss/mixins/_colors.scss       |   3 +-
 style.css                      | 522 +++++----------------------------
 4 files changed, 82 insertions(+), 451 deletions(-)

diff --git a/home.php b/home.php
index 26694fe..da2e50f 100644
--- a/home.php
+++ b/home.php
@@ -23,7 +23,7 @@
   </section>
     <?php if ( !is_paged() ) {
       ?>
-        <div class="toast mb-1 bg-blue home-toast"><strong class="m-0"><i class="fa fa-fw fa-info"></i> Note :</strong>  Si vous êtes intéressé pour découvrir plus
+        <div class="toast mb-1 bg-info home-toast"><strong class="m-0"><i class="fa fa-fw fa-info"></i> Note :</strong>  Si vous êtes intéressé pour découvrir plus
         de contenus trouvé sur internet, vous pouvez aussi regarder mon <a href="http://shaarli.kazhnuz.space/">Shaarli</a>, qui sert plus à
         partager des petites découverte rigolote ou intéressantes.</div>
       <?php
diff --git a/scss/definitions/_palette.scss b/scss/definitions/_palette.scss
index bb98067..be86901 100644
--- a/scss/definitions/_palette.scss
+++ b/scss/definitions/_palette.scss
@@ -32,9 +32,11 @@ $semantics: (
   "secondary":"dark",
   "warning":"orange",
   "danger":"red",
-  "info":"skyblue",
+  "info":"blue",
   "success":"green",
-  "muted":"grey");
+  "muted":"grey",
+  "light":"light",
+  "dark":"dark");
 
 $helpers: (
   "font":"dark2",
diff --git a/scss/mixins/_colors.scss b/scss/mixins/_colors.scss
index 2b63c10..6c39696 100644
--- a/scss/mixins/_colors.scss
+++ b/scss/mixins/_colors.scss
@@ -7,8 +7,7 @@
 
  // FUNCTIONS TO GET MORE EASILY COLORS
  @function list-colors() {
-     $newmap: map-merge($palette, $semantics);
-     @return $newmap;
+     @return $semantics;
  }
 
  @function luminance($color) {
diff --git a/style.css b/style.css
index 575bb11..f620e55 100644
--- a/style.css
+++ b/style.css
@@ -1586,162 +1586,6 @@ textarea {
 /* 1.2 - Colorization classes
  * Colorize some aspect of a class
 **/
-.bg-blue {
-  background-color: #339af0;
-  color: #fefefe; }
-  .bg-blue a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-blue:hover {
-    background-color: #339af0;
-    color: #fefefe; }
-    .bg-blue:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-violet {
-  background-color: #845ef7;
-  color: #fefefe; }
-  .bg-violet a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-violet:hover {
-    background-color: #845ef7;
-    color: #fefefe; }
-    .bg-violet:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-red {
-  background-color: #e33d22;
-  color: #fefefe; }
-  .bg-red a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-red:hover {
-    background-color: #e33d22;
-    color: #fefefe; }
-    .bg-red:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-orange {
-  background-color: #ff922b;
-  color: #fefefe; }
-  .bg-orange a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-orange:hover {
-    background-color: #ff922b;
-    color: #fefefe; }
-    .bg-orange:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-green {
-  background-color: #51cf66;
-  color: #fefefe; }
-  .bg-green a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-green:hover {
-    background-color: #51cf66;
-    color: #fefefe; }
-    .bg-green:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-skyblue {
-  background-color: #3bc9db;
-  color: #fefefe; }
-  .bg-skyblue a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-skyblue:hover {
-    background-color: #3bc9db;
-    color: #fefefe; }
-    .bg-skyblue:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-dark {
-  background-color: #343a40;
-  color: #fefefe; }
-  .bg-dark a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-dark:hover {
-    background-color: #343a40;
-    color: #fefefe; }
-    .bg-dark:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-light {
-  background-color: #fefefe;
-  color: #212529; }
-  .bg-light a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-light:hover {
-    background-color: #fefefe;
-    color: #212529; }
-    .bg-light:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-yellow {
-  background-color: #fcc419;
-  color: #fefefe; }
-  .bg-yellow a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-yellow:hover {
-    background-color: #fcc419;
-    color: #fefefe; }
-    .bg-yellow:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-grey {
-  background-color: #adb5bd;
-  color: #fefefe; }
-  .bg-grey a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-grey:hover {
-    background-color: #adb5bd;
-    color: #fefefe; }
-    .bg-grey:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-dark2 {
-  background-color: #212529;
-  color: #fefefe; }
-  .bg-dark2 a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-dark2:hover {
-    background-color: #212529;
-    color: #fefefe; }
-    .bg-dark2:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-light2 {
-  background-color: #f1f3f5;
-  color: #212529; }
-  .bg-light2 a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-light2:hover {
-    background-color: #f1f3f5;
-    color: #212529; }
-    .bg-light2:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
 .bg-primary {
   background-color: #e33d22;
   color: #fefefe; }
@@ -1795,13 +1639,13 @@ textarea {
       outline-color: currentColor; }
 
 .bg-info {
-  background-color: #3bc9db;
+  background-color: #339af0;
   color: #fefefe; }
   .bg-info a {
     color: currentColor;
     outline-color: currentColor; }
   .bg-info:hover {
-    background-color: #3bc9db;
+    background-color: #339af0;
     color: #fefefe; }
     .bg-info:hover a {
       color: currentColor;
@@ -1833,41 +1677,31 @@ textarea {
       color: currentColor;
       outline-color: currentColor; }
 
-.text-blue {
-  color: #339af0; }
-
-.text-violet {
-  color: #845ef7; }
-
-.text-red {
-  color: #e33d22; }
-
-.text-orange {
-  color: #ff922b; }
-
-.text-green {
-  color: #51cf66; }
-
-.text-skyblue {
-  color: #3bc9db; }
-
-.text-dark {
-  color: #343a40; }
-
-.text-light {
-  color: #fefefe; }
-
-.text-yellow {
-  color: #fcc419; }
-
-.text-grey {
-  color: #adb5bd; }
-
-.text-dark2 {
+.bg-light {
+  background-color: #fefefe;
   color: #212529; }
+  .bg-light a {
+    color: currentColor;
+    outline-color: currentColor; }
+  .bg-light:hover {
+    background-color: #fefefe;
+    color: #212529; }
+    .bg-light:hover a {
+      color: currentColor;
+      outline-color: currentColor; }
 
-.text-light2 {
-  color: #f1f3f5; }
+.bg-dark {
+  background-color: #343a40;
+  color: #fefefe; }
+  .bg-dark a {
+    color: currentColor;
+    outline-color: currentColor; }
+  .bg-dark:hover {
+    background-color: #343a40;
+    color: #fefefe; }
+    .bg-dark:hover a {
+      color: currentColor;
+      outline-color: currentColor; }
 
 .text-primary {
   color: #e33d22; }
@@ -1882,7 +1716,7 @@ textarea {
   color: #e33d22; }
 
 .text-info {
-  color: #3bc9db; }
+  color: #339af0; }
 
 .text-success {
   color: #51cf66; }
@@ -1890,173 +1724,11 @@ textarea {
 .text-muted {
   color: #adb5bd; }
 
-.btn-blue {
-  background-color: #339af0;
-  outline-color: #339af0;
-  color: #fefefe;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-blue:visited {
-    background-color: #339af0;
-    color: #fefefe; }
-  .btn-blue:hover, .btn-blue:active, .btn-blue:visited:hover, .btn-blue:visited:active, .btn-blue:not(.disabled):not(:disabled):hover, .btn-blue:not(.disabled):not(:disabled):active {
-    background-color: #51a9f2;
-    color: white;
-    outline-color: #51a9f2;
-    box-shadow: none; }
+.text-light {
+  color: #fefefe; }
 
-.btn-violet {
-  background-color: #845ef7;
-  outline-color: #845ef7;
-  color: #fefefe;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-violet:visited {
-    background-color: #845ef7;
-    color: #fefefe; }
-  .btn-violet:hover, .btn-violet:active, .btn-violet:visited:hover, .btn-violet:visited:active, .btn-violet:not(.disabled):not(:disabled):hover, .btn-violet:not(.disabled):not(:disabled):active {
-    background-color: #9676f8;
-    color: white;
-    outline-color: #9676f8;
-    box-shadow: none; }
-
-.btn-red {
-  background-color: #e33d22;
-  outline-color: #e33d22;
-  color: #fefefe;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-red:visited {
-    background-color: #e33d22;
-    color: #fefefe; }
-  .btn-red:hover, .btn-red:active, .btn-red:visited:hover, .btn-red:visited:active, .btn-red:not(.disabled):not(:disabled):hover, .btn-red:not(.disabled):not(:disabled):active {
-    background-color: #e75a43;
-    color: white;
-    outline-color: #e75a43;
-    box-shadow: none; }
-
-.btn-orange {
-  background-color: #ff922b;
-  outline-color: #ff922b;
-  color: #fefefe;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-orange:visited {
-    background-color: #ff922b;
-    color: #fefefe; }
-  .btn-orange:hover, .btn-orange:active, .btn-orange:visited:hover, .btn-orange:visited:active, .btn-orange:not(.disabled):not(:disabled):hover, .btn-orange:not(.disabled):not(:disabled):active {
-    background-color: #ffa24b;
-    color: white;
-    outline-color: #ffa24b;
-    box-shadow: none; }
-
-.btn-green {
-  background-color: #51cf66;
-  outline-color: #51cf66;
-  color: #fefefe;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-green:visited {
-    background-color: #51cf66;
-    color: #fefefe; }
-  .btn-green:hover, .btn-green:active, .btn-green:visited:hover, .btn-green:visited:active, .btn-green:not(.disabled):not(:disabled):hover, .btn-green:not(.disabled):not(:disabled):active {
-    background-color: #6bd67d;
-    color: white;
-    outline-color: #6bd67d;
-    box-shadow: none; }
-
-.btn-skyblue {
-  background-color: #3bc9db;
-  outline-color: #3bc9db;
-  color: #fefefe;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-skyblue:visited {
-    background-color: #3bc9db;
-    color: #fefefe; }
-  .btn-skyblue:hover, .btn-skyblue:active, .btn-skyblue:visited:hover, .btn-skyblue:visited:active, .btn-skyblue:not(.disabled):not(:disabled):hover, .btn-skyblue:not(.disabled):not(:disabled):active {
-    background-color: #58d1e0;
-    color: white;
-    outline-color: #58d1e0;
-    box-shadow: none; }
-
-.btn-dark {
-  background-color: #343a40;
-  outline-color: #343a40;
-  color: #fefefe;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-dark:visited {
-    background-color: #343a40;
-    color: #fefefe; }
-  .btn-dark:hover, .btn-dark:active, .btn-dark:visited:hover, .btn-dark:visited:active, .btn-dark:not(.disabled):not(:disabled):hover, .btn-dark:not(.disabled):not(:disabled):active {
-    background-color: #52575d;
-    color: white;
-    outline-color: #52575d;
-    box-shadow: none; }
-
-.btn-light {
-  background-color: #fefefe;
-  outline-color: #fefefe;
-  color: #212529;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-light:visited {
-    background-color: #fefefe;
-    color: #212529; }
-  .btn-light:hover, .btn-light:active, .btn-light:visited:hover, .btn-light:visited:active, .btn-light:not(.disabled):not(:disabled):hover, .btn-light:not(.disabled):not(:disabled):active {
-    background-color: #ddddde;
-    color: #2c3237;
-    outline-color: #ddddde;
-    box-shadow: none; }
-
-.btn-yellow {
-  background-color: #fcc419;
-  outline-color: #fcc419;
-  color: #fefefe;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-yellow:visited {
-    background-color: #fcc419;
-    color: #fefefe; }
-  .btn-yellow:hover, .btn-yellow:active, .btn-yellow:visited:hover, .btn-yellow:visited:active, .btn-yellow:not(.disabled):not(:disabled):hover, .btn-yellow:not(.disabled):not(:disabled):active {
-    background-color: #fccd3b;
-    color: white;
-    outline-color: #fccd3b;
-    box-shadow: none; }
-
-.btn-grey {
-  background-color: #adb5bd;
-  outline-color: #adb5bd;
-  color: #fefefe;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-grey:visited {
-    background-color: #adb5bd;
-    color: #fefefe; }
-  .btn-grey:hover, .btn-grey:active, .btn-grey:visited:hover, .btn-grey:visited:active, .btn-grey:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active {
-    background-color: #b9c0c7;
-    color: white;
-    outline-color: #b9c0c7;
-    box-shadow: none; }
-
-.btn-dark2 {
-  background-color: #212529;
-  outline-color: #212529;
-  color: #fefefe;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-dark2:visited {
-    background-color: #212529;
-    color: #fefefe; }
-  .btn-dark2:hover, .btn-dark2:active, .btn-dark2:visited:hover, .btn-dark2:visited:active, .btn-dark2:not(.disabled):not(:disabled):hover, .btn-dark2:not(.disabled):not(:disabled):active {
-    background-color: #424649;
-    color: white;
-    outline-color: #424649;
-    box-shadow: none; }
-
-.btn-light2 {
-  background-color: #f1f3f5;
-  outline-color: #f1f3f5;
-  color: #212529;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
-  .btn-light2:visited {
-    background-color: #f1f3f5;
-    color: #212529; }
-  .btn-light2:hover, .btn-light2:active, .btn-light2:visited:hover, .btn-light2:visited:active, .btn-light2:not(.disabled):not(:disabled):hover, .btn-light2:not(.disabled):not(:disabled):active {
-    background-color: #d2d4d6;
-    color: #2c3237;
-    outline-color: #d2d4d6;
-    box-shadow: none; }
+.text-dark {
+  color: #343a40; }
 
 .btn-primary {
   background-color: #e33d22;
@@ -2115,17 +1787,17 @@ textarea {
     box-shadow: none; }
 
 .btn-info {
-  background-color: #3bc9db;
-  outline-color: #3bc9db;
+  background-color: #339af0;
+  outline-color: #339af0;
   color: #fefefe;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
   .btn-info:visited {
-    background-color: #3bc9db;
+    background-color: #339af0;
     color: #fefefe; }
   .btn-info:hover, .btn-info:active, .btn-info:visited:hover, .btn-info:visited:active, .btn-info:not(.disabled):not(:disabled):hover, .btn-info:not(.disabled):not(:disabled):active {
-    background-color: #58d1e0;
+    background-color: #51a9f2;
     color: white;
-    outline-color: #58d1e0;
+    outline-color: #51a9f2;
     box-shadow: none; }
 
 .btn-success {
@@ -2156,89 +1828,33 @@ textarea {
     outline-color: #b9c0c7;
     box-shadow: none; }
 
-.head-blue .card-header, .head-blue .menu-header, .head-blue.header-bg th {
-  background-color: #339af0;
-  color: #fefefe; }
-
-.head-blue th {
-  color: #339af0; }
-
-.head-violet .card-header, .head-violet .menu-header, .head-violet.header-bg th {
-  background-color: #845ef7;
-  color: #fefefe; }
-
-.head-violet th {
-  color: #845ef7; }
-
-.head-red .card-header, .head-red .menu-header, .head-red.header-bg th {
-  background-color: #e33d22;
-  color: #fefefe; }
-
-.head-red th {
-  color: #e33d22; }
-
-.head-orange .card-header, .head-orange .menu-header, .head-orange.header-bg th {
-  background-color: #ff922b;
-  color: #fefefe; }
-
-.head-orange th {
-  color: #ff922b; }
-
-.head-green .card-header, .head-green .menu-header, .head-green.header-bg th {
-  background-color: #51cf66;
-  color: #fefefe; }
-
-.head-green th {
-  color: #51cf66; }
-
-.head-skyblue .card-header, .head-skyblue .menu-header, .head-skyblue.header-bg th {
-  background-color: #3bc9db;
-  color: #fefefe; }
-
-.head-skyblue th {
-  color: #3bc9db; }
-
-.head-dark .card-header, .head-dark .menu-header, .head-dark.header-bg th {
-  background-color: #343a40;
-  color: #fefefe; }
-
-.head-dark th {
-  color: #343a40; }
-
-.head-light .card-header, .head-light .menu-header, .head-light.header-bg th {
+.btn-light {
   background-color: #fefefe;
-  color: #212529; }
+  outline-color: #fefefe;
+  color: #212529;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
+  .btn-light:visited {
+    background-color: #fefefe;
+    color: #212529; }
+  .btn-light:hover, .btn-light:active, .btn-light:visited:hover, .btn-light:visited:active, .btn-light:not(.disabled):not(:disabled):hover, .btn-light:not(.disabled):not(:disabled):active {
+    background-color: #ddddde;
+    color: #2c3237;
+    outline-color: #ddddde;
+    box-shadow: none; }
 
-.head-light th {
-  color: #fefefe; }
-
-.head-yellow .card-header, .head-yellow .menu-header, .head-yellow.header-bg th {
-  background-color: #fcc419;
-  color: #fefefe; }
-
-.head-yellow th {
-  color: #fcc419; }
-
-.head-grey .card-header, .head-grey .menu-header, .head-grey.header-bg th {
-  background-color: #adb5bd;
-  color: #fefefe; }
-
-.head-grey th {
-  color: #adb5bd; }
-
-.head-dark2 .card-header, .head-dark2 .menu-header, .head-dark2.header-bg th {
-  background-color: #212529;
-  color: #fefefe; }
-
-.head-dark2 th {
-  color: #212529; }
-
-.head-light2 .card-header, .head-light2 .menu-header, .head-light2.header-bg th {
-  background-color: #f1f3f5;
-  color: #212529; }
-
-.head-light2 th {
-  color: #f1f3f5; }
+.btn-dark {
+  background-color: #343a40;
+  outline-color: #343a40;
+  color: #fefefe;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
+  .btn-dark:visited {
+    background-color: #343a40;
+    color: #fefefe; }
+  .btn-dark:hover, .btn-dark:active, .btn-dark:visited:hover, .btn-dark:visited:active, .btn-dark:not(.disabled):not(:disabled):hover, .btn-dark:not(.disabled):not(:disabled):active {
+    background-color: #52575d;
+    color: white;
+    outline-color: #52575d;
+    box-shadow: none; }
 
 .head-primary .card-header, .head-primary .menu-header, .head-primary.header-bg th {
   background-color: #e33d22;
@@ -2269,11 +1885,11 @@ textarea {
   color: #e33d22; }
 
 .head-info .card-header, .head-info .menu-header, .head-info.header-bg th {
-  background-color: #3bc9db;
+  background-color: #339af0;
   color: #fefefe; }
 
 .head-info th {
-  color: #3bc9db; }
+  color: #339af0; }
 
 .head-success .card-header, .head-success .menu-header, .head-success.header-bg th {
   background-color: #51cf66;
@@ -2289,6 +1905,20 @@ textarea {
 .head-muted th {
   color: #adb5bd; }
 
+.head-light .card-header, .head-light .menu-header, .head-light.header-bg th {
+  background-color: #fefefe;
+  color: #212529; }
+
+.head-light th {
+  color: #fefefe; }
+
+.head-dark .card-header, .head-dark .menu-header, .head-dark.header-bg th {
+  background-color: #343a40;
+  color: #fefefe; }
+
+.head-dark th {
+  color: #343a40; }
+
 .fg-light {
   color: #fefefe; }