feat: ✨ overhaul color palettes

src/components/navigation.webc

@@ -94,7 +94,7 @@
       background-color: var(--clr-nav-background);
 
       margin: 0;
-      border: var(--border-thin) solid var(--clr-box-border);
+      border: var(--border-thin) solid var(--clr-nav-border);
       border-block-start: none;
       border-inline-end: none;
       border-end-start-radius: 0.75em;
@@ -135,12 +135,12 @@
       transition: color 0.4s ease;
 
       &:hover {
-        color: var(--clr-nav-link-hover, #888);
+        color: var(--clr-nav-link-hover);
       }
     }
 
     & .link-active {
-      color: var(--clr-nav-link-active, red);
+      color: var(--clr-nav-link-active);
     }
   }
 </style>

src/components/quick-info.webc

@@ -8,12 +8,12 @@
     position: relative;
     background: linear-gradient(
       to bottom right,
-      oklch(from var(--clr-box-background) calc(l + 0.2) c h) 0%,
+      var(--clr-box-gradient-start) 0%,
-      oklch(from var(--clr-box-background) l c h) 50%
+      var(--clr-box-gradient-end) 50%
     );
 
-    box-shadow: 0em 1em 1.875em var(--clr-box-shadow);
     box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
+
     margin-block: 1em;
     border-radius: 1em;
     padding: 1em;

src/components/traits.webc

@@ -34,8 +34,8 @@
 
       background: linear-gradient(
         to bottom right,
-        oklch(from var(--clr-box-background) calc(l + 0.2) c h) 0%,
+        var(--clr-box-gradient-start) 0%,
-        oklch(from var(--clr-box-background) l c h) 50%
+        var(--clr-box-gradient-end) 50%
       );
 
       box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);

src/css/colors.css

@@ -1,58 +1,81 @@
 /* theme colors */
 :root {
-  --theme-c-night: oklch(0.19 0.0081 274.48);
+  --base-luminance: 20%;
-  --theme-c-eerie-black: oklch(0.23 0.0116 274.38);
+  --base-chroma: 0.01;
-  --theme-c-raisin-black: oklch(0.27 0.0148 274.31);
+  --base-hue: 275deg;
-  --theme-c-gunmetal: oklch(0.31 0.0179 274.27);
-  --theme-c-onyx: oklch(0.35 0.0209 274.23);
 
-  --theme-c-text-light: oklch(0.26 0.0381 19.99);
+  --theme-c-primary: oklch(var(--base-luminance) var(--base-chroma) var(--base-hue));
-  --theme-c-text-dark: oklch(0.95 0.0234 69.6);
+
+  --theme-c-primary-950: oklch(from var(--theme-c-primary) 5% c h);
+  --theme-c-primary-900: oklch(from var(--theme-c-primary) 10% c h);
+  --theme-c-primary-850: oklch(from var(--theme-c-primary) 15% c h);
+  --theme-c-primary-800: oklch(from var(--theme-c-primary) 20% c h);
+  --theme-c-primary-750: oklch(from var(--theme-c-primary) 25% c h);
+  --theme-c-primary-700: oklch(from var(--theme-c-primary) 30% c h);
+  --theme-c-primary-650: oklch(from var(--theme-c-primary) 35% c h);
+  --theme-c-primary-600: oklch(from var(--theme-c-primary) 40% c h);
+  --theme-c-primary-550: oklch(from var(--theme-c-primary) 45% c h);
+  --theme-c-primary-500: oklch(from var(--theme-c-primary) 50% c h);
+  --theme-c-primary-450: oklch(from var(--theme-c-primary) 55% c h);
+  --theme-c-primary-400: oklch(from var(--theme-c-primary) 60% c h);
+  --theme-c-primary-350: oklch(from var(--theme-c-primary) 65% c h);
+  --theme-c-primary-300: oklch(from var(--theme-c-primary) 70% c h);
+  --theme-c-primary-250: oklch(from var(--theme-c-primary) 75% c h);
+  --theme-c-primary-200: oklch(from var(--theme-c-primary) 80% c h);
+  --theme-c-primary-150: oklch(from var(--theme-c-primary) 85% c h);
+  --theme-c-primary-100: oklch(from var(--theme-c-primary) 90% c h);
+  --theme-c-primary-50: oklch(from var(--theme-c-primary) 95% c h);
 }
 
 /* semantic color variables for this project */
 :root {
-  --clr-page-background: oklch(from var(--theme-c-night) calc(l * 4.75) c h);
+  --clr-page-background: var(--theme-c-primary-100);
-  --clr-text: var(--theme-c-text-light);
+  --clr-text: var(--theme-c-primary-900);
 
-  --clr-nav-background: oklch(from var(--theme-c-raisin-black) calc(l * 2.75) c h);
+  --clr-nav-background: var(--theme-c-primary-200);
+  --clr-nav-border: var(--theme-c-primary-250);
+  --clr-nav-link-hover: var(--theme-c-primary-400);
 
-  --clr-box-background: oklch(from var(--theme-c-eerie-black) calc(l * 3.75) c h);
+  --clr-box-background: var(--theme-c-primary-150);
-  --clr-box-border: oklch(from var(--theme-c-onyx) calc(l * 1.75) c h);
+  --clr-box-border: var(--theme-c-primary-250);
-  --clr-box-shadow: oklch(from var(--theme-c-night) calc(l * 4) c h);
+  --clr-box-shadow: var(--theme-c-primary-200);
+  --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
+  --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
 
-  --clr-color-box-background: oklch(from var(--theme-c-gunmetal) calc(l * 2.5) c h);
+  --clr-color-box-background: var(--theme-c-primary-200);
 
-  --clr-quick-info-bg-start: oklch(from var(--theme-c-raisin-black) calc(l * 3.35) c h);
+  --clr-quick-info-bg-start: var(--theme-c-primary-100);
-  --clr-quick-info-bg-end: oklch(from var(--theme-c-eerie-black) calc(l * 3.75) c h);
+  --clr-quick-info-bg-end: var(--theme-c-primary-150);
 
   @media (prefers-color-scheme: dark) {
-    --clr-page-background: var(--theme-c-night);
+    --clr-page-background: var(--theme-c-primary-850);
-    --clr-text: var(--theme-c-text-dark);
+    --clr-text: var(--theme-c-primary-100);
 
-    --clr-nav-background: var(--theme-c-raisin-black);
+    --clr-nav-background: var(--theme-c-primary-700);
+    --clr-nav-border: var(--theme-c-primary-650);
+    --clr-nav-link-hover: var(--theme-c-primary-500);
 
-    --clr-box-background: var(--theme-c-eerie-black);
+    --clr-box-background: var(--theme-c-primary-750);
-    --clr-box-border: var(--theme-c-onyx);
+    --clr-box-border: var(--theme-c-primary-700);
-    --clr-box-shadow: var(--theme-c-night);
+    --clr-box-shadow: var(--theme-c-primary-800);
 
-    --clr-color-box-background: var(--theme-c-gunmetal);
+    --clr-color-box-background: var(--theme-c-primary-700);
 
-    --clr-quick-info-bg-start: var(--theme-c-raisin-black);
+    --clr-quick-info-bg-start: var(--theme-c-primary-700);
-    --clr-quick-info-bg-end: var(--theme-c-eerie-black);
+    --clr-quick-info-bg-end: var(--theme-c-primary-750);
   }
 }
 
 .sebin {
-  --clr-accent-1: oklch(0.58 0.1607 32.69); /* scales */
+  --clr-accent-1: oklch(58% 0.16 33deg); /* scales */
-  --clr-accent-2: oklch(0.78 0.1261 68.88); /* chest */
+  --clr-accent-2: oklch(78% 0.13 68deg); /* chest */
-  --clr-accent-3: oklch(0.49 0.08 265.23); /* hair */
+  --clr-accent-3: oklch(49% 0.08 265deg); /* hair */
-  --clr-accent-4: oklch(0.71 0.2289 141.29); /* eyes */
+  --clr-accent-4: oklch(71% 0.23 141deg); /* eyes */
-  --clr-accent-5: oklch(0.36 0.0098 17.62); /* horns */
+  --clr-accent-5: oklch(36% 0.01 17deg); /* horns */
-  --clr-accent-6: oklch(0.46 0.0826 32.71); /* tail spikes */
+  --clr-accent-6: oklch(46% 0.08 32deg); /* tail spikes */
 
   --clr-selection: var(--clr-accent-1);
-  --clr-selection-text: var(--theme-c-text-dark);
+  --clr-selection-text: var(--theme-c-primary-100);
   --clr-nav-link-active: var(--clr-accent-1);
   --clr-heading-underline: var(--clr-accent-1);
   --clr-heading-data: var(--clr-accent-1);
@@ -62,36 +85,40 @@
 }
 
 .viktor {
-  --clr-accent-1: oklch(0.95 0.0234 69.6);
+  --clr-accent-1: oklch(85% 0.04 56deg); /* front */
-  --clr-accent-2: oklch(0.85 0.0471 56.52);
+  --clr-accent-2: oklch(35% 0.03 50deg); /* arms, legs */
-  --clr-accent-3: oklch(0.35 0.0365 50.88);
+  --clr-accent-3: oklch(30% 0.04 22deg); /* back main */
-  --clr-accent-4: oklch(0.3 0.0477 22.3);
+  --clr-accent-4: oklch(26% 0.03 19deg); /* back spine */
-  --clr-accent-5: oklch(0.26 0.0381 19.99);
+  --clr-accent-5: oklch(71% 0.08 236deg); /* highlights, tissue */
-  --clr-accent-6: oklch(0.9 0.0705 199.31);
+  --clr-accent-6: oklch(95% 0.02 69deg); /* tail club */
-  --clr-accent-7: oklch(0.75 0.0912 228.1);
+  --clr-accent-7: oklch(90% 0.07 199deg); /* eyes primary */
-  --clr-accent-8: oklch(0.71 0.0848 236.58);
+  --clr-accent-8: oklch(75% 0.09 228deg); /* eyes secondary */
-  --clr-accent-9: oklch(0.4 0.0437 228.49);
 
-  --clr-selection: var(--clr-accent-7);
+  --clr-selection: var(--clr-accent-8);
-  --clr-selection-text: var(--theme-c-text-dark);
+  --clr-selection-text: var(--theme-c-primary-100);
-  --clr-nav-link-active: var(--clr-accent-7);
+  --clr-nav-link-active: var(--clr-accent-8);
-  --clr-heading-underline: var(--clr-accent-7);
+  --clr-heading-underline: var(--clr-accent-8);
-  --clr-heading-data: var(--clr-accent-7);
+  --clr-heading-data: var(--clr-accent-8);
-  --clr-link: var(--clr-accent-7);
+  --clr-link: var(--clr-accent-8);
-  --clr-link-underline: var(--clr-accent-7);
+  --clr-link-underline: var(--clr-accent-8);
-  --clr-timeline-stroke: var(--clr-accent-7);
+  --clr-timeline-stroke: var(--clr-accent-8);
-  --clr-gallery-indicator: var(--clr-accent-7);
+  --clr-gallery-indicator: var(--clr-accent-8);
+
+  @media (prefers-color-scheme: light) {
+    --clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h);
+  }
 }
 
 .jarek {
-  --clr-accent-1: oklch(0.69 0.11 71.52);
+  --clr-accent-1: oklch(69% 0.11 71deg); /* fur primary */
-  --clr-accent-2: oklch(0.56 0.1 98.83);
+  --clr-accent-2: oklch(56% 0.1 98deg); /* mane */
-  --clr-accent-3: oklch(0.76 0.03 112.98);
+  --clr-accent-3: oklch(76% 0.03 112deg); /* eyes */
-  --clr-accent-4: oklch(0.81 0.07 74.77);
+  --clr-accent-4: oklch(81% 0.07 74deg); /* horn */
-  --clr-accent-5: oklch(0.69 0.12 95.34);
+  --clr-accent-5: oklch(84% 0.07 111deg); /* trii */
+  --clr-accent-6: oklch(69% 0.12 95deg); /* naughty */
 
   --clr-selection: var(--clr-accent-1);
-  --clr-selection-text: var(--theme-c-text-dark);
+  --clr-selection-text: var(--theme-c-primary-100);
   --clr-nav-link-active: var(--clr-accent-1);
   --clr-heading-underline: var(--clr-accent-1);
   --clr-heading-data: var(--clr-accent-1);