design-system(mobile): SureSpacing + SureTypography scale tokens

[JSONbored]

Summary

Adds named spacing and type-scale constants mirroring the Tailwind defaults the web design system uses, so widgets reference a DS step instead of a raw EdgeInsets/SizedBox/fontSize literal.

Closes #2437. Part of the mobile design-system roadmap #2235.

Change

• sure_spacing.dart — SureSpacing.xs..huge → Tailwind space-1..space-8 (4..32px).
• sure_typography.dart — SureTypography.xs..xxl → Tailwind text-xs..text-2xl font sizes.
• Both hand-authored (not via sure.tokens.json/the generator) because spacing + the type ramp come from Tailwind's built-in scale, not the canonical token file.
• Adoption in the existing primitives: card padding, button metrics + icon gap, chip/segmented/list-group gaps + padding, text-field content padding + label gap.

Every migration is value-preserving (each token equals the literal it replaces), so there is no rendered layout change; off-scale one-offs (control heights, hairlines, the deliberate 14px field padding) stay literal.

Screenshots

Mode	Before	After
Light	Before – raw literals	After – SureSpacing/SureTypography tokens
Dark	Before – raw literals	After – SureSpacing/SureTypography tokens

Test plan

• flutter analyze --no-fatal-infos — no new issues
• flutter test — green (166), including the primitive geometry/chrome tests (unchanged because values are identical)

Summary by CodeRabbit

• Refactor
  • Implemented a centralized design token system for spacing and typography to ensure consistent visual appearance and improved alignment across all UI components.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3c291902-4379-45d4-9a23-6042200a9f02

📥 Commits

Reviewing files that changed from the base of the PR and between 7d5ad53 and 0ba950f.

📒 Files selected for processing (2)

• mobile/lib/theme/sure_typography.dart
• mobile/lib/widgets/sure_chip.dart

🚧 Files skipped from review as they are similar to previous changes (2)

• mobile/lib/theme/sure_typography.dart
• mobile/lib/widgets/sure_chip.dart

---

📝 Walkthrough

Walkthrough

Two new design token classes (SureSpacing and SureTypography) are added to mobile/lib/theme/, each holding Tailwind-mirrored static const double scale values. Six existing widget primitives (SureButton, SureCard, SureChip, SureListGroup, SureSegmentedControl, SureTextField) are updated to import and use these constants in place of hardcoded numeric literals for padding, gaps, and font sizes.

Changes

Design Token Scale and Widget Adoption

Layer / File(s)	Summary
SureSpacing and SureTypography token definitions mobile/lib/theme/sure_spacing.dart, mobile/lib/theme/sure_typography.dart	Introduces SureSpacing (xs–huge, 4–32px) and SureTypography (xs–xxl font sizes with paired line-height constants) as non-instantiable static constant classes mirroring Tailwind's built-in scale.
Widget token adoption across six primitives mobile/lib/widgets/sure_button.dart, mobile/lib/widgets/sure_card.dart, mobile/lib/widgets/sure_chip.dart, mobile/lib/widgets/sure_list_group.dart, mobile/lib/widgets/sure_segmented_control.dart, mobile/lib/widgets/sure_text_field.dart	Each widget adds the sure_spacing.dart import (and sure_typography.dart for SureButton) and replaces all hardcoded EdgeInsets, SizedBox widths, and fontSize literals with the matching SureSpacing and SureTypography token references. All substitutions are value-preserving.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• design-system(mobile): SureSpacing + SureTypography scale tokens #2437: This PR directly implements the acceptance criteria of that issue — adding SureSpacing and SureTypography token files and adopting them in the six listed primitives.
• Align Flutter mobile UI with the Sure design system #2235: The changes fulfill the "Foundation — typography, tokens" and "Primitives" phases of the mobile design system roadmap tracked in this issue.

Possibly related PRs

• we-promise/sure#2358: Both PRs modify sure_button.dart; this PR migrates _SureButtonMetrics.resolve padding and font-size literals to SureSpacing/SureTypography tokens introduced here.
• we-promise/sure#2376: Introduces the SureListGroup/SureListRow primitives that this PR updates with tokenized spacing.
• we-promise/sure#2382: Introduces SureSegmentedControl, whose internal _Segment padding and icon/label gap are migrated to SureSpacing tokens in this PR.

Suggested labels

mobile/Flutter

Suggested reviewers

• jjmata

Poem

🐇 Hoppity-hop through the token trail,
No more magic numbers — xs to huge prevail!
Each widget now speaks the Tailwind tongue,
SureSpacing.xl where 16 once hung.
The rabbit cheers: the scale is one,
Design-system tokens — finally done! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'design-system(mobile): SureSpacing + SureTypography scale tokens' directly and specifically summarizes the main change—introducing two named scale constant classes for mobile design system spacing and typography.
Linked Issues check	✅ Passed	The PR fully satisfies issue #2437 requirements: new SureSpacing (xs-huge mapping to Tailwind space-1 to space-8) and SureTypography (xs-xxl mapping to Tailwind text-xs to text-2xl) classes are created, adopted in six existing primitives with value-preserving migrations, and flutter analyze/test pass with 166 tests.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the stated objective: creating two design-token files and refactoring six existing primitives to use them while preserving values. No unrelated modifications or off-scope work is present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[superagent-security]

Superagent didn't find any vulnerabilities or security issues in this PR.

[jjmata]

Clean primitives, well-documented with Tailwind step references. A few observations:

SureChip horizontal padding stays as 14 — SureChip uses EdgeInsets.symmetric(horizontal: 14, ...) after this PR. 14 doesn't map to any SureSpacing constant (closest are lg=12 and xl=16). The class docstring says "component-specific dimensions intentionally stay as literals", so this is presumably intentional — but a brief inline comment on that line noting it's deliberately off-scale would help future readers who might otherwise try to "fix" it.

SureTypography missing line-height pairing — The class documents paired line-heights in the comments (/// 14 / 20 — Tailwind text-sm), but doesn't expose them as constants. If Flutter widgets ever need the line-height value (e.g., TextStyle(height: x)), they'll need to reach for raw numbers. That's fine for now, but worth noting if the scale is extended.

Otherwise, the mechanical replacement of raw 16, 12, 8 etc. with named constants throughout the widgets is exactly the right kind of migration.

---

Generated by Claude Code

[JSONbored]

Thanks @jjmata — both addressed in 0ba950f:

• SureChip off-scale inset: added an inline comment on the horizontal: 14 line noting it's deliberately off the SureSpacing scale (between lg=12 and xl=16) — a tuned FilterChip-parity content inset, not a spacing step — so it isn't "fixed" to a token later.
• SureTypography line heights: exposed the paired line heights as constants (xsLineHeight … xxlLineHeight, logical px matching the Tailwind text-* defaults) instead of leaving them only in doc comments, with a note on deriving Flutter's TextStyle.height multiplier (lineHeight / fontSize). So consumers won't need raw numbers when the scale gets used for line height.

flutter analyze clean, full suite green (166).