/* Werkzeugkasten · design-grundlagen · Tokens (Haus-Fundament, Gestaltungsvertrag 1.0) 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. Gestaltungsvertrag: Welche Namen es gibt (Rollen, Skalen, Grenzen, Dichten), steht in vertrag.json (VERTRAG.md). Neue Namen kommen nur über den Vertrag dazu; app-eigene Rollen tragen das Kürzel der App (--kb-*). 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-auf-fehler-h: #FFFFFF; --wk-auf-fehler-d: #12161D; /* Text auf voller Signalfläche (Gefahr-Knopf, Zähler) */ --wk-info-h: #2F5FB3; --wk-info-d: #7AA2F0; /* Hinweis ohne Wertung */ --wk-info-flaeche-h: #E6EEFB; --wk-info-flaeche-d: #1A2740; --wk-info-text-h: #1F4385; --wk-info-text-d: #B5CBF5; --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 Grundwert (fallen auf andere Namen zurück, setzt nur ein Stil, der sie braucht): --wk-akzent-2-h/-d, --wk-auf-akzent-2-h/-d zweiter Akzent, sparsam (Merker, Favorit); fehlt er, gilt --wk-akzent --wk-glas-h/-d durchscheinende Fläche über Bild oder Verlauf (rgba); fehlt sie, gilt --wk-flaeche --wk-glas-rand-h/-d Rand der Glasfläche (rgba, Schmuck, kein Bedienrahmen); fehlt er, gilt --wk-linie Vertrag 1.0 (fallen ohne Wert des Stils auf bestehende Rollen zurück): --wk-feld-h/-d Eingaben und gefüllte Textknöpfe; sonst --wk-flaeche --wk-feld-hover-h/-d Feld und zweiter Knopf unter dem Zeiger; sonst --wk-flaeche-2 --wk-aktiv-h/-d, --wk-auf-aktiv-h/-d das eine aktive Element einer Gruppe; sonst --wk-haupt, --wk-auf-haupt --wk-gedrueckt-h/-d Fläche beim Drücken, gedrückte Umschaltknöpfe; sonst --wk-auswahl --wk-schwebend-h/-d Menü, Popover; sonst --wk-flaeche */ /* 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-glas-unschaerfe: 0px; /* Unschärfe hinter Glasflächen (backdrop-filter); 0 = keine */ --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-abstand-0: 0px; --wk-abstand-7: 48px; --wk-abstand-8: 64px; --wk-abstand-9: 96px; --wk-gewicht-normal: 400; /* drei Gewichte: normal, stark, titel */ --wk-deaktiviert: .5; /* Deckkraft gesperrter Bedienelemente */ --wk-dauer-blatt: 260ms; /* Blatt, Dialog, Betrachter */ --wk-symbol-s: 12px; --wk-symbol-m: 16px; --wk-symbol-l: 20px; --wk-ziel: 24px; /* Mindestmaß jedes Bedienziels; mit Finger 44 px */ /* Ebenen (z-index): global nur über diese Namen, lokale Reihenfolge in einem Baustein 0–10 */ --wk-ebene-inhalt: 1; --wk-ebene-kopf: 20; --wk-ebene-leiste: 48; --wk-ebene-schwebend: 55; --wk-ebene-menue: 100; --wk-ebene-blatt: 120; --wk-ebene-dialog: 1100; --wk-ebene-meldung: 2000; --wk-ebene-ziehen: 3000; --wk-ebene-umgebung: 2147483000; --wk-dauer-kurz: 120ms; --wk-dauer-mittel: 200ms; --wk-dauer-lang: 300ms; /* Gleiten, Zurückfedern (Schieber); feste Zahl, damit JS sie lesen kann */ --wk-kurve: cubic-bezier(.33, 1, .68, 1); /* Haus-Kurve: schnell los, sanft abbremsen (ease-out kubisch) */ --wk-kurve-feiern: cubic-bezier(.34, 1.56, .64, 1); /* Feiern: leichtes Überschwingen (Ziel erreicht, Feld gefüllt) */ --wk-knopf: 36px; /* Höhe .wk-btn (haupt wie normal) */ --wk-knopf-klein: 30px; /* Höhe .wk-btn.klein und .wk-seg button */ --wk-knopf-leise: 28px; /* Höhe leiser Textknöpfe (Kopieren, Vorlesen) */ --wk-tippflaeche: 30px; /* Mindestmaß kleiner Ziele (Symbolknöpfe); mit Finger 44 px */ --wk-lesebreite: 72ch; /* Zeilenlänge für Fließtext und Sprechblasen */ --wk-spalte: 52rem; /* Inhaltsspalte auf großen Bildschirmen (Chat, Artikel); am Telefon volle Breite */ } /* Mit Finger (Telefon, Tablet) ist jede Tippfläche mindestens 44 px hoch; mit Maus bleibt es kompakt. */ @media (pointer: coarse) { :root { --wk-knopf: 44px; --wk-knopf-klein: 44px; --wk-knopf-leise: 44px; --wk-tippflaeche: 44px; --wk-ziel: 44px; } } /* --- 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)); --wk-akzent-2: var(--wk-wenn-hell, var(--wk-akzent-2-d, var(--wk-akzent-2-h, var(--wk-akzent)))) var(--wk-wenn-dunkel, var(--wk-akzent-2-h, var(--wk-akzent))); --wk-auf-akzent-2: var(--wk-wenn-hell, var(--wk-auf-akzent-2-d, var(--wk-auf-akzent-2-h, var(--wk-auf-akzent)))) var(--wk-wenn-dunkel, var(--wk-auf-akzent-2-h, var(--wk-auf-akzent))); --wk-glas: var(--wk-wenn-hell, var(--wk-glas-d, var(--wk-glas-h, var(--wk-flaeche)))) var(--wk-wenn-dunkel, var(--wk-glas-h, var(--wk-flaeche))); --wk-glas-rand: var(--wk-wenn-hell, var(--wk-glas-rand-d, var(--wk-glas-rand-h, var(--wk-linie)))) var(--wk-wenn-dunkel, var(--wk-glas-rand-h, var(--wk-linie))); --wk-auf-fehler: var(--wk-wenn-hell, var(--wk-auf-fehler-d, var(--wk-auf-fehler-h, var(--wk-flaeche)))) var(--wk-wenn-dunkel, var(--wk-auf-fehler-h, var(--wk-flaeche))); --wk-info: var(--wk-wenn-hell, var(--wk-info-d, var(--wk-info-h))) var(--wk-wenn-dunkel, var(--wk-info-h)); --wk-info-flaeche: var(--wk-wenn-hell, var(--wk-info-flaeche-d, var(--wk-info-flaeche-h))) var(--wk-wenn-dunkel, var(--wk-info-flaeche-h)); --wk-info-text: var(--wk-wenn-hell, var(--wk-info-text-d, var(--wk-info-text-h))) var(--wk-wenn-dunkel, var(--wk-info-text-h)); --wk-feld: var(--wk-wenn-hell, var(--wk-feld-d, var(--wk-feld-h, var(--wk-flaeche)))) var(--wk-wenn-dunkel, var(--wk-feld-h, var(--wk-flaeche))); --wk-feld-hover: var(--wk-wenn-hell, var(--wk-feld-hover-d, var(--wk-feld-hover-h, var(--wk-flaeche-2)))) var(--wk-wenn-dunkel, var(--wk-feld-hover-h, var(--wk-flaeche-2))); --wk-aktiv: var(--wk-wenn-hell, var(--wk-aktiv-d, var(--wk-aktiv-h, var(--wk-haupt)))) var(--wk-wenn-dunkel, var(--wk-aktiv-h, var(--wk-haupt))); --wk-auf-aktiv: var(--wk-wenn-hell, var(--wk-auf-aktiv-d, var(--wk-auf-aktiv-h, var(--wk-auf-haupt)))) var(--wk-wenn-dunkel, var(--wk-auf-aktiv-h, var(--wk-auf-haupt))); --wk-gedrueckt: var(--wk-wenn-hell, var(--wk-gedrueckt-d, var(--wk-gedrueckt-h, var(--wk-auswahl)))) var(--wk-wenn-dunkel, var(--wk-gedrueckt-h, var(--wk-auswahl))); --wk-schwebend: var(--wk-wenn-hell, var(--wk-schwebend-d, var(--wk-schwebend-h, var(--wk-flaeche)))) var(--wk-wenn-dunkel, var(--wk-schwebend-h, var(--wk-flaeche))); /* Abgeleitet, je Bereich neu gerechnet (ein Stil kann --wk-dauer-mittel setzen) */ --wk-dauer-feiern: calc(var(--wk-dauer-mittel) * 3); --wk-groesse-marke: calc(var(--wk-groesse-klein) - 1.5px); /* Versalien-Kennung (wk-marke) */ --wk-groesse-feld: var(--wk-groesse-text); /* Feldschrift; mit Finger 16 px (unten) */ /* 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); } /* --- Grenzen und Dichten (Vertrag 4.4) -------------------------------------------------------- Mit Finger ist die Feldschrift 16 px (kein Zoomen auf dem Telefon). Dicht nur auf Wunsch der App (data-dichte="dicht" an ) und nur weit plus Zeiger; sonst gilt komfort. */ @media (pointer: coarse) { :root, [data-stil], [data-theme] { --wk-groesse-feld: 16px; } } @media (min-width: 1100px) and (pointer: fine) { :root[data-dichte="dicht"] { --wk-groesse-text: 13px; --wk-groesse-klein: 12px; --wk-knopf: 30px; --wk-knopf-klein: 26px; } }