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

Merge branch 'worktree-agent-a9537eabbf38e0608'

Browse Source 
# Conflicts:
#	resources/views/components/scheme-picker.blade.php
#	resources/views/components/theme-script.blade.php
#	resources/views/showcase/sections/colour.blade.php
#	tests/Feature/Components/ThemeScriptTest.php
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 05:43:37 +02:00
parent 216a15307a 4ba28b8579
commit 18023166bb
23 changed files with 4086 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/colour.blade.php
+42
View File
@@ -11,12 +11,21 @@
'Ink and lines' => ['bg-body', 'bg-meta', 'bg-quiet', 'bg-structure', 'bg-chrome', 'bg-divider'],
];
// 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 = ['bg-primary', 'bg-on-primary', 'bg-primary-container', 'bg-on-primary-container', 'bg-on-surface-variant', 'bg-outline', 'bg-error', 'bg-success', 'bg-warning', 'bg-info'];
$profile = \NoNameWeb\LivewireMaterial\Support\Scheme::profile();
$examples = [
'Colour profiles' => <<<'BLADE'
<div x-data="{ profile: $store.theme.scheme }" class="w-full max-w-3xl">
<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
@@ -34,10 +43,43 @@
profiles the picker draws nothing.
</p>
<p class="max-w-3xl type-body-md text-on-surface-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>&lt;html data-contrast&gt;</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
<div class="grid gap-4 large:grid-cols-3">
@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>. --}}
<div
@if ($profile !== null) data-scheme="{{ $profile }}" @endif
@if ($level !== 'standard') data-contrast="{{ $level }}" @endif
class="space-y-3"
>
<h3 class="type-title-sm text-on-surface-variant">{{ $title }}</h3>
@foreach (['light', 'dark'] as $theme)
<div data-theme="{{ $theme }}" class="space-y-2 rounded-corner-lg bg-surface p-3 text-on-surface">
<h4 class="type-label-md capitalize text-on-surface-variant">{{ $theme }}</h4>
@foreach ($levelRoles as $role)
<div class="flex items-center gap-2">
<span @class(['size-6 shrink-0 rounded-corner-xs border border-outline-variant', $role])></span>
<span class="min-w-0 truncate type-body-sm">{{ \Illuminate\Support\Str::after($role, 'bg-') }}</span>
</div>
@endforeach
</div>
@endforeach
</div>
@endforeach
</div>
<div class="grid gap-4 expanded:grid-cols-2">
@foreach (['light', 'dark'] as $theme)
<div data-theme="{{ $theme }}" class="space-y-6 rounded-corner-lg bg-surface p-4 text-on-surface">