From c54857f2aee09b9472c306db8a238803726a0522 Mon Sep 17 00:00:00 2001
From: Jan Kremer <mail@jankremer.eu>
Date: Sun, 13 Apr 2025 16:31:34 +0200
Subject: [PATCH] design: Change to Uchu colors

https://uchu.style
---
 assets/css/main.css | 124 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 103 insertions(+), 21 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 47c72d2..db4e603 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,14 +1,96 @@
 :root {
   color-scheme: light dark;
 
-  --red: #df3f65;
-  --orange: #e59235;
-  --yellow: #ebc343;
-  --green: #7dcc50;
-  --blue: #4ea1e6;
-  --violet: #b771d0;
-  --brown: #967e5e;
-  --border: #d7d7d5;
+  /*** gray ***/
+  --uchu-light-gray-raw: 95.57% 0.003 286.35;
+  --uchu-light-gray: oklch(var(--uchu-light-gray-raw));
+
+  --uchu-gray-raw: 84.68% 0.002 197.12;
+  --uchu-gray: oklch(var(--uchu-gray-raw));
+
+  --uchu-dark-gray-raw: 63.12% 0.004 219.55;
+  --uchu-dark-gray: oklch(var(--uchu-dark-gray-raw));
+
+  /*** red ***/
+  --uchu-light-red-raw: 88.98% 0.052 3.28;
+  --uchu-light-red: oklch(var(--uchu-light-red-raw));
+
+  --uchu-red-raw: 62.73% 0.209 12.37;
+  --uchu-red: oklch(var(--uchu-red-raw));
+
+  --uchu-dark-red-raw: 45.8% 0.177 17.7;
+  --uchu-dark-red: oklch(var(--uchu-dark-red-raw));
+
+  /*** pink ***/
+  --uchu-light-pink-raw: 95.8% 0.023 354.27;
+  --uchu-light-pink: oklch(var(--uchu-light-pink-raw));
+
+  --uchu-pink-raw: 85.43% 0.09 354.1;
+  --uchu-pink: oklch(var(--uchu-pink-raw));
+
+  --uchu-dark-pink-raw: 64.11% 0.084 353.91;
+  --uchu-dark-pink: oklch(var(--uchu-dark-pink-raw));
+
+  /*** purple ***/
+  --uchu-light-purple-raw: 89.1% 0.046 305.24;
+  --uchu-light-purple: oklch(var(--uchu-light-purple-raw));
+
+  --uchu-purple-raw: 58.47% 0.181 302.06;
+  --uchu-purple: oklch(var(--uchu-purple-raw));
+
+  --uchu-dark-purple-raw: 39.46% 0.164 298.29;
+  --uchu-dark-purple: oklch(var(--uchu-dark-purple-raw));
+
+  /*** blue ***/
+  --uchu-light-blue-raw: 89.66% 0.046 260.67;
+  --uchu-light-blue: oklch(var(--uchu-light-blue-raw));
+
+  --uchu-blue-raw: 62.39% 0.181 258.33;
+  --uchu-blue: oklch(var(--uchu-blue-raw));
+
+  --uchu-dark-blue-raw: 43.48% 0.17 260.2;
+  --uchu-dark-blue: oklch(var(--uchu-dark-blue-raw));
+
+  /*** green ***/
+  --uchu-light-green-raw: 93.96% 0.05 148.74;
+  --uchu-light-green: oklch(var(--uchu-light-green-raw));
+
+  --uchu-green-raw: 79.33% 0.179 145.62;
+  --uchu-green: oklch(var(--uchu-green-raw));
+
+  --uchu-dark-green-raw: 58.83% 0.158 145.05;
+  --uchu-dark-green: oklch(var(--uchu-dark-green-raw));
+
+  /*** yellow ***/
+  --uchu-light-yellow-raw: 97.05% 0.039 91.2;
+  --uchu-light-yellow: oklch(var(--uchu-light-yellow-raw));
+
+  --uchu-yellow-raw: 90.92% 0.125 92.56;
+  --uchu-yellow: oklch(var(--uchu-yellow-raw));
+
+  --uchu-dark-yellow-raw: 69.14% 0.109 91.04;
+  --uchu-dark-yellow: oklch(var(--uchu-dark-yellow-raw));
+
+  /*** orange ***/
+  --uchu-light-orange-raw: 93.83% 0.037 56.93;
+  --uchu-light-orange: oklch(var(--uchu-light-orange-raw));
+
+  --uchu-orange-raw: 78.75% 0.14163582809066333 54.32911089172009;
+  --uchu-orange: oklch(var(--uchu-orange-raw));
+
+  --uchu-dark-orange-raw: 58.28% 0.128 52.2;
+  --uchu-dark-orange: oklch(var(--uchu-dark-orange-raw));
+
+  /*** general ***/
+  --uchu-yang-raw: 99.4% 0 0;
+  --uchu-yang: oklch(var(--uchu-yang-raw));
+
+  --uchu-light-yin-raw: 91.87% 0.003 264.54;
+  --uchu-light-yin: oklch(var(--uchu-light-yin-raw));
+
+  --uchu-yin-raw: 14.38% 0.007 256.88;
+  --uchu-yin: oklch(var(--uchu-yin-raw));
+
   --serif: Athelas, Garamond, "EB Garamond", serif;
   --sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
@@ -19,8 +101,8 @@ body {
   margin: auto;
   padding: 1rem;
   max-width: 80ch;
-  color: light-dark(black, white);
-  background-color: light-dark(white, black);
+  color: light-dark(var(--uchu-yin), var(--uchu-yang));
+  background-color: light-dark(var(--uchu-yang), var(--uchu-yin));
 }
 
 main {
@@ -29,10 +111,10 @@ main {
 }
 
 a {
-  color: var(--blue);
+  color: var(--uchu-blue);
   text-decoration: none;
   &:hover {
-    text-decoration-color: var(--blue);
+    text-decoration-color: var(--uchu-blue);
     text-decoration: underline;
   }
 }
@@ -63,7 +145,7 @@ h1 {
 }
 
 em {
-  color: var(--red);
+  color: var(--uchu-red);
 }
 
 table {
@@ -77,7 +159,7 @@ table {
 }
 
 .title {
-  color: light-dark(black, white);
+  color: light-dark(var(--uchu-yin), var(--uchu-yang));
   font-family: var(--serif);
   font-weight: bold;
   font-variant: normal;
@@ -89,12 +171,12 @@ table {
     height: 1.5rem;
     margin: 0.5rem;
     vertical-align: middle;
-    fill: light-dark(black, white);
+    fill: light-dark((var(--uchu-yin)), var(--uchu-yang));
   }
 }
 
 header {
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--uchu-gray);
   font-size: 1.25rem;
   font-family: var(--serif);
   font-weight: bold;
@@ -107,13 +189,13 @@ header {
       padding: 0 0.5rem;
 
       & a {
-        color: light-dark(black, white);
+        color: light-dark((var(--uchu-yin)), var(--uchu-yang));
         text-decoration: none;
       }
 
       .active {
         text-decoration: underline;
-        text-decoration-color: var(--blue);
+        text-decoration-color: var(--uchu-blue);
       }
     }
   }
@@ -121,7 +203,7 @@ header {
 
 footer {
   font-family: var(--serif);
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--uchu-gray);
   & ul {
     display: flex;
     justify-content: space-around;
@@ -144,7 +226,7 @@ footer {
 }
 
 .list {
-  color: light-dark(black, white);
+  color: light-dark(var(--uchu-yin), var(--uchu-yang));
   & h2 {
     margin-top: 1.25rem;
     margin-bottom: 0;
@@ -181,7 +263,7 @@ code {
 }
 
 .highlight {
-  background: light-dark(var(--border), gray);
+  background: light-dark(var(--uchu-gray), var(--uchu-dark-gray));
   border-radius: 0.3rem;
   padding: 0.5em 0.5em;
   margin: 1rem 0;