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

Add M3's spacing tokens

Browse Source 
Plan step 33. tokens/spacing.css declares --md-sys-measurement-space25
to space900 (2 to 72px) in material.tokens, from
docs/reference/m3/styles-supplement.md § Spacing, in px because a dp
is a CSS pixel and spacing does not scale with text. The design skill
names the new token family, as its drift test requires.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 13:42:49 +02:00
co-authored by Claude Opus 5
parent 5f899c7287
commit d36f50bc3c
2 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/tokens/spacing.css
+32
View File
@@ -0,0 +1,32 @@
/*
* Spacing, as M3's measurement scale.
*
* An 8dp grid where space100 is the base unit, with the nested steps M3 uses below and just above
* it: 0.25×, 0.5×, 0.75× and 1.25× (docs/reference/m3/styles-supplement.md § Spacing, "Spacing
* scale"). Names are Compose's `md.sys.measurement.space*`. A dp is a CSS pixel, so the values are
* px and a larger text size leaves them alone — M3 keeps spacing when text scales to 200%.
*
* Padding and gaps on the parent, margins only between layout regions. A value between two steps
* is a new token in the application's own stylesheet, named by the same multiplier convention
* (space225 = 18px), never a literal.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.tokens {
:root {
--md-sys-measurement-space25: 2px;
--md-sys-measurement-space50: 4px;
--md-sys-measurement-space75: 6px;
--md-sys-measurement-space100: 8px;
--md-sys-measurement-space125: 10px;
--md-sys-measurement-space200: 16px;
--md-sys-measurement-space300: 24px;
--md-sys-measurement-space400: 32px;
--md-sys-measurement-space500: 40px;
--md-sys-measurement-space600: 48px;
--md-sys-measurement-space700: 56px;
--md-sys-measurement-space800: 64px;
--md-sys-measurement-space900: 72px;
}
}