Andreas Reinhold / reiniandClaude Opus 5
c545fb69ef
Plan step 33. foundation.css is the one required import: the full material layer statement, then plain imports of its parts, each opening with the same statement. - foundation/reset.css (material.reset): Tailwind 4's preflight rule for rule, with M3's on-surface-variant placeholder and no typeface. - foundation/hidden.css: [hidden] and [x-cloak], outside every layer. - foundation/tokens.css (material.tokens): the token files. - foundation/base.css (material.base): the page's surface, ink and brand typeface, and the font face. - foundation/interaction.css (material.base): md-state-layer, md-focus-ring, md-touch-target and md-link, the plain-CSS forms of the utilities; md-state-layer also takes data-md-dragged, and md-touch-target is 48px (space600) where the utility reads 3rem. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
28 lines
1.3 KiB
CSS
28 lines
1.3 KiB
CSS
/*
|
|
* The tokens: every `--md-sys-*` and `--md-ref-*` custom property the package reads.
|
|
*
|
|
* Each token file wraps its own declarations in `material.tokens`, because an `@import` cannot sit
|
|
* inside a layer block and `layer()` on the import would nest the layer a second time. Being the
|
|
* lowest layer but one, a token here loses to the same property declared anywhere an application
|
|
* writes it: its generated `material-scheme.css`, unlayered, replaces the default scheme below
|
|
* whatever its selectors, and a typeface or a spacing step is overridden the same way.
|
|
*
|
|
* scheme the colour roles of M3's baseline scheme, light and dark, three contrast levels
|
|
* shape the corner scale
|
|
* elevation the five shadow levels
|
|
* motion the springs of both motion schemes and M3's legacy easings
|
|
* type the 30 type styles and the brand typeface
|
|
* state the state-layer and disabled opacities
|
|
* spacing the measurement scale, space25 … space900
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import '../tokens/scheme.css';
|
|
@import '../tokens/shape.css';
|
|
@import '../tokens/elevation.css';
|
|
@import '../tokens/motion.css';
|
|
@import '../tokens/type.css';
|
|
@import '../tokens/state.css';
|
|
@import '../tokens/spacing.css';
|