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

8
decnet_web/src/components/Attackers.css
View File

@@ -27,7 +27,7 @@
border: none;
border-right: 1px solid var(--border);
background: transparent;
color: rgba(0, 255, 65, 0.5);
color: var(--fg-3);
cursor: pointer;
font-family: inherit;
}
@@ -50,8 +50,8 @@
}
.ak-dot-active { background: var(--alert); box-shadow: 0 0 5px var(--alert); }
.ak-dot-passive { background: #ffaa00; }
.ak-dot-inactive { background: rgba(0, 255, 65, 0.3); }
.ak-dot-passive { background: var(--warn); }
.ak-dot-inactive { background: var(--matrix-tint-30); }
.attackers-root .controls-row {
display: flex;
@@ -219,7 +219,7 @@
.attackers-root .activity-chip.passive .dot { background: var(--violet); }
.attackers-root .activity-chip.inactive {
border: 1px solid var(--border);
color: rgba(0, 255, 65, 0.5);
color: var(--fg-3);
background: transparent;
}
.attackers-root .activity-chip.inactive .dot { background: var(--border); }

2
decnet_web/src/components/Bounty.css
View File

@@ -47,7 +47,7 @@
border: none;
border-right: 1px solid var(--border);
background: transparent;
color: rgba(0, 255, 65, 0.6);
color: var(--fg-3);
cursor: pointer;
font-family: inherit;
}

8
decnet_web/src/components/Config.css
View File

@@ -29,7 +29,7 @@
.config-tab:hover {
opacity: 0.8;
background: rgba(0, 255, 65, 0.03);
background: var(--matrix-tint-5);
box-shadow: none;
color: var(--text-color);
}
@@ -141,7 +141,7 @@
}
.users-table tr:hover {
background-color: rgba(0, 255, 65, 0.03);
background-color: var(--matrix-tint-5);
}
.user-actions {
@@ -242,7 +242,7 @@
.must-change-badge {
font-size: 0.65rem;
color: #ffaa00;
color: var(--warn);
opacity: 0.8;
}
@@ -251,7 +251,7 @@
font-size: 0.75rem;
padding: 6px 12px;
border: 1px solid var(--text-color);
background: rgba(0, 255, 65, 0.1);
background: var(--matrix-tint-10);
display: inline-block;
}

2
decnet_web/src/components/Credentials.css
View File

@@ -48,7 +48,7 @@
border: none;
border-right: 1px solid var(--border);
background: transparent;
color: rgba(0, 255, 65, 0.6);
color: var(--fg-3);
cursor: pointer;
font-family: inherit;
}

12
decnet_web/src/components/Dashboard.css
View File

@@ -68,7 +68,7 @@
.chip.dim-chip {
border-color: var(--border-color);
color: rgba(0, 255, 65, 0.6);
color: var(--fg-3);
background: transparent;
}
@@ -316,7 +316,7 @@
}
.attacker-row:hover {
background: rgba(0, 255, 65, 0.03);
background: var(--matrix-tint-5);
}
.attacker-row:last-child {
@@ -369,7 +369,7 @@
}
.status-dot.warn {
background: #ffaa00;
background: var(--warn);
box-shadow: 0 0 6px rgba(255, 170, 0, 0.6);
}
@@ -382,7 +382,7 @@
/* Row-enter animation */
@keyframes row-enter {
from {
background: rgba(0, 255, 65, 0.2);
background: var(--matrix-tint-30);
opacity: 0;
transform: translateY(-4px);
}
@@ -428,7 +428,7 @@
}
.logs-table tr:not(.empty-row):hover {
background-color: rgba(0, 255, 65, 0.03);
background-color: var(--matrix-tint-5);
}
.logs-table tr.empty-row td {
@@ -510,7 +510,7 @@
font-size: 0.7rem;
padding: 2px 8px;
border: 1px solid var(--text-color);
background: rgba(0, 255, 65, 0.05);
background: var(--matrix-tint-5);
color: var(--text-color);
}

12
decnet_web/src/components/DeckyFleet.css
View File

@@ -31,7 +31,7 @@
font-family: inherit;
cursor: pointer;
background: transparent;
color: rgba(0, 255, 65, 0.6);
color: var(--fg-3);
text-transform: uppercase;
}
.fleet-filter-btn:last-child { border-right: none; }
@@ -108,7 +108,7 @@
.decky-ip {
font-size: 0.7rem;
opacity: 0.6;
background: rgba(0, 255, 65, 0.08);
background: var(--matrix-tint-10);
padding: 2px 7px;
}
.decky-meta { display: flex; flex-direction: column; gap: 6px; font-size: 0.75rem; }
@@ -314,7 +314,7 @@
max-height: 90vh;
background: var(--panel);
border: 1px solid var(--matrix);
box-shadow: 0 0 30px rgba(0, 255, 65, 0.25);
box-shadow: 0 0 30px var(--matrix-tint-30);
display: flex;
flex-direction: column;
overflow: hidden;
@@ -370,7 +370,7 @@
background: transparent;
border: 0;
border-right: 1px solid var(--border);
color: rgba(0, 255, 65, 0.6);
color: var(--fg-3);
font-family: inherit;
font-size: 0.7rem;
letter-spacing: 1.5px;
@@ -433,9 +433,9 @@
font-family: var(--font-mono);
min-height: 80px;
}
.code-block .comment { color: rgba(0, 255, 65, 0.4); }
.code-block .comment { color: var(--fg-4); }
.code-block .str { color: var(--violet); }
.code-block .key { color: rgba(0, 255, 65, 0.7); }
.code-block .key { color: var(--fg-2); }
.replay-cursor {
display: inline-block;
width: 7px;

4
decnet_web/src/components/EmptyState/EmptyState.css
View File

@@ -47,8 +47,8 @@
}
.empty-state-cta:hover {
background: rgba(0, 255, 65, 0.1);
box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
background: var(--matrix-tint-10);
box-shadow: 0 0 8px var(--matrix-tint-30);
}
.empty-state.empty-state-compact {

4
decnet_web/src/components/LiveLogs.css
View File

@@ -95,7 +95,7 @@
opacity: 1;
box-shadow: var(--violet-glow);
}
.logs-root .histogram .bar.has-bounty { background: #ffaa00; opacity: 0.7; }
.logs-root .histogram .bar.has-bounty { background: var(--warn); opacity: 0.7; }
.logs-root .histogram .bar.has-bounty.selected { background: var(--violet); }
.logs-root .histogram-axis {
display: flex;
@@ -139,7 +139,7 @@
border-radius: 3px;
background: rgba(255, 170, 0, 0.1);
border: 1px solid rgba(255, 170, 0, 0.5);
color: #ffaa00;
color: var(--warn);
cursor: pointer;
font-family: inherit;
}

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

@@ -180,11 +180,11 @@ body.maze-fullscreen .maze-shell {
.maze-net-box.deployed {
border-style: solid;
border-color: var(--matrix);
background: rgba(0, 255, 65, 0.05);
box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.25) inset, var(--matrix-glow);
background: var(--matrix-tint-5);
box-shadow: 0 0 0 1px var(--matrix-tint-30) inset, var(--matrix-glow);
}
.maze-net-box.deployed .maze-net-box-head {
color: var(--matrix); border-bottom-color: rgba(0, 255, 65, 0.45);
color: var(--matrix); border-bottom-color: var(--fg-3);
}
.maze-net-box.deployed.dmz {
border-color: var(--alert);
@@ -266,7 +266,7 @@ body.maze-fullscreen .maze-shell {
.maze-node.deployed {
border-color: var(--matrix);
box-shadow: var(--matrix-glow);
background: rgba(0, 255, 65, 0.04);
background: var(--matrix-tint-5);
}
.maze-node.deployed .mn-head { color: var(--matrix); }
.maze-node.deployed.dmz-gateway {
@@ -543,7 +543,7 @@ body.maze-fullscreen .maze-shell {
.chip.violet { border-color: var(--violet); color: var(--violet); background: var(--violet-tint-10); }
.chip.matrix { border-color: var(--matrix); color: var(--matrix); background: var(--matrix-tint-10); }
.chip.alert { border-color: var(--alert); color: var(--alert); background: var(--alert-tint-10); }
.chip.dim-chip { border-color: var(--border); color: rgba(0, 255, 65, 0.6); background: transparent; }
.chip.dim-chip { border-color: var(--border); color: var(--fg-3); background: transparent; }
.chip-mini {
font-size: 0.55rem;

12
decnet_web/src/components/Orchestrator.css
View File

@@ -55,9 +55,9 @@
box-shadow: 0 0 8px var(--matrix);
animation: orch-pulse 1.4s infinite alternate;
}
.orchestrator-root .status-pill.connecting { color: rgba(0, 255, 65, 0.55); }
.orchestrator-root .status-pill.connecting { color: var(--fg-3); }
.orchestrator-root .status-pill.connecting .dot {
background: rgba(0, 255, 65, 0.55);
background: var(--fg-3);
animation: orch-blink 1s infinite;
}
.orchestrator-root .status-pill.error {
@@ -105,7 +105,7 @@
border: 0;
border-right: 1px solid var(--border);
background: transparent;
color: rgba(0, 255, 65, 0.6);
color: var(--fg-3);
font-family: inherit;
cursor: pointer;
text-transform: uppercase;
@@ -190,7 +190,7 @@
border-bottom: 1px solid rgba(48, 54, 61, 0.4);
vertical-align: middle;
}
.orchestrator-root .logs-table tr:hover td { background: rgba(0, 255, 65, 0.025); }
.orchestrator-root .logs-table tr:hover td { background: var(--matrix-tint-5); }
.orchestrator-root .logs-table tr.fail td {
background: rgba(255, 65, 65, 0.05);
}
@@ -356,8 +356,8 @@
color: var(--violet);
}
.orchestrator-root .orchestrator-drawer .chip.src-shard {
border-color: #ffaa00;
color: #ffaa00;
border-color: var(--warn);
color: var(--warn);
}
.orchestrator-root .orchestrator-drawer .type-label {

10
decnet_web/src/components/Swarm.css
View File

@@ -99,19 +99,19 @@
.control-btn.primary:hover { background: var(--violet); color: #000; box-shadow: var(--violet-glow); }
.control-btn.danger {
border-color: var(--alert, #ff4d4d);
color: var(--alert, #ff4d4d);
border-color: var(--alert, var(--alert));
color: var(--alert, var(--alert));
}
.control-btn.danger:hover {
background: var(--alert, #ff4d4d);
background: var(--alert, var(--alert));
color: #000;
box-shadow: 0 0 10px rgba(255, 77, 77, 0.5);
}
.error-box {
background-color: rgba(255, 77, 77, 0.08);
border: 1px solid #ff4d4d;
color: #ff4d4d;
border: 1px solid var(--alert);
color: var(--alert);
padding: 10px 14px;
margin: 10px 0;
display: flex;

8
decnet_web/src/components/Webhooks.css
View File

@@ -113,7 +113,7 @@
}
.webhooks-root .webhooks-table tbody tr:hover {
background: rgba(0, 255, 65, 0.03);
background: var(--matrix-tint-5);
}
.webhooks-root .webhooks-table .col-check { width: 28px; }
@@ -143,8 +143,8 @@
.webhooks-root .wh-chip {
font-size: 0.66rem;
padding: 2px 7px;
border: 1px solid var(--accent-tint-30, rgba(0, 255, 65, 0.3));
background: var(--accent-tint-10, rgba(0, 255, 65, 0.1));
border: 1px solid var(--accent-tint-30, var(--matrix-tint-30));
background: var(--accent-tint-10, var(--matrix-tint-10));
color: var(--accent);
letter-spacing: 0.5px;
font-family: var(--font-mono);
@@ -237,7 +237,7 @@
.webhooks-root .wh-form-grid textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: var(--accent-glow, 0 0 10px rgba(0, 255, 65, 0.5));
box-shadow: var(--accent-glow, 0 0 10px var(--fg-3));
}
.webhooks-root .wh-checkbox-group {

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. */