[CSS] Migrate 01-asw.css to oklch --color-N palette #20

New issue

Closed

opened 2026-04-10 17:28:15 +00:00 by vigilio · 0 comments

vigilio commented

2026-04-10 17:28:15 +00:00

Owner

Replace named palette references (--gray-N, --green-N, --blue-N) with Open Props oklch --color-1 through --color-16 for surfaces and text.

Dark mode mapping

:root {
  --palette-hue: 250;
  --palette-chroma: 0.15;

  --surface:     var(--color-16);  /* 10% lightness */
  --surface-1:   var(--color-15);  /* 16% */
  --surface-2:   var(--color-14);  /* 20% */
  --text:        var(--color-3);   /* 93% — easy on the eyes */
  --text-2:      var(--color-5);   /* 80% */
  --text-3:      var(--color-7);   /* 66% */
  --text-dim:    var(--color-9);   /* 53% */
  --accent:      var(--color-8);   /* 58% peak chroma */
}

Links stay blue

Links use a fixed hue (250) regardless of palette — the OG HTML blue convention:

--link: oklch(65% 0.15 250);

Light mode

Flip the mapping — surfaces from the light end, text from the dark end:

--surface:     var(--color-1);   /* 98% */
--surface-1:   var(--color-2);   /* 97% */
--text:        var(--color-14);  /* 20% — dark but not black */
--text-2:      var(--color-11);  /* 42% */

What stays as named palettes

State colors keep FIXED hues (not palette-driven) but use harmonized oklch:

--ok:    oklch(75% 0.15 145);   /* green */
--warn:  oklch(75% 0.15 80);    /* amber */
--error: oklch(75% 0.15 25);    /* red */
--info:  oklch(75% 0.15 250);   /* blue */

Named palettes (--red-N, --blue-N etc.) may still be used for one-off component needs, but surfaces/text/accent are fully palette-driven.

Reference

See /palette-test.html on asw.trentuna.com for live interactive demo.

Replace named palette references (--gray-N, --green-N, --blue-N) with Open Props oklch `--color-1` through `--color-16` for surfaces and text. ## Dark mode mapping ```css :root { --palette-hue: 250; --palette-chroma: 0.15; --surface: var(--color-16); /* 10% lightness */ --surface-1: var(--color-15); /* 16% */ --surface-2: var(--color-14); /* 20% */ --text: var(--color-3); /* 93% — easy on the eyes */ --text-2: var(--color-5); /* 80% */ --text-3: var(--color-7); /* 66% */ --text-dim: var(--color-9); /* 53% */ --accent: var(--color-8); /* 58% peak chroma */ } ``` ## Links stay blue Links use a fixed hue (250) regardless of palette — the OG HTML blue convention: ```css --link: oklch(65% 0.15 250); ``` ## Light mode Flip the mapping — surfaces from the light end, text from the dark end: ```css --surface: var(--color-1); /* 98% */ --surface-1: var(--color-2); /* 97% */ --text: var(--color-14); /* 20% — dark but not black */ --text-2: var(--color-11); /* 42% */ ``` ## What stays as named palettes State colors keep FIXED hues (not palette-driven) but use harmonized oklch: ```css --ok: oklch(75% 0.15 145); /* green */ --warn: oklch(75% 0.15 80); /* amber */ --error: oklch(75% 0.15 25); /* red */ --info: oklch(75% 0.15 250); /* blue */ ``` Named palettes (--red-N, --blue-N etc.) may still be used for one-off component needs, but surfaces/text/accent are fully palette-driven. ## Reference See /palette-test.html on asw.trentuna.com for live interactive demo.