stitch2 0.27.0 → 0.27.1

package/dist/audit.js

@@ -774,8 +774,9 @@ export async function audit(opts) {
     }
     // 6e. Text tiers: a sentence to read belongs in the body colour (skills/stitch2/references/typography.md, section 3). A block of reading
     // copy, drawn in the secondary colour, is the usual reason a page reads dull although every contrast ratio passes: the strokes of small
-    // text reach only their own colour. A block is reading copy when it holds sixty characters and eight words of its own text and sits in
-    // the page's content: not in a bar, a table, a menu, a label, a control, a link or a code sample. It needs the secondary colour, which
+    // text reach only their own colour. A block is reading copy when it holds sixty characters and eight words of its own text at 14px or
+    // more (a caption or a field's help text is smaller, and the secondary colour is for it) and sits in the page's content: not in a bar, a
+    // table, a menu, a label, a control, a link or a code sample. It needs the secondary colour, which
     // check takes from DESIGN.md's text-muted and passes as a CSS colour the page can resolve (var(--<prefix>-text-muted)).
     if (opts.secondary) {
         const canvas = document.createElement('canvas');
@@ -803,7 +804,7 @@ export async function audit(opts) {
             if (!ownText(el) || opacity(el) < 0.1 || el.closest(apart))
                 continue;
             const own = [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent).join(' ').replace(/\s+/g, ' ').trim();
-            if (own.length < 60 || own.split(' ').length < 8 || !quiet(el))
+            if (own.length < 60 || own.split(' ').length < 8 || parseFloat(getComputedStyle(el).fontSize) < 14 || !quiet(el))
                 continue;
             push('warning', 'text-tier', el, 'Reading copy in the secondary colour: a sentence to read takes the body colour, and the secondary one is for hints, captions and counts');
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "description": "A design canvas, layout and type checks, component consistency and screen versioning for agent-built UI, on Google's DESIGN.md format.",
   "license": "MIT",
   "author": "ifokeev",

package/skills/stitch2/SKILL.md

@@ -68,7 +68,7 @@ References, read before the first screen:
    Text running into other text (`text-overlap`) or out of its card (`overflow`) is an error; a short label cut
    short with an ellipsis (`truncated`) is a warning to fix with room, not a smaller size. Google's rules are
    warnings too (`text-small`, `edge-margin`, `measure`, `tap-spacing`, `placeholder-label`, `unnamed-control`,
-   `nav-destinations`, `focus-visible`, `text-tier`; see google.md): `text-tier` is a block of reading copy (sixty characters, eight words, in the page's content and not in a bar, table, control or link) drawn in DESIGN.md's `text-muted`; give it the body colour (typography.md, section 3): fix them, or say in the hand-over why the screen breaks one. When DESIGN.md has a
+   `nav-destinations`, `focus-visible`, `text-tier`; see google.md): `text-tier` is a block of reading copy (sixty characters and eight words at 14px or more, in the page's content and not in a bar, table, control or link) drawn in DESIGN.md's `text-muted`; give it the body colour (typography.md, section 3): fix them, or say in the hand-over why the screen breaks one. When DESIGN.md has a
    light and a dark theme, every screen is checked in both: an issue marked with a theme
    ("light theme: Low contrast…") is fixed in DESIGN.md's colours for that theme when it shows on many
    screens, or in the screen when it is one element. Look at both renders (`--light.png`). With `i18n`, check

package/skills/stitch2/references/typography.md

@@ -67,8 +67,8 @@ To make something stand out inside a row, change its weight or colour, not its s
   ratio. The glyph edges are not the problem either (they render as sharp as a clean page); the colour and the tier
   are. Measure the share of characters in each tier: when most of a page's characters are in the secondary colour,
   or a paragraph of two sentences is, the copy is in the wrong tier. `check` warns about the second case **(check: text-tier)**: a block of
-  reading copy (sixty characters and eight words of its own text, in the page's content and not in a bar, table, menu,
-  label, control or link) drawn in DESIGN.md's `text-muted`. It needs that colour in DESIGN.md and is silent without it.
+  reading copy (sixty characters and eight words of its own text at 14 px or more, in the page's content and not in a bar,
+  table, menu, label, control or link) drawn in DESIGN.md's `text-muted`. It needs that colour in DESIGN.md and is silent without it.
 
   ```js
   // characters per computed colour and size, from the rendered page (run it with Playwright's page.evaluate)