mirror of
https://github.com/we-promise/sure.git
synced 2026-07-18 07:45:24 +00:00
3a7dc3c346
* feat(mobile): add SureSpacing + SureTypography scale tokens Introduce hand-authored spacing and type-scale constants mirroring the Tailwind defaults the web design system relies on, so widgets reference a named step instead of a raw numeric EdgeInsets/SizedBox/fontSize. - SureSpacing: xs..huge mapping to Tailwind space-1..space-8 (4..32px). - SureTypography: xs..xxl mapping to Tailwind text-xs..text-2xl font sizes. Both are hand-written rather than generated from sure.tokens.json because spacing and the type ramp come from Tailwind's built-in scale, not the canonical token file (consistent with the tracker's guidance). Adopt them in the existing primitives (card padding, button metrics + gap, chip/segmented/list-group gaps and padding, text-field padding + label gap). All migrations are value-preserving — each token equals the literal it replaces — so there is no layout change; off-scale one-offs (control heights, hairlines, deliberate 14px field padding) stay literal. flutter analyze: no new issues; full suite (166) green. * docs(mobile): note off-scale SureChip inset; expose SureTypography line heights Address review feedback (jjmata): - SureChip: add an inline comment explaining the horizontal:14 content inset is deliberately off the SureSpacing scale (between lg=12 and xl=16) — a tuned FilterChip-parity dimension, not a spacing step — so it isn't "fixed" to a token later. - SureTypography: expose the paired line heights (xsLineHeight … xxlLineHeight, logical px matching the Tailwind text-* defaults) that were previously only in doc comments, with a note on deriving Flutter's TextStyle.height multiplier (lineHeight / fontSize). No behavior change.
40 lines
1.2 KiB
Dart
40 lines
1.2 KiB
Dart
/// Sure spacing scale.
|
|
///
|
|
/// Mirrors the Tailwind spacing defaults the web design system relies on
|
|
/// (`1rem = 16px`, so each step is `value * 4px`). Hand-authored rather than
|
|
/// generated from `design/tokens/sure.tokens.json` because spacing is not part
|
|
/// of the canonical token file — it comes from Tailwind's built-in scale, which
|
|
/// is stable and shared across the web and mobile apps.
|
|
///
|
|
/// Use these instead of raw numeric `EdgeInsets`/`SizedBox` values so padding
|
|
/// and gaps stay on the scale. Component-specific dimensions (control heights,
|
|
/// hairline dividers) intentionally stay as literals — they are sizing, not
|
|
/// spacing-scale steps.
|
|
class SureSpacing {
|
|
const SureSpacing._();
|
|
|
|
/// 4 — Tailwind `space-1`.
|
|
static const double xs = 4;
|
|
|
|
/// 6 — Tailwind `space-1.5`.
|
|
static const double sm = 6;
|
|
|
|
/// 8 — Tailwind `space-2`.
|
|
static const double md = 8;
|
|
|
|
/// 12 — Tailwind `space-3`.
|
|
static const double lg = 12;
|
|
|
|
/// 16 — Tailwind `space-4`.
|
|
static const double xl = 16;
|
|
|
|
/// 20 — Tailwind `space-5`.
|
|
static const double xxl = 20;
|
|
|
|
/// 24 — Tailwind `space-6`.
|
|
static const double xxxl = 24;
|
|
|
|
/// 32 — Tailwind `space-8`.
|
|
static const double huge = 32;
|
|
}
|