Andreas Reinhold / reiniandClaude Opus 5
fb42f004b1
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
77 lines
4.0 KiB
PHP
77 lines
4.0 KiB
PHP
{{-- 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
|