/** * idf-tokens v0.6.0 - Design-Tokens für apps-v2 * * v0.6.0 (#201 L5b): --shade-03/-04/-08/-12/-15/-25 + --overlay-scrim - * neutrale Schwarz-Alpha-Skala (Joerg-Entscheidung 2026-07-03); ersetzt * die bare gestreuten rgba(0,0,0,X)-Werte repo-weit. Weiss-Alphas * laufen ohne Familie ueber color-mix(var(--white) N%, transparent). * * v0.5.0 (#201): --orange-text (#b45309) - Texttton für Orange-/Soon- * Badges auf hellen Tints, analog --yellow-text/--green-text; legitimiert * den bisher 4x in safeguard.css kopierten Hex-Wert (Audit L5/F5). * * v0.4.0 (#199): --font-mono (Mono-Stack als Superset der bisherigen * Modul-Varianten, Audit H6) und --font-xs2 (0.75rem = 12 px, schließt * die Lücke 11 -> 13 px in der Font-Skala, Audit H7). * * v0.3.0 (#194): Pastell-Palette (--pastel-*) für opake Status-/ * Quadranten-Hintergründe — identisch mit den Eisenhower-Farben, die * idf-core seit #194 als --q*-bg referenziert; storyforge-Status-Pillen * und der diff-Block nutzen sie statt kopierter Hex-Werte. * * v0.2.0 (#192): Tint-Palette (--tint-*) für Status-/Kategorie-Pillen- * Hintergründe (vorher 120+× als rgba(...) in Modul-CSS kopiert), * Ampel-Farben --green/--red, --bg-hover, Shadows --shadow-card/-focus. * Modul-Umstellung auf die neuen Tokens folgt in #193. * * Single Source of Truth für alle Design-Variablen: Farben, Spacings, * Typography, Border-Radius, Shadows, Z-Index, Motion. Wird als allererstes * Stylesheet im jeder v2-Seite geladen, damit alle nachfolgenden * Bausteine und Modul-CSS-Files auf `var(--token-name)` zugreifen können. * * Konvention: * - Color-Tokens: `--` (kompatibel mit bestehenden v1/v2-Verwendungen) * - Spacings: `--space-` (4 px-Raster) * - Typography: `--font-`, `--leading-`, `--weight-` * - Radius: `--radius-` * - Shadow: `--shadow-` * - Z-Index: `--z-` * - Motion: `--motion-` * * Bei Erweiterung: erst hier ergänzen, dann konsumieren. Keine magischen * Hex-Werte, Pixel-Spacings oder Z-Index in Modul-CSS — alles als Token. */ :root { /* ============================================================== */ /* Farben — IDF-Brand */ /* ============================================================== */ --primary: #c8134b; /* Brand-Rot, Primary-Action */ --accent: #167ea0; /* Akzent-Blau, Sortierung, Info */ --confirm: #0c998e; /* Bestätigend-Grün, erledigt */ --orange: #e8710a; /* Warning-Orange, freigegeben */ --yellow: #f9ab00; /* Yellow, zur_freigabe (auf hellem Background) */ --yellow-text: #b58600; /* Yellow für weißen Text-Kontrast */ --orange-text: #b45309; /* Orange-Text auf hellen Tints (Soon-/Warn-Badges, safeguard); bewusst getrennt von --yellow-text (Audit L5/#201) */ --indigo: #4f46e5; /* Indigo — Kategorie „Agent" (akteure) / „Institution" (unternehmen). Bewusst neue Kategorie-Farbe, #180 */ --green: #2e8540; /* Ampel-Grün (SafeGuard GBU-Ampel, erledigt-Stats) — bewusst dunkler/satter als --confirm */ --green-text: #1f7a3f; /* Textfarbe auf --tint-green */ --red: #e11d21; /* Alarm-/Gefahr-Rot (Gefahr-Pillen, Intervall jährlich) — bewusst getrennt vom Brand-Rot --primary */ /* ============================================================== */ /* Farben — Neutrale Skala */ /* ============================================================== */ --ink: #111111; /* Haupttext, dunkelster Wert */ --mid: #555555; /* Sekundärtext, Mid-Grau */ --soft: #ae9586; /* Soft-Braun, Status „offen", subtle Akzente */ --bg: #fafafa; /* Page-Hintergrund, Toolbar */ --line: #e5e5e5; /* Borders, Trennlinien */ --white: #ffffff; /* Reines Weiß */ --neutral-mid: #6b7280; /* Mittleres Grau, z.B. Status zurueckgestellt */ --neutral-bg: #f0f1f3; /* Sehr helles Grau, neutraler Q4-Background */ --bg-hover: #f8f8f8; /* Zeilen-/Karten-Hover (SSOT; Basis-Regel liegt in idf-list-grid.css) */ /* ============================================================== */ /* Farben — Tints (#192) */ /* Transparente Status-/Kategorie-Hintergruende (Pillen, Badges, */ /* Stat-Kacheln). SSOT fuer die vorher 120+x als rgba(...) in */ /* Modul-CSS kopierten Werte; Staerken = dominante Ist-Werte aus */ /* dem Optimierungs-Audit. Via color-mix an die Basisfarbe */ /* gekoppelt — Brand-Aenderung wirkt automatisch auf alle Tints. */ /* ============================================================== */ --tint-primary: color-mix(in srgb, var(--primary) 10%, transparent); --tint-accent: color-mix(in srgb, var(--accent) 10%, transparent); --tint-accent-soft: color-mix(in srgb, var(--accent) 4%, transparent); --tint-confirm: color-mix(in srgb, var(--confirm) 12%, transparent); --tint-orange: color-mix(in srgb, var(--orange) 12%, transparent); --tint-yellow: color-mix(in srgb, var(--yellow) 18%, transparent); --tint-green: color-mix(in srgb, var(--green) 12%, transparent); --tint-red: color-mix(in srgb, var(--red) 12%, transparent); --tint-indigo: color-mix(in srgb, var(--indigo) 10%, transparent); --tint-neutral: rgba(0, 0, 0, 0.06); /* neutrale Pille (extern/inaktiv/sonstiges/ausgemustert) */ /* ============================================================== */ /* Farben - Shades (#201 L5b, Joerg-Entscheidung 2026-07-03) */ /* Neutrale Schwarz-Alpha-Skala fuer Abdunklungs-Flaechen und */ /* -Konturen auf hellem Grund; Staerken = Ist-Werte der bisher */ /* bare gestreuten rgba(0,0,0,X). 6% lebt weiter als */ /* --tint-neutral (Pillen-Semantik). Weiss-Alphas brauchen keine */ /* Familie: color-mix(in srgb, var(--white) N%, transparent). */ /* ============================================================== */ --shade-03: rgba(0, 0, 0, 0.03); /* ganz leichte Hover-/Well-Flaeche (Tab-Hover, Quelle-Karte) */ --shade-04: rgba(0, 0, 0, 0.04); /* Wells, Meta-/Code-Flaechen */ --shade-08: rgba(0, 0, 0, 0.08); /* leichte Konturen, aktive Flaechen (Zeichen-Kacheln, Open-Pille) */ --shade-12: rgba(0, 0, 0, 0.12); /* Karten-/Disabled-Konturen */ --shade-15: rgba(0, 0, 0, 0.15); /* Icon-Button- und Pillen-Hover (Standard) */ --shade-25: rgba(0, 0, 0, 0.25); /* kraeftige Karten-Kontur (hub-card) */ --overlay-scrim: rgba(0, 0, 0, 0.45); /* Modal-/Dialog-Hintergrund-Scrim */ /* ============================================================== */ /* Farben — Pastelle (#194) */ /* Opake Status-/Quadranten-Hintergruende. Identisch mit den */ /* Eisenhower-Quadranten-Farben (idf-core --q*-bg referenziert */ /* sie); ausserdem Status-Pillen (storyforge) und diff-Block. */ /* ============================================================== */ --pastel-red: #fce8e6; /* = Q1 (Wichtig+Dringend); diff-removed; Antagonist */ --pastel-orange: #fef3e0; /* = Q2 (Wichtig); Status entwurf */ --pastel-accent: #e0f0f5; /* = Q3 (Dringend); Status konzeption/review */ --pastel-green: #e6f4ea; /* diff-added; Status fertig/final */ --pastel-yellow: #fdf3cf; /* Status ueberarbeitung */ --pastel-yellow-text: #9c7400; /* Textfarbe auf --pastel-yellow */ /* ============================================================== */ /* Spacings — 4-px-Raster */ /* ============================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ============================================================== */ /* Typography */ /* ============================================================== */ --font-family: inherit; /* Default: vom erben (Figtree o.ä.) */ /* Mono-Stack für Code, Markdown-Quelltext, technische Eingaben. Superset der bisherigen Modul-Varianten (#199 H6): ui-monospace/ SFMono/Menlo decken macOS ab, Cascadia Code/Consolas Windows. */ --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace; --font-xs: 0.6875rem; /* 11 px — Header-Caps */ --font-xs2: 0.75rem; /* 12 px - Meta-Texte, Sublines (#199 H7) */ --font-sm: 0.8125rem; /* 13 px — kleine Buttons, Stats */ --font-md: 0.875rem; /* 14 px — Filter, Suche */ --font-base: 1rem; /* 16 px — Body, Cell-Inhalte */ --font-lg: 1.125rem; /* 18 px — Modal-Title */ --font-xl: 1.25rem; /* 20 px — Page-Title */ --font-xxl: 1.75rem; /* 28 px — App-Header-Headline (idf-app-header) */ --leading-tight: 1; --leading-snug: 1.2; --leading-base: 1.4; --leading-relax: 1.5; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --weight-extrabold: 800; /* Score-Zahlen, harte Akzente */ --weight-black: 900; /* Headlines (Figtree Black) */ /* ============================================================== */ /* Border-Radius */ /* ============================================================== */ --radius-xs: 3px; /* Form-Inputs (eckig) */ --radius-sm: 4px; /* Icon-Buttons, Listen-Cell-Marker */ --radius-md: 6px; /* Bar-Buttons, Pillen, Status-Badges */ --radius-lg: 8px; /* Modal-Dialog */ --radius-pill: 999px; /* runde Pillen (selten) */ /* ============================================================== */ /* Shadows */ /* ============================================================== */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.25); /* Modal-Dialog */ --shadow-drag: 0 8px 20px rgba(0, 0, 0, 0.18); /* Drag-Klon */ --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.06); /* Karten/Panels — haeufigster Ist-Wert (#192); ersetzt die Mikro-Varianten in Modul-CSS (#193) */ --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); /* Fokus-Ring (Inputs, aktive Controls) */ /* ============================================================== */ /* Z-Index — klare Hierarchie */ /* ============================================================== */ --z-base: 1; /* normaler Inhalt mit position-Stacking */ --z-overlay: 5; /* Cell-Overlay (Fortschrittsbalken etc.) */ --z-sticky: 10; /* Sticky-Header der Liste */ --z-dropdown: 100; /* Combobox-Popups */ --z-drag: 9000; /* Drag-Indicator (über Sticky) */ --z-modal: 10000; /* Modal-Overlays (Confirm, Detail) */ --z-toast: 11000; /* Toasts liegen über allem */ /* ============================================================== */ /* Motion — Animations-Timings */ /* ============================================================== */ --motion-fast: 80ms; /* sehr schnelle Hovers, Save-Schimmer */ --motion-base: 120ms; /* Standard-Hover, Button-State-Wechsel */ --motion-medium: 150ms; /* Modal-Fade, Sortable-Animations */ --motion-slow: 200ms; /* Fortschritts-Bars */ --ease-default: ease; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ============================================================ Typografie-Utilities (global, app-übergreifend) ============================================================ Konvention für apps-v2: - Headlines (Karten-Titel, Page-Titel, Sektions-Überschriften): Extrabold + Großbuchstaben → Klasse `.idf-headline`. - Fließtext, Labels: Figtree Regular (Body-Default). - Fetter Text in Listen, Zahlen, Akzenten: Extrabold (var(--weight-extrabold)) statt 700, damit der Kontrast zur Regular-Schrift deutlich genug ist. - Icons: FontAwesome Regular (`fa-regular`) als verbindlicher Default, `fa-solid` nur als dokumentierte Ausnahme (aktuell: `fa-spinner`). Verbindliche Regel + Ausnahmeliste: _shared/ICONS.md. ============================================================ */ .idf-headline { font-weight: var(--weight-black); text-transform: uppercase; letter-spacing: -0.025em; line-height: var(--leading-snug); }