/* ============================================================================= * Forum Leverkusen – Design-Tokens * ============================================================================= * * ZWEI EBENEN. Bitte die Trennung einhalten: * * Ebene 1 – PRIMITIVE (Rohpalette, Abschnitt 1) * --pink-40, --blue-85, --black-105 … * Reine Farbwerte ohne Bedeutung. Werden AUSSCHLIESSLICH von Ebene 2 * referenziert – niemals direkt von einer Komponente. * * Ebene 2 – ROLLEN (Abschnitt 3) * --link, --heading, --focus-ring, --btn-primary-bg, --card-bg … * Beschreiben, WOFÜR eine Farbe steht. Nur diese Tokens gehören in * style.css, in Block-Stylesheets und in Plugin-CSS. * * Warum: Welche Stufe der Rohpalette richtig ist, hängt von Rolle UND * Hintergrund ab. "Pink" ist als Fließtext-Link auf dunklem Grund hell * (--pink-40, 8,9:1), als Text auf dunkelrosa Fläche fast weiß (--pink-10, * 10,3:1) und als Trennlinie mittig (--pink-55). Ein Element, das direkt * var(--pink-40) schreibt, kann das nicht mehr unterscheiden. * * Abschnitt 2 (GeneratePress-Primitive) wird NICHT hier definiert: * GeneratePress gibt --contrast, --contrast-2/3, --base, --base-2/3, * --accent-pink, --accent-blue/green/orange, --text-light/dark und --glass-bg * selbst aus (Customizer → Farben → Globale Farben, Ausgabe via * inc/css-output.php in :root, im Editor via inc/block-editor.php). * Ihre Werte sind mit dieser Palette abgestimmt – siehe config/generate_settings.after.json. * * Kontrastangaben beziehen sich auf den Seitenhintergrund --bg (#181321). * ========================================================================== */ :root { /* ===== 1. ROHPALETTE (Primitive – nicht direkt in Komponenten nutzen) === */ /* Stand: LaL-Export mit den Stufen 10 / 25 / 40 / 55 / 65 / 75 / 85 / 95. Die Stufen 100 und 105 des Exports halten je Buntton die Markenfarbe; sie stehen weiter unten als --brand-* und gehören nicht in die Rampe. */ /* pink */ --pink-10: #fee3ea; --pink-25: #fdbfd0; --pink-40: #fd97b1; --pink-55: #fd5e87; --pink-65: #ed3670; --pink-75: #cf0559; --pink-85: #a20845; --pink-95: #74052f; /* blue */ --blue-10: #daecfd; --blue-25: #a8d5ff; --blue-40: #7fbaf1; --blue-55: #599edc; --blue-65: #3e88c9; --blue-75: #2a72ac; --blue-85: #0a5a93; --blue-95: #043d66; /* orange */ --orange-10: #fde7cf; --orange-25: #fec583; --orange-40: #f4a25c; --orange-55: #f66f1d; --orange-65: #d95d02; --orange-75: #b34d08; --orange-85: #8e3c08; --orange-95: #662801; /* green */ --green-10: #daf3b1; --green-25: #afe12c; --green-40: #96c404; --green-55: #7ea50d; --green-65: #6c8f03; --green-75: #5b7809; --green-85: #465e03; --green-95: #314203; /* * gray und black: die 75er-Stufe fehlt hier bewusst. * * Der LaL-Export liefert für beide Neutralrampen einen 75er-Wert, der * DUNKLER ist als der zugehörige 85er (gray-75 #484847 gegen gray-85 * #575756; black-75 #181321 gegen black-85 #5a5467). Bei den vier * Bunttönen stimmt die 75er-Stufe, bei den beiden Neutralen ist sie * offensichtlich verrutscht – black-75 entspricht sogar exakt black-105, * also unserem Seitenhintergrund. * * Ein falscher Wert wäre schlimmer als ein fehlender: wer --black-75 als * mittleren Ton einsetzt, bekäme unbemerkt die Hintergrundfarbe. Richtig * wären interpolierte Werte um #6d6d6c (gray) bzw. #6e6880 (black). * Beim nächsten Palettenexport bitte prüfen und dann hier ergänzen. */ /* gray – neutral */ --gray-10: #eaeae9; --gray-25: #d1d1d0; --gray-40: #b5b5b4; --gray-55: #989897; --gray-65: #858583; --gray-85: #575756; --gray-95: #3d3d3c; /* black – violettes Grau, Basis des Dark-Designs */ --black-10: #ede8f7; --black-25: #d4cde2; --black-40: #b8b2c7; --black-55: #9c96ab; --black-65: #878194; --black-85: #5a5467; --black-95: #3f3a4b; --black-100: #322d3d; --black-105: #181321; /* brand – nur Logo, Flächen, Illustration. NICHT für Text. Im LaL-Export die Stufen 100/105 des jeweiligen Bunttons. */ --brand-pink: #cf0559; --brand-blue: #4b91ce; --brand-orange: #ec6500; --brand-green: #94c11a; /* ===== 3. ROLLEN (Dark Design – das hier gehört in Komponenten) ======== */ /* -- Flächen -- */ --bg: var(--base-2); /* Seitenhintergrund #181321 */ --bg-alt: var(--base-3); /* abgesetzter Abschnitt #322d3d */ --surface: var(--base-3); /* Karten, Panels #322d3d */ --surface-raised: var(--black-95); /* Ebene darüber #3f3a4b */ /* * Glasflächen: Dropdown-Menü, Formularpanels, Eventplaner, Saalplan- * Tooltip. Deutlich DUNKLER als --surface, nicht heller – die Optik lebt * davon, dass sich das Panel vom Seitengrund nach unten absetzt und die * Unschärfe dahinter durchscheint. * * Wird fast überall mit color-mix(... 60-95%, transparent) kombiniert; * der Token liefert den Grundton, die Deckkraft bleibt an der Komponente. */ --surface-glass: var(--glass-bg); /* Glaspanel #120e19 */ /* * -- Helle Fläche im dunklen Design -- * * Statusbadges ("Ausverkauft", "Heute"), der Öffnungszeiten-Alert, das * Kontaktkarten-Porträt: kleine helle Inseln, die bewusst aus dem dunklen * Grund herausstechen. * * Reines Weiß statt black-10: der violette Stich der Rampe passt nicht zu * den vier Markenfarben, neben denen diese Flächen stehen. Dieselbe * Begründung wie bei --chip-neutral-bg, das jetzt hierher zeigt. * * Die Schrift darauf ist --text-on-light: die Seitenfarbe, nicht reines * Schwarz. Die Fläche wird damit zur exakten Umkehrung des Grundes, und * bei dieser Dunkelheit ist der Violettstich nicht wahrnehmbar. */ --surface-light: #ffffff; --text-on-light: var(--black-105); /* #181321 18,20:1 */ /* -- Text -- */ --text: var(--contrast); /* Fließtext #ffffff 18,2:1 AAA */ --text-muted: var(--black-25); /* sekundär #d4cde2 11,8:1 AAA */ --text-faint: var(--black-40); /* tertiär #b8b2c7 8,9:1 AAA */ /* * WELCHE STUFE WOFÜR – das wurde schon einmal verwechselt: * * --text Überschriften-nahe Aussagen, Formularwerte, alles, was * den Blick zuerst bekommt. * --text-muted ALLES, WAS GELESEN WERDEN SOLL: Einleitungen, Erklär- * texte, Kartenbeschreibungen, Aufzählungen, Feld- * beschriftungen, Strukturlabels ("EMPFOHLENE RÄUME"), * Fehlermeldungen. Im Zweifel diese Stufe. * --text-faint NUR Beiwerk: Kleingedrucktes unter einem Preis, Debug- * Ausgaben, dekorative Icons, Chevrons, Editor-Platzhalter. * * "faint" ist die SCHWÄCHSTE Stufe (schwach, kaum wahrnehmbar), "muted" * die mittlere (gedämpft) – wie in Bootstrap und GitHub Primer. Wer einen * abgeschalteten Zustand braucht, nimmt nicht --text-muted, sondern legt * eine eigene Rolle an. * * Bis 2026-09-11 war es genau andersherum verteilt: der Erklärtext des * Eventplaners stand auf --text-faint, die Feldbeschriftungen auf * --text-muted. 25 Stellen umgehängt. * * Zur Farbwahl: die gedämpften Stufen kommen aus der VIOLETTEN black-Rampe, * nicht aus der neutralen gray-Rampe. Der Unterschied sieht in RGB harmlos * aus (18 Stufen im Blaukanal), ist es aber nicht: * * gray-25 #d1d1d0 L 83,8 Buntheit 0,52 * black-25 #d4cde2 L 83,5 Buntheit 11,41 * --bg #181321 L 7,0 Buntheit 10,78 * ΔE2000 zwischen beiden: 11,0 (ab ~2 auf einen Blick erkennbar) * * black-25 trägt fast genau die Buntheit des Seitengrunds – es ist "der * Hintergrund in hell" und sitzt entsprechend ruhig darauf. gray-25 ist * praktisch unbunt und wird davor durch Simultankontrast leicht ins * Gelbgrüne gezogen. * * Das Argument "--contrast ist doch auch neutral" trägt NICHT: Weiß ist ein * Sonderfall, weil wir das Hellste im Bild unabhängig vom Umfeld als Weiß * lesen (siehe die Begründung zu 'contrast' in scripts/apply-palette.php). * Bei L 84 greift diese Anpassung nicht mehr, der Ton wird als Grau gesehen * – und Grau nimmt den Stich an. * * Die Abstufung ist wieder dreistufig: 100 / 83,5 / 73,5 an Helligkeit. * --text-faint stand zwischenzeitlich auf --contrast-3 (#878194, 4,9:1) und * war auf den Glasflächen des Eventplaners sichtbar zu blass – dort trägt * es die halben Erklärtexte. black-40 hält 8,9:1 und bleibt trotzdem als * dritte Stufe erkennbar. * * --contrast-2 wird von nichts mehr referenziert. Der Wert bleibt in den * Theme-Einstellungen stehen (keine Einstellung hängt daran), ist aber * toter Ballast beim nächsten Palettenlauf. */ /* * WICHTIG – Pink hat zwei gegenläufige Rollen: * * TEXT auf dunklem Grund -> braucht HELLES Pink (--pink-40 #fd97b1) * FLÄCHE hinter hellem Text -> braucht DUNKLES Pink (--brand-pink #cf0559) * * Deshalb kommen die Textrollen unten direkt aus der Rohpalette und NICHT * aus dem GeneratePress-Primitiv --accent-pink. Jenes bleibt das Marken-Pink * #cf0559 und wird an ~14 Stellen als Fläche hinter weißer Schrift genutzt * (5,50:1 AA). Würde man es aufhellen, kippten alle diese Flächen auf 2,1:1. */ /* -- Überschriften -- */ /* 4,65:1 liegt über dem Fliesstext-Soll von 4,5 und gilt damit für jede H-Ebene, unabhängig von der Schriftgrösse. Eine Stufe dunkler (pink-75) würde unter AA fallen. */ --heading: var(--pink-65); /* H1–H4 #ed3670 4,65:1 AA */ /* Gegenstück für Überschriften und Icons auf HELLEN Flächen, etwa im Öffnungszeiten-Alert (--contrast #ffffff): dort braucht es umgekehrt ein dunkles Pink. 4,58:1 – knapp über AA, nicht weiter aufhellen. */ --heading-on-light: var(--pink-75); /* #cf0559 4,58:1 AA */ --heading-neutral: var( --contrast ); /* Alternative, falls Rosa zu viel wird */ /* -- Links -- */ --link: var(--pink-40); /* #fd97b1 8,9:1 AAA */ --link-hover: var(--pink-25); /* #fdbfd0 11,7:1 AAA */ --link-on-light: var(--pink-85); /* Link auf HELLER Fläche #a20845 */ /* * -- Akzentschrift auf dunklem Grund -- * * Kicker, Labels, Pflichtfeld-Sternchen, Aufzählungspunkte, Icons: alles, * was in Pink GESCHRIEBEN wird, ohne Überschrift oder Link zu sein. * * Diese Rolle fehlte, und deshalb stand an 14 Stellen --accent-pink als * Schriftfarbe. Das Primitiv ist aber das Marken-Pink #cf0559 und damit * eine FLÄCHE: als Schrift auf dem Seitengrund nur 3,31:1, auf einer * Glasfläche 3,44:1, auf einer Karte 3,16:1 – durchweg unter den 4,5:1, * die Kleinschrift braucht. * * Wert wie --link, aber bewusst eigene Rolle: ein Kicker ist kein Link, * und wer die Linkfarbe ändert, will die Kicker nicht mitverschieben. * * Nicht zu verwechseln mit --on-accent: das ist die Schrift AUF einer * Akzentfläche, dies hier die Schrift IN Akzentfarbe. * * Für Großtext (>=24px, oder >=18,66px fett) ist --heading die richtige * Wahl – kräftiger, und bei 3:1 Soll unproblematisch. */ --text-accent: var(--pink-40); /* #fd97b1 8,9:1 AAA */ /* * Dieselbe Rolle in den anderen drei Buntönen: Icons, Hinweise, * Rabattzeilen, Fehlermeldungen. * * Grün und Blau liegen HELLER als die zugehörige Flächenrolle. Die * -65-Stufe reicht auf dem Seitengrund nur 4,83:1 und fällt auf getönten * Flächen darunter: das Rabatt-Badge (.ep-badge--discount) tönt seinen * Grund mit 12 % Grün und drückte die Schrift damit auf 4,44:1 – unter AA. * Grün steht deshalb auf -40 (8,1:1 auf der Tönung), Blau auf -55 (5,9:1). * * Orange bleibt auf -65: es trägt keine getönte Fläche, sondern steht auf * Panel und Karte (5,0:1 bzw. 4,6:1). * * --text-danger trägt bewusst dasselbe Orange wie --text-warning-Flächen: * Fluent Forms färbt Validierungsfehler seit jeher orange, Eventplaner und * Vermietungsformular hatten daneben ein eigenes Rot (#ff8080). Eine * Fehlerfarbe im ganzen Projekt statt zwei. */ --text-info: var(--blue-55); /* #599edc 6,4:1 AA */ --text-success: var(--green-40); /* #96c404 8,8:1 AAA */ --text-danger: var(--orange-65); /* #d95d02 4,8:1 AA */ /* * -- Platzhalter in Eingabefeldern -- * * Muss auf dem Feldgrund lesbar bleiben, der selbst schon aufgehellt ist * (weiß bei 4-6 % über der Glasfläche, effektiv #1c1823 bis #211d28). * --text-faint fällt dort auf 4,40:1 und damit unter AA, black-55 hält * 5,79:1. * * Vorher stand an zwei Stellen --base (#3f3a4b) – eine Flächenfarbe als * Schrift, 1,51:1, praktisch unsichtbar. */ --text-placeholder: var(--black-55); /* #9c96ab 5,8:1 AA */ /* * -- Hauptnavigation -- * * Hover- und Aktiv-Zustand: Schrift und der animierte Strich darunter * müssen dieselbe Farbe tragen, sonst wirkt der Strich wie ein zweiter, * danebenliegender Akzent. Vorher stand die Schrift auf --link (pink-40 * #fd97b1) und der Strich auf dem Marken-Pink (#cf0559). * * pink-65 statt --link, weil der Strich als 2px-Linie kräftiger sein darf * als ein Fliesstext-Link. Die Kopfzeile ist transparent, der Grund also * die Seitenfarbe #181321 – dort ergibt pink-65 4,65:1 und trägt damit * auch für die 15px-Menüschrift, die als Fliesstext zählt (Soll 4,5). */ --nav-accent: var(--pink-65); /* #ed3670 4,65:1 AA */ /* -- Linien & Fokus -- */ --border: var(--contrast-3); /* Standardrahmen #878194 4,9:1 */ --border-strong: var(--black-55); /* betont #9c96ab */ --border-subtle: var(--black-95); /* kaum sichtbar #3f3a4b */ --focus-ring: var(--pink-40); /* Tastaturfokus #fd97b1 8,9:1 */ /* * -- Akzent als Fläche, Linie oder Tönung – OHNE Text darauf -- * * Zierlinien, Rahmen der aktiven Auswahl, Fortschrittsbalken, gefüllte * Punkte, Neon-Glow und die sehr transparenten Tönungsflächen * (color-mix ... 6-20%, transparent). * * Abgrenzung – hier wird oft das Falsche gegriffen: * Text IN Akzentfarbe -> --text-accent / -info / -success * Fläche MIT Kleinschrift -> --label-*-bg * Fläche MIT Großtext -> --tile-*-bg * Tastaturfokus -> --focus-ring * Fläche OHNE Text -> hier * * Weil nie Text darauf steht, gilt kein Textkontrast. Für bedeutungs- * tragende Linien greift WCAG 1.4.11 mit 3:1 – das Marken-Pink liegt * auf dem Seitengrund bei 3,31:1 und hält das. Rein dekorative Glows * und Tönungen sind davon ohnehin ausgenommen. */ --accent: var(--brand-pink); /* #cf0559 3,31:1 */ --accent-info: var(--blue-65); /* #3e88c9 4,83:1 */ --accent-success: var(--green-65); /* #6c8f03 4,83:1 */ --accent-warning: var(--orange-65); /* #d95d02 4,78:1 */ /* -- Buttons -- */ --btn-primary-bg: var(--blue-75); /* #2a72ac, weiße Schrift 5,1:1 AA */ --btn-primary-text: #ffffff; /* Genau eine Stufe dunkler als --btn-primary-bg. blue-95 wäre zwei Stufen und liesse den Hover als Sprung wirken statt als Vertiefung. */ --btn-primary-bg-hover: var(--blue-85); /* #0a5a93, weiße Schrift 7,3:1 */ --btn-secondary-bg: var( --brand-pink ); /* #cf0559, weiße Schrift 5,50:1 AA */ --btn-secondary-text: #ffffff; --btn-secondary-bg-hover: var( --pink-95 ); /* #74052f, weiße Schrift 11,4:1 */ /* * -- Buntflächen, die KLEINSCHRIFT tragen (Labels, Chips, Icon-Kacheln) -- * * Die -65-Stufe der Akzentfarben erreicht mit weisser Schrift nur ~3,8:1. * Für Grosstext (>=24px, oder >=18,66px fett) genügt das, für Kleinschrift * verlangt AA aber 4,5:1. Die -75-Stufe liefert 5,1-5,3:1 und bleibt dabei * deutlich lebendiger als -85 (7,3-7,5:1). * * Genau dieselbe Stufe trägt --btn-primary-bg. Merksatz: -75 ist die * Buntfläche für Kleinschrift, -65 die für Grosstext. * * Pink braucht keine eigene Stufe: das Marken-Pink liegt schon bei 5,50:1. * * Zugeordnet wird zur Renderzeit über forumlev_accent_to_label_fill(), * damit gespeicherte Block-Attribute unverändert bleiben. */ --label-pink-bg: var(--pink-75); /* #cf0559 5,50:1 */ --label-blue-bg: var(--blue-75); /* #2a72ac 5,12:1 */ --label-green-bg: var(--green-75); /* #5b7809 5,08:1 */ --label-orange-bg: var(--orange-75); /* #b34d08 5,27:1 */ --label-text: #ffffff; /* * -- Buntflächen, die GROSSTEXT tragen (Icon-Kacheln) -- * * Grosstext (>=24px, oder >=18,66px fett) braucht nur 3:1, deshalb reicht * hier die hellere -65-Stufe mit 3,8-3,9:1. Sie ist dieselbe, die auch die * Info-Button-Kacheln der Startseite tragen – die Kachelreihen sehen damit * über beide Bausteine hinweg gleich aus. * * Voraussetzung: JEDE Schrift auf diesen Flächen muss über der * Grosstext-Schwelle liegen, auch die Unterzeile. Wer sie verkleinert, * muss auf --label-*-bg wechseln. */ /* * Pink liegt hier bewusst eine Stufe tiefer als die anderen drei. * * Die Palette gleicht je Stufe die HELLIGKEIT an, nicht die Buntheit – und * bei diesem Farbwinkel lässt sRGB deutlich mehr Buntheit zu: pink-65 hat * C 0,219 gegenüber blue-65 mit 0,123, also fast das Doppelte bei gleicher * Helligkeit. In einer Kachelreihe drängt sich Pink dadurch sichtbar vor. * * pink-75 behält die Buntheit (0,218) und nimmt nur Helligkeit heraus * (54,9 % statt 63,0 %). Es tritt zurück, ohne blass zu wirken – und bringt * mit 5,50:1 nebenbei mehr Kontrast mit als die anderen drei. */ --tile-pink-bg: var(--pink-75); /* #cf0559 5,50:1 */ --tile-blue-bg: var(--blue-65); /* #3e88c9 3,77:1 */ --tile-green-bg: var(--green-65); /* #6c8f03 3,77:1 */ --tile-orange-bg: var(--orange-65); /* #d95d02 3,81:1 */ --tile-text: #ffffff; /* * -- Chip, der direkt unter einer Überschrift sitzt -- * * Auf der Veranstaltungs-Einzelseite steht das Kategorie-Chip unmittelbar * über dem Titel, und der trägt --heading (pink-65 #ed3670). Ein Chip in * pink-75 läge dort so nah daran, dass es wie ein misslungener Farbtreffer * wirkt statt wie Absicht. * * Deshalb dort – und nur dort – die abgesetzte Variante: dunklere Fläche, * helle Schrift. Auf Karten und Kacheln bleibt das Chip solide, weil es * dort neben keiner gleichfarbigen Überschrift steht. */ --chip-strong-bg: var(--pink-85); /* #a20845 */ --chip-strong-text: var(--pink-25); /* #fdbfd0 5,10:1 */ /* * -- Neutrales Chip (inaktiver Filter) -- * * Helle Pille auf dunklem Grund, etwa der Kategorienfilter im Kalender. * Der aktive Zustand nutzt --btn-primary-bg. * * Zuvor stand hier --contrast-2 als Fläche und --text-dark als Schrift. * Beides sind TEXT-Token: --contrast-2 ist die gedämpfte Schriftfarbe, * hier als Hintergrund zweckentfremdet. Der Wert stimmte zufällig, die * Bedeutung nicht – eine Änderung an der Textfarbe hätte unbemerkt die * Filterflächen verschoben. * * Fläche bewusst reines Weiss statt black-25 (#d4cde2): der violette Stich * der Rampe passt nicht zu den vier Markenfarben, mit denen die Filter in * einer Reihe stehen. Neutrales Grau wäre schlechter – vor violettem * Umfeld verschiebt es sich wahrnehmbar ins Gelbgrüne. * * Die Schrift bleibt auf --black-105, also der Seitenfarbe: das Chip wird * damit zur exakten Umkehrung des Grundes. Bei dieser Dunkelheit ist der * Stich ohnehin nicht wahrnehmbar. */ --chip-neutral-bg: var(--surface-light); --chip-neutral-text: var(--text-on-light); /* #181321 18,20:1 */ /* -- Karten -- */ --card-bg: var(--base-3); --card-border: var(--black-95); --card-shadow: rgb(0 0 0 / 0.35); /* -- Hinweis-/Alert-Flächen (Fläche + zugehörige Textfarbe) -- */ --surface-info: var(--blue-95); --on-info: var(--blue-10); /* 10,0:1 */ --surface-success: var(--green-95); --on-success: var(--green-10); /* 9,8:1 */ --surface-warning: var(--orange-95); --on-warning: var(--orange-10); /* 9,4:1 */ --surface-accent: var(--pink-95); --on-accent: var(--pink-10); /* 10,3:1 */ /* ===== 4. KOMPATIBILITÄT (Altnamen) =================================== */ /* * Kanaltupel zu --accent-blue, für rgba()-Flächen mit Alpha. * Genutzt von style.css und dem Kalender-Plugin. * * MUSS dem Wert von --accent-blue folgen. Stand jetzt #3e88c9 (blue-65, * siehe config/generate_settings.after.json). Der Tupel stand bis zuletzt * auf dem Vorgängerwert #4d92cf und war damit eine eigene, abweichende * Blaufläche neben --accent-blue. */ --accent-blue-rgb: 62, 136, 201; }