noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layer the token files and keep their utilities apart

Browse Source 
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
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 13:42:43 +02:00
co-authored by Claude Opus 5
parent 9942e98fdd
commit 5f899c7287
11 changed files with 932 additions and 853 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/tokens/font.css
+14 -8
View File
@@ -6,13 +6,19 @@
* size pinned — 63 KB where the full font is 4 MB. Vite copies it into the application's
* build from this relative url.
*
* An application that wants another typeface overrides `--md-ref-typeface-brand` (and so
* `font-sans`) after importing material.css.
* The face sits in `material.base` (foundation/base.css imports it). An application that wants
* another typeface overrides `--md-ref-typeface-brand` in its own stylesheet, which outranks
* every package layer.
*/
@font-face {
font-family: 'Google Sans Flex';
src: url('../../fonts/google-sans-flex/GoogleSansFlex-Latin.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.base {
@font-face {
font-family: 'Google Sans Flex';
src: url('../../fonts/google-sans-flex/GoogleSansFlex-Latin.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
}