fix: introduce --accent-cyan-rgb to make all opacity variants theme-aware

All files used hardcoded rgba(74, 163/158, 255, X) values in actual CSS
rules that CSS variable overrides couldn't touch. Solution: add
--accent-cyan-rgb triplet to variables.css root/light/enhanced blocks,
then replace every rgba(74,1xx,255,) occurrence across all CSS files
with rgba(var(--accent-cyan-rgb),). Enhanced tier sets the triplet to
200, 150, 40 (amber), so tscm.css panel bg, index.css card borders,
and all other tinted surfaces go amber automatically.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
James Smith
2026-05-20 08:53:25 +01:00
parent 9d41ffbb59
commit 5100f55586
20 changed files with 250 additions and 247 deletions
+4 -4
View File
@@ -136,7 +136,7 @@
============================================ */
.card {
background: var(--surface-panel-gradient);
border: 1px solid rgba(74, 163, 255, 0.24);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.24);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -147,7 +147,7 @@
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid rgba(74, 163, 255, 0.18);
border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
background: linear-gradient(180deg, rgba(25, 38, 55, 0.88) 0%, rgba(17, 27, 40, 0.9) 100%);
position: relative;
}
@@ -173,7 +173,7 @@
/* Panel variant (used in dashboards) */
.panel {
background: var(--surface-panel-gradient);
border: 1px solid rgba(74, 163, 255, 0.24);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.24);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -202,7 +202,7 @@
align-items: center;
justify-content: space-between;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid rgba(74, 163, 255, 0.18);
border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
background: linear-gradient(180deg, rgba(25, 38, 55, 0.88) 0%, rgba(17, 27, 40, 0.9) 100%);
font-size: var(--text-xs);
font-weight: var(--font-semibold);