Andreas Reinhold / reiniandClaude Opus 5
d36f50bc3c
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
33 lines
1.4 KiB
CSS
33 lines
1.4 KiB
CSS
/*
|
||
* 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;
|
||
}
|
||
}
|