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

Style the body only on the error page

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/error-page.css
+10 -13
View File
@@ -5,7 +5,7 @@
* (`resources/views/error-pages/errors/minimal.blade.php`'s header) — none of that is this file's
* concern, only the geometry and colour of the parts that show them:
*
* body
* body:has(> [data-md-error-page])
* [data-md-error-page]
* [data-md-error-art]
* [data-md-error-shape] an <x-shape>, turning once a minute unless reduced motion asks
@@ -17,17 +17,15 @@
* section (otherwise `message` doubles as the headline)
* [data-md-error-actions]
*
* `body` carries no hook of its own — `src/Support/ErrorPage.php`'s `fallbackStyles()`, the
* stylesheet an application without a Vite build gets instead, styles the bare element the same
* way, so this file matches it rather than inventing a hook the fallback has no equivalent of.
* That fallback still needs updating by hand when this file changes, until step 40 replaces how
* it is built.
* The body is matched only when it holds the layout (`body:has(> [data-md-error-page])`): this
* file sits in the application's bundle beside every other page, where a bare `body` rule would
* restyle them all. `src/Support/ErrorPage.php`'s `fallbackStyles()`, the stylesheet an
* application without a Vite build gets instead, is inlined into the error page alone, so it keeps
* a bare `body`; it still needs updating by hand when this file changes, until step 40 replaces
* how it is built.
*
* The page's own font is a literal system stack, not `var(--md-ref-typeface-brand)`: an error
* page must read correctly before any webfont has had a chance to load (`@font-face` is what the
* fallback path has none of, and this file matches it even on the path that does), and Tailwind's
* `font-sans` this replaces never carried the brand font either
* (`resources/css/tokens/theme.css`'s `--font-sans` is the only utility that does).
* The page's font is the foundation's, `--md-ref-typeface-brand` on `html` (foundation/base.css),
* as the old `font-sans` was; only the fallback, which has no `@font-face`, uses a system stack.
*
* Colours from the roles (`docs/reference/m3/styles.md` § Typography, "Accessibility
* requirements": surface/on-surface); the display code over its primary-container shape is the
@@ -45,12 +43,11 @@
@import './shape.css';
@layer material.components {
body {
body:has(> [data-md-error-page]) {
margin: 0;
min-height: 100dvh;
background-color: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface);
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
}