/* ============================================================================ * wawi-farben.css -- Das Farbmanagementsystem. Die einzige Quelle fuer Farbe. * * Drei Stufen, strikt getrennt: * * 1. GRUNDPALETTE Rohe Farbwerte in OKLCH. Sie haben keine Bedeutung. * Im Anwendungs-CSS wird NIE eine --p-* Variable benutzt. * 2. ROLLEN Was die Farbe im Bild tut: Flaeche, Linie, Tinte, * Akzent, Zustand. Nur diese werden verwendet. * 3. MODI Hell, dunkel, Mandantenton, Druck. Sie belegen die * Rollen neu -- die Bauteile merken davon nichts. * * Warum OKLCH: Gleiche Zahl fuer die Helligkeit heisst gleiche gefuehlte * Helligkeit, ueber alle Farbtoene hinweg. In HEX ist ein Gelb mit "50 %" * viel heller als ein Blau mit "50 %" -- deshalb wirken HEX-Paletten * fleckig, und deshalb laesst sich ein Kontrast dort nur raten. * * Regeln, die nicht verhandelbar sind (Begruendung in docs/gestaltung.md): * - Farbe traegt Bedeutung, nie Zierde. * - Keine Aussage haengt allein an der Farbe. Jede Zustandsfarbe hat * zusaetzlich Text, jede Alterungsstufe zusaetzlich eine Zahl. * - Kontrast: 4.5:1 fuer Text, 3:1 fuer Linien, Marken und Symbole. * - Neue Farbe? Erst pruefen, ob eine Rolle fehlt. Eine neue Rolle ist * die Ausnahme, ein neuer Rohton ist fast immer ein Fehler. * ========================================================================= */ /* ---------------------------------------------------------------- Stufe 1 * Grundpalette. Ein kuehles Neutral als Traeger, vier bedeutungstragende * Toene, dazu die Alterungsstaffel als eigener, durchgehender Verlauf. * Der Farbwinkel (letzte Zahl) bleibt innerhalb einer Familie konstant -- * dadurch wirken die Stufen wie eine Familie und nicht wie fuenf Farben. */ :root { /* Neutral -- 258 deg, ein Hauch Blau. Reines Grau wirkt schmutzig. */ --p-neutral-0: oklch(100% 0 0); --p-neutral-25: oklch(98.8% 0.002 258); --p-neutral-50: oklch(97.4% 0.004 258); --p-neutral-100: oklch(95% 0.006 258); --p-neutral-200: oklch(91% 0.008 258); --p-neutral-300: oklch(85% 0.010 258); --p-neutral-400: oklch(72% 0.014 258); --p-neutral-500: oklch(60% 0.016 258); --p-neutral-600: oklch(50% 0.018 258); --p-neutral-700: oklch(40% 0.020 258); --p-neutral-800: oklch(30% 0.022 258); --p-neutral-900: oklch(22% 0.024 258); --p-neutral-950: oklch(16% 0.022 258); /* Blau -- Marke, Akzent, alles Anklickbare. */ --p-blau-50: oklch(97.5% 0.014 258); --p-blau-100: oklch(94% 0.032 258); --p-blau-200: oklch(88% 0.058 258); --p-blau-300: oklch(78% 0.090 258); --p-blau-400: oklch(66% 0.130 258); --p-blau-500: oklch(57% 0.158 258); --p-blau-600: oklch(50% 0.166 258); --p-blau-700: oklch(43% 0.148 258); --p-blau-800: oklch(35% 0.120 258); /* Gruen -- erledigt, bezahlt, in Ordnung. */ --p-gruen-50: oklch(97% 0.020 155); --p-gruen-100: oklch(93% 0.045 155); --p-gruen-200: oklch(86% 0.075 155); --p-gruen-400: oklch(68% 0.130 155); --p-gruen-600: oklch(52% 0.115 155); --p-gruen-700: oklch(44% 0.098 155); /* Bernstein -- unfertig, wartet, Achtung. Nie fuer Fehler. */ --p-bernstein-50: oklch(97.5% 0.025 85); --p-bernstein-100: oklch(94% 0.055 85); --p-bernstein-200: oklch(88% 0.090 85); --p-bernstein-400: oklch(76% 0.140 80); --p-bernstein-600: oklch(58% 0.120 70); --p-bernstein-700: oklch(48% 0.100 65); /* Rot -- Fehler, Verlust, Unwiderrufliches. Sparsam. */ --p-rot-50: oklch(97% 0.020 25); --p-rot-100: oklch(93% 0.040 25); --p-rot-200: oklch(87% 0.070 25); --p-rot-400: oklch(65% 0.170 25); --p-rot-600: oklch(52% 0.180 25); --p-rot-700: oklch(44% 0.155 25); /* Alterungsstaffel der offenen Posten. Eine sequenzielle Skala: gleichmaessig dunkler und saettiger, der Farbwinkel wandert von Gelb (85) nach Rot (25). Kein Regenbogen -- eine Richtung. */ --p-alter-0: var(--p-neutral-300); --p-alter-1: oklch(78% 0.130 85); --p-alter-2: oklch(70% 0.150 62); --p-alter-3: oklch(62% 0.168 42); --p-alter-4: oklch(53% 0.180 25); /* Mandantentoene. Sechs Farbwinkel mit gleicher Helligkeit und Saettigung -- dadurch ist keiner lauter als der andere und alle halten denselben Kontrast. Zuordnung: Mandantennummer modulo 6. */ --p-ton-1: 258; /* Blau */ --p-ton-2: 195; /* Tuerkis */ --p-ton-3: 155; /* Gruen */ --p-ton-4: 85; /* Bernstein */ --p-ton-5: 25; /* Terrakotta */ --p-ton-6: 310; /* Violett */ } /* ---------------------------------------------------------------- Stufe 2 * Rollen, helle Fassung. Ab hier faellt das Wort "blau" nicht mehr. */ :root { color-scheme: light; /* Flaechen, von hinten nach vorn */ --grund: var(--p-neutral-50); /* Seite */ --flaeche: var(--p-neutral-0); /* Karte, Tabelle, Formular */ --flaeche-leise: var(--p-neutral-50); /* Tabellenkopf, Zebra, Leiste */ --flaeche-hoch: var(--p-neutral-0); /* Menue, Dialog ueber allem */ --flaeche-satt: var(--p-neutral-100); /* gedrueckt, ausgewaehlt */ /* Linien */ --linie: var(--p-neutral-200); --linie-leise: var(--p-neutral-100); --linie-stark: var(--p-neutral-300); /* Tinte */ --tinte: var(--p-neutral-900); --tinte-leise: var(--p-neutral-600); --tinte-schwach: var(--p-neutral-500); --auf-farbe: var(--p-neutral-0); /* Text auf gesaettigtem Grund */ /* Akzent -- Marke und alles Anklickbare */ --akzent: var(--p-blau-600); --akzent-stark: var(--p-blau-700); /* Zeigen, Druecken */ --akzent-tinte: var(--p-blau-700); /* Akzentfarbener Text */ --akzent-flaeche: var(--p-blau-50); --akzent-rand: var(--p-blau-200); /* Zustaende. Jeder Zustand hat drei Rollen: Flaeche, Rand, Tinte -- damit eine Marke, ein Kasten und ein Text dieselbe Sprache sprechen. */ --gut-flaeche: var(--p-gruen-50); --gut-rand: var(--p-gruen-200); --gut-tinte: var(--p-gruen-700); --gut-satt: var(--p-gruen-600); --warn-flaeche: var(--p-bernstein-50); --warn-rand: var(--p-bernstein-200); --warn-tinte: var(--p-bernstein-700); --warn-satt: var(--p-bernstein-600); --gefahr-flaeche: var(--p-rot-50); --gefahr-rand: var(--p-rot-200); --gefahr-tinte: var(--p-rot-700); --gefahr-satt: var(--p-rot-600); --info-flaeche: var(--p-blau-50); --info-rand: var(--p-blau-200); --info-tinte: var(--p-blau-700); /* Alterung: der Rand traegt die Stufe, die Flaeche bleibt ruhig. */ --alter-0: var(--p-alter-0); --alter-1: var(--p-alter-1); --alter-2: var(--p-alter-2); --alter-3: var(--p-alter-3); --alter-4: var(--p-alter-4); /* Fokus. Nie entfernen, nie unsichtbar machen. */ --fokus: var(--p-blau-500); /* Schatten sind Hoehe, keine Deko: eine Karte liegt auf der Seite, ein Menue schwebt darueber. Mehr Stufen gibt es nicht. */ --schatten-1: 0 1px 2px oklch(22% 0.024 258 / 0.06); --schatten-2: 0 8px 24px -6px oklch(22% 0.024 258 / 0.18), 0 2px 6px -2px oklch(22% 0.024 258 / 0.10); /* Mandantenton. Der Standardwert gilt, solange keiner gesetzt ist; das Layout setzt ihn je Mandant auf dem -Element. */ --mandant-ton: var(--p-ton-1); --mandant: oklch(52% 0.150 var(--mandant-ton)); --mandant-tinte: oklch(42% 0.130 var(--mandant-ton)); --mandant-flaeche: oklch(96% 0.030 var(--mandant-ton)); --mandant-rand: oklch(86% 0.070 var(--mandant-ton)); } /* ---------------------------------------------------------------- Stufe 3 * Dunkle Fassung. Nur die Rollen werden neu belegt. * * Zwei Faustregeln, die den Unterschied zwischen "dunkel" und "gut dunkel" * ausmachen: Flaechen werden nach vorn heller (nicht dunkler wie im Hellen), * und gesaettigte Farben muessen aufgehellt werden -- ein Blau, das auf * Weiss sitzt, verschwindet auf Schwarz. */ @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { color-scheme: dark; --grund: var(--p-neutral-950); --flaeche: oklch(20% 0.022 258); --flaeche-leise: oklch(24% 0.022 258); --flaeche-hoch: oklch(26% 0.022 258); --flaeche-satt: oklch(30% 0.022 258); --linie: oklch(32% 0.020 258); --linie-leise: oklch(26% 0.020 258); --linie-stark: oklch(42% 0.020 258); --tinte: var(--p-neutral-100); --tinte-leise: var(--p-neutral-400); --tinte-schwach: var(--p-neutral-500); --auf-farbe: oklch(16% 0.022 258); --akzent: var(--p-blau-400); --akzent-stark: var(--p-blau-300); --akzent-tinte: var(--p-blau-300); --akzent-flaeche: oklch(30% 0.070 258); --akzent-rand: oklch(42% 0.100 258); --gut-flaeche: oklch(28% 0.045 155); --gut-rand: oklch(40% 0.070 155); --gut-tinte: oklch(82% 0.100 155); --gut-satt: var(--p-gruen-400); --warn-flaeche: oklch(30% 0.050 80); --warn-rand: oklch(42% 0.075 80); --warn-tinte: oklch(86% 0.110 85); --warn-satt: var(--p-bernstein-400); --gefahr-flaeche: oklch(28% 0.060 25); --gefahr-rand: oklch(40% 0.090 25); --gefahr-tinte: oklch(82% 0.110 25); --gefahr-satt: var(--p-rot-400); --info-flaeche: oklch(28% 0.060 258); --info-rand: oklch(40% 0.090 258); --info-tinte: var(--p-blau-300); --alter-0: var(--p-neutral-600); --alter-1: oklch(80% 0.130 85); --alter-2: oklch(74% 0.150 62); --alter-3: oklch(68% 0.168 42); --alter-4: oklch(64% 0.180 25); --fokus: var(--p-blau-300); --schatten-1: 0 1px 2px oklch(0% 0 0 / 0.4); --schatten-2: 0 8px 24px -6px oklch(0% 0 0 / 0.6), 0 2px 6px -2px oklch(0% 0 0 / 0.4); --mandant: oklch(70% 0.130 var(--mandant-ton)); --mandant-tinte: oklch(80% 0.110 var(--mandant-ton)); --mandant-flaeche: oklch(30% 0.060 var(--mandant-ton)); --mandant-rand: oklch(44% 0.090 var(--mandant-ton)); } } /* Die ausdrueckliche Wahl des Benutzers schlaegt die Systemeinstellung. Der Block ist eine Kopie des obigen -- absichtlich: eine gemeinsame Regel fuer beide Faelle waere kuerzer, aber niemand versteht sie beim Lesen. Wer hier etwas aendert, aendert es zweimal. */ :root[data-thema="dunkel"] { color-scheme: dark; --grund: var(--p-neutral-950); --flaeche: oklch(20% 0.022 258); --flaeche-leise: oklch(24% 0.022 258); --flaeche-hoch: oklch(26% 0.022 258); --flaeche-satt: oklch(30% 0.022 258); --linie: oklch(32% 0.020 258); --linie-leise: oklch(26% 0.020 258); --linie-stark: oklch(42% 0.020 258); --tinte: var(--p-neutral-100); --tinte-leise: var(--p-neutral-400); --tinte-schwach: var(--p-neutral-500); --auf-farbe: oklch(16% 0.022 258); --akzent: var(--p-blau-400); --akzent-stark: var(--p-blau-300); --akzent-tinte: var(--p-blau-300); --akzent-flaeche: oklch(30% 0.070 258); --akzent-rand: oklch(42% 0.100 258); --gut-flaeche: oklch(28% 0.045 155); --gut-rand: oklch(40% 0.070 155); --gut-tinte: oklch(82% 0.100 155); --gut-satt: var(--p-gruen-400); --warn-flaeche: oklch(30% 0.050 80); --warn-rand: oklch(42% 0.075 80); --warn-tinte: oklch(86% 0.110 85); --warn-satt: var(--p-bernstein-400); --gefahr-flaeche: oklch(28% 0.060 25); --gefahr-rand: oklch(40% 0.090 25); --gefahr-tinte: oklch(82% 0.110 25); --gefahr-satt: var(--p-rot-400); --info-flaeche: oklch(28% 0.060 258); --info-rand: oklch(40% 0.090 258); --info-tinte: var(--p-blau-300); --alter-0: var(--p-neutral-600); --alter-1: oklch(80% 0.130 85); --alter-2: oklch(74% 0.150 62); --alter-3: oklch(68% 0.168 42); --alter-4: oklch(64% 0.180 25); --fokus: var(--p-blau-300); --schatten-1: 0 1px 2px oklch(0% 0 0 / 0.4); --schatten-2: 0 8px 24px -6px oklch(0% 0 0 / 0.6), 0 2px 6px -2px oklch(0% 0 0 / 0.4); --mandant: oklch(70% 0.130 var(--mandant-ton)); --mandant-tinte: oklch(80% 0.110 var(--mandant-ton)); --mandant-flaeche: oklch(30% 0.060 var(--mandant-ton)); --mandant-rand: oklch(44% 0.090 var(--mandant-ton)); } /* Mandantentoene, gesetzt vom Layout ueber data-mandantton="1".."6". */ :root[data-mandantton="1"] { --mandant-ton: var(--p-ton-1); } :root[data-mandantton="2"] { --mandant-ton: var(--p-ton-2); } :root[data-mandantton="3"] { --mandant-ton: var(--p-ton-3); } :root[data-mandantton="4"] { --mandant-ton: var(--p-ton-4); } :root[data-mandantton="5"] { --mandant-ton: var(--p-ton-5); } :root[data-mandantton="6"] { --mandant-ton: var(--p-ton-6); } /* Druck. Papier ist weiss, Toner ist teuer, und Farbe traegt auf einem Ausdruck keine Bedeutung mehr -- niemand haelt zwei Blaetter nebeneinander, um einen Farbton zu vergleichen. */ @media print { :root { color-scheme: light; --grund: #fff; --flaeche: #fff; --flaeche-leise: #fff; --flaeche-satt: #fff; --tinte: #000; --tinte-leise: #333; --tinte-schwach: #555; --linie: #999; --linie-leise: #ccc; --linie-stark: #666; --akzent: #000; --akzent-tinte: #000; --akzent-flaeche: #fff; --schatten-1: none; --schatten-2: none; } }