Andreas Reinhold / reiniandClaude Opus 5
247c596c3a
An over-engineering audit of the whole tree, applied in five reviewed batches. Behaviour stays the same except where UPGRADE.md says otherwise. PHP: the showcase and error-page stylesheets are prebuilt into resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import (first occurrence kept, the order an application's build gives), instead of Stylesheets::bundle() inlining imports on every request; only the import walk DesignGuard needs stays. SchemeStylesheet::withProfiles() replaces three copies of the scheme-plus-profiles loop, material:scheme leaves spec and contrast checks to the node script that already made them, and the error page's scheme cache, the hashed view namespace, the translations path with no lang/ folder and DesignGuard's 1.x-name hints are gone. JS: the androidx shape port progress.js and both bin scripts each carried lives once in resources/js/shapes.js (the generated SVGs are unchanged); util.js holds ringIndex(), ms(), reopenGuard() and remember(), which were written out several times; listeners are released through AbortController; tooltip.js's hoverPopover() serves the rich tooltip too. CSS: every rule for an element inside the navigation rail queries `--md-navigation-rail-value` instead of repeating the seven collapsed conditions under five media branches; badge, alert, progress, slider and button read one non-inheriting colour-role table (components/color.css); the dialog chrome, the submenu's popover chrome, the chip's state layer and touch target, and the visually-hidden inputs use the shared rules they copied; foundation/tokens.css is folded into foundation.css. Views: Support\Field and Support\Link replace the error-key, bound-value and link-attribute blocks copied into the fields and link components; the timepicker period group, the menu filter and the showcase head are partials; the datepicker's steppers and entry fields are loops; component docblocks no longer restate SKILL.md. Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces four per-group files, DesignGuardTest and the layout-component tests use datasets, browser tests share one ready() helper, CSS parsing lives in ComponentStylesheet alone. docs/audits and the finding IDs citing it are removed, as are pestphp/pest-plugin-laravel, the unused composer scripts and check:font; the lint job runs in the feature job, which now installs node packages so the prebuilt-stylesheet staleness test runs in CI. Feature suite 1177 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
91 lines
3.2 KiB
CSS
91 lines
3.2 KiB
CSS
/*
|
|
* <x-progress>: M3 Expressive's progress indicator, drawn on the server for its first frame and
|
|
* frame by frame in the browser after.
|
|
*
|
|
* ProgressIndicatorTokens, LinearProgressIndicatorTokens, CircularProgressIndicatorTokens (androidx
|
|
* Compose Material 3, Apache-2.0): 4px stroke (`data-md-thick` 8px), linear 4px tall (8px thick,
|
|
* 10px `data-md-wavy`, 14px wavy thick — the container grows by the extra stroke, keeping the
|
|
* wave's own height put), circular 40px (44px thick, 48px wavy, 52px wavy thick). `data-md-color`
|
|
* is the active indicator's `color` and the track's `stroke`; the track is secondary-container for
|
|
* primary and secondary, and the colour's own container otherwise.
|
|
*
|
|
* Linear mirrors in a right-to-left document unconditionally — M3's own rule for this indicator,
|
|
* not the `mirror-rtl` a caller opts an icon into. The sizing here is a default only: an
|
|
* application's own unlayered class always outranks `material.components`, so an `inline-size` or
|
|
* `block-size` of its own narrows or grows the indicator.
|
|
*
|
|
* resources/js/progress.js reads and writes `data-md-value`, `data-md-max`, `data-md-circular`,
|
|
* `data-md-wavy` and `data-md-thick` — ProgressIndicator.kt, WavyProgressIndicator.kt and its
|
|
* Linear/CircularWavyProgressModifiers, ported at commit 27cf9a7d5788aa0f5f2d8b6699ce279560daf326
|
|
* — and draws every frame straight onto the SVG's own attributes; nothing here reads a class or
|
|
* runs a transition.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './color.css';
|
|
|
|
@layer material.components {
|
|
[data-md-progress] {
|
|
color: var(--md-color, var(--md-sys-color-primary));
|
|
stroke: var(--md-container, var(--md-sys-color-secondary-container));
|
|
|
|
& > svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular]) {
|
|
display: block;
|
|
width: 100%;
|
|
height: 4px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular]):is([dir='rtl'], [dir='rtl'] *) {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-thick] {
|
|
height: 8px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-wavy] {
|
|
height: 10px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-wavy][data-md-thick] {
|
|
height: 14px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular] {
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
vertical-align: middle;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-thick] {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-wavy] {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-wavy][data-md-thick] {
|
|
width: 52px;
|
|
height: 52px;
|
|
}
|
|
|
|
/* Every other hue comes from the shared colour-role table (color.css): its own `primary` entry
|
|
is plain primary-container, so the one hue this file draws differently keeps its override. */
|
|
[data-md-progress][data-md-color='primary'] {
|
|
stroke: var(--md-sys-color-secondary-container);
|
|
}
|
|
}
|