Andreas Reinhold / reiniandClaude Opus 5
bdbb76a0bd
<x-icon size> writes --md-icon-size (24px by default) and takes the optical-size-20 cut for 20px or less, as M3 asks; mirror-rtl flips a directional symbol. <x-shape size> writes --md-shape-size. Both draw from plain-CSS stylesheets in material.components, gathered in components.css until all.css replaces it; a caller's size class still wins while the other components are rewritten. Plan steps 35 and 36, the prop every component rewrite depends on. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
38 lines
1.5 KiB
CSS
38 lines
1.5 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 './components.css';
|
|
@import './tailwind.css';
|
|
|
|
@layer base {
|
|
html {
|
|
background-color: var(--md-sys-color-surface);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
}
|