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

refactor(theme): migrate shared packages to --color-* token naming

Browse source 
Several shared-ui / shared-auth-ui / subscriptions / credits
components used shadcn-style bare CSS variables (--muted, --primary,
--foreground, etc.), but the Mana theme system standardized on
--color-*. The mismatch meant bg-[hsl(var(--muted))] classes
resolved to an invalid color and rendered transparent — most
visible on the Allgemein settings tab where language and week-start
buttons had no background.

Mechanical prefix across ~30 files. Two semantic renames:
- --destructive → --color-error (Mana uses "error" as the token name)
- --popover     → --color-card  (no popover token; card is the closest)

With shared packages on the correct naming, drop the shadcn-compat
alias shim from app.css.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-15 22:11:42 +02:00
parent 7c89eb625e
commit 6da317d071
27 changed files with 245 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

22
packages/shared-auth-ui/src/components/AuthGate.svelte
View file

@ -113,22 +113,22 @@
{#if tierDenied}
<div
class="flex items-center justify-center min-h-screen p-6"
style:background-color="hsl(var(--background, 0 0% 100%))"
style:background-color="hsl(var(--color-background, 0 0% 100%))"
>
<div
class="max-w-96 w-full text-center py-10 px-8 rounded-2xl border shadow-sm"
style:border-color="hsl(var(--border, 0 0% 90%))"
style:background-color="hsl(var(--card, 0 0% 100%))"
style:border-color="hsl(var(--color-border, 0 0% 90%))"
style:background-color="hsl(var(--color-card, 0 0% 100%))"
>
{#if appName}
<h1 class="text-xl font-bold mb-4" style:color="hsl(var(--foreground, 0 0% 9%))">
<h1 class="text-xl font-bold mb-4" style:color="hsl(var(--color-foreground, 0 0% 9%))">
{appName}
</h1>
{/if}
<div class="text-5xl mb-4">🔒</div>
<p
class="text-[0.9375rem] leading-relaxed mb-6"
style:color="hsl(var(--muted-foreground, 0 0% 45%))"
style:color="hsl(var(--color-muted-foreground, 0 0% 45%))"
>
{locale === 'en'
? `This app is currently in closed `
@ -137,18 +137,18 @@
</p>
<div
class="flex flex-col gap-2 p-4 rounded-xl mb-6"
style:background-color="hsl(var(--muted, 0 0% 96%))"
style:background-color="hsl(var(--color-muted, 0 0% 96%))"
>
<div class="flex justify-between items-center text-sm">
<span style:color="hsl(var(--muted-foreground, 0 0% 45%))"
<span style:color="hsl(var(--color-muted-foreground, 0 0% 45%))"
>{locale === 'en' ? 'Your access:' : 'Dein Zugang:'}</span
>
<span class="font-semibold" style:color="hsl(var(--foreground, 0 0% 9%))"
<span class="font-semibold" style:color="hsl(var(--color-foreground, 0 0% 9%))"
>{userTierLabel}</span
>
</div>
<div class="flex justify-between items-center text-sm">
<span style:color="hsl(var(--muted-foreground, 0 0% 45%))"
<span style:color="hsl(var(--color-muted-foreground, 0 0% 45%))"
>{locale === 'en' ? 'Required:' : 'Benötigt:'}</span
>
<span class="font-semibold text-violet-500">{requiredTierLabel}</span>
@ -156,8 +156,8 @@
</div>
<button
class="w-full py-2.5 px-4 rounded-lg border-none text-sm font-medium cursor-pointer transition-opacity hover:opacity-90"
style:background-color="hsl(var(--primary, 239 84% 67%))"
style:color="hsl(var(--primary-foreground, 0 0% 100%))"
style:background-color="hsl(var(--color-primary, 239 84% 67%))"
style:color="hsl(var(--color-primary-foreground, 0 0% 100%))"
onclick={goHome}
>
{locale === 'en' ? 'Back to overview' : 'Zur Übersicht'}