Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-06-12 07:53:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/function-strip.css
+12 -12
View File
@@ -36,15 +36,15 @@
flex-direction: column;
align-items: center;
padding: 6px 10px;
background: rgba(74, 158, 255, 0.05);
border: 1px solid rgba(74, 158, 255, 0.15);
background: rgba(var(--accent-cyan-rgb), 0.05);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
border-radius: 4px;
min-width: 55px;
}
.function-strip .strip-stat:hover {
background: rgba(74, 158, 255, 0.1);
border-color: rgba(74, 158, 255, 0.3);
background: rgba(var(--accent-cyan-rgb), 0.1);
border-color: rgba(var(--accent-cyan-rgb), 0.3);
}
.function-strip .strip-value {
@@ -165,8 +165,8 @@
/* Buttons */
.function-strip .strip-btn {
background: rgba(74, 158, 255, 0.1);
border: 1px solid rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.1);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
color: var(--text-primary);
padding: 6px 12px;
border-radius: 4px;
@@ -178,8 +178,8 @@
}
.function-strip .strip-btn:hover:not(:disabled) {
background: rgba(74, 158, 255, 0.2);
border-color: rgba(74, 158, 255, 0.4);
background: rgba(var(--accent-cyan-rgb), 0.2);
border-color: rgba(var(--accent-cyan-rgb), 0.4);
}
.function-strip .strip-btn.primary {
@@ -365,12 +365,12 @@
}
.function-strip.listening-strip .strip-stat {
background: rgba(74, 158, 255, 0.05);
border-color: rgba(74, 158, 255, 0.15);
background: rgba(var(--accent-cyan-rgb), 0.05);
border-color: rgba(var(--accent-cyan-rgb), 0.15);
}
.function-strip.listening-strip .strip-stat:hover {
background: rgba(74, 158, 255, 0.1);
border-color: rgba(74, 158, 255, 0.3);
background: rgba(var(--accent-cyan-rgb), 0.1);
border-color: rgba(var(--accent-cyan-rgb), 0.3);
}
.function-strip.listening-strip .strip-value {
color: var(--accent-cyan);
static/css/components/signal-cards.css
+6 -6
View File
@@ -153,7 +153,7 @@
}
.signal-filter-btn.active .signal-filter-count {
background: rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.2);
color: var(--accent-cyan);
}
@@ -268,7 +268,7 @@
.signal-proto-badge.pocsag {
background: var(--accent-cyan-dim);
color: var(--accent-cyan);
border-color: rgba(74, 158, 255, 0.25);
border-color: rgba(var(--accent-cyan-rgb), 0.25);
}
.signal-proto-badge.flex {
@@ -557,12 +557,12 @@
.signal-action-btn.primary {
background: var(--accent-cyan-dim);
border-color: rgba(74, 158, 255, 0.25);
border-color: rgba(var(--accent-cyan-rgb), 0.25);
color: var(--accent-cyan);
}
.signal-action-btn.primary:hover {
background: rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.2);
}
.signal-action-btn.danger {
@@ -691,8 +691,8 @@
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(74, 158, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(74, 158, 255, 0.08) 1px, transparent 1px);
linear-gradient(rgba(var(--accent-cyan-rgb), 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--accent-cyan-rgb), 0.08) 1px, transparent 1px);
background-size: 14px 14px;
}
static/css/components/toast.css
+2 -2
View File
@@ -501,8 +501,8 @@
}
.update-result-info {
background: rgba(74, 158, 255, 0.1);
border: 1px solid rgba(74, 158, 255, 0.3);
background: rgba(var(--accent-cyan-rgb), 0.1);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
}
.update-result-info .update-result-icon {
static/css/components/ux-platform.css
+10 -10
View File
@@ -7,7 +7,7 @@
gap: 10px;
padding: 8px 14px;
margin: 6px 12px 0;
border: 1px solid rgba(74, 163, 255, 0.32);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.32);
border-radius: 8px;
background: linear-gradient(180deg, rgba(19, 30, 44, 0.96), rgba(11, 18, 28, 0.97));
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -42,7 +42,7 @@
gap: 6px;
padding: 3px 7px;
border-radius: 999px;
border: 1px solid rgba(74, 163, 255, 0.25);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.25);
background: linear-gradient(180deg, rgba(17, 26, 38, 0.82), rgba(12, 18, 28, 0.84));
font-size: 10px;
color: var(--text-secondary, #b1c2d4);
@@ -63,9 +63,9 @@
}
.run-state-chip.active {
border-color: rgba(74, 163, 255, 0.65);
border-color: rgba(var(--accent-cyan-rgb), 0.65);
color: var(--text-primary, #e6edf5);
box-shadow: inset 0 0 0 1px rgba(74, 163, 255, 0.18);
box-shadow: inset 0 0 0 1px rgba(var(--accent-cyan-rgb), 0.18);
}
.run-state-right {
@@ -82,7 +82,7 @@
.run-state-btn {
background: linear-gradient(180deg, rgba(17, 27, 41, 0.9), rgba(10, 16, 25, 0.92));
color: var(--accent-cyan, #4aa3ff);
border: 1px solid rgba(74, 163, 255, 0.45);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.45);
border-radius: 6px;
font-size: 10px;
padding: 4px 8px;
@@ -91,8 +91,8 @@
}
.run-state-btn:hover {
background: rgba(74, 163, 255, 0.14);
border-color: rgba(74, 163, 255, 0.7);
background: rgba(var(--accent-cyan-rgb), 0.14);
border-color: rgba(var(--accent-cyan-rgb), 0.7);
transform: translateY(-1px);
}
@@ -114,7 +114,7 @@
.command-palette {
width: min(760px, 100%);
border: 1px solid rgba(74, 163, 255, 0.32);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.32);
border-radius: 12px;
background: linear-gradient(180deg, rgba(16, 26, 39, 0.98), rgba(10, 17, 27, 0.98));
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -198,7 +198,7 @@
.command-palette-item.active,
.command-palette-item:hover,
.command-palette-item:focus-visible {
background: rgba(74, 163, 255, 0.12);
background: rgba(var(--accent-cyan-rgb), 0.12);
outline: none;
}
@@ -402,7 +402,7 @@
}
.app-toast-actions button:hover {
border-color: rgba(74, 163, 255, 0.5);
border-color: rgba(var(--accent-cyan-rgb), 0.5);
color: var(--text-primary, #e6edf5);
}