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:
co-authored by
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
|
||||
|
||||
Reference in New Issue
Block a user