/* ERZEUGT — NICHT BEARBEITEN. * * node tools/build-crm-tokens.js * * Quelle: design-system/tokens.css (Selektoren auf .crm-ds umgeschrieben). * Änderungen gehören ins CRM-Repo, siehe design-system/HERKUNFT.md. */ /* ============================================================================= Agora Design-System v1 — tokens.css Einzige Quelle der Wahrheit. Jedes HTML-Artefakt des Systems laedt genau diese Datei; tokens.json und tailwind.preset.ts sind Ableitungen davon. Seit v3.0.0 fuehrt tokens.json dieselben Bindungen maschinenlesbar (semantic.light / semantic.dark, Werte als Tokenpfade auf die Rampen). Beide Dateien muessen dieselben Paare ergeben; nachgewiesen wird das mit node design-system/tokens-check.mjs Jede Rolle steht deshalb als var(--rampe) da, nicht als Literal. Die einzige Ausnahme ist --surface-overlay, weil var() keine Deckkraft tragen kann; die Bindung steht dort im Kommentar und wird vom Skript nachgerechnet. Legende der Herkunft: [S:] aus dem genannten Screenshot abgeleitet [E] EIGENE SETZUNG (aus den Screenshots nicht ablesbar) [A] Agora-Brandvorgabe (unveraenderlich) ============================================================================= */ .crm-ds { color-scheme: light; /* --- Neutralskala [E] ----------------------------------------------------- oklch-harmonisiert, minimal warm (Hue ~ 70, Chroma 0.002-0.008), damit die Flaechen unter dem warmen Akzent nicht kippen. HammerUp misst kuehl (#f9fafc / #f3f4f6, [S:h01-dashboard-gesamt.png]); wir setzen bewusst warm-neutral — kein 1:1-Abzug. */ --n-0: #ffffff; --n-25: #fcfcfb; --n-50: #f8f7f5; --n-100: #f2f1ee; --n-200: #e7e5e1; --n-300: #d6d3ce; --n-400: #b1aea8; --n-500: #88857e; --n-600: #66635d; --n-700: #4c4945; --n-800: #34322f; --n-900: #21201d; --n-950: #141311; /* --- Orange-Rampe [A] ----------------------------------------------------- 500 = MARKEN-ORANGE, 600 = INTERAKTIONS-ORANGE. Beide Anker unveraendert. 650 ist die harmonisierte Zwischenstufe fuer Text auf hellem Grund. */ --o-50: #fdf2e9; --o-100: #fde8d9; --o-200: #fbd2b6; --o-300: #f7b28a; --o-400: #f28d59; --o-500: #ee6b2f; --o-600: #c2541b; --o-650: #b34d1a; --o-700: #a8481a; --o-800: #883b17; --o-900: #6b2f13; --o-950: #3f1c0c; /* Rollenaliase der Brandvorgabe */ --accent: var(--o-500); --accent-strong: var(--o-600); --accent-strong-hover: var(--o-700); --accent-text: var(--o-650); --accent-soft: var(--o-100); --accent-soft-2: var(--o-50); /* --- Statusrampen [E] ----------------------------------------------------- Warnung liegt bewusst im Gold-/Gelbbereich (Hue ~ 85), damit sie nie mit dem Marken-Orange verwechselt wird. */ --success-50: #e9f5ee; --success-100: #d1eadd; --success-500: #1f8a5f; --success-600: #17714d; --success-700: #115a3d; --info-50: #eaf1fa; --info-100: #d5e4f5; --info-500: #2f6fbf; --info-600: #245a9e; --info-700: #1b477d; --warning-50: #fdf4dc; --warning-100: #fbe9b8; --warning-500: #c98a06; --warning-600: #a06d04; --warning-700: #7d5503; --danger-50: #fdecea; --danger-100: #fbd9d5; --danger-500: #c8352b; --danger-600: #a52a22; --danger-700: #85211b; /* --- Diagrammpalette [E] — gleiche Helligkeit/Chroma, gestreute Hues ----- */ --chart-1: #ee6b2f; --chart-2: #2f7d72; --chart-3: #3a6ea8; --chart-4: #7a5aa0; --chart-5: #b3821c; --chart-6: #b8556b; --chart-grid: var(--n-200); --chart-axis: var(--n-400); --chart-empty: var(--n-100); /* --- Dunkelstufen der Rampen [E] ----------------------------------------- Bis v2.1.0 band der Dunkelmodus seine Flaechen, Raender, Textfarben und Statustoene an Literale, die in keiner Rampe standen. Seit v3.0.0 stehen genau diese Werte hier als eigene Stufen — kein neuer Farbton, keine neue Messung, nur die vorhandenen Dunkelwerte an ihren Platz in der jeweiligen Rampe gesetzt. Die Stufennummer folgt der Helligkeit: je hoeher die Zahl, desto dunkler; Zwischenstufen liegen zwischen ihren Nachbarn. Eine einzige Wertkorrektur dabei: --interactive-soft-hover trug #4b2a18, --status-accent-border #4a2a18 — dieselbe Stufe, um einen Rotwert versetzt. Beide stehen jetzt auf --o-925. Nachzug aus dem App-Umbau, § 7.6 der governance.md. */ --n-75: #f4f2ef; --n-350: #cec9c2; --n-375: #b6b1a9; --n-425: #a9a49b; --n-450: #9c968d; --n-575: #6b665f; --n-650: #56524c; --n-775: #3f3c38; --n-825: #302e2b; --n-850: #2d2b28; --n-875: #242220; --n-925: #1c1a18; --n-1000: #080807; /* 940 ist so hell wie 950, aber leiser gesaettigt — die getoente Flaeche, nicht das Rampenende. Deshalb eine eigene Stufe und keine Umdeutung. */ --o-925: #4a2a18; --o-940: #3a2114; --o-975: #2a1810; --success-300: #6fcf9b; --success-800: #1d4433; --success-900: #12291f; --info-300: #86b4e8; --info-800: #1e3550; --info-900: #131f2e; --warning-300: #e3ba55; --warning-800: #4a3a17; --warning-900: #2b2210; --danger-300: #f09187; --danger-800: #4d2420; --danger-900: #2d1614; /* =========================== Semantische Rollen ========================== */ /* Flaechen */ --surface-page: var(--n-50); --surface-1: var(--n-0); --surface-2: var(--n-100); --surface-3: var(--n-200); --surface-inverse: var(--n-900); /* --n-900 mit 45 % Deckkraft. var() traegt keine Alpha, deshalb ausgeschrieben; Bindung in tokens.json: "{color.neutral.900} / 45%". */ --surface-overlay: rgba(33, 32, 29, 0.45); --surface-accent-soft: var(--o-100); --surface-accent-soft-2: var(--o-50); /* Text */ --text-primary: var(--n-900); --text-secondary: var(--n-700); /* --n-600, nicht --n-500: die 500er-Stufe misst 3,26 auf --surface-2 und 3,44 auf dem Seitengrund und faellt damit unter AA. § 2.2 laesst sie ohnehin nur fuer Text ab 19 px fett zu, waehrend das Listen-Sheet den 11-px-Tabellenkopf auf diese Rolle setzt. --n-600 hebt --surface-2 von 3,26 auf 5,30 und ist laut § 2.2 "die dunkelste noch leise Stufe". Nachzug aus dem CRM-Umbau, governance.md § 7.3. */ --text-muted: var(--n-600); --text-disabled: var(--n-400); --text-inverse: var(--n-0); --text-accent: var(--o-650); --text-link: var(--o-650); --text-on-accent: var(--n-0); /* Raender */ --border-subtle: var(--n-200); --border-default: var(--n-300); --border-strong: var(--n-400); --border-accent: var(--o-500); /* Interaktion */ --interactive-solid: var(--o-600); --interactive-solid-hover: var(--o-700); --interactive-solid-active: var(--o-800); --interactive-fg: var(--o-600); --interactive-soft: var(--o-100); --interactive-soft-hover: var(--o-200); --interactive-ghost-hover: var(--n-100); --focus-ring-color: var(--o-600); --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--focus-ring-color); --form-accent: var(--o-600); /* Navigation [S:h01-sidebar-ausgeklappt.png] — Anatomie uebernommen, Farbe eigen: HammerUp faerbt den aktiven Pill neutral (#ebebeb, GEMESSEN), Agora setzt ihn auf accent-soft mit accent-strong Schrift. */ --nav-active-bg: var(--o-100); /* --o-700, nicht --o-600: die Schrift des aktiven Pills steht auf --accent-soft und nicht auf Weiss. #c2541b erreicht dort nur 3,87 und faellt damit unter AA, #b34d1a knapp 4,44. Erst --o-700 traegt mit 4,91. Nachzug aus dem CRM-Umbau, governance.md § 7.4. */ --nav-active-fg: var(--o-700); --nav-idle-fg: var(--n-600); --nav-hover-bg: var(--n-100); /* Statusrollen */ --status-success-surface: var(--success-50); --status-success-border: var(--success-100); --status-success-fg: var(--success-600); --status-success-solid: var(--success-600); --status-info-surface: var(--info-50); --status-info-border: var(--info-100); --status-info-fg: var(--info-600); --status-info-solid: var(--info-600); --status-warning-surface: var(--warning-50); --status-warning-border: var(--warning-100); --status-warning-fg: var(--warning-700); --status-warning-solid: var(--warning-700); --status-danger-surface: var(--danger-50); --status-danger-border: var(--danger-100); --status-danger-fg: var(--danger-600); --status-danger-solid: var(--danger-600); --status-neutral-surface: var(--n-100); --status-neutral-border: var(--n-200); --status-neutral-fg: var(--n-600); --status-neutral-solid: var(--n-600); --status-accent-surface: var(--o-50); --status-accent-border: var(--o-100); --status-accent-fg: var(--o-650); --status-accent-solid: var(--o-500); /* --- Radien [S:h01-dashboard-gesamt.png, h05-rechnungsliste.png] --------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px; --r-pill: 999px; /* Das ziehbare Blatt liegt zwischen Karte (14) und Dialog (20): es ist keine Karte mehr und noch kein Dialog. Gilt allein fuer ziehbare Blaetter — jede Flaeche, die sich nicht ziehen laesst, ist eine Karte und nimmt --r-xl (§ 7.13). Herkunft mobil.dc.html, Tabelle „Maße und Regeln"; aufgenommen mit § 7.8 der governance.md. */ --r-sheet: 18px; /* --- Abstandsskala [S, 4er-Raster] -------------------------------------- */ --sp-0: 0px; --sp-05: 2px; --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-12:48px; --sp-16:64px; /* --- Elevation [S] — sehr zurueckhaltend, Rand traegt, Schatten stuetzt -- */ --e-0: none; --e-1: 0 1px 2px rgba(20,19,17,.05); --e-2: 0 1px 3px rgba(20,19,17,.06), 0 4px 12px rgba(20,19,17,.05); --e-3: 0 2px 6px rgba(20,19,17,.07), 0 12px 28px rgba(20,19,17,.09); --e-4: 0 4px 10px rgba(20,19,17,.08), 0 24px 56px rgba(20,19,17,.14); /* --- Typografie --------------------------------------------------------- */ --font-ui: 'Figtree', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; --font-print: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-num: var(--font-ui); --fs-display: 40px; --lh-display: 46px; --fs-h1: 30px; --lh-h1: 36px; --fs-h2: 24px; --lh-h2: 30px; --fs-h3: 19px; --lh-h3: 26px; --fs-h4: 16px; --lh-h4: 22px; --fs-body-lg: 16px; --lh-body-lg: 24px; --fs-body: 14px; --lh-body: 20px; --fs-sm: 13px; --lh-sm: 18px; --fs-caption: 12px; --lh-caption: 16px; --fs-overline: 11px; --lh-overline: 14px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --ls-tight: -0.02em; --ls-normal: 0em; --ls-overline: 0.07em; /* --- Motion [E] --------------------------------------------------------- */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 480ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-entrance: cubic-bezier(0, 0, 0, 1); --ease-exit: cubic-bezier(.3, 0, 1, 1); --ease-emphasized: cubic-bezier(.2, 0, 0, 1); /* --- Ebenen [E] --------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-drawer: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; --z-tooltip: 700; /* --- Druckflächen [E] — kundengerichtet, bewusst konservativer ---------- Maße in pt/mm, weil Druckereien und Vorlagen in diesen Einheiten denken. Referenz für die Anatomie: h05-pdf-vorschau-r00101. */ --print-page-w: 210mm; --print-page-h: 297mm; --print-margin-x: 20mm; --print-margin-top: 18mm; --print-margin-bottom: 16mm; --print-fs-body: 10pt; --print-lh-body: 14pt; --print-fs-small: 8pt; --print-lh-small: 11pt; --print-fs-h1: 16pt; --print-lh-h1: 20pt; --print-fs-h2: 11pt; --print-lh-h2: 15pt; --print-fs-sum: 12pt; --print-rule: 0.4pt; --print-ink: #1a1a18; --print-ink-soft: #55524c; --print-ink-faint: #8a8680; --print-line: #c9c5be; --print-band: #f2f1ee; /* --- Layout [S] --------------------------------------------------------- */ --layout-sidebar: 232px; --layout-sidebar-collapsed: 68px; --layout-content-max: 1392px; --layout-gutter: 24px; --control-h-sm: 32px; --control-h-md: 38px; --control-h-lg: 44px; --row-h: 56px; --row-h-compact: 40px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; /* Mobil [E] — eigene Werte, weil das Telefon nicht der eingerueckte Desktop ist: 24 px Rand fressen auf 390 px Breite ein Zehntel der Flaeche. Rand und Karteninnenpolsterung addieren sich zu 29 px bis zum Text. Herkunft mobil.dc.html, Tabelle „Maße und Regeln"; aufgenommen mit § 7.8. */ --layout-mobile-gutter: 14px; --layout-mobile-card-pad: 15px; } /* ============================================================================= Dark Mode — EIGENE SETZUNG [E] Ableitungsregel: Flaechen steigen mit der Ebene auf (page dunkelster Wert), Rampen bleiben identisch, nur Rollen werden neu gebunden. Das Interaktions- Orange #c2541b traegt auf dunklem Grund zu wenig; dort uebernimmt das MARKEN-Orange #ee6b2f die Flaechenrolle und bekommt dunkle Schrift. Seit v3.0.0 steht hier kein Literal mehr: die Dunkelwerte sind Stufen der Rampen (Block „Dunkelstufen" oben), dieser Block bindet nur noch. ============================================================================= */ [data-theme="dark"] .crm-ds,.crm-ds[data-theme="dark"] { color-scheme: dark; --surface-page: var(--n-950); --surface-1: var(--n-925); --surface-2: var(--n-875); --surface-3: var(--n-850); --surface-inverse: var(--n-100); /* --n-1000 mit 62 % Deckkraft, siehe Light-Block. Bindung in tokens.json: "{color.neutral.1000} / 62%". */ --surface-overlay: rgba(8, 8, 7, 0.62); --surface-accent-soft: var(--o-940); --surface-accent-soft-2: var(--o-975); --text-primary: var(--n-75); --text-secondary: var(--n-350); --text-muted: var(--n-450); --text-disabled: var(--n-575); --text-inverse: var(--n-950); --text-accent: var(--o-300); --text-link: var(--o-300); --text-on-accent: var(--n-950); --border-subtle: var(--n-825); --border-default: var(--n-775); --border-strong: var(--n-650); --border-accent: var(--o-500); --interactive-solid: var(--o-500); --interactive-solid-hover: var(--o-400); --interactive-solid-active: var(--o-300); --interactive-fg: var(--o-300); --interactive-soft: var(--o-940); --interactive-soft-hover: var(--o-925); --interactive-ghost-hover: var(--n-875); --focus-ring-color: var(--o-400); --form-accent: var(--o-500); --nav-active-bg: var(--o-940); --nav-active-fg: var(--o-300); --nav-idle-fg: var(--n-425); --nav-hover-bg: var(--n-875); --status-success-surface: var(--success-900); --status-success-border: var(--success-800); --status-success-fg: var(--success-300); --status-success-solid: var(--success-500); --status-info-surface: var(--info-900); --status-info-border: var(--info-800); --status-info-fg: var(--info-300); --status-info-solid: var(--info-500); --status-warning-surface: var(--warning-900); --status-warning-border: var(--warning-800); --status-warning-fg: var(--warning-300); --status-warning-solid: var(--warning-500); --status-danger-surface: var(--danger-900); --status-danger-border: var(--danger-800); --status-danger-fg: var(--danger-300); --status-danger-solid: var(--danger-500); --status-neutral-surface: var(--n-875); --status-neutral-border: var(--n-775); --status-neutral-fg: var(--n-375); --status-neutral-solid: var(--n-500); --status-accent-surface: var(--o-975); --status-accent-border: var(--o-925); --status-accent-fg: var(--o-300); --status-accent-solid: var(--o-500); --chart-grid: var(--n-850); --chart-axis: var(--n-575); --chart-empty: var(--n-875); --e-1: 0 1px 2px rgba(0,0,0,.40); --e-2: 0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.40); --e-3: 0 2px 6px rgba(0,0,0,.50), 0 12px 28px rgba(0,0,0,.48); --e-4: 0 4px 10px rgba(0,0,0,.55), 0 24px 56px rgba(0,0,0,.60); } @media (prefers-reduced-motion: reduce) { .crm-ds { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; } }