feat: convert colors to use oklch

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)",
   },
 };

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(

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>