/* ========================================================================== SchulPilot — Zentrales Design Token System -------------------------------------------------------------------------- Diese Datei definiert das ZENTRALE Farb- und Design-Token-System der App. Sie ist die einzige Quelle der Wahrheit für: A) Theme-Farben (Kindfarben) -> --color-theme*, --theme-primary* B) Hintergrund-/Strukturfarben -> --color-surface*, --color-card* C) Fachfarben (Mikro-Akzent) -> --color-subject-* D) Noten-Farben (Ampelsystem 1–6) -> --color-grade-* Regeln (verbindlich für alle Komponenten): 1. Farben dürfen NIEMALS hardgecodet in Komponenten oder Inline-Styles stehen. Wer eine Farbe braucht, nutzt eine der hier definierten CSS Custom Properties oder die gleichnamigen Utility-Klassen. 2. Theme-Farben (Kindfarben) wechseln ausschließlich über die Klasse .theme-* auf dem App-Container (oder :root). JavaScript darf nur diese Klasse togglen oder im Sonderfall (dynamisch konfigurierte Kindfarbe per Hex) direkt --color-theme / --color-theme-rgb auf :root setzen. 3. Das Layout vermeidet Box-in-Box. Listen homogener Karten (z.B. Fächer) liegen direkt auf dem grauen App-Hintergrund (Layer 0). Karten (Layer 1) tragen .surface-card. Segmentierung erfolgt über Whitespace + Header-Typografie, nicht über umschließende Container. ========================================================================== */ /* ========================================================================== A. Theme-Farben (Kindfarben) — Standard-Theme (Violet) ========================================================================== */ :root { /* Kanonische Theme-Tokens (laut Brief) */ --color-theme: #6d28d9; /* Violet-700 – primärer Akzent */ --color-theme-dark: #4c1d95; /* Violet-900 – tiefer Akzent/Hover */ --color-theme-soft: #ede9fe; /* Violet-100 – sanfte Tint-Fläche */ --color-theme-contrast: #ffffff; /* Lesbarer Text auf --color-theme */ /* RGB-Tripel für rgba()/Alpha-Verläufe. Werden zur Laufzeit von applyChildTheme() überschrieben, wenn ein Kind eine eigene Hex-Farbe hinterlegt hat. */ --color-theme-rgb: 109, 40, 217; --color-theme-dark-rgb: 76, 29, 149; /* Legacy-Aliasse: Bestehender Code nutzt --theme-primary, --theme-secondary und --c-primary. Sie bleiben aktiv und werden in JS synchron mit den neuen Tokens gesetzt. */ --theme-primary: var(--color-theme-rgb); --theme-secondary: 168, 85, 247; } /* Konfigurierbare Theme-Klassen. Klasse .theme-* auf .app-shell oder :root setzen → gesamte UI wechselt. */ .theme-violet { --color-theme: #6d28d9; --color-theme-dark: #4c1d95; --color-theme-soft: #ede9fe; --color-theme-rgb: 109, 40, 217; --color-theme-dark-rgb: 76, 29, 149; } .theme-sophia, .theme-teal { --color-theme: #0d9488; /* Teal-600 */ --color-theme-dark: #0f766e; /* Teal-700 */ --color-theme-soft: #ccfbf1; /* Teal-100 */ --color-theme-rgb: 13, 148, 136; --color-theme-dark-rgb: 15, 118, 110; } .theme-rose { --color-theme: #e11d48; /* Rose-600 */ --color-theme-dark: #be123c; /* Rose-700 */ --color-theme-soft: #ffe4e6; --color-theme-rgb: 225, 29, 72; --color-theme-dark-rgb: 190, 18, 60; } .theme-amber { --color-theme: #d97706; /* Amber-600 */ --color-theme-dark: #b45309; /* Amber-700 */ --color-theme-soft: #fef3c7; --color-theme-rgb: 217, 119, 6; --color-theme-dark-rgb: 180, 83, 9; } .theme-blue { --color-theme: #2563eb; /* Blue-600 */ --color-theme-dark: #1d4ed8; /* Blue-700 */ --color-theme-soft: #dbeafe; --color-theme-rgb: 37, 99, 235; --color-theme-dark-rgb: 29, 78, 216; } .theme-emerald { --color-theme: #059669; /* Emerald-600 */ --color-theme-dark: #047857; /* Emerald-700 */ --color-theme-soft: #d1fae5; --color-theme-rgb: 5, 150, 105; --color-theme-dark-rgb: 4, 120, 87; } /* ========================================================================== B. Hintergrund- und Strukturfarben (Layering) -------------------------------------------------------------------------- Layer 0 — App-Canvas: neutral, leicht kühl (Zink/Slate). NIE reines Weiß. Layer 1 — Card: reines Weiß, dezenter Rahmen, weicher Schatten. ========================================================================== */ :root { /* Surface (Layer 0) */ --color-surface: #f4f4f5; /* Zink-100 – kanonischer Canvas */ --color-surface-alt: #f8fafc; /* Slate-50 – alternative Variante */ --color-surface-sunken: #e4e4e7; /* Zink-200 – tiefer gelegene Zone */ /* Card (Layer 1) */ --color-card: #ffffff; --color-card-border: #f3f4f6; /* gray-100 – extrem dezenter Rahmen */ --color-card-divider: #e5e7eb; /* gray-200 – Trennlinien (divide-y) */ --color-card-hover: #f9fafb; /* gray-50 – Hover-Tint in Karten */ /* Schatten – weich und low-noise */ --shadow-card-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04); --shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04); --shadow-card-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08); /* Text */ --color-text: #1f2937; /* gray-800 */ --color-text-muted: #6b7280; /* gray-500 */ --color-text-subtle: #9ca3af; /* gray-400 */ /* Radius */ --radius-card: 16px; --radius-pill: 999px; --radius-input: 12px; } /* ========================================================================== C. Fachfarben (Mikro-Akzent, NIE Status) -------------------------------------------------------------------------- Werden über Klassen `.subject-` an Elementen gesetzt. Das Mapping `Fach -> Farbschlüssel` lebt in JS (lib/utils/designTokens.js, Konstante SUBJECT_COLOR_MAP) bzw. in der Backend-Konfiguration. ========================================================================== */ :root { --color-subject-blue: #3b82f6; /* Mathematik */ --color-subject-emerald: #10b981; /* Biologie / NaWi */ --color-subject-amber: #f59e0b; /* Chemie */ --color-subject-rose: #f43f5e; /* Sport / Musik */ --color-subject-violet: #8b5cf6; /* Kunst */ --color-subject-cyan: #06b6d4; /* Geographie */ --color-subject-teal: #14b8a6; /* Englisch */ --color-subject-indigo: #6366f1; /* Deutsch */ --color-subject-orange: #f97316; /* Geschichte */ --color-subject-lime: #84cc16; /* Religion / Ethik */ --color-subject-pink: #ec4899; /* Französisch / Latein*/ --color-subject-slate: #64748b; /* Sonstiges / Default */ } /* ========================================================================== D. Noten-Farben (Ampelsystem) -------------------------------------------------------------------------- Die Note ist eine KPI – NICHT die Fachfarbe. Drei klare Stufen: Emerald = sehr gut / gut (Note 1–2) Amber = befriedigend / ausr. (Note 3–4) Rose = mangelhaft / ungen. (Note 5–6) ========================================================================== */ :root { --color-grade-good: #10b981; /* Emerald-500 */ --color-grade-good-soft: #d1fae5; /* Emerald-100 (Hintergrund) */ --color-grade-good-text: #065f46; /* Emerald-800 (Text) */ --color-grade-warn: #f59e0b; /* Amber-500 */ --color-grade-warn-soft: #fef3c7; /* Amber-100 */ --color-grade-warn-text: #92400e; /* Amber-800 */ --color-grade-bad: #f43f5e; /* Rose-500 */ --color-grade-bad-soft: #ffe4e6; /* Rose-100 */ --color-grade-bad-text: #9f1239; /* Rose-800 */ --color-grade-neutral: #94a3b8; /* Slate-400 (für „—" / unbenotet) */ --color-grade-neutral-soft:#f1f5f9; /* Slate-100 */ --color-grade-neutral-text:#475569; /* Slate-600 */ } /* ========================================================================== Utility-Klassen (Tailwind-ähnlich, aber CSS-only) -------------------------------------------------------------------------- Erlaubte Verwendung in Markup statt hardgecodeter Farben. ========================================================================== */ /* Theme-Akzent */ .bg-theme { background-color: var(--color-theme) !important; } .bg-theme-dark { background-color: var(--color-theme-dark) !important; } .bg-theme-soft { background-color: var(--color-theme-soft) !important; } .text-theme { color: var(--color-theme) !important; } .text-theme-dark { color: var(--color-theme-dark) !important; } .text-on-theme { color: var(--color-theme-contrast) !important; } .border-theme { border-color: var(--color-theme) !important; } .ring-theme { box-shadow: 0 0 0 3px rgba(var(--color-theme-rgb), 0.20) !important; } .fill-theme { fill: var(--color-theme) !important; } .stroke-theme { stroke: var(--color-theme) !important; } /* Surface (Layer 0) */ .bg-surface { background-color: var(--color-surface) !important; } .bg-surface-alt { background-color: var(--color-surface-alt) !important; } .bg-surface-sunken{ background-color: var(--color-surface-sunken) !important; } /* Card (Layer 1) Wichtig: Cards dürfen frei auf dem Surface liegen (kein Wrapper-Container). Klasse `.surface-card` ist die kanonische Card-Implementierung. */ .surface-card { background-color: var(--color-card); border: 1px solid var(--color-card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card-sm); } .surface-card--flat { box-shadow: none; } .surface-card--raised { box-shadow: var(--shadow-card); } .surface-card--hover:hover { background-color: var(--color-card-hover); } /* Divider innerhalb einer Karte (Alert-Liste etc., divide-y-Logik) */ .surface-card .divide-y > * + * { border-top: 1px solid var(--color-card-divider); } /* Text-Hierarchie */ .text-default { color: var(--color-text) !important; } .text-muted { color: var(--color-text-muted) !important; } .text-subtle { color: var(--color-text-subtle) !important; } /* -------------------------------------------------------------------------- Fachfarben — Utility-Klassen -------------------------------------------------------------------------- */ .bg-subject-blue { background-color: var(--color-subject-blue) !important; } .bg-subject-emerald { background-color: var(--color-subject-emerald) !important; } .bg-subject-amber { background-color: var(--color-subject-amber) !important; } .bg-subject-rose { background-color: var(--color-subject-rose) !important; } .bg-subject-violet { background-color: var(--color-subject-violet) !important; } .bg-subject-cyan { background-color: var(--color-subject-cyan) !important; } .bg-subject-teal { background-color: var(--color-subject-teal) !important; } .bg-subject-indigo { background-color: var(--color-subject-indigo) !important; } .bg-subject-orange { background-color: var(--color-subject-orange) !important; } .bg-subject-lime { background-color: var(--color-subject-lime) !important; } .bg-subject-pink { background-color: var(--color-subject-pink) !important; } .bg-subject-slate { background-color: var(--color-subject-slate) !important; } .text-subject-blue { color: var(--color-subject-blue) !important; } .text-subject-emerald { color: var(--color-subject-emerald) !important; } .text-subject-amber { color: var(--color-subject-amber) !important; } .text-subject-rose { color: var(--color-subject-rose) !important; } .text-subject-violet { color: var(--color-subject-violet) !important; } .text-subject-cyan { color: var(--color-subject-cyan) !important; } .text-subject-teal { color: var(--color-subject-teal) !important; } .text-subject-indigo { color: var(--color-subject-indigo) !important; } .text-subject-orange { color: var(--color-subject-orange) !important; } .text-subject-lime { color: var(--color-subject-lime) !important; } .text-subject-pink { color: var(--color-subject-pink) !important; } .text-subject-slate { color: var(--color-subject-slate) !important; } /* Klassen-basiertes Mapping `.subject-` auf Karten: setzt eine CSS-Variable `--subject-color`, mit der Komponenten konsistent arbeiten können (Akzent-Borders, Icon-Farbe, etc.). */ .subject-blue { --subject-color: var(--color-subject-blue); } .subject-emerald { --subject-color: var(--color-subject-emerald); } .subject-amber { --subject-color: var(--color-subject-amber); } .subject-rose { --subject-color: var(--color-subject-rose); } .subject-violet { --subject-color: var(--color-subject-violet); } .subject-cyan { --subject-color: var(--color-subject-cyan); } .subject-teal { --subject-color: var(--color-subject-teal); } .subject-indigo { --subject-color: var(--color-subject-indigo); } .subject-orange { --subject-color: var(--color-subject-orange); } .subject-lime { --subject-color: var(--color-subject-lime); } .subject-pink { --subject-color: var(--color-subject-pink); } .subject-slate { --subject-color: var(--color-subject-slate); } /* -------------------------------------------------------------------------- Noten-Farben — Utility-Klassen (Ampelsystem) -------------------------------------------------------------------------- Verwendung: 1,5 3,2 5,0 -------------------------------------------------------------------------- */ .text-grade-good { color: var(--color-grade-good-text) !important; } .text-grade-warn { color: var(--color-grade-warn-text) !important; } .text-grade-bad { color: var(--color-grade-bad-text) !important; } .text-grade-neutral { color: var(--color-grade-neutral-text) !important; } .bg-grade-good { background-color: var(--color-grade-good) !important; color: #fff !important; } .bg-grade-warn { background-color: var(--color-grade-warn) !important; color: #fff !important; } .bg-grade-bad { background-color: var(--color-grade-bad) !important; color: #fff !important; } .bg-grade-neutral { background-color: var(--color-grade-neutral) !important; color: #fff !important; } .bg-grade-good-soft { background-color: var(--color-grade-good-soft) !important; color: var(--color-grade-good-text) !important; } .bg-grade-warn-soft { background-color: var(--color-grade-warn-soft) !important; color: var(--color-grade-warn-text) !important; } .bg-grade-bad-soft { background-color: var(--color-grade-bad-soft) !important; color: var(--color-grade-bad-text) !important; } .bg-grade-neutral-soft { background-color: var(--color-grade-neutral-soft) !important; color: var(--color-grade-neutral-text) !important; } /* Pill-Variante (kompakt, abgerundet) */ .grade-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.875rem; line-height: 1.2; letter-spacing: 0.01em; } .grade-pill.grade-good { background: var(--color-grade-good-soft); color: var(--color-grade-good-text); } .grade-pill.grade-warn { background: var(--color-grade-warn-soft); color: var(--color-grade-warn-text); } .grade-pill.grade-bad { background: var(--color-grade-bad-soft); color: var(--color-grade-bad-text); } .grade-pill.grade-neutral { background: var(--color-grade-neutral-soft); color: var(--color-grade-neutral-text); } /* -------------------------------------------------------------------------- Globale Anwendung der Surface-Farbe -------------------------------------------------------------------------- Body und App-Shell nutzen die zentrale Surface-Variable. Damit ist sichergestellt, dass nirgends mehr `#ffffff` als App-Hintergrund durchschlägt (Box-in-Box vermeiden). -------------------------------------------------------------------------- */ body, .app-shell, .app-main { background-color: var(--color-surface); } /* Legacy `--c-bg-main` wird auf Surface gemappt, damit alte Komponenten ohne Anpassung weiter korrekt aussehen. */ :root { --c-bg-main: var(--color-surface); --c-bg-card: var(--color-card); --c-border: var(--color-card-border); } /* ========================================================================== Hintergrund-Hierarchie der Views -------------------------------------------------------------------------- Sicherstellen, dass der Layer-0-Hintergrund (Surface) konsistent durch die gesamte App durchläuft – über `body`, `.app-shell`, `.app-main` und alle View-Container hinweg. Damit gibt es keinen Wechsel mehr zwischen warmem Beige und kühlem Zink/Slate, und kein einzelner Container bricht das Layering durch eigenes Weiß auf. Wichtig: Wir setzen `!important`, damit die Tokens auch dann gewinnen, wenn ältere Komponenten-Stylesheets (z.B. style.css) Body-Hintergründe später in der Kaskade erneut definieren. ========================================================================== */ html, body, .app-shell, .app-main, #dashboard-view, #schedule-view, #calendar-view, #exams-view, #analytics-view, #settings-view { background-color: var(--color-surface) !important; } /* ========================================================================== Box-in-Box-Korrektur für gebündelte Alert-Listen -------------------------------------------------------------------------- Brief 5: „Anstehende Prüfungen" sind kein Listen-Items, sondern zeitkritische Alerts. Die äußere Card („Anstehende Prüfungen") darf bestehen, aber die inneren Einträge dürfen NICHT wie weitere Karten wirken. Sie werden zu einer divide-y-Liste mit dezentem Fach-Akzent (linker Strich) gemacht. Bestehendes Markup wie `.upcoming-exam-slot` setzt aktuell einen eigenen Tint-Hintergrund + Rounded Corners + Schatten. Wir „entkarten" diese Items innerhalb der Sammler-Card, ohne das Markup anpassen zu müssen. ========================================================================== */ .card.upcoming-exams-card, .upcoming-exams-card { /* Sammler-Card selbst behält ihre Card-Optik */ background-color: var(--color-card); } .upcoming-exams-card .schedule-week-overview-slot.upcoming-exam-slot, .upcoming-exams-card .upcoming-exam-slot { /* Inner-Items: keine eigene Card-Optik */ border-radius: 0 !important; box-shadow: none !important; /* Tint nur ganz dezent als Tone-on-Tone, damit das Fach erkennbar ist ohne Box-in-Box zu wirken. Wir kommentieren den ursprünglichen Inline-Hintergrund über eine subtilere Schicht. */ background-image: linear-gradient( to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4) ); background-blend-mode: lighten; } /* Trennlinien zwischen den Items: divide-y-Optik */ .upcoming-exams-card .schedule-week-overview-slot.upcoming-exam-slot + .schedule-week-overview-slot.upcoming-exam-slot, .upcoming-exams-card .upcoming-exam-slot + .upcoming-exam-slot { border-top: 1px solid var(--color-card-divider); } /* Linke Akzent-Kante in Subject-Color (übernimmt automatisch den Inline-Color über `currentColor`, da das Markup bereits `color: subjectColor` setzt). */ .upcoming-exams-card .upcoming-exam-slot { border-left: 3px solid currentColor; padding-left: calc(0.75rem - 3px); } /* Verschachtelung: Wenn die Items in einem Wrapper-Div liegen (wie bei „Anstehende Prüfungen"), sorgen wir dafür, dass der Wrapper selbst keinen Card-Hintergrund mehr beisteuert. */ .upcoming-exams-card .todays-schedule-week, .upcoming-exams-card .schedule-week-grid, .upcoming-exams-card .schedule-week-column, .upcoming-exams-card .schedule-week-day, .upcoming-exams-card .schedule-week-day-slots { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; } /* ========================================================================== E. Layout-Tokens — View-Spacing (Stable & Tokenized) -------------------------------------------------------------------------- Konsequente Konsolidierung der View-internen Abstände, statt magische margin-top/-30px-Hacks pro View. Diese Tokens sind die Single Source of Truth für jeden vertikalen Abstand zwischen KPI-HUD/Header und den darunter liegenden View-Sektionen. Hintergrund (Brief: „Analytics-Spacing-Saga"): Über vier Commits wanderten margin-top-Werte zwischen -20/-30/-90/0, weil der KPI-HUD-Mountpunkt mehrfach gewechselt hatte. Mit der jetzigen Architektur (KPI-HUD wird zentral via `#header-kpi-host` in den fixed Header gemountet, App-Main-padding-top dynamisch über `--app-header-height`) ist der Wurzelfehler beseitigt — wir verankern das Ergebnis jetzt explizit über benannte Tokens, damit künftige Refactorings nicht versehentlich neue Hacks einführen. Verwendung: .header-with-action { margin: var(--view-section-spacing-top) 0 var(--view-section-spacing-bottom); } Wer eine View braucht, die Sektions-Heading-Abstände abweichend setzen möchte, überschreibt das Token lokal auf dem View-Container — nicht auf dem einzelnen Element. ========================================================================== */ :root { /* Vertikaler Abstand zwischen erstem Sektions-Heading und KPI-HUD-Boden. Bewusst klein, weil die KPI-HUD im Header bereits visuelles Padding liefert. Wer die View ohne KPI-HUD rendert, fügt zusätzlich `--view-content-offset` als Top-Padding auf der View hinzu. */ --view-section-spacing-top: 0.5rem; /* 8px – über h2-Heading */ --view-section-spacing-bottom: 0.4rem; /* ~6px – unter h2-Heading */ /* Innerer Vertikal-Abstand zwischen aufeinanderfolgenden Sections, z. B. zwischen „Gesamtentwicklung" und „Fach-Analysen". */ --view-section-gap: 1.25rem; /* 20px */ /* Padding am View-Anfang, falls die View KEINE KPI-HUD montiert (z. B. Einstellungen, Kalender). Dashboard/Analytics setzen das NICHT, da der Header-padding-top via `--app-header-height` bereits den korrekten Abstand zum ersten Inhalt liefert. */ --view-content-offset: 0; /* Außenrand des Card-Stacks innerhalb der View. Wird von einzelnen Cards (.card, .upcoming-exams-card, etc.) als margin-bottom übernommen, damit der Stack über alle Views einheitlich atmet. */ --view-card-gap: 1rem; /* 16px */ } /* Analytics-View opt-in: Sektions-Heading-Abstand identisch zum Dashboard. Falls in Analytics historisch ein anderer Wert nötig war, hier zentral überschreiben — NICHT pro Heading-Element via inline margin-top. */ #analytics-view, #dashboard-view { --view-section-spacing-top: 0.5rem; --view-section-spacing-bottom: 0.4rem; } /* Settings-/Calendar-View brauchen einen kleinen Top-Offset, weil dort keine KPI-HUD im Header sitzt und der Übergang sonst zu „klebrig" wirkt. */ #settings-view, #calendar-view, #schedule-view, #exams-view { --view-content-offset: 0.25rem; padding-top: var(--view-content-offset); }