/* * Chorpanion Design-Tokens (Phase 6 / 6.1 / 6.2) * * Struktur: * 1. Neutrale Basisskala aus dem Designguide (assets/chorpanion_designguide_v0_2.pdf) * 2. Feste Ownerbereich-Tokens (--cp-owner-*) - werden NIE durch ein Chor-Theme ueberschrieben * 3. Choraufloesbare Basis-Theme-Tokens (--cp-color-*) - Default = Chorpanion-Defaultdesign, * im Chorbereich per choir_theme() individuell ueberschrieben (siehe layouts/app.html.twig) * 3b. Surface-Tokens (Kacheln/Karten) - default aus Hintergrund/Text abgeleitet * 3c. Button-Tokens: nur Primaerbutton-Hintergrund/-Text sind aktiv konfigurierbar * (Phase 6.2, vereinfachtes Buttonmodell). Der Sekundaerbutton wird immer * als transparenter Outline-Button aus der Primaerbutton-Hintergrundfarbe * abgeleitet. * 3d. Formularfeld-Tokens - default aus den Surface-Tokens abgeleitet * 3e. Radius-Tokens - nur ueber die Presets "straight"/"soft"/"round" steuerbar * 4. Semantische Statustoene (Ampelfarben) - nur als dezente Overlays, keine frei waehlbaren * Chorfarben * * Die konkreten Werte fuer 3, 3b-3e werden serverseitig in * src/Theme/Application/ThemeResolver.php aufgeloest (inkl. automatischer * Ableitung, wenn ein Chor kein explizites Feld gesetzt hat) und im * Chorbereich per components/app/theme_style_override.html.twig injiziert. * Die Werte hier sind nur der Chorpanion-Defaultstand (= Ownerbereich). */ :root { color-scheme: light; /* 1. Neutrale Basisskala */ --cp-neutral-000: #ffffff; --cp-neutral-050: #f8f8f8; --cp-neutral-100: #eeeeee; --cp-neutral-200: #dddddd; --cp-neutral-400: #999999; --cp-neutral-600: #666666; --cp-neutral-800: #222222; --cp-neutral-900: #111111; --cp-neutral-1000: #000000; /* 2. Ownerbereich-Tokens: bewusst statisch und neutral */ --cp-owner-color-background: var(--cp-neutral-000); --cp-owner-color-surface: var(--cp-neutral-000); --cp-owner-color-text: var(--cp-neutral-900); --cp-owner-color-muted: var(--cp-neutral-600); --cp-owner-color-border: var(--cp-neutral-900); --cp-owner-color-highlight-primary: var(--cp-neutral-900); --cp-owner-color-highlight-secondary: var(--cp-neutral-600); /* 3. Choraufloesbare Basis-Theme-Tokens (Default entspricht dem Chorpanion-Defaultdesign) */ --cp-color-primary: var(--cp-owner-color-highlight-primary); --cp-color-secondary: var(--cp-owner-color-highlight-secondary); --cp-color-highlight-primary: var(--cp-color-primary); --cp-color-highlight-secondary: var(--cp-color-secondary); --cp-color-background: var(--cp-owner-color-background); --cp-color-surface: var(--cp-owner-color-surface); --cp-color-text: var(--cp-owner-color-text); --cp-color-muted: var(--cp-owner-color-muted); --cp-color-border: var(--cp-owner-color-border); --cp-font-family: Arial, Helvetica, sans-serif; --cp-control-height: 2.75rem; /* 3b. Surface-Tokens: Kacheln/Karten treten bewusst zurueck */ --cp-color-surface-text: var(--cp-color-text); --cp-color-surface-border: color-mix(in srgb, var(--cp-color-text) 16%, transparent); --cp-color-surface-muted: color-mix(in srgb, var(--cp-color-surface-text) 60%, var(--cp-color-surface) 40%); /* Tabellen: Default entspricht der Kachel-Optik (Hintergrund/Text NICHT vertauscht), damit Tabellen im festen, neutralen Ownerbereich wie der Rest der Oberflaeche aussehen (weisse Flaeche, dunkle Schrift) statt einer dunklen Insel. Die vertauschte Variante (Tabelle = eigener, klar abgegrenzter Bereich mit garantiertem Kontrast auch auf sehr dunklen Chor-Hintergruenden) wird ausschliesslich im Chorbereich ueber components/app/theme_style_override.html.twig explizit gesetzt - der Ownerbereich bindet dieses Overlay bewusst nicht ein (siehe ADR Phase 6) und bleibt dadurch strukturell bei diesem neutralen Default. */ --cp-table-bg: var(--cp-color-surface); --cp-table-text: var(--cp-color-surface-text); --cp-table-border: var(--cp-color-surface-border); --cp-table-stripe-bg: color-mix(in srgb, var(--cp-table-bg) 88%, var(--cp-table-text) 12%); --cp-table-hover-bg: color-mix(in srgb, var(--cp-table-bg) 78%, var(--cp-table-text) 22%); /* 3c. Button-Tokens (vereinfachtes Modell, Phase 6.2) */ --cp-button-primary-bg: var(--cp-color-highlight-primary); --cp-button-primary-text: var(--cp-owner-color-background); --cp-button-primary-hover-bg: color-mix(in srgb, var(--cp-button-primary-bg) 85%, black 15%); --cp-button-secondary-bg: transparent; --cp-button-secondary-border: var(--cp-button-primary-bg); --cp-button-secondary-text: var(--cp-button-primary-bg); --cp-button-secondary-hover-bg: color-mix(in srgb, var(--cp-button-secondary-border) 12%, transparent); --cp-focus-ring-color: color-mix(in srgb, var(--cp-color-highlight-secondary) 55%, transparent); /* 3d. Formularfeld-Tokens: default aus den Surface-Tokens abgeleitet. Der Fokusrand nutzt bewusst Highlight sekundaer, nicht die Primaerbuttonfarbe, damit Buttons und Formularfeld-Fokus optisch getrennte Signale bleiben. */ --cp-form-bg: var(--cp-color-surface); --cp-form-text: var(--cp-color-surface-text); --cp-form-border: var(--cp-color-surface-border); --cp-form-placeholder: color-mix(in srgb, var(--cp-form-text) 55%, var(--cp-form-bg) 45%); --cp-form-focus-border: var(--cp-color-highlight-secondary); /* 3e. Radius-Tokens: nur ueber Presets "straight" (Default) / "soft" / "round" steuerbar */ --cp-radius-sm: 0px; --cp-radius-md: 0px; --cp-radius-lg: 0px; --cp-radius-pill: 2px; --cp-border-radius: var(--cp-radius-sm); /* 4. Semantische Statustoene, nur fuer dezente Overlays (Zusage/Warnung/Fehler/Hinweis) */ --cp-color-status-success-rgb: 46, 160, 67; --cp-color-status-warning-rgb: 210, 153, 34; --cp-color-status-danger-rgb: 207, 34, 46; --cp-color-status-info-rgb: 79, 125, 173; --cp-color-status-success: rgb(var(--cp-color-status-success-rgb)); --cp-color-status-warning: rgb(var(--cp-color-status-warning-rgb)); --cp-color-status-danger: rgb(var(--cp-color-status-danger-rgb)); --cp-color-status-info: rgb(var(--cp-color-status-info-rgb)); }