Andreas Reinhold / reiniandClaude Opus 5
24eb811f34
2.0.0 took Tailwind out of the stack, but the texts Boost copies into every application still taught its utilities: the core guideline said "built on Tailwind CSS", the always-on material-3 guideline wrote every rule as `bg-primary`, `type-*`, `rounded-corner-*`, `state-layer` and `medium:`, and both skills' tables and examples did the same. None of those classes exists in 2.0's stylesheets, so an agent following the guideline wrote markup that compiled to nothing. Found moving ReStride onto 2.0: its CLAUDE.md, and SealShare's, carry these texts. The guidelines and skills now teach what 2.0 has: component and layout component props (`gap="space200"`, `hide-from="medium"`), the `md-type-*`, `md-ink-*` and interaction classes, and `--md-sys-*` tokens in the application's own CSS, with breakpoints as range media queries. UPGRADE.md §1, §2 and §4 describe the finished move instead of the in-between state, and header comments that pointed at the removed tokens/utilities.css and tailwind.css, or called a component "still Tailwind", say what is true now. BoostVocabularyTest runs DesignGuard over the code in every shipped guideline and skill (fenced Blade and CSS, and each inline class list), so a text that teaches a class the stylesheets do not define fails the suite; it finds 268 violations in the texts as 2.0.0 shipped them. The guard's own table of what it reports is exempt. BoostResourcesTest now asks the design skill for each breakpoint's prop value and media query instead of the removed `medium:` variants. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
113 lines
3.8 KiB
CSS
113 lines
3.8 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;
|
|
|
|
@layer material.components {
|
|
[data-md-progress] {
|
|
color: var(--md-sys-color-primary);
|
|
stroke: 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;
|
|
}
|
|
|
|
[data-md-progress][data-md-color='secondary'] {
|
|
color: var(--md-sys-color-secondary);
|
|
stroke: var(--md-sys-color-secondary-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='tertiary'] {
|
|
color: var(--md-sys-color-tertiary);
|
|
stroke: var(--md-sys-color-tertiary-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='error'] {
|
|
color: var(--md-sys-color-error);
|
|
stroke: var(--md-sys-color-error-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='success'] {
|
|
color: var(--md-sys-color-success);
|
|
stroke: var(--md-sys-color-success-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='warning'] {
|
|
color: var(--md-sys-color-warning);
|
|
stroke: var(--md-sys-color-warning-container);
|
|
}
|
|
|
|
[data-md-progress][data-md-color='info'] {
|
|
color: var(--md-sys-color-info);
|
|
stroke: var(--md-sys-color-info-container);
|
|
}
|
|
}
|