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

refactor(theming): migrate who semantic colours to theme tokens

Browse source 
PlayView used Tailwind palette classes for game-status feedback:

  bg-emerald-500/10 + text-emerald-300   (won)    → bg-success/10 + text-success
  bg-amber-500/10 + text-amber-300       (lost)   → bg-warning/10 + text-warning
  border-red-500/20 + bg-red-500/10 +
    text-red-300                         (error)  → border-error/20 + bg-error/10 + text-error
  placeholder-white/30 focus:border-purple-400/50 → placeholder:text-muted-foreground/60 focus:border-primary/50

Semantic status now tracks the theme (errors are red in dark, darker red
in light, etc.) instead of being fixed hex ramps.

The `bg-purple-500` / `bg-purple-500/30` / `hover:bg-purple-600` classes
on the user's chat bubble and submit buttons STAY — purple is the who
module's primary identity colour (historical-deck accent `#a855f7` is
semantically the same hue). Documented in brand-literals.md §who.

Also harden two validators against mid-rename states where git ls-files
returns paths that aren't on disk yet — both now skip unreadable files
instead of crashing the pre-commit hook (caught while migrating who).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-22 17:19:53 +02:00
parent eec369bd04
commit 52af8c0cec
4 changed files with 28 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

14
apps/mana/apps/web/src/lib/modules/who/views/PlayView.svelte
View file

@ -163,18 +163,18 @@
{#if game && game.status !== 'playing'}
<div
class="border-b border-border/5 px-4 py-3 {game.status === 'won'
? 'bg-emerald-500/10'
: 'bg-amber-500/10'}"
? 'bg-success/10'
: 'bg-warning/10'}"
>
{#if game.status === 'won'}
<p class="text-sm font-medium text-emerald-300">
<p class="text-sm font-medium text-success">
Erraten in {game.messageCount} Nachrichten!
</p>
<p class="mt-0.5 text-xs text-muted-foreground">
Das war {game.revealedName}.
</p>
{:else}
<p class="text-sm font-medium text-amber-300">Spiel beendet — aufgegeben.</p>
<p class="text-sm font-medium text-warning">Spiel beendet — aufgegeben.</p>
{/if}
</div>
{/if}
@ -214,7 +214,7 @@
</div>
{#if error}
<div class="border-t border-red-500/20 bg-red-500/10 px-3 py-2 text-xs text-red-300">
<div class="border-t border-error/20 bg-error/10 px-3 py-2 text-xs text-error">
{error}
</div>
{/if}
@ -228,7 +228,7 @@
onkeydown={onInputKeydown}
placeholder="Frag mich etwas…"
rows="1"
class="flex-1 resize-none rounded-lg border border-border/10 bg-muted/5 px-3 py-2 text-sm text-foreground placeholder-white/30 focus:border-purple-400/50 focus:outline-none"
class="flex-1 resize-none rounded-lg border border-border/10 bg-muted/5 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/60 focus:border-primary/50 focus:outline-none"
disabled={sending}
></textarea>
<button
@ -282,7 +282,7 @@
bind:value={guessText}
onkeydown={(e) => e.key === 'Enter' && submitGuess()}
placeholder="z.B. Marie Curie"
class="mb-3 w-full rounded-lg border border-border/10 bg-muted/5 px-3 py-2 text-sm text-foreground placeholder-white/30 focus:border-purple-400/50 focus:outline-none"
class="mb-3 w-full rounded-lg border border-border/10 bg-muted/5 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/60 focus:border-primary/50 focus:outline-none"
autofocus
/>
<div class="flex justify-end gap-2">