/* ============================================================================ pia. Tokenschicht · TOMORIS.Design 3.0.0 Die EINE Stelle, an der ein Farb-, Radius- oder Schattenwert entsteht. Alles andere unter app/ arbeitet ab hier mit var(--name). Geladen wird sie NACH /vendor/tomoris-tokens.css und /vendor/tomoris-base.css. ETAPPE B. In der Fundament-Etappe (1.0.1 -> 2.0.0) galt "optisch aendert sich nichts". Das gilt hier NICHT mehr: das Paket fuehrt, pia. zieht nach. Was sich sichtbar aendert, steht mit Zahl im PR. --------------------------------------------------------------------------- WAS 3.0.0 AN DIESER DATEI GEAENDERT HAT 1. data-theme ist WEG - und das ist gemessen, nicht uebernommen. Unter 2.0.0 waren ohne data-theme 55 von 78 Rollen LEER (23 belegt); der Riegel musste data-theme="hell" deshalb erzwingen. Unter 3.0.0 sind es 74 von 78, in beiden Modi. Erst damit ist der Systemrueckfall benutzbar, und erst damit ist "kein Umschalter" kein Rueckschritt. Die vier fehlenden sind --tm-brand-core/-pulse/-fusion/-cloud: Namen aus 2.0.0, die 3.0.0 nicht mehr fuehrt und die pia. nie benutzt hat. 2. Die Buehne hat drei Tiefen (--tm-stage, -2, -3) und eine zweite Textstufe (--tm-stage-text-2). Der KI-Schleier steht darauf. 3. Akzentzustaende (--tm-accent-hover, -soft, -ink, -text) und eine Schattenleiter (--tm-shadow-sm, --tm-shadow, --tm-shadow-overlay, --tm-scrim) sind neu. Beides stand vorher als Literal im Markup. 4. Markenwerte im Original: --tm-brand-1 bis -4 sind bei pia. Pine, Sun, Coral und Paper - NICHT die TOMORIS-Werte. Sie sind modusfest und ausdruecklich NICHT kontrastkorrigiert: sie gehoeren in Illustrationen, nie an Text. --------------------------------------------------------------------------- WAS DER HAUPTVERSIONSSPRUNG SONST NOCH MITBRINGT (gemessen 04.08.2026) 17 Werte der Farbwelt pia./hell haben sich geaendert, obwohl im Auftrag davon nichts steht. Der groesste: --tm-text-1 #28291f -> #1e4238 dE2000 14,43 13,66:1 -> 10,31:1 Der Lauftext war warmes Anthrazit und ist jetzt Dunkelgruen. 2.0.0 trug an dieser Stelle sogar den Kommentar "Lauftext ist warmes Anthrazit, nicht Dunkelgruen" - 3.0.0 hat die Entscheidung umgedreht. Beide Werte bestehen AA deutlich; die Aenderung ist sichtbar und gewollt, aber sie kommt aus dem Paket und nicht aus diesem Auftrag. Die vollstaendige Tabelle steht im PR. --------------------------------------------------------------------------- ZWEI REGELN, DIE DREIMAL GELD GEKOSTET HABEN - HIER EINGEHALTEN NIE --tm-text-1 als Flaeche. Das ist eine Textfarbe und kippt im Dunkelmodus ins Helle. In pia. gab es dafuer zwei Fundstellen (#toast und #roleSw in pia.css/product.css, beide background:var(--ink)); sie stehen jetzt auf --stage. Fuer dunkle Flaechen im hellen Produkt ist --tm-stage da. --tm-text-4 ist im HELLMODUS keine eigene Stufe: sie faellt dort mit text-3 zusammen (beide #526b60, gemessen). pia. fuehrt sie deshalb NICHT als eigene Farbe. Wo eine vierte Abstufung gebraucht wird, arbeitet die Sichtflaeche mit Groesse und Gewicht. --------------------------------------------------------------------------- WARUM HINTER JEDEM var() DER ALTE WERT STEHT Faellt das Paket aus - Netz, Deploy, ein Tippfehler im Pfad -, sieht pia. aus wie vorher statt zusammenzubrechen. Der Rueckfallwert ist KEIN Nachweis, dass das Paket geladen wurde, und er ersetzt keinen. Den Nachweis fuehrt der Abruf von /vendor/tomoris-tokens.css im Deploy. ============================================================================ */ :root { /* ---------- Flaechen und Linien ---------- */ --paper: var(--tm-bg, #FBF9F3); --paper2: var(--tm-bg-soft, #F3ECDF); --card: var(--tm-surface, #FFFFFF); --card2: var(--tm-surface-2, #FBF7F0); --card3: var(--tm-surface-3, #F4F1E6); --line: var(--tm-border, #E7E2D2); --line2: var(--tm-border-weak, #F2ECE0); --line3: var(--tm-border-strong, #D3C7B2); --hover: var(--tm-hover, #FBF8F2); /* Glasleiste. Vorher stand rgba(251,249,243,.92) als Literal in index.html - im Dunkelmodus waere das eine helle Scheibe vor dunklem Grund gewesen. */ --glass: var(--tm-glass, rgba(255, 255, 255, .72)); --glass-line: var(--tm-glass-border, rgba(30, 66, 56, .12)); /* ---------- Text: drei Stufen ---------- */ --ink: var(--tm-text-1, #28291F); --ink2: var(--tm-text-2, #41594F); --mut: var(--tm-text-3, #6E6A5C); /* ---------- Die dunkelgruene Buehne, drei Tiefen ---------- */ --pine: var(--tm-stage, #1E4238); --pine2: var(--tm-stage-2, #173730); --pine3: var(--tm-stage-3, #255045); --pinetx: var(--tm-stage-ink, #EAF2EC); --pinetx2: var(--tm-stage-text-2, #C8DCCF); --pinemut: var(--tm-stage-text-3, #9DBBA8); /* Sonnengelb. Die Rolle heisst im Paket "Akzent AUF der Buehne", pia. benutzt sie auch abseits davon (der Punkt auf dem "pia.", der Fokusring, das KI-Abzeichen, die Ankuendigungsleiste). Der Wert ist in beiden Modi derselbe - deshalb traegt die Ankuendigungsleiste eine feste dunkle Tinte. */ --sun: var(--tm-stage-accent, #F2A007); /* Tinte AUF dem Sonnengelb. Ein Fachwert, kein Paketwert: das Paket fuehrt zu --tm-stage-accent keine Tinte, und weil --sun in beiden Modi derselbe Ton ist, waere ein modusabhaengiger Wert hier sogar falsch. Gemessen wie eine Paketfarbe - Zahl im PR. */ --sun-ink: #3D2C00; /* ---------- Der Akzent, mit seinen Zustaenden ---------- */ --primary: var(--tm-accent, #E4572E); --primary-ink: var(--tm-accent-ink, #FFFFFF); --primary-text: var(--tm-accent-text, #C9431F); --primary-hover: var(--tm-accent-hover, #AB3617); --primary-soft: var(--tm-accent-soft, #FDEEE7); /* ---------- Getoente Zustandsflaechen: Flaeche, Tinte, Punkt ---------- Reihe je Signal, wie das Paket sie fuehrt: --tm-X ist der Punkt, --tm-X-ink der Text im Abzeichen, --tm-X-fill dessen Flaeche. */ --ok-fill: var(--tm-ok-fill, #E3F1E7); --ok-text: var(--tm-ok, #2E6E45); --ok-ink: var(--tm-ok-ink, #255C39); --warn-fill: var(--tm-warn-fill, #FCEFD4); --warn-text: var(--tm-warn, #9A6B00); --warn-ink: var(--tm-warn-ink, #7A5600); --crit-fill: var(--tm-crit-fill, #FBE2DA); --crit-text: var(--tm-crit, #B03A1B); --crit-ink: var(--tm-crit-ink, #8F2F16); --info-fill: var(--tm-info-fill, #E3ECF8); --info-text: var(--tm-info, #2E5FA3); --info-ink: var(--tm-info-ink, #264E86); --unknown-fill: var(--tm-unknown-fill, #F2F2F0); --unknown-text: var(--tm-unknown, #5A5A55); --unknown-ink: var(--tm-unknown-ink, #4A4A46); /* ---------- Schattenleiter und Verdunkler ---------- Vorher standen hier und in vier weiteren Dateien handgemischte rgba-Schatten. Im Dunkelmodus war jeder davon falsch: ein Schatten aus Anthrazit auf dunkelgruenem Grund ist unsichtbar. */ --sh-sm: var(--tm-shadow-sm, 0 1px 3px rgba(30, 66, 56, .10)); --sh: var(--tm-shadow, 0 16px 40px rgba(30, 66, 56, .12)); --sh-overlay: var(--tm-shadow-overlay, 0 24px 64px rgba(30, 66, 56, .25)); --scrim: var(--tm-scrim, rgba(23, 55, 48, .55)); /* ---------- Radien ---------- Modusfrei an [data-app], nicht an [data-app][data-theme]. --r-button ist bei pia. 999px: der runde Knopf ist eine Entscheidung des Pakets fuer diese Farbwelt, keine lokale Vorliebe. */ --r-box: var(--tm-radius-box, 12px); --r-pill: var(--tm-radius-pill, 999px); --r-card: var(--tm-radius-card, 18px); --r-button: var(--tm-radius-button, 999px); /* Der Kartenradius der Anwendung. Zeigt seit 3.0.0 auf dieselbe Rolle wie --r-card - 14px war ein eigener Wert ohne Entsprechung. */ --r: var(--tm-radius-card, 14px); /* ---------- MARKENWERTE im Original ---------- pia. fuehrt eigene: Pine, Sun, Coral, Paper. Sie sind modusfest, NICHT kontrastkorrigiert und gehoeren in Illustrationen - nie an Text. Genau dafuer werden sie hier gebraucht: die beiden SVG der Sichtflaeche trugen ihre Farben bis zur Etappe B als Literal und waren im Dunkelmodus unlesbar. */ --brand-pine: var(--tm-brand-1, #1E4238); --brand-sun: var(--tm-brand-2, #F2A007); --brand-coral: var(--tm-brand-3, #E4572E); --brand-paper: var(--tm-brand-4, #FBF9F3); /* ---------- FACHFARBEN: bleiben in der Anwendung ---------- Das Paket fuehrt sie bewusst nicht (README, Abschnitt "Fachfarben"). Die vier Kategorien der Klebepunkt-Navigation tragen ihre Farbe von der Seitenleiste bis in den Ausdruck. Sie bekommen dieselbe Kontrastpruefung wie das Paket. Gemessen im Dunkelmodus reissen die Hellmodus-Werte als TEXT die AA-Grenze, deshalb fuehrt jede Kategorie zwei Werte: --c-X ist der Punkt (Flaeche), --c-X-tx ist die Schrift. Zahlen im PR. --c-doku ist NICHT --primary: der Markenwert #E4572E bleibt als Kategorie- und Illustrationsfarbe erhalten, korrigiert wurde nur der Akzent. */ --c-doku: #E4572E; --c-eltern: #2E6FB7; --c-plan: #3E8E5A; --c-orga: #C98A00; --c-doku-tx: #B33F1D; --c-eltern-tx: #275E9C; --c-plan-tx: #2F6E45; --c-orga-tx: #8A6000; /* ---------- Bewegung ---------- Zwei Dauern, ueberall dieselben: 160ms fuer Hover, 320ms fuer den Kartenaufbau. Die Werte kommen aus dem Paket. */ --dur-fast: var(--tm-dur-fast, 160ms); --dur-slow: var(--tm-dur-slow, 320ms); --ease: var(--tm-ease, cubic-bezier(.2, .7, .3, 1)); } /* Der Dunkelmodus braucht andere Kategorie-SCHRIFTfarben: die Hellmodus-Werte erreichen auf dunklem Grund keine 4,5. Die Flaechenwerte (--c-*) bleiben, sie tragen den Klebepunkt und werden nie beschriftet. Gemessen, Zahlen im PR. */ @media (prefers-color-scheme: dark) { :root { --c-doku-tx: #FF9C78; --c-eltern-tx: #8FB8EA; --c-plan-tx: #7FC79A; --c-orga-tx: #E5B54A; } } /* DIE AUSDRUECKLICHE WAHL, beide Richtungen. Ohne diesen Block waere der Umschalter Dekoration - und zwar so, dass es niemandem auffaellt. Gemessen am 07.08.2026: das Hauspaket kann [data-theme] laengst (10 Regeln fuer "dunkel", 18 fuer "hell"). Diese Datei konnte es NICHT - null Treffer fuer [data-theme] in allen fuenf app/css-Dateien. Die vier Kategorie- SCHRIFTfarben oben hingen allein an der Medienabfrage. Was daraus folgt, ist kein Schoenheitsfehler, sondern ein Kontrastbruch in BEIDE Richtungen: dunkel gewaehlt auf hellem System -> das Paket schaltet dunkel, diese vier Farben bleiben auf ihren Hellwerten. Genau die Werte, von denen der Block darueber sagt, dass sie auf dunklem Grund keine 4,5 erreichen. hell gewaehlt auf dunklem System -> das Paket schaltet hell, die Medien- abfrage feuert trotzdem und legt die Dunkelwerte auf hellen Grund. DESHALB SETZT "hell" DIE WERTE AUSDRUECKLICH ZURUECK und verlaesst sich nicht darauf, dass die Medienabfrage nicht gefeuert hat. Auf einem dunklen System hat sie gefeuert. DIE REIHENFOLGE TRAEGT DIE REGEL. Beide Bloecke stehen NACH der Medienabfrage und sind gleich spezifisch wie das :root darin; bei gleicher Spezifitaet gewinnt der spaetere. Wer sie nach oben schiebt, kippt die Dunkelwahl still ins Helle - derselbe Fall, den CCR in dashboard-template.html Zeile 75 ff. festhaelt: dort schlug eine Selektorliste die gleich spezifische Dunkelregel, weil sie spaeter stand. */ :root[data-theme="hell"] { --c-doku-tx: #B33F1D; --c-eltern-tx: #275E9C; --c-plan-tx: #2F6E45; --c-orga-tx: #8A6000; } :root[data-theme="dunkel"] { --c-doku-tx: #FF9C78; --c-eltern-tx: #8FB8EA; --c-plan-tx: #7FC79A; --c-orga-tx: #E5B54A; } /* ==== FACHFARBEN VON PIA. — sie bleiben hier ================================ Aufbau wie in TOMORIS-Space (apps/web/src/app/globals.css): eigenes Praefix `--pia-`, damit auf einen Blick sichtbar ist, dass diese Werte NICHT aus dem Tokenpaket kommen und auch nicht dorthin gehoeren. Sie bekommen dieselbe Kontrastpruefung wie das Paket - in BEIDEN Modi, gegen die Flaeche, auf der sie wirklich liegen (tests/fachfarben-kontrast.test.js). WARUM SIE EIGENE NAMEN BRAUCHEN UND KEINE ROLLE: Gemessen am 05.08.2026 tragen pia.css und product.css 59 harte Farbwerte an 111 Fundstellen. Genau fuenf davon haben eine Paketrolle, die im Hellmodus denselben Wert traegt. Die uebrigen sind keine Uebersetzung, sondern eine Gestaltungsentscheidung - und eine Farbe, die eine FACHLICHE Aussage traegt, gehoert ohnehin nicht in ein Paket, das acht Dienste teilen. --------------------------------------------------------------------------- --pia-druck-flaeche: die Flaeche des AUSDRUCKS. Sie ist bewusst KEIN --card. Eine Ich-Mappe wird auf Papier gedruckt; sie bleibt weiss, auch wenn das Geraet dunkel steht. Waere sie --card, wuerde der Ausdruck im Dunkelmodus dunkelgruen - und zwar erst dann, wenn jemand ihn in der Hand haelt. Genau diese Klasse von Fehler faellt bei einer Bildschirmabnahme nicht auf. --------------------------------------------------------------------------- */ :root { --pia-druck-flaeche: #FFFFFF; /* Schrift auf einer Kategoriefarbe (.cat). Die vier Kategoriefarben sind Fachfarben; ihre Tinte ist es deshalb auch. */ --pia-kategorie-ink: #FFFFFF; /* GEZOGEN am 18.08.2026, Entscheidung Thomas vom 05.08.2026. Bis dahin stand hier Weiss auf --sun, damit die Werteumstellung (#97) ihre Zusage "wertgleich" halten konnte. Der Preis dafuer war eine Flaeche, die AA riss. GEMESSEN gegen TOMORIS.Design 3.1.0, nicht gegen den Fallback geraten: fuer pia. fuehrt das Paket --tm-stage-accent: #f2a007 in ALLEN DREI pia-Bloecken (hell, System-dunkel, [data-theme="dunkel"]) - der Ton ist modusfrei, eine Zahl gilt also fuer beide Modi. Weiss auf #F2A007: 2,14 zu 1 - reisst AA #3D2C00 auf #F2A007: 6,29 zu 1 - erfuellt AA (4,5), unter AAA (7,0) .nbadge traegt 10,5px bei Gewicht 800 und ist damit kein Grosstext, es gilt die 4,5er-Schwelle. Die frueher hier und in docs/etappe-c genannten "8,6 zu 1" waren falsch und an keiner Flaeche reproduzierbar; sie sind ersetzt, nicht durchgestrichen. */ --pia-sonne-ink: var(--sun-ink); } /* ==== GRUPPENFARBEN ======================================================== Acht Flaechen fuer die Gruppen eines Hauses - Garderobenschild, Liste, Gruppen-Tablet. Die Schluessel dazu fuehrt api/shared/groups.js (GRUPPENFARBEN); gespeichert wird dort der NAME, nicht der Hexwert, damit es diese Datei ist, die den Ton besitzt, und nicht die Datenbank eines Hauses. EINE TINTE FUER ALLE ACHT, nicht acht Paare. Die Flaechen sind je Modus auf aehnliche Helligkeit gewaehlt, deshalb traegt ein Textton alle. Das ist keine Bequemlichkeit, sondern der Grund, warum es pruefbar bleibt: acht Paare verleiten dazu, eines beim Nachziehen zu vergessen. GEMESSEN am 11.08.2026 (WCAG 2.1, Tinte gegen Flaeche), Riegel: tests/gruppenfarbe-kontrast.test.js - er rechnet die Werte aus DIESER Datei nach, damit eine spaetere Aenderung nicht still unter 4,5 rutscht. hell 9,73 bis 10,49 zu 1 dunkel 7,73 bis 9,33 zu 1 ========================================================================== */ :root { --pia-grp-ink: #26332C; --pia-grp-salbei: #D7E4D3; --pia-grp-himmel: #D3E1EF; --pia-grp-honig: #F5E4BC; --pia-grp-koralle: #F6DAD1; --pia-grp-flieder: #E2DAEE; --pia-grp-minze: #CFE8E1; --pia-grp-sand: #EFE3CE; --pia-grp-stein: #E1E0DA; } @media (prefers-color-scheme: dark) { :root { --pia-grp-ink: #F2F5F1; --pia-grp-salbei: #3C5240; --pia-grp-himmel: #33465C; --pia-grp-honig: #5C4A20; --pia-grp-koralle: #5E3A30; --pia-grp-flieder: #463C58; --pia-grp-minze: #2E4F48; --pia-grp-sand: #544733; --pia-grp-stein: #43423C; } } /* Beide Richtungen ausdruecklich, aus demselben Grund wie bei den vier Kategorie-Schriftfarben weiter oben: auf einem dunklen System hat die Medienabfrage gefeuert, und "hell" muss sie zuruecknehmen statt sich darauf zu verlassen, dass sie es nicht tat. Beide Bloecke stehen NACH der Medienabfrage - wer sie nach oben schiebt, kippt die Wahl still. */ :root[data-theme="hell"] { --pia-grp-ink: #26332C; --pia-grp-salbei: #D7E4D3; --pia-grp-himmel: #D3E1EF; --pia-grp-honig: #F5E4BC; --pia-grp-koralle: #F6DAD1; --pia-grp-flieder: #E2DAEE; --pia-grp-minze: #CFE8E1; --pia-grp-sand: #EFE3CE; --pia-grp-stein: #E1E0DA; } :root[data-theme="dunkel"] { --pia-grp-ink: #F2F5F1; --pia-grp-salbei: #3C5240; --pia-grp-himmel: #33465C; --pia-grp-honig: #5C4A20; --pia-grp-koralle: #5E3A30; --pia-grp-flieder: #463C58; --pia-grp-minze: #2E4F48; --pia-grp-sand: #544733; --pia-grp-stein: #43423C; }