/* * StripeJack Cloud — Markenschicht über GlassKit. * * Regel aus dem GlassKit-Web-SKILL: hier werden AUSSCHLIESSLICH --gl-*-Tokens * überschrieben. Keine Komponentenselektoren, kein Umfärben von glass-*- oder * glw-*-Regeln, kein Eingriff in glasskit.css. Wer diese Datei entfernt, bekommt * ein funktionierendes GlassKit in Standardfarben — nichts bricht. * * Diese Datei bedient Website und Dashboard gemeinsam. Sie wird unter /shared/brand.css * ausgeliefert und ist in beiden Einstiegspunkten die zuletzt geladene Stilquelle. * * Setzt GlassKit >= 1.11 und GlassKit-Elements >= 1.11 voraus. Erst seit 1.9 * erreicht die Markenschicht überhaupt die -Elemente: Elements adoptiert nur noch * das Komponenten-Stylesheet und legt die Token-Vorgaben in @layer glasskit-defaults aufs * Dokument, wodurch diese ungeschichtete Datei gewinnt. Vorher standen die Tokens in jedem * Shadow Root neu deklariert, und alles hier war innerhalb der Views wirkungslos — unbemerkt, * weil GlassKits Orange praktisch auf StripeJacks Orange lag. Siehe Befund 10 in * docs/glasskit-befunde.md. * * ── Die Palette, und warum sie so aussieht ───────────────────────────────────────────── * Entschieden in M8 an Website und Dashboard nebeneinander, in beiden Farbschemata: * * Teal Primärfarbe — Handlung. Ruhiger als Orange, und das passt zu einem Werkzeug, * das monatlich unbeobachtet läuft und dessen Ergebnis in eine Kanzlei geht. * Orange Akzent — die warme Note der Marke, im Aurora und in Hervorhebungen. * Grün Zustand. Gehört GlassKit, wird hier nicht angefasst. * * Der dunkle Grund ist NICHT mehr StripeJacks Navy, und das ist der Kern der Entscheidung: * Navy #0c1a24 und Teal #3fb8a6 liegen nur 34° auseinander, der Knopf wurde damit zur * helleren Stelle des Hintergrunds statt zur Aufforderung. Auf neutralem Schiefer sind es * 8,88:1 Kontrast und kein konkurrierender Farbwinkel. Der Navy lebt als --sj-navy weiter, * für Verläufe und Markenflächen. * * Der eine offen genannte Preis: Teal steht 37° vom Erfolgsgrün entfernt, Orange stand 104°. * In den Exportlisten stehen grüne Zustandsabzeichen künftig neben tealfarbenen * Bedienelementen. Verkraftbar, weil die Abzeichen Text tragen und nicht allein über Farbe * sprechen — aber es ist der Preis dieser Wahl. * * ── Alles nachgerechnet, nichts geschätzt (WCAG 2.1, Relativluminanz) ────────────────── * Hell, Teal #1d756a: als Schrift auf #eceff1 4,78:1 · weisse Schrift darauf 5,52:1 * Der Ton musste beides können, weil --gl-color-primary in GlassKit und im * Website-Template sowohl Flächen füllt als auch Text färbt (.glw-eyebrow etwa). * Hellere Teals sehen lebendiger aus und verfehlen als Schrift die 4,5:1: das * ursprüngliche #2e9e8f erreichte nur 2,84:1. * Dunkel, Teal #45c7b4: auf Schiefer 8,88:1 · dunkle Tinte darauf mindestens 5,69:1 * * Die Knopfschrift ist deshalb je Modus eine ANDERE: hell weiss, dunkel dunkle Tinte. * Ein einziger Wert kann es nicht sein, weil der helle Verlauf tief endet (#14544a, weiss * 8,76:1) und der dunkle hoch (#2e9e8f, weiss nur 3,28:1). Das ist der erste Stand dieses * Produkts, in dem die Knopfschrift in beiden Modi über 4,5:1 liegt — mit Orange war sie * nie besser als 2,71:1. */ /* ---- Dunkel ----------------------------------------------------------------------- */ :root, [data-theme='dark'] { --gl-color-primary: #45c7b4; --gl-color-primary-dark: #2e9e8f; /* * Dunkle Tinte auf dem Knopf statt Weiss. Auf der dunkelsten Verlaufsstufe #2e9e8f * erreicht Weiss nur 3,28:1, diese Tinte 5,69:1. */ --gl-color-on-primary: #0b1416; /* * Neutraler Schiefer statt Navy — siehe Kopf. Kühl und dunkel bleibt es, nur nicht * mehr blaugrün, damit Teal eine eigene Farbfamilie hat. */ --gl-color-bg-dark: #101418; --gl-color-bg-mid: #1b2228; --gl-color-bg-light: #222a31; /* * Zustandsfarben werden NICHT angefasst. * * Bis GlassKit 1.6.x mussten success und error von Hand aufgehellt werden, weil die * Chips die 4,5:1 verfehlten. Seit 1.7.0 erledigt GlassKit das selbst: ein Scrim hinter * der getönten Fläche plus eigene Tokens für die Schriftfarbe * (--gl-color-*-on-surface), per color-mix aus der Zustandsfarbe abgeleitet. Eigene * Aufhellungen würden jetzt doppelt rechnen und die Chips auswaschen. */ /* * Aurora: die warme Note der Marke wandert vom Primär auf den Akzent. Orange glimmt im * Hintergrund, Teal handelt im Vordergrund. */ --gl-bg-aurora-1: rgba(255, 160, 64, 0.14); --gl-bg-aurora-2: rgba(27, 34, 40, 0.55); --gl-bg-aurora-3: rgba(69, 199, 180, 0.1); --gl-bg-warm-glow: rgba(255, 160, 64, 0.16); } /* ---- Hell (Primärdarstellung dieses Produkts) ------------------------------------- */ [data-theme='light'] { --gl-color-primary: #1d756a; --gl-color-primary-dark: #14544a; /* Hier ist Weiss richtig: auf der dunkelsten Stufe #14544a sind es 8,76:1. */ --gl-color-on-primary: #ffffff; --gl-color-bg-dark: #eceff1; --gl-color-bg-mid: #f3f5f7; --gl-color-bg-light: #f9fafb; --gl-color-text: #12242f; --gl-color-text-heading: #0c1a24; --gl-bg-aurora-1: rgba(232, 132, 26, 0.12); --gl-bg-aurora-2: rgba(27, 34, 40, 0.08); --gl-bg-aurora-3: rgba(29, 117, 106, 0.1); --gl-bg-warm-glow: rgba(232, 132, 26, 0.12); } /* ---- Der helle Modus OHNE gesetztes Attribut --------------------------------------- * * Beide Einstiegspunkte setzen `data-theme` vor dem ersten Malen — im Dashboard über ein * Inline-Skript, auf der Website über den Bootstrap des Templates. Ohne JavaScript passiert * das nicht, und dann greift `[data-theme='light']` oben nicht. Auf der Website liegt in * diesem Pfad eine Token-Spiegelung von GlassKits hellen Werten (site.css, „Light-Mirror"), * und die ist bernsteinfarben — die Seite käme also ohne JavaScript in GlassKits Farben statt * in unseren. * * Die Werte stehen deshalb ein zweites Mal. Das ist Verdopplung, und sie ist hier das * kleinere Übel: Die Alternative wäre, die Spiegelung in site.css umzufärben, doch die * vergleicht `npm run check:tokens` gegen GlassKit — sie muss GlassKit spiegeln, nicht uns, * sonst verliert die Prüfung ihren Sinn. Wer hier etwas ändert, ändert es an beiden Stellen; * die Werte sind identisch mit dem Block oben. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']):not([data-theme='light']) { --gl-color-primary: #1d756a; --gl-color-primary-dark: #14544a; --gl-color-on-primary: #ffffff; --gl-color-bg-dark: #eceff1; --gl-color-bg-mid: #f3f5f7; --gl-color-bg-light: #f9fafb; --gl-color-text: #12242f; --gl-color-text-heading: #0c1a24; --gl-bg-aurora-1: rgba(232, 132, 26, 0.12); --gl-bg-aurora-2: rgba(27, 34, 40, 0.08); --gl-bg-aurora-3: rgba(29, 117, 106, 0.1); --gl-bg-warm-glow: rgba(232, 132, 26, 0.12); } } /* ---- Was hier NICHT mehr steht, und warum ------------------------------------------ * * Bis GlassKit 1.10 mussten vier Tokens von Hand nachgezogen werden — --gl-border-warm, * --gl-border-focus, --gl-shadow-btn-primary und --gl-shadow-focus. Sie beschreiben Rollen * (das Leuchten des Primärknopfs, den warmen Rand, den Fokusring), waren aber fest * bernsteinfarben hinterlegt: Ein tealfarbener Knopf bekam einen orangen Halo, der * Fokusring blieb bernstein. Aufgefallen ist das beim Vergleich der Farbvarianten in M8. * * Seit 1.11 leitet GlassKit alle vier aus --gl-color-primary ab, so wie es * --gl-color-primary-surface schon vorher tat. Die vier Zeilen sind deshalb entfallen * (Befund 11). * * Ebenfalls entfallen: --gl-color-primary-mid. Es war bis 1.10 fest #e07a24, also mitten im * Orange — ein umgefärbter Primärknopf verlief teal→orange→teal. Seit 1.11 wird es aus * primary und primary-dark gemischt. Umfärben ist damit auf zwei Deklarationen je Modus * zusammengeschrumpft, und die abgeleiteten Werte liegen dicht an den vorher von Hand * gesetzten (dunkel #35ab9b statt #3fb8a6, hell #19655b statt #186054). Der Kontrast der * Knopfschrift hängt ohnehin an der dunkelsten Verlaufsstufe primary-dark, und die steht * unverändert. */ /* ---- Produkteigene Tokens --------------------------------------------------------- * * Eigenes Präfix, damit sie nie mit GlassKit kollidieren und beim Versionswechsel nicht * überschrieben werden. Sie werden geerbt und erreichen die Shadow Roots ohne Weiteres, * weil GlassKit sie nicht selbst deklariert. */ :root { --sj-teal: #1d756a; --sj-teal-bright: #45c7b4; --sj-navy: #0c1a24; --sj-navy-soft: #16334a; --sj-orange: #e8841a; --sj-orange-bright: #ffa040; }