/* Werkzeugkasten · design-grundlagen · Tokens (Haus-Fundament) Drei Ebenen (GESTALTUNG.md im Werkzeugkasten): 1. Fundament (diese Datei): feste Namen nach Aufgabe, Hell/Dunkel-Mechanik, Grundwerte. 2. Stil (Baustein stil-…): setzt die Werte unter [data-stil="…"], je Farbe hell (-h) und dunkel (-d). 3. Marke der App: überschreibt einzelne Werte, z. B. :root[data-stil] { --wk-akzent-h: #…; --wk-akzent-d: #…; } Benutzen: immer die Namen ohne Endung (var(--wk-text)). Die Endungen -h/-d setzen nur Stile und Marken. Hell/Dunkel: data-theme="hell" | "dunkel" auf oder einem Bereich; ohne Angabe folgt es dem System. "light" | "dark" gelten genauso (so schalten klmmbrtt, rudel und der Artifact-Viewer). Ein Bereich mit eigenem data-stil oder data-theme rechnet seine Werte selbst (Musterseite: Stile nebeneinander). Technik: Schalter --wk-wenn-hell/--wk-wenn-dunkel („leer“ = an, initial = aus) wählen je Name -h oder -d. Regel für alle Apps: gestrichelt und flach = Vorschlag, durchgezogen mit Schatten = entschieden. Grundwerte unten = Stil „Rand“ (randnotiz), damit die Bausteine auch ohne Stil gut aussehen. */ /* --- Schalter --------------------------------------------------------------------------- */ :root { --wk-wenn-hell: ; --wk-wenn-dunkel: initial; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]):not([data-theme="light"]) { --wk-wenn-hell: initial; --wk-wenn-dunkel: ; color-scheme: dark; } } [data-theme="dunkel"], [data-theme="dark"] { --wk-wenn-hell: initial; --wk-wenn-dunkel: ; color-scheme: dark; } [data-theme="hell"], [data-theme="light"] { --wk-wenn-hell: ; --wk-wenn-dunkel: initial; color-scheme: light; } /* --- Grundwerte (Stil „Rand“) -------------------------------------------------------------- */ :root { --wk-grund-h: #F6F7F9; --wk-grund-d: #12161D; /* Seitengrund */ --wk-flaeche-h: #FFFFFF; --wk-flaeche-d: #1A2029; /* Karten, Dialoge, Eingaben */ --wk-flaeche-2-h: #EEF1F5; --wk-flaeche-2-d: #232A35; /* Hover, Chips, Segmente */ --wk-auswahl-h: #E9EEF6; --wk-auswahl-d: #22324B; /* aktive Zeile, Auswahl */ --wk-text-h: #1B2A41; --wk-text-d: #E6EAF1; /* Text */ --wk-text-2-h: #44546F; --wk-text-2-d: #C2CAD6; /* Sekundärtext stark */ --wk-text-leise-h: #5E6779; --wk-text-leise-d: #98A2B3; /* Nebentext, mind. 4,5:1 */ --wk-linie-h: #DFE3EA; --wk-linie-d: #2A3240; /* Haarlinie, Trenner */ --wk-linie-stark-h: #8A94A6; --wk-linie-stark-d: #66718A; /* Rahmen von Bedienelementen, mind. 3:1 */ --wk-akzent-h: #C4372D; --wk-akzent-d: #F08A80; /* Markenakzent, sparsam */ --wk-auf-akzent-h: #FFFFFF; --wk-auf-akzent-d: #12161D; --wk-haupt-h: #1B2A41; --wk-haupt-d: #E6EAF1; /* Hauptknopf */ --wk-auf-haupt-h: #FFFFFF; --wk-auf-haupt-d: #12161D; --wk-fokus-h: #3B6FD8; --wk-fokus-d: #7AA2F0; --wk-gut-h: #2E7A5A; --wk-gut-d: #5BB98C; --wk-gut-flaeche-h: #E3F2EA; --wk-gut-flaeche-d: #16332A; --wk-gut-text-h: #1F5A41; --wk-gut-text-d: #9AD9B8; --wk-gut-rand-h: #B9D9C8; --wk-gut-rand-d: #2C5A47; --wk-achtung-h: #F2D24B; --wk-achtung-d: #F2D24B; --wk-achtung-flaeche-h: #FDF3C4; --wk-achtung-flaeche-d: #3A3110; --wk-achtung-text-h: #6B5400; --wk-achtung-text-d: #F2DE94; --wk-achtung-rand-h: #D9BE4A; --wk-achtung-rand-d: #6B5A1E; --wk-fehler-h: #C4372D; --wk-fehler-d: #F08A80; --wk-fehler-flaeche-h: #FBE7E4; --wk-fehler-flaeche-d: #3B1D1B; --wk-fehler-text-h: #8E241C; --wk-fehler-text-d: #F6B3AC; --wk-schleier-h: rgba(27,42,65,.35); --wk-schleier-d: rgba(0,0,0,.6); --wk-schatten-1-h: 0 1px 2px rgba(27,42,65,.08), 0 0 0 1px rgba(27,42,65,.07); --wk-schatten-1-d: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06); --wk-schatten-2-h: 0 4px 10px -2px rgba(27,42,65,.12), 0 0 0 1px rgba(27,42,65,.08); --wk-schatten-2-d: 0 4px 12px -2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07); --wk-schatten-3-h: 0 16px 32px -8px rgba(27,42,65,.24), 0 0 0 1px rgba(27,42,65,.08); --wk-schatten-3-d: 0 16px 36px -8px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); /* Ohne Hell/Dunkel */ --wk-radius-s: 4px; --wk-radius-m: 8px; --wk-radius-l: 12px; --wk-radius-xl: 16px; --wk-radius-rund: 999px; --wk-strich: 1px; /* Linien und Rahmen */ --wk-strich-aktiv: 2px; /* aktive Linie, Fokus */ --wk-schrift: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --wk-schrift-anzeige: var(--wk-schrift); /* Titel, Wortmarke */ --wk-schrift-lesen: "Source Serif 4", Georgia, serif; /* langer Lesetext, Zitate */ --wk-schrift-mono: ui-monospace, "Cascadia Mono", Menlo, monospace; --wk-groesse-titel: 26px; --wk-groesse-abschnitt: 16px; --wk-groesse-gross: 15px; --wk-groesse-text: 14px; --wk-groesse-klein: 12.5px; /* nie kleiner als 10 px, Fließtext nie unter 12 px */ --wk-gewicht-titel: 700; --wk-gewicht-abschnitt: 600; --wk-gewicht-stark: 600; --wk-laufweite-titel: -.015em; --wk-zeilenhoehe: 1.5; --wk-abstand-1: 4px; --wk-abstand-2: 8px; --wk-abstand-3: 12px; --wk-abstand-4: 16px; --wk-abstand-5: 24px; --wk-abstand-6: 32px; --wk-dauer-kurz: 120ms; --wk-dauer-mittel: 200ms; } /* --- Auflösen: je Name hell oder dunkel ------------------------------------------------------ Auf :root und auf jedem Bereich mit eigenem Stil oder Thema neu berechnen. Fehlt ein -d, gilt -h. */ :root, [data-stil], [data-theme] { --wk-grund: var(--wk-wenn-hell, var(--wk-grund-d, var(--wk-grund-h))) var(--wk-wenn-dunkel, var(--wk-grund-h)); --wk-flaeche: var(--wk-wenn-hell, var(--wk-flaeche-d, var(--wk-flaeche-h))) var(--wk-wenn-dunkel, var(--wk-flaeche-h)); --wk-flaeche-2: var(--wk-wenn-hell, var(--wk-flaeche-2-d, var(--wk-flaeche-2-h))) var(--wk-wenn-dunkel, var(--wk-flaeche-2-h)); --wk-auswahl: var(--wk-wenn-hell, var(--wk-auswahl-d, var(--wk-auswahl-h))) var(--wk-wenn-dunkel, var(--wk-auswahl-h)); --wk-text: var(--wk-wenn-hell, var(--wk-text-d, var(--wk-text-h))) var(--wk-wenn-dunkel, var(--wk-text-h)); --wk-text-2: var(--wk-wenn-hell, var(--wk-text-2-d, var(--wk-text-2-h))) var(--wk-wenn-dunkel, var(--wk-text-2-h)); --wk-text-leise: var(--wk-wenn-hell, var(--wk-text-leise-d, var(--wk-text-leise-h))) var(--wk-wenn-dunkel, var(--wk-text-leise-h)); --wk-linie: var(--wk-wenn-hell, var(--wk-linie-d, var(--wk-linie-h))) var(--wk-wenn-dunkel, var(--wk-linie-h)); --wk-linie-stark: var(--wk-wenn-hell, var(--wk-linie-stark-d, var(--wk-linie-stark-h))) var(--wk-wenn-dunkel, var(--wk-linie-stark-h)); --wk-akzent: var(--wk-wenn-hell, var(--wk-akzent-d, var(--wk-akzent-h))) var(--wk-wenn-dunkel, var(--wk-akzent-h)); --wk-auf-akzent: var(--wk-wenn-hell, var(--wk-auf-akzent-d, var(--wk-auf-akzent-h))) var(--wk-wenn-dunkel, var(--wk-auf-akzent-h)); --wk-haupt: var(--wk-wenn-hell, var(--wk-haupt-d, var(--wk-haupt-h))) var(--wk-wenn-dunkel, var(--wk-haupt-h)); --wk-auf-haupt: var(--wk-wenn-hell, var(--wk-auf-haupt-d, var(--wk-auf-haupt-h))) var(--wk-wenn-dunkel, var(--wk-auf-haupt-h)); --wk-fokus: var(--wk-wenn-hell, var(--wk-fokus-d, var(--wk-fokus-h))) var(--wk-wenn-dunkel, var(--wk-fokus-h)); --wk-gut: var(--wk-wenn-hell, var(--wk-gut-d, var(--wk-gut-h))) var(--wk-wenn-dunkel, var(--wk-gut-h)); --wk-gut-flaeche: var(--wk-wenn-hell, var(--wk-gut-flaeche-d, var(--wk-gut-flaeche-h))) var(--wk-wenn-dunkel, var(--wk-gut-flaeche-h)); --wk-gut-text: var(--wk-wenn-hell, var(--wk-gut-text-d, var(--wk-gut-text-h))) var(--wk-wenn-dunkel, var(--wk-gut-text-h)); --wk-gut-rand: var(--wk-wenn-hell, var(--wk-gut-rand-d, var(--wk-gut-rand-h))) var(--wk-wenn-dunkel, var(--wk-gut-rand-h)); --wk-achtung: var(--wk-wenn-hell, var(--wk-achtung-d, var(--wk-achtung-h))) var(--wk-wenn-dunkel, var(--wk-achtung-h)); --wk-achtung-flaeche: var(--wk-wenn-hell, var(--wk-achtung-flaeche-d, var(--wk-achtung-flaeche-h))) var(--wk-wenn-dunkel, var(--wk-achtung-flaeche-h)); --wk-achtung-text: var(--wk-wenn-hell, var(--wk-achtung-text-d, var(--wk-achtung-text-h))) var(--wk-wenn-dunkel, var(--wk-achtung-text-h)); --wk-achtung-rand: var(--wk-wenn-hell, var(--wk-achtung-rand-d, var(--wk-achtung-rand-h))) var(--wk-wenn-dunkel, var(--wk-achtung-rand-h)); --wk-fehler: var(--wk-wenn-hell, var(--wk-fehler-d, var(--wk-fehler-h))) var(--wk-wenn-dunkel, var(--wk-fehler-h)); --wk-fehler-flaeche: var(--wk-wenn-hell, var(--wk-fehler-flaeche-d, var(--wk-fehler-flaeche-h))) var(--wk-wenn-dunkel, var(--wk-fehler-flaeche-h)); --wk-fehler-text: var(--wk-wenn-hell, var(--wk-fehler-text-d, var(--wk-fehler-text-h))) var(--wk-wenn-dunkel, var(--wk-fehler-text-h)); --wk-schleier: var(--wk-wenn-hell, var(--wk-schleier-d, var(--wk-schleier-h))) var(--wk-wenn-dunkel, var(--wk-schleier-h)); --wk-schatten-1: var(--wk-wenn-hell, var(--wk-schatten-1-d, var(--wk-schatten-1-h))) var(--wk-wenn-dunkel, var(--wk-schatten-1-h)); --wk-schatten-2: var(--wk-wenn-hell, var(--wk-schatten-2-d, var(--wk-schatten-2-h))) var(--wk-wenn-dunkel, var(--wk-schatten-2-h)); --wk-schatten-3: var(--wk-wenn-hell, var(--wk-schatten-3-d, var(--wk-schatten-3-h))) var(--wk-wenn-dunkel, var(--wk-schatten-3-h)); /* Schriftgrade als Kurzschreibweise für font */ --wk-h1: var(--wk-gewicht-titel) var(--wk-groesse-titel)/1.25 var(--wk-schrift-anzeige); --wk-h2: var(--wk-gewicht-abschnitt) var(--wk-groesse-abschnitt)/1.35 var(--wk-schrift-anzeige); --wk-h3: var(--wk-gewicht-stark) var(--wk-groesse-gross)/1.4 var(--wk-schrift); --wk-text-font: 400 var(--wk-groesse-text)/var(--wk-zeilenhoehe) var(--wk-schrift); --wk-klein: 400 var(--wk-groesse-klein)/1.5 var(--wk-schrift); /* Alte Namen aus 0.1 (randnotiz), damit nichts bricht. Neue Arbeit nimmt die Namen oben. */ --wk-tinte: var(--wk-text); --wk-tinte-2: var(--wk-text-2); --wk-blei: var(--wk-text-leise); --wk-papier: var(--wk-grund); --wk-linie-l: var(--wk-linie); --wk-rahmen: var(--wk-linie-stark); --wk-gut-bg: var(--wk-gut-flaeche); --wk-achtung-bg: var(--wk-achtung-flaeche); --wk-fehler-bg: var(--wk-fehler-flaeche); --wk-r-xs: var(--wk-radius-s); --wk-r-sm: 6px; --wk-r-md: var(--wk-radius-m); --wk-r-lg: var(--wk-radius-l); --wk-r-xl: var(--wk-radius-xl); --wk-e1: var(--wk-schatten-1); --wk-e2: var(--wk-schatten-2); --wk-e3: var(--wk-schatten-3); }