/* * File: tokens.css * Project: ABC Miet-WC Touren-Planer PWA * Autor: Dirk Stegelmann (dirk.stegelmann@abc-miet-wc.de) * Copyright 2014 - 2026 BoA Betriebs GmbH & Co.KG * * Design-Token-Pyramide: * – Raw-Tokens : reine Farb-/Maßpalette (nie direkt in Komponenten verwenden) * – Semantische : was Komponenten konsumieren (Surface, Text, Accent, …) * – Status-Token : pro Lieferstatus eine -bg/-fg-Paarung * – Light/Dark : ausschließlich manuell via data-theme="light|dark" * auf (gesetzt vom Sidenav-Theme-Toggle und einem * Inline-Init-Skript im aus localStorage) * * Eine Theme-Anpassung erfordert nur Änderungen in dieser Datei. */ /* ============================================================ RAW PALETTE Niemals direkt in Komponenten verwenden – nur über semantische Tokens unten referenzieren. ============================================================ */ :root { /* Primary (ABC-Grün) */ --color-green-50: #e8f4ef; --color-green-100: #c7e3d6; --color-green-200: #a0d0bb; --color-green-300: #6fb796; --color-green-400: #4f9c7a; --color-green-500: #438966; --color-green-600: #357055; --color-green-700: #2d6b4f; --color-green-800: #1f4f3a; --color-green-900: #143626; /* Accent (ABC-Gelb) */ --color-yellow-50: #fff8da; --color-yellow-300: #ffd84a; --color-yellow-500: #fac51f; --color-yellow-600: #d4a910; --color-yellow-700: #a78005; /* Danger (Rot) */ --color-red-50: #fdf0f0; --color-red-300: #f06868; --color-red-500: #e63030; --color-red-600: #b82222; --color-red-700: #7a0000; /* Warning (Orange) */ --color-orange-500: #f38830; --color-orange-600: #ce6b15; /* Info (Blau) */ --color-blue-300: #4ea3d5; --color-blue-500: #0470b8; --color-blue-600: #035a94; /* Neutrals */ --color-neutral-0: #ffffff; --color-neutral-25: #fafbfc; --color-neutral-50: #f5f7fa; --color-neutral-100: #eef0f3; --color-neutral-200: #e1e4e9; --color-neutral-300: #c8ccd3; --color-neutral-400: #9aa0aa; --color-neutral-500: #6b7280; --color-neutral-600: #4b5260; --color-neutral-700: #2d3340; --color-neutral-800: #1a1f2e; --color-neutral-900: #0f1419; /* Status-Palette (Lieferstatus, Sonderzustände) */ --status-deliver-raw: #e00000; --status-delivered-raw: #0045f0; --status-pickup-raw: #ffa500; --status-free-raw: #727171; --status-shutdown-raw: #472727; --status-event-raw: #ff5e00; --status-clean-raw: #00ce83; --status-exchange-raw: #a1ce00; --status-extern-raw: #ad00ce; --status-move-raw: #79eaed; --status-closed-raw: #d4f5da; --status-progress-raw: #fdfae8; --status-ghost-raw: #daeeff; /* ============================================================ SEMANTISCHE TOKENS – LIGHT (Default) ============================================================ */ /* Brand */ --color-primary: var(--color-green-500); --color-primary-strong: var(--color-green-700); --color-primary-soft: var(--color-green-50); --color-accent: var(--color-yellow-500); --color-accent-strong: var(--color-yellow-600); --color-danger: var(--color-red-500); --color-danger-strong: var(--color-red-600); --color-warning: var(--color-orange-500); --color-info: var(--color-blue-500); --color-info-strong: var(--color-blue-600); /* Surfaces */ --color-bg: var(--color-neutral-100); --color-surface: var(--color-neutral-0); --color-surface-2: var(--color-neutral-50); --color-surface-sunken: var(--color-neutral-200); /* Borders */ --color-border: rgba(15, 20, 25, .10); --color-border-strong: rgba(15, 20, 25, .22); --color-border-subtle: rgba(15, 20, 25, .05); /* Text */ --color-text: var(--color-neutral-800); --color-text-muted: var(--color-neutral-500); --color-text-subtle: var(--color-neutral-400); /* --color-text-inv: Text auf farbig gefüllten Flächen (Brand-Buttons, Header, .headln, Status-Streifen). Bleibt IN BEIDEN Themes weiß, weil die darunterliegenden Flächen immer Brand-Farben sind. */ --color-text-inv: #ffffff; /* --color-text-on-bg: invertierter Body-Text – wird in Dark Mode dunkel. Nur sehr selten gebraucht (z.B. wenn ein Element bewusst gegen die Body-Farbe kontrastieren soll). */ --color-text-on-bg: var(--color-neutral-0); /* --color-on-accent: Text auf gelben/hellen Schaltflächen (Header-Buttons, Back-Buttons, KW-Marker wn-5, Filter-Note, Error-Schließen-Button). Bleibt IMMER dunkel, weil die Untergründe IMMER hell sind. */ --color-on-accent: #1a1a1a; /* --color-on-light: Text auf bewusst hellem Hintergrund (helle Eingabefelder im Login, helle Card-Surfaces). Bleibt dunkel. */ --color-on-light: var(--color-neutral-800); /* Status (semantische Aliase – Komponenten verwenden diese) */ --status-deliver-bg: var(--status-deliver-raw); --status-deliver-fg: #fff; --status-delivered-bg: var(--status-delivered-raw); --status-delivered-fg: #fff; --status-pickup-bg: var(--status-pickup-raw); --status-pickup-fg: #1a1f2e; --status-free-bg: var(--status-free-raw); --status-free-fg: #1a1f2e; --status-shutdown-bg: var(--status-shutdown-raw); --status-shutdown-fg: #fff; --status-event-bg: var(--status-event-raw); --status-event-fg: #fff; --status-clean-bg: var(--status-clean-raw); --status-clean-fg: #1a1f2e; --status-exchange-bg: var(--status-exchange-raw); --status-exchange-fg: #1a1f2e; --status-extern-bg: var(--status-extern-raw); --status-extern-fg: #fff; --status-move-bg: var(--status-move-raw); --status-move-fg: #1a1f2e; /* Listenelement-Zustände */ --state-closed-bg: var(--status-closed-raw); --state-closed-bd: #7abf8a; --state-closed-icon: #4caf50; --state-progress-bg: var(--status-progress-raw); --state-progress-icon:#caa800; --state-ghost-bg: var(--status-ghost-raw); /* Favoriten (1-5 + Prio 99) – Vordergrundfarben sind themen-unabhängig */ --fav-1-bg: #dc2b31; --fav-1-fg: #fff; --fav-2-bg: var(--color-warning); --fav-2-fg: #fff; --fav-3-bg: var(--color-accent); --fav-3-fg: var(--color-on-accent); --fav-4-bg: #10a843; --fav-4-fg: #fff; --fav-5-bg: var(--color-info); --fav-5-fg: #fff; --fav-99-bg: var(--color-danger); --fav-99-fg: #fff; /* Wochen-Indikatoren (Kalenderwoche-Marker) */ --wn-1-bg: #dc2b31; --wn-2-bg: var(--color-info); --wn-3-bg: var(--color-warning); --wn-4-bg: #10a843; --wn-5-bg: var(--color-accent); /* Spacing (4px-Skala) */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; /* Radien */ --radius-sm: .375rem; --radius-md: .625rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-pill: 999px; /* Elevations (mehrlagige Schatten) */ --shadow-sm: 0 1px 2px rgba(15,20,25,.06), 0 1px 3px rgba(15,20,25,.10); --shadow-md: 0 2px 4px rgba(15,20,25,.07), 0 4px 12px rgba(15,20,25,.12); --shadow-lg: 0 4px 8px rgba(15,20,25,.08), 0 12px 32px rgba(15,20,25,.16); --shadow-xl: 0 8px 16px rgba(15,20,25,.10), 0 24px 56px rgba(15,20,25,.22); --shadow-inset: inset 0 1px 3px rgba(15,20,25,.07); /* Motion */ --ease-standard: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --duration-fast: .15s; --duration-base: .22s; --duration-slow: .35s; --transition: var(--duration-base) var(--ease-standard); /* Typografie */ --font-brand: 'GeosansLight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --text-xs: .72rem; --text-sm: .85rem; --text-md: 1rem; --text-lg: 1.15rem; --text-xl: 1.35rem; --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 1.85rem); --text-3xl: clamp(1.85rem, 1.4rem + 1.4vw, 2.4rem); /* Komponenten-Tokens */ --color-comment-bg: var(--color-red-50); /* Kommentar-Box */ --color-comment-text: var(--color-text); --color-warning-banner-bg-from: #f5f12e; --color-warning-banner-bg-to: #e8e825; /* ============================================================ SIDENAV (theme-unabhängig: bleibt in beiden Modi dunkel) Diese Tokens werden NICHT im Dark-Mode-Block überschrieben, damit das Off-Canvas-Panel als visuell abgegrenzte Steuerungs- fläche immer dunkel erscheint – analog zu klassischen App-Drawern. ============================================================ */ --sidenav-bg-from: #1a1a2e; --sidenav-bg-to: #16213e; --sidenav-text: #d0d4de; --sidenav-text-muted: #b0b8c8; --sidenav-text-subtle: #8892a4; --sidenav-text-strong: #ffffff; --sidenav-divider: rgba(255, 255, 255, .06); --sidenav-divider-soft: rgba(255, 255, 255, .04); --sidenav-hover-bg: rgba(255, 255, 255, .06); --sidenav-active-bg: var(--color-green-500); --sidenav-active-border: #3a7d5e; --sidenav-input-bg: #2a2a40; --sidenav-input-bg-focus: #2f2f4a; --sidenav-input-border: rgba(255, 255, 255, .15); --sidenav-yellow-from: #f5c518; --sidenav-yellow-to: #d4a910; --sidenav-zef-start-from: #2ecc71; --sidenav-zef-start-to: #27ae60; --sidenav-zef-end-from: #e74c3c; --sidenav-zef-end-to: #c0392b; --sidenav-zef-disabled: #444444; --sidenav-zef-disabled-fg: #888888; --sidenav-checkbox-tick-bg: #a8f0c0; --sidenav-shadow: 0 1px 4px rgba(0, 0, 0, .2); --header-height: 3.2rem; --footer-height: 1.6rem; --list-item-height: 6.5rem; --list-item-height-deadline: 4rem; --list-stripe-width: 2.2rem; --popup-radius: var(--radius-lg); --popup-backdrop: rgba(10, 12, 22, .55); --popup-blur: 8px; /* Touch-Target-Mindestgröße (Apple HIG / Material 3) */ --touch-target: 2.75rem; /* ============================================================ LEGACY-ALIASE Die alte Datei (style.master.v2.css) verwendete --clr-*-Variablen. Aliase erlauben es, dass alle Komponenten-Module schrittweise auf die neuen Token-Namen umgestellt werden können, ohne dass Drittstil oder noch nicht migrierte Selektoren brechen. Sollten in einem Folgerefactoring entfernt werden. ============================================================ */ --clr-primary: var(--color-primary); --clr-primary-dark: var(--color-primary-strong); --clr-primary-light: var(--color-primary-soft); --clr-accent: var(--color-accent); --clr-accent-dark: var(--color-accent-strong); --clr-danger: var(--color-danger); --clr-danger-dark: var(--color-danger-strong); --clr-warning: var(--color-warning); --clr-info: var(--color-info); --clr-bg: var(--color-bg); --clr-surface: var(--color-surface); --clr-surface-2: var(--color-surface-2); --clr-border: var(--color-border); --clr-border-strong: var(--color-border-strong); --clr-text: var(--color-text); --clr-text-muted: var(--color-text-muted); --clr-text-inv: var(--color-text-inv); } /* ============================================================ DARK MODE – ausschließlich manuell per data-theme="dark" Es gibt KEINE Auto-Erkennung über prefers-color-scheme: das Theme wird ausschließlich vom Theme-Toggle-Button in der Sidenav umgeschaltet (siehe ThemeManager.js). Standard ist Light. ============================================================ */ :root[data-theme='dark'] { --color-bg: var(--color-neutral-900); --color-surface: var(--color-neutral-800); --color-surface-2: var(--color-neutral-700); --color-surface-sunken: #060a10; --color-border: rgba(255, 255, 255, .10); --color-border-strong: rgba(255, 255, 255, .22); --color-border-subtle: rgba(255, 255, 255, .05); --color-text: #e8eaed; --color-text-muted: #a3a8b3; --color-text-subtle: #7a8090; /* --color-text-inv bleibt #ffffff – siehe Begründung im :root-Block. */ --color-text-on-bg: var(--color-neutral-900); --color-primary-soft: rgba(67, 137, 102, .18); --status-deliver-bg: #c92121; --status-delivered-bg: #2160d6; --status-pickup-bg: #d98700; --status-pickup-fg: #fff; --status-free-bg: #5a5959; --status-free-fg: #fff; --status-event-bg: #d24f00; --status-clean-bg: #029e64; --status-clean-fg: #fff; --status-exchange-bg: #7fa300; --status-exchange-fg: #fff; --status-extern-bg: #8a009f; --status-move-bg: #4cb8bb; --status-move-fg: #fff; --status-closed-raw: rgba(76, 175, 80, .22); --state-closed-bg: rgba(76, 175, 80, .22); --state-closed-bd: #4caf50; --state-progress-bg: rgba(202, 168, 0, .18); --state-ghost-bg: rgba(78, 163, 213, .25); --color-comment-bg: rgba(230, 48, 48, .12); --color-comment-text: #ffd5d5; --color-warning-banner-bg-from: #b09b00; --color-warning-banner-bg-to: #998700; --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5); --shadow-md: 0 2px 4px rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.5); --shadow-lg: 0 4px 8px rgba(0,0,0,.5), 0 16px 36px rgba(0,0,0,.55); --shadow-xl: 0 8px 20px rgba(0,0,0,.55), 0 32px 64px rgba(0,0,0,.6); --popup-backdrop: rgba(0, 0, 0, .55); --popup-blur: 10px; }