/* ============================================================================ CTH Design Tokens Cologne Trading House GmbH — gemeinsame Gestaltungsebene aller internen Apps Diese Datei ist die unterste Ebene des Systems. Sie enthaelt ausschliesslich CSS-Variablen, keine Komponenten und keine Layoutregeln. Dadurch laeuft sie ueberall: React, Next.js, Jinja-Templates, reines HTML. Einbinden: Verwenden: background: var(--bg-surface); color: var(--fg); Regel: In App-Code stehen keine Hex-Werte mehr. Wer eine Farbe braucht, die es hier nicht gibt, meldet das — dann waechst das System, nicht die Ausnahme. ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. MARKE CTH-Petrol ist die Konstante ueber alle Apps. --cth-500 ist der Farbton der Marke, taugt aber NICHT fuer kleinen Text auf Weiss (nur 4,1:1). Fuer Text, Links und gefuellte Buttons deshalb --cth-600 (5,9:1). --------------------------------------------------------------------- */ --cth-50: #E8F2F7; --cth-100: #CFE4EE; --cth-300: #7FB6D0; --cth-400: #55A3C4; --cth-500: #2E86AB; --cth-600: #216B8B; --cth-700: #17506B; --cth-800: #0F3A4E; /* --------------------------------------------------------------------- 2. NEUTRALE Kuehl mit leichtem Blaustich — ein neutrales Grau wirkt neben Petrol schmutzig. Die Rampe traegt Flaechen, Raender und Text. --------------------------------------------------------------------- */ --n-0: #FFFFFF; --n-25: #F7F9FC; --n-50: #F1F4F8; --n-100: #E5EAF2; --n-200: #DDE3EC; --n-300: #C3CCDA; --n-400: #9AA7B9; --n-500: #7788A0; --n-600: #4A5A70; --n-700: #2C3A4E; --n-800: #16243A; --n-900: #0F1B2D; --n-950: #0A1628; /* --------------------------------------------------------------------- 3. SEMANTIK Drei Werte je Bedeutung: -fg fuer Text und Raender (alle ueber 5:1 auf Weiss), -bg fuer Hinweisflaechen, -solid fuer gefuellte Badges. Semantikfarben gehoeren in Meldungen und Status — nie in Navigation oder Primaeraktion. Dort steht die App-Akzentfarbe (Abschnitt 4). --------------------------------------------------------------------- */ --ok-fg: #14682F; --ok-bg: #E4F2E8; --ok-solid: #1B813E; --warn-fg: #9A5F0F; --warn-bg: #FBF0DF; --warn-solid: #C17817; --err-fg: #A82F49; --err-bg: #FBE8EC; --err-solid: #C4405C; --info-fg: var(--cth-600); --info-bg: var(--cth-50); --info-solid: var(--cth-500); /* --------------------------------------------------------------------- 4. APP-AKZENTE Jede App hat einen eigenen Akzent — sie faerbt Kopfleiste, aktiven Navigationspunkt und Primaeraktion. Alles andere bleibt identisch. So sieht man auf einen Blick, dass es eine CTH-App ist UND welche. Alle Toene liegen bewusst auf einem Helligkeitsniveau (6–7:1 auf Weiss), damit die Oberflaeche beim App-Wechsel nicht springt. Eine App setzt ihren Akzent EINMAL auf dem Wurzelelement: --------------------------------------------------------------------- */ --app-petrol: #216B8B; --app-petrol-dark: #55A3C4; --app-tiefrot: #9E2A3C; --app-tiefrot-dark: #E0798A; --app-violett: #5F4B9B; --app-violett-dark: #A99AD8; --app-tanne: #1F6B4D; --app-tanne-dark: #5FB894; --app-holz: #7A5223; --app-holz-dark: #C79A5E; /* Indigo geht im Dunkelmodus bewusst ins Blauviolette — sonst ist es dort von Petrol (ClockIn) kaum zu unterscheiden. */ --app-indigo: #2B4C8C; --app-indigo-dark: #93A4EC; --app-graphit: #47566B; --app-graphit-dark: #A3B2C6; /* Noch keiner App zugeordnet — Vorrat fuer die naechste. */ --app-pflaume: #8A3A72; --app-pflaume-dark: #D189BC; /* Standard: ClockIn-Petrol. Wird pro App ueberschrieben (siehe unten). */ --accent: var(--app-petrol); --accent-hover: var(--cth-700); --accent-bg: var(--cth-50); --accent-on: #FFFFFF; /* --------------------------------------------------------------------- 5. ROLLEN — hier greifen Apps zu, nicht auf die Rampen oben --------------------------------------------------------------------- */ --bg-canvas: var(--n-50); /* Seitengrund */ --bg-surface: var(--n-0); /* Karte, Panel, Dialog */ --bg-sunken: var(--n-25); /* Eingabefeld, Tabellenkopf */ --bg-hover: var(--n-100); /* Zeile/Eintrag unter dem Zeiger */ --fg: var(--n-900); /* Fliesstext, Ueberschriften */ --fg-muted: var(--n-600); /* Beschriftungen, Sekundaeres */ --fg-subtle: var(--n-500); /* Meta, Platzhalter, deaktiviert */ --fg-on-accent: #FFFFFF; --border: var(--n-200); /* Standardrand */ --border-strong: var(--n-300); /* Eingabefeld, Trennung mit Gewicht */ /* --------------------------------------------------------------------- 6. TYPOGRAFIE IBM Plex Sans traegt die Oberflaeche: sachlich, aus der Welt der Geschaeftssoftware, gut lesbar in kleinen Graden. IBM Plex Mono steht fuer alles Maschinelle — Belegnummern, EANs, Kuerzel. Zahlen laufen ueberall mit Tabellenziffern (--num). Bei Zeitkonten und Zahlungsabgleich ist das keine Kosmetik: nur so stehen Betraege in Spalten untereinander. Schriften selbst hosten (DSGVO, kein Google-CDN): /design/fonts/IBMPlexSans-{Regular,Medium,SemiBold}.woff2 /design/fonts/IBMPlexMono-Regular.woff2 --------------------------------------------------------------------- */ --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --text-2xs: 11px; /* Eyebrow, Uppercase-Label */ --text-xs: 12px; /* Meta, Tabellenkopf */ --text-sm: 13px; /* dichte Tabellen */ --text-base: 14px; /* UI-Standard */ --text-md: 16px; /* Fliesstext und Eingabefelder — unter 16px zoomt iOS */ --text-lg: 20px; --text-xl: 26px; --text-2xl: 34px; /* Seitentitel, grosse Kennzahl */ --leading-tight: 1.2; /* Ueberschriften, Kennzahlen */ --leading-normal: 1.45; /* UI */ --leading-relax: 1.65; /* Fliesstext, Intraspace */ --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --tracking-label: 0.08em; /* nur fuer Uppercase-Label */ /* --------------------------------------------------------------------- 7. RASTER, RADIEN, TIEFE Abstaende auf 4px-Raster. Radien: Bedienelemente 8, Flaechen 14. Schatten gibt es nur fuer Schwebendes — Karten tragen einen Rand, keinen Schatten. Das haelt dichte Ansichten ruhig. --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-18: 72px; --radius-control: 8px; --radius-card: 14px; --radius-pill: 999px; --shadow-popover: 0 4px 16px rgba(15, 27, 45, 0.10); --shadow-modal: 0 24px 64px rgba(15, 27, 45, 0.22); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); /* --------------------------------------------------------------------- 8. SHELL — die gemeinsame Grundstruktur jeder App --------------------------------------------------------------------- */ --shell-rail: 56px; /* Werkzeugleiste links, nur Tier-Icons */ --shell-nav: 236px; /* App-eigene Navigation */ --shell-header: 56px; /* Kopfzeile */ --content-max: 1180px; /* Lesebreite — verhindert Zeilen ueber den Monitor */ --motion-fast: 120ms; --motion-base: 200ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); } /* =========================================================================== DUNKELMODUS ClockIns Navy #0A1628 bleibt der Grund — Wiedererkennung. Angehoben werden die Raender: der bisherige 7-%-Weissrand war zu schwach, Eingabefelder verschwanden im Hintergrund. ========================================================================= */ :root[data-theme="dark"] { --bg-canvas: #0A1628; --bg-surface: #101F35; --bg-sunken: #0C1A2C; --bg-hover: #172B45; --fg: #E8ECF4; --fg-muted: #9FB0C6; --fg-subtle: #6B7E97; --border: #1E3149; --border-strong: #2C455F; --accent: var(--app-petrol-dark); --accent-hover: var(--cth-300); --accent-bg: rgba(85, 163, 196, 0.14); --accent-on: #08131F; --fg-on-accent: #08131F; --ok-fg: #6BC98D; --ok-bg: rgba(27, 129, 62, 0.16); --warn-fg: #E5A752; --warn-bg: rgba(193, 120, 23, 0.16); --err-fg: #F08FA0; --err-bg: rgba(196, 64, 92, 0.16); --info-fg: var(--cth-400); --info-bg: rgba(46, 134, 171, 0.16); --shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.60); } /* Systemeinstellung, solange der Nutzer nicht selbst gewaehlt hat */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-canvas: #0A1628; --bg-surface: #101F35; --bg-sunken: #0C1A2C; --bg-hover: #172B45; --fg: #E8ECF4; --fg-muted: #9FB0C6; --fg-subtle: #6B7E97; --border: #1E3149; --border-strong: #2C455F; --accent: var(--app-petrol-dark); --accent-hover: var(--cth-300); --accent-bg: rgba(85, 163, 196, 0.14); --accent-on: #08131F; --fg-on-accent: #08131F; --ok-fg: #6BC98D; --ok-bg: rgba(27, 129, 62, 0.16); --warn-fg: #E5A752; --warn-bg: rgba(193, 120, 23, 0.16); --err-fg: #F08FA0; --err-bg: rgba(196, 64, 92, 0.16); --info-fg: var(--cth-400); --info-bg: rgba(46, 134, 171, 0.16); --shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.60); } } /* =========================================================================== APP-ZUORDNUNG Jede App setzt data-app auf oder . Mehr ist zum Einfaerben nicht noetig — alle Komponenten lesen --accent. ========================================================================= */ [data-app="clockin"] { --accent: var(--app-petrol); } [data-app="piranha"] { --accent: var(--app-tiefrot); } [data-app="rabbit"] { --accent: var(--app-violett); } [data-app="panda"] { --accent: var(--app-tanne); } [data-app="biber"] { --accent: var(--app-holz); } [data-app="versand"] { --accent: var(--app-indigo); } [data-app="cockpit"] { --accent: var(--app-graphit); } [data-theme="dark"] [data-app="clockin"], [data-theme="dark"][data-app="clockin"] { --accent: var(--app-petrol-dark); } [data-theme="dark"] [data-app="piranha"], [data-theme="dark"][data-app="piranha"] { --accent: var(--app-tiefrot-dark); } [data-theme="dark"] [data-app="rabbit"], [data-theme="dark"][data-app="rabbit"] { --accent: var(--app-violett-dark); } [data-theme="dark"] [data-app="panda"], [data-theme="dark"][data-app="panda"] { --accent: var(--app-tanne-dark); } [data-theme="dark"] [data-app="biber"], [data-theme="dark"][data-app="biber"] { --accent: var(--app-holz-dark); } [data-theme="dark"] [data-app="versand"], [data-theme="dark"][data-app="versand"] { --accent: var(--app-indigo-dark); } [data-theme="dark"] [data-app="cockpit"], [data-theme="dark"][data-app="cockpit"] { --accent: var(--app-graphit-dark); } /* =========================================================================== GRUNDLAGE Das absolute Minimum, das jede App teilt. Keine Komponenten — die stehen in components.css bzw. der React-Bibliothek. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg-canvas); color: var(--fg); font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } /* Tabellenziffern als Vorgabe fuer alles Zaehlbare. */ table, .num, input[type="number"], time, output { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Tastaturbedienung muss sichtbar sein — in ClockIn fehlt das bislang ueberall. Der Ring nimmt die App-Akzentfarbe auf. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-control); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }