From 13b975358f5d05e7cc005dc231ec9f8165d98af6 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Tue, 15 Sep 2026 06:22:26 +0200 Subject: [PATCH] Teach the ink classes and lines on the Colour page again Plan step 38 review: the Colour section dropped its "Ink and lines" group with the retired Tailwind ink names and put nothing in its place, so no page showed the md-ink-* classes that replaced them or how to draw a line. A new "Ink and lines" example writes md-ink, md-ink-variant and md-ink-quiet with their roles, the state inks, and a line as and an edge as . Doc comments teach too: the Icons intro showed optical="20" alone for a 20px icon, where picks the cut itself; icon's header still spoke of a caller's size-5 class, the navigation rail's usage wrapped it in flex/min-w-0 utilities, and the menu item's icon-class example named a Tailwind-style text- class. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/views/components/icon.blade.php | 10 ++++----- .../views/components/menu-item.blade.php | 6 +++--- .../components/navigation-rail.blade.php | 8 +++---- .../views/showcase/sections/colour.blade.php | 21 +++++++++++++++++++ .../views/showcase/sections/icons.blade.php | 4 ++-- 5 files changed, 34 insertions(+), 15 deletions(-) diff --git a/resources/views/components/icon.blade.php b/resources/views/components/icon.blade.php index 482af0f8..e8395bcf 100644 --- a/resources/views/components/icon.blade.php +++ b/resources/views/components/icon.blade.php @@ -8,9 +8,8 @@ falls back to 24, and `filled` combines with either. M3's optical size axis redraws a symbol so its strokes look equally heavy at every size, which means an icon drawn at 20px or smaller uses the 20 cut: scaling the 24 cut down to 20px instead makes its - strokes about a sixth too thin (docs/reference/m3/styles.md § Icons). The cut and the - size are separate decisions, so a caller that draws `size-5` passes `optical="20"` - with it; the components that size their own icons do that for you. + strokes about a sixth too thin (docs/reference/m3/styles.md § Icons). `size` makes that + choice for you; `optical` is for an icon sized some other way, by the caller's own CSS. Decorative by default and hidden from screen readers, because nearly every icon sits beside words that already say what it means. Pass `label` when the icon alone carries @@ -19,9 +18,8 @@ `size` is the drawn size in px (`16`, `18`, `20`, `24`, `32`, `40`, `48` …, any whole number from 8 to 256; 24 when left out), written as `--md-icon-size` and drawn by resources/css/components/icon.css. An icon given a size of 20 or less takes the 20 cut - unless `optical` says otherwise, which is M3's rule. A size class from the caller still - works while the components that pass one are rewritten (plan step 36): a utility outranks - the package's layer. + unless `optical` says otherwise, which is M3's rule. A caller's unlayered class or `style` + setting a width and height still outranks the package's layer. `mirror-rtl` flips a directional symbol (an arrow, a chevron) in a right-to-left document, as M3's bidirectionality rules ask; symbols that mean the same in both directions do not diff --git a/resources/views/components/menu-item.blade.php b/resources/views/components/menu-item.blade.php index 86cd4391..0a126dd6 100644 --- a/resources/views/components/menu-item.blade.php +++ b/resources/views/components/menu-item.blade.php @@ -30,9 +30,9 @@ come back to the item, and Escape closes nothing more. `icon-class` is for an icon whose colour means something of its own, a sport's glyph in the - sport's colour (`icon-class="text-sport-run"`). A colour there paints the icon over the ink - this file gives it, because a caller's unlayered class always outranks the package's layer — - except a disabled item's icon, which stays disabled regardless. + sport's colour (`icon-class="sport-run"`, the application's own class). A colour there paints + the icon over the ink this file gives it, because a caller's unlayered class always outranks + the package's layer — except a disabled item's icon, which stays disabled regardless. 48px tall (M3's published row height wins over SegmentedMenuTokens' own 44dp, ACT-28), body-large label, 20px icons, 16px either side (SegmentedMenuTokens' Expressive spacing, diff --git a/resources/views/components/navigation-rail.blade.php b/resources/views/components/navigation-rail.blade.php index e92c1760..17063f4e 100644 --- a/resources/views/components/navigation-rail.blade.php +++ b/resources/views/components/navigation-rail.blade.php @@ -1,9 +1,9 @@ {{-- M3 Expressive's navigation rail: destinations down the start edge of a `medium` or wider window, collapsed (96px, icon over label) or expanded (icon beside label in a full-width pill). -
+ - Mail + Mail @@ -18,8 +18,8 @@ -
…
-
+
…
+ `mode` says what decides its width: - `collapsed` — always collapsed; `expanded` — always expanded. diff --git a/resources/views/showcase/sections/colour.blade.php b/resources/views/showcase/sections/colour.blade.php index 62004f2f..88cfdbf1 100644 --- a/resources/views/showcase/sections/colour.blade.php +++ b/resources/views/showcase/sections/colour.blade.php @@ -25,6 +25,27 @@ 'Contrast level' => <<<'BLADE' BLADE, + 'Ink and lines' => <<<'BLADE' + +

Text reads in md-ink, on-surface.

+

Secondary text and metadata in md-ink-variant, on-surface-variant.

+ + + Decoration in md-ink-quiet, outline: never text that has to be read. + + + md-ink-primary + md-ink-error + md-ink-success + md-ink-warning + md-ink-info + + + +

A line between groups is <x-divider>, an edge around a region <x-surface outlined>; both draw outline-variant.

+ + + BLADE, ]; @endphp diff --git a/resources/views/showcase/sections/icons.blade.php b/resources/views/showcase/sections/icons.blade.php index 440f2f94..3b6baa4c 100644 --- a/resources/views/showcase/sections/icons.blade.php +++ b/resources/views/showcase/sections/icons.blade.php @@ -23,11 +23,11 @@

Every Material Symbol (Rounded, 400, grade 0) as <x-icon name="…" />, outlined or filled, drawn from the optical size 24 cut or — for an icon 20px or smaller, where 24's strokes would look thin — - the 20 cut: <x-icon name="…" optical="20" />. + the 20 cut, which size picks on its own: <x-icon name="…" size="20" />.

- filled means active or selected; optical="20" when an icon is drawn at 20px or less; one weight per group. An icon takes the size and colour of the text beside it. An icon-only control carries an accessible name; a decorative icon is hidden. + filled means active or selected; size for any size but 24 (20 or less draws the 20 cut, and optical chooses a cut by hand); one weight per group. An icon takes the size and colour of the text beside it. An icon-only control carries an accessible name; a decorative icon is hidden.