Andreas Reinhold / reiniandClaude Opus 5
5f899c7287
Plan step 33. Each token file now opens with the material layer statement and wraps its declarations in material.tokens (the font face in material.base), so an application's unlayered scheme outranks the package default whatever the selectors, and the foundation can import the files with no layer() on the import. The type-* and state utilities move to tokens/utilities.css, still imported by material.css, so no file the foundation imports carries a Tailwind directive. [x-cloak] moves beside the [hidden] rule in foundation/hidden.css, outside every layer; material.css imports it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
49 lines
1.7 KiB
CSS
49 lines
1.7 KiB
CSS
/*
|
|
* Livewire Material — 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`.
|
|
*/
|
|
|
|
@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/theme.css';
|
|
@import './tokens/state.css';
|
|
@import './tokens/utilities.css';
|
|
@import './foundation/hidden.css';
|
|
@import './components/actions.css';
|
|
@import './components/groups.css';
|
|
@import './components/list.css';
|
|
@import './components/collapse.css';
|
|
@import './components/dialog.css';
|
|
@import './components/field.css';
|
|
@import './components/menu.css';
|
|
@import './components/selection.css';
|
|
@import './components/search.css';
|
|
@import './components/datepicker.css';
|
|
@import './components/timepicker.css';
|
|
@import './components/tabs.css';
|
|
@import './components/app-bar.css';
|
|
@import './components/navigation.css';
|
|
@import './components/toolbar.css';
|
|
@import './components/table.css';
|
|
|
|
@layer base {
|
|
html {
|
|
background-color: var(--md-sys-color-surface);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
}
|