`, ``, ` ` inside `` (`size="xs"` for a dense one); cell utilities (`text-end`, `whitespace-nowrap`) always win. Scrolling is yours: wrap it in ``. A row that opens something is `data-list-row` with one `data-list-open` control; a selected row is `aria-selected="true"`.
diff --git a/resources/js/theme.js b/resources/js/theme.js
index e234f378..f81dadb8 100644
--- a/resources/js/theme.js
+++ b/resources/js/theme.js
@@ -7,6 +7,10 @@
*
* `value` is an accessor, so binding a control with `x-model="$store.theme.value"` goes
* through the same write as `set()` and `toggle()`: the attributes, then localStorage.
+ *
+ * `scheme` is the colour profile on screen (, which the server chose), and
+ * `previewScheme(name)` shows another one on this page without storing anything — the
+ * application saves a choice itself, and the next full load draws what it saved.
*/
document.addEventListener('alpine:init', () => {
const root = document.documentElement
@@ -18,6 +22,7 @@ document.addEventListener('alpine:init', () => {
window.Alpine.store('theme', {
choice: choices.includes(root.dataset.themeChoice) ? root.dataset.themeChoice : 'system',
resolved: root.dataset.theme === 'dark' ? 'dark' : 'light',
+ scheme: root.dataset.scheme || null,
get value() {
return this.choice
@@ -48,6 +53,15 @@ document.addEventListener('alpine:init', () => {
toggle() {
this.set(this.resolved === 'dark' ? 'light' : 'dark')
},
+
+ previewScheme(name) {
+ if (typeof name !== 'string' || !/^[a-z0-9-]+$/.test(name)) {
+ return
+ }
+
+ this.scheme = name
+ root.dataset.scheme = name
+ },
})
// The head script repaints on an OS change while the choice is `system`; this keeps the
diff --git a/resources/views/components/scheme-picker.blade.php b/resources/views/components/scheme-picker.blade.php
new file mode 100644
index 00000000..09ad1c0b
--- /dev/null
+++ b/resources/views/components/scheme-picker.blade.php
@@ -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.
+
+
+
+ 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 !== [])
+
only(['class', 'wire:key'])->class('min-w-0') }}>
+ @if (filled($label))
+ {{ $label }}
+ @endif
+
+
+ @foreach ($profiles as $profile => $scheme)
+
+
+ @foreach (['primary', 'secondary', 'tertiary'] as $role)
+
+
+ {{ __($scheme['label']) }}
+
+
+ @endforeach
+
+
+ @if ($messages !== [])
+ @foreach ($messages as $message)
+ {{ $message }}
+ @endforeach
+ @elseif (filled($hint))
+ {{ $hint }}
+ @endif
+
+@endif
diff --git a/resources/views/components/theme-script.blade.php b/resources/views/components/theme-script.blade.php
index 2df86b1d..f8d73a84 100644
--- a/resources/views/components/theme-script.blade.php
+++ b/resources/views/components/theme-script.blade.php
@@ -11,6 +11,10 @@
JSON-encoded (maryUI's `"dark"`) — is adopted once and removed. Nothing is written for a
visitor who never chose, so changing `theme.default` later reaches them too.
+ With colour profiles (`livewire-material.profiles`, generated by `material:scheme`), the
+ active one — `Scheme::profile()`, which asks the application's resolver — is written to
+ , which the generated stylesheet keys each profile on.
+
The rail rides along for the theme's reason: is `expanded` or `collapsed`
(`livewire-material.rail.storage_key`, falling back to `rail.default`), and a collapsible
rail's width is CSS keyed on it (the `rail-collapsed:` variant). Set any later, a collapsed
@@ -27,6 +31,7 @@
$rail = config('livewire-material.rail');
$settings = [
+ 'scheme' => \NoNameWeb\LivewireMaterial\Support\Scheme::profile(),
'default' => in_array($theme['default'] ?? null, ['light', 'dark', 'system'], true) ? $theme['default'] : 'system',
'key' => $theme['storage_key'] ?? 'material-theme',
'legacy' => array_values($theme['legacy_keys'] ?? []),
@@ -78,6 +83,10 @@
root.setAttribute('data-theme', current === 'system' ? (media.matches ? 'dark' : 'light') : current);
};
+ if (settings.scheme) {
+ root.setAttribute('data-scheme', settings.scheme);
+ }
+
root.setAttribute('data-theme-key', settings.key);
root.setAttribute('data-theme-choice', choice);
root.setAttribute('data-rail-key', settings.rail.key);
@@ -87,7 +96,7 @@
media.addEventListener('change', apply);
document.addEventListener('livewire:navigating', function (event) {
- var kept = ['data-theme', 'data-theme-choice', 'data-theme-key', 'data-rail', 'data-rail-key'].map(function (name) {
+ var kept = ['data-scheme', 'data-theme', 'data-theme-choice', 'data-theme-key', 'data-rail', 'data-rail-key'].map(function (name) {
return [name, root.getAttribute(name)];
});
diff --git a/resources/views/showcase/layout.blade.php b/resources/views/showcase/layout.blade.php
index 0ebdd824..8ab85e58 100644
--- a/resources/views/showcase/layout.blade.php
+++ b/resources/views/showcase/layout.blade.php
@@ -132,6 +132,19 @@
+ {{-- With colour profiles, a preview of each on this page; nothing is stored. --}}
+ @if (($profiles = \NoNameWeb\LivewireMaterial\Support\Scheme::profiles()) !== [])
+
+
+
+
+ @foreach ($profiles as $name => $profile)
+
+ @endif
+
diff --git a/resources/views/showcase/sections/colour.blade.php b/resources/views/showcase/sections/colour.blade.php
index 58491f21..cef49cfc 100644
--- a/resources/views/showcase/sections/colour.blade.php
+++ b/resources/views/showcase/sections/colour.blade.php
@@ -10,6 +10,14 @@
'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'],
];
+
+ $examples = [
+ 'Colour profiles' => <<<'BLADE'
+
+
+ BLADE,
+ ];
@endphp
@@ -20,6 +28,16 @@
php artisan material:scheme. Both themes side by side, whatever the page is showing.
+
+ With colour profiles in livewire-material.profiles, the command generates each one under
+ <html data-scheme>, and <x-scheme-picker> chooses between them. Without
+ profiles the picker draws nothing.
+
+
+ @foreach ($examples as $title => $code)
+
@foreach (['light', 'dark'] as $theme)
diff --git a/src/Console/SchemeCommand.php b/src/Console/SchemeCommand.php
index 1af683f6..8d730df2 100644
--- a/src/Console/SchemeCommand.php
+++ b/src/Console/SchemeCommand.php
@@ -5,6 +5,7 @@ namespace NoNameWeb\LivewireMaterial\Console;
use Illuminate\Console\Command;
use Illuminate\Filesystem\Filesystem;
use Illuminate\Support\Facades\Process;
+use Illuminate\Support\Str;
use JsonException;
use Symfony\Component\Console\Attribute\AsCommand;
@@ -15,7 +16,7 @@ class SchemeCommand extends Command
* @var string
*/
protected $signature = 'material:scheme
- {seed : The source colour, as #rrggbb}
+ {seed? : The source colour, as #rrggbb; without it, every profile in livewire-material.profiles}
{--variant=tonal-spot : tonal-spot, vibrant, expressive, neutral, fidelity, content, monochrome, rainbow or fruit-salad}
{--contrast=0 : The contrast level, from -1 to 1}
{--success=#22a06b : The source of the success colour}
@@ -26,20 +27,73 @@ class SchemeCommand extends Command
/**
* @var string
*/
- protected $description = 'Generate the application\'s Material 3 colour scheme from a seed colour';
+ protected $description = 'Generate the application\'s Material 3 colour scheme from a seed colour, or every configured colour profile';
public function handle(Filesystem $files): int
{
$stylesheet = $this->option('output') ?: resource_path('css/material-scheme.css');
$data = preg_replace('/\.css$/', '', $stylesheet).'.json';
+ if (filled($this->argument('seed'))) {
+ $scheme = $this->generate((string) $this->argument('seed'), (string) $this->option('variant'), (float) $this->option('contrast'));
+
+ if ($scheme === null) {
+ return self::FAILURE;
+ }
+
+ return $this->write($files, $stylesheet, $data, $this->stylesheet($scheme), $scheme);
+ }
+
+ $profiles = config('livewire-material.profiles');
+
+ if (! is_array($profiles) || $profiles === []) {
+ $this->components->error('Give a seed colour (php artisan material:scheme "#4f46e5"), or list colour profiles in livewire-material.profiles.');
+
+ return self::FAILURE;
+ }
+
+ $generated = [];
+
+ foreach ($profiles as $name => $profile) {
+ if (! is_string($name) || preg_match('/^[a-z0-9-]+$/', $name) !== 1) {
+ $this->components->error("A profile's name is lowercase letters, digits and dashes; \"{$name}\" is not.");
+
+ return self::FAILURE;
+ }
+
+ $scheme = $this->generate((string) ($profile['seed'] ?? ''), (string) ($profile['variant'] ?? 'tonal-spot'), (float) ($profile['contrast'] ?? 0), "Profile \"{$name}\": ");
+
+ if ($scheme === null) {
+ return self::FAILURE;
+ }
+
+ $generated[$name] = ['label' => (string) ($profile['label'] ?? Str::headline($name)), ...$scheme];
+ }
+
+ $configured = config('livewire-material.profile');
+ $default = is_string($configured) && isset($generated[$configured]) ? $configured : array_key_first($generated);
+
+ return $this->write($files, $stylesheet, $data, $this->profilesStylesheet($generated, $default), [
+ ...collect($generated[$default])->except('label')->all(),
+ 'default' => $default,
+ 'profiles' => $generated,
+ ]);
+ }
+
+ /**
+ * One scheme from Google's colour utilities, or null once the reason has been shown.
+ *
+ * @return array{seed: string, variant: string, spec: string, contrast: float, light: array, dark: array}|null
+ */
+ protected function generate(string $seed, string $variant, float $contrast, string $context = ''): ?array
+ {
$result = Process::run([
config('livewire-material.node', 'node'),
__DIR__.'/../../resources/node/scheme.mjs',
json_encode([
- 'seed' => $this->argument('seed'),
- 'variant' => $this->option('variant'),
- 'contrast' => (float) $this->option('contrast'),
+ 'seed' => $seed,
+ 'variant' => $variant,
+ 'contrast' => $contrast,
'success' => $this->option('success'),
'warning' => $this->option('warning'),
'info' => $this->option('info'),
@@ -47,22 +101,27 @@ class SchemeCommand extends Command
]);
if ($result->failed()) {
- $this->components->error(trim($result->errorOutput()) ?: 'Node could not run the scheme generator. Is `node` installed and on the PATH?');
+ $this->components->error($context.(trim($result->errorOutput()) ?: 'Node could not run the scheme generator. Is `node` installed and on the PATH?'));
- return self::FAILURE;
+ return null;
}
try {
- /** @var array{seed: string, variant: string, spec: string, contrast: float, light: array, dark: array} $scheme */
- $scheme = json_decode($result->output(), true, flags: JSON_THROW_ON_ERROR);
+ return json_decode($result->output(), true, flags: JSON_THROW_ON_ERROR);
} catch (JsonException) {
- $this->components->error('The scheme generator answered with something other than JSON.');
+ $this->components->error($context.'The scheme generator answered with something other than JSON.');
- return self::FAILURE;
+ return null;
}
+ }
+ /**
+ * @param array $scheme
+ */
+ protected function write(Filesystem $files, string $stylesheet, string $data, string $css, array $scheme): int
+ {
$files->ensureDirectoryExists(dirname($stylesheet));
- $files->put($stylesheet, $this->stylesheet($scheme));
+ $files->put($stylesheet, $css);
$files->put($data, json_encode($scheme, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)."\n");
$this->components->info("Wrote {$stylesheet} and {$data}.");
@@ -82,9 +141,7 @@ class SchemeCommand extends Command
$scheme['contrast'] != 0 ? ' --contrast='.$scheme['contrast'] : '',
);
- $block = fn (array $roles): string => collect($roles)
- ->map(fn (string $hex, string $role): string => " --md-sys-color-{$role}: {$hex};")
- ->implode("\n");
+ $blocks = $this->blocks([':root', "[data-theme='light']"], ["[data-theme='dark']"], $scheme);
return <<, dark: array}> $profiles
+ */
+ protected function profilesStylesheet(array $profiles, string $default): string
+ {
+ $list = collect($profiles)
+ ->map(fn (array $profile, string $name): string => sprintf(
+ ' * %-12s %s, %s%s',
+ $name,
+ $profile['seed'],
+ $profile['variant'],
+ $profile['contrast'] != 0 ? ', contrast '.$profile['contrast'] : '',
+ ))
+ ->implode("\n");
+
+ $css = <<blocks([':root', "[data-theme='light']"], ["[data-theme='dark']"], $profiles[$default]);
+
+ foreach ($profiles as $name => $profile) {
+ $css .= "\n".$this->blocks(
+ ["[data-scheme='{$name}']", "[data-scheme='{$name}'][data-theme='light']", "[data-scheme='{$name}'] [data-theme='light']"],
+ ["[data-scheme='{$name}'][data-theme='dark']", "[data-scheme='{$name}'] [data-theme='dark']"],
+ $profile,
+ );
+ }
+
+ return $css;
+ }
+
+ /**
+ * A light and a dark block of roles under the given selectors.
+ *
+ * @param list $light
+ * @param list $dark
+ * @param array{light: array, dark: array} $scheme
+ */
+ protected function blocks(array $light, array $dark, array $scheme): string
+ {
+ $roles = fn (array $roles): string => collect($roles)
+ ->map(fn (string $hex, string $role): string => " --md-sys-color-{$role}: {$hex};")
+ ->implode("\n");
+
+ return implode(",\n", $light)." {\n color-scheme: light;\n\n".$roles($scheme['light'])."\n}\n\n"
+ .implode(",\n", $dark)." {\n color-scheme: dark;\n\n".$roles($scheme['dark'])."\n}\n";
+ }
}
diff --git a/src/Support/Scheme.php b/src/Support/Scheme.php
index 7918ce0d..a4fdc900 100644
--- a/src/Support/Scheme.php
+++ b/src/Support/Scheme.php
@@ -2,9 +2,14 @@
namespace NoNameWeb\LivewireMaterial\Support;
+use Closure;
+use Illuminate\Support\Str;
+use Throwable;
+
/**
* The colour scheme as data, for the places CSS custom properties cannot reach: a mail client
- * resolves none, and an error page whose build is missing has no stylesheet to declare them.
+ * resolves none, an error page whose build is missing has no stylesheet to declare them, and the
+ * head script has to name the active colour profile before the stylesheet applies.
*
* The data is the JSON `php artisan material:scheme` writes beside the stylesheet
* (`livewire-material.scheme`, resources/css/material-scheme.json by default). Without that
@@ -13,18 +18,51 @@ namespace NoNameWeb\LivewireMaterial\Support;
* the role existed) is taken from the default, and a value that is not a #rrggbb hex is
* refused, so nothing but a colour ever reaches a stylesheet.
*
- * Read on every call and never kept: a regenerated scheme applies at once, and a long-running
- * worker holds nothing.
+ * A file generated from `livewire-material.profiles` holds every profile under `profiles`, its
+ * default under `default`, and the default's roles at the top level as a single scheme does. Which
+ * profile is active is the application's to say, through resolveProfileUsing(); the resolver is
+ * asked on every call, and a name it gives that is not in the file — or a resolver that throws, as
+ * one reading a database may while an error page for that very database renders — falls back to
+ * the file's default.
+ *
+ * Read on every call and never kept: a regenerated scheme or a newly chosen profile applies at
+ * once, and a long-running worker holds nothing but the resolver itself.
*/
class Scheme
{
/**
+ * @var (Closure(): ?string)|null
+ */
+ protected static ?Closure $profileResolver = null;
+
+ /**
+ * Name the active colour profile with the given closure, asked each time a colour is drawn.
+ *
+ * @param (Closure(): ?string)|null $resolver
+ */
+ public static function resolveProfileUsing(?Closure $resolver): void
+ {
+ static::$profileResolver = $resolver;
+ }
+
+ /**
+ * The roles to draw: the given profile's, the active profile's, or the single scheme's.
+ *
* @return array{light: array, dark: array}
*/
- public static function load(?string $path = null): array
+ public static function load(?string $path = null, ?string $profile = null): array
{
- $default = static::read(dirname(__DIR__, 2).'/resources/css/tokens/scheme.json');
- $scheme = static::read($path ?? (string) config('livewire-material.scheme'));
+ $data = static::data($path);
+ $profiles = static::profilesFrom($data);
+
+ if ($profiles !== []) {
+ $name = $profile !== null && isset($profiles[$profile]) ? $profile : static::activeFrom($data, $profiles);
+
+ return ['light' => $profiles[$name]['light'], 'dark' => $profiles[$name]['dark']];
+ }
+
+ $default = static::defaultScheme();
+ $scheme = ['light' => static::roles($data['light'] ?? null), 'dark' => static::roles($data['dark'] ?? null)];
return [
'light' => [...$default['light'], ...$scheme['light']],
@@ -37,22 +75,102 @@ class Scheme
*
* @return array
*/
- public static function light(?string $path = null): array
+ public static function light(?string $path = null, ?string $profile = null): array
{
- return static::load($path)['light'];
+ return static::load($path, $profile)['light'];
}
/**
- * @return array{light: array, dark: array}
+ * The generated colour profiles, in the order they were configured; empty for a single scheme.
+ *
+ * @return array, dark: array}>
*/
- protected static function read(string $path): array
+ public static function profiles(?string $path = null): array
{
+ return static::profilesFrom(static::data($path));
+ }
+
+ /**
+ * The active profile's name, or null for a single scheme.
+ */
+ public static function profile(?string $path = null): ?string
+ {
+ $data = static::data($path);
+ $profiles = static::profilesFrom($data);
+
+ return $profiles === [] ? null : static::activeFrom($data, $profiles);
+ }
+
+ /**
+ * @return array
+ */
+ protected static function data(?string $path): array
+ {
+ $path ??= (string) config('livewire-material.scheme');
$data = is_file($path) ? json_decode((string) file_get_contents($path), true) : null;
- return [
- 'light' => static::roles($data['light'] ?? null),
- 'dark' => static::roles($data['dark'] ?? null),
- ];
+ return is_array($data) ? $data : [];
+ }
+
+ /**
+ * @param array $data
+ * @return array, dark: array}>
+ */
+ protected static function profilesFrom(array $data): array
+ {
+ if (! is_array($data['profiles'] ?? null)) {
+ return [];
+ }
+
+ $default = static::defaultScheme();
+ $profiles = [];
+
+ foreach ($data['profiles'] as $name => $profile) {
+ if (! is_string($name) || preg_match('/^[a-z0-9-]+$/', $name) !== 1 || ! is_array($profile)) {
+ continue;
+ }
+
+ $profiles[$name] = [
+ 'label' => is_string($profile['label'] ?? null) ? $profile['label'] : Str::headline($name),
+ 'light' => [...$default['light'], ...static::roles($profile['light'] ?? null)],
+ 'dark' => [...$default['dark'], ...static::roles($profile['dark'] ?? null)],
+ ];
+ }
+
+ return $profiles;
+ }
+
+ /**
+ * @param array $data
+ * @param non-empty-array $profiles
+ */
+ protected static function activeFrom(array $data, array $profiles): string
+ {
+ try {
+ $resolved = static::$profileResolver ? (static::$profileResolver)() : null;
+ } catch (Throwable) {
+ $resolved = null;
+ }
+
+ foreach ([$resolved, $data['default'] ?? null] as $candidate) {
+ if (is_string($candidate) && isset($profiles[$candidate])) {
+ return $candidate;
+ }
+ }
+
+ return (string) array_key_first($profiles);
+ }
+
+ /**
+ * The package's own scheme, which fills any role a file lacks.
+ *
+ * @return array{light: array, dark: array}
+ */
+ protected static function defaultScheme(): array
+ {
+ $data = json_decode((string) file_get_contents(dirname(__DIR__, 2).'/resources/css/tokens/scheme.json'), true);
+
+ return ['light' => static::roles($data['light'] ?? null), 'dark' => static::roles($data['dark'] ?? null)];
}
/**
diff --git a/tests/Browser/ColourProfilesTest.php b/tests/Browser/ColourProfilesTest.php
new file mode 100644
index 00000000..cffd0ac2
--- /dev/null
+++ b/tests/Browser/ColourProfilesTest.php
@@ -0,0 +1,88 @@
+ workbench_path('resources/css/material-scheme.json')]);
+
+ $this->profiles = json_decode(file_get_contents(workbench_path('resources/css/material-scheme.json')), true)['profiles'];
+});
+
+afterEach(function () {
+ Scheme::resolveProfileUsing(null);
+});
+
+/**
+ * A #rrggbb hex as the rgb() a computed style reports.
+ */
+function rgb(string $hex): string
+{
+ [$red, $green, $blue] = sscanf($hex, '#%02x%02x%02x');
+
+ return "rgb({$red}, {$green}, {$blue})";
+}
+
+/**
+ * The page's primary colour role, as resolves it.
+ */
+function pagePrimary(): string
+{
+ return "getComputedStyle(document.documentElement).getPropertyValue('--md-sys-color-primary').trim()";
+}
+
+function profilesReady(mixed $page): mixed
+{
+ return $page->waitForEvent('networkidle')
+ ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
+}
+
+it('draws each profile in light and dark, and the default without the attribute', function () {
+ $page = profilesReady(visit('/material/colour')->inLightMode())
+ ->assertScript("document.documentElement.getAttribute('data-scheme') === 'baseline'")
+ ->assertScript(pagePrimary()." === '{$this->profiles['baseline']['light']['primary']}'");
+
+ $page->script("document.documentElement.setAttribute('data-scheme', 'teal')");
+ $page->assertScript(pagePrimary()." === '{$this->profiles['teal']['light']['primary']}'");
+
+ $page->script("document.documentElement.setAttribute('data-theme', 'dark')");
+ $page->assertScript(pagePrimary()." === '{$this->profiles['teal']['dark']['primary']}'")
+ // A panel that sets its own theme keeps the page's profile.
+ ->assertScript("getComputedStyle(document.querySelector('#colour [data-theme=\"light\"] .bg-primary')).backgroundColor === '".rgb($this->profiles['teal']['light']['primary'])."'");
+
+ $page->script("document.documentElement.removeAttribute('data-scheme')");
+ $page->assertScript(pagePrimary()." === '{$this->profiles['baseline']['dark']['primary']}'")
+ ->assertNoJavaScriptErrors();
+});
+
+it('previews a profile from the picker and the showcase menu, and keeps it through wire:navigate', function () {
+ $page = profilesReady(visit('/material/colour')->inLightMode());
+
+ $page->click('#colour [data-scheme-option="rose"]')
+ ->assertScript("document.documentElement.getAttribute('data-scheme') === 'rose'")
+ ->assertScript(pagePrimary()." === '{$this->profiles['rose']['light']['primary']}'")
+ ->assertScript("window.eval(\"Alpine.store('theme').scheme\") === 'rose'");
+
+ $page->click('[data-test="showcase-profiles"] [aria-haspopup="menu"]')
+ ->click('[data-scheme-preview="teal"]')
+ ->assertScript("document.documentElement.getAttribute('data-scheme') === 'teal'");
+
+ $page->click('[data-navigation-rail-panel] a[href$="/material/buttons"]')
+ ->assertScript("location.pathname.endsWith('/material/buttons')")
+ ->assertScript("document.documentElement.getAttribute('data-scheme') === 'teal'")
+ ->assertNoJavaScriptErrors();
+});
+
+it('paints the profile the application resolves from the first frame', function () {
+ Scheme::resolveProfileUsing(fn (): string => 'rose');
+
+ profilesReady(visit('/material')->inDarkMode())
+ ->assertScript("document.documentElement.getAttribute('data-scheme') === 'rose'")
+ ->assertScript(pagePrimary()." === '{$this->profiles['rose']['dark']['primary']}'");
+});
diff --git a/tests/Feature/Components/SchemePickerTest.php b/tests/Feature/Components/SchemePickerTest.php
new file mode 100644
index 00000000..dea189fc
--- /dev/null
+++ b/tests/Feature/Components/SchemePickerTest.php
@@ -0,0 +1,60 @@
+path = sys_get_temp_dir().'/scheme-picker-'.uniqid().'.json';
+ File::put($this->path, json_encode([
+ 'default' => 'indigo',
+ 'profiles' => [
+ 'indigo' => ['label' => 'Indigo', 'light' => ['primary' => '#4f46e5', 'secondary' => '#5b5d72', 'tertiary' => '#77536d'], 'dark' => ['primary' => '#c0c1ff', 'secondary' => '#c4c5dd', 'tertiary' => '#e6bad7']],
+ 'teal' => ['label' => 'Teal', 'light' => ['primary' => '#00897b', 'secondary' => '#4a635f', 'tertiary' => '#456179'], 'dark' => ['primary' => '#80cbc4', 'secondary' => '#b1ccc6', 'tertiary' => '#adcae5']],
+ ],
+ ]));
+ config(['livewire-material.scheme' => $this->path]);
+});
+
+afterEach(function () {
+ File::delete($this->path);
+});
+
+it('draws a radio per generated profile, bound, named and previewing on change', function () {
+ $html = (string) $this->blade('Colour profile ')
+ ->toContain('Applies after saving')
+ ->toContain('data-scheme-option="indigo"')
+ ->toContain('data-scheme-option="teal"')
+ ->toMatch('/toContain('x-on:change="$store.theme.previewScheme($event.target.value)"')
+ ->toContain('>Teal')
+ ->toContain('style="--swatch-light: #00897b; --swatch-dark: #80cbc4"');
+});
+
+it('keeps its inline styles to the scheme file\'s checked colours', function () {
+ File::put($this->path, json_encode([
+ 'default' => 'indigo',
+ 'profiles' => ['indigo' => ['label' => 'Indigo', 'light' => ['primary' => 'red; background: url(x)'], 'dark' => []]],
+ ]));
+
+ $html = (string) $this->blade('