Die Gestaltung faerbt jetzt auch die Bausteine

Gefunden beim Nachbau von kant-it.de: eine Website mit eigener Palette
behielt das Gruen der Vorlage. Symbole, Knoepfe, Rahmen, ruhiger Text,
Fokusring und der Einwilligungsdialog kamen aus festen Token in site.css,
die das Theme nie gesetzt hat - die Farben liessen sich einstellen und
taten nichts.

Das Theme setzt --ink, --paper, --accent, --muted, --line und --mint jetzt
selbst. Als Akzent dient die Linkfarbe, nicht ein Palettenname: das Token
faerbt auch kleine Beschriftungen, und eine helle Akzentfarbe waere dort
nicht lesbar. --muted und --line werden aus Textton und Hintergrund
gemischt; eine Palettenfarbe gleichen Namens gewinnt.

Der Einwilligungsdialog nimmt die Primaerfarbe und laesst sich eigens
faerben ueber eine Palettenfarbe mit dem Schluessel "consent".

Ausserdem aus demselben Nachbau: Ueberschriften werden nicht mehr getrennt
("di-gitale Exzellenz"), und Fliesstext auf dunkel gefaerbten Abschnitten
mischt seine Farbe aus der geerbten statt aus einem Token fuer helle
Hintergruende.

Geprueft: 381 Tests unter PHP 8.2 und 8.4, axe ohne Verstoss auf vier
Seiten des Nachbaus in Desktop- und Handybreite.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/Content/Theme.php

@@ -269,6 +269,26 @@ final class Theme
         $variables[] = sprintf('--k-container:%s', $base['containerWidth']);
 
         $colour = static fn (string $v): string => str_starts_with($v, '@') ? sprintf('var(--k-%s)', substr($v, 1)) : $v;
+
+        // Die Bausteine selbst - Knopf, Symbol, Rahmen, ruhiger Text - wurden aus festen Werten in
+        // site.css gefaerbt. Eine Website mit eigener Palette behielt damit das Gruen der Vorlage:
+        // die Farben liessen sich einstellen und taten nichts. Hier bekommen diese Token ihre
+        // Werte aus dem Theme. Als Akzent dient die Linkfarbe und nicht ein Palettenname, weil
+        // dieses Token auch kleine Beschriftungen faerbt - eine helle Akzentfarbe waere dort
+        // nicht mehr lesbar.
+        $ink = $colour($base['color']);
+        $paper = $colour($base['backgroundColor']);
+        $variables[] = sprintf('--ink:%s', $ink);
+        $variables[] = sprintf('--paper:%s', $paper);
+        $variables[] = sprintf('--accent:%s', $colour($base['linkColor']));
+        // Abgeleitet statt erfunden: ruhiger Text und Linien sind der Textton, in den Hintergrund
+        // gemischt. Ein Palettenwert gleichen Namens hat Vorrang, damit sich beides setzen laesst.
+        // 80 Prozent, nicht weniger: bei 72 kam fuer eine Palette mit hellem Textton ein Grau
+        // heraus, das die 4,5:1 knapp verfehlte - gefunden beim Nachbau von kant-it.de.
+        $variables[] = sprintf('--muted:var(--k-muted,color-mix(in srgb,%s 80%%,%s))', $ink, $paper);
+        $variables[] = sprintf('--line:var(--k-line,color-mix(in srgb,%s 20%%,%s))', $ink, $paper);
+        $variables[] = sprintf('--mint:var(--k-mint,color-mix(in srgb,%s 14%%,%s))', $colour($base['linkColor']), $paper);
+
         $scale = (float) $base['headingScale'];
         $headings = '';
         // A modular scale from the base size, so one number changes the whole hierarchy.