Allow legitimate linear easing and a role-coloured box-shadow ring

Check (iii) flagged two shapes the package's own stylesheets (and their
stylesheet tests) already treat as fine: `linear`, M3's own easing for
continuous motion (an indeterminate progress indicator's rotation), and a
box-shadow that is only an inset or outline-style ring — `[inset] 0 0 0
<n>px` in a `var(--md-sys-color-*)` role, or one `color-mix()`-dimmed for a
disabled ring — the shape a focused field's edge or a day's "current"
outline draws. A blurred shadow or one with a literal colour is still
reported.

Plan step 42 (Phase F), Part B.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 09:31:47 +02:00
co-authored by Claude Sonnet 5
parent b243222e26
commit 3d9e494e22
3 changed files with 57 additions and 2 deletions
+11
View File
@@ -540,6 +540,17 @@ it('finds every literal design value and off-scale media query in the applicatio
]);
});
it('leaves a box-shadow ring in a colour role alone, but still reports a blurred or literal-coloured one', function () {
$violations = fixtureRelative(DesignGuard::scan(realpath(GUARD_FIXTURES.'/shadows/rings.css'))->violations());
expect($violations)->toBe([
'shadows/rings.css:16 literal colour `rgba(0, 0, 0, 0.2)` — use `var(--md-sys-color-*)`',
'shadows/rings.css:16 literal shadow `box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)` — use `var(--md-sys-elevation-*)`',
'shadows/rings.css:20 literal colour `#000` — use `var(--md-sys-color-*)`',
'shadows/rings.css:20 literal shadow `box-shadow: inset 0 0 4px 1px #000` — use `var(--md-sys-elevation-*)`',
]);
});
it('ignores the generated material-scheme.css, by name and by its generated header, wherever it sits among the scanned paths', function () {
$withScheme = fixtureRelative(DesignGuard::scan(realpath(GUARD_FIXTURES.'/app-css'))->violations());
$withoutScheme = fixtureRelative(DesignGuard::scan(realpath(GUARD_FIXTURES.'/app-css/app.css'))->violations());
@@ -0,0 +1,21 @@
/* A ring in a colour role (a focused field's edge, a day's "current" outline), and the two shapes
check (iii) still reports: a blurred shadow, and one with a literal colour. */
.ring-outline {
box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
}
.ring-secondary {
box-shadow: 0 0 0 3px var(--md-sys-color-secondary);
}
.ring-disabled {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
.literal-shadow {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.blurred-ring {
box-shadow: inset 0 0 4px 1px #000;
}