root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-890): tokenized executor footer state backgrounds and accents

Browse Source 
- Replace hardcoded hex colors in executor status bar CSS with CSS custom properties for state backgrounds and accents
- Add tests covering theme-aware CSS variable overrides for all executor states (idle, running, failed, etc.)
- Document the executor status bar theming in the dashboard README
This commit is contained in:
gsxdsm
2026-04-04 16:39:55 -07:00
parent 2363500ea5
commit b4ed704a03
3 changed files with 183 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/dashboard/app/styles.css
View File

@@ -101,6 +101,10 @@
--color-error-dark: #da3633;
--color-muted: #8b949e;
/* Executor status bar state accents */
--executor-status-running-bg: color-mix(in srgb, var(--color-success) 8%, transparent);
--executor-status-error-bg: color-mix(in srgb, var(--color-error) 8%, transparent);
/* Logo & branding tokens */
--logo-accent: var(--todo);
@@ -8150,6 +8154,10 @@ html .column.drag-over * {
--color-error: #cf222e;
--color-muted: #6e7781;
/* Executor status bar state accents (lower intensity for light backgrounds) */
--executor-status-running-bg: color-mix(in srgb, var(--color-success) 6%, transparent);
--executor-status-error-bg: color-mix(in srgb, var(--color-error) 6%, transparent);
/* Changed-file status colors (adjusted for light backgrounds) */
--status-color-added: #1a7f37;
--status-color-modified: #0969da;
@@ -15547,11 +15555,11 @@ html .column.drag-over * {
/* State variants */
.executor-status-bar--running {
background: linear-gradient(to right, rgba(63, 185, 80, 0.08), transparent);
background: linear-gradient(to right, var(--executor-status-running-bg), transparent);
}
.executor-status-bar--error {
background: rgba(248, 81, 73, 0.08);
background: var(--executor-status-error-bg);
}
.executor-status-bar--loading {
@@ -15729,14 +15737,6 @@ html .column.drag-over * {
border-top-color: var(--border);
}
[data-theme="light"] .executor-status-bar--running {
background: linear-gradient(to right, rgba(46, 160, 67, 0.06), transparent);
}
[data-theme="light"] .executor-status-bar--error {
background: rgba(248, 81, 73, 0.06);
}
[data-theme="light"] .executor-status-bar__count {
color: var(--text);
}