Andreas Reinhold / reiniandClaude Opus 5
3365730610
Plan step 37 review. Removing material.css left README.md, the development skill, UPGRADE.md and the tailwind.css and foundation.css headers telling an application to import foundation.css, tailwindcss and tailwind.css in its place. material.css was also what brought layout.css and components.css, so that install rendered every component unstyled, and without a layer statement Tailwind's preflight would have outranked the package's layers. The skill's snippet is now the Tailwind-free one 2.0.0 ends with: the foundation, then the stylesheet of each component the views render, or all.css. README.md, whose layout and prose still assume Tailwind, shows all.css in its own entry and Tailwind in a second, both opening with the layer statement, the shape the Workbench now builds; the skill and UPGRADE.md describe that interim in a sentence. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
40 lines
2.2 KiB
CSS
40 lines
2.2 KiB
CSS
/*
|
|
* Livewire Material — the foundation, the one stylesheet every application imports, first:
|
|
*
|
|
* @import '../../vendor/nonameweb/livewire-material/resources/css/foundation.css';
|
|
* @import './material-scheme.css';
|
|
*
|
|
* Plain CSS, no build step of its own: an application's bundler (Vite) inlines the imports, and a
|
|
* browser could read the files as they are.
|
|
*
|
|
* Every rule of the package sits in a sub-layer of `material`, in this order, lowest first:
|
|
*
|
|
* material.reset foundation/reset.css — the browser's defaults taken back
|
|
* material.tokens foundation/tokens.css — every `--md-sys-*` and `--md-ref-*` property
|
|
* material.base foundation/base.css, foundation/interaction.css — the page, the font
|
|
* face, and md-state-layer, md-focus-ring, md-touch-target, md-link
|
|
* material.layout the layout components: scaffold, panes, the canonical layouts
|
|
* material.components the components
|
|
* material.text text.css — md-type-*, md-ink-*, and the few classes for text
|
|
* material.visibility hiding an element below or from a breakpoint, over a component's display
|
|
*
|
|
* Every package stylesheet opens with the same layer statement, before its imports, so the order
|
|
* holds whichever file a bundler reaches first. An application's own CSS is unlayered and
|
|
* therefore outranks every package rule, whatever the selector — an application's broad selector
|
|
* (`button { … }`) restyles the components too. foundation/hidden.css keeps its two `!important`
|
|
* rules outside the layers, so `hidden` and `x-cloak` hide an element whatever sets its display.
|
|
*
|
|
* An application still building Tailwind keeps it in a separate entry and opens both entries with
|
|
* `@layer properties, theme, base, material, components, utilities;`, so the `material` layers sit
|
|
* above Tailwind's preflight and below its utilities (resources/css/tailwind.css's header).
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import './foundation/reset.css';
|
|
@import './foundation/hidden.css';
|
|
@import './foundation/tokens.css';
|
|
@import './foundation/base.css';
|
|
@import './foundation/interaction.css';
|
|
@import './text.css';
|