till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 20:21: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'} {#if game && game.status !== 'playing'}
<div <div
class="border-b border-border/5 px-4 py-3 {game.status === 'won' class="border-b border-border/5 px-4 py-3 {game.status === 'won'
? 'bg-emerald-500/10' ? 'bg-success/10'
: 'bg-amber-500/10'}" : 'bg-warning/10'}"
> >
{#if game.status === 'won'} {#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! Erraten in {game.messageCount} Nachrichten!
</p> </p>
<p class="mt-0.5 text-xs text-muted-foreground"> <p class="mt-0.5 text-xs text-muted-foreground">
Das war {game.revealedName}. Das war {game.revealedName}.
</p> </p>
{:else} {: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} {/if}
</div> </div>
{/if} {/if}
@ -214,7 +214,7 @@
</div> </div>
{#if error} {#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} {error}
</div> </div>
{/if} {/if}
@ -228,7 +228,7 @@
onkeydown={onInputKeydown} onkeydown={onInputKeydown}
placeholder="Frag mich etwas…" placeholder="Frag mich etwas…"
rows="1" 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} disabled={sending}
></textarea> ></textarea>
<button <button
@ -282,7 +282,7 @@
bind:value={guessText} bind:value={guessText}
onkeydown={(e) => e.key === 'Enter' && submitGuess()} onkeydown={(e) => e.key === 'Enter' && submitGuess()}
placeholder="z.B. Marie Curie" 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 autofocus
/> />
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">

7
packages/shared-tailwind/brand-literals.md
View file

@ -49,9 +49,10 @@ Files: `lib/modules/citycorners/types.ts`
### `who` — historical-persona guessing game ### `who` — historical-persona guessing game
| Purpose | Colors | Why literal | | Purpose | Colors | Why literal |
| ------------ | ------------------------------------------------------------------------------- | ------------------------------------------------------------ | | -------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Deck accents | `#a855f7` historical, `#ec4899` women, `#f59e0b` antiquity, `#0ea5e9` inventors | Per-deck identity; colour primes the player about era/theme. | | Deck accents | `#a855f7` historical, `#ec4899` women, `#f59e0b` antiquity, `#0ea5e9` inventors | Per-deck identity; colour primes the player about era/theme. |
| User chat bubble + submit button | `bg-purple-500/30`, `bg-purple-500`, `hover:bg-purple-600` | Module's primary identity colour (ties to the historical deck); stays literal across themes. Semantic status colours (won/surrendered/error) migrated to `success`/`warning`/`error` tokens. |
Files: `lib/modules/who/ListView.svelte`, `lib/modules/who/views/PlayView.svelte` Files: `lib/modules/who/ListView.svelte`, `lib/modules/who/views/PlayView.svelte`

10
scripts/validate-theme-parity.mjs
View file

@ -127,7 +127,15 @@ function mergeBlocks(blocks) {
} }
function validate() { function validate() {
const src = readFileSync(THEMES_CSS, 'utf8'); let src;
try {
src = readFileSync(THEMES_CSS, 'utf8');
} catch {
// themes.css not on disk (e.g. mid-rename). Skip silently so we
// don't block commits for files in transit.
console.log('✓ Theme parity: themes.css not readable — skipped.');
return;
}
const blocks = mergeBlocks(parseBlocks(src)); const blocks = mergeBlocks(parseBlocks(src));
if (!blocks.has(':root')) { if (!blocks.has(':root')) {

9
scripts/validate-theme-utilities.mjs
View file

@ -100,7 +100,14 @@ function validate() {
for (const rel of paths) { for (const rel of paths) {
const abs = join(REPO_ROOT, rel); const abs = join(REPO_ROOT, rel);
const src = readFileSync(abs, 'utf8'); // Skip files that git knows about but haven't landed on disk yet —
// common mid-rename/mid-move state in multi-terminal sessions.
let src;
try {
src = readFileSync(abs, 'utf8');
} catch {
continue;
}
const lines = src.split('\n'); const lines = src.split('\n');
const brandOverlay = BRAND_OVERLAY_FILES.has(rel); const brandOverlay = BRAND_OVERLAY_FILES.has(rel);