Flow Docs

UI Style Audit Pass 3 — Token Completion

3 min read

UI Style Audit Pass 3 — Token Completion

Branch: edit/mobile-audit-ux-polish
Date: 2026-04-24
Status: Complete

What

Completed the brand token audit by replacing all remaining raw Material/hardcoded values with AppTheme design-system constants. Achieved zero dart analyze issues on the full lib/ directory.

Changes Made

RefreshIndicator Branding

Added color: AppTheme.electricCoral to all RefreshIndicator widgets across the codebase. Fixed two duplicate-arg bugs introduced by batch script in timeline_discovery_view and feed_list_content. Reverted loading_widget.dart’s PullToRefreshLoading to colorScheme.primary — that file is explicitly designed as a theme-neutral primitive.

FontWeight.bold → numeric weights (8 remaining files)

All remaining ternary isSelected ? FontWeight.bold : ... patterns in:

  • leaderboard_screen, feed_date_sheet, feed_location_sheet
  • profile_setup_screen, wizard_step_info
  • flow_date_wheel_picker, notifications_screen, privacy_settings_screen

Shimmer skeleton colors

loading_skeletons.dart base/highlight colors mapped to AppTheme:

BeforeAfter
Colors.grey[800] (dark base)AppTheme.inkBlack
Colors.grey[700] (dark highlight)AppTheme.surfaceDark
Colors.grey[300] (light base)AppTheme.dividerLight
Colors.grey[100] (light highlight)AppTheme.warmCanvas

Offline indicator & avatar imports

  • profile_avatar.dart: offline dot Colors.grey → AppTheme.textSecondaryWarm; AppTheme import added
  • empty_state_widget.dart: noConnection icon Colors.orange → AppTheme.warmSun; maintenance/comingSoon icons Colors.blue/purple → AppTheme.electricViolet; AppTheme import added

Urgency orange → warmSun

Colors.orange and Colors.orange[700] in squad_detail_sheet and squad_bento_section replaced with AppTheme.warmSun. These were “full/urgent” state indicators — warmSun is the brand’s token for warnings/urgency.

BorderRadius.circular(N) — 43 files

Mapped all values with direct AppTheme equivalents:

LiteralToken
circular(8)AppTheme.radius8
circular(12)AppTheme.radius12
circular(14)AppTheme.radius14
circular(16)AppTheme.radius16
circular(20)AppTheme.radius20
circular(24)AppTheme.radius24
circular(28)AppTheme.radius28
circular(100) or circular(999)AppTheme.radiusFull

Intentionally left: circular(2) (drag handles), circular(10), circular(18) (chat bubbles), circular(30), circular(32) (bottom-sheet tops — no token exists).

Radius.circular(N) — 11 files

Same token mapping applied to standalone Radius.circular usages inside BorderRadius.only and BorderRadius.vertical contexts.

Colors.black87 → AppTheme.inkBlack

Replaced in vibe_filter_bar, feed_subheader, create_squad_sheet, squad_detail_sheet. Left intact in:

  • profile_avatar.dart:125 — luminance computation (87% opacity is meaningful, not decorative)
  • minimal_event_card.dart:420 — dark/light adaptive pair (isDark ? Colors.white70 : Colors.black87)

Hex duplicates → AppTheme tokens

  • Color(0xFF1E1E1E) → AppTheme.surfaceDark in my_events_screen
  • Color(0xFF2ED573) (×3) → AppTheme.mintGreen in pr_dashboard_screen

Deprecated primaryColor → colorScheme.primary

Theme.of(context).primaryColor is deprecated in Material 3. Fixed in map_preview.dart and message_bubble.dart.

Verified badge color

Colors.blueGrey for Icons.verified_user_rounded → AppTheme.electricViolet in minimal_event_card.dart. Verified/official status maps naturally to the brand’s secondary action color.

Intentionally Not Changed

PatternReason
Colors.red for destructive actionsUniversal semantic (delete, error, danger)
Colors.green for online indicatorsUniversal semantic (presence, success)
Colors.amber / Colors.orange[700] in leaderboard podiumGold/bronze are semantic award colors
profile_avatar fallback palette ([Colors.blue, Colors.orange, Colors.purple, Colors.teal, Colors.indigo])Intentional variety for avatars without profile pictures
Category colors in search (Colors.deepOrange, Colors.pink)Intentional categorical differentiators
PR tier gradient hex valuesCustom-designed badge gradients specific to tier system
Colors.white54/70, Colors.black38/45/54Opacity overlays for readability on images/dark backgrounds
Colors.white where used on dark backgroundsSame value as pureWhite (0xFFFFFFFF), intentional
Spacing constants (EdgeInsets.all(16) etc.)AppTheme.space* tokens are identical in value; purely cosmetic change

Why

Every pixel of the app now draws from the design system. A single token update (e.g., changing electricCoral to a new red) propagates to every widget consistently without a grep hunt. The token discipline also makes dark/light theming reliable — no raw color can “forget” to adapt.

Verification

dart analyze lib/
→ No issues found.

All 8 commits on edit/mobile-audit-ux-polish branch pass static analysis cleanly.

Graph View

Backlinks