From d36f50bc3ceadf97ddb9d9d330173c07e7245931 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 13:42:49 +0200 Subject: [PATCH] Add M3's spacing tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- .../boost/skills/material-3-design/SKILL.md | 2 +- resources/css/tokens/spacing.css | 32 +++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 resources/css/tokens/spacing.css diff --git a/resources/boost/skills/material-3-design/SKILL.md b/resources/boost/skills/material-3-design/SKILL.md index a9d9ae77..e583ee72 100644 --- a/resources/boost/skills/material-3-design/SKILL.md +++ b/resources/boost/skills/material-3-design/SKILL.md @@ -9,7 +9,7 @@ description: Material 3 Expressive's design system as Livewire Material implemen Use this skill when deciding how a screen, panel or control should look or behave — which colour, container, corner, type style, motion, breakpoint or spacing — in an application that requires `nonameweb/livewire-material`, and when reviewing a view against Material 3. The props and slots of each component are in the `livewire-material-development` skill; this one is the design language they implement. The rules an agent must always follow are in the `material-3` guideline; the tables here are what those rules compress. -Every table pairs the M3 name with the library's utility or attribute. The tokens are CSS variables (`--md-sys-color-*`, `--md-sys-typescale-*`, `--md-sys-shape-*`, `--md-sys-elevation-*`, `--md-sys-motion-*`, `--md-sys-state-*`, `--md-ref-typeface-*`) and the utilities read them, so a template names a utility and never a variable or a value. +Every table pairs the M3 name with the library's utility or attribute. The tokens are CSS variables (`--md-sys-color-*`, `--md-sys-typescale-*`, `--md-sys-shape-*`, `--md-sys-elevation-*`, `--md-sys-motion-*`, `--md-sys-state-*`, `--md-sys-measurement-*`, `--md-ref-typeface-*`) and the utilities read them, so a template names a utility and never a variable or a value. ## Colour diff --git a/resources/css/tokens/spacing.css b/resources/css/tokens/spacing.css new file mode 100644 index 00000000..b4ba5b60 --- /dev/null +++ b/resources/css/tokens/spacing.css @@ -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; + } +}