From 8a343855f109fe4df929c0bcc1662b227a8bbad3 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Sat, 5 Oct 2024 18:14:52 +0200
Subject: [PATCH] fix(button): ajout de couleurs de hover

---
 README.md         |  6 ++++--
 scss/moineau.scss | 14 +++++++++-----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index fc49dd2..379026d 100644
--- a/README.md
+++ b/README.md
@@ -29,16 +29,18 @@ L'idée est de pouvoir générer simplement un blog ou un site simple pour les g
 
 ## Customiser
 
-La couleur d'accents se customise en modifiant deux variables :
+La couleur d'accents se customise en modifiant quatre variables :
 
 ```css
 :root {
   --accent-color-dark: #1971c2;
   --accent-color-light: #d0ebff;
+  --accent-color-dark-hover: #1864ab;
+  --accent-color-light-hover: #e7f5ff;
 }
 ```
 
-La première détermine la couleur d'accent sombre (donc écrite sur fond clair, et en fond sur fond sombre), et la seconde celle d'accent clair (du coup l'inverse de la sombre : écrite sur fond sombre, et en fond sur fond clair).
+La première détermine la couleur d'accent sombre (donc écrite sur fond clair, et en fond sur fond sombre), et la seconde celle d'accent clair (du coup l'inverse de la sombre : écrite sur fond sombre, et en fond sur fond clair). Les deux suivantes sont les mêmes, mais avec cette fois en variante pour le survol de la souris.
 
 Toute la palette peut également être customisé avec les variables css, de la manière suivante :
 
diff --git a/scss/moineau.scss b/scss/moineau.scss
index 1c12fa4..f28b594 100644
--- a/scss/moineau.scss
+++ b/scss/moineau.scss
@@ -3,7 +3,9 @@
   --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
 
   --accent-color-dark: #1971c2;
+  --accent-color-dark-hover: #1864ab;
   --accent-color-light: #d0ebff;
+  --accent-color-light-hover: #e7f5ff;
 
   --text-color: #212529;
   --border-color: rgba(0,0,0,0.15);
@@ -14,6 +16,7 @@
 
   --accent-color: var(--accent-color-dark);
   --accent-color-back: var(--accent-color-light);
+  --accent-color-hover: var(--accent-color-dark-hover);
 
   --border-radius: 6px;
 }
@@ -25,6 +28,7 @@
     --well-color: #343a40;
     --accent-color: var(--accent-color-light);
     --accent-color-back: var(--accent-color-dark);
+    --accent-color-hover: var(--accent-color-light-hover);
 
     --border-color: rgba(255,255,255,0.2);
     --hover-color: rgba(255,255,255,0.1);
@@ -282,10 +286,11 @@ input[type=checkbox], input[type=radio] {
   &:checked {
     background-color: var(--accent-color);
     box-shadow:inset 0px 0px 0px 3px var(--background-color);
-  }
 
-  &:hover {
-    filter:brightness(.9);
+    &:hover {
+      background-color: var(--accent-color-hover);
+      box-shadow:inset 0px 0px 0px 3px color-mix(in srgb, var(--background-color) 90%, currentColor);
+    }
   }
 }
 
@@ -304,8 +309,7 @@ button, .button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
 
   &:hover {
-    background-color: var(--accent-color);
-    outline-style: solid;
+    background-color: var(--accent-color-hover);
   }
 }