Draw the scheme picker without Tailwind

Plan step 36 (navigation group, third batch, last component): <x-scheme-picker>'s class lists move into resources/css/components/ scheme-picker.css, keyed on data-md-scheme-picker (its legend and options grid, 2 columns below medium and 4 from it) and data-md-scheme-picker-option, whose radio inside is read with :has() for the chosen and the focus states — the input, not the label, is the real control and carries the ring group.css's own segments keep the same refinement for. `dark:bg-(--swatch-dark)` becomes [data-theme='dark'] on the swatch (theme.css's own dark custom variant reduces to a plain descendant selector here, since the swatch never carries data-theme itself); the profile's name keeps its label-large type as a text class on the view, since it is the caller's own prose. Hooks renamed: data-scheme-picker to data-md-scheme-picker, data-scheme-option to data-md-scheme-picker-option, updated in SchemePickerTest.php and tests/Browser/{ThemeTest,ColourProfilesTest}.php. Browser tests added (docs/plans/material-3-browser-tests.md): the contrast switch repaints at once and survives a wire:navigate, and prefers-contrast: more picks high (Playwright's contrast context option, the same shape as the existing reducedMotion tests). This is the last navigation-group component off Tailwind. Every package component is now drawn without Tailwind; tailwind.css keeps only tokens/theme.css and tokens/utilities.css, which the showcase still needs until step 38. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-15 00:52:12 +02:00
parent 74cbcd2f44
commit bc284b2b33
7 changed files with 253 additions and 23 deletions
@@ -64,7 +64,7 @@ it('draws each profile in light and dark, and the default without the attribute'
 it('previews a profile from the picker and the showcase menu, and keeps it through wire:navigate', function () {
    $page = profilesReady(visit('/material/colour')->inLightMode());

-    $page->click('#colour [data-scheme-option="rose"]')
+    $page->click('#colour [data-md-scheme-picker-option="rose"]')
        ->assertScript("document.documentElement.getAttribute('data-scheme') === 'rose'")
        ->assertScript(pagePrimary()." === '{$this->profiles['rose']['light']['primary']}'")
        ->assertScript("window.eval(\"Alpine.store('theme').scheme\") === 'rose'");
@@ -103,7 +103,7 @@ it('adds a theme-color meta in the painted surface, and follows the theme and th
        ->assertScript(themeColorIs($profiles['baseline']['dark']['surface']))
        ->assertScript(pageSurfaceIs($profiles['baseline']['dark']['surface']));

-    $page->click('#colour [data-scheme-option="rose"]')
+    $page->click('#colour [data-md-scheme-picker-option="rose"]')
        ->assertScript(theme('data-scheme', 'rose'))
        ->assertScript(themeColorIs($profiles['rose']['dark']['surface']))
        ->assertScript(pageSurfaceIs($profiles['rose']['dark']['surface']));
@@ -114,6 +114,53 @@ it('adds a theme-color meta in the painted surface, and follows the theme and th
        ->assertNoJavaScriptErrors();
 });

+it('picks the high contrast level when the operating system prefers it, until the visitor chooses', function () {
+    visit('/material', ['contrast' => 'more'])
+        ->assertScript(theme('data-contrast', 'high'))
+        ->assertNoJavaScriptErrors();
+
+    // Standard is the absence of the attribute (theme-script.blade.php): the stylesheet's plain
+    // blocks already are that level.
+    visit('/material', ['contrast' => 'no-preference'])
+        ->assertScript("document.documentElement.hasAttribute('data-contrast') === false");
+});
+
+it('repaints the contrast level at once, and it survives a wire:navigate', function () {
+    Route::middleware('web')->get('/contrast-probe/{page}', fn (string $page) => Blade::render(<<<'BLADE'
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <x-theme-script />
+                @vite(config('livewire-material.showcase.vite'))
+                @livewireStyles
+            </head>
+            <body>
+                <x-theme-toggle mode="contrast" />
+                <p id="page">This is page {{ $page }}.</p>
+                <a id="next" href="/contrast-probe/two" wire:navigate>Next</a>
+                @livewireScripts
+            </body>
+        </html>
+        BLADE, ['page' => $page]));
+
+    // on-surface-variant is one of the roles a contrast level moves most (showcase/sections/colour.blade.php).
+    $ink = "getComputedStyle(document.documentElement).getPropertyValue('--md-sys-color-on-surface-variant').trim()";
+
+    $page = themeReady(visit('/contrast-probe/one'));
+    $standard = $page->script($ink);
+
+    $page->click('label:has(input[name="material-contrast"][value="high"])')
+        ->assertScript(theme('data-contrast', 'high'))
+        ->assertScript("{$ink} !== '{$standard}'")
+        ->assertScript("localStorage.getItem('material-contrast') === 'high'");
+
+    $page->click('#next')
+        ->assertSeeIn('#page', 'This is page two.')
+        ->assertScript(theme('data-contrast', 'high'))
+        ->assertScript("{$ink} !== '{$standard}'")
+        ->assertNoJavaScriptErrors();
+});
+
 it('repaints the page\'s own theme-color meta, and the next page\'s after wire:navigate', function () {
    config(['livewire-material.theme.meta' => true]);

@@ -35,6 +35,7 @@ dataset('navigation components', [
    'section-nav',
    'account-menu',
    'theme-toggle',
+    'scheme-picker',
 ]);

 /**
@@ -1,6 +1,7 @@
 <?php

 use Illuminate\Support\Facades\File;
+use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;

 beforeEach(function () {
    $this->path = sys_get_temp_dir().'/scheme-picker-'.uniqid().'.json';
@@ -22,10 +23,10 @@ it('draws a radio per generated profile, bound, named and previewing on change',
    $html = (string) $this->blade('<x-scheme-picker label="Colour profile" hint="Applies after saving" wire:model="colorProfile" />');

    expect($html)
-        ->toContain('<legend class="mb-2 type-label-lg text-on-surface-variant">Colour profile</legend>')
+        ->toContain('<legend data-md-scheme-picker-legend class="md-type-label-lg md-ink-variant">Colour profile</legend>')
        ->toContain('Applies after saving')
-        ->toContain('data-scheme-option="indigo"')
-        ->toContain('data-scheme-option="teal"')
+        ->toContain('data-md-scheme-picker-option="indigo"')
+        ->toContain('data-md-scheme-picker-option="teal"')
        ->toMatch('/<input\s+wire:model="colorProfile"\s+type="radio"\s+name="colorProfile"\s+value="teal"/')
        ->toContain('x-on:change="$store.theme.previewScheme($event.target.value)"')
        ->toContain('>Teal</span>')
@@ -35,11 +36,48 @@ it('draws a radio per generated profile, bound, named and previewing on change',
 it('puts its other attributes on the group and the binding on the radios', function () {
    $html = (string) $this->blade('<x-scheme-picker wire:model="colorProfile" data-test="color-profile" class="mt-4" />');

-    expect($html)->toMatch('/<fieldset\s+x-data="\{ swatches: [^"]+\}"\s+data-scheme-picker\s+class="min-w-0 mt-4" data-test="color-profile"\s*>/')
+    expect($html)->toMatch('/<fieldset\s+x-data="\{ swatches: [^"]+\}"\s+data-md-scheme-picker\s+data-test="color-profile" class="mt-4"\s*>/')
        ->and(substr_count($html, 'wire:model="colorProfile"'))->toBe(2)
        ->and(substr_count($html, 'data-test="color-profile"'))->toBe(1);
 });

+it('lays the swatch cards out 2 up below medium and 4 up from it', function () {
+    $css = ComponentStylesheet::read('scheme-picker');
+
+    expect($css->declarations('[data-md-scheme-picker-options]'))
+        ->toBe([
+            'display' => 'grid',
+            'grid-template-columns' => 'repeat(2, 1fr)',
+            'gap' => 'var(--md-sys-measurement-space100)',
+        ])
+        ->and($css->declarations('[data-md-scheme-picker-options]', ['@media (width >= 600px)']))
+        ->toBe(['grid-template-columns' => 'repeat(4, 1fr)']);
+});
+
+it('marks the chosen card through the radio inside, read with :has()', function () {
+    $css = ComponentStylesheet::read('scheme-picker');
+
+    expect($css->declarations('[data-md-scheme-picker-option]:has(:checked)'))
+        ->toBe([
+            'border-color' => 'transparent',
+            'background-color' => 'var(--md-sys-color-secondary-container)',
+            'color' => 'var(--md-sys-color-on-secondary-container)',
+        ])
+        ->and($css->declarations('[data-md-scheme-picker-option]:has(:checked) [data-md-scheme-picker-swatch]'))
+        ->toBe(['box-shadow' => '0 0 0 2px var(--md-sys-color-secondary-container)'])
+        ->and($css->declarations('[data-md-scheme-picker-option]:has(:checked) [data-md-scheme-picker-check]'))
+        ->toBe(['display' => 'block']);
+});
+
+it('swaps a swatch to its dark colour under [data-theme=dark], never by class', function () {
+    $css = ComponentStylesheet::read('scheme-picker');
+
+    expect($css->declarations('[data-md-scheme-picker-swatch]'))
+        ->toHaveKey('background-color', 'var(--swatch-light)')
+        ->and($css->declarations("[data-theme='dark'] [data-md-scheme-picker-swatch]"))
+        ->toBe(['background-color' => 'var(--swatch-dark)']);
+});
+
 it('swaps the dots to the contrast level on screen', function () {
    File::put($this->path, json_encode([
        'default' => 'indigo',
@@ -74,7 +112,9 @@ it('keeps its inline styles to the scheme file\'s checked colours', function ()

    $html = (string) $this->blade('<x-scheme-picker wire:model="colorProfile" />');

-    preg_match_all('/\sstyle="([^"]*)"/', $html, $styles);
+    // Only the swatches' own style: the check icon's --md-icon-size is a size prop, not a colour
+    // the scheme file supplied.
+    preg_match_all('/data-md-scheme-picker-swatch\s+style="([^"]*)"/', $html, $styles);

    expect($styles[1])->not->toBeEmpty()
        ->each->toMatch('/^--swatch-light: #[0-9a-fA-F]{6}; --swatch-dark: #[0-9a-fA-F]{6}$/')