- Implemented `getBenefitsHistory` method in `HomeRepository` to retrieve paginated benefit history.
- Enhanced `BenefitsOverviewCubit` to manage loading and displaying benefit history.
- Created `BenefitHistoryPage` for full-screen display of benefit history with infinite scroll support.
- Added `BenefitHistoryPreview` widget for expandable history preview in benefit cards.
- Introduced `BenefitHistoryRow` to display individual history records.
- Updated `BenefitsOverviewState` to include history management fields.
- Added new entities and use cases for handling benefit history.
- Created design system documentation for UI patterns and known gaps.
Verified token values from actual source files in apps/mobile/packages/design_system/lib/src/
reference
Source Files (verified 2026-03-18)
ui_colors.dart — all color tokens
ui_typography.dart — all text styles (primary font: Instrument Sans, secondary: Space Grotesk)
ui_constants.dart — spacing, radius, icon sizes
ui_icons.dart — icon aliases over LucideIcons (primary) + FontAwesomeIcons (secondary)
Key Color Tokens (hex values confirmed)
Token
Hex
Use
UiColors.background
#FAFBFC
Page background
UiColors.cardViewBackground
#FFFFFF
Card surface
UiColors.bgSecondary
#F1F3F5
Toggle/section headers
UiColors.bgThird
#EDF0F2
—
UiColors.primary
#0A39DF
Brand blue
UiColors.textPrimary
#121826
Main text
UiColors.textSecondary
#6A7382
Secondary/muted text
UiColors.textInactive
#9CA3AF
Disabled/placeholder
UiColors.textSuccess
#0A8159
Green text (darker than success icon)
UiColors.textError
#F04444
Red text
UiColors.textWarning
#D97706
Amber text
UiColors.success
#10B981
Green brand color
UiColors.destructive
#F04444
Red brand color
UiColors.border
#D1D5DB
Default border
UiColors.separatorSecondary
#F1F5F9
Light dividers
UiColors.tagActive
#DCFCE7
Active status badge bg
UiColors.tagPending
#FEF3C7
Pending badge bg
UiColors.tagError
#FEE2E2
Error banner bg
UiColors.tagFreeze
#F3F4F6
Ended/frozen badge bg
UiColors.tagInProgress
#DBEAFE
In-progress badge bg
UiColors.iconDisabled
#D1D5DB
Disabled icon color
UiColors.muted
#F1F3F5
Shimmer base color
Key Spacing Constants
Token
Value
space1
4dp
space2
8dp
space3
12dp
space4
16dp
space5
20dp
space6
24dp
space8
32dp
space10
40dp
space12
48dp
Key Radius Constants
Token
Value
radiusSm
4dp
radiusMd (radiusMdValue)
6dp
radiusBase
12dp
radiusLg
12dp (BorderRadius.circular(12))
radiusXl
16dp
radius2xl
24dp
radiusFull
999dp
NOTE: radiusBase is a double (12.0), radiusLg is a BorderRadius. Use BorderRadius.circular(UiConstants.radiusBase) when a double is needed.
Icon Sizes
Token
Value
iconXs
12dp
iconSm
16dp
iconMd
20dp
iconLg
24dp
iconXl
32dp
Key Typography Styles (Instrument Sans)
Token
Size
Weight
Notes
display1b
26px
600
letterSpacing: -1
title1b
18px
600
height: 1.5
title1m
18px
500
height: 1.5
title2b
16px
600
height: 1.1
body1m
16px
600
letterSpacing: -0.025
body1r
16px
400
letterSpacing: -0.05
body2b
14px
700
height: 1.5
body2m
14px
500
height: 1.5
body2r
14px
400
letterSpacing: 0.1
body3r
12px
400
height: 1.5
body3m
12px
500
letterSpacing: -0.1
footnote1r
12px
400
letterSpacing: 0.05
footnote1m
12px
500
—
footnote2b
10px
700
—
footnote2r
10px
400
—
titleUppercase3m
12px
500
letterSpacing: 0.7 — use for ALL-CAPS section labels
Typography Color Extension
UiTypography styles have a .textSecondary, .textSuccess, .textError, .textWarning, .primary, .white extension defined in TypographyColors. Use these instead of .copyWith(color: ...) where possible for brevity.
9039aa63d6