From 5c41ebea3377a6489c599b5cb448454b410e5d71 Mon Sep 17 00:00:00 2001 From: Till JS Date: Thu, 9 Apr 2026 12:34:32 +0200 Subject: [PATCH] style(mana/web/automations): migrate ListView to theme tokens (P5) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Wraps all `var(--color-X)` references with `hsl()` and routes the muted backgrounds + borders through `--color-card` / `--color-border` instead of the rgba-on-white fallbacks. The brand violet (#8b5cf6) automations accent and the deliberate when/filter/then flow-step palette (blue/amber/green) stay literal — they encode trigger/condition/action semantics, not theme intent. Last file from the original P5 ListView migration list. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../lib/modules/automations/ListView.svelte | 72 ++++++++++--------- 1 file changed, 40 insertions(+), 32 deletions(-) diff --git a/apps/mana/apps/web/src/lib/modules/automations/ListView.svelte b/apps/mana/apps/web/src/lib/modules/automations/ListView.svelte index ef9bbb033..54e570510 100644 --- a/apps/mana/apps/web/src/lib/modules/automations/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/automations/ListView.svelte @@ -389,10 +389,11 @@ font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } /* ── Buttons ──────────────────────────── */ + /* Brand violet (#8b5cf6) is the automations module accent — kept literal */ .btn-sm { padding: 0.3125rem 0.625rem; border-radius: 0.375rem; @@ -416,8 +417,8 @@ } .btn-sm.outline { background: transparent; - border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.15)); - color: var(--color-muted-foreground); + border: 1px dashed hsl(var(--color-border)); + color: hsl(var(--color-muted-foreground)); } .btn-sm.outline:hover { border-color: #8b5cf6; @@ -425,10 +426,10 @@ } .btn-sm.ghost { background: transparent; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .btn-sm.ghost:hover { - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .icon-btn { @@ -439,11 +440,11 @@ border-radius: 0.25rem; opacity: 0; transition: all 0.15s; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .icon-btn.danger:hover { - color: #ef4444; - background: rgba(239, 68, 68, 0.1); + color: hsl(var(--color-error)); + background: hsl(var(--color-error) / 0.1); } /* ── Suggestion Cards ─────────────────── */ @@ -453,8 +454,12 @@ gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem; - background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02)); - border: 1px solid rgba(245, 158, 11, 0.15); + background: linear-gradient( + 135deg, + hsl(var(--color-warning) / 0.06), + hsl(var(--color-warning) / 0.02) + ); + border: 1px solid hsl(var(--color-warning) / 0.15); } .sug-left { @@ -474,12 +479,12 @@ .sug-title { font-size: 0.75rem; font-weight: 600; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); } .sug-desc { font-size: 0.6875rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); line-height: 1.3; } @@ -496,12 +501,12 @@ gap: 0.375rem; padding: 0.625rem 0.75rem; border-radius: 0.625rem; - background: var(--color-surface, rgba(255, 255, 255, 0.03)); - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.06)); + background: hsl(var(--color-card)); + border: 1px solid hsl(var(--color-border)); transition: all 0.15s; } .auto-card:hover { - border-color: rgba(139, 92, 246, 0.2); + border-color: color-mix(in srgb, #8b5cf6 20%, transparent); } .auto-card:hover .icon-btn { opacity: 1; @@ -520,7 +525,7 @@ flex: 1; font-size: 0.8125rem; font-weight: 600; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -539,7 +544,7 @@ width: 28px; height: 16px; border-radius: 9999px; - background: var(--color-border, rgba(255, 255, 255, 0.15)); + background: hsl(var(--color-border)); position: relative; transition: background 0.2s; } @@ -577,27 +582,29 @@ text-transform: uppercase; letter-spacing: 0.04em; } + /* When/filter/then accents are deliberate flow-step colors (blue/amber/green), + not theme tokens — they encode trigger/condition/action semantics. */ .flow-chip.when { - background: rgba(59, 130, 246, 0.12); + background: rgb(59 130 246 / 0.12); color: #60a5fa; } .flow-chip.filter { - background: rgba(245, 158, 11, 0.12); + background: rgb(245 158 11 / 0.12); color: #fbbf24; } .flow-chip.then { - background: rgba(34, 197, 94, 0.12); + background: rgb(34 197 94 / 0.12); color: #4ade80; } .flow-detail { font-size: 0.6875rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .flow-arrow { font-size: 0.625rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); opacity: 0.4; } @@ -608,8 +615,8 @@ gap: 0.5rem; padding: 0.75rem; border-radius: 0.75rem; - background: var(--color-surface, rgba(255, 255, 255, 0.04)); - border: 1px solid rgba(139, 92, 246, 0.2); + background: hsl(var(--color-card)); + border: 1px solid color-mix(in srgb, #8b5cf6 20%, transparent); } .form-step { @@ -628,16 +635,17 @@ flex-shrink: 0; margin-top: 0.3125rem; } + /* Same flow-step palette as flow-chip — kept literal */ .step-badge.when { - background: rgba(59, 130, 246, 0.12); + background: rgb(59 130 246 / 0.12); color: #60a5fa; } .step-badge.filter { - background: rgba(245, 158, 11, 0.12); + background: rgb(245 158 11 / 0.12); color: #fbbf24; } .step-badge.then { - background: rgba(34, 197, 94, 0.12); + background: rgb(34 197 94 / 0.12); color: #4ade80; } @@ -653,9 +661,9 @@ .form-select { padding: 0.375rem 0.5rem; border-radius: 0.375rem; - border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); + border: 1px solid hsl(var(--color-border)); background: transparent; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); font-size: 0.75rem; outline: none; width: 100%; @@ -668,7 +676,7 @@ border-color: #8b5cf6; } .form-input::placeholder { - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); } .form-select.narrow { width: auto; @@ -693,12 +701,12 @@ .empty-title { font-size: 0.8125rem; font-weight: 500; - color: var(--color-foreground); + color: hsl(var(--color-foreground)); margin: 0; } .empty-hint { font-size: 0.75rem; - color: var(--color-muted-foreground); + color: hsl(var(--color-muted-foreground)); margin: 0 0 0.5rem; }