noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Key breakpoints, scales, inks and states on M3's tokens

Browse Source 
Tailwind's sm…2xl are cleared for M3's window size classes (medium 600, expanded
840, large 1200, extra-large 1600; resources/js/breakpoints.js for scripts), and
its radius, shadow, text-size, weight, leading, tracking and easing scales are
cleared like its palette, so only M3's utilities compile. The semantic inks are
roles rather than opacities (M3 reserves 38% for disabled). state.css declares
M3's state opacities as tokens, adds the dragged layer and a touch-target utility.
Plan: docs/plans/material-3-alignment.md, steps 1, 2, 3 and 8.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 03:54:21 +02:00
co-authored by Claude Fable 5.1
parent 651a513d1e
commit 25ff5a8d71
5 changed files with 125 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/tokens/state.css
+51 -9
View File
@@ -1,15 +1,34 @@
/*
* 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.
* The opacities are M3's state tokens (md.sys.state.*): the content colour laid over an
* element at 8% on hover, 10% on focus and press, 16% while dragged; disabled content at 38%
* and a disabled container at 12%.
*
* `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.
* `state-layer` puts M3's state layer on an element. Hover only where the pointer can hover,
* because a touch screen keeps the last hover after a tap; `data-dragged` on the element draws
* the dragged layer. The layer is a ::before, so the element becomes `position: relative` and
* `isolation: isolate`; never pass `static` or a z-index to it.
*
* `touch-target` extends an element's pointer target to M3's 48×48px minimum without changing
* what is drawn: a ::after centred on it, at least 48px each way. It is `::after`-based, so a
* component that already draws with ::after wraps its control in an element carrying it.
*
* `focus-ring` is M3's focus indicator — 3px in secondary, 2px out, drawn only for keyboard
* focus. The site gives no thickness or offset; the values are @material/web's focus ring
* tokens (Apache-2.0, © Google LLC). `link` is a link in running text: underlined in the
* colour of the words around it.
*/
:root {
--md-sys-state-hover-state-layer-opacity: 0.08;
--md-sys-state-focus-state-layer-opacity: 0.1;
--md-sys-state-pressed-state-layer-opacity: 0.1;
--md-sys-state-dragged-state-layer-opacity: 0.16;
--md-sys-state-disabled-content-opacity: 0.38;
--md-sys-state-disabled-container-opacity: 0.12;
}
@utility state-layer {
position: relative;
isolation: isolate;
@@ -28,13 +47,20 @@
@media (hover: hover) {
&:hover::before {
opacity: 0.08;
opacity: var(--md-sys-state-hover-state-layer-opacity);
}
}
&:focus-visible::before,
&:focus-visible::before {
opacity: var(--md-sys-state-focus-state-layer-opacity);
}
&:active::before {
opacity: 0.1;
opacity: var(--md-sys-state-pressed-state-layer-opacity);
}
&[data-dragged]::before {
opacity: var(--md-sys-state-dragged-state-layer-opacity);
}
&:disabled::before,
@@ -43,6 +69,22 @@
}
}
@utility touch-target {
position: relative;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
min-width: 3rem;
min-height: 3rem;
transform: translate(-50%, -50%);
}
}
@utility focus-ring {
outline: none;