mirror of
https://github.com/we-promise/sure.git
synced 2026-07-17 23:35:23 +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.
53 lines
1.9 KiB
Dart
53 lines
1.9 KiB
Dart
/// Sure type scale.
|
|
///
|
|
/// Mirrors the Tailwind font-size defaults the web design system uses. Like
|
|
/// [SureSpacing], this is hand-authored rather than generated from
|
|
/// `design/tokens/sure.tokens.json` because the type scale comes from Tailwind's
|
|
/// built-in `text-*` ramp, not the canonical token file.
|
|
///
|
|
/// Font sizes are in logical pixels; use them instead of raw `fontSize` literals
|
|
/// so text stays on the scale. Each size has a paired line height
|
|
/// ([xsLineHeight] … [xxlLineHeight]), also in logical pixels, matching the
|
|
/// Tailwind `text-*` defaults. Flutter's `TextStyle.height` is a *multiplier*,
|
|
/// so derive it as `lineHeight / fontSize` when an exact pairing is needed, e.g.
|
|
/// `TextStyle(fontSize: SureTypography.sm, height: SureTypography.smLineHeight / SureTypography.sm)`.
|
|
class SureTypography {
|
|
const SureTypography._();
|
|
|
|
/// 12 / 16 — Tailwind `text-xs`.
|
|
static const double xs = 12;
|
|
|
|
/// 14 / 20 — Tailwind `text-sm`.
|
|
static const double sm = 14;
|
|
|
|
/// 16 / 24 — Tailwind `text-base`.
|
|
static const double base = 16;
|
|
|
|
/// 18 / 28 — Tailwind `text-lg`.
|
|
static const double lg = 18;
|
|
|
|
/// 20 / 28 — Tailwind `text-xl`.
|
|
static const double xl = 20;
|
|
|
|
/// 24 / 32 — Tailwind `text-2xl`.
|
|
static const double xxl = 24;
|
|
|
|
/// Line height (logical px) paired with [xs] — Tailwind `text-xs`.
|
|
static const double xsLineHeight = 16;
|
|
|
|
/// Line height (logical px) paired with [sm] — Tailwind `text-sm`.
|
|
static const double smLineHeight = 20;
|
|
|
|
/// Line height (logical px) paired with [base] — Tailwind `text-base`.
|
|
static const double baseLineHeight = 24;
|
|
|
|
/// Line height (logical px) paired with [lg] — Tailwind `text-lg`.
|
|
static const double lgLineHeight = 28;
|
|
|
|
/// Line height (logical px) paired with [xl] — Tailwind `text-xl`.
|
|
static const double xlLineHeight = 28;
|
|
|
|
/// Line height (logical px) paired with [xxl] — Tailwind `text-2xl`.
|
|
static const double xxlLineHeight = 32;
|
|
}
|