Add colour profiles

An application lists named schemes in livewire-material.profiles, and material:scheme without a seed generates them all into one stylesheet: the default profile as the plain blocks, every profile under <html data-scheme>, with descendant selectors so a nested data-theme panel keeps the page's profile. The JSON keeps the 1.0 top level. Scheme::resolveProfileUsing() lets the application name the active profile; it is asked on every use and falls back to the default for an unknown name or a resolver that throws. The head script writes it before the first paint and keeps it through wire:navigate, and the mail theme and the error pages' fallback draw it. <x-scheme-picker> chooses one and previews it through $store.theme.previewScheme(); the showcase previews the Workbench's profiles. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
2026-09-13 14:35:49 +02:00
parent 7798352cfc
commit fb42f004b1
22 changed files with 2006 additions and 47 deletions
@@ -0,0 +1,76 @@
+{{-- A choice of colour profile: one swatch per profile `material:scheme` generated from
+     `livewire-material.profiles`, each its name and its primary, secondary and tertiary colour.
+
+         <x-scheme-picker label="Colour profile" wire:model="colorProfile" hint="Applies to every page after saving" />
+
+     Native radios under the swatches, so `wire:model` and `x-model` bind as on any input and the
+     arrow keys move the choice. Choosing one shows it on the page at once
+     (`$store.theme.previewScheme`); storing it — and telling `Scheme::resolveProfileUsing()` — is
+     the application's. The dots are the only colours not drawn from tokens: they show other
+     profiles than the page's, so they are custom properties set inline from the scheme file's
+     checked hexes, light or dark with the page. Without profiles it renders nothing.
+
+     Props: `label`, `hint`, `name` (needed with `x-model`), `profiles` (default: every generated
+     profile). A validation message for the bound property replaces the hint. --}}
+
+@props([
+    'label' => null,
+    'hint' => null,
+    'name' => null,
+    'profiles' => null,
+])
+
+@php
+    $profiles ??= \NoNameWeb\LivewireMaterial\Support\Scheme::profiles();
+    $model = $attributes->whereStartsWith('wire:model')->first();
+    $name ??= $model ?: 'scheme';
+    $errorKey = $model ?: (filled($attributes->get('name')) ? (string) $attributes->get('name') : null);
+    $messages = $errorKey !== null && isset($errors) ? \Illuminate\Support\Arr::flatten($errors->get($errorKey)) : [];
+@endphp
+
+@if ($profiles !== [])
+    <fieldset x-data data-scheme-picker {{ $attributes->only(['class', 'wire:key'])->class('min-w-0') }}>
+        @if (filled($label))
+            <legend class="mb-2 type-label-lg text-on-surface-variant">{{ $label }}</legend>
+        @endif
+
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
+            @foreach ($profiles as $profile => $scheme)
+                <label
+                    data-scheme-option="{{ $profile }}"
+                    class="state-layer flex min-w-0 cursor-pointer select-none items-center gap-3 rounded-corner-lg border border-outline-variant bg-surface-container-low p-3 text-on-surface transition-[background-color,border-color] duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast has-checked:border-transparent has-checked:bg-secondary-container has-checked:text-on-secondary-container has-focus-visible:outline-3 has-focus-visible:outline-offset-2 has-focus-visible:outline-secondary"
+                >
+                    <input
+                        {{ $attributes->whereStartsWith(['wire:model', 'x-model']) }}
+                        type="radio"
+                        name="{{ $name }}"
+                        value="{{ $profile }}"
+                        x-on:change="$store.theme.previewScheme($event.target.value)"
+                        class="peer sr-only"
+                    />
+
+                    <span class="flex shrink-0 -space-x-1.5" aria-hidden="true">
+                        @foreach (['primary', 'secondary', 'tertiary'] as $role)
+                            <span
+                                style="--swatch-light: {{ $scheme['light'][$role] }}; --swatch-dark: {{ $scheme['dark'][$role] }}"
+                                class="size-5 rounded-full bg-(--swatch-light) ring-2 ring-surface-container-low dark:bg-(--swatch-dark)"
+                            ></span>
+                        @endforeach
+                    </span>
+
+                    <span class="min-w-0 flex-1 truncate type-label-lg">{{ __($scheme['label']) }}</span>
+
+                    <x-livewire-material::icon name="check" class="hidden size-5 shrink-0 peer-checked:block" />
+                </label>
+            @endforeach
+        </div>
+
+        @if ($messages !== [])
+            @foreach ($messages as $message)
+                <p class="mt-1 type-body-sm text-error">{{ $message }}</p>
+            @endforeach
+        @elseif (filled($hint))
+            <p class="mt-1 type-body-sm text-on-surface-variant">{{ $hint }}</p>
+        @endif
+    </fieldset>
+@endif