refactor(ui): success tone + Heading props, and migrate the colour/heading sites

[camielvs]

Resolves B18 and B19b of #2626. Three commits: the primitive changes both items needed, then one migration commit each.

⚠️ Needs a visual diff — this changes rendered colour and adds heading semantics. Every site was migrated to preserve its exact size, weight and spacing, but that claim is worth checking against the running UI.

• Visually diffed the rendered output — no layout/spacing/colour regression

Why the primitive had to change first

Both entries asked for call-site migrations that were impossible as the primitives stood:

Blocker	Fix
No tone mapped to green, so success text had to use raw palette classes	Added success: "text-success". --success and --color-success already existed in both palettes — only the variant was missing
Heading accepted only children and level and dropped every other prop, while its sibling Paragraph forwards rest props to Text. Any heading needing a tone, size, weight or className could not use it	Heading now forwards rest props, with the level-derived size/weight as overridable defaults

Heading's widening is deliberately conservative: as is omitted from the accepted props so the element can't be swapped, and role="heading" / aria-level are applied after the spread so a caller can't clobber the accessibility attributes.

B18 — 19 colour sites across 13 files

gray-* → subdued, red-* → critical, green-* → success. 7 were raw <p>/<h4> and became Paragraph/Heading; 12 already used Text and only needed className swapped for a tone.

The entry claimed 20 sites; 19 is what is actually there. #2631 landed in the meantime and covered a different set — I re-derived the list rather than trusting the count.

This also fixes a real inconsistency at ImportComponent.tsx:228, which read text-sm text-gray-600 dark:text-muted-foreground — the dark variant was already asking for subdued while the light half stayed raw palette.

Deliberately out of scope, since tone only covers text: container border-*/bg-* palette classes (e.g. the green/red callout boxes in ImportPipeline), lucide icon colours, and Label, which takes no tone.

B19b — 13 heading sites across 9 files

10 Text as="h*" plus 3 raw <h4>. Every site keeps its exact size, weight, tone and className, so the only rendering change is the role="heading" and aria-level that Heading adds — which is the point of the migration.

Two sites were already hand-rolling exactly that: PressedKeysList.tsx and StatComponents.tsx both passed role="heading" and aria-level={3} to Text themselves. They now say <Heading level={3}>.

The entry counted "10 raw <h1>–<h6> in 5 files"; 5 of those are in .test.tsx fixtures and stay raw markup — they are asserting rendering, not product UI. The 5 real ones are the 2 in ImportPipeline (migrated in the B18 commit, since colour was the driver) and 3 here.

Verified by compiling the theme, not by eye

text-success is a real utility only because --color-success is registered in global.css's @theme block — in a stock Tailwind build it generates nothing. Rather than assume, I compiled the actual entry (src/styles/global.css) through Tailwind 4.3.3's compile() API and asked which candidates emit a rule:

text-success           GENERATED     ← the new tone renders
text-warning           GENERATED
text-destructive       GENERATED
text-muted-foreground  GENERATED
text-md                -- dead --
font-regular           -- dead --
text-inverted          -- dead --

Three dead variant values, pre-existing — found, not fixed

textVariants emits three class names Tailwind never generates:

Variant value	Emits	Should be	Used
size="md"	text-md	text-base	the Text default — every Text without an explicit size
weight="regular"	font-regular	font-normal	the Text default — every Text
tone="inverted"	text-inverted	no --inverted token exists at all	0 sites

The two defaults are why the codebase looks fine: emitting a dead class leaves the browser default in place, which is what text-base / font-normal would have given anyway. So this is latent, not a visible bug — but it does mean size and weight silently have no "reset to default" value, and tone="inverted" would render nothing if anyone used it.

It is also load-bearing in this PR in a benign way: size="md" is how a migrated raw element keeps the base font size it inherited, which is why SearchFilter's <h4> and the two ImportPipeline headings pass it. Fixing the variants would change rendering at all 22 size="md" sites plus every defaulted Text, so it belongs in its own PR with its own visual diff. Worth filing separately.

Validation

typecheck · lint · knip · prettier all clean — 191 files / 1,966 tests passing. No raw <h1>–<h6> and no Text as="h*" remain outside test fixtures and typography.tsx itself.

Once merged, the B18 and B19b entries in #2626's Part B can be struck. B19a (the 27 flex flex-col → BlockStack sites) is untouched and still open — it needs a separate per-area ruling on w-full/items-start.

[github-actions]

🎩 Preview

A preview build has been created at: feat/typography-success-tone-and-heading-props/bd6e293

[morgan-wowk]

🤖 Agent review. The tone/Heading migration is mostly sound — no heading-level or a11y regressions (role/aria-level applied after the {...rest} spread, as omitted). Two visual items to confirm (inline).

[morgan-wowk]

🤖 This silently changes weight 400→600: the old <Text ... size="lg"> had no weight (default regular, dead class → inherited ~400), but <Heading level={2}> defaults level<3 to semibold (600). That contradicts the PR's stated invariant ('the only rendering change is role/aria-level'). Likely a benign bolding, but pass weight="regular" to truly preserve, or confirm it's intended.

[morgan-wowk]

🤖 Possible contrast regression: the success heading/message move from text-green-600 / dark:text-green-300 to tone="success" (text-success = oklch(0.7 0.18 140)) while the container stays bg-green-50. text-success at L=0.7 is lighter than green-600, so light-mode contrast on the pale-green box drops and may fall below WCAG AA. Also --success is identical in light and dark, so the previously-distinct dark-mode green (green-300) is gone. Worth a light+dark AA check on this success box (same applies to the <Paragraph tone="success"> just below).