Andreas Reinhold / reiniandClaude Opus 5
fb7007c976
tests / feature (8.4) (push) Successful in 2m0s
tests / feature (8.5) (push) Successful in 2m0s
tests / browser (chrome, chromium) (push) Failing after 8m3s
tests / browser (firefox, firefox) (push) Failing after 12m58s
tests / browser (safari, webkit) (push) Failing after 13m8s
Tailwind left the stack in 2.0.0, but the package still carried about 330 mentions of it. What the guard's Tailwind detection protected — a class that compiles to nothing — is now protected by a check that does not care where a dead class came from. DesignGuard: about 500 lines of Tailwind tables, scales, palettes and "2.0.0 replacement" hints give way to one check — a class a view or PHP file writes that neither the application's stylesheets nor the package's own declare. It catches a utility of any framework, a typo and a class whose rules were deleted alike, so it also found two classes ReStride draws nothing with. A stylesheet has to be in reach for it: the `.css` files among the scanned paths, or what the `missingStylesheets()` entry imports. The class reader no longer mistakes an array index for a class list (`$block['base']`), and it reads the array a class helper is given, where it read nothing before. The package's own three Tailwind self-guards go with it. Only their one unique check stays, as a test of its own: every `matchMedia` width in resources/js is an M3 breakpoint. The pagination views are `material.blade.php` and `simple-material.blade.php`; only Laravel's and Livewire's default theme names ever made them `tailwind`. The provider sets `Paginator`'s default views and switches `livewire.pagination_theme` to `material` when it is still Livewire's own default, so no application can forget the config; a theme an application chose, and a component's own `$paginationTheme` or `paginationView()`, still win. The rest is prose: the layer-order guidance for an application that still builds Tailwind, the Tailwind wording in the README, the Boost guidelines and the development skill, and about 25 "this used to be a Tailwind utility" comments, along with every "plan step NN" pointer into a gitignored folder. The reset keeps its credit, and NOTICE now carries it too. Feature suite 1159 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
148 lines
5.5 KiB
CSS
148 lines
5.5 KiB
CSS
/*
|
|
* `errors::minimal`: the layout the package's 403/404/419/429/500/503 pages and the framework's
|
|
* own 401/402 (which extend this layout, `src/Support/ErrorPage.php`'s docblock) render through.
|
|
* A page's own `@section`s fill `title`, `code`, `headline`, `message`, `shape` and `actions`
|
|
* (`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: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
|
|
* otherwise (its `svg` fills the art box and is coloured here,
|
|
* since <x-shape size> only takes a fixed px, not "fill parent")
|
|
* [data-md-error-code] the status, in display type over the shape
|
|
* [data-md-error-headline] what happened
|
|
* [data-md-error-message] one sentence on what to do, only when `headline` is its own
|
|
* section (otherwise `message` doubles as the headline)
|
|
* [data-md-error-actions]
|
|
*
|
|
* The page carries this file itself: `src/Support/ErrorPage.php` inlines it, with its imports, into
|
|
* every error page (`Stylesheets::bundle()`) — beside the application's Vite tags when there is a
|
|
* build (`layoutStyles()`), inside the whole fallback stylesheet when there is none
|
|
* (`fallbackStyles()`) — so an application imports nothing for its error pages. The body is still
|
|
* matched only when it holds the layout (`body:has(> [data-md-error-page])`): an application that
|
|
* imports `all.css` has this file in its bundle beside every other page, where a bare `body` rule
|
|
* would restyle them all.
|
|
*
|
|
* 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 a
|
|
* correct on-primary-container/primary-container contrast pairing; 24px page gutters and the
|
|
* 600px growth of the art and headline follow the same spacing rules as every other M3 surface in
|
|
* the library. `--md-sys-typescale-emphasized-display-lg` is the code's weight and roundedness;
|
|
* the shape's 60s linear turn has no motion token (`--md-sys-motion-*` pairs a duration with a
|
|
* spring for a state change, not an ambient loop) and stays a literal, gated behind
|
|
* `prefers-reduced-motion: no-preference` like every other ambient animation in the library.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './button.css';
|
|
@import './shape.css';
|
|
|
|
@layer material.components {
|
|
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);
|
|
}
|
|
|
|
[data-md-error-page] {
|
|
display: flex;
|
|
min-height: 100dvh;
|
|
max-width: 576px;
|
|
margin-inline: auto;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-inline: var(--md-sys-measurement-space300);
|
|
padding-block: var(--md-sys-measurement-space600);
|
|
text-align: center;
|
|
}
|
|
|
|
[data-md-error-art] {
|
|
position: relative;
|
|
display: grid;
|
|
flex-shrink: 0;
|
|
place-items: center;
|
|
width: 192px;
|
|
height: 192px;
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-error-art] {
|
|
width: 240px;
|
|
height: 240px;
|
|
}
|
|
}
|
|
|
|
[data-md-error-shape] {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
[data-md-error-shape] svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: var(--md-sys-color-primary-container);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
[data-md-error-shape] {
|
|
animation: material-error-turn 60s linear infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes material-error-turn {
|
|
to {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
|
|
[data-md-error-code] {
|
|
position: relative;
|
|
margin: 0;
|
|
color: var(--md-sys-color-on-primary-container);
|
|
font: var(--md-sys-typescale-emphasized-display-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-display-lg-tracking);
|
|
font-variation-settings: 'ROND' 100;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
[data-md-error-headline] {
|
|
margin: var(--md-sys-measurement-space500) 0 0;
|
|
font: var(--md-sys-typescale-headline-md);
|
|
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-error-headline] {
|
|
font: var(--md-sys-typescale-headline-lg);
|
|
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
|
|
}
|
|
}
|
|
|
|
[data-md-error-message] {
|
|
margin: 12px 0 0;
|
|
max-width: 448px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
[data-md-error-actions] {
|
|
display: flex;
|
|
margin-top: var(--md-sys-measurement-space500);
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
}
|