design: three tokens the sweep needed — positive, scrim-dark, scrim-dark-strong
The palette had no green for status and no black scrim, so two surfaces were about to either invent literals or misuse an accent. Creator's call (2026-10-30): give green a token rather than painting "connected" blue, which already means five other things. - `positive` #22c55e — STATUS ONLY (connected, applied, healthy). Never an accent, never a button fill; the doc says so and the guard parses the doc. - `scrim-dark` #26000000 (15% black) and `scrim-dark-strong` #00000080 (50%) — the preview's dim strips and heavy overlays. 18 sites justify a token, and they are structural, not decoration. - LeftPanel's ✓ confirm now wears `positive` instead of the interactive accent, matching the status rule the new token states. DesignTokensTests still green: the doc is the contract, so the three new rows demanded three new brushes and got them.
This commit is contained in:
@@ -27,6 +27,8 @@
|
||||
| `outline-variant` | `#1e293b` | Subtle dividers, inactive meter segments |
|
||||
| `scrim-soft` | `#22FFFFFF` | Hover/press wash over a surface (13% white) |
|
||||
| `scrim-strong` | `#26FFFFFF` | Stronger wash — selected icon, dimmed image (15% white) |
|
||||
| `scrim-dark` | `#26000000` | Dim strip / shading over the preview (15% black) |
|
||||
| `scrim-dark-strong` | `#00000080` | Heavy overlay — modal veil, poster frame (50% black) |
|
||||
|
||||
### Text
|
||||
|
||||
@@ -47,6 +49,7 @@
|
||||
| `secondary` (amber) | `#ffb95f` | Game audio channel, Super Chat highlight |
|
||||
| `secondary-container` | `#ee9800` | Amber pressed/hover state |
|
||||
| `attention` (orange) | `#ff8c3a` | Dropped frames, the live-screen indicator, blinking warnings |
|
||||
| `positive` | `#22c55e` | **Status only** — connected, applied, healthy. Never an accent, never a button fill |
|
||||
| `error` | `#ef4444` | Error text and icons |
|
||||
| `error-container` | `#93000a` | Error surface (health banner, toast) — keeps error visually distinct from on-air red |
|
||||
| `on-error` | `#ffdad6` | Text on an error surface |
|
||||
|
||||
Reference in New Issue
Block a user