/* ============================================================ informatik2.0 — Design-Tokens (ADR-0004, ADR-0020, ADR-0058) Architektur: - Ein SKIN ist ein reines Token-Set (Farben, Fonts, Radien, Linien). Skins ändern NIE Layout, Raster oder Komponenten- struktur (Skin-Kontrakt, Issue #35). - Skins sind BEREICHSGEKOPPELT (#41, ADR-0058 — Inversion von ADR-0020): Skin-ID = Fach-Bereich aus content/topics.yaml. Themengebundene Seiten rendern `data-skin=""` am -Root (serverseitig); themenlose Seiten und Blätter tragen den neutralen Basis-Skin "forest". Ein Bereich OHNE eigenen Token-Block (z. B. automaten) fällt per :root- Fallback sauber auf forest zurück — gewollt, Bereiche bekommen erst nach und nach eigene Skins. - Basis-Skin "forest" (Spectral + JetBrains Mono): seine Light-Werte liegen auf `:root` und sind der Fallback. Bereichs-Skins sind reine zusätzliche Blöcke der Form `:root[data-skin="sql"] { … }` (+ Dark-Block). Bänder (ADR-0058): --bg/--surface bleiben je Modus im Helligkeits- Korridor, --ok im Grün-, --no im Rot-Band — maschinell geprüft (scripts/check-contrast.mjs). - Light/Dark via `data-theme` (public/js/theme.js). Dark ist eigenständig gestaltet, nicht invertiert. Die Selektorform `[data-theme="…"]` (statt nur `:root[…]`) erlaubt zusätzlich lokal gescope­te Theme-Vorschauen (Komponentenseite). - Nutzer-Akzent: `data-user-accent=""` am -Root (User-Präferenz, #41) tauscht NUR den --accent-Slot (+ Ableitungen --accent-ink/--accent-soft). Rein dekorativ — richtig/falsch/Hinweis (--ok/--no/--warn/--info) bleiben überall gleich. Die Akzent-Blöcke stehen am DATEIENDE: Nutzer-Akzent schlägt jeden Skin-Fallback-Akzent (gleiche oder höhere Spezifität + spätere Position; Test: tests/design-tokens.test.ts). AA-Nachweis: scripts/check-contrast.mjs rechnet die realen Verwendungen nach (Test: tests/design-tokens.test.ts). Werte hier nur ändern, wenn der Check grün bleibt. ============================================================ */ /* ---- Skin-invariante Skalen (gelten für alle Skins) ---- */ :root { /* Spacing-Skala (Komponenten.dc.html, Abschnitt 03) — die 6 tragenden Rhythmus-Stufen. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 26px; --space-6: 40px; /* Feinwerte-Anhang zur Spacing-Skala (Issue #47): punktuelle Mockup-Maße für padding/margin/gap, die zwischen den 6 Kernstufen liegen. Bewusst nach Pixelwert benannt (nicht als weitere "Stufe" nummeriert), damit klar bleibt: das sind Feinabstimmungen einzelner Komponenten, keine tragenden Skalenstufen. Jeder Wert hier ist 1:1 der px-Wert, den er in main.css ersetzt — reine Umbenennung, keine Wertänderung. */ --space-1px: 1px; --space-2px: 2px; --space-3px: 3px; --space-5px: 5px; --space-6px: 6px; --space-7px: 7px; --space-9px: 9px; --space-10px: 10px; --space-11px: 11px; --space-13px: 13px; --space-14px: 14px; --space-15px: 15px; --space-18px: 18px; --space-19px: 19px; --space-20px: 20px; --space-22px: 22px; --space-28px: 28px; --space-30px: 30px; --space-32px: 32px; --space-34px: 34px; --space-36px: 36px; --space-38px: 38px; --space-44px: 44px; --space-48px: 48px; --space-60px: 60px; /* Typo-Skala. Kontrast-Korrektur (mockups/README.md Punkt 3): Mono-Kapitälchen-Labels mind. 11px (Mockup: 9,5–10,5px). */ --fs-display: 30px; --fs-h1: 26px; --fs-h2: 19px; --fs-h3: 15.5px; --fs-body: 15px; --fs-read: 16.5px; --fs-small: 12.5px; --fs-mono: 13px; --fs-label: 11px; /* Arbeitsblatt-Inhaltstext (Slice 38, #45): eigener Token statt --fs-body, damit die künftige Schriftgrößen-Präferenz (#37) NUR den Aufgaben- Fließtext (Stamm, Optionen, Lückentext, Prompts …) skalieren kann, ohne globale UI-Chrome (Nav, Buttons, Footer) mit anzufassen. */ --fs-task: 15.5px; --lh-task: 1.6; /* Code-Eingabefeld-Schriftgröße (#42): eigener Token statt fix --fs-mono, damit die Schriftgrößen-Präferenz (#37) zusätzlich zum Aufgaben- Fließtext (--fs-task oben) auch die Code-Eingabefelder (SQL-Textarea .task-sql-input, .inp--mono; später das Java-Feld) skaliert — additiv an dieselbe data-fontsize-Stufe gekoppelt, kein eigener Regler. Basiswert = bisheriger Wert des SQL-Eingabefelds (Status quo, vormals --fs-14px). Bewusst ein eigener Token (wie --fs-task/--fs-15-5px oben): --fs-mono bleibt fix für UI-Chrome (Nav, Identität) und Formularfelder außerhalb von Code (Beitritts-/Inline-Formulare) — diese folgen der Präferenz nicht. */ --fs-code: 14px; --lh-body: 1.62; --lh-read: 1.78; --ls-caps: .08em; /* Feinwerte-Anhang zur Typo-Skala (Issue #47): weitere Schriftgrößen aus den Mockups ohne Entsprechung in der Kern-Skala. --fs-mono wird zusätzlich für Nicht-Mono-Text mitgenutzt, wo der Wert (13px) exakt passt (z. B. Navigation) — das ist beabsichtigt, keine Fehlbenennung. --fs-15-5px trifft zufällig denselben Zahlenwert wie --fs-h3/--fs-task; bewusst ein eigener Token, um keine Kopplung an Überschriften- oder Aufgaben-Schriftgrößen-Skalierung zu erzeugen (siehe --fs-task oben). */ --fs-12px: 12px; --fs-11-5px: 11.5px; --fs-13-5px: 13.5px; --fs-14px: 14px; --fs-14-5px: 14.5px; --fs-15-5px: 15.5px; --fs-16px: 16px; --fs-17px: 17px; --fs-21px: 21px; --fs-64px: 64px; --fs-96px: 96px; /* Größen-Feinwerte (Issue #47): feste Bauteil-/Layoutmaße, die an mehreren Stellen denselben Wert für dasselbe Konzept tragen (anders als Einzelmaße wie Avatar-Durchmesser — die bleiben dokumentierte Ausnahme direkt an ihrer Stelle, s. main.css). */ --size-dot: 5px; /* Deko-Punkt (.eyebrow .dot, .er-terminal-lbl .dot) */ --size-track-h: 4px; /* Fortschritts-Leiste (.topic-progress-track, .sheet-progress-seg) */ --width-page: 1080px; /* Seiten-Inhaltsbreite (.site-main, .footer-inner) */ --width-dialog: 26rem; /* Schmale Dialog-/Auth-Karte (.login-card, .teilen-dialog) */ } /* ============================================================ SKIN "forest" — Light (Default/Fallback) Quelle: .ks in Komponenten.dc.html / .theme-automata in Arbeitsblatt.dc.html. Abweichungen (AA-Korrektur): --ink-faint #7c837a → #606760, --warn #8a6a1e → #7a5e17. ============================================================ */ :root, [data-theme="light"] { --bg: #eef0ea; --surface: #f9faf6; --ink: #161a16; --ink-muted: #4d534b; --ink-faint: #606760; --line: #d6dad0; --line-strong: #b7bdb2; --accent: #1f5c3d; --accent-ink: #ffffff; --accent-soft: #e4ede7; --ok: #2f6b4f; --ok-bg: #e9f1eb; --ok-line: #c4dccb; --no: #a34733; --no-bg: #f4e9e5; --no-line: #e3cabf; --warn: #7a5e17; --warn-bg: #f6f1e2; --warn-line: #d8d0b6; --info: #2c6e8f; --info-bg: #e5eef2; --info-line: #bcd6e2; /* Hinweis-Stufe der Arbeitsblätter = Warn-Familie (Arbeitsblatt.dc.html) */ --hint: var(--warn); --hint-bg: var(--warn-bg); --hint-line: var(--warn-line); --code-bg: #141a15; --code-ink: #dfe6de; --code-kw: #7fc79b; --code-faint: #8a9284; /* Kommentare auf --code-bg (AA-geprüft) */ --num-bg: #1f5c3d; --num-ink: #ffffff; --focus: #1f5c3d; --radius: 8px; --radius-sm: 5px; /* Radien-Feinwerte (Issue #47) — dieselbe "Linien/Radien"-Familie, für Skins mit anzupassen wie --radius/--radius-sm: --radius-full ist der wiederkehrende "voll gerundet"-Wert (Pillen, Avatar, Tracks …); --radius-xs die etwas engere Kontrollflächen-Ecke (Checkbox) unterhalb von --radius-sm. */ --radius-full: 999px; --radius-xs: 4px; --border-w: 1px; /* Kräftigere Linie für Zustands-/Trennmarkierungen (Nav-Unterstrich, Feedback-Ober-/Rahmenlinien, Rail-Deko) — dieselbe Familie wie --border-w, nur die dickere Stufe (Issue #47). */ --border-w-thick: 2px; /* Fokus-Ring (bislang überall als literales "2.5px solid var(--focus)" wiederholt) — Breite + Offset-Varianten als Tokens (Issue #47). */ --focus-ring-w: 2.5px; --focus-offset: 2px; --focus-offset-sm: 1px; --focus-offset-inset: -2px; --shadow: 0 4px 22px rgba(20, 30, 20, .1); --scrim: rgba(16, 20, 15, .28); /* Dialog-Backdrop (Arbeitsblatt.dc.html) */ --font-display: 'Spectral', Georgia, serif; --font-body: 'Spectral', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* ============================================================ SKIN "forest" — Dark (eigenständige Werte aus den Mockups) AA-Korrektur: --ink-faint #7f8779 → #8a9284. ============================================================ */ [data-theme="dark"] { --bg: #10140f; --surface: #171c15; --ink: #edf1e8; --ink-muted: #aeb5a7; --ink-faint: #8a9284; --line: #263024; --line-strong: #37402f; --accent: #4f9d6f; --accent-ink: #0b0f0a; --accent-soft: #1d281c; --ok: #6cc091; --ok-bg: rgba(108, 192, 145, .12); --ok-line: rgba(108, 192, 145, .32); --no: #d9694a; --no-bg: rgba(217, 105, 74, .12); --no-line: rgba(217, 105, 74, .32); --warn: #d3a24a; --warn-bg: rgba(211, 162, 74, .1); --warn-line: #3a3626; --info: #63b4d4; --info-bg: rgba(99, 180, 212, .12); --info-line: rgba(99, 180, 212, .32); --hint: var(--warn); --hint-bg: var(--warn-bg); --hint-line: var(--warn-line); --code-bg: #0b0f0a; --code-ink: #dfe6de; --code-kw: #6cc091; --code-faint: #8a9284; --num-bg: #4f9d6f; --num-ink: #0b0f0a; --focus: #7fd0a0; --shadow: 0 8px 34px rgba(0, 0, 0, .5); --scrim: rgba(0, 0, 0, .5); /* Dialog-Backdrop, dunkler im Dark-Mode */ } /* ============================================================ SKIN "sql" — Bereichs-Skin (#41, ADR-0058): ruhig-technisch, als bewusster Kontrast zum editorialen forest. Mono-geprägte Display-Typo (JetBrains Mono, self-hosted — keine neuen Font-Dateien), präzise-scharfe Radien, kühle Grundpalette (Steel/Graublau). NUR Tokens — nie Layout (Skin-Kontrakt #35). Bänder (ADR-0058, maschinell geprüft): --bg/--surface im Helligkeits-Korridor um forest, --ok im Grün-, --no im Rot-Band. Selektorform: Light auf `:root[data-skin="sql"]` (schlägt die :root-forest-Werte per Spezifität), Dark auf `:root[data-skin="sql"][data-theme="dark"]` (schlägt sowohl den sql-Light-Block als auch den forest-Dark-Block). Der Dark-Block MUSS jedes Farb-Token des Light-Blocks neu setzen, sonst leakt ein Light-Wert in den Dark-Modus. ============================================================ */ :root[data-skin="sql"] { --bg: #eceef0; --surface: #f8f9fb; --ink: #15191d; --ink-muted: #454c53; --ink-faint: #5a6169; --line: #d2d6db; --line-strong: #b0b7be; /* Skin-Fallback-Akzent (überschreibbar durch data-user-accent): */ --accent: #245a78; --accent-ink: #ffffff; --accent-soft: #e3e9ee; --ok: #2c6a4d; --ok-bg: #e7f0ea; --ok-line: #c2dbc9; --no: #a8402c; --no-bg: #f4e9e6; --no-line: #e3c9bf; --warn: #7a5e17; --warn-bg: #f5f1e3; --warn-line: #d8d0b8; --info: #2c6e8f; --info-bg: #e4edf2; --info-line: #bcd5e1; --hint: var(--warn); --hint-bg: var(--warn-bg); --hint-line: var(--warn-line); --code-bg: #11161b; --code-ink: #dde4ea; --code-kw: #7db8d4; --code-faint: #8b959e; --num-bg: #245a78; --num-ink: #ffffff; --focus: #245a78; /* Präzisere Ecken als forest (8/5) — Teil der "technischen" Anmutung. --radius-full bleibt bewusst 999px (Pillen/Avatare sind Bauform, keine Skin-Frage). */ --radius: 3px; --radius-sm: 2px; --radius-xs: 2px; --shadow: 0 2px 12px rgba(15, 25, 35, .14); --scrim: rgba(14, 18, 22, .3); /* Mono-geprägte Display-Typo — Fließtext bleibt Spectral (Lesbarkeit). */ --font-display: 'JetBrains Mono', ui-monospace, monospace; } :root[data-skin="sql"][data-theme="dark"] { --bg: #0e1216; --surface: #161b21; --ink: #e7edf2; --ink-muted: #a8b2bb; --ink-faint: #8b959e; --line: #232c34; --line-strong: #34404b; --accent: #5da8c9; --accent-ink: #0a0e12; --accent-soft: #19242d; --ok: #6cc091; --ok-bg: #17231c; --ok-line: #2b4636; --no: #d9694a; --no-bg: #261712; --no-line: #4c2c20; --warn: #d3a24a; --warn-bg: #241f12; --warn-line: #423a20; --info: #63b4d4; --info-bg: #12202a; --info-line: #26455a; --hint: var(--warn); --hint-bg: var(--warn-bg); --hint-line: var(--warn-line); --code-bg: #0a0e12; --code-ink: #dfe5ea; --code-kw: #7cc0da; --code-faint: #8b959e; --num-bg: #5da8c9; --num-ink: #0a0e12; --focus: #7cc4e0; --shadow: 0 8px 30px rgba(0, 0, 0, .55); --scrim: rgba(0, 0, 0, .55); } /* ============================================================ Schriftgrößen-Präferenz (Slice 35, #37; erweitert #42) — data-fontsize am -Root. Skaliert --fs-task/--lh-task (Arbeitsblatt-Inhaltstext, Andockpunkt aus Slice 38/#45) UND --fs-code (Code-Eingabefelder, #42) — nie die globale UI-Chrome (Nav, Buttons, Footer, Formularfelder außerhalb von Code). "mittel" ist die auf :root definierte Grundstufe und braucht deshalb keinen eigenen Block. Gilt unabhängig von Skin und Theme (skin-/theme-invariante Skala, wie die übrige Typo-Skala). ============================================================ */ [data-fontsize="klein"] { --fs-task: 13.5px; --lh-task: 1.5; --fs-code: 12px; } [data-fontsize="gross"] { --fs-task: 18.5px; --lh-task: 1.65; --fs-code: 17px; } /* ============================================================ Nutzer-Akzent-Palette — 7 kuratierte Töne derselben gedeckten Familie (Issue #35; seit #41/ADR-0058 die NUTZER-Wahl statt themengebunden — das frühere Themen-Akzent-Attribut ist ersatzlos entfallen). Hier liegen die Werte als benannte Palette-Tokens (--accent-): eine Wahrheitsquelle je Ton für die Anwendungs-Blöcke unten, die Profil-Swatches (profil.eta) und die Komponenten-Demo. Dark-Werte über [data-theme="dark"] (matcht auch lokal gescopete Theme-Panels, Komponentenseite). Verwendung (rein dekorativ): der --accent-Slot. NIE für richtig/falsch/Hinweis. Alle Töne AA-geprüft für die realen Verwendungen ÜBER BEIDEN Skins (forest + sql; scripts/check-contrast.mjs): Akzent-Text auf --bg/--surface ≥ 4.5, --accent-ink auf --accent ≥ 4.5, Akzent auf --accent-soft ≥ 3 (große Ziffern/ Deko in der Rail). --accent-soft je Ton: 10 % Akzent auf --surface gemischt (statisch vorberechnet — kein color-mix(), Schulrechner-Browser). ============================================================ */ :root, [data-theme="light"] { --accent-gruen: #1f5c3d; --accent-gruen-ink: #ffffff; --accent-gruen-soft: #e3eae4; --accent-terrakotta: #b03f24; --accent-terrakotta-ink: #ffffff; --accent-terrakotta-soft: #f2e7e1; --accent-kobalt: #2b52c9; --accent-kobalt-ink: #ffffff; --accent-kobalt-soft: #e4e9f2; --accent-petrol: #17606a; --accent-petrol-ink: #ffffff; --accent-petrol-soft: #e2ebe8; --accent-ocker: #7a5e17; --accent-ocker-ink: #ffffff; --accent-ocker-soft: #eceae0; --accent-pflaume: #7d3b66; --accent-pflaume-ink: #ffffff; --accent-pflaume-soft: #ede7e8; --accent-schiefer: #46557a; --accent-schiefer-ink: #ffffff; --accent-schiefer-soft: #e7eaea; } [data-theme="dark"] { --accent-gruen: #4f9d6f; --accent-gruen-ink: #0b0f0a; --accent-gruen-soft: #1d291e; --accent-terrakotta: #d4623f; --accent-terrakotta-ink: #0b0f0a; --accent-terrakotta-soft: #2a2319; --accent-kobalt: #5a7df0; --accent-kobalt-ink: #0b0f0a; --accent-kobalt-soft: #1e262b; --accent-petrol: #4fb3bc; --accent-petrol-ink: #0b0f0a; --accent-petrol-soft: #1d2b26; --accent-ocker: #d3a24a; --accent-ocker-ink: #0b0f0a; --accent-ocker-soft: #2a291a; --accent-pflaume: #c07ab2; --accent-pflaume-ink: #0b0f0a; --accent-pflaume-soft: #282525; --accent-schiefer: #93a7c9; --accent-schiefer-ink: #0b0f0a; --accent-schiefer-soft: #232a27; } /* ============================================================ Nutzer-Akzent-Anwendung (#41, ADR-0058): data-user-accent am -Root (serverseitig aus User.accent; "standard" rendert KEIN Attribut → der Skin-Fallback-Akzent bleibt). Diese Blöcke MÜSSEN am Dateiende stehen und brauchen je Ton eine explizite Dark-Variante: der Light-Block (:root[…], Spezifität 0,2,0) schlägt Skin-Light-Blöcke gleicher Spezifität nur über die Reihenfolge; gegen einen Skin-Dark- Block (:root[data-skin][data-theme], 0,3,0) braucht es die gleichwertige Dark-Variante (:root[data-user-accent] [data-theme], 0,3,0 + spätere Position). Die var()-Referenzen lösen am Root über [data-theme] ohnehin Theme-korrekt auf — die Dark-Blöcke existieren allein für den Spezifitäts-Sieg. Test: tests/design-tokens.test.ts. ============================================================ */ :root[data-user-accent="gruen"] { --accent: var(--accent-gruen); --accent-ink: var(--accent-gruen-ink); --accent-soft: var(--accent-gruen-soft); } :root[data-user-accent="gruen"][data-theme="dark"] { --accent: var(--accent-gruen); --accent-ink: var(--accent-gruen-ink); --accent-soft: var(--accent-gruen-soft); } :root[data-user-accent="terrakotta"] { --accent: var(--accent-terrakotta); --accent-ink: var(--accent-terrakotta-ink); --accent-soft: var(--accent-terrakotta-soft); } :root[data-user-accent="terrakotta"][data-theme="dark"] { --accent: var(--accent-terrakotta); --accent-ink: var(--accent-terrakotta-ink); --accent-soft: var(--accent-terrakotta-soft); } :root[data-user-accent="kobalt"] { --accent: var(--accent-kobalt); --accent-ink: var(--accent-kobalt-ink); --accent-soft: var(--accent-kobalt-soft); } :root[data-user-accent="kobalt"][data-theme="dark"] { --accent: var(--accent-kobalt); --accent-ink: var(--accent-kobalt-ink); --accent-soft: var(--accent-kobalt-soft); } :root[data-user-accent="petrol"] { --accent: var(--accent-petrol); --accent-ink: var(--accent-petrol-ink); --accent-soft: var(--accent-petrol-soft); } :root[data-user-accent="petrol"][data-theme="dark"] { --accent: var(--accent-petrol); --accent-ink: var(--accent-petrol-ink); --accent-soft: var(--accent-petrol-soft); } :root[data-user-accent="ocker"] { --accent: var(--accent-ocker); --accent-ink: var(--accent-ocker-ink); --accent-soft: var(--accent-ocker-soft); } :root[data-user-accent="ocker"][data-theme="dark"] { --accent: var(--accent-ocker); --accent-ink: var(--accent-ocker-ink); --accent-soft: var(--accent-ocker-soft); } :root[data-user-accent="pflaume"] { --accent: var(--accent-pflaume); --accent-ink: var(--accent-pflaume-ink); --accent-soft: var(--accent-pflaume-soft); } :root[data-user-accent="pflaume"][data-theme="dark"] { --accent: var(--accent-pflaume); --accent-ink: var(--accent-pflaume-ink); --accent-soft: var(--accent-pflaume-soft); } :root[data-user-accent="schiefer"] { --accent: var(--accent-schiefer); --accent-ink: var(--accent-schiefer-ink); --accent-soft: var(--accent-schiefer-soft); } :root[data-user-accent="schiefer"][data-theme="dark"] { --accent: var(--accent-schiefer); --accent-ink: var(--accent-schiefer-ink); --accent-soft: var(--accent-schiefer-soft); }