anti/DECNET
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(decnet_web/css): promote hardcoded matrix/warn/crit colours to tokens

Browse Source 
37 bare rgba(0, 255, 65, ...) literals across 10 component CSS
files were forcing matrix-green to bleed into light mode no matter
what data-theme=light overrode in :root. They're now mapped onto
existing tokens by alpha bucket (0.025-0.05 -> --matrix-tint-5,
0.08-0.10 -> --matrix-tint-10, 0.18-0.30 -> --matrix-tint-30,
0.4 -> --fg-4, 0.5-0.6 -> --fg-3, 0.7-0.8 -> --fg-2).

Adds --warn (#e0a040), --amber (alias of --warn), --crit
(#e74c3c), and their tint-10 variants to :root, with
ink-friendly light-mode overrides. Sweeps bare #ffaa00 / #e0a040
/ #f59e0b / #ff4d4d / #e74c3c usages in the same files onto the
new tokens.

Files with var(--token, #fallback) patterns left alone — those
were already token-driven and the fallbacks just provide safety.
Login.css and inline TSX hex left for the per-page sweep.
This commit is contained in:
anti
2026-05-09 03:36:04 -04:00
parent df0c8e12e7
commit 34c778277a
13 changed files with 56 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
decnet_web/src/index.css
View File

@@ -8,6 +8,9 @@
--panel: #0d1117;
--border: #30363d;
--alert: #ff4141;
--warn: #e0a040; /* amber — degraded / passive / stale */
--amber: var(--warn);
--crit: #e74c3c; /* hot/critical, distinct from --alert */
/* Back-compat names used across the codebase */
--background-color: var(--bg);
@@ -28,6 +31,8 @@
--matrix-tint-30: rgba(0, 255, 65, 0.30);
--violet-tint-10: rgba(238, 130, 238, 0.10);
--alert-tint-10: rgba(255, 65, 65, 0.10);
--warn-tint-10: rgba(224, 160, 64, 0.10);
--crit-tint-10: rgba(231, 76, 60, 0.10);
/* ── Glows ─────────────────────────────────────── */
--matrix-glow: 0 0 10px rgba(0, 255, 65, 0.5);
@@ -129,6 +134,9 @@ html[data-theme="light"] {
--panel: #c9c7c2;
--border: #1a1a1a;
--alert: #991b1b;
--warn: #b45309; /* darker amber — readable on cream */
--amber: var(--warn);
--crit: #b91c1c; /* matches alert in light, distinct in dark */
--fg-1: var(--matrix);
--fg-2: rgba(13, 13, 13, 0.78);
@@ -140,6 +148,8 @@ html[data-theme="light"] {
--matrix-tint-30: rgba(13, 13, 13, 0.18);
--violet-tint-10: rgba(45, 27, 78, 0.10);
--alert-tint-10: rgba(153, 27, 27, 0.10);
--warn-tint-10: rgba(180, 83, 9, 0.12);
--crit-tint-10: rgba(185, 28, 28, 0.10);
/* Glows no-op'd — kept defined so .btn:hover etc. don't
* break, just produce no halo. */