/* ========================================================================= Designtokens — Umsetzung von DESIGN.md. Werte werden NUR hier geändert, nie direkt in Komponenten. Richtung (fünfte Fassung): heller Arbeitsbereich, dunkle Navigation, ein Akzent aus der Hausmarke. Die vier verworfenen Fassungen waren gegen Entwicklerwerkzeuge gemessen — falsche Referenzklasse, siehe DESIGN.md §11. ========================================================================= */ :root { color-scheme: light; /* ---------- Flächen. Kühl-neutral, mit *sichtbaren* Stufen. ---------- Der Fehler der Vorfassung waren vier Grautöne, die drei Zahlenwerte auseinanderlagen — nominell eine Hierarchie, für das Auge eine Fläche. Hier sind es echte Schritte: Papier, Grund, Einlass, Aktiv. */ --flaeche:#FFFFFF; /* Karten, Tabellen, Formulare — das Papier */ --grund:#F4F6F8; /* Seitengrund, auf dem das Papier liegt */ --grund-2:#EAEEF2; /* Tabellenkopf, Einlass, Überfahren */ --grund-3:#DDE4EA; /* ausgewählt, gedrückt */ --linie:#E3E8ED; /* Haarlinie zwischen Zeilen und Blöcken */ --linie-stark:#C5CED6; /* Rahmen von Bedienelementen */ /* ---------- Die Tinte. Navigation und der Rahmen um Kundenvorschauen. ---------- Dunkel, aber nicht schwarz: ein tiefes Petrol. Es trennt die Navigation sofort vom Inhalt — genau das, was der einfarbigen Fassung fehlte — und umschließt die Vorschau wie ein Leuchtkasten das Bild. */ --tinte-900:#0C1D26; --tinte-800:#132B37; --tinte-700:#1C3C4B; --tinte-linie:#26495B; --auf-tinte:#DCE7ED; --auf-tinte-2:#8CA5B2; /* ---------- Schrift auf hellem Grund. ---------- */ --text:#101B21; --text-2:#4A5A64; /* #78878F war 3,4:1 auf dem Seitengrund — gemessen im Browser, nicht geschätzt. Unter 4,5:1 ist 12-px-Text nach WCAG AA durchgefallen, und genau in dieser Stufe stehen Beschriftungen, Hilfetexte und Zeitangaben. #5F7079 liegt bei 4,8:1 und bleibt sichtbar heller als --text-2. */ --text-3:#5F7079; /* Platzhalter sind Hinweise, kein Inhalt, und dürfen heller bleiben — ein Platzhalter in Textfarbe sieht aus wie ein ausgefülltes Feld. */ --text-platzhalter:#8A98A0; --text-invers:#FFFFFF; /* ---------- Der Akzent. ---------- Das Indigo der Hausmarke (alroanalytics.com, gemessen #6366F1), für hellen Grund vertieft, damit es als Text die Kontrastanforderung erfüllt. Es trägt genau vier Dinge: Primärhandlung, aktiver Navigationspunkt, Verweis, Fokusring. Sonst nichts — ein Akzent, der überall liegt, ist keiner. **Eine** Stellschraube: --marke-farbe. Alles andere wird daraus abgeleitet, damit die Hausfarbe einer Organisation die Oberfläche vollständig und stimmig einfärbt. Vorher überschrieb sie nur --akzent — der helle Ton in der dunklen Seitenleiste blieb Indigo, während die Knöpfe schon die Hausfarbe trugen. */ --marke-farbe:#4F46E5; /* Feste Werte als Rückfall für Browser ohne color-mix. Ohne sie wären die Tokens dort ungültig, und die Oberfläche verlöre jede Akzentfarbe. */ --akzent:#4F46E5; --akzent-tief:#4338CA; /* Überfahren, gedrückt */ --akzent-hell:#818CF8; /* auf dunklem Grund */ --akzent-weich:#EEF0FE; /* Tönung: ausgewählte Zeile, Hinweisfläche */ --akzent-linie:#C7CBFB; /* ---------- Bedeutungsfarben. ---------- Jetzt mit eigener Fläche UND eigener Linie, sonst verschwimmen sie auf Weiß. Drei Zustände, mehr braucht ein Projekt nicht. */ --gut:#156C45; --gut-flaeche:#E6F5EE; --gut-linie:#B4E0C9; --achtung:#8A5A00; --achtung-flaeche:#FDF3E1; --achtung-linie:#EFDAAD; --kritisch:#B3261E; --kritisch-flaeche:#FDECEA; --kritisch-linie:#F4C5BF; --ruhig:#4A5A64; --ruhig-flaeche:#EAEEF2; --ruhig-linie:#D5DDE4; /* ---------- Die Anmerkungsmarke. ---------- Kein Markenelement, sondern ein Werkzeugzeichen: Sie liegt in der Website des Kunden und muss dort auffallen — egal ob diese hell oder dunkel ist. Deshalb der Akzent mit weißem Ring. */ --marke:#4F46E5; --marke-ring:#FFFFFF; /* ---------- Rollen ---------- */ --fokus:rgba(79,70,229,.45); /* ---------- Schrift: zwei Familien mit klar getrennten Aufgaben ---------- Eine einzige Familie hatte die Oberfläche zum Einerlei gemacht. Bricolage Grotesque ist schmallaufend und eigenwillig, Instrument Sans weit und ruhig; der Gegensatz ist der Zweck. Beide selbst gehostet (scripts/fetch_fonts.py). */ --font-ui:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --font-display:"Bricolage Grotesque",var(--font-ui); --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --font-icon:"Material Symbols Rounded"; /* 14px statt 13px: Das Portal wird zweimal im Monat geöffnet, nicht acht Stunden am Tag bedient. Werkzeugdichte war hier das falsche Vorbild. */ --fs-micro:11px; --fs-xs:12px; --fs-sm:12.5px; --fs-base:14px; --fs-body:15px; --fs-lg:15px; --fs-xl:17px; --fs-2xl:20px; --fs-3xl:29px; --lh-ui:1.5; --lh-doc:1.7; --lh-head:1.12; /* ---------- Laufweite und Gewicht ---------- */ --sp-display:-.028em; --sp-head:-.018em; --sp-body:-.004em; --sp-code:.08em; --gw-display:600; --gw-head:600; --gw-mittel:550; /* ---------- Raum ---------- */ --s1:4px; --s2:6px; --s3:10px; --s4:14px; --s5:18px; --s6:24px; --s7:32px; --s8:44px; --s9:64px; --zeile:38px; /* Tabellenzeile — 34px war für ein Kundenportal zu eng */ --kopf:52px; --seitenleiste:238px; /* ---------- Form ---------- */ --r-base:8px; --r-input:7px; --r-pop:11px; --r-rund:999px; /* ---------- Schatten. Auf hellem Grund tragen Linien, nicht Schatten. ---------- */ --schatten-karte:0 1px 2px rgba(16,27,33,.04); --schatten-blatt:0 1px 3px rgba(16,27,33,.07), 0 18px 44px -22px rgba(16,27,33,.16); --schatten-pop:0 2px 6px rgba(16,27,33,.10), 0 18px 40px -16px rgba(16,27,33,.22); --tempo:160ms; --kurve:cubic-bezier(.22,.61,.36,1); } @supports (color: color-mix(in srgb, red 50%, white)) { :root { --akzent:var(--marke-farbe); --akzent-tief:color-mix(in srgb, var(--marke-farbe) 82%, #000); --akzent-hell:color-mix(in srgb, var(--marke-farbe) 58%, #fff); --akzent-weich:color-mix(in srgb, var(--marke-farbe) 7%, #fff); --akzent-linie:color-mix(in srgb, var(--marke-farbe) 26%, #fff); --marke:var(--marke-farbe); --fokus:color-mix(in srgb, var(--marke-farbe) 45%, transparent); } /* Auf dunklem Grund kehrt sich die Richtung um: aufhellen statt abdunkeln. */ .dunkel { --akzent:color-mix(in srgb, var(--marke-farbe) 58%, #fff); --akzent-tief:color-mix(in srgb, var(--marke-farbe) 78%, #fff); --akzent-weich:color-mix(in srgb, var(--marke-farbe) 20%, transparent); --akzent-linie:color-mix(in srgb, var(--marke-farbe) 40%, transparent); --fokus:color-mix(in srgb, var(--marke-farbe) 62%, #fff); } } /* * Bewusst **kein** umschaltbares Theme, sondern zwei feste Welten mit je einer * Aufgabe (DESIGN.md §3): * * hell — Projektraum, Unterlagen, Listen. Ein Ort zum Lesen. * dunkel — Navigation und der Rahmen um die Kundenvorschau. Ein Leuchtkasten: * Die Website des Kunden ist fast immer hell; ein heller Rahmen * darum ließe das Auge zwischen zwei gleich hellen Flächen suchen. * * Deshalb steht die dunkle Familie als eigene Tokengruppe (--tinte-*) neben der * hellen und nicht als Gegenstück dazu. */