noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give success, warning and info the 2025 spec and three contrast levels

Browse Source 
The three state colours are DynamicColors on their own tonal palette now, built
exactly as Google builds error/on-error/error-container/on-error-container in both
specs, so the scheme's contrast level, dark tones, spec version and platform reach
them as they reach every other role; --harmonize (and a profile's harmonize) pulls
each source towards the seed, off by default. material:scheme also writes M3's
medium (0.5) and high (1.0) levels for both themes and every profile, keyed on
data-contrast and never on a media query, and --contrast now moves the standard
block alone. Scheme::load() takes the level; the mail theme stays on standard.
Plan: docs/plans/material-3-alignment.md, steps 6 and 7 (core C1, C2, C15).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 05:30:48 +02:00
co-authored by Claude Fable 5.1
parent b1fc0c9cfa
commit 4263982369
11 changed files with 3697 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/SchemeCommandTest.php
+166 -1
View File
@@ -3,6 +3,37 @@
use Illuminate\Support\Facades\File;
use Illuminate\Support\Str;
/**
* The hue of a #rrggbb colour, in degrees: what harmonisation moves.
*/
function schemeHue(string $hex): float
{
[$r, $g, $b] = array_map(fn (string $channel): float => hexdec($channel) / 255, str_split(ltrim($hex, '#'), 2));
$chroma = max($r, $g, $b) - min($r, $g, $b);
if ($chroma === 0.0) {
return 0.0;
}
$sector = match (max($r, $g, $b)) {
$r => fmod(($g - $b) / $chroma, 6),
$g => (($b - $r) / $chroma) + 2,
default => (($r - $g) / $chroma) + 4,
};
return fmod(($sector * 60) + 360, 360);
}
/**
* How far apart two colours are on the hue circle, the short way round.
*/
function schemeHueDistance(string $one, string $other): float
{
$apart = abs(schemeHue($one) - schemeHue($other));
return min($apart, 360 - $apart);
}
beforeEach(function () {
$this->stylesheet = sys_get_temp_dir().'/material-scheme-'.Str::random(8).'.css';
$this->data = Str::replaceLast('.css', '.json', $this->stylesheet);
@@ -23,6 +54,8 @@ it('writes the scheme as a stylesheet and as data', function () {
->seed->toBe('#4f46e5')
->variant->toBe('tonal-spot')
->spec->toBe('2025')
->harmonize->toBeFalse()
->and($scheme['contrast']['standard'])->toBe(0)
->and(array_keys($scheme['dark']))->toEqual(array_keys($scheme['light']))
->and($scheme['light'])->toHaveKeys(['primary', 'on-primary', 'tertiary-container', 'surface-container-high', 'outline-variant', 'success', 'on-warning-container', 'info-container'])
->and($scheme['light']['surface'])->not->toBe($scheme['dark']['surface'])
@@ -41,6 +74,137 @@ it('writes the scheme as a stylesheet and as data', function () {
expect($stylesheet)->toContain('php artisan material:scheme "#4f46e5" --variant=tonal-spot');
});
it('writes M3\'s three contrast levels for both themes, keyed on data-contrast', function () {
$this->artisan('material:scheme', ['seed' => '#4f46e5', '--output' => $this->stylesheet])
->assertSuccessful();
$scheme = json_decode(File::get($this->data), true);
$stylesheet = File::get($this->stylesheet);
// The standard level keeps the 1.x shape at the top; the other two sit under `contrast`.
expect(array_keys($scheme['contrast']))->toBe(['standard', 'medium', 'high'])
->and(array_keys($scheme['contrast']['medium']['light']))->toEqual(array_keys($scheme['light']))
->and(array_keys($scheme['contrast']['high']['dark']))->toEqual(array_keys($scheme['dark']));
foreach (['medium', 'high'] as $level) {
foreach (['light' => "[data-contrast='{$level}'] [data-theme='light'] {", 'dark' => "[data-contrast='{$level}'] [data-theme='dark'] {"] as $theme => $selector) {
$block = Str::of($stylesheet)->after($selector)->before('}')->toString();
expect($block)->toContain("color-scheme: {$theme};");
foreach ($scheme['contrast'][$level][$theme] as $role => $hex) {
expect($block)->toContain("--md-sys-color-{$role}: {$hex};");
}
}
expect($stylesheet)
->toContain("[data-contrast='{$level}'],\n[data-contrast='{$level}'][data-theme='light'],")
->toContain("[data-contrast='{$level}'][data-theme='dark'],");
}
// Every level differs from the one below it, in both themes and for the state colours too.
foreach (['light', 'dark'] as $theme) {
foreach (['on-surface-variant', 'outline', 'success', 'info', 'success-container'] as $role) {
expect($scheme['contrast']['medium'][$theme][$role])
->not->toBe($scheme[$theme][$role], "medium {$theme} {$role}")
->not->toBe($scheme['contrast']['high'][$theme][$role], "high {$theme} {$role}");
}
// The state colours are dynamic colours now, so the level reaches them as it does a
// built-in role. (A container whose tone already clears the level's ratio stays put,
// exactly as error's does — hence the pairs rather than every one of the four.)
foreach (['success', 'warning', 'info'] as $state) {
foreach ([$state, "on-{$state}", "on-{$state}-container"] as $role) {
expect($scheme['contrast']['high'][$theme][$role])->not->toBe($scheme[$theme][$role], "high {$theme} {$role}");
}
}
}
expect($stylesheet)->not->toContain('prefers-contrast');
});
it('puts a level\'s nested light blocks after the dark ones of the level below', function () {
$this->artisan('material:scheme', ['seed' => '#4f46e5', '--output' => $this->stylesheet])
->assertSuccessful();
$stylesheet = File::get($this->stylesheet);
$at = fn (string $selector): int => strpos($stylesheet, $selector);
// A light panel inside a dark high-contrast page: its rule carries one attribute more than
// the plain dark block and stands after it, so it wins on specificity and on order.
expect($at("[data-theme='dark'] {"))->toBeLessThan($at("[data-contrast='high'] [data-theme='light'] {"))
->and($at("[data-contrast='medium'] [data-theme='light'] {"))->toBeLessThan($at("[data-contrast='medium'][data-theme='dark'],"))
->and($at("[data-contrast='medium'][data-theme='dark'],"))->toBeLessThan($at("[data-contrast='high'],"));
});
it('generates the levels for every profile, under its own data-scheme', function () {
config(['livewire-material.profiles' => [
'indigo' => ['seed' => '#4f46e5', 'variant' => 'vibrant'],
'teal' => ['seed' => '#00897b', 'variant' => 'vibrant'],
]]);
$this->artisan('material:scheme', ['--output' => $this->stylesheet])->assertSuccessful();
$scheme = json_decode(File::get($this->data), true);
$stylesheet = File::get($this->stylesheet);
foreach ($scheme['profiles'] as $name => $profile) {
foreach (['medium', 'high'] as $level) {
$selector = "[data-scheme='{$name}'][data-contrast='{$level}'] [data-theme='dark'] {";
expect(Str::of($stylesheet)->after($selector)->before('}')->toString())
->toContain("--md-sys-color-primary: {$profile['contrast'][$level]['dark']['primary']};")
->and($profile['contrast'][$level]['light']['success'])->not->toBe($profile['light']['success']);
}
}
// The default profile's plain blocks come first, its levels next, then every profile's.
expect(strpos($stylesheet, "[data-contrast='high'],"))->toBeLessThan(strpos($stylesheet, "[data-scheme='indigo'],"));
});
it('refuses a standard contrast level at or above the medium one', function () {
$this->artisan('material:scheme', ['seed' => '#4f46e5', '--contrast' => '0.5', '--output' => $this->stylesheet])
->expectsOutputToContain('Medium (0.5) and high (1) are always generated')
->assertFailed();
expect(File::exists($this->stylesheet))->toBeFalse();
config(['livewire-material.profiles' => ['indigo' => ['seed' => '#4f46e5', 'contrast' => 1]]]);
$this->artisan('material:scheme', ['--output' => $this->stylesheet])
->expectsOutputToContain('Profile "indigo": The contrast level 1')
->assertFailed();
});
it('keeps a standard level below medium, and records it in the header', function () {
$this->artisan('material:scheme', ['seed' => '#4f46e5', '--contrast' => '0.3', '--output' => $this->stylesheet])
->assertSuccessful();
$scheme = json_decode(File::get($this->data), true);
expect($scheme['contrast']['standard'])->toBe(0.3)
->and($scheme['light']['primary'])->not->toBe($scheme['contrast']['medium']['light']['primary'])
->and(File::get($this->stylesheet))->toContain('php artisan material:scheme "#4f46e5" --variant=tonal-spot --contrast=0.3');
});
it('harmonises the state colours towards the seed only when asked', function () {
$this->artisan('material:scheme', ['seed' => '#4f46e5', '--output' => $this->stylesheet])->assertSuccessful();
$plain = json_decode(File::get($this->data), true);
$this->artisan('material:scheme', ['seed' => '#4f46e5', '--harmonize' => true, '--output' => $this->stylesheet])->assertSuccessful();
$harmonized = json_decode(File::get($this->data), true);
expect($harmonized['harmonize'])->toBeTrue()
->and($plain['harmonize'])->toBeFalse()
->and(File::get($this->stylesheet))->toContain('--variant=tonal-spot --harmonize');
foreach (['success', 'warning', 'info'] as $state) {
expect(schemeHueDistance($harmonized['light'][$state], '#4f46e5'))
->toBeLessThan(schemeHueDistance($plain['light'][$state], '#4f46e5'), "{$state} moved towards the seed")
->and($harmonized['contrast']['high']['dark'][$state])->not->toBe($plain['contrast']['high']['dark'][$state]);
}
});
it('generates a different scheme per variant', function () {
$this->artisan('material:scheme', ['seed' => '#4f46e5', '--variant' => 'vibrant', '--output' => $this->stylesheet])
->assertSuccessful();
@@ -177,7 +341,8 @@ it('takes a profile\'s own spec and state colours, and the command\'s for a prof
->and($profiles['expressive'])->spec->toBe('2025')
->and($profiles['expressive']['dark']['primary'])->not->toBe('#00e297')
->and($profiles['expressive']['dark']['success'])->not->toBe('#2ce19c')
->and($profiles['expressive']['dark']['info'])->toBe('#80cfff')
// The state colours follow the spec now, so the same source is not the same colour.
->and($profiles['expressive']['dark']['info'])->not->toBe('#80cfff')
->and(File::get($this->stylesheet))
->toContain('(spec 2025)')
->toMatch('/ \* classic\s+#00bc7d, vibrant, spec 2021\n/')