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

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

6
packages/subscriptions/src/BillingToggle.svelte
View file

@ -75,7 +75,7 @@
background: transparent;
cursor: pointer;
transition: all 0.2s ease;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
}
.billing-toggle__button--yearly {
@ -84,7 +84,7 @@
.billing-toggle__button--active {
background: rgba(255, 255, 255, 0.9);
color: hsl(var(--primary, 221 83% 53%));
color: hsl(var(--color-primary, 221 83% 53%));
font-weight: 600;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
@ -111,6 +111,6 @@
font-size: 0.75rem;
font-weight: 600;
color: white;
background: hsl(var(--primary, 221 83% 53%));
background: hsl(var(--color-primary, 221 83% 53%));
}
</style>

8
packages/subscriptions/src/CostCard.svelte
View file

@ -75,7 +75,7 @@
margin: 0 0 1rem 0;
font-size: 1.25rem;
font-weight: 700;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
.cost-card__list {
@ -99,19 +99,19 @@
width: 1.125rem;
height: 1.125rem;
margin-right: 0.5rem;
color: hsl(var(--primary, 221 83% 53%));
color: hsl(var(--color-primary, 221 83% 53%));
}
.cost-card__action {
margin: 0;
font-size: 0.875rem;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
}
.cost-card__cost {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
</style>

14
packages/subscriptions/src/PackageCard.svelte
View file

@ -132,7 +132,7 @@
}
.package-card--popular {
border: 2px solid hsl(var(--primary, 221 83% 53%));
border: 2px solid hsl(var(--color-primary, 221 83% 53%));
}
.package-card__badge {
@ -144,7 +144,7 @@
font-size: 0.625rem;
font-weight: 600;
color: white;
background: hsl(var(--primary, 221 83% 53%));
background: hsl(var(--color-primary, 221 83% 53%));
z-index: 1;
}
@ -153,7 +153,7 @@
text-align: center;
font-size: 1.125rem;
font-weight: 600;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
.package-card__grid {
@ -191,7 +191,7 @@
margin: 0 0 0.125rem 0;
font-size: 1.25rem;
font-weight: 700;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
white-space: nowrap;
}
@ -199,21 +199,21 @@
margin: 0;
font-size: 1rem;
font-weight: 700;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
white-space: nowrap;
}
.package-card__label {
margin: 0;
font-size: 0.625rem;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
text-align: center;
}
.package-card__sublabel {
margin: 0.125rem 0 0 0;
font-size: 0.5rem;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
}
@media (min-width: 640px) {

8
packages/subscriptions/src/SubscriptionButton.svelte
View file

@ -80,7 +80,7 @@
.subscription-button--primary {
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.1);
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
:global(.dark) .subscription-button--primary {
@ -99,7 +99,7 @@
.subscription-button--secondary {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
:global(.dark) .subscription-button--secondary {
@ -116,8 +116,8 @@
}
.subscription-button--accent {
background: hsl(var(--primary, 221 83% 53%));
border: 1px solid hsl(var(--primary, 221 83% 53%));
background: hsl(var(--color-primary, 221 83% 53%));
border: 1px solid hsl(var(--color-primary, 221 83% 53%));
color: white;
}

16
packages/subscriptions/src/SubscriptionCard.svelte
View file

@ -163,11 +163,11 @@
}
.subscription-card--current {
border: 2px solid hsl(var(--primary, 221 83% 53%));
border: 2px solid hsl(var(--color-primary, 221 83% 53%));
}
.subscription-card--popular {
border: 2px solid hsl(var(--primary, 221 83% 53%));
border: 2px solid hsl(var(--color-primary, 221 83% 53%));
}
.subscription-card__badge {
@ -178,7 +178,7 @@
font-size: 0.625rem;
font-weight: 600;
color: white;
background: hsl(var(--primary, 221 83% 53%));
background: hsl(var(--color-primary, 221 83% 53%));
z-index: 1;
}
@ -195,7 +195,7 @@
text-align: center;
font-size: 1.125rem;
font-weight: 600;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
.subscription-card__grid {
@ -233,7 +233,7 @@
margin: 0 0 0.25rem 0;
font-size: 1.25rem;
font-weight: 700;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
white-space: nowrap;
}
@ -241,21 +241,21 @@
margin: 0;
font-size: 1rem;
font-weight: 700;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
white-space: nowrap;
}
.subscription-card__label {
margin: 0;
font-size: 0.625rem;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
text-align: center;
}
.subscription-card__sublabel {
margin: 0.125rem 0 0 0;
font-size: 0.5rem;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
}
@media (min-width: 640px) {

8
packages/subscriptions/src/UsageCard.svelte
View file

@ -116,7 +116,7 @@
margin: 0;
font-size: 1.25rem;
font-weight: 700;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
.usage-card__value-wrapper {
@ -139,7 +139,7 @@
margin: 0;
font-size: 1.25rem;
font-weight: 700;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
}
.usage-card__progress-track {
@ -171,7 +171,7 @@
margin: 0;
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
}
.usage-card__plan {
@ -189,6 +189,6 @@
text-align: center;
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
}
</style>

8
packages/subscriptions/src/pages/SubscriptionPage.svelte
View file

@ -195,7 +195,7 @@
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
color: hsl(var(--primary, 221 83% 53%));
color: hsl(var(--color-primary, 221 83% 53%));
}
:global(.dark) .subscription-page__icon {
@ -206,13 +206,13 @@
.subscription-page__title {
font-size: 1.875rem;
font-weight: 600;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
margin: 0 0 0.75rem 0;
}
.subscription-page__subtitle {
font-size: 1rem;
color: hsl(var(--muted-foreground));
color: hsl(var(--color-muted-foreground));
margin: 0;
}
@ -223,7 +223,7 @@
.subscription-page__section-title {
font-size: 1.25rem;
font-weight: 600;
color: hsl(var(--foreground));
color: hsl(var(--color-foreground));
margin: 0 0 1.5rem 0;
}