till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 21:21:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

style(mana/web/automations): migrate ListView to theme tokens (P5)

Browse source 
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) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-09 12:34:32 +02:00
parent 7f6b41654e
commit 5c41ebea33
1 changed files with 40 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

72
apps/mana/apps/web/src/lib/modules/automations/ListView.svelte
View file

@ -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;
}