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
27 lines
916 B
CSS
27 lines
916 B
CSS
/*
|
|
* Shape, as M3's corner scale.
|
|
*
|
|
* Values from @material/web's token files (Apache-2.0, © Google LLC). `full` is a large
|
|
* length rather than @material/web's `50cqmin`, which resolves against a container an
|
|
* application may never declare.
|
|
*
|
|
* As utilities: rounded-corner-xs … rounded-corner-full.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.tokens {
|
|
:root {
|
|
--md-sys-shape-corner-none: 0px;
|
|
--md-sys-shape-corner-xs: 4px;
|
|
--md-sys-shape-corner-sm: 8px;
|
|
--md-sys-shape-corner-md: 12px;
|
|
--md-sys-shape-corner-lg: 16px;
|
|
--md-sys-shape-corner-lg-increased: 20px;
|
|
--md-sys-shape-corner-xl: 28px;
|
|
--md-sys-shape-corner-xl-increased: 32px;
|
|
--md-sys-shape-corner-xxl: 48px;
|
|
--md-sys-shape-corner-full: 9999px;
|
|
}
|
|
}
|