/* Was der Datenbereich (/admin/daten) an Avos eigenen Farben korrigiert. * * Herkunft: `bin/rails generate avo:eject --partial :avo_overrides_css` legt * diese Datei an; im Gem avo 4.1.15 ist sie **leer** und dient genau dazu. * Avos Layout lädt sie nach `avo/application.css` * (`stylesheet_link_tag "avo-overrides"`), und weil sie -- anders als Avos * eigenes CSS -- in keiner `@layer` steht, gewinnt jede Regel hier gegen die * gleichlautende der Engine, ohne Spezifitätsakrobatik. * * Was hier steht, sind **nur** Kontrastkorrekturen an Avos Palette. Keine * eigenen Farben: jeder Wert unten ist eine Variable, die Avo selbst * mitbringt (`--color-red-*`, `--color-blue-*`, `--color-avo-neutral-*`). * Unsere Tokens aus `app/frontend/styles/tokens.css` gehören hier nicht hin -- * der Bereich lebt in Avos Layout, nicht in unserem (dieselbe Abwägung wie in * `app/views/avo/tools/kennzahlen.html.erb`). * * Gemessen mit axe (e2e/a11y.spec.ts, hell und dunkel); die Zahl in Klammern * ist das Verhältnis, das Avo ohne diese Datei liefert. Beim nächsten * Avo-Upgrade: den Scan streng laufen lassen und prüfen, ob eine dieser * Regeln überflüssig geworden ist -- eine Korrektur, die nichts mehr * korrigiert, färbt nur noch. */ /* Die Abzeichen. `--badge-text` ist im Gem die Schriftfarbe auf einer Fläche, * die fast die Hintergrundfarbe ist (`color-mix(…, var(--color-primary) 85%)`), * und steht dort auf der 600er-Stufe -- hell wie dunkel bleibt das unter * 4,5:1. Eine Stufe kräftiger (hell 700) beziehungsweise deutlich heller * (dunkel 300) reicht; die Fläche bleibt, wie sie ist. * * **700 und nicht 800.** Avos Tailwind-Bündel emittiert nur die Stufen, die es * selbst benutzt, und das ist je Farbe eine andere Liste: Rot und Orange haben * 50, 100, 300, 400, 500, 600, 700 und 950, Grün hört schon bei 700 auf, und * Blau und Grau sind vollständig (50 bis 950). Eine 800 gibt es also für Rot, * Orange und Grün **nicht** -- dass sie für Blau existiert, hat die Sache beim * ersten Anlauf nur verschleiert. Ein `var()` auf eine Variable, die nirgends * definiert ist, macht die ganze Deklaration „invalid at computed-value time": * `color` fällt dann auf `inherit` zurück, und das Abzeichen wäre schwarz * statt rot. Vor dem Ändern einer Stufe nachsehen -- je Farbe einzeln: * grep -o -- "--color-red-[0-9]*:" $(bundle show avo)/app/assets/builds/avo/application.css | sort -u * `e2e/a11y.spec.ts` („the data admin colours its badges…") hält denselben * Fehler fest, falls ein Upgrade eine Stufe wegnimmt. * * Im Browser gemessen (Kontrastverhältnis Schrift zu Abzeichenfläche, hell / * dunkel), links das Gem, rechts mit dieser Datei: * * danger 4,11 / 3,10 → 5,53 / 7,70 * info 4,62 / 2,77 → 6,02 / 8,00 * warning 3,17 / 4,02 → 4,62 / 8,44 * success 2,97 / 4,27 → 4,56 / 9,82 * neutral 6,63 / 1,93 → 6,63 / 9,90 (nur das dunkle Schema angefasst) * * Verlangt sind 4,5:1. Vier der fünf Spielarten fielen im Gem in mindestens * einem Schema durch; nur zwei davon (`danger` hell und dunkel, `info` dunkel) * standen je in einem Scan, weil die Kontenliste keine anderen zeigt. * * Alle fünf stehen hier, weil unsere Resources vier davon benutzen * (`success`/`warning`/`danger`/`info` in User, Conversion, PaySubscription, * CutReport, ImageMatch, ModerationEvent) und `neutral` Avos Rückfall für * jeden Wert ist, der in keiner `options`-Liste steht. * * `:not(.badge--solid)`: bei Avos gefüllter Spielart ist `--badge-text` nicht * die Schrift, sondern die Grundlage der **Fläche** (die Schrift ist weiß). * Sie bleibt deshalb unberührt und misst weiter, wie sie im Gem misst * (3,54 / 3,76 / 2,92 / 2,47 -- Avos gefüllte Abzeichen fallen durch, hell * wie dunkel, und zwar ohne unser Zutun; nachgemessen mit und ohne diese * Datei, identisch). Sie kommt in diesem Bereich nicht vor: * `Avo::Fields::BadgeField#style` steht überall auf „subtle". Sollte sie * je benutzt werden, gehört sie neu gerechnet und nicht bloß umgefärbt -- * dort entscheidet die Fläche, nicht die Schrift. */ .badge--danger:not(.badge--solid), .badge--red:not(.badge--solid) { --badge-text: var(--color-red-700); } .badge--info:not(.badge--solid), .badge--blue:not(.badge--solid) { --badge-text: var(--color-blue-700); } .badge--warning:not(.badge--solid), .badge--orange:not(.badge--solid) { --badge-text: var(--color-orange-700); } .badge--success:not(.badge--solid), .badge--green:not(.badge--solid) { --badge-text: var(--color-green-700); } .dark .badge--danger:not(.badge--solid), .dark .badge--red:not(.badge--solid) { --badge-text: var(--color-red-300); } .dark .badge--info:not(.badge--solid), .dark .badge--blue:not(.badge--solid) { --badge-text: var(--color-blue-300); } .dark .badge--warning:not(.badge--solid), .dark .badge--orange:not(.badge--solid) { --badge-text: var(--color-orange-300); } .dark .badge--success:not(.badge--solid), .dark .badge--green:not(.badge--solid) { --badge-text: var(--color-green-300); } /* Avos Grau ist im dunklen Schema `--color-gray-600` auf fast schwarzem * Grund. Es ist die Farbe, die jeder Wert bekommt, den keine `options`-Liste * kennt -- also die, die man erwischt, ohne es zu wollen. */ .dark .badge--neutral:not(.badge--solid), .dark .badge--gray:not(.badge--solid) { --badge-text: var(--color-gray-300); } /* Der Nebentext im dunklen Schema: Spaltenköpfe der Tabelle und die * Panel-Überschrift stehen auf `text-content-secondary`, und das ist im Gem * `--color-avo-neutral-300` -- auf der Fläche des Tabellenkopfs 4,42:1, also * knapp daneben. Eine Stufe heller genügt. Nur im dunklen Schema: hell * (neutral-500 auf Weiß) misst axe sauber. */ .dark { --color-content-secondary: var(--color-avo-neutral-200); } /* Der „Avo"-Link in der Fußzeile. Im Gem hebt er sich **nur** durch seine * Farbe vom Satz ringsum ab (`link-in-text-block`, serious) und ist im * dunklen Schema dabei selbst zu dunkel (3,41:1). Beides mit einer Regel * erledigt: er nimmt die Farbe seiner Umgebung an und wird unterstrichen -- * die Auszeichnung, die die Regel verlangt. * * Der Anker ist die Adresse und keine Klasse, weil die Fußzeile des Gems * keine trägt (`app/views/avo/partials/_footer.html.erb`: drei Zeilen, ein * `
` mit Utility-Klassen). Die Alternative wäre gewesen, die Fußzeile * auszuziehen -- eine gepflegte Datei mehr für ein `text-decoration`. Ändert * Avo die Adresse, fällt das im axe-Scan auf. */ a[href^="https://avohq.io"] { color: inherit; text-decoration: underline; }