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
25 lines
1.0 KiB
CSS
25 lines
1.0 KiB
CSS
/*
|
|
* Interaction states, as M3 draws them.
|
|
*
|
|
* The opacities are M3's state tokens (md.sys.state.*): the content colour laid over an
|
|
* element at 8% on hover, 10% on focus and press, 16% while dragged; disabled content at 38%
|
|
* and a disabled container at 12%.
|
|
*
|
|
* The classes that draw them are foundation/interaction.css (`md-state-layer`, `md-focus-ring`,
|
|
* `md-touch-target`, `md-link`), and utilities.css for the components still written in Tailwind.
|
|
* The tokens sit in `material.tokens`, so an application's own unlayered declaration wins.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.tokens {
|
|
:root {
|
|
--md-sys-state-hover-state-layer-opacity: 0.08;
|
|
--md-sys-state-focus-state-layer-opacity: 0.1;
|
|
--md-sys-state-pressed-state-layer-opacity: 0.1;
|
|
--md-sys-state-dragged-state-layer-opacity: 0.16;
|
|
--md-sys-state-disabled-content-opacity: 0.38;
|
|
--md-sys-state-disabled-container-opacity: 0.12;
|
|
}
|
|
}
|