[CSS] Update layer files that reference old --gray-N tokens #22

New issue

Closed

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

vigilio commented

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

Owner

After 01-asw.css migrates to --color-N (issue #20), scan all other layers for direct references to --gray-N, --green-N, --blue-N etc.

These should reference ASW semantic tokens (--text, --surface, --border, --accent) NOT Open Props named palettes directly. If a layer says color: var(--gray-5) it should say color: var(--text-3) instead.

The only exception: state colors (--ok, --warn, --error, --info) which use fixed oklch hues.

# Find all named palette refs in layers 02-09
grep -n '\-\-gray-\|\-\-green-\|\-\-blue-\|\-\-red-\|\-\-yellow-' assets/css/layers/0[2-9]*.css

Replace with semantic token equivalents. This ensures the palette-hue knob actually controls everything.

After 01-asw.css migrates to --color-N (issue #20), scan all other layers for direct references to --gray-N, --green-N, --blue-N etc. These should reference ASW semantic tokens (--text, --surface, --border, --accent) NOT Open Props named palettes directly. If a layer says `color: var(--gray-5)` it should say `color: var(--text-3)` instead. The only exception: state colors (--ok, --warn, --error, --info) which use fixed oklch hues. ```bash # Find all named palette refs in layers 02-09 grep -n '\-\-gray-\|\-\-green-\|\-\-blue-\|\-\-red-\|\-\-yellow-' assets/css/layers/0[2-9]*.css ``` Replace with semantic token equivalents. This ensures the palette-hue knob actually controls everything.