wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: convert colors to use oklch

Browse source
This commit is contained in:
Devin Haska 2025-04-04 14:19:10 -07:00
parent 21e49e518b
commit 517e835916
3 changed files with 18 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

32
config/design-tokens/colors.js
View file

@ -1,22 +1,22 @@
export default { export default {
light: { light: {
primary: "188deg 84% 35%", primary: "oklch(0.6 0.1025 212.16)",
secondary: "8deg 84% 50%", secondary: "oklch(0.61 0.2232 31.48)",
background: "0deg 0% 98%", background: "oklch(0.98 0 0)",
surface: "188deg 27% 94%", surface: "oklch(0.96 0.0078 207.9)",
border: "188deg 48% 80%", border: "oklch(0.87 0.045077 207.8465)",
text: "0deg 0% 4%", text: "oklch(0.15 0 0)",
fadeText: "188deg 12% 32%", fadeText: "oklch(0.45 0.0214 207.84)",
shadow: "188deg 100% 18%", shadow: "oklch(0.39 0.0688 212.35)",
}, },
dark: { dark: {
primary: "188deg 100% 30%", primary: "oklch(0.57 0.0991 213.4)",
secondary: "8deg 84% 43%", secondary: "oklch(0.55 0.1982 31.52)",
background: "0deg 0% 9%", background: "oklch(0.2 0 0)",
surface: "202deg 13% 14%", surface: "oklch(0.26 0.0106 233.21)",
border: "208deg 27% 15%", border: "oklch(0.27 0.0238 245.26)",
text: "0deg 0% 98%", text: "oklch(0.98 0 0)",
fadeText: "188deg 12% 70%", fadeText: "oklch(0.78 0.018 207.85)",
shadow: "188deg 100% 18%", shadow: "oklch(0.39 0.0688 212.35)",
}, },
}; };

3
config/filters/postcss/utils/colors.js
View file

@ -4,8 +4,7 @@ import { helperClassesToCss } from "./helper-classes.js";
const lightScheme = colorSchemes.light; const lightScheme = colorSchemes.light;
const darkScheme = colorSchemes.dark; const darkScheme = colorSchemes.dark;
const colorToCss = (key, value) => const colorToCss = (key, value) => `--color-${key}: ${value};`;
`--${key}: ${value}; --color-${key}: hsl(${value});`;
const colorSchemeToCss = (scheme) => const colorSchemeToCss = (scheme) =>
Object.entries(scheme).reduce( Object.entries(scheme).reduce(

3
src/pages/styleguide.html
View file

@ -82,5 +82,4 @@ description: A demo of the site's theme.
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
padding: 1rem">A card-type component.</div> padding: 1rem">A card-type component.</div>
<hr /> <hr />
<div style="box-shadow: 2px 2px 8px hsl(var(--shadow) / 0.34); <div style="box-shadow: 2px 2px 8px var(--color-shadow); padding: 1rem">This box has a shadow</div>
padding: 1rem">This box has a shadow</div>