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
25 lines
1014 B
CSS
25 lines
1014 B
CSS
/*
|
|
* The page itself: M3's background and default ink, in the brand typeface.
|
|
*
|
|
* The page is `surface` and its text `on-surface`, the default typography colour
|
|
* (docs/reference/m3/styles.md § Typography, "Accessibility requirements"). `color-scheme` is
|
|
* declared with the roles in tokens/scheme.css, so native controls and scrollbars change with
|
|
* `data-theme` in the same block as the colours. The typeface is
|
|
* `--md-ref-typeface-brand` (tokens/type.css), Google Sans Flex from tokens/font.css, whose
|
|
* `@font-face` this file imports into the same layer.
|
|
*
|
|
* In `material.base`, above the reset and below every component and text class.
|
|
*/
|
|
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
|
|
@import '../tokens/font.css';
|
|
|
|
@layer material.base {
|
|
html {
|
|
background-color: var(--md-sys-color-surface);
|
|
color: var(--md-sys-color-on-surface);
|
|
font-family: var(--md-ref-typeface-brand);
|
|
}
|
|
}
|