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>

tests/CmsTest.php

@@ -2034,6 +2034,50 @@ final class CmsTest extends TestCase
         $this->pages->saveDraft('page-1', $document, 0);
     }
 
+    public function testTheThemeColoursTheBlocksAndNotOnlyTheText(): void
+    {
+        // Beim Nachbau von kant-it.de blieben Symbole, Knöpfe, Rahmen und der Einwilligungsdialog
+        // im Grün der Vorlage, obwohl die Palette rot und marineblau war: site.css färbte sie aus
+        // festen Token, die das Theme nie gesetzt hat. Die Farben ließen sich einstellen und taten
+        // nichts - dieselbe Familie wie Rahmenstärke und Bildrundung.
+        $theme = $this->themes->load();
+        $this->themes->save(
+            [...$theme['colors'], ['key' => 'firma', 'name' => 'Firmenrot', 'value' => '#c1121f']],
+            $theme['fonts'],
+            [...$theme['base'], 'color' => '#0a192f', 'backgroundColor' => '#ffffff', 'linkColor' => '@firma'],
+        );
+        $css = $this->themes->css($this->themes->load());
+
+        // Die Token, aus denen site.css Knöpfe, Symbole, Linien und ruhigen Text färbt.
+        self::assertStringContainsString('--ink:#0a192f', $css);
+        self::assertStringContainsString('--paper:#ffffff', $css);
+        self::assertStringContainsString('--accent:var(--k-firma)', $css);
+        self::assertStringContainsString('--muted:var(--k-muted,color-mix(in srgb,#0a192f 80%,#ffffff))', $css);
+        self::assertStringContainsString('--line:var(--k-line,color-mix(in srgb,#0a192f 20%,#ffffff))', $css);
+
+        // Und die Gegenprobe in der Datei selbst: keine feste Farbe mehr für Symbol, Knopf und
+        // Einwilligungsdialog - Fehlerrot bleibt fest, denn ein Fehler ist rot, kein Firmenton.
+        $site = (string) file_get_contents(__DIR__.'/../public/assets/site.css');
+        self::assertStringContainsString('.block-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent)', $site);
+        self::assertStringContainsString('background:var(--accent)', $site);
+        self::assertStringNotContainsString('#2c6b4f', $site, 'Der Einwilligungsdialog nimmt die Farbe der Website.');
+        // Und er lässt sich eigens färben: eine Palettenfarbe mit dem Schlüssel „consent“ gewinnt
+        // über die Primärfarbe, ohne dass es dafür eine weitere Einstellung braucht.
+        self::assertStringContainsString('background:var(--k-consent,var(--accent))', $site);
+        self::assertStringNotContainsString('outline:3px solid #b85c12', $site, 'Auch der Fokusring folgt der Palette.');
+    }
+
+    public function testHeadingsAreNotHyphenated(): void
+    {
+        // Beim Nachbau von kant-it.de stand in der Überschrift „di-gitale Exzellenz“: `hyphens:auto`
+        // galt für h1 bis h3. Im Fließtext ist Trennung nützlich, in einer Überschrift sieht sie
+        // nach einem Fehler aus - und genau dort fällt sie auf, weil die Schrift groß ist.
+        $css = (string) file_get_contents(__DIR__.'/../public/assets/site.css');
+        self::assertStringContainsString('h1,h2,h3,h4,h5,h6{hyphens:manual}', $css);
+        self::assertStringContainsString('p{hyphens:auto}', $css);
+        self::assertStringNotContainsString('hyphens:auto}', explode('p{hyphens:auto}', $css)[0], 'Vor der Regel für Absätze trennt nichts.');
+    }
+
     public function testTheGlobalContentWidthCanMakeThePageWiderNotOnlyNarrower(): void
     {
         $this->pages->publish('page-1', $this->pages->saveDraft('page-1', DemoContent::pages()['home'], 0), 1);