From 517e835916af5d239baf531a00b4aa44d6ba1b31 Mon Sep 17 00:00:00 2001
From: Devin Haska <2636402+wonderfulfrog@users.noreply.github.com>
Date: Fri, 4 Apr 2025 14:19:10 -0700
Subject: [PATCH] feat: convert colors to use oklch

---
 config/design-tokens/colors.js         | 32 +++++++++++++-------------
 config/filters/postcss/utils/colors.js |  3 +--
 src/pages/styleguide.html              |  3 +--
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/config/design-tokens/colors.js b/config/design-tokens/colors.js
index 6947248..73e0695 100644
--- a/config/design-tokens/colors.js
+++ b/config/design-tokens/colors.js
@@ -1,22 +1,22 @@
 export default {
   light: {
-    primary: "188deg 84% 35%",
-    secondary: "8deg 84% 50%",
-    background: "0deg 0% 98%",
-    surface: "188deg 27% 94%",
-    border: "188deg 48% 80%",
-    text: "0deg 0% 4%",
-    fadeText: "188deg 12% 32%",
-    shadow: "188deg 100% 18%",
+    primary: "oklch(0.6 0.1025 212.16)",
+    secondary: "oklch(0.61 0.2232 31.48)",
+    background: "oklch(0.98 0 0)",
+    surface: "oklch(0.96 0.0078 207.9)",
+    border: "oklch(0.87 0.045077 207.8465)",
+    text: "oklch(0.15 0 0)",
+    fadeText: "oklch(0.45 0.0214 207.84)",
+    shadow: "oklch(0.39 0.0688 212.35)",
   },
   dark: {
-    primary: "188deg 100% 30%",
-    secondary: "8deg 84% 43%",
-    background: "0deg 0% 9%",
-    surface: "202deg 13% 14%",
-    border: "208deg 27% 15%",
-    text: "0deg 0% 98%",
-    fadeText: "188deg 12% 70%",
-    shadow: "188deg 100% 18%",
+    primary: "oklch(0.57 0.0991 213.4)",
+    secondary: "oklch(0.55 0.1982 31.52)",
+    background: "oklch(0.2 0 0)",
+    surface: "oklch(0.26 0.0106 233.21)",
+    border: "oklch(0.27 0.0238 245.26)",
+    text: "oklch(0.98 0 0)",
+    fadeText: "oklch(0.78 0.018 207.85)",
+    shadow: "oklch(0.39 0.0688 212.35)",
   },
 };
diff --git a/config/filters/postcss/utils/colors.js b/config/filters/postcss/utils/colors.js
index 1aaff02..2383db2 100644
--- a/config/filters/postcss/utils/colors.js
+++ b/config/filters/postcss/utils/colors.js
@@ -4,8 +4,7 @@ import { helperClassesToCss } from "./helper-classes.js";
 const lightScheme = colorSchemes.light;
 const darkScheme = colorSchemes.dark;
 
-const colorToCss = (key, value) =>
-  `--${key}: ${value}; --color-${key}: hsl(${value});`;
+const colorToCss = (key, value) => `--color-${key}: ${value};`;
 
 const colorSchemeToCss = (scheme) =>
   Object.entries(scheme).reduce(
diff --git a/src/pages/styleguide.html b/src/pages/styleguide.html
index 7dfacf7..7d5b641 100644
--- a/src/pages/styleguide.html
+++ b/src/pages/styleguide.html
@@ -82,5 +82,4 @@ description: A demo of the site's theme.
             border: 1px solid var(--color-border);
             padding: 1rem">A card-type component.</div>
 <hr />
-<div style="box-shadow: 2px 2px 8px hsl(var(--shadow) / 0.34);
-            padding: 1rem">This box has a shadow</div>
+<div style="box-shadow: 2px 2px 8px var(--color-shadow); padding: 1rem">This box has a shadow</div>