Andreas Reinhold / reiniandClaude Opus 5
f5f040516e
The showcase and the error pages set grayscale font smoothing on themselves, but the foundation did not, so an application that dropped Tailwind's antialiased class rendered heavier text on macOS than the package's own pages, silently. base.css now sets it on the page; the showcase's and error page's copies go, and the guard tells a leftover antialiased class to go too. Decided with the user (plan step 46). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
32 lines
1.5 KiB
CSS
32 lines
1.5 KiB
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.
|
|
*
|
|
* Text is smoothed in grayscale where a platform offers the choice (macOS browsers): Google Sans
|
|
* Flex is drawn for it, and subpixel smoothing thickens its strokes on light text over a dark
|
|
* surface. Every surface the package draws — the showcase, the error pages — is set this way,
|
|
* and so is an application, which drops Tailwind's `antialiased` class with nothing to replace.
|
|
*
|
|
* 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);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
}
|