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
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
74cbcd2f44
commit
bc284b2b33
@@ -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'");
|
||||
|
||||
Reference in New Issue
Block a user