mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 20:21:09 +02:00
refactor(cards): Phase A + C — adopt @mana/shared-theme + per-app accent
Phase A — Cards joins the unified theme system:
- Drop placeholder --color-cards-* palette; app.css imports
@mana/shared-tailwind/themes.css + sources.css.
- Remove hardcoded class="dark" from app.html; body uses
bg-background text-foreground.
- New $lib/stores/theme.ts: createThemeStore({ appId: 'cards' }).
ThemeToggle from @mana/shared-theme-ui in the header next to
the streak chip.
- Sweep all neutral / red / emerald / amber / indigo utilities in
apps/cards/apps/web/src to semantic tokens (560 substitutions
across 19 files): bg-neutral-900 → bg-card, text-neutral-400 →
text-muted-foreground, bg-red-500 → bg-error, etc. Domain
literals kept (FSRS grade colors red/orange/green/blue, GitHub-
violet PR-merged badge, marketplace-amber Buy button, admin-
inbox category palette).
- Cards added to validate-theme-utilities scope so future drift
fails CI.
Phase C — per-app accent token:
- New --color-app-accent in shared-tailwind/themes.css. Theme-
agnostic (registered in validate-theme-parity's THEME_AGNOSTIC
regex), so it stays the same across light/dark/lume/etc. Defaults
to Mana indigo at :root.
- Cards layout writes 258 90% 66% (= #8b5cf6 violet, from
MANA_APPS.cards.color) onto documentElement at boot via
applyCardsAccent(). All Cards CTAs (Lernen, Abonnieren, Senden,
links inside cloze cards) flow through bg-app-accent /
text-app-accent now.
Net effect: Cards gets light/dark + 4 palette variants + a11y
toggles for free, and any future app can drop in by setting its
own --color-app-accent without touching shared-tailwind.
This commit is contained in:
parent
863311eefa
commit
ad3b99fe6d
28 changed files with 589 additions and 583 deletions
|
|
@ -98,6 +98,13 @@
|
|||
--color-card-foreground: hsl(var(--color-card-foreground) / <alpha-value>);
|
||||
--color-accent: hsl(var(--color-accent) / <alpha-value>);
|
||||
--color-accent-foreground: hsl(var(--color-accent-foreground) / <alpha-value>);
|
||||
|
||||
/* Per-app brand accent — set by the host app's layout via
|
||||
`style="--color-app-accent: <H S% L%>"` on documentElement.
|
||||
Theme-agnostic: stays the same across light/dark/lume/etc. so
|
||||
the app's identity reads consistently. Defaults to Mana brand
|
||||
below in :root if no host overrides. */
|
||||
--color-app-accent: hsl(var(--color-app-accent) / <alpha-value>);
|
||||
}
|
||||
|
||||
@theme {
|
||||
|
|
@ -170,6 +177,13 @@
|
|||
--color-branch-social: 38 92% 50%; /* amber — warmth, relationships */
|
||||
--color-branch-practical: 173 80% 40%; /* teal — craft, tools */
|
||||
--color-branch-mindset: 142 71% 45%; /* green — calm, growth */
|
||||
|
||||
/* Per-app brand accent default — Mana indigo. Host apps override
|
||||
at runtime by writing `--color-app-accent: <H S% L%>` onto
|
||||
documentElement, typically from MANA_APPS[<id>].color via the
|
||||
hexToHsl() helper in @mana/shared-theme/utils. Theme-agnostic:
|
||||
not redefined in .dark / [data-theme="…"] blocks. */
|
||||
--color-app-accent: 239 84% 67%;
|
||||
}
|
||||
|
||||
/* ===== Default Theme (Lume Light) ===== */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue