feat(uix): --state-* state-layer token set + accordion pilot

First step of the state-archetype unification (the audit's Arq.8 / the plugin's #1
rec): collapse the ~168 bespoke hover idioms into a canonical MD3 state layer. Adds
--state-hover / --state-press / --state-selected to archetypes.css — a translucent
`currentColor` overlay (8% / 12% / 12%), the single source for NEUTRAL interaction
feedback. Per-variant accent hover (solid -> palette-solid-hover, soft -> element, …)
stays in the recipes; the state layer owns the neutral / ghost tier.

Pilot: accordion-trigger:hover now uses var(--state-hover) instead of its bespoke
--accordion-trigger-hover-bg. Verified (computed): the token resolves to an 8%
currentColor tint on a real trigger (`srgb 0.125 / 0.08`); the color-mix + currentColor
chain confirmed directly. (Visual screenshot blocked by a renderer-hang in the tooling;
hover it live to see the tint.)

Rollout pending a design call: accordion has a TRANSPARENT base so a `background` swap
works; FILLED surfaces need a layered overlay (not a bg replace). The other ~30
neutral-hover components + the recipe orphan cleanup (--*-hover-bg) follow.
active-uix
dev 3 months ago
parent 2750b9ce83
commit a13ca387d4

@ -20,6 +20,20 @@
* unwrapped (a11y fallback; components override it with their own focus rule). * unwrapped (a11y fallback; components override it with their own focus rule).
*/ */
/* ── State layer (MD3) — canonical hover / press / selected feedback ─────────
* A translucent `currentColor` overlay: the single source for NEUTRAL interaction
* feedback, collapsing the per-component hover idioms (each recipe was hand-rolling
* its own `--x-hover-bg`; the audit counted ~168 such rules). Components apply it as
* a `background` on a transparent interactive surface, or as a layered overlay on a
* filled one. A theme retunes the strength by overriding these. Per-VARIANT accent
* hover (solid → palette-solid-hover, soft → element, …) stays in the recipes — the
* state layer owns the neutral / ghost tier, not the valenced palette swaps. */
:root {
--state-hover: color-mix(in srgb, currentColor 8%, transparent);
--state-press: color-mix(in srgb, currentColor 12%, transparent);
--state-selected: color-mix(in srgb, currentColor 12%, transparent);
}
/* ── Trigger ─────────────────────────────────────────────────────────────── /* ── Trigger ───────────────────────────────────────────────────────────────
* Applies to anything that the user clicks/taps to activate or open. * Applies to anything that the user clicks/taps to activate or open.
*/ */

@ -149,8 +149,10 @@
font-size: var(--accordion-trigger-font-size-full); font-size: var(--accordion-trigger-font-size-full);
} }
/* Hover uses the canonical state layer (archetypes.css) instead of a bespoke
* `--accordion-trigger-hover-bg` — pilot of the `--state-*` unification. */
[data-accordion-trigger]:hover { [data-accordion-trigger]:hover {
background: var(--accordion-trigger-hover-bg); background: var(--state-hover);
color: var(--accordion-trigger-hover-color); color: var(--accordion-trigger-hover-color);
} }

Loading…
Cancel
Save

Powered by TurnKey Linux.