Andreas Reinhold / reiniandClaude Opus 5
b48e879254
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m0s
tests / feature (8.5) (push) Successful in 1m1s
tests / browser (safari, webkit) (push) Successful in 1m59s
tests / browser (chrome, chromium) (push) Successful in 1m49s
tests / browser (firefox, firefox) (push) Successful in 1m54s
Colour, shape, type, elevation and motion as tokens and Tailwind utilities; `php artisan material:scheme`, which generates an app's colour roles with Google's material-color-utilities (spec 2025); the theme head script with light, dark and system and its Alpine store; Google Sans Flex; every Material Symbol (4,135, outlined and filled) drawn by <x-icon> without blade-icons; all 35 M3 Expressive shapes, ported from androidx, as <x-shape>; the x-figure directive; the Toasts concern; DesignGuard for applications' tests; and a showcase with every token, both themes side by side and an icon search. Colour utilities are `@theme inline`, so a section with its own data-theme repaints; without it they resolve once on :root. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
56 lines
2.0 KiB
PHP
56 lines
2.0 KiB
PHP
<?php
|
|
|
|
/**
|
|
* The theme <html> shows. A bare `html` selector would be read as text to search for.
|
|
*/
|
|
function theme(string $attribute, string $value): string
|
|
{
|
|
return "document.documentElement.getAttribute('{$attribute}') === '{$value}'";
|
|
}
|
|
|
|
it('follows the operating system while the visitor has not chosen', function () {
|
|
visit('/material')->inDarkMode()
|
|
->assertScript(theme('data-theme', 'dark'))
|
|
->assertScript(theme('data-theme-choice', 'system'))
|
|
->assertNoJavaScriptErrors();
|
|
|
|
visit('/material')->inLightMode()
|
|
->assertScript(theme('data-theme', 'light'));
|
|
});
|
|
|
|
it('keeps the visitor\'s choice over the operating system', function () {
|
|
$page = visit('/material')->inDarkMode()
|
|
->assertScript(theme('data-theme', 'dark'));
|
|
|
|
$page->click('@theme-light')
|
|
->assertScript(theme('data-theme', 'light'))
|
|
->assertAttribute('@theme-light', 'aria-pressed', 'true')
|
|
->assertScript("localStorage.getItem('material-theme') === 'light'");
|
|
|
|
$page->refresh()
|
|
->assertScript(theme('data-theme', 'light'))
|
|
->assertScript(theme('data-theme-choice', 'light'));
|
|
});
|
|
|
|
it('adopts an earlier toggle\'s choice once', function () {
|
|
config(['livewire-material.theme.legacy_keys' => ['mary-theme']]);
|
|
|
|
$page = visit('/material')->inLightMode()
|
|
->assertScript(theme('data-theme', 'light'));
|
|
|
|
$page->script("localStorage.setItem('mary-theme', JSON.stringify('dark'))");
|
|
|
|
$page->refresh()
|
|
->assertScript(theme('data-theme', 'dark'))
|
|
->assertScript("localStorage.getItem('mary-theme') === null")
|
|
->assertScript("localStorage.getItem('material-theme') === 'dark'");
|
|
});
|
|
|
|
it('repaints a section that sets its own theme', function () {
|
|
$swatch = fn (int $index): string => "getComputedStyle(document.querySelectorAll('#colour [data-theme] .bg-primary')[{$index}]).backgroundColor";
|
|
|
|
visit('/material')->inLightMode()
|
|
->assertScript(theme('data-theme', 'light'))
|
|
->assertScript("{$swatch(0)} !== {$swatch(1)}");
|
|
});
|