themes/default/layouts/partials/styles-navigator: Fix icon hover contrast

Sort color schemes

1 files changed, 26 insertions, 19 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 2a68a5a..6e90ce3 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -46,39 +46,40 @@
   --primary: 230;
   --secondary: 258;
   --accent: 217;
-  --foreground: hsl(var(--primary), 99%, 5%);
-  --fade: hsl(var(--primary), 35%, 30%);
-  --border-lighter: hsl(var(--primary), 35%, 92%);
+  --background-bolder: hsl(var(--secondary), 99%, 98%);
+  --background: hsl(var(--secondary), 99%, 99%);
   --border-darker: hsl(var(--primary), 35%, 80%);
   --border-darkest: hsl(var(--primary), 35%, 70%);
-  --background: hsl(var(--secondary), 99%, 99%);
-  --background-bolder: hsl(var(--secondary), 99%, 98%);
-  --widget-background: hsl(var(--secondary), 25%, 97%);
-  --hover-background: hsl(var(--secondary), 25%, 94%);
-  --focus-within-background: hsl(var(--secondary), 52%, 95%);
-  --table-even-background: hsl(var(--secondary), 25%, 99%);
-  --table-odd-background: hsl(var(--secondary), 25%, 97%);
-  --link: hsl(var(--accent), 99%, 37%);
-  --hover-background-alternate: hsl(var(--accent), 100%, 96%);
-  --active-background-alternate: hsl(var(--accent), 100%, 90%);
+  --border-lighter: hsl(var(--primary), 35%, 92%);
   --button-background: #fff;
   --danger-background-lighter: #fff5f5;
   --danger-background: #fcd2cf;
   --danger: #8f0000;
+  --fade: hsl(var(--primary), 35%, 30%);
+  --focus-within-background: hsl(var(--secondary), 52%, 95%);
+  --foreground: hsl(var(--primary), 99%, 5%);
+  --hover-background-alternate: hsl(var(--accent), 100%, 96%);
+  --hover-background: hsl(var(--secondary), 25%, 94%);
+  --icon-focus-background: var(--icon-hover-background);
+  --icon-hover-background: hsl(var(--accent), 100%, 90%);
+  --link: hsl(var(--accent), 99%, 37%);
   --shadow: #00000060;
   --spoiler: #444;
   --success-background: #d5f3c4;
   --success: #1d3c0c;
+  --table-even-background: hsl(var(--secondary), 25%, 99%);
+  --table-odd-background: hsl(var(--secondary), 25%, 97%);
   --warning-background: #ffe699;
   --warning: #332600;
+  --widget-background: hsl(var(--secondary), 25%, 97%);
   color-scheme: light dark;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --active-background-alternate: #425a8a;
-    --background-bolder: #0d0d0d;
     --background-rgb: 17, 17, 17;
+    --foreground-rgb: 221, 221, 221;
+    --background-bolder: #0d0d0d;
     --background: rgba(var(--background-rgb), 1);
     --border-darker: #555;
     --border-darkest: #999;
@@ -89,10 +90,11 @@
     --danger: #ff9494;
     --fade: rgba(var(--foreground-rgb), 0.75);
     --focus-within-background: #291933;
-    --foreground-rgb: 221, 221, 221;
     --foreground: rgba(var(--foreground-rgb), 1);
     --hover-background-alternate: #1c263a;
     --hover-background: rgba(var(--foreground-rgb), 0.08);
+    --icon-focus-background: #88aefb;
+    --icon-hover-background: #425a8a;
     --link: #a3c3ff;
     --shadow: #000;
     --spoiler: #aaa;
@@ -164,7 +166,7 @@ nav a:focus,
 button:focus,
 code-block a:focus,
 context-control a:focus {
-  outline-offset: -0.15rem !important;
+  outline-offset: -0.2rem !important;
 }
 
 pre:focus,
@@ -652,9 +654,14 @@ column-base[position="left"] nav li:hover a {
   border-radius: 0.5rem;
 }
 
-column-base[position="left"] nav li:hover svg {
+column-base[position="left"] nav a:hover svg {
+  fill: #cce0ff;
+  fill: var(--icon-hover-background);
+}
+
+column-base[position="left"] nav a:focus svg {
   fill: #cce1ff;
-  fill: var(--active-background-alternate);
+  fill: var(--icon-focus-background);
 }
 
 column-base[position="left"] nav a span {