d7f3b93996
Some checks are pending
CI / validate (push) Waiting to run
@mana/shared-ui-2@0.1.0 wurde heute publiziert. Cards' einziger shared-ui-Konsument war PillTabGroup im Header (Routen-Nav + DE/EN-Switcher). Drop-in-Migration: - apps/web/package.json: @mana/shared-ui + @mana/shared-icons raus (letzteres war nur shared-ui-Transitive, in Cards-Code nirgends direkt importiert), @mana/shared-ui-2 ^0.1.0 rein. - Header.svelte: Import wechselt von @mana/shared-ui auf @mana/shared-ui-2. primaryColor-Prop entfernt — shared-ui-2 PillTabGroup nutzt --color-primary direkt aus dem 12-Token-Set. Bridge-Aliase in app.css bleiben — Cards' Eigen-Komponenten (Header-Logo, Modals, Marketplace, Routen) nutzen historisch --color-card, --color-popover, --color-accent etc. Diese Tokens existieren im 12-Token-Mana-Set NICHT, aber die Aliase mappen sie weiter aufs 12er-Set. Aliase-Kommentar präzisiert: nicht mehr für shared-ui@0.1.x (raus), sondern für Cards-eigenen Code, bis Cards in eigenem Refactor-Sprint auf das 12er-Vokabular umzieht. Type-check-Pipeline schrumpft drastisch: von 3994 Files (mit shared-ui@0.1.x's 176 Quellfiles + transitive) auf 439 Files (nur Cards + shared-ui-2's kleinerer Surface). Build sauber, weniger JS im Output-Bundle. Cards ist damit die erste Vereins-App, die operativ auf shared-ui-2 läuft — End-to-End-Beweis dass das System trägt. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
122 lines
3.8 KiB
CSS
122 lines
3.8 KiB
CSS
@import 'tailwindcss';
|
|
@import '@mana/themes/variants/forest.css';
|
|
|
|
/**
|
|
* Cards — Theming-Setup.
|
|
*
|
|
* 12-Token-Vokabular kommt aus `@mana/themes/variants/forest.css`.
|
|
* `data-theme="forest"` ist in `app.html` gesetzt; Light/Dark via
|
|
* Class `.dark` auf <html>. Konvention: `hsl(var(--color-X))`. Bare
|
|
* `var(--color-X)` ist verboten (silent inherit-fallback). Detail in
|
|
* mana/docs/THEMING.md.
|
|
*
|
|
* Diese Datei trägt nur Cards-spezifische Ergänzungen:
|
|
* 1. Bridge-Aliase für shared-ui@0.1.x — bis shared-ui@2.0 entfällt
|
|
* 2. Brand-Literals (--brand-cards-forest)
|
|
* 3. Layer-Base-Regeln (html, focus-ring, sr-only, skip-link)
|
|
* 4. Reduced-Motion-Override
|
|
*/
|
|
|
|
@theme {
|
|
/* ===== Bridge-Aliase für Cards' Eigen-Komponenten =====
|
|
* Cards' eigener Code (Header, Modals, Routen, Marketplace)
|
|
* nutzt historisch --color-card, --color-popover, --color-accent
|
|
* etc. — Tokens die im 12er-Mana-Set NICHT existieren. Diese
|
|
* Aliase mappen sie auf das 12er-Set, damit Cards' eigene UI
|
|
* weiter rendert. Wird nur noch entfernbar wenn Cards' eigener
|
|
* Code komplett auf das 12er-Vokabular umgezogen ist
|
|
* (eigener Refactor-Sprint). shared-ui-2-Komponenten brauchen
|
|
* diese Aliase NICHT.
|
|
*/
|
|
--color-card: var(--color-surface);
|
|
--color-card-foreground: var(--color-foreground);
|
|
--color-popover: var(--color-surface);
|
|
--color-popover-foreground: var(--color-foreground);
|
|
--color-secondary: var(--color-surface);
|
|
--color-secondary-foreground: var(--color-foreground);
|
|
--color-accent: var(--color-primary);
|
|
--color-accent-foreground: var(--color-primary-foreground);
|
|
--color-input: var(--color-border);
|
|
--color-ring: var(--color-primary);
|
|
--color-border-strong: var(--color-foreground);
|
|
--color-surface-elevated: var(--color-surface);
|
|
--color-surface-elevated-1: var(--color-surface);
|
|
--color-surface-elevated-2: var(--color-surface);
|
|
--color-surface-elevated-3: var(--color-surface);
|
|
--color-app-accent: var(--color-primary);
|
|
--color-mana: var(--color-primary);
|
|
--color-destructive: var(--color-error);
|
|
--color-destructive-foreground: var(--color-primary-foreground);
|
|
|
|
/* ===== Brand-Literals (NICHT theme-aware) ===== */
|
|
--brand-cards-forest: #16a34a;
|
|
|
|
/* ===== Fonts ===== */
|
|
--font-sans:
|
|
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
background-color: hsl(var(--color-background));
|
|
color: hsl(var(--color-foreground));
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
body {
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
/* Sichtbarer Fokus-Ring für Tastatur-Nutzer. Tailwind 4 strippt
|
|
die Browser-Defaults; expliziter Outline. Nur :focus-visible,
|
|
damit Maus-Klicks visuell sauber bleiben. */
|
|
:focus-visible {
|
|
outline: 2px solid hsl(var(--color-primary));
|
|
outline-offset: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Screen-Reader-only Utility. Wird im Study-View genutzt, um die
|
|
Prompt-/Answer-Regionen unsichtbar zu betiteln. */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* Skip-Link: versteckt bis Fokus, dann sprung zur Main-Region. */
|
|
.skip-link {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 0.5rem 0.75rem;
|
|
background: hsl(var(--color-primary));
|
|
color: hsl(var(--color-primary-foreground));
|
|
z-index: 50;
|
|
transform: translateY(-200%);
|
|
transition: transform 0.15s;
|
|
}
|
|
.skip-link:focus {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Reduce-Motion-Respekt: Animationen + Transitions ausschalten,
|
|
wenn der User das im OS so eingestellt hat. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|