livewire-material/resources/views/showcase/sections/colour.blade.php

@php
    $groups = [
        'Primary' => ['bg-primary', 'bg-on-primary', 'bg-primary-container', 'bg-on-primary-container', 'bg-inverse-primary', 'bg-primary-fixed', 'bg-primary-fixed-dim', 'bg-on-primary-fixed', 'bg-on-primary-fixed-variant'],
        'Secondary' => ['bg-secondary', 'bg-on-secondary', 'bg-secondary-container', 'bg-on-secondary-container', 'bg-secondary-fixed', 'bg-secondary-fixed-dim', 'bg-on-secondary-fixed', 'bg-on-secondary-fixed-variant'],
        'Tertiary' => ['bg-tertiary', 'bg-on-tertiary', 'bg-tertiary-container', 'bg-on-tertiary-container', 'bg-tertiary-fixed', 'bg-tertiary-fixed-dim', 'bg-on-tertiary-fixed', 'bg-on-tertiary-fixed-variant'],
        'Error' => ['bg-error', 'bg-on-error', 'bg-error-container', 'bg-on-error-container', 'bg-inverse-error'],
        'Success' => ['bg-success', 'bg-on-success', 'bg-success-container', 'bg-on-success-container', 'bg-inverse-success'],
        'Warning' => ['bg-warning', 'bg-on-warning', 'bg-warning-container', 'bg-on-warning-container', 'bg-inverse-warning'],
        'Info' => ['bg-info', 'bg-on-info', 'bg-info-container', 'bg-on-info-container', 'bg-inverse-info'],
        'Surface' => ['bg-surface', 'bg-surface-dim', 'bg-surface-bright', 'bg-surface-container-lowest', 'bg-surface-container-low', 'bg-surface-container', 'bg-surface-container-high', 'bg-surface-container-highest', 'bg-on-surface', 'bg-on-surface-variant', 'bg-inverse-surface', 'bg-inverse-on-surface', 'bg-outline', 'bg-outline-variant'],
        '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

<section id="colour" class="scroll-mt-24 space-y-6">
    <h2 class="type-headline-md">Colour</h2>

    <p class="max-w-3xl type-body-md text-on-surface-variant">
        Every role as <code>bg-*</code>, <code>text-*</code> and <code>border-*</code>, generated by
        <code>php artisan material:scheme</code>. Both themes side by side, whatever the page is showing.
    </p>

    <p class="max-w-3xl type-body-md text-on-surface-variant">
        With colour profiles in <code>livewire-material.profiles</code>, the command generates each one under
        <code>&lt;html data-scheme&gt;</code>, and <code>&lt;x-scheme-picker&gt;</code> chooses between them. Without
        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 lg: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">
                <h3 class="type-title-md capitalize">{{ $theme }}</h3>

                @foreach ($groups as $group => $roles)
                    <div class="space-y-2">
                        <h4 class="type-label-lg text-on-surface-variant">{{ $group }}</h4>

                        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
                            @foreach ($roles as $role)
                                <div class="flex items-center gap-2">
                                    <span @class(['size-8 shrink-0 rounded-corner-sm 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>
                    </div>
                @endforeach
            </div>
        @endforeach
    </div>
</section>