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 <x-divider> and an edge as <x-surface outlined>. Doc comments teach too: the Icons intro showed optical="20" alone for a 20px icon, where <x-icon size="20"> 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) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
ebdcdb82b5
commit
13b975358f
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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).
|
||||
|
||||
<div class="flex min-h-dvh">
|
||||
<x-row align="stretch" style="min-height: 100dvh">
|
||||
<x-navigation-rail mode="collapsible">
|
||||
<x-slot:brand><span class="type-title-lg">Mail</span></x-slot:brand>
|
||||
<x-slot:brand><span class="md-type-title-lg">Mail</span></x-slot:brand>
|
||||
<x-slot:header>
|
||||
<x-fab label="Compose" icon="edit" />
|
||||
</x-slot:header>
|
||||
@@ -18,8 +18,8 @@
|
||||
</x-slot:footer>
|
||||
</x-navigation-rail>
|
||||
|
||||
<main class="min-w-0 flex-1">…</main>
|
||||
</div>
|
||||
<main style="flex: 1; min-width: 0">…</main>
|
||||
</x-row>
|
||||
|
||||
`mode` says what decides its width:
|
||||
- `collapsed` — always collapsed; `expanded` — always expanded.
|
||||
|
||||
@@ -25,6 +25,27 @@
|
||||
'Contrast level' => <<<'BLADE'
|
||||
<x-theme-toggle mode="contrast" />
|
||||
BLADE,
|
||||
'Ink and lines' => <<<'BLADE'
|
||||
<x-stack gap="space200" style="width: 100%;">
|
||||
<p class="md-type-body-lg md-ink">Text reads in <code>md-ink</code>, on-surface.</p>
|
||||
<p class="md-type-body-md md-ink-variant">Secondary text and metadata in <code>md-ink-variant</code>, on-surface-variant.</p>
|
||||
<x-row gap="space100" align="center">
|
||||
<x-icon name="drag_indicator" class="md-ink-quiet" />
|
||||
<span class="md-type-body-md md-ink-variant">Decoration in <code>md-ink-quiet</code>, outline: never text that has to be read.</span>
|
||||
</x-row>
|
||||
<x-row gap="space200" wrap align="center">
|
||||
<span class="md-type-label-lg md-ink-primary">md-ink-primary</span>
|
||||
<span class="md-type-label-lg md-ink-error">md-ink-error</span>
|
||||
<span class="md-type-label-lg md-ink-success">md-ink-success</span>
|
||||
<span class="md-type-label-lg md-ink-warning">md-ink-warning</span>
|
||||
<span class="md-type-label-lg md-ink-info">md-ink-info</span>
|
||||
</x-row>
|
||||
<x-divider />
|
||||
<x-surface outlined corner="md" padding="space200">
|
||||
<p class="md-type-body-md md-ink-variant">A line between groups is <code><x-divider></code>, an edge around a region <code><x-surface outlined></code>; both draw outline-variant.</p>
|
||||
</x-surface>
|
||||
</x-stack>
|
||||
BLADE,
|
||||
];
|
||||
@endphp
|
||||
|
||||
|
||||
@@ -23,11 +23,11 @@
|
||||
<p class="md-type-body-md md-ink-variant">
|
||||
Every Material Symbol (Rounded, 400, grade 0) as <code><x-icon name="…" /></code>, outlined or <code>filled</code>,
|
||||
drawn from the optical size 24 cut or — for an icon 20px or smaller, where 24's strokes would look thin —
|
||||
the 20 cut: <code><x-icon name="…" optical="20" /></code>.
|
||||
the 20 cut, which <code>size</code> picks on its own: <code><x-icon name="…" size="20" /></code>.
|
||||
</p>
|
||||
|
||||
<p class="md-type-body-md md-ink-variant" data-test="when-to-use">
|
||||
<code>filled</code> means active or selected; <code>optical="20"</code> 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.
|
||||
<code>filled</code> means active or selected; <code>size</code> for any size but 24 (20 or less draws the 20 cut, and <code>optical</code> 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.
|
||||
</p>
|
||||
|
||||
<x-livewire-material::row gap="space200" wrap align="center">
|
||||
|
||||
Reference in New Issue
Block a user