Andreas Reinhold / reiniandClaude Opus 5
1075305a9c
Plan step 33. The Workbench imports foundation.css ahead of @import 'tailwindcss', so the material layers are declared first and sit below Tailwind's, then tailwind.css: the theme, the token utilities and the component stylesheets still written for Tailwind, with no tokens, so nothing is declared twice. material.css keeps working for 1.x-style imports after Tailwind by bringing the tokens, the hiding rules and tailwind.css, and never the reset, which would outrank Tailwind's utilities from there. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
37 lines
1.4 KiB
CSS
37 lines
1.4 KiB
CSS
/*
|
|
* Livewire Material on 1.x-style imports — the one stylesheet an application imports, after
|
|
* Tailwind, followed by the scheme `php artisan material:scheme` wrote for it:
|
|
*
|
|
* @import 'tailwindcss';
|
|
* @import '../../vendor/nonameweb/livewire-material/resources/css/material.css';
|
|
* @import './material-scheme.css';
|
|
* @source '../../vendor/nonameweb/livewire-material/resources/views';
|
|
* @source '../../vendor/nonameweb/livewire-material/src';
|
|
*
|
|
* tokens/scheme.css is the package's own default (M3's baseline purple), so an application
|
|
* renders before it has a scheme; the application's file declares the same roles, unlayered, and
|
|
* wins over the default in `material.tokens`.
|
|
*
|
|
* It brings the tokens, the two hiding rules and tailwind.css, but not foundation.css: imported
|
|
* after Tailwind, the foundation's reset would land in a layer above Tailwind's utilities and
|
|
* undo them. An application moving to 2.0.0's vocabulary imports foundation.css before
|
|
* `@import 'tailwindcss'` and tailwind.css after it, instead of this file.
|
|
*/
|
|
|
|
@import './tokens/scheme.css';
|
|
@import './tokens/shape.css';
|
|
@import './tokens/elevation.css';
|
|
@import './tokens/motion.css';
|
|
@import './tokens/type.css';
|
|
@import './tokens/font.css';
|
|
@import './tokens/state.css';
|
|
@import './foundation/hidden.css';
|
|
@import './tailwind.css';
|
|
|
|
@layer base {
|
|
html {
|
|
background-color: var(--md-sys-color-surface);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
}
|