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
2026-09-15 06:22:26 +02:00
co-authored by Claude Opus 5
parent ebdcdb82b5
commit 13b975358f
5 changed files with 34 additions and 15 deletions
@@ -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,