From 86c205ffc5dac0fba8f0bb71a64bb9b4805c4fb6 Mon Sep 17 00:00:00 2001 From: Till JS Date: Wed, 22 Apr 2026 15:29:43 +0200 Subject: [PATCH] refactor(theming): migrate remaining 12 ListViews to theme tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace raw white-alpha Tailwind utilities across the last 12 module ListViews that were flagged by validate-theme-tokens: citycorners, guides, inventory, memoro, picture, plants, playground, presi, questions, times, uload, who. Also replace semantic color hex/names (bg-yellow-500/20, bg-green-400, text-blue-400, bg-teal-600, etc.) with success/warning/error/primary tokens. Per-deck brand colors in who/ListView (#a855f7 purple/historical, #ec4899 pink/women, #f59e0b amber/antiquity, #0ea5e9 blue/inventors) stay as hex — those are domain semantics, not theme intent. Wire validate:theme-tokens into validate:all so future regressions fail the local pre-push gate. All 76 module ListViews now pass. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../lib/modules/citycorners/ListView.svelte | 11 +++--- .../src/lib/modules/guides/ListView.svelte | 36 +++++++++--------- .../src/lib/modules/inventory/ListView.svelte | 8 ++-- .../src/lib/modules/memoro/ListView.svelte | 18 ++++----- .../src/lib/modules/picture/ListView.svelte | 8 ++-- .../src/lib/modules/plants/ListView.svelte | 24 ++++++------ .../lib/modules/playground/ListView.svelte | 24 ++++++------ .../web/src/lib/modules/presi/ListView.svelte | 22 +++++------ .../src/lib/modules/questions/ListView.svelte | 30 ++++++++------- .../web/src/lib/modules/times/ListView.svelte | 22 +++++------ .../web/src/lib/modules/uload/ListView.svelte | 10 ++--- .../web/src/lib/modules/who/ListView.svelte | 38 +++++++++---------- package.json | 2 +- 13 files changed, 129 insertions(+), 124 deletions(-) diff --git a/apps/mana/apps/web/src/lib/modules/citycorners/ListView.svelte b/apps/mana/apps/web/src/lib/modules/citycorners/ListView.svelte index 49786e870..1a3222872 100644 --- a/apps/mana/apps/web/src/lib/modules/citycorners/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/citycorners/ListView.svelte @@ -56,20 +56,21 @@ _siblingIds: locations.map((l) => l.id), _siblingKey: 'locationId', })} - class="flex w-full min-h-[44px] items-start gap-2 rounded-md px-2 py-2 transition-colors hover:bg-white/5 cursor-pointer text-left" + class="flex w-full min-h-[44px] items-start gap-2 rounded-md px-2 py-2 transition-colors hover:bg-muted/50 cursor-pointer text-left" >
-

{location.name}

+

{location.name}

{#if favoriteIds.has(location.id)} - ★ + ★ {/if}
-

+

{categoryLabels[location.category] ?? location.category}

diff --git a/apps/mana/apps/web/src/lib/modules/guides/ListView.svelte b/apps/mana/apps/web/src/lib/modules/guides/ListView.svelte index 9ed17b157..8b9e7a3db 100644 --- a/apps/mana/apps/web/src/lib/modules/guides/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/guides/ListView.svelte @@ -85,7 +85,7 @@ @@ -97,8 +97,8 @@ onclick={() => (activeCategory = cat.id)} class="rounded-full px-3 py-1 text-xs transition-colors {activeCategory === cat.id - ? 'bg-white/15 text-white' - : 'bg-white/5 text-white/50 hover:bg-white/10'}" + ? 'bg-primary/20 text-primary' + : 'bg-muted/30 text-muted-foreground hover:bg-muted'}" > {cat.label} @@ -106,7 +106,7 @@ {/snippet} diff --git a/apps/mana/apps/web/src/lib/modules/memoro/ListView.svelte b/apps/mana/apps/web/src/lib/modules/memoro/ListView.svelte index 61de02c94..572fdf8af 100644 --- a/apps/mana/apps/web/src/lib/modules/memoro/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/memoro/ListView.svelte @@ -58,10 +58,10 @@ } const statusColors: Record = { - pending: 'bg-yellow-500/20 text-yellow-300', - processing: 'bg-blue-500/20 text-blue-300', - completed: 'bg-green-500/20 text-green-300', - failed: 'bg-red-500/20 text-red-300', + pending: 'bg-warning/20 text-warning', + processing: 'bg-primary/20 text-primary', + completed: 'bg-success/20 text-success', + failed: 'bg-error/20 text-error', }; @@ -80,26 +80,26 @@ _siblingIds: sorted.map((m) => m.id), _siblingKey: 'memoId', })} - class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]" + class="mb-2 w-full rounded-md border border-border px-3 py-2.5 text-left transition-colors hover:bg-muted/50 min-h-[44px]" >
{#if memo.isPinned} - 📌 + 📌 {/if} -

+

{memo.title || 'Unbenanntes Memo'}

{#if memo.intro} -

{memo.intro}

+

{memo.intro}

{/if}
{#if memo.transcriptModel && memo.processingStatus === 'completed'} {memo.transcriptModel} diff --git a/apps/mana/apps/web/src/lib/modules/picture/ListView.svelte b/apps/mana/apps/web/src/lib/modules/picture/ListView.svelte index 9429425f8..eceb2ed9f 100644 --- a/apps/mana/apps/web/src/lib/modules/picture/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/picture/ListView.svelte @@ -242,7 +242,7 @@ {/snippet} {#snippet item(image)} -
+
{#if image.publicUrl} {:else} -
+
{image.format ?? 'img'}
{/if} {#if image.isFavorite} - ★ + ★ {/if}
{/snippet} @@ -334,7 +334,7 @@ object-fit: cover; } .upload-thumb.success { - outline: 2px solid #22c55e; + outline: 2px solid hsl(var(--color-success)); outline-offset: -2px; } .upload-thumb.error { diff --git a/apps/mana/apps/web/src/lib/modules/plants/ListView.svelte b/apps/mana/apps/web/src/lib/modules/plants/ListView.svelte index 737630b1b..ecc814d27 100644 --- a/apps/mana/apps/web/src/lib/modules/plants/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/plants/ListView.svelte @@ -74,7 +74,7 @@
{#if creating} - +
@@ -133,20 +135,20 @@ {#if isLoading} {:else} {/if} diff --git a/apps/mana/apps/web/src/lib/modules/presi/ListView.svelte b/apps/mana/apps/web/src/lib/modules/presi/ListView.svelte index d354c676a..20d9c3ff5 100644 --- a/apps/mana/apps/web/src/lib/modules/presi/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/presi/ListView.svelte @@ -57,10 +57,10 @@ d.id} emptyTitle="Keine Präsentationen"> {#snippet toolbar()}
- {decks.length} Präsentationen + {decks.length} Präsentationen
{#if creating} - + {/snippet} diff --git a/apps/mana/apps/web/src/lib/modules/questions/ListView.svelte b/apps/mana/apps/web/src/lib/modules/questions/ListView.svelte index 39f02aa63..6f32e39b9 100644 --- a/apps/mana/apps/web/src/lib/modules/questions/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/questions/ListView.svelte @@ -59,10 +59,10 @@ const collections = $derived(collectionsQuery.value); const statusColors: Record = { - open: 'bg-blue-500/20 text-blue-300', - researching: 'bg-amber-500/20 text-amber-300', - answered: 'bg-green-500/20 text-green-300', - archived: 'bg-white/10 text-white/40', + open: 'bg-primary/20 text-primary', + researching: 'bg-warning/20 text-warning', + answered: 'bg-success/20 text-success', + archived: 'bg-muted text-muted-foreground', }; const statusLabels: Record = { @@ -82,12 +82,12 @@ q.id} emptyTitle="Keine offenen Fragen"> {#snippet toolbar()}
- {questions.length} Fragen · {collections.length} Sammlungen
{#if creating} - + {/snippet} diff --git a/apps/mana/apps/web/src/lib/modules/uload/ListView.svelte b/apps/mana/apps/web/src/lib/modules/uload/ListView.svelte index 3534ed6db..8edf7bc9e 100644 --- a/apps/mana/apps/web/src/lib/modules/uload/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/uload/ListView.svelte @@ -137,17 +137,17 @@ _siblingIds: sorted.map((l) => l.id), _siblingKey: 'linkId', })} - class="mb-1 w-full min-h-[44px] text-left rounded-md px-3 py-2 transition-colors hover:bg-white/5 cursor-pointer" + class="mb-1 w-full min-h-[44px] text-left rounded-md px-3 py-2 transition-colors hover:bg-muted/50 cursor-pointer" >
-

+

{link.title || link.shortCode}

- {link.clickCount} + {link.clickCount}
-

{hostname(link.originalUrl)}

+

{hostname(link.originalUrl)}

{#if link.customCode} -

/{link.customCode}

+

/{link.customCode}

{/if} {/snippet} diff --git a/apps/mana/apps/web/src/lib/modules/who/ListView.svelte b/apps/mana/apps/web/src/lib/modules/who/ListView.svelte index 13ae32f9a..67b0e1d57 100644 --- a/apps/mana/apps/web/src/lib/modules/who/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/who/ListView.svelte @@ -119,25 +119,25 @@
-

Who?

-

+

Who?

+

Errate die historische Persönlichkeit. Eine KI verkörpert sie ohne den Namen zu verraten.

-

+

Neues Spiel starten

{#if loadingDecks}
{#each Array(4) as _, i (i)} -
+
{/each}
{:else if decks.length === 0} -

Keine Decks verfügbar.

+

Keine Decks verfügbar.

{:else}
{#each decks as deck (deck.id)} @@ -145,23 +145,23 @@ type="button" onclick={() => startGame(deck.id)} disabled={starting !== null} - class="group flex flex-col items-start gap-2 rounded-lg border border-white/10 bg-white/[0.02] p-4 text-left transition hover:border-white/20 hover:bg-white/[0.05] disabled:cursor-wait disabled:opacity-50" + class="group flex flex-col items-start gap-2 rounded-lg border border-border bg-muted/20 p-4 text-left transition hover:border-border-strong hover:bg-muted/40 disabled:cursor-wait disabled:opacity-50" style="border-left: 3px solid {deckColor(deck.id)}" >
- {deck.name.de} + {deck.name.de} {difficultyLabel(deck.difficulty)}
-

{deck.description.de}

-

+

{deck.description.de}

+

{deck.characterCount} Personen · {deck.categories.join(', ')}

{#if starting === deck.id} -

Starte…

+

Starte…

{/if} {/each} @@ -172,30 +172,30 @@ {#if games.length > 0}
-

+

Vergangene Spiele

-
    +
      {#each games as game (game.id)}
    • {statusEmoji(game.status)}