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
1.7 KiB
CSS
27 lines
1.7 KiB
CSS
/*
|
|
* Elevation, as M3's five shadow levels.
|
|
*
|
|
* Geometry from @material/web's token files (Apache-2.0, © Google LLC). The colour goes
|
|
* through `color-mix()` rather than their relative `hsl(from …)`, which needs a newer
|
|
* browser for the same result.
|
|
*
|
|
* Shadows are for things that float over content — menus, the FAB, a floating toolbar, a
|
|
* sheet. On a dark surface a shadow is nearly invisible, so a panel separates from the page
|
|
* by its container tone instead. As utilities: shadow-elevation-1 … shadow-elevation-5.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@layer material.tokens {
|
|
:root {
|
|
--md-sys-color-shadow: #000000;
|
|
--md-sys-color-scrim: #000000;
|
|
|
|
--md-sys-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
|
--md-sys-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
|
--md-sys-elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
|
--md-sys-elevation-4: 0 2px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 6px 10px 4px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
|
--md-sys-elevation-5: 0 4px 4px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 8px 12px 6px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
|
}
|
|
}
|