livewire-material/resources/views/components/scheme-picker.blade.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. The inline pair is the standard contrast level,
     which is what the server can know; Alpine swaps in the level on screen
     (`$store.theme.resolvedContrast`) so a dot never promises a colour the page would not paint.
     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 = \NoNameWeb\LivewireMaterial\Support\Field::messages($errors ?? null, $errorKey);
    $roles = ['primary', 'secondary', 'tertiary'];

    // profile => level => theme => role => hex, for the dots. Every level is filled — a profile
    // the caller passed in by hand, or a scheme file without the levels, repeats its standard
    // colours — so the binding below never asks whether a level is there.
    $swatches = [];

    foreach ($profiles === [] ? [] : \NoNameWeb\LivewireMaterial\Support\Scheme::LEVELS as $level) {
        $generated = $level === 'standard' ? [] : \NoNameWeb\LivewireMaterial\Support\Scheme::profiles(contrast: $level);

        foreach ($profiles as $profile => $scheme) {
            foreach (['light', 'dark'] as $theme) {
                foreach ($roles as $role) {
                    $swatches[$profile][$level][$theme][$role] = ($generated[$profile] ?? $scheme)[$theme][$role];
                }
            }
        }
    }
@endphp

@if ($profiles !== [])
    <fieldset
        x-data="{ swatches: @js($swatches) }"
        data-md-scheme-picker
        {{ $attributes->whereDoesntStartWith(['wire:model', 'x-model'])->except('name') }}
    >
        @if (filled($label))
            <legend data-md-scheme-picker-legend class="md-type-label-lg md-ink-variant">{{ $label }}</legend>
        @endif

        <div data-md-scheme-picker-options>
            @foreach ($profiles as $profile => $scheme)
                <label data-md-scheme-picker-option="{{ $profile }}" class="md-state-layer">
                    <input
                        class="md-visually-hidden"
                        {{ $attributes->whereStartsWith(['wire:model', 'x-model']) }}
                        type="radio"
                        name="{{ $name }}"
                        value="{{ $profile }}"
                        x-on:change="$store.theme.previewScheme($event.target.value)"
                    />

                    <span data-md-scheme-picker-swatches aria-hidden="true">
                        @foreach ($roles as $role)
                            <span
                                data-md-scheme-picker-swatch
                                style="--swatch-light: {{ $scheme['light'][$role] }}; --swatch-dark: {{ $scheme['dark'][$role] }}"
                                x-bind:style="{
                                    '--swatch-light': swatches['{{ $profile }}'][$store.theme.resolvedContrast].light['{{ $role }}'],
                                    '--swatch-dark': swatches['{{ $profile }}'][$store.theme.resolvedContrast].dark['{{ $role }}'],
                                }"
                            ></span>
                        @endforeach
                    </span>

                    <span data-md-scheme-picker-label class="md-truncate md-type-label-lg">{{ __($scheme['label']) }}</span>

                    {{-- In the corner, so a long name keeps its room. The wrapper carries the position. --}}
                    <span data-md-scheme-picker-check>
                        <x-livewire-material::icon name="check" :size="20" />
                    </span>
                </label>
            @endforeach
        </div>

        @if ($messages !== [])
            @foreach ($messages as $message)
                <p data-md-scheme-picker-hint class="md-type-body-sm md-ink-error">{{ $message }}</p>
            @endforeach
        @elseif (filled($hint))
            <p data-md-scheme-picker-hint class="md-type-body-sm md-ink-variant">{{ $hint }}</p>
        @endif
    </fieldset>
@endif