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
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 14:35:49 +02:00
co-authored by Claude Opus 5
parent 7798352cfc
commit fb42f004b1
22 changed files with 2006 additions and 47 deletions
+132 -14
View File
@@ -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<string, string>, dark: array<string, string>}
*/
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<string, string>
*/
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<string, string>, dark: array<string, string>}
* The generated colour profiles, in the order they were configured; empty for a single scheme.
*
* @return array<string, array{label: string, light: array<string, string>, dark: array<string, string>}>
*/
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<mixed>
*/
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<mixed> $data
* @return array<string, array{label: string, light: array<string, string>, dark: array<string, string>}>
*/
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<mixed> $data
* @param non-empty-array<string, mixed> $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<string, string>, dark: array<string, string>}
*/
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)];
}
/**