9039aa63d6
- 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.
103 lines
3.7 KiB
Markdown
103 lines
3.7 KiB
Markdown
---
|
|
name: KROW Design System Token Reference
|
|
description: Verified token values from actual source files in apps/mobile/packages/design_system/lib/src/
|
|
type: 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.
|