archilyzer

commit c563f7840dbc67ee655302d589271d54cc402bff
parent d9b0aaff4707d88af79842ad3576c61ba230276c
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date:   Fri, 25 Sep 2026 23:12:15 -0400

common: text-rendering: geometricPrecision only at 2dppx and up, where hinted advances split words; 1x screens keep hinting (brand S3)

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

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

2 files changed, 28 insertions(+), 14 deletions(-)
diff --git a/common/components/themeTokens.test.ts b/common/components/themeTokens.test.ts
@@ -23,7 +23,7 @@ const CSS = readFileSync(
   "utf8",
 );
 
-type Rule = { selector: string; decls: Map<string, string>; index: number };
+type Rule = { selector: string; decls: Map<string, string>; index: number; body: string };
 
 // Top-level rules only (the sheet has no nesting beyond `@theme inline`, which
 // is an at-rule and skipped). Comments are stripped first.
@@ -52,7 +52,7 @@ function parseRules(css: string): Rule[] {
         if (name) decls.set(name, part.slice(k + 1).trim());
       }
     }
-    rules.push({ selector: selector.replace(/\s+/g, " "), decls, index: rules.length });
+    rules.push({ selector: selector.replace(/\s+/g, " "), decls, index: rules.length, body });
     i = j;
   }
   return rules;
@@ -160,11 +160,20 @@ test(":root sets the one radius and a Signal --brand-mark default; .font-display
   assert.equal(root.decls.get("--radius"), "0.375rem");
   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").
-  // 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("geometricPrecision is on the root and form controls at 2dppx and up only", () => {
+  // Hinted integer advances split words at DPR ≥ 2 on Linux ("Lig ht"); at 1x
+  // hinting keeps small text crisp, so the rule must not reach it. Form
+  // controls are named too: the UA sheet resets their text-rendering to auto.
+  const media = rule("@media (min-resolution: 2dppx)");
+  const inner = parseRules(media.body);
+  assert.equal(inner.length, 1);
+  assert.equal(inner[0].selector, "html, button, input, select, textarea");
+  assert.equal(inner[0].decls.get("text-rendering"), "geometricPrecision");
+  assert.ok(
+    !RULES.some((r) => r.decls.has("text-rendering")),
+    "a top-level text-rendering rule reaches 1x screens",
   );
 });
 
diff --git a/common/styles/tokens.css b/common/styles/tokens.css
@@ -133,13 +133,18 @@
    out at the design widths. It changes nothing where text is not hinted
    (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;
+   still read "Res ults".
+   Scoped to 2dppx and up, where the gaps are: on a 1x Linux or Windows
+   screen hinting is what keeps 11–14px text crisp, and there the advances
+   were never split. */
+@media (min-resolution: 2dppx) {
+  html,
+  button,
+  input,
+  select,
+  textarea {
+    text-rendering: geometricPrecision;
+  }
 }
 
 /* ---------------------------------------------------------------------------