From b175697dd51c2846a4983545500596484144c0ed Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Mon, 20 Nov 2023 13:10:56 +0100
Subject: [PATCH] feat: variabilize soft colors

---
 components/article/flags.php |   2 +-
 components/globalflag.php    |   2 +-
 home.php                     |   2 +-
 scss/core/_typography.scss   |   2 +-
 scss/mixins/_colors.scss     |   3 +-
 scss/utils/_colorize.scss    |  14 +---
 style.css                    | 146 +++++------------------------------
 7 files changed, 29 insertions(+), 142 deletions(-)

diff --git a/components/article/flags.php b/components/article/flags.php
index 5f134fa..45508ef 100644
--- a/components/article/flags.php
+++ b/components/article/flags.php
@@ -2,7 +2,7 @@
 if ($flags) {
   foreach( $flags as $flag ) {
     $term_meta = get_option( "taxonomy_term_$flag->term_id" );
-    echo "<div class='toast bg-soft-" . $term_meta['niveau'] . "'>";
+    echo "<div class='toast bg-soft c-" . $term_meta['niveau'] . "'>";
     echo $flag->description;
     echo "</div>";
   }
diff --git a/components/globalflag.php b/components/globalflag.php
index 4a2ea08..c66fa46 100644
--- a/components/globalflag.php
+++ b/components/globalflag.php
@@ -9,7 +9,7 @@ if ($flags) {
   foreach( $flags as $flag ) {
     if ($flag->slug == "global") {
       $term_meta = get_option( "taxonomy_term_$flag->term_id" );
-      echo "<div class='toast bg-soft-" . $term_meta['niveau'] . "'>";
+      echo "<div class='toast bg-soft c-" . $term_meta['niveau'] . "'>";
       echo $flag->description;
       echo "</div>";
     }
diff --git a/home.php b/home.php
index 04d72d9..6e425a5 100644
--- a/home.php
+++ b/home.php
@@ -23,7 +23,7 @@
   </section>
     <?php if ( !is_paged() ) {
       ?>
-        <div class="toast mb-1 bg-soft-info home-toast"><strong class="m-0"><svg class="icon icon-info-circle" viewBox="0 0 30 30"><path d="M18.286 24.571v-2.857c0-0.321-0.25-0.571-0.571-0.571h-1.714v-9.143c0-0.321-0.25-0.571-0.571-0.571h-5.714c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h1.714v5.714h-1.714c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h8c0.321 0 0.571-0.25 0.571-0.571zM16 8.571v-2.857c0-0.321-0.25-0.571-0.571-0.571h-3.429c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h3.429c0.321 0 0.571-0.25 0.571-0.571zM27.429 16c0 7.571-6.143 13.714-13.714 13.714s-13.714-6.143-13.714-13.714 6.143-13.714 13.714-13.714 13.714 6.143 13.714 13.714z"></path> Note :</strong>  Si vous êtes intéressé pour découvrir plus
+        <div class="toast mb-1 c-info bg-soft home-toast"><strong class="m-0"><svg class="icon icon-info-circle" viewBox="0 0 30 30"><path d="M18.286 24.571v-2.857c0-0.321-0.25-0.571-0.571-0.571h-1.714v-9.143c0-0.321-0.25-0.571-0.571-0.571h-5.714c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h1.714v5.714h-1.714c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h8c0.321 0 0.571-0.25 0.571-0.571zM16 8.571v-2.857c0-0.321-0.25-0.571-0.571-0.571h-3.429c-0.321 0-0.571 0.25-0.571 0.571v2.857c0 0.321 0.25 0.571 0.571 0.571h3.429c0.321 0 0.571-0.25 0.571-0.571zM27.429 16c0 7.571-6.143 13.714-13.714 13.714s-13.714-6.143-13.714-13.714 6.143-13.714 13.714-13.714 13.714 6.143 13.714 13.714z"></path></svg> 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/core/_typography.scss b/scss/core/_typography.scss
index 17cbd69..f9ac450 100644
--- a/scss/core/_typography.scss
+++ b/scss/core/_typography.scss
@@ -5,7 +5,7 @@
 }
 
 :root {
-  @include accent-color($color-primary);
+  @include accent-color($color-primary, get-color-light("primary"));
   --text-color:#{$color-font};
   --link-color-hover:#{transparentize($color-font, 0.85)};
   --link-color:#{darken($color-link, 10%)};
diff --git a/scss/mixins/_colors.scss b/scss/mixins/_colors.scss
index f2e84cd..48d50ab 100644
--- a/scss/mixins/_colors.scss
+++ b/scss/mixins/_colors.scss
@@ -59,8 +59,9 @@
   color: getTextColorFromBackground($background-color);
  }
 
- @mixin accent-color($accent-color) {
+ @mixin accent-color($accent-color, $soft-color) {
     --accent-color: #{$accent-color};
     --text-color-contrast: #{getTextColorFromBackground($accent-color)};
     --accent-color-hover: #{accentuate($accent-color)};
+    --accent-color-soft: #{$soft-color};
 }
\ No newline at end of file
diff --git a/scss/utils/_colorize.scss b/scss/utils/_colorize.scss
index 881334f..51915c8 100644
--- a/scss/utils/_colorize.scss
+++ b/scss/utils/_colorize.scss
@@ -7,7 +7,7 @@
   @each $name,
   $color in list-colors() {
     &-#{$name} {
-      @include accent-color(get-color($name));
+      @include accent-color(get-color($name), get-color-light($name));
     }
   }
 }
@@ -53,17 +53,7 @@
 }
 
 .bg-soft {
-
-  @each $name,
-  $color in list-colors() {
-    &-#{$name} {
-      @include bg-color(get-color-light($name));
-
-      &:hover {
-        @include bg-color(get-color-light($name));
-      }
-    }
-  }
+  background-color: var(--accent-color-soft);
 }
 
 // .text {
diff --git a/style.css b/style.css
index a7f96bf..c2008e8 100644
--- a/style.css
+++ b/style.css
@@ -98,6 +98,7 @@ sup {
   --accent-color: #e03131;
   --text-color-contrast: #ffffff;
   --accent-color-hover: #cc1f1f;
+  --accent-color-soft: #ffc9c9;
   --text-color:#212529;
   --link-color-hover:rgba(33, 37, 41, 0.15);
   --link-color:#c11d1d; }
@@ -778,47 +779,56 @@ textarea {
 .c-primary {
   --accent-color: #e03131;
   --text-color-contrast: #ffffff;
-  --accent-color-hover: #cc1f1f; }
+  --accent-color-hover: #cc1f1f;
+  --accent-color-soft: #ffc9c9; }
 
 .c-secondary {
   --accent-color: #343a40;
   --text-color-contrast: #ffffff;
-  --accent-color-hover: #3d444b; }
+  --accent-color-hover: #3d444b;
+  --accent-color-soft: #adb5bd; }
 
 .c-warning {
   --accent-color: #e8590c;
   --text-color-contrast: #ffffff;
-  --accent-color-hover: #c44b0a; }
+  --accent-color-hover: #c44b0a;
+  --accent-color-soft: #ffd8a8; }
 
 .c-danger {
   --accent-color: #e03131;
   --text-color-contrast: #ffffff;
-  --accent-color-hover: #cc1f1f; }
+  --accent-color-hover: #cc1f1f;
+  --accent-color-soft: #ffc9c9; }
 
 .c-info {
   --accent-color: #1971c2;
   --text-color-contrast: #ffffff;
-  --accent-color-hover: #155da0; }
+  --accent-color-hover: #155da0;
+  --accent-color-soft: #a5d8ff; }
 
 .c-success {
   --accent-color: #2f9e44;
   --text-color-contrast: #ffffff;
-  --accent-color-hover: #268137; }
+  --accent-color-hover: #268137;
+  --accent-color-soft: #b2f2bb; }
 
 .c-muted {
   --accent-color: #adb5bd;
   --text-color-contrast: #ffffff;
-  --accent-color-hover: #98a2ac; }
+  --accent-color-hover: #98a2ac;
+  --accent-color-soft: #e9ecef; }
 
 .c-light {
   --accent-color: #ffffff;
   --text-color-contrast: #212529;
-  --accent-color-hover: #ececec; }
+  --accent-color-hover: #ececec;
+  --accent-color-soft: #ffffff; }
 
 .c-dark {
   --accent-color: #343a40;
   --text-color-contrast: #ffffff;
-  --accent-color-hover: #3d444b; }
+  --accent-color-hover: #3d444b;
+  --accent-color-soft: #adb5bd; }
 
 .bg-accent {
   background-color: var(--accent-color); }
@@ -832,122 +842,8 @@ textarea {
 .bg-alt {
   background-color: #e9ecef; }
 
-.bg-soft-primary {
-  background-color: #ffc9c9;
-  color: #212529; }
-  .bg-soft-primary a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-soft-primary:hover {
-    background-color: #ffc9c9;
-    color: #212529; }
-    .bg-soft-primary:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-soft-secondary {
-  background-color: #adb5bd;
-  color: #ffffff; }
-  .bg-soft-secondary a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-soft-secondary:hover {
-    background-color: #adb5bd;
-    color: #ffffff; }
-    .bg-soft-secondary:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-soft-warning {
-  background-color: #ffd8a8;
-  color: #212529; }
-  .bg-soft-warning a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-soft-warning:hover {
-    background-color: #ffd8a8;
-    color: #212529; }
-    .bg-soft-warning:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-soft-danger {
-  background-color: #ffc9c9;
-  color: #212529; }
-  .bg-soft-danger a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-soft-danger:hover {
-    background-color: #ffc9c9;
-    color: #212529; }
-    .bg-soft-danger:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-soft-info {
-  background-color: #a5d8ff;
-  color: #212529; }
-  .bg-soft-info a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-soft-info:hover {
-    background-color: #a5d8ff;
-    color: #212529; }
-    .bg-soft-info:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-soft-success {
-  background-color: #b2f2bb;
-  color: #212529; }
-  .bg-soft-success a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-soft-success:hover {
-    background-color: #b2f2bb;
-    color: #212529; }
-    .bg-soft-success:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-soft-muted {
-  background-color: #e9ecef;
-  color: #212529; }
-  .bg-soft-muted a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-soft-muted:hover {
-    background-color: #e9ecef;
-    color: #212529; }
-    .bg-soft-muted:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-soft-light {
-  background-color: #ffffff;
-  color: #212529; }
-  .bg-soft-light a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-soft-light:hover {
-    background-color: #ffffff;
-    color: #212529; }
-    .bg-soft-light:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
-
-.bg-soft-dark {
-  background-color: #adb5bd;
-  color: #ffffff; }
-  .bg-soft-dark a {
-    color: currentColor;
-    outline-color: currentColor; }
-  .bg-soft-dark:hover {
-    background-color: #adb5bd;
-    color: #ffffff; }
-    .bg-soft-dark:hover a {
-      color: currentColor;
-      outline-color: currentColor; }
+.bg-soft {
+  background-color: var(--accent-color-soft); }
 
 .fg-light {
   --text-color:#ffffff;