From 919756fc185f4e755aed74aa688c187538c615fb Mon Sep 17 00:00:00 2001 From: Chuck Smith Date: Tue, 26 May 2026 16:55:03 -0400 Subject: [PATCH] =?UTF-8?q?chore:=20CSS=20audit=20=E2=80=94=20dark=20mode?= =?UTF-8?q?=20badge=20overrides=20and=20surface-hover=20variable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- CHANGELOG.md | 6 +++- ROADMAP.md | 1 - .../stylesheets/solid_stack_web/_01_base.css | 5 +-- .../stylesheets/solid_stack_web/_04_table.css | 2 +- .../solid_stack_web/_12_dark_mode.css | 36 ++++++++++++------- 5 files changed, 33 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 88ea4c1..0a48eca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Responsive layout — stats cards, gem grid, and tables adapt to narrow viewports; two-column grids (cache size, cache timeline) collapse to single column at 768px; tables scroll horizontally at 640px; split page headers stack vertically; main padding and header padding reduce on small screens +- Responsive layout + +### Fixed + +- CSS audit — badge colours now respond to dark mode via `[data-theme="dark"]` overrides; table row hover uses `--surface-hover` CSS variable instead of a hardcoded hex value; `--surface-hover` added to `:root` and dark mode token set — stats cards, gem grid, and tables adapt to narrow viewports; two-column grids (cache size, cache timeline) collapse to single column at 768px; tables scroll horizontally at 640px; split page headers stack vertically; main padding and header padding reduce on small screens - Empty-state improvements — all list views now show a contextual title and an actionable hint; search result empty states include a "Clear search" link; history and stats link to active jobs; processes and recurring tasks explain what to do next - Inline notifications — bulk and single-job actions now surface a flash notice; Turbo Stream discard responses prepend the message to the page without a full reload; bulk discard/retry counts are shown ("3 jobs discarded") - Dark mode — toggle button in the header switches between light and dark palettes; preference persisted in `localStorage`; respects `prefers-color-scheme` on first visit; driven entirely by CSS custom properties on `[data-theme="dark"]` diff --git a/ROADMAP.md b/ROADMAP.md index 4d0e44a..44fc855 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -11,7 +11,6 @@ The path to v1.0.0 is staged: first achieve feature parity with `solid_queue_das > _Make the interface feel fast and operational, not just functional._ ### Added -- **CSS audit** — review all inline styles, consolidate utility classes, remove duplication, and enforce consistent use of CSS custom properties across all stylesheets --- diff --git a/app/assets/stylesheets/solid_stack_web/_01_base.css b/app/assets/stylesheets/solid_stack_web/_01_base.css index d423632..2742876 100644 --- a/app/assets/stylesheets/solid_stack_web/_01_base.css +++ b/app/assets/stylesheets/solid_stack_web/_01_base.css @@ -12,8 +12,9 @@ --success: #198754; --info: #0dcaf0; --purple: #6f42c1; - --radius: 6px; - --shadow: 0 1px 3px rgba(0,0,0,.08); + --radius: 6px; + --shadow: 0 1px 3px rgba(0,0,0,.08); + --surface-hover: #f9fafb; } body { diff --git a/app/assets/stylesheets/solid_stack_web/_04_table.css b/app/assets/stylesheets/solid_stack_web/_04_table.css index 0b1ce4e..732e72b 100644 --- a/app/assets/stylesheets/solid_stack_web/_04_table.css +++ b/app/assets/stylesheets/solid_stack_web/_04_table.css @@ -25,7 +25,7 @@ } .sqw-table tbody tr:last-child td { border-bottom: none; } -.sqw-table tbody tr:hover { background: #f9fafb; } +.sqw-table tbody tr:hover { background: var(--surface-hover); } .sqw-actions { text-align: right; white-space: nowrap; } .sqw-actions form { display: inline; } diff --git a/app/assets/stylesheets/solid_stack_web/_12_dark_mode.css b/app/assets/stylesheets/solid_stack_web/_12_dark_mode.css index 03bb0e4..bd30ea5 100644 --- a/app/assets/stylesheets/solid_stack_web/_12_dark_mode.css +++ b/app/assets/stylesheets/solid_stack_web/_12_dark_mode.css @@ -1,18 +1,30 @@ [data-theme="dark"] { - --bg: #0d1117; - --surface: #161b22; - --border: #30363d; - --text: #e6edf3; - --muted: #8b949e; - --primary: #58a6ff; - --danger: #f85149; - --warning: #d29922; - --success: #3fb950; - --info: #39c5cf; - --purple: #bc8cff; - --shadow: 0 1px 3px rgba(0,0,0,.4); + --bg: #0d1117; + --surface: #161b22; + --border: #30363d; + --text: #e6edf3; + --muted: #8b949e; + --primary: #58a6ff; + --danger: #f85149; + --warning: #d29922; + --success: #3fb950; + --info: #39c5cf; + --purple: #bc8cff; + --shadow: 0 1px 3px rgba(0,0,0,.4); + --surface-hover: #1c2128; } +[data-theme="dark"] .sqw-badge--ready { background: rgba(63,185,80,.15); color: var(--success); } +[data-theme="dark"] .sqw-badge--scheduled { background: rgba(57,197,207,.15); color: var(--info); } +[data-theme="dark"] .sqw-badge--claimed { background: rgba(88,166,255,.15); color: var(--primary); } +[data-theme="dark"] .sqw-badge--blocked { background: rgba(210,153,34,.15); color: var(--warning); } +[data-theme="dark"] .sqw-badge--failed { background: rgba(248,81,73,.15); color: var(--danger); } +[data-theme="dark"] .sqw-badge--paused { background: rgba(139,148,158,.15); color: var(--muted); } +[data-theme="dark"] .sqw-badge--queue { background: rgba(139,148,158,.15); color: var(--muted); } +[data-theme="dark"] .sqw-badge--worker { background: rgba(88,166,255,.15); color: var(--primary); } +[data-theme="dark"] .sqw-badge--supervisor { background: rgba(63,185,80,.15); color: var(--success); } +[data-theme="dark"] .sqw-badge--dispatcher { background: rgba(210,153,34,.15); color: var(--warning); } + [data-theme="dark"] .sqw-flash--notice { background: #1b3a2b; color: #3fb950; border-color: #2d6a4f; } [data-theme="dark"] .sqw-flash--alert { background: #3d1118; color: #f85149; border-color: #6a2030; }