chore(typography): add VRT coverage

[cdransf]

Description

Adds 2nd-gen/packages/swc/components/typography/test/vrt/typography.vrt.ts and typography-custom-properties.vrt.ts, providing dedicated Chromatic VRT coverage for the typography unit. Unlike other units covered so far, typography is a "component replacement" stylesheet (typography.css): a pure CSS class vocabulary applied to plain HTML elements, with no custom-element counterpart and no custom-elements-manifest declaration (see CONTRIBUTOR-DOCS/02_style-guide/01_css/07_stylesheets.md).

• Permutations: every Heading/Title/Body/Detail/Code size, the serif/emphasized/heavy/margins modifiers, the prose-container and link-list structural contexts, and Arabic/Hebrew font-family + CJK (ja/ko/zh) font-metric overrides. Rendered in both light/ltr and dark/rtl.
• ForcedColors: the same permutation set under forced-colors emulation. typography.css has no @media (forced-colors: active) overrides of its own - confirmed this is correct, not a gap, since typography's differentiation is entirely size/weight-based rather than color-based, so the browser's automatic forced-colors flattening doesn't lose any meaningful distinction here.
• CustomProperties: one reference/override row per documented custom property (8 per variant x 5 variants = 40), grouped by variant. Since there's no manifest to verify against, this follows link-custom-properties.vrt.ts's manual-verification pattern: a hardcoded, alphabetically-sorted DOCUMENTED_TYPOGRAPHY_PROPERTIES list that the covered-properties set must match exactly.

typography.mdx has no "CSS custom properties" reference table for this VRT to verify against (unlike link.mdx, which link-custom-properties.vrt.ts checks against) - out of scope for this PR; flagged separately as follow-up.

Motivation and context

The typography unit had no dedicated VRT coverage. This follows the VRT foundation established for button (PR #6463), extending it to typography per the linked ticket, using link's existing "component replacement" VRT pattern as the closest precedent for a CSS-only, no-custom-element unit.

Related issue(s)

• fixes SWC-2420

Screenshots (if appropriate)

N/A - test-only change, no visual/behavioral change to typography.css itself. Manually verified via Playwright screenshots of the built Storybook, including real forced-colors media emulation. Caught and fixed one real gap during review: the CJK rows were originally only rendered in the light/ltr pass, not dark/rtl - fixed by folding them into the shared permutationContent() so both theme passes cover them.

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Typography VRT stories render correctly
  1. Go to Storybook > Components > Typography > Typography VRT
  2. Review the Permutations, ForcedColors, and CustomProperties stories
  3. Expect every size/modifier/structural-context combination to render correctly in both light/ltr and dark/rtl, and every custom-property row to show an obviously different override next to its reference

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

Accessibility testing checklist

• Keyboard
  These are non-interactive VRT snapshot fixtures (tagged dev); no new keyboard behavior is introduced. The only interactive elements are the prose-container/link-list anchors, which use plain native <a> tab/Enter behavior. Confirm no regressions in the existing typography.stories.ts docs examples.

• Screen reader

  1. Go to Storybook > Components > Typography > Typography VRT > Permutations
  2. Inspect the "Prose container" and "Link list" rows with a screen reader or the accessibility tree
  3. Expect the semantic h1-h4/p/ul/li elements to announce their native roles/levels correctly, and both links to announce as links with their visible text as the accessible name

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5d6862d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📚 Branch Preview Links

• Storybook (Gen2, dev mode)
• Storybook (Gen2, prod mode)
• Documentation Site (Gen1)
• Storybook (Gen1)

🔍 Gen1 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-6628

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[rise-erpelding]

Typography is always such a beast to document/test!

VRTs have a nice way of surfacing tiny bugs and missing pieces of documentation, in this case revealing that there's no custom properties table for us to pull information from. I think that's probably worth adding sooner rather than later.

I don't think we want to be in a pattern of always VRTing every possible permutation/combination of states/variants, but I think there are two that might be useful for typography:

• serif + heavy applied together since they seem to both touch font-weight
• serif + emphasized, mainly because we document it ("The following variants may use the emphasized modifier by adding .swc-Typography--emphasized alongside the base class. It may also be applied to the serif sub-variants.")

[miwha-adobe]

Overall lgtm - Just thoughts on comments and it's verbosity. Could be worth asking Claude to be more concise, but not a blocker.