/* Farb- und Form-Tokens — Redesign „Rund“, Stufe 1 (2026-09-19) * * Spec: docs/superpowers/specs/2026-09-19-redesign-rund-design.md. * Hell steht in :root, dunkel in html[data-theme="dark"]. Einen eigenen * Selektor für hell gibt es nicht: applyTheme() in index.html entfernt * data-theme im Hellmodus, statt "light" zu setzen. * * FARBE HAT GENAU ZWEI AUFGABEN. * Wertung: --good, --watch, --bad (gut, beobachten, außerhalb). * Kennfarbe: --todo, --cal, --mail, --call, je eine der vier Orga-Karten. * Alles andere ist Papier (hell) bzw. Graphit (dunkel): --bg die Seite, * --panel Karte und Feld, --tonal aktive Pille, Symbolkreis und eigene * Nachricht, --soft der Kartenrand, --rule die Trennlinie, --kante der Rand * von Feldern und Umriss-Knöpfen, --text/--dim/--faint Text in drei Stufen. * Die Primäraktion ist kein Farbton, sondern die dunkelste (hell) bzw. * hellste (dunkel) Fläche im Bild: --pri, darauf --onpri. Keine Verläufe, * kein Glas; Schatten nur für Schwebendes (FAB, Menü, Sheet, Dialog). * * KONTRAST IST EINE REGEL. Jedes Token, das Text trägt, erreicht auf --bg * und --panel in beiden Modi 4,5:1, --kante 3:1 (WCAG 1.4.11). Auf --tonal * steht nur --text, nie eine Kennfarbe — dort fielen sie auf etwa 4:1. * tests/design-tokens.test.js rechnet das aus dieser Datei nach; wer einen * Wert ändert, sieht dort, ob er noch trägt. * * ALIAS-SCHICHT (bis Stufe 5). Die Module lesen die alten Material-3-Namen * (--md-sys-color-…) heute an rund 330 Stellen. Statt sie in Stufe 1 alle * umzuschreiben, zeigen diese Namen hier auf die neuen Tokens, und zwar nur * in :root: :root und html[data-theme="dark"] sind dasselbe Element, der * Alias löst sich im Dunkelmodus also gegen das dunkle --bg auf. Jede * spätere Stufe stellt ihre Module auf die neuen Namen um, Stufe 5 löscht * die Schicht. Solange ein Modul einen alten Namen liest, darf sein Alias * nicht fehlen: ein var() ohne Wert macht die ganze Deklaration ungültig, * ohne Fehlermeldung. Die Kennfarben tragen seit Stufe 2 (2026-09-22) keinen * Alias mehr: die Orga-Karten lesen --kenn aus ihrer Kennklasse * (components.css, Bausteine der Orga-Karten). * * Glas- und Tiefenwerte gibt es hier seit dem 2026-09-19 nicht mehr: * Karten sind flach, einen Schatten trägt nur, was schwebt * (--schatten-schwebend). Wo Chat und Chatliste bis Stufe 3 noch Glas * zeigen, setzen sie die Werte an ihrem eigenen Wurzelelement. */ :root { color-scheme: light; /* --- Flächen und Linien ------------------------------------------------ */ --bg: #F3F1EC; /* Seite — warmes Papier */ --panel: #FBFAF7; /* Karte, Feld */ --tonal: #E3DED3; /* aktive Pille, Symbolkreis, eigene Nachricht */ --rule: #D6D1C7; /* Trennlinie */ --soft: #E4E0D8; /* Kartenrand (dekorativ, ohne Kontrastpflicht) */ --kante: #878B8F; /* Feldrand, Umriss-Knopf: 3:1 auf --bg und --panel */ /* --- Text --------------------------------------------------------------- */ --text: #16181B; --dim: #565D63; /* Nebentext */ --faint: #646A6F; /* Mikro-Beschriftung, auch „keine Daten“ */ /* --- Primäraktion ------------------------------------------------------- */ --pri: #16181B; --onpri: #F6F4EF; /* --- Kennfarben der Orga-Karten --------------------------------------- */ --todo: #18776A; --cal: #955808; --mail: #4655AE; --call: #BF3A49; /* --- Wertung ------------------------------------------------------------- */ --good: #277549; --watch: #94600B; --bad: #B8412F; /* --- Schwebendes: FAB, Menü, Sheet, Dialog ------------------------------ */ --schatten-schwebend: 0 2px 6px rgb(22 24 27 / .10), 0 10px 28px rgb(22 24 27 / .14); /* --- Modusunabhängig: nur hier, nie im dunklen Block ------------------- */ --scrim: rgb(0 0 0 / .42); --r-orga-karte: 18px; --r-karte: 16px; --r-feld: 14px; --r-pille: 999px; --r-fab: 16px; --r-balken: 4px; --r-sheet: 24px; /* Die schwebende Leiste und alles, was über ihr schwebt (FAB, Diktat-Anzeige), rechnen aus denselben Werten — nie aus einer Zahl im eigenen Stilblock. --leiste-unten ist die Oberkante der Pille über dem Bildschirmrand: Höhe plus Abstand plus Safe-Area. */ --sa-unten: env(safe-area-inset-bottom, 0px); --leiste-hoehe: 64px; --leiste-abstand: 12px; --leiste-unten: calc(var(--leiste-hoehe) + var(--leiste-abstand) + var(--sa-unten)); --fab-groesse: 56px; --schrift-titel: 'Saira Condensed', 'Arial Narrow', sans-serif; --schrift-text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --schrift-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* --- ALIAS-SCHICHT: alte M3-Namen → neue Tokens (bis Stufe 5) ----------- * Kein Hexwert hier: jede Zeile zeigt auf ein Token oben. Acht alte Namen * ohne einen einzigen Leser sind gestrichen (Liste im Test). */ --md-sys-color-background: var(--bg); --md-sys-color-on-background: var(--text); --md-sys-color-surface: var(--bg); --md-sys-color-on-surface: var(--text); --md-sys-color-on-surface-variant: var(--dim); --md-sys-color-surface-container-lowest: var(--panel); --md-sys-color-surface-container-low: var(--panel); --md-sys-color-surface-container: var(--panel); /* Zeilen und Chips „eine Stufe über der Karte“ — mit --tonal stünden sie im Dunkeln als helle Streifen in der Karte. */ --md-sys-color-surface-container-high: var(--soft); --md-sys-color-surface-container-highest: var(--tonal); --md-sys-color-outline: var(--kante); --md-sys-color-outline-variant: var(--rule); --md-sys-color-primary: var(--pri); --md-sys-color-on-primary: var(--onpri); --md-sys-color-primary-container: var(--tonal); --md-sys-color-on-primary-container: var(--text); --md-sys-color-secondary: var(--dim); --md-sys-color-secondary-container: var(--tonal); --md-sys-color-on-secondary-container: var(--text); /* tertiary färbte nur „Hinweise“ in der Mailkarte — das ist Mail-Kennfarbe. */ --md-sys-color-tertiary: var(--mail); --md-sys-color-tertiary-container: color-mix(in srgb, var(--watch) 16%, var(--panel)); --md-sys-color-on-tertiary-container: var(--text); --md-sys-color-error: var(--bad); --md-sys-color-error-container: color-mix(in srgb, var(--bad) 14%, var(--panel)); --md-sys-color-on-error-container: var(--text); --md-sys-shape-corner-small: var(--r-feld); --md-sys-shape-corner-large: var(--r-karte); } html[data-theme="dark"] { color-scheme: dark; /* Graphit. --panel liegt heller als --bg — anders als bei M3, wo die niedrigste Kartenstufe im Dunkeln dunkler war als die Seite. */ --bg: #0E1113; --panel: #151A1D; --tonal: #252D33; --rule: #262D32; --soft: #1C2226; --kante: #5E6A71; --text: #E8EBED; --dim: #9AA5AB; --faint: #85919A; --pri: #EEF0F1; --onpri: #0E1113; --todo: #3FAE9C; --cal: #E3A23B; --mail: #8C95E3; --call: #EA6D77; --good: #5FBF8E; --watch: #D9A441; --bad: #D4685E; /* Auf #0E1113 trägt ein Schatten aus 10–14 % Schwarz nichts. */ --schatten-schwebend: 0 2px 6px rgb(0 0 0 / .45), 0 12px 32px rgb(0 0 0 / .50); }