Smooth the page's text in the foundation, not per surface

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>
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 12:41:20 +02:00
co-authored by Claude Opus 5
parent 6614b32fd3
commit f5f040516e
10 changed files with 25 additions and 11 deletions
+1
View File
@@ -372,6 +372,7 @@ it('reports position, border, effect, interactivity and text utilities with the
'tailwind/utilities.blade.php:3 Tailwind text utility `font-mono` compiles to nothing — write the rule in your own CSS',
'tailwind/utilities.blade.php:3 Tailwind text utility `list-disc` compiles to nothing — write the rule in your own CSS',
'tailwind/utilities.blade.php:3 Tailwind text utility `uppercase` compiles to nothing — write the rule in your own CSS',
"tailwind/utilities.blade.php:3 Tailwind's `antialiased` compiles to nothing — the foundation already smooths text in grayscale (base.css); drop it",
"tailwind/utilities.blade.php:3 Tailwind's `font-sans` compiles to nothing — the foundation already sets the brand typeface; any other `font-family` is your own CSS",
"tailwind/utilities.blade.php:3 Tailwind's `text-end` compiles to nothing — use `md-text-end` (text.css)",
"tailwind/utilities.blade.php:3 Tailwind's `underline` compiles to nothing — `md-link` draws a link (interaction.css); any other decoration is your own CSS",
+1 -1
View File
@@ -21,7 +21,7 @@ it('serves the bundle as long-cached CSS at the hash of its own content', functi
->assertHeader('Cache-Control', 'immutable, max-age=31536000, public');
expect($response->getContent())
->toContain('[data-md-showcase]')
->toContain('[data-md-showcase-brand]')
->toContain('[data-md-pane]')
->toContain('@layer material.reset, material.tokens');
});
+10
View File
@@ -212,6 +212,16 @@ it('brings every foundation file and text.css into the foundation, and nothing e
->and(array_values(preg_grep('/^components\//', $foundation)))->toBe([]);
});
it('paints the page in surface and on-surface, in the brand typeface, smoothed in grayscale', function () {
// An application drops Tailwind's `antialiased` with nothing to replace it: the showcase and the
// error pages, which set it themselves before, read it from here too.
$base = (string) preg_replace('~/\*.*?\*/~s', '', (string) file_get_contents(stylesheetPath('foundation/base.css')));
expect($base)->toMatch('/html \{\s*background-color: var\(--md-sys-color-surface\);\s*color: var\(--md-sys-color-on-surface\);\s*font-family: var\(--md-ref-typeface-brand\);\s*-webkit-font-smoothing: antialiased;\s*-moz-osx-font-smoothing: grayscale;\s*\}/')
->and((string) file_get_contents(stylesheetPath('showcase.css')).file_get_contents(stylesheetPath('components/error-page.css')))
->not->toContain('font-smoothing');
});
it('leaves no stylesheet under resources/css/ outside all.css or showcase.css', function () {
// The full tree now that Tailwind is gone (plan step 39): every .css file on disk, not just the
// ones a bundler happens to reach — a stray or orphaned file would show up here even though
@@ -1,4 +1,4 @@
<div class="relative inset-0 -top-2 z-10 overflow-hidden shrink-0 col-start-2 justify-self-end container">
<span class="border border-t-2 rounded shadow outline-none ring-2 transition opacity-50 -rotate-45 cursor-pointer select-none"></span>
<span class="aspect-video object-cover font-mono font-sans underline uppercase text-end list-disc table bg-clip-text"></span>
<span class="aspect-video object-cover font-mono font-sans antialiased underline uppercase text-end list-disc table bg-clip-text"></span>
</div>