/* * DIWA-Designsystem 2.0 – Tokens * * Erscheinungsbild der DIWA-Produktfamilie (DIWA Krefeld DIWA2 / DIWA Oberhausen), zeitgemäß und * präzise umgesetzt: Roboto, Rot als Markenfarbe (Fußleiste, Kopf, Logo), Blau für Links, aktive * Navigation und Fokus, dunkles Blaugrau für Standardschaltflächen, weiße Flächen mit feiner Linie * auf hellem Grund. Werte und Regeln: docs/design/designsystem.md (Abschnitt 2). * * Farbrollen, nie vermischt: * Hausfarbe --brand-primary (--c-red) Markenflächen: Fußleiste, Kopf, Logo, Displays * Hervorhebung --highlight Akzente: Kennzahl-Marken, Etiketten, „heute“, Markierungen – * die Hausfarbe, außer sie liegt im Signalbereich (Rot, * Orange); dann die Akzentfarbe, sonst Aktionsblau * (BrandPalette::highlight) * Aktionen --action-primary-* Hauptaktion, fest Aktionsblau – nie Rot, unabhängig vom * --action-danger-* Mandanten; Rot nur für zerstörende Aktionen * Meldungen --c-danger* u. a. Fehler, Warnungen, Erfolg – feste Farben * * Mandanten-Branding überschreibt ausschließlich die --brand-*-Variablen (serverseitig berechnet und * auf Kontrast geprüft, Route /brand/.css). Alles andere leitet sich davon ab – auch die * dunklen und hellen Varianten der Akzentfarbe (color-mix), damit ein Mandant mit anderer Akzentfarbe * keine DIWA-blauen Reste behält. * * Kontraste (WCAG 2.2, gemessen mit den Standardfarben, Rechenweg wie BrandPalette): * Text #424a57 8,9 : 1 auf Weiß · 8,3 : 1 auf der Seite #f5f6f8 · 7,9 : 1 auf #eef1f5 * Text stark #1c2430 15,6 : 1 auf Weiß Überschrift #0b1220 18,7 : 1 auf Weiß * Nebentext #566070 6,4 : 1 auf Weiß · 5,9 : 1 auf der Seite · 5,6 : 1 auf #eef1f5 * Feldrahmen #868e9c 3,3 : 1 auf Weiß · 3,05 : 1 auf der Seite (WCAG 1.4.11, ≥ 3 : 1) * Weiß auf Rot #da121a 5,1 : 1 · auf Rot-Hover #be1017 6,4 : 1 · auf Dunkelrot #ab0e14 7,5 : 1 * Blau #3c57a7 6,75 : 1 auf Weiß · 6,2 : 1 auf der Seite (Links, Fokusrahmen) * Blau dunkel auf Blau hell (aktive Navigation) 8,3 : 1 · Weiß auf Schiefer #364a5e 9,1 : 1 * Aktionsblau #1d4f91 Weiß darauf 8,1 : 1 · beim Überfahren #173f74 10,5 : 1 · 7,5 : 1 auf der Seite * Gefahr: Weiß auf #c4161c 6,0 : 1 · auf #9f1217 8,1 : 1 · Text #9c0e12 auf #fdeeee 7,5 : 1 * Hervorhebung (Standard DIWA-Blau #3c57a7) Weiß darauf 6,7 : 1 * Die Seitenfarbe #f5f6f8 ist heller als #f5f5f5 (Luminanz 0,921 statt 0,913): Jede Mandantenfarbe, * die die Prüfung gegen #f5f5f5 (BrandPalette::PAGE_BACKGROUND) besteht, besteht auch hier. */ :root { /* ---- Marke (Mandant) ------------------------------------------------------ */ --brand-primary: #da121a; /* Hausfarbe DIWA-Rot: Fußleiste, Kopf, Logo, Displays – Weiß darauf 5,1 : 1 */ --brand-primary-hover: #be1017; --brand-primary-dark: #ab0e14; /* Schaltflächen in der Fußleiste – Weiß 7,5 : 1 */ --brand-primary-deep: color-mix(in srgb, var(--brand-primary) 68%, #000); --brand-primary-soft: #fdecec; --brand-on-primary: #ffffff; --brand-accent: #3c57a7; /* DIWA-Blau: Links, aktive Navigation, Fokus, Display-Aufruf */ --brand-accent-hover: color-mix(in srgb, var(--brand-accent) 87%, #000); --brand-accent-dark: color-mix(in srgb, var(--brand-accent) 75%, #000); /* Standard ≈ #2d417d */ --brand-accent-soft: color-mix(in srgb, var(--brand-accent) 11%, #fff); /* Standard ≈ #eaedf5 */ --brand-on-accent: #ffffff; --brand-highlight: #3c57a7; /* Hervorhebung: DIWA-Rot liegt im Signalbereich → Akzentfarbe (BrandPalette::highlight) */ --brand-on-highlight: #ffffff; /* ---- Hervorhebung (Akzente aus der Hausfarbe): nie Rot oder Orange ------- */ --highlight: var(--brand-highlight); --highlight-dark: color-mix(in srgb, var(--brand-highlight) 75%, #000); /* Schrift und Symbole auf hellen Flächen */ --highlight-soft: color-mix(in srgb, var(--brand-highlight) 10%, #fff); /* helle Fläche, z. B. Symbolgrund */ --on-highlight: var(--brand-on-highlight); /* ---- Abgeleitete Markenfarben (Hausfarbe – nur Markenflächen) ------------- */ --c-red: var(--brand-primary); --c-red-hover: var(--brand-primary-hover); --c-red-top: var(--brand-primary); /* früher Verlauf – Schaltflächen sind jetzt flach */ --c-red-bottom: var(--brand-primary); --c-red-dark: var(--brand-primary-dark); --c-red-deep: var(--brand-primary-deep); --c-blue: var(--brand-accent); --c-blue-hover: var(--brand-accent-hover); --c-blue-dark: var(--brand-accent-dark); --c-blue-light: var(--brand-accent-soft); --c-blue-tint: color-mix(in srgb, var(--brand-accent) 5%, #fff); /* gewählte Zeile, Auswahl */ /* ---- Standardschaltfläche (dunkles Blaugrau, flach) ---------------------- */ --c-slate: #364a5e; --c-slate-hover: #2b3b4b; --c-slate-active: #223040; --c-slate-top: var(--c-slate); /* Kompatibilität (früher Verlauf) */ --c-slate-bottom: var(--c-slate); --c-slate-hover-top: var(--c-slate-hover); --c-slate-hover-bottom: var(--c-slate-hover); --c-slate-border: #23313e; --c-slate-shine: transparent; /* ---- Text und Flächen ------------------------------------------------------ */ --c-heading: #0b1220; --c-text: #424a57; --c-text-strong: #1c2430; --c-muted: #566070; /* Nebentext: ≥ 4,5 : 1 auf Weiß und allen hellen Flächen */ --c-white: #ffffff; --c-surface: #ffffff; /* Karten, Kopf, Seitenleiste */ --c-page: #f5f6f8; /* Seitenhintergrund */ --c-panel: #eef1f5; /* ruhige Fläche: Code, Fortschritt, gruppierte Felder */ --c-subtle: #f8f9fb; /* Tabellenkopf, Fußzeilen von Karten, Zebra */ --c-line: #e3e7ed; /* feine Linie: Karten, Tabellenzeilen, Trenner */ --c-line-strong: #d3d9e1; /* Linie mit mehr Halt: Tabellenrahmen, Reiter */ --c-border: #868e9c; /* Bedienelemente: Eingabefelder, Auswahl, Schalter – 3,3 : 1 auf Weiß */ --c-border-strong: #6b7484; /* Rahmen bei Überfahren */ --c-control-border: #c5ccd6; /* helle Schaltflächen (Beschriftung trägt die Erkennbarkeit) */ --c-box-border: var(--c-line); --c-row-alt: var(--c-subtle); --c-row-hover: #f1f4f9; /* ---- Status (Kundensteuerung) – Symbolfarben, immer mit Text ------------- */ --c-success: #3da435; /* wartet (grüner Punkt) – nur Symbolfarbe */ --c-success-text: #1f6b1a; --c-success-bg: #ecf8ee; --c-success-border: #a8dbb3; --c-info: #0069b3; /* aufgerufen (blaue Raute) */ --c-info-text: #004e86; --c-info-bg: #e9f2fa; --c-info-border: #b5d3ee; --c-warning: #e49700; /* abgeschlossen (oranges Dreieck) */ --c-warning-bg: #fff6e0; --c-warning-text: #6b4a00; --c-warning-border: #f0d394; --c-danger: #cc1719; /* Gefahr: zerstörende Aktionen, Fehler, storniert – unabhängig vom Mandanten */ --c-danger-bg: #fdeeee; --c-danger-text: #9c0e12; --c-danger-border: #f2b8ba; --c-petrol: #0e5f69; /* ruhige Kategoriefarbe (z. B. Anliegen in Kundenwegen) – Weiß 7,3 : 1 */ --c-petrol-bg: #e3f1f1; --c-focus: var(--brand-accent); /* Wartezeit-Ampel: Farbe nur zusätzlich – Balkenzahl und Wort tragen die Aussage */ --ampel-ok: var(--c-success); --ampel-ok-text: var(--c-success-text); --ampel-ok-bg: var(--c-success-bg); --ampel-warn: var(--c-warning); --ampel-warn-text: var(--c-warning-text); --ampel-warn-bg: var(--c-warning-bg); --ampel-over: var(--c-danger); --ampel-over-text: var(--c-danger-text); --ampel-over-bg: var(--c-danger-bg); /* ---- Schrift: Roboto (lokal), eine Skala ----------------------------------- */ --font: "Roboto", Arial, Helvetica, "Noto Sans", "Segoe UI", sans-serif; --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --fs-xs: 12px; --fs-tiny: 13px; --fs-small: 14px; --fs-base: 16px; --fs-md: 18px; --fs-h3: 18px; --fs-h2: 21px; --fs-h1: 28px; --fs-lead: 17px; --fs-display: 30px; /* Kennzahlen */ --lh-base: 1.5; --lh-tight: 1.25; --lh-heading: 1.25; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* ---- Abstände (4er-Raster) -------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --gap: 20px; /* Abstand zwischen Karten */ /* ---- Formen und Tiefe ------------------------------------------------------- */ --radius-sm: 4px; /* Etiketten, Tastenkappen */ --radius: 6px; /* Schaltflächen, Eingabefelder */ --radius-lg: 10px; /* Dialoge, Nummernschilder */ --radius-card: 10px; /* Karten */ --radius-pill: 999px; --shadow-header: 0 1px 0 var(--c-line); --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-raised: 0 4px 12px rgba(16, 24, 40, 0.08); --shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.18); --overlay: rgba(15, 23, 42, 0.5); /* ---- Maße ------------------------------------------------------------------- */ --form-max: 940px; --topbar-h: 0px; /* graue Kopfleiste entfällt (Kontomenü im Kopf) */ --header-h: 64px; --workbar-h: 56px; --sidebar-w: 256px; --content-pad: 32px; --content-max: 1680px; --footer-h: 40px; --work-footer-h: 40px; --target-min: 40px; --target-sm: 32px; --control-h: 40px; /* Höhe von Eingaben, Auswahlfeldern und Tasten – in einer Zeile immer gleich */ --control-h-lg: 48px; /* große Zeilen (.form-row--lg), z. B. Check-in am Empfang */ --target-kiosk: 72px; --focus-width: 3px; --focus-offset: 2px; --duration: 150ms; /* ---- Kompatibilität (frühere Token-Namen, nicht mehr neu verwenden) -------- */ --ink: var(--c-text-strong); --ink-muted: var(--c-text); --ink-subtle: var(--c-muted); --paper: var(--c-page); --surface: var(--c-white); --surface-sunken: var(--c-panel); --line: var(--c-line); --line-strong: var(--c-border); --success-soft: var(--c-success-bg); --warning-soft: var(--c-warning-bg); --danger-soft: var(--c-danger-bg); --radius-md: var(--radius); --text-sm: var(--fs-small); --text-md: var(--fs-base); --text-lg: var(--fs-md); --text-xl: var(--fs-h3); --text-2xl: var(--fs-h2); --text-3xl: var(--fs-h1); --text-xs: var(--fs-tiny); --weight-regular: var(--fw-regular); --weight-medium: var(--fw-medium); --weight-bold: var(--fw-bold); --weight-heavy: var(--fw-bold); --leading-tight: var(--lh-tight); --leading-normal: var(--lh-base); --border: 1px solid var(--c-line); --success: var(--c-success-text); --warning: var(--c-warning-text); --danger: var(--c-danger-text); --info: var(--c-blue); --info-soft: var(--c-info-bg); --shadow-overlay: var(--shadow-pop); --measure: 75ch; --focus-outer: var(--c-focus); --focus-inner: #ffffff; color-scheme: light; } @media (prefers-reduced-motion: reduce) { :root { --duration: 0ms; } } /* * Statussystem 2.0 der Wartevorgänge – überall gleich (Kundenliste, Legende, Leitstand, * Nummernschild, Empfang, Kundenkarte, Musterseite), immer Symbol + Text: * wartet ● grün · aufgerufen ◆ blau · in Bearbeitung ▶ petrol (bewusst ohne Rot und ohne * Stopp-Form) · zurückgestellt ↺ orange · abgeschlossen ✓ grau · nicht erschienen (Person mit ✕) * grau · storniert ✕ rot · vom System geschlossen ◌ grau. * Unabhängig vom Mandanten-Branding. Kontraste: Symbolfarben ≥ 3,8 : 1 auf allen Zeilenflächen * (#fff, #f5f5f5, #f7f8fa, #eef1f8, #e7f0f9, #e3f1f1, #fff4dc); weiße Schrift auf den gefüllten * Nummernschildern: aufgerufen 5,7 : 1, in Bearbeitung 7,3 : 1. */ :root { --status-waiting: #2f8a28; --status-waiting-bg: #e8f5e7; --status-called: #0069b3; --status-called-bg: #e7f0f9; --status-in-service: #0e5f69; --status-in-service-bg: #e3f1f1; --status-returned: #b55f00; --status-returned-text: #6b3a00; --status-returned-bg: #fff4dc; --status-done: #5c6672; --status-done-bg: #eef0f3; --status-cancelled: #c4161c; --status-cancelled-bg: #fdecec; /* Aktionen der Arbeitsoberflächen (Paket 15a): Die Hauptaktion liegt nie im Rotbereich und hängt nicht von der Hausfarbe ab – Rot bleibt zerstörenden Aktionen vorbehalten. Weiß auf --action-primary-bg 8,1 : 1, auf --action-danger-bg 6,0 : 1. */ --action-primary-bg: #1d4f91; --action-primary-bg-hover: #173f74; --action-primary-text: #ffffff; --action-danger-bg: #c4161c; --action-danger-bg-hover: #9f1217; --action-danger-text: #ffffff; }