From 0d4094826d960110ad23452ba093b82a72c3ddb5 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 23 Sep 2025 17:41:53 -0600
Subject: [PATCH] Colors style cleanup, better colors.

---
 src/assets/colors.css | 189 +++++++++++++-----------------------------
 1 file changed, 58 insertions(+), 131 deletions(-)

diff --git a/src/assets/colors.css b/src/assets/colors.css
index c96de02..97b92eb 100644
--- a/src/assets/colors.css
+++ b/src/assets/colors.css
@@ -1,4 +1,4 @@
-/* Color tokens */
+/* Light mode & common */
 :root {
   --panel: #ffffff;
   --panel-alt: #f6f8fa;
@@ -8,19 +8,17 @@
   --strong: #000;
   --muted: #6a6f76;
   --muted-alt: #9aa2ad;
-  --accent: #2563eb; /* blue */
+  --accent: #2563eb;
   --accent-soft: #dbeafe;
   --accent-hover: #1d4ed8;
   --danger: #dc2626;
   --danger-hover: #b91c1c;
-  --weekend: #888;
+  --weekend: #555;
   --firstday: #000;
   --select: #aaf;
   --shadow: #fff;
   --label-bg: #fafbfe;
   --label-bg-rgb: 250, 251, 254;
-
-  /* Holiday colors */
   --holiday: #da0;
   --holiday-label: var(--strong);
 
@@ -40,71 +38,6 @@
   --event-alpha: 0.7;
 }
 
-/* Month tints (light) */
-.dec {
-  background: hsl(220 50% 95%);
-}
-.jan {
-  background: hsl(220 50% 92%);
-}
-.feb {
-  background: hsl(220 50% 95%);
-}
-.mar {
-  background: hsl(125 60% 92%);
-}
-.apr {
-  background: hsl(125 60% 95%);
-}
-.may {
-  background: hsl(125 60% 92%);
-}
-.jun {
-  background: hsl(45 85% 95%);
-}
-.jul {
-  background: hsl(45 85% 92%);
-}
-.aug {
-  background: hsl(45 85% 95%);
-}
-.sep {
-  background: hsl(18 78% 92%);
-}
-.oct {
-  background: hsl(18 78% 95%);
-}
-.nov {
-  background: hsl(18 78% 92%);
-}
-
-/* Light mode — gray shades and colors */
-.event-color-0 {
-  background: hsla(0, 0%, 85%, var(--event-alpha));
-} /* lightest grey */
-.event-color-1 {
-  background: hsla(0, 0%, 75%, var(--event-alpha));
-} /* light grey */
-.event-color-2 {
-  background: hsla(0, 0%, 65%, var(--event-alpha));
-} /* medium grey */
-.event-color-3 {
-  background: hsla(0, 0%, 55%, var(--event-alpha));
-} /* dark grey */
-.event-color-4 {
-  background: hsla(0, 70%, 70%, var(--event-alpha));
-} /* red */
-.event-color-5 {
-  background: hsla(90, 70%, 70%, var(--event-alpha));
-} /* green */
-.event-color-6 {
-  background: hsla(230, 70%, 70%, var(--event-alpha));
-} /* blue */
-.event-color-7 {
-  background: hsla(280, 70%, 70%, var(--event-alpha));
-} /* purple */
-
-/* Color tokens (dark) */
 @media (prefers-color-scheme: dark) {
   :root {
     --panel: #121417;
@@ -141,67 +74,61 @@
     /* Holiday colors (dark mode) */
     --holiday: #ffc107;
     --holiday-label: #fff8e1;
-  }
 
-  .dec {
-    background: hsl(220 50% 8%);
-  }
-  .jan {
-    background: hsl(220 50% 6%);
-  }
-  .feb {
-    background: hsl(220 50% 8%);
-  }
-  .mar {
-    background: hsl(125 60% 6%);
-  }
-  .apr {
-    background: hsl(125 60% 8%);
-  }
-  .may {
-    background: hsl(125 60% 6%);
-  }
-  .jun {
-    background: hsl(45 85% 8%);
-  }
-  .jul {
-    background: hsl(45 85% 6%);
-  }
-  .aug {
-    background: hsl(45 85% 8%);
-  }
-  .sep {
-    background: hsl(18 78% 6%);
-  }
-  .oct {
-    background: hsl(18 78% 8%);
-  }
-  .nov {
-    background: hsl(18 78% 6%);
-  }
+    --weekend: #aaa;
 
-  .event-color-0 {
-    background: hsla(0, 0%, 50%, var(--event-alpha));
-  } /* lightest grey */
-  .event-color-1 {
-    background: hsla(0, 0%, 40%, var(--event-alpha));
-  } /* light grey */
-  .event-color-2 {
-    background: hsla(0, 0%, 30%, var(--event-alpha));
-  } /* medium grey */
-  .event-color-3 {
-    background: hsla(0, 0%, 20%, var(--event-alpha));
-  } /* dark grey */
-  .event-color-4 {
-    background: hsla(0, 70%, 40%, var(--event-alpha));
-  } /* red */
-  .event-color-5 {
-    background: hsla(90, 70%, 30%, var(--event-alpha));
-  } /* green - darker for perceptional purposes */
-  .event-color-6 {
-    background: hsla(230, 70%, 40%, var(--event-alpha));
-  } /* blue */
-  .event-color-7 {
-    background: hsla(280, 70%, 40%, var(--event-alpha));
-  } /* purple */
+  }
 }
+
+/* Month tints (light) */
+.dec { background: hsl(220 50% 77%) }
+.jan { background: hsl(220 50% 60%) }
+.feb { background: hsl(220 50% 77%) }
+.mar { background: hsl(130 40% 85%) }
+.apr { background: hsl(130 65% 75%) }
+.may { background: hsl(130 80% 65%) }
+.jun { background: hsl(50 85% 70%) }
+.jul { background: hsl(50 85% 85%) }
+.aug { background: hsl(50 85% 70%) }
+.sep { background: hsl(22 100% 75%) }
+.oct { background: hsl(22 40% 65%) }
+.nov { background: hsl(22 15% 55%) }
+
+@media (prefers-color-scheme: dark) {
+  .dec { background: hsl(220 50% 10%) }
+  .jan { background: hsl(220 50% 4%) }
+  .feb { background: hsl(220 50% 10%) }
+  .mar { background: hsl(130 60% 3%) }
+  .apr { background: hsl(130 60% 6%) }
+  .may { background: hsl(130 60% 10%) }
+  .jun { background: hsl(50 85% 8%) }
+  .jul { background: hsl(50 85% 12%) }
+  .aug { background: hsl(50 85% 8%) }
+  .sep { background: hsl(22 100% 10%) }
+  .oct { background: hsl(22 90% 6%) }
+  .nov { background: hsl(22 80% 3%) }
+}
+
+/* Light mode — gray shades and colors */
+.event-color-0 { background: hsla(0, 0%, 85%, var(--event-alpha)); } /* lightest grey */
+.event-color-1 { background: hsla(0, 0%, 75%, var(--event-alpha)); } /* light grey */
+.event-color-2 { background: hsla(0, 0%, 65%, var(--event-alpha)); } /* medium grey */
+.event-color-3 { background: hsla(0, 0%, 55%, var(--event-alpha)); } /* dark grey */
+.event-color-4 { background: hsla(0, 100%, 70%, var(--event-alpha)); } /* red */
+.event-color-5 { background: hsla(90, 100%, 50%, var(--event-alpha)); } /* green - darker for perceptional purposes */
+.event-color-6 { background: hsla(220, 100%, 70%, var(--event-alpha)); } /* blue */
+.event-color-7 { background: hsla(280, 100%, 70%, var(--event-alpha)); } /* purple */
+
+/* Dark-mode event colors are grouped right after the light-mode equivalents */
+@media (prefers-color-scheme: dark) {
+  .event-color-0 { background: hsla(0, 0%, 50%, var(--event-alpha)); } /* lightest grey */
+  .event-color-1 { background: hsla(0, 0%, 40%, var(--event-alpha)); } /* light grey */
+  .event-color-2 { background: hsla(0, 0%, 30%, var(--event-alpha)); } /* medium grey */
+  .event-color-3 { background: hsla(0, 0%, 20%, var(--event-alpha)); } /* dark grey */
+  .event-color-4 { background: hsla(0, 80%, 40%, var(--event-alpha)); } /* red */
+  .event-color-5 { background: hsla(90, 80%, 30%, var(--event-alpha)); } /* green - darker for perceptional purposes */
+  .event-color-6 { background: hsla(220, 80%, 40%, var(--event-alpha)); } /* blue */
+  .event-color-7 { background: hsla(280, 80%, 40%, var(--event-alpha)); } /* purple */
+}
+
+