/* ============================================================ BHS Design-System · Tokens ------------------------------------------------------------ Eine Grundfarbe, alles andere leitet sich ab. Zum Umfärben genügt --brand — Hover-, Flächen- und Textstufen rechnen sich per color-mix in oklch neu. Gemischt wird in oklch, nicht in srgb: dort bleibt die wahrgenommene Helligkeit beim Aufhellen erhalten. In srgb werden dieselben Stufen matschig und kippen im Farbton. ============================================================ */ /* ════════════════════════════════════════════════════════════ DIE FARBREGEL — wichtiger als jeder einzelne Farbwert ------------------------------------------------------------ Markenfarbe heißt „hier kannst du handeln“, nicht „das ist wichtig“. Marke → Bedienelemente: primärer Knopf, aktiver Menüpunkt, aktiver Reiter, Auswahl, Fokusring Grün → erledigt, erfüllt, im Sollbereich Rot → Fehler, fehlende Pflichtangabe Bernstein → echte Warnung (Frist läuft ab, Wert grenzwertig) Grau → alles Übrige: Symbole, Zähler, Metadaten, und „offen“ im Sinne von „noch nicht dran“ Zwei Verbote, die den Unterschied machen: · Nie die Markenfarbe für einen Zustand. Sonst sieht in einem roten Firmendesign jeder Haken nach Fehler aus. · „Offen“ ist kein Alarm. Ein Vorgang, der zu 60 % fertig ist, darf nicht aussehen wie einer mit sechs Fehlern. ════════════════════════════════════════════════════════════ */ :root { /* ---------- 1 · REFERENZ ---------- Grundfarbe wie im emnify-Portal. Umstellen genügt — alles Abgeleitete rechnet sich neu (siehe Abschnitt 2). */ --brand: #3708b2; /* die einzige Stellschraube */ --ink: #000000; /* Haupttext */ --ink-soft: #434556; /* Sekundärtext, bläuliches Grau */ --ink-faint: #767889; /* Platzhalter, Deaktiviertes */ /* ---------- 2 · ABGELEITETE MARKENSTUFEN ---------- */ --brand-hover: color-mix(in oklch, var(--brand) 82%, #ffffff); --brand-active: color-mix(in oklch, var(--brand) 88%, #000000); --brand-soft: color-mix(in oklch, var(--brand) 12%, #ffffff); --brand-strong: color-mix(in oklch, var(--brand) 26%, #ffffff); --brand-on-soft:color-mix(in oklch, var(--brand) 72%, #000000); /* ---------- 3 · FLÄCHEN ---------- Neutrale Graustufen, keine Farbstiche. Zwei Töne reichen: Weiß für den Inhalt, ein Grau für alles Abgesetzte. */ --surface: #ffffff; /* Hauptbereich */ --surface-sunken: #f5f5f5; /* Tabellenkopf, Hinterlegtes */ --nav-bg: #f5f5f5; /* Seitenleiste — abgesetzt vom Inhalt */ --nav-line: #e3e3e3; --line: #e3e3e3; /* Rahmen, Trennlinien */ --line-soft: #efefef; /* Zeilentrenner in Listen */ --grau-fill: #e3e3e3; /* neutrale Füllung: Symbole, Balkenspur */ /* ---------- 4 · STATUS · immer als Dreiklang ---------- Vordergrund (Symbol, Text) · Fläche · Text auf der Fläche. Nie frei kombinieren — dann stimmt der Kontrast nicht mehr. */ --ok: #007e14; --ok-flaeche: #ccecd1; --ok-auf-flaeche: #003f0a; --warn: #c25d00; --warn-flaeche: #fce3cc; --warn-auf-flaeche: #612e00; --fehler: #cc4646; --fehler-flaeche: #ffdddd; --fehler-auf-flaeche: #662323; --info: #10449a; --info-flaeche: #d0ddf2; --info-auf-flaeche: #08224d; --neutral: #434556; --neutral-flaeche: #e3e3e3; --neutral-auf-flaeche: #434556; /* ---------- 5 · SCHRIFT ---------- Zwei Familien. Label und Fließtext haben dieselbe Größe und unterscheiden sich nur im Gewicht — dadurch springt die Grundlinie nicht, wenn beide nebeneinander stehen. */ --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-titel: "Inter Tight", Inter, system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-xs: 10.5px; --text-s: 11.5px; --text-m: 12.5px; /* Standard in Tabellen und Formularen */ --text-l: 14px; /* Fließtext */ --titel-s: 17px; --titel-m: 20px; --titel-l: 27px; --titel-xl: 32px; /* ---------- 6 · ABSTÄNDE · 4er-Raster ---------- */ --s-3xs: 2px; --s-2xs: 4px; --s-xs: 8px; --s-s: 12px; --s-m: 16px; --s-l: 24px; --s-xl: 32px; --s-2xl: 40px; --s-3xl: 48px; --s-4xl: 64px; /* ---------- 7 · RADIEN · genau vier ---------- Beim Auszählen der ersten Entwürfe fanden sich neun Werte zwischen 2 und 12 px. Jeder für sich plausibel, in Summe Willkür. */ --r-klein: 4px; /* Kästchen, Icon-Rahmen, Marken im Fließtext */ --r-mittel: 8px; /* Felder, Knöpfe, Chips */ --r-gross: 12px; /* Karten, Listeneinträge, Dialoge */ --r-voll: 999px; /* Pillen, Punkte, Avatare */ /* ---------- 8 · KONTROLLGRÖSSEN · genau zwei (plus mobil) ---------- */ --h-s: 36px; /* in Listenzeilen, Filterleisten, dichten Tabellen */ --h-m: 42px; /* Standard im Formular */ --h-l: 52px; /* mobil und Hauptfeld eines Dialogs */ /* ---------- 9 · SCHATTEN · mehrschichtig ---------- Ein einzelner Schatten wirkt aufgeklebt. Gestapelte trennen Kante, Kontakt und Streuung. */ --schatten-s: 0 1px 3px 0 rgba(0,0,0,.10), 0 0 4px 0 rgba(0,0,0,.14); --schatten-m: 0 2px 6px 0 rgba(0,0,0,.14), 0 2px 12px 1px rgba(0,0,0,.08); --schatten-l: 0 2px 10px 4px rgba(0,0,0,.12), 0 4px 3px 0 rgba(0,0,0,.04), 0 6px 8px -2px rgba(0,0,0,.08); /* ---------- 10 · LAYOUT ---------- */ --nav-breite: 270px; --nav-breite-schmal: 60px; --kopf-hoehe: 64px; --block: 800px; /* alle umrahmten Blöcke enden auf dieser Kante */ /* ---------- 11 · EBENEN · benannt statt geraten ---------- */ --z-basis: 9; --z-elemente: 99; --z-layout: 990; --z-modal: 998; --z-oben: 999; } /* ============================================================ Dark Mode — nur die Flächen- und Textrollen werden getauscht. Die Statusfarben bleiben, Rot muss Rot bleiben. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #ffffff; --ink-soft: #cdcdcd; --ink-faint: #8a8378; --surface: #111115; --surface-sunken: #22222b; --nav-bg: #1a1a20; --nav-line: #33333d; --line: #33333d; --line-soft: #2a2a33; --brand-soft: color-mix(in oklch, var(--brand) 22%, #111115); --brand-strong: color-mix(in oklch, var(--brand) 40%, #111115); --brand-on-soft:color-mix(in oklch, var(--brand) 60%, #ffffff); } } :root[data-theme="dark"] { --ink: #ffffff; --ink-soft: #cdcdcd; --ink-faint: #8a8378; --surface: #111115; --surface-sunken: #22222b; --nav-bg: #1a1a20; --nav-line: #33333d; --line: #33333d; --line-soft: #2a2a33; --brand-soft: color-mix(in oklch, var(--brand) 22%, #111115); --brand-strong: color-mix(in oklch, var(--brand) 40%, #111115); --brand-on-soft:color-mix(in oklch, var(--brand) 60%, #ffffff); }