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
71 lines
1.8 KiB
CSS
71 lines
1.8 KiB
CSS
/*
|
|
* Interaction states, as M3 draws them.
|
|
*
|
|
* `state-layer` puts M3's state layer on an element: its content colour laid over it at 8%
|
|
* on hover, 10% on focus and press. Hover only where the pointer can hover, because a touch
|
|
* screen keeps the last hover after a tap. The layer is a ::before, so the element becomes
|
|
* `position: relative` and `isolation: isolate`; never pass `static` or a z-index to it.
|
|
*
|
|
* `focus-ring` is M3's focus indicator — 3px in secondary, 2px out — drawn only for keyboard
|
|
* focus. `link` is a link in running text: underlined in the colour of the words around it.
|
|
*/
|
|
|
|
@utility state-layer {
|
|
position: relative;
|
|
isolation: isolate;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
border-radius: inherit;
|
|
background-color: currentColor;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:hover::before {
|
|
opacity: 0.08;
|
|
}
|
|
}
|
|
|
|
&:focus-visible::before,
|
|
&:active::before {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
&:disabled::before,
|
|
&[aria-disabled='true']::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@utility focus-ring {
|
|
outline: none;
|
|
|
|
&:focus-visible {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
@utility link {
|
|
cursor: pointer;
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: from-font;
|
|
text-underline-offset: 0.15em;
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
|
|
&:focus-visible {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|