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(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

8
packages/credits/src/web/CreditBalance.svelte
View file

@ -144,7 +144,7 @@
transition: all 0.15s ease;
font-size: 0.875rem;
font-weight: 600;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
:global(.dark) .credit-balance__button {
@ -235,7 +235,7 @@
margin: 0;
font-size: 0.875rem;
font-weight: 600;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
}
.credit-balance__total {
@ -247,13 +247,13 @@
.credit-balance__value--large {
font-size: 1.5rem;
font-weight: 700;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
.credit-balance__free {
margin: 0 0 0.75rem 0;
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
}
.credit-balance__warning {

14
packages/credits/src/web/CreditPricingTable.svelte
View file

@ -177,14 +177,14 @@
margin: 0 0 1rem 0;
font-size: 1.125rem;
font-weight: 700;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
.pricing-table__empty {
margin: 0;
padding: 1rem;
text-align: center;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
font-size: 0.875rem;
}
@ -219,7 +219,7 @@
margin: 0;
font-size: 0.8125rem;
font-weight: 600;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
text-transform: uppercase;
letter-spacing: 0.025em;
}
@ -236,7 +236,7 @@
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-size: 0.75rem;
font-weight: 600;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
text-transform: uppercase;
letter-spacing: 0.025em;
}
@ -276,12 +276,12 @@
.pricing-table__item-name {
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
.pricing-table__item-description {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
}
.pricing-table__item-cost {
@ -305,7 +305,7 @@
padding-top: 0.75rem;
border-top: 1px solid rgba(0, 0, 0, 0.05);
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
}
:global(.dark) .pricing-table__footer {

8
packages/credits/src/web/CreditToast.svelte
View file

@ -195,7 +195,7 @@
margin: 0 0 0.25rem 0;
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -222,7 +222,7 @@
}
.credit-toast__remaining {
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
}
.credit-toast__dismiss {
@ -235,7 +235,7 @@
padding: 0;
border: none;
background: transparent;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
cursor: pointer;
border-radius: 0.25rem;
transition: all 0.15s ease;
@ -243,7 +243,7 @@
.credit-toast__dismiss:hover {
background: rgba(0, 0, 0, 0.05);
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
:global(.dark) .credit-toast__dismiss:hover {