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

fix(decnet_web/css): sweep rgba colour literals to tokens app-wide

Browse Source 
Pre-this-commit, ~80 rgba() literals across 24 files were
hardcoding alert-red, warn-amber, info-cyan, panel-dark, and
white-text-with-alpha shades that bypassed the token cascade.
Net effect in light mode: the .eml/SESSREC drawers, AttackerDetail
verdict pills, MazeNET net-box headers, OPEN/REPLAY action
buttons, threat-intel cards, and all the dim 'whitish' overlays
stayed on their dark-mode hex values, producing the unreadable
panels in the screenshots.

Sweep maps each rgba colour family onto the existing token by
alpha bucket — rgba(13,17,23,*) -> var(--panel),
rgba(255,65,65,*) -> var(--alert)/-tint-10,
rgba(255,170,0,*) and rgba(224,160,64,*) -> var(--warn)/-tint-10,
rgba(0,200,255,*) -> var(--info)/-tint-10,
rgba(255,255,255,*) -> var(--fg-N)/var(--matrix-tint-N) by alpha.

VERDICT_TONE in AttackerDetail (MALICIOUS/SUSPICIOUS/BENIGN/
NO SIGNAL) was the worst offender — string literals
'#ff4d4d'/'#ffae42'/'#5fd07a'/rgba(255,255,255,0.4) baked into
inline JS styles. Now resolves at render time via var(--alert)/
var(--warn)/var(--ok)/var(--fg-4).

New tokens in :root:
 - --bg-color (alias of --bg) — drawers used this name with
   #0d1117 fallback that fired in every browser because nothing
   defined --bg-color. Adding the alias makes drawers re-tone.
 - --info / --info-tint-10 / --info-tint-30 — REPLAY buttons and
   any future neutral-secondary use.
 - --ok — semantic alias for 'verified good' (matrix in dark,
   emerald in light) so BENIGN pills stay readable across themes.

Login.css left intentionally — pre-auth surface, not themed.
This commit is contained in:
anti
2026-05-09 03:48:05 -04:00
parent 11b2da7d54
commit aa0b22aacb
26 changed files with 142 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
decnet_web/src/components/MazeNET/MazeNET.css
View File

@@ -151,7 +151,7 @@ body.maze-fullscreen .maze-shell {
.maze-net-box {
position: absolute;
border: 1px dashed var(--border);
background: rgba(13, 17, 23, 0.6);
background: var(--panel);
padding: 32px 16px 16px;
min-width: 220px; min-height: 140px;
transition: border-color 0.2s;
@@ -165,14 +165,14 @@ body.maze-fullscreen .maze-shell {
border-color: var(--matrix); background: var(--matrix-tint-5);
}
.maze-net-box.internet {
border-color: var(--alert); background: rgba(255, 65, 65, 0.04);
border-color: var(--alert); background: var(--alert-tint-10);
}
.maze-net-box.dmz {
border-color: var(--alert); background: rgba(255, 65, 65, 0.06);
border-color: var(--alert); background: var(--alert-tint-10);
border-style: dashed;
}
.maze-net-box.dmz .maze-net-box-head {
color: var(--alert); border-bottom-color: rgba(255, 65, 65, 0.45);
color: var(--alert); border-bottom-color: var(--alert);
}
/* Deployed: topology is active/degraded — make it visually unmistakable.
* Subnet LANs glow matrix-green; DMZ stays hot red (and gets a stronger
@@ -188,42 +188,42 @@ body.maze-fullscreen .maze-shell {
}
.maze-net-box.deployed.dmz {
border-color: var(--alert);
background: rgba(255, 65, 65, 0.09);
box-shadow: 0 0 0 1px rgba(255, 65, 65, 0.35) inset,
0 0 16px rgba(255, 65, 65, 0.5);
background: var(--alert-tint-10);
box-shadow: 0 0 0 1px var(--alert) inset,
0 0 16px var(--alert);
}
.maze-net-box.deployed.dmz .maze-net-box-head {
color: var(--alert); border-bottom-color: rgba(255, 65, 65, 0.55);
color: var(--alert); border-bottom-color: var(--alert);
}
.maze-net-box.inactive {
opacity: 0.42; filter: grayscale(0.7); border-style: dotted;
}
.maze-net-box.inactive .maze-net-box-head { color: rgba(255, 255, 255, 0.5); }
.maze-net-box.inactive .maze-net-box-head { color: var(--fg-3); }
/* Optimistic placeholder for an enqueued LAN-add. Amber tint matches
* the REAP button voice — clearly "in-flight, not committed" without
* collapsing into the dimmed-out 'inactive' style which means the
* opposite (no traffic on a deployed LAN). */
.maze-net-box.pending {
border-color: var(--warn, #e0a040);
background: rgba(224, 160, 64, 0.04);
background: var(--warn-tint-10);
border-style: dashed;
filter: none; opacity: 1;
}
.maze-net-box.pending .maze-net-box-head {
color: var(--warn, #e0a040);
border-bottom-color: rgba(224, 160, 64, 0.45);
border-bottom-color: var(--warn);
}
.maze-net-box.pending .cidr { color: rgba(224, 160, 64, 0.7); }
.maze-net-box.pending .cidr { color: var(--warn); }
.maze-net-box-head {
position: absolute; top: 0; left: 0; right: 0;
padding: 6px 12px; border-bottom: 1px dashed var(--border);
display: flex; align-items: center; gap: 8px; justify-content: space-between;
font-size: 0.65rem; letter-spacing: 1.5px; opacity: 0.8;
background: rgba(13, 17, 23, 0.8); cursor: move;
background: var(--panel); cursor: move;
}
.maze-net-box-head .cidr { opacity: 0.5; font-size: 0.6rem; letter-spacing: 1px; }
.maze-net-box.internet .maze-net-box-head {
color: var(--alert); border-bottom-color: rgba(255, 65, 65, 0.4);
color: var(--alert); border-bottom-color: var(--alert);
}
/* ── Network resize handles ─────────────────── */
@@ -271,8 +271,8 @@ body.maze-fullscreen .maze-shell {
.maze-node.deployed .mn-head { color: var(--matrix); }
.maze-node.deployed.dmz-gateway {
border-color: var(--alert);
box-shadow: 0 0 12px rgba(255, 65, 65, 0.55);
background: rgba(255, 65, 65, 0.06);
box-shadow: 0 0 12px var(--alert);
background: var(--alert-tint-10);
}
.maze-node.deployed.dmz-gateway .mn-head { color: var(--alert); }
.maze-node .mn-head {
@@ -322,7 +322,7 @@ body.maze-fullscreen .maze-shell {
}
.maze-legend {
position: absolute; bottom: 12px; right: 12px; z-index: 5;
background: rgba(13, 17, 23, 0.85); border: 1px solid var(--border);
background: var(--panel); border: 1px solid var(--border);
padding: 8px 10px; font-size: 0.6rem; letter-spacing: 1px;
display: flex; flex-direction: column; gap: 4px;
}
@@ -425,7 +425,7 @@ body.maze-fullscreen .maze-shell {
.ghost-edge.snap { stroke: var(--matrix); opacity: 0.9; }
.ctx-item:hover { background: var(--violet-tint-10); color: var(--violet); }
.ctx-item.danger { color: var(--alert); }
.ctx-item.danger:hover { background: rgba(255, 65, 65, 0.12); }
.ctx-item.danger:hover { background: var(--alert-tint-10); }
.ctx-item.disabled { opacity: 0.35; cursor: not-allowed; }
.ctx-item.disabled:hover { background: transparent; color: inherit; }
.ctx-divider { height: 1px; background: var(--border); margin: 4px 0; }
@@ -453,7 +453,7 @@ body.maze-fullscreen .maze-shell {
.inspector-close-btn {
background: transparent;
border: 1px solid var(--border);
color: rgba(255, 255, 255, 0.5);
color: var(--fg-3);
padding: 3px 5px;
cursor: pointer;
display: flex;
@@ -550,7 +550,7 @@ body.maze-fullscreen .maze-shell {
padding: 1px 5px;
border: 1px solid var(--border);
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.55);
color: var(--fg-3);
}
/* Inspector buttons */
@@ -563,7 +563,7 @@ body.maze-fullscreen .maze-shell {
.maze-btn.alert:hover {
background: var(--alert);
color: var(--bg);
box-shadow: 0 0 10px rgba(255, 65, 65, 0.5);
box-shadow: 0 0 10px var(--alert);
opacity: 1;
}
@@ -606,8 +606,8 @@ body.maze-fullscreen .maze-shell {
flex-direction: column;
gap: 8px;
padding: 8px;
background: rgba(255, 65, 65, 0.04);
border: 1px solid rgba(255, 65, 65, 0.3);
background: var(--alert-tint-10);
border: 1px solid var(--alert);
}
.inspector-tarpit-field {
display: flex;
@@ -617,7 +617,7 @@ body.maze-fullscreen .maze-shell {
.maze-input {
font-size: 0.72rem;
padding: 4px 6px;
background: rgba(255, 255, 255, 0.04);
background: var(--matrix-tint-5);
border: 1px solid var(--border);
color: var(--text-color, #e0e0e0);
font-family: inherit;