Style the body only on the error page

Plan step 36 review of a8c2d88f. error-page.css drew a bare `body`, which
components.css already bundles into every Workbench page and step 37's
all.css would put in every application page: each would take the error
page's background, margin and system font. The rule now matches
body:has(> [data-md-error-page]); the fallback stylesheet, inlined into
the error page alone, keeps its own. A test in the containment harness
and in ErrorPagesTest rejects an unscoped html, body, dialog or :root.

The body's system font stack is gone: the old `font-sans` was the brand
typeface (tokens/theme.css), which the page inherits from the
foundation's html rule, and the header's claim otherwise was wrong. The
shape's slow turn, which moved from the view's inline style into the
stylesheet, is back in the fallback so the no-build page still turns.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 22:06:56 +02:00
co-authored by Claude Opus 5
parent cab8d804a5
commit a764fddf27
4 changed files with 37 additions and 17 deletions
+4 -1
View File
@@ -61,7 +61,8 @@ class ErrorPage
/**
* A stylesheet for a page without its build: the application's scheme in both themes, a
* system font, and the layout's `data-md-error-*` hooks drawn to match the built version
* (resources/css/components/error-page.css). Still hand-built, not `Stylesheets::bundle()` —
* (resources/css/components/error-page.css), the shape's slow turn included. Inlined into the
* error page alone, so its `body` rule needs no scope. Still hand-built, not `Stylesheets::bundle()` —
* plan step 40 replaces this method's own body, once the design guard exists to catch a hook
* the two drift apart on.
*/
@@ -90,6 +91,8 @@ class ErrorPage
[data-md-error-actions] :is(a, button) { display: inline-flex; align-items: center; height: 3.5rem; padding: 0 1.5rem; border: 0; border-radius: 9999px; background: none; color: var(--md-sys-color-primary); font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.5rem; text-decoration: none; cursor: pointer; }
[data-md-error-actions] > :first-child { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
[data-md-error-actions] :is(a, button):focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
@keyframes material-error-turn { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: no-preference) { [data-md-error-shape] { animation: material-error-turn 60s linear infinite; } }
CSS);
}
}