DES-374: Typography parity — Figma atoms vs iOS composed styles

[OJBoon]

Jira: DES-374 — Lotus Design System (Epic)
Stacked on: #3

Why

Olly added a Typography collection to the Lotus Figma file with atomic tokens (font-size/*, font-family/*, font-style/*, line-height/*). Previously the audit listed iOS typography under a "Figma has no Typography variables" warning — now it does real cross-platform parity.

What it surfaces (verified against the live file)

iOS style	Issue
h2PoppinsLight	size 23pt (Figma font-size/h2 = 24) and weight Light (Figma has no Light) — two real bugs in one
h2PoppinsBold	weight SemiBold not in Figma's set — intentional? Worth a Figma-side discussion
sfSemiBoldFont, sfRegularFont	System SF font at 15pt — Figma has no 15pt and no Light/SemiBold — iOS-only by design
Figma hero (40pt)	No iOS implementation
Figma font-style/medium	Defined but no iOS style uses Medium weight

Of 21 iOS composed styles, 17 are clean (all atoms in Figma's set), 4 mismatch.

What changed

scripts/
├── parse-ios-typography.mjs  ← NEW: parses LotusTypography.swift into (name, family, size, weight)
├── typography-parity.mjs     ← NEW: decomposes iOS atoms, checks each against Figma
└── build-report.mjs          ← updated to consume typography-parity.json

SKILL.md — Pipeline mermaid diagram updated, new Phase 2.5 and Phase 3.5 sub-sections, "Future enhancements" trimmed (typography parity is now done at the atom level; line-height parity and composed-text-style parity are the remaining open follow-ups).

Approach: atomic tokens, not composed text styles

Figma's typography is atomic — separate vars for size, family, weight, line-height. iOS has composed styles that bundle these. Comparison strategy:

1. Decompose each iOS style into (family, size, weight) atoms.
2. For each atom, check membership in the corresponding Figma set.
3. Report per-iOS-style status + the inverse (Figma atoms iOS doesn't use).

This works without requiring Figma to maintain a separate composed-text-styles collection. If Figma later adds text/h2-poppins-light-style composed tokens, we'd add a second comparison layer.

Test plan

• parse-ios-typography.mjs correctly handles Font.custom, UIFont(name:size:), Font.system(size:weight:), and .weight(.medium) chained modifiers (composite weight rendered as Regular+medium).
• typography-parity.mjs correctly flags h2PoppinsLight as size+weight mismatch, h2PoppinsBold as weight-only mismatch, sf* as System (intentionally out of scope).
• Full pipeline runs end-to-end (6 stages now): fetch → parse colours → parse typography → colour parity → typography parity → scan → build-report.
• Section degrades gracefully if typography-parity.json is missing — falls back to a "no typography parity data" warning so older runs don't break.

Notes

• "Future enhancements" still tracks line-height parity (iOS LotusTypography.swift doesn't expose per-style line height; Figma defines line-height/* atoms — would need iOS-side change first) and composed text-style parity (if Figma adds composed text/* tokens later).

🤖 Generated with Claude Code

[gitstream-cm]

🚨 gitStream Monthly Automation Limit Reached 🚨

Your organization has exceeded the number of pull requests allowed for automation with gitStream.
Monthly PRs automated: 250/250

To continue automating your PR workflows and unlock additional features, please contact LinearB.