archilyzer

commit df66fa359e1f3c532e0f6beb688c8fc6d6302300
parent c68e361f3d6c1654833fdf93a8f98a4628dea3f3
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date:   Fri, 25 Sep 2026 22:58:52 -0400

common: form controls lay out text at design widths too (brand S2 review)

The geometricPrecision rule sat on <html> alone, but Chromium's UA sheet
resets text-rendering to auto on button, input, select and textarea, so they
do not inherit it. After the fix a button still read "Res ults" at DPR 2: its
glyph advances were whole pixels (8/6/7/7/3/4/7), and they are 7.52/6.59/
5.86/6.83/3.22/4.23/5.86 once the rule names form controls too. The phone
menu and the page behind it now read cleanly at DPR 2 on sepia and dark.
themeTokens.test pins the selector.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Diffstat:
M
common/components/themeTokens.test.ts
 | 
6
+++++-
M
common/styles/tokens.css
 | 
10
++++++++--

2 files changed, 13 insertions(+), 3 deletions(-)
diff --git a/common/components/themeTokens.test.ts b/common/components/themeTokens.test.ts
@@ -161,7 +161,11 @@ test(":root sets the one radius and a Signal --brand-mark default; .font-display
   assert.equal(root.decls.get("--brand-mark"), ACCENTS.signal.onDark);
   assert.equal(rule(".font-display").decls.get("font-stretch"), "112%");
   // Hinted integer advances split words at DPR ≥ 2 on Linux ("Lig ht").
-  assert.equal(rule("html").decls.get("text-rendering"), "geometricPrecision");
+  // Form controls too: the UA sheet resets their text-rendering to auto.
+  assert.equal(
+    rule("html, button, input, select, textarea").decls.get("text-rendering"),
+    "geometricPrecision",
+  );
 });
 
 test("no retired theme family is left in the sheet", () => {
diff --git a/common/styles/tokens.css b/common/styles/tokens.css
@@ -131,8 +131,14 @@
    or "Signal" measured 9px against its 7.41px design width, which read as
    "Lig ht" and "Sig nal". geometricPrecision turns hinting off and lays text
    out at the design widths. It changes nothing where text is not hinted
-   (macOS, iOS, Android's subpixel layout). */
-html {
+   (macOS, iOS, Android's subpixel layout). Form controls are named too: the
+   UA sheet resets their text-rendering to auto, so a button's "Results" would
+   still read "Res ults". */
+html,
+button,
+input,
+select,
+textarea {
   text-rendering: geometricPrecision;
 }