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>
138 lines
5.4 KiB
CSS
138 lines
5.4 KiB
CSS
/*
|
|
* <x-scheme-picker>: a choice of colour profile as a grid of swatch cards, native radios under
|
|
* them so `wire:model`/`x-model` bind and the arrow keys move the choice.
|
|
*
|
|
* [data-md-scheme-picker] fieldset
|
|
* [data-md-scheme-picker-legend] optional; the fixed label-large/on-surface-variant text
|
|
* classes carry its type and ink
|
|
* [data-md-scheme-picker-options] 2 columns below medium, 4 from it
|
|
* [data-md-scheme-picker-option] the card; md-state-layer for hover and press, a hidden
|
|
* radio inside read with :has() for focus and choice
|
|
* [data-md-scheme-picker-swatches] the overlapping dots
|
|
* [data-md-scheme-picker-swatch] one role's colour, light by default, the dark theme's
|
|
* custom property from [data-theme='dark']
|
|
* [data-md-scheme-picker-label] the profile's name, truncated
|
|
* [data-md-scheme-picker-check] the chosen mark, shown with the radio
|
|
* [data-md-scheme-picker-hint] the hint or, in error, the validation message; ink and
|
|
* type are the fixed text classes on the view
|
|
*
|
|
* The chosen card takes secondary-container over a transparent edge, on the fast effects spring;
|
|
* its focus ring reads off the radio inside with `:has()`, the one thing `md-focus-ring` cannot draw
|
|
* since the real control is the input, not the label — the same refinement group.css keeps for its
|
|
* own segments. `dark:` is `[data-theme='dark']` per an ancestor or the element itself
|
|
* (tokens/theme.css's own `dark` custom variant, `&:where([data-theme='dark'], [data-theme='dark']
|
|
* *)`, reduces to a plain descendant selector here since the swatch itself never carries
|
|
* `data-theme`).
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './icon.css';
|
|
|
|
@layer material.components {
|
|
[data-md-scheme-picker] {
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-md-scheme-picker-legend] {
|
|
margin-block-end: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-scheme-picker-options] {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--md-sys-measurement-space100);
|
|
|
|
@media (width >= 600px) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
[data-md-scheme-picker-option] {
|
|
display: flex;
|
|
min-inline-size: 0;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--md-sys-measurement-space100);
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
padding: 12px;
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
color: var(--md-sys-color-on-surface);
|
|
transition-property: background-color, border-color;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
|
|
&:has(:checked) {
|
|
border-color: transparent;
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
/* Focus lands on the input inside, not the label, so it is read with :has() — the one
|
|
difference md-state-layer's own :focus-visible rule cannot draw (group.css's segments
|
|
keep the same refinement, for the same reason). */
|
|
&:has(:focus-visible) {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
|
|
&::before {
|
|
opacity: var(--md-sys-state-focus-state-layer-opacity);
|
|
}
|
|
}
|
|
|
|
/* The radio stays in the page, for the form, the keyboard and a screen reader —
|
|
`md-visually-hidden` on the element itself (text.css), which outranks this layer
|
|
whatever wins the specificity, `material.text` sitting above `material.components`. */
|
|
}
|
|
|
|
[data-md-scheme-picker-swatches] {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-md-scheme-picker-swatches] > * + * {
|
|
margin-inline-start: -6px;
|
|
}
|
|
|
|
[data-md-scheme-picker-swatch] {
|
|
inline-size: 20px;
|
|
block-size: 20px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--swatch-light);
|
|
box-shadow: 0 0 0 2px var(--md-sys-color-surface-container-low);
|
|
}
|
|
|
|
[data-theme='dark'] [data-md-scheme-picker-swatch] {
|
|
background-color: var(--swatch-dark);
|
|
}
|
|
|
|
[data-md-scheme-picker-option]:has(:checked) [data-md-scheme-picker-swatch] {
|
|
box-shadow: 0 0 0 2px var(--md-sys-color-secondary-container);
|
|
}
|
|
|
|
[data-md-scheme-picker-label] {
|
|
inline-size: 100%;
|
|
padding-inline-end: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
[data-md-scheme-picker-check] {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
inset-inline-end: var(--md-sys-measurement-space100);
|
|
top: var(--md-sys-measurement-space100);
|
|
display: none;
|
|
}
|
|
|
|
[data-md-scheme-picker-option]:has(:checked) [data-md-scheme-picker-check] {
|
|
display: block;
|
|
}
|
|
|
|
[data-md-scheme-picker-hint] {
|
|
margin-block-start: var(--md-sys-measurement-space50);
|
|
}
|
|
}
|