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/theme.css
+42 -6
View File
@@ -22,6 +22,40 @@
--font-sans: var(--md-ref-typeface-brand);
}
/*
* Breakpoints are M3's window size classes, and only those: compact is below `medium`, then
* medium 600, expanded 840, large 1200 and extra-large 1600 (`medium:`, `expanded:`, `large:`,
* `extra-large:`, and `max-medium:` … for "below"). Tailwind's sm/md/lg/xl/2xl are cleared —
* a `sm:` compiles to nothing — because a layout decision keyed on 640px means nothing in M3.
* resources/js/breakpoints.js carries the same four numbers for scripts.
*/
@theme {
--breakpoint-*: initial;
--breakpoint-medium: 600px;
--breakpoint-expanded: 840px;
--breakpoint-large: 1200px;
--breakpoint-extra-large: 1600px;
}
/*
* Only M3's scales compile. Tailwind's default radius, shadow, text-size, weight, leading,
* tracking and easing utilities are cleared like its palette, so `rounded-lg`, `text-sm`,
* `font-medium`, `shadow-md` or `ease-in-out` compile to nothing; the M3 sets are declared
* below (`rounded-corner-*`, `shadow-elevation-*`, `type-*`, `ease-spatial-*`…). The 4px
* spacing scale stays: it is M3's spacing grid.
*/
@theme {
--radius-*: initial;
--shadow-*: initial;
--inset-shadow-*: initial;
--drop-shadow-*: initial;
--text-*: initial;
--font-weight-*: initial;
--leading-*: initial;
--tracking-*: initial;
--ease-*: initial;
}
/* The colour roles, as generated by `php artisan material:scheme`. */
@theme inline {
--color-background: var(--md-sys-color-background);
@@ -94,16 +128,18 @@
}
/*
* Ink and lines by what they are, rather than by an opacity number that means nothing out of
* context: body copy, metadata, decoration; a structural line, a line around chrome, a divider.
* Ink and lines by what they are: body copy, metadata, decoration; a structural line, a line
* around chrome, a divider. Each is an M3 role, never an opacity: M3 marks emphasis with
* on-surface-variant and outline, and reserves 38% for disabled content, so an ink dimmed by
* opacity reads as disabled and loses its contrast guarantee.
*/
@theme inline {
--color-body: var(--md-sys-color-on-surface-variant);
--color-meta: color-mix(in oklab, var(--md-sys-color-on-surface) 60%, transparent);
--color-quiet: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
--color-meta: var(--md-sys-color-on-surface-variant);
--color-quiet: var(--md-sys-color-outline);
--color-structure: var(--md-sys-color-outline-variant);
--color-chrome: color-mix(in oklab, var(--md-sys-color-outline-variant) 60%, transparent);
--color-divider: color-mix(in oklab, var(--md-sys-color-outline-variant) 40%, transparent);
--color-chrome: var(--md-sys-color-outline-variant);
--color-divider: var(--md-sys-color-outline-variant);
}
@theme {