/* ===================================================================== APEX TOKENS — Single Source of Truth ===================================================================== Spec: docs/redesign/APEX_Tokens.md SSoT: docs/redesign/mockups/00_tokens.html (:root) Stand: Phase 2 — 19-Punkte-Mockup-SSoT (Option B), 2026-05-12 Phase 2a — Zwei-Ebenen-SSoT (Mai 2026) Sync: Alle 58 Ebene-2-Aliasse aus 00_tokens.html sind 1:1 hier gespiegelt (Werte über Ebene 1 aufgelöst, semantisch identisch). Verifikation 2026-05-12: 0 Drift. STRUKTUR -------- Ebene 1 — Rohwerte (Prefix --_) Tatsächliche Werte. Dürfen ausschließlich innerhalb dieser Datei referenziert werden. In css/components/ technisch gesperrt durch Pre-Commit Check 8 (siehe APEX_Design_Enforcement_Plan_v2.md §3.1). Ebene 2 — Semantische Aliase (Phase-2 Bridge-Architektur seit 2026-05-12) Einzige erlaubte Referenz in css/components/*.apex.css. a) Legacy-Familie = SSoT-Anker (1:1-Spiegel von 00_tokens.html :root). Werte fließen aus Ebene 1 (Rohwerte): --brand-blue* ← --_blue-600 etc. Tokens: --brand-blue*, --brand-cyan*, --semantic-green*, --semantic-amber*, --semantic-red*, --semantic-blue*, --bg, --bg-*, --surface, --separator*, --text-*, --topbar, --accent-orange*, --skel-highlight, --material-tint* b) Go-forward-Familie = Bridge auf Legacy-Anker (KEIN Direkt-Bezug zu Ebene 1). Wenn Mockup-SSoT (00_tokens.html) sich ändert, folgen beide Familien automatisch über die Legacy-Aliase. Tokens: --color-action* → var(--brand-blue*) --color-nu* → var(--brand-cyan*) --color-confirm* → var(--semantic-green*) --color-warn* → var(--semantic-amber*) --color-decline* → var(--semantic-red*) --color-info* → var(--semantic-blue*) --color-bg-* → var(--bg/--bg-zebra/--bg-hover/--surface) --color-border-* → var(--separator/--separator-strong) --color-text-* → var(--text-*) --color-topbar → var(--topbar) --color-accent* → var(--accent-orange*) --color-neutral-tint* → var(--material-tint*) --color-on-dark-* → var(--_white-*) (eigene Familie, kein Bridge-Partner) --color-*-inset, --color-*-on-dark, --color-border-hairline, --color-accent-tint-very-soft, --color-vacation, --color-status-billed (Pre-2b-Erweiterungen, direkt auf Ebene 1) LADE-REIHENFOLGE (index.html, Stand Phase 2a) --------------------------------------------- tokens.css <- diese Datei (SSoT) design-tokens.css <- FROZEN, überlappende --z-(asterisk) und --transition-(asterisk) gewinnen technisch noch (Phase-2b-TODO) components/index.css design-system.css <- FROZEN modules/ausfuehrung.css ===================================================================== */ :root { /* ===================================================================== EBENE 1 — ROHWERTE (gesperrt für Komponenten via Hook Check 8) ===================================================================== */ /* ── Neutrale ─────────────────────────────────────────────────────── */ --_bg-page: #F2F2F7; --_bg-zebra: #FAFAFC; --_bg-hover: #F7F7FB; --_surface-white: #FFFFFF; --_separator-soft: #E5E5EA; --_separator-strong: #D1D1D6; /* ── Text ─────────────────────────────────────────────────────────── */ --_text-900: #1C1C1E; --_text-700: #6E6E73; --_text-500: #8E8E93; --_text-300: #AEAEB2; /* ── Blau-Familie (Brand / Action / Info) ─────────────────────────── */ --_blue-600: #0356B1; --_blue-700: #024A99; --_blue-800: #013E82; --_blue-deep: #1A3A5C; --_blue-tint-soft: rgba(3, 86, 177, .06); --_blue-tint: #EAF1FB; --_blue-tint-hover: #DCE8F7; /* ── Cyan-Familie (Sub-Brand NU) ──────────────────────────────────── */ --_cyan-500: #0AA9BD; --_cyan-700: #087582; --_cyan-tint-soft: rgba(10, 169, 189, .06); --_cyan-tint: rgba(10, 169, 189, .16); --_cyan-border: rgba(10, 169, 189, .35); /* ── Topbar / Akzent ──────────────────────────────────────────────── */ --_topbar-deep: #15314D; --_orange-500: #E05A00; --_orange-tint: #FBE8D6; /* ── Grün-Familie (Confirm) ───────────────────────────────────────── */ --_green-700: #1E7B3A; --_green-800: #176A30; --_green-900: #115928; --_green-deep: #145025; --_green-tint: #E4F2EA; --_green-bg-on-tint: rgba(20, 80, 37, .14); --_green-border-strong: rgba(21, 86, 40, .42); /* ── Amber-Familie (Warn) ─────────────────────────────────────────── */ --_amber-700: #B87800; --_amber-tint: #FBF2DD; /* ── Rot-Familie (Decline / Destructive) ──────────────────────────── */ --_red-700: #C0392B; --_red-800: #A8302A; --_red-tint: #FBE9E9; --_red-tint-hover: #F4D9D9; --_red-tint-soft: #FFFBFB; /* ── Material-Tints (Apple HIG, auf hellem Grund) ─────────────────── */ --_grey-tint-12: rgba(118, 118, 128, .12); --_grey-tint-18: rgba(118, 118, 128, .18); /* ── Skeleton ─────────────────────────────────────────────────────── */ --_skel-mid: #EEEEEE; /* ── Weiß-Opazitäten (auf dunklem Grund: Topbar/Banner/Bulk/Toast) ── */ --_white-08: rgba(255, 255, 255, .08); --_white-10: rgba(255, 255, 255, .10); --_white-12: rgba(255, 255, 255, .12); --_white-18: rgba(255, 255, 255, .18); --_white-22: rgba(255, 255, 255, .22); --_white-25: rgba(255, 255, 255, .25); --_white-50: rgba(255, 255, 255, .50); --_white-75: rgba(255, 255, 255, .75); /* ── Backdrop-Farben (Modal / Palette) ────────────────────────────── */ --_backdrop-modal-color: rgba(28, 28, 30, .55); --_backdrop-palette-color: rgba(20, 22, 28, .45); /* ── Focus-Ring-Rohwerte ──────────────────────────────────────────── */ --_focus-ring-action: rgba(3, 86, 177, .4); --_focus-ring-error: rgba(192, 57, 43, .25); /* ===================================================================== EBENE 2 — SEMANTISCHE ALIASE Einzige erlaubte Referenz in css/components/*.apex.css ===================================================================== */ /* ── Backgrounds & Surfaces ───────────────────────────────────────── */ /* SSoT-Anker (Mockup 00_tokens.html :root): --bg, --bg-zebra, --bg-hover, --surface */ --bg: var(--_bg-page); --bg-zebra: var(--_bg-zebra); --bg-hover: var(--_bg-hover); --surface: var(--_surface-white); /* Bridge: Go-forward-Familie zeigt auf Legacy-SSoT-Anker */ --color-bg-page: var(--bg); --color-bg-zebra: var(--bg-zebra); --color-bg-hover: var(--bg-hover); --color-surface: var(--surface); /* ── Separators / Borders ─────────────────────────────────────────── */ /* SSoT-Anker: --separator, --separator-strong */ --separator: var(--_separator-soft); --separator-strong: var(--_separator-strong); /* Bridge */ --color-border-soft: var(--separator); --color-border-strong: var(--separator-strong); /* ── Text ─────────────────────────────────────────────────────────── */ /* SSoT-Anker: --text-primary/-secondary/-tertiary/-quaternary */ --text-primary: var(--_text-900); --text-secondary: var(--_text-700); --text-tertiary: var(--_text-500); --text-quaternary: var(--_text-300); /* Bridge */ --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-tertiary: var(--text-tertiary); --color-text-quaternary: var(--text-quaternary); /* ── Action (Brand-Blue) ──────────────────────────────────────────── */ /* SSoT-Anker: --brand-blue, --brand-blue-hover, --brand-blue-active, --brand-blue-deep, --brand-blue-tint-soft */ --brand-blue: var(--_blue-600); --brand-blue-hover: var(--_blue-700); --brand-blue-active: var(--_blue-800); --brand-blue-deep: var(--_blue-deep); --brand-blue-tint-soft: var(--_blue-tint-soft); /* Bridge */ --color-action: var(--brand-blue); --color-action-hover: var(--brand-blue-hover); --color-action-active: var(--brand-blue-active); --color-action-deep: var(--brand-blue-deep); --color-action-tint-soft: var(--brand-blue-tint-soft); /* ── Sub-Brand Cyan (NU-Pattern) ──────────────────────────────────── */ /* SSoT-Anker: --brand-cyan* */ --brand-cyan: var(--_cyan-500); --brand-cyan-text-strong: var(--_cyan-700); --brand-cyan-tint-soft: var(--_cyan-tint-soft); --brand-cyan-tint: var(--_cyan-tint); --brand-cyan-border: var(--_cyan-border); /* Bridge */ --color-nu: var(--brand-cyan); --color-nu-text-strong: var(--brand-cyan-text-strong); --color-nu-tint-soft: var(--brand-cyan-tint-soft); --color-nu-tint: var(--brand-cyan-tint); --color-nu-border: var(--brand-cyan-border); /* ── Topbar / Accent ──────────────────────────────────────────────── */ /* SSoT-Anker: --topbar, --accent-orange, --accent-orange-tint */ --topbar: var(--_topbar-deep); --accent-orange: var(--_orange-500); --accent-orange-tint: var(--_orange-tint); /* Bridge */ --color-topbar: var(--topbar); --color-accent: var(--accent-orange); --color-accent-tint: var(--accent-orange-tint); /* ── Confirm (Semantic-Green) ─────────────────────────────────────── */ /* SSoT-Anker: --semantic-green* */ --semantic-green: var(--_green-700); --semantic-green-hover: var(--_green-800); --semantic-green-active: var(--_green-900); --semantic-green-text-strong: var(--_green-deep); --semantic-green-tint: var(--_green-tint); --semantic-green-bg-on-tint: var(--_green-bg-on-tint); --semantic-green-border-strong: var(--_green-border-strong); /* Bridge */ --color-confirm: var(--semantic-green); --color-confirm-hover: var(--semantic-green-hover); --color-confirm-active: var(--semantic-green-active); --color-confirm-text-strong: var(--semantic-green-text-strong); --color-confirm-tint: var(--semantic-green-tint); --color-confirm-bg-on-tint: var(--semantic-green-bg-on-tint); --color-confirm-border-strong: var(--semantic-green-border-strong); /* ── Warn (Semantic-Amber) ────────────────────────────────────────── */ /* SSoT-Anker: --semantic-amber, --semantic-amber-tint */ --semantic-amber: var(--_amber-700); --semantic-amber-tint: var(--_amber-tint); /* Bridge */ --color-warn: var(--semantic-amber); --color-warn-tint: var(--semantic-amber-tint); /* ── Decline (Semantic-Red / Destructive) ─────────────────────────── */ /* SSoT-Anker: --semantic-red* */ --semantic-red: var(--_red-700); --semantic-red-hover: var(--_red-800); --semantic-red-tint: var(--_red-tint); --semantic-red-tint-hover: var(--_red-tint-hover); --semantic-red-tint-soft: var(--_red-tint-soft); /* Bridge */ --color-decline: var(--semantic-red); --color-decline-hover: var(--semantic-red-hover); --color-decline-tint: var(--semantic-red-tint); --color-decline-tint-hover: var(--semantic-red-tint-hover); --color-decline-tint-soft: var(--semantic-red-tint-soft); /* ── Info (Semantic-Blue, identisch zu Action) ────────────────────── */ /* SSoT-Anker: --semantic-blue, --semantic-blue-tint, --semantic-blue-tint-hover */ --semantic-blue: var(--_blue-600); --semantic-blue-tint: var(--_blue-tint); --semantic-blue-tint-hover: var(--_blue-tint-hover); /* Bridge */ --color-info: var(--semantic-blue); --color-info-tint: var(--semantic-blue-tint); --color-info-tint-hover: var(--semantic-blue-tint-hover); /* ── Material-Tints (auf hellem Grund) ────────────────────────────── */ /* SSoT-Anker: --material-tint, --material-tint-hover */ --material-tint: var(--_grey-tint-12); --material-tint-hover: var(--_grey-tint-18); /* Bridge */ --color-neutral-tint: var(--material-tint); --color-neutral-tint-hover: var(--material-tint-hover); /* ── Lock-State (gesperrte / read-only Zellen) ────────────────────── */ --bg-locked: var(--_grey-tint-12); /* ── Skeleton ─────────────────────────────────────────────────────── */ --skel-highlight: var(--_skel-mid); /* ── On-Dark-Familie (Topbar, Banner-Down, Bulk-Bar, Toast) ───────── */ --color-on-dark-divider-soft: var(--_white-08); --color-on-dark-divider: var(--_white-10); --color-on-dark-surface: var(--_white-12); --color-on-dark-surface-strong: var(--_white-18); --color-on-dark-surface-hover: var(--_white-22); --color-on-dark-spinner: var(--_white-25); --color-on-dark-text-weak: var(--_white-50); --color-on-dark-text-medium: var(--_white-75); --color-on-dark-text-strong: var(--_surface-white); /* ===================================================================== TYPOGRAFIE — Registry-First-Reset 2026-05-15 SSoT: docs/redesign/22_class_registry.html §2 (alleinige Wahrheit) Marc-Direktive: jeder Token hier muss EXAKT so in Registry §2 stehen. Wer abweichende Tokens braucht: ERST Registry erweitern, DANN hier. Spec-Referenz (historisch): APEX_Tokens.md §2.2 Konvention pro Type-Token: --type-X : `font:`-Shorthand (weight size/lh stack) --type-X-tracking : letter-spacing --type-X-transform : text-transform (nur wo gefordert) Anwendung in Komponente: font: var(--type-table-head); letter-spacing: var(--type-table-head-tracking); text-transform: var(--type-table-head-transform); ===================================================================== */ --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Display & Headings (Registry §2) */ --type-h1: 700 28px/1.20 var(--font-stack); --type-h2: 600 22px/1.25 var(--font-stack); --type-h3: 600 17px/1.30 var(--font-stack); --type-h4: 600 15px/1.30 var(--font-stack); /* Body (Registry §2) */ --type-body: 400 14px/1.50 var(--font-stack); --type-body-strong: 600 14px/1.50 var(--font-stack); /* Meta / sekundär (Registry §2) */ --type-meta: 500 12.5px/1.40 var(--font-stack); --type-meta-strong: 600 12.5px/1.40 var(--font-stack); /* Eyebrow / Caps / Table-Head (Registry §2) */ --type-eyebrow: 600 11px/1.30 var(--font-stack); --type-cap: 600 10.5px/1.30 var(--font-stack); --type-table-head: 600 11px/1.30 var(--font-stack); /* Mono — Identifiers, Dates, Numbers (Registry §2) */ --type-mono: 500 12.5px/1.40 var(--font-mono); --type-mono-strong: 600 12.5px/1.40 var(--font-mono); --type-mono-small: 500 11px/1.30 var(--font-mono); --type-mono-small-strong: 600 12px/1.40 var(--font-mono); /* Controls (Registry §2, aufgenommen 2026-05-15 für Pilot A — Apple-HIG-Body-Control 13pt) */ --type-control: 400 13px/1.4 var(--font-stack); --type-control-strong: 600 13px/1.4 var(--font-stack); --type-control-mono: 400 13px/1.4 var(--font-mono); /* Button-Text (Registry §2, aufgenommen 2026-05-15) */ --type-button: 600 12px/1.4 var(--font-stack); /* Letter-Spacing-Konventionen (Registry §2) */ --tracking-tight: -0.2px; --tracking-normal: -0.05px; --tracking-wide: 0.40px; /* ===================================================================== RADIEN ===================================================================== */ --radius-card: 14px; --radius-row-group: 12px; --radius-button: 11px; --radius-input: 10px; --radius-image: 7px; --radius-pill: 999px; /* ===================================================================== SPACING (4-er-Raster) ===================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-16: 64px; /* ===================================================================== LAYOUT ===================================================================== */ --screen-tablet-min: 768px; --screen-desktop-min: 1280px; --layout-max-width: 1600px; --layout-max-width-narrow: 980px; --page-pad-x: 32px; --page-pad-y: 28px; --topbar-h: 48px; --tabbar-h: 52px; --row-h-compact: 36px; --row-h-default: 44px; --row-h-comfortable: 52px; --cell-pad-x: 14px; /* ===================================================================== SCHATTEN ===================================================================== */ --shadow-card: 0 1px 0 rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04); --shadow-modal: 0 24px 64px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.06); --shadow-popover: 0 8px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06); --shadow-focus: 0 0 0 3px var(--_focus-ring-action); --shadow-toggle-active: 0 1px 2px rgba(0,0,0,.08); --shadow-sticky-header: 0 1px 0 var(--separator), 0 6px 8px -6px rgba(0,0,0,.18); /* ===================================================================== Z-INDEX-Skala (harte Skala, keine Zwischenwerte) Hinweis: design-tokens.css (FROZEN) definiert teilweise abweichende Werte (--z-sticky 10, --z-dropdown 50, --z-toast 1100). Da design-tokens.css NACH tokens.css geladen wird, gewinnen seine Werte technisch noch — Auflösung in Phase 2b (Loader-Order / Entfernung der überlappenden Definitionen). ===================================================================== */ --z-base: 1; --z-raised: 10; --z-dropdown: 500; --z-sticky: 600; --z-modal: 1000; --z-toast: 2000; --z-top: 9999; /* ===================================================================== TRANSITIONS Hinweis: design-tokens.css (FROZEN) überschreibt --transition-fast (0.15s ≠ 120ms) und --transition-slow (0.3s ≠ 350ms). Auflösung in Phase 2b. ===================================================================== */ --transition-fast: 120ms ease; --transition-base: 200ms ease; --transition-slow: 350ms ease; /* ===================================================================== BACKDROP & BLUR Modal: warm-dunkel, stark; Command-Palette: kühl-dunkel, leicht. ===================================================================== */ --backdrop-modal: var(--_backdrop-modal-color); --backdrop-palette: var(--_backdrop-palette-color); --blur-modal: 8px; --blur-palette: 2px; /* ===================================================================== FOCUS ===================================================================== */ --color-focus: var(--_blue-600); --focus-ring: 0 0 0 3px var(--_focus-ring-action); --focus-ring-error: 0 0 0 3px var(--_focus-ring-error); /* ===================================================================== PRE-2b ERGÄNZUNGEN (Mai 2026) — alle Werte server-belegt Belege siehe Inline-Kommentar pro Token + SSoT_FEEDER_REPORT_v2 §1a/§2. ===================================================================== */ /* Ebene 1 — Rohwerte */ --_orange-very-soft: #FDF6EE; /* mockups/08_week_bars.html:178 — .gantt-grid .row-cell.is-weekend */ --_grey-tint-14: rgba(118, 118, 128, .14); /* css/components/command-palette.css:200 */ --_grey-tint-16: rgba(118, 118, 128, .16); /* css/components/command-palette.css:81 */ --_grey-tint-20: rgba(118, 118, 128, .20); /* css/components/form.css:147 (toggle); states.css:66 (spinner) */ --_white-14: rgba(255, 255, 255, .14); /* css/components/topbar.css:65 — .topbar .search input:focus */ --_white-28: rgba(255, 255, 255, .28); /* css/components/states.css:144 — .banner .btn-ghost:hover */ --_green-inset: rgba(30, 123, 58, .25); /* mockups/08_week_bars.html:195 — .bar */ --_amber-inset: rgba(184, 120, 0, .30); /* mockups/08_week_bars.html:196 — .bar.bar-amber */ --_red-inset: rgba(192, 57, 43, .30); /* mockups/08_week_bars.html:197 — .bar.bar-red */ --_blue-inset: rgba(3, 86, 177, .30); /* mockups/08_week_bars.html:198 — .bar.bar-blue */ --_red-on-dark-25: rgba(192, 57, 43, .40); /* css/components/table.css:184 — .bulk-bar button.danger */ --_red-on-dark-50: rgba(192, 57, 43, .60); /* css/components/table.css:185 — .bulk-bar button.danger:hover */ --_hairline-color: rgba(60, 60, 67, .12); /* docs/redesign/APEX_Desktop_Designsystem.html:18 — iOS-Cell-Hairline (Marc-Freigabe E-1) */ --_pink-vacation: #ff69b4; /* js/modules/gantt.js:30,51 — Ferien-Marker (Marc-Entscheidung M7 2026-05-12) */ --_purple-billed: #7B2D8B; /* js/app.js:1170 — Status „Abgerechnet" (Marc-Entscheidung M9 2026-05-12) */ /* Ebene 2 — Semantische Aliase */ --color-neutral-tint-14: var(--_grey-tint-14); --color-neutral-tint-16: var(--_grey-tint-16); --color-neutral-tint-20: var(--_grey-tint-20); --color-on-dark-surface-14: var(--_white-14); --color-on-dark-surface-active: var(--_white-28); --color-confirm-inset: var(--_green-inset); --color-warn-inset: var(--_amber-inset); --color-decline-inset: var(--_red-inset); --color-info-inset: var(--_blue-inset); --color-decline-on-dark: var(--_red-on-dark-25); --color-decline-on-dark-hover: var(--_red-on-dark-50); --color-border-hairline: var(--_hairline-color); --color-accent-tint-very-soft: var(--_orange-very-soft); --color-vacation: var(--_pink-vacation); --color-status-billed: var(--_purple-billed); } /* ════════════════════════════════════════════════════════════ APEX TYPO-CLEAN-SWEEP (2026-05-14) — Globaler Font-Hammer Erzwingt System-Stack auf ALLEN Elementen + erzwungene Vererbung für Form-Elemente. Legacy-Webfont eliminiert. SSoT: docs/redesign/apex_typo_library.json ════════════════════════════════════════════════════════════ */ html, body, button, input, select, textarea, .apex { font-family: var(--font-stack) !important; -webkit-font-smoothing: antialiased; } input, select, textarea, button, code, pre { font: inherit !important; } /* ──────────────────────────────────────────────────────────── APEX semantische Typo-Klassen PURGE 2026-05-15: alle .apex-type-* Klassen entfernt (Schatten-Namespace, nicht in Registry §3 verzeichnet). Registry-legitime Atom-Klassen sind .apex-cell-* (Registry §3) und .apex-pill[-variant] (Registry §4) — Definitionen in den jeweiligen Komponenten-CSS, NICHT in tokens.css. ──────────────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════ APEX LOCK-STATE — data-state="locked" Foundation Γ: keine pointer-events:none mehr. Steuert Cursor, Opazität, Hintergrund. ════════════════════════════════════════════════════════════ */ [data-state="locked"] { background: var(--bg-locked); opacity: 0.6; cursor: not-allowed; } [data-state="locked"]::selection { background: transparent; } [data-state="locked"]:focus, [data-state="locked"]:focus-within { box-shadow: none; border-color: transparent; }