Andreas Reinhold / reiniandClaude Sonnet 5
365df791c1
Plan step 38: swatches move from Tailwind's bg-* role utilities to
data-md-showcase-swatch spans whose fill is the caller's own inline
style="background: var(--md-sys-color-{role})" (a swatch's colour
depends on the role it shows, so that one declaration cannot be a
class), sized and edged in showcase.css; the two grids and every
per-theme panel move onto <x-grid>, <x-surface> and <x-stack>; text
onto the md-type-*/md-ink-* classes. The legacy "Ink and lines" group
(bg-body, bg-meta, bg-quiet, bg-structure, bg-chrome, bg-divider) is
dropped — those Tailwind ink/line names end with Phase F and their
roles already show under Surface.
ThemeTest and ColourProfilesTest read the swatch's computed colour
through the new data-md-showcase-swatch="primary" hook instead of the
retired .bg-primary class.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
113 lines
7.3 KiB
PHP
113 lines
7.3 KiB
PHP
@php
|
|
$groups = [
|
|
'Primary' => ['primary', 'on-primary', 'primary-container', 'on-primary-container', 'inverse-primary', 'primary-fixed', 'primary-fixed-dim', 'on-primary-fixed', 'on-primary-fixed-variant'],
|
|
'Secondary' => ['secondary', 'on-secondary', 'secondary-container', 'on-secondary-container', 'secondary-fixed', 'secondary-fixed-dim', 'on-secondary-fixed', 'on-secondary-fixed-variant'],
|
|
'Tertiary' => ['tertiary', 'on-tertiary', 'tertiary-container', 'on-tertiary-container', 'tertiary-fixed', 'tertiary-fixed-dim', 'on-tertiary-fixed', 'on-tertiary-fixed-variant'],
|
|
'Error' => ['error', 'on-error', 'error-container', 'on-error-container', 'inverse-error'],
|
|
'Success' => ['success', 'on-success', 'success-container', 'on-success-container', 'inverse-success'],
|
|
'Warning' => ['warning', 'on-warning', 'warning-container', 'on-warning-container', 'inverse-warning'],
|
|
'Info' => ['info', 'on-info', 'info-container', 'on-info-container', 'inverse-info'],
|
|
'Surface' => ['surface', 'surface-dim', 'surface-bright', 'surface-container-lowest', 'surface-container-low', 'surface-container', 'surface-container-high', 'surface-container-highest', 'on-surface', 'on-surface-variant', 'inverse-surface', 'inverse-on-surface', 'outline', 'outline-variant'],
|
|
];
|
|
|
|
// The roles a contrast level moves most: the page keeps its surface, the ink and the
|
|
// outlines carry the level.
|
|
$levels = ['standard' => 'Standard', 'medium' => 'Medium · 3:1', 'high' => 'High · 7:1'];
|
|
$levelRoles = ['primary', 'on-primary', 'primary-container', 'on-primary-container', 'on-surface-variant', 'outline', 'error', 'success', 'warning', 'info'];
|
|
$profile = \NoNameWeb\LivewireMaterial\Support\Scheme::profile();
|
|
|
|
$examples = [
|
|
'Colour profiles' => <<<'BLADE'
|
|
<div x-data="{ profile: $store.theme.scheme }">
|
|
<x-scheme-picker label="Colour profile" name="profile" x-model="profile" hint="Previews on this page; an application stores the choice and names it with Scheme::resolveProfileUsing()." />
|
|
</div>
|
|
BLADE,
|
|
'Contrast level' => <<<'BLADE'
|
|
<x-theme-toggle mode="contrast" />
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<x-livewire-material::stack as="section" id="colour" gap="space300">
|
|
<h2 class="md-type-headline-md">Colour</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
Every role as a <code>--md-sys-color-*</code> token, generated by
|
|
<code>php artisan material:scheme</code>. Both themes side by side, whatever the page is showing.
|
|
</p>
|
|
|
|
<p class="md-type-body-md md-ink-variant" data-test="when-to-use">
|
|
When to use which: <code>primary</code> is the one key action on a screen; <code>secondary-container</code> is the quiet fill (tonal buttons, selected navigation and chips); <code>tertiary</code> is a rare accent; <code>error</code>, <code>success</code>, <code>warning</code> and <code>info</code> mean state — the <code>-container</code> for a tinted panel, the role itself for its text and icon. Pair a role only with its <code>on-</code> partner. Ink is <code>on-surface</code>, lower emphasis <code>on-surface-variant</code>, decoration <code>outline</code>; never an opacity, because 38% means disabled. Every role changes with the contrast level below, which is why only roles are allowed.
|
|
</p>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
With colour profiles in <code>livewire-material.profiles</code>, the command generates each one under
|
|
<code><html data-scheme></code>, and <code><x-scheme-picker></code> chooses between them. Without
|
|
profiles the picker draws nothing.
|
|
</p>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
Every scheme is generated at M3's three contrast levels — standard, medium (3:1) and high (7:1) — and the
|
|
head script writes the visitor's to <code><html data-contrast></code>, following the operating system
|
|
until they choose. The page keeps its surface; the ink, the outlines and the containers carry the level.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
|
|
<x-livewire-material::grid :columns="['compact' => 1, 'large' => 3]" gap="space200">
|
|
@foreach ($levels as $level => $title)
|
|
{{-- data-scheme beside data-contrast: a profile's level blocks key on both attributes
|
|
together, as they do on <html>. --}}
|
|
<x-livewire-material::stack
|
|
:data-scheme="$profile"
|
|
:data-contrast="$level !== 'standard' ? $level : null"
|
|
gap="space150"
|
|
>
|
|
<h3 class="md-type-title-sm md-ink-variant">{{ $title }}</h3>
|
|
|
|
@foreach (['light', 'dark'] as $theme)
|
|
<x-livewire-material::surface data-theme="{{ $theme }}" level="surface" padding="space200" corner="lg">
|
|
<x-livewire-material::stack gap="space100">
|
|
<h4 class="md-type-label-md md-ink-variant">{{ ucfirst($theme) }}</h4>
|
|
|
|
@foreach ($levelRoles as $role)
|
|
<x-livewire-material::row gap="space100" align="center">
|
|
<span data-md-showcase-swatch="{{ $role }}" style="background: var(--md-sys-color-{{ $role }})"></span>
|
|
<span class="md-type-body-sm md-truncate" data-md-showcase-swatch-label>{{ $role }}</span>
|
|
</x-livewire-material::row>
|
|
@endforeach
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::surface>
|
|
@endforeach
|
|
</x-livewire-material::stack>
|
|
@endforeach
|
|
</x-livewire-material::grid>
|
|
|
|
<x-livewire-material::grid :columns="['compact' => 1, 'expanded' => 2]" gap="space200">
|
|
@foreach (['light', 'dark'] as $theme)
|
|
<x-livewire-material::surface data-theme="{{ $theme }}" level="surface" padding="space200" corner="lg">
|
|
<x-livewire-material::stack gap="space300">
|
|
<h3 class="md-type-title-md">{{ ucfirst($theme) }}</h3>
|
|
|
|
@foreach ($groups as $group => $roles)
|
|
<x-livewire-material::stack gap="space100">
|
|
<h4 class="md-type-label-lg md-ink-variant">{{ $group }}</h4>
|
|
|
|
<x-livewire-material::grid :columns="['compact' => 2, 'medium' => 3]" gap="space100">
|
|
@foreach ($roles as $role)
|
|
<x-livewire-material::row gap="space100" align="center">
|
|
<span data-md-showcase-swatch="{{ $role }}" data-md-showcase-size="lg" style="background: var(--md-sys-color-{{ $role }})"></span>
|
|
<span class="md-type-body-sm md-truncate" data-md-showcase-swatch-label>{{ $role }}</span>
|
|
</x-livewire-material::row>
|
|
@endforeach
|
|
</x-livewire-material::grid>
|
|
</x-livewire-material::stack>
|
|
@endforeach
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::surface>
|
|
@endforeach
|
|
</x-livewire-material::grid>
|
|
</x-livewire-material::stack>
|