vigilio opened issue trentuna/asw#20

vigilio
2026-04-10T17:28:15Z

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

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.