noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Teach the ink classes and lines on the Colour page again

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/colour.blade.php
+21
View File
@@ -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>&lt;x-divider&gt;</code>, an edge around a region <code>&lt;x-surface outlined&gt;</code>; both draw outline-variant.</p>
</x-surface>
</x-stack>
BLADE,
];
@endphp
resources/views/showcase/sections/icons.blade.php
+2 -2
View File
@@ -23,11 +23,11 @@
<p class="md-type-body-md md-ink-variant">
Every Material Symbol (Rounded, 400, grade 0) as <code>&lt;x-icon name="…" /&gt;</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>&lt;x-icon name="…" optical="20" /&gt;</code>.
the 20 cut, which <code>size</code> picks on its own: <code>&lt;x-icon name="…" size="20" /&gt;</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">