Andreas Reinhold / reiniandClaude Sonnet 5
74cbcd2f44
Plan step 36 (navigation group, third batch): <x-theme-toggle>'s icon button (mode="toggle"|"cycle") moves into resources/css/components/ theme-toggle.css, keyed on data-md-theme-toggle="toggle"|"cycle" and still carrying data-md-icon-button, the hook toolbar.css matches generically so the toggle takes a toolbar's own icon colour when placed in one (N-13). The button renders the shared md-state-layer/ md-touch-target/md-focus-ring classes (N-01's 48px target); its corner morphs from full to sm while pressed on the fast spatial spring, the same motion <x-button>'s own icon buttons take. mode="picker"|"contrast" already drew a connected group over native radios (N-04, N-17's fix), so only its wrapper's hook needed renaming. Hook renamed: data-theme-toggle to data-md-theme-toggle, updated in AppBarTest.php, which carries theme-toggle's render tests. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
46 lines
2.1 KiB
CSS
46 lines
2.1 KiB
CSS
/*
|
|
* <x-theme-toggle>: `mode="toggle"|"cycle"` an icon button between light, dark (and system for
|
|
* cycle); `mode="picker"|"contrast"` a connected group over native radios (docs/audits/m3-alignment/
|
|
* navigation.md N-04, N-17 — the Expressive-deprecated segmented button's successor,
|
|
* `<x-group>`, already fixes both there). This file only draws the icon button; the group's own
|
|
* shape, colour and 48px minimum below `medium` are group.css's.
|
|
*
|
|
* [data-md-theme-toggle="toggle"|"cycle"] the icon button: 40px reaching 48px through
|
|
* md-touch-target (N-01), morphing corner
|
|
* [data-md-theme-toggle="picker"|"contrast"] the group's own wrapper (`role="group"`)
|
|
*
|
|
* The icon button also carries `data-md-icon-button`, the hook `resources/css/components/
|
|
* toolbar.css` matches generically (not `[data-md-button][data-md-icon-button]`, as button.css
|
|
* requires): a theme toggle placed in a toolbar's `actions` takes the toolbar's own icon colour
|
|
* (N-13) the same way one of its `<x-button icon>` children would.
|
|
*
|
|
* The corner morphs from full to `sm` while pressed on the fast spatial spring — M3 Expressive's
|
|
* pressed-state shape change, the same motion `<x-button>`'s own icon buttons use
|
|
* (button.css, `:active`).
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './group.css';
|
|
@import './icon.css';
|
|
|
|
@layer material.components {
|
|
[data-md-theme-toggle='toggle'],
|
|
[data-md-theme-toggle='cycle'] {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--md-sys-measurement-space500);
|
|
block-size: var(--md-sys-measurement-space500);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
cursor: pointer;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
transition: border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
|
|
|
|
&:active {
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
}
|
|
}
|
|
}
|