mirror of
https://github.com/we-promise/sure.git
synced 2026-08-05 16:42:18 +00:00
213bb0d6e8
* 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. * design-system(mobile): polish Dashboard with Sure tokens Align the dashboard with the Sure design system (no behavior changes). NetWorthCard: the hero card adopts the canonical Sure card chrome — container fill, hairline borderSecondary, radiusLg, and the subtle DS shadow (mirroring SureCard/AccountCard) instead of Material surfaceContainerHighest/outline with an ad-hoc radius and no elevation. Dividers, the Net Worth label/value, the Outdated badge, asset/liability totals, and the currency-breakdown sheet all resolve from the active SureColors palette (brightness-aware). dashboard_screen.dart: empty/error states use SureButton + palette colors; the account-type group header badge uses surfaceInset/textSecondary + SureTypography; the sync success banner and sync/refresh snackbars use palette.success/ palette.destructive; spacing moves onto the SureSpacing scale. Adds net_worth_card_test.dart asserting the hero card chrome resolves Sure tokens in light and dark. Builds on the SureSpacing/SureTypography scale tokens (#2438). * fix(mobile): readable foreground on tokenized dashboard snackbars + keyed chrome test Address review feedback on #2457: - Snackbar contrast: the success/error snackbars switched their background to palette.success/palette.destructive but kept a white icon + default white text. In dark theme palette.success is a bright green (#32D583), so white was low-contrast. Set the icon and text foreground to palette.textInverse, which flips with the theme (#FFFFFF light / #171717 dark) and stays readable on both semantic fills. - Test robustness: key the NetWorthCard chrome Container ('netWorthCardChrome') and look it up with find.byKey instead of the fragile first-descendant Container match. * fix(mobile): SureButton owns leading-icon foreground via IconTheme Address review feedback (jjmata): call sites shouldn't hardcode the button's foreground on leading icons. Wrap SureButton's content in an IconTheme set to the variant foreground, so leading icons (e.g. SureIcon) inherit it automatically — mirroring how Material's ElevatedButton.icon propagates icon color. Icons that pass an explicit color still win. Drop the now-redundant `color: palette.textInverse` from the dashboard empty/error-state button icons; they follow the button variant automatically. Add a SureButton test asserting a leading icon inherits the variant foreground (textInverse for primary, textPrimary for outline) via the ambient IconTheme. * Fix net worth card mask merge regression * Provide privacy state in net worth card tests --------- Signed-off-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: sure-admin <sure-admin@splashblot.com>
32 lines
1007 B
Dart
32 lines
1007 B
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.
|
|
///
|
|
/// Values are font sizes in logical pixels; the comment on each records the
|
|
/// Tailwind step and its paired line-height for reference. Use these instead of
|
|
/// raw `fontSize` literals so text stays on the scale.
|
|
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;
|
|
}
|