Home

mweinbach / agent-coworker

publicmweinbach/agent-coworker
Overview Code History Branches Pull requestsIssuesInsights
main
HomeOverview Code PRsIssues

feat(mobile): align design tokens with desktop palette

5 months ago

bab6a9e
Authored
Cursor Agent4/29/2026, 12:44:48 AM
Add apps/mobile/src/theme/tokens.ts as the source-of-truth catalog of
mobile design primitives, mirroring desktop's tokens/base.css and
theme-bridge.css:

- Olive/sage palette (#dde1ca / #6f8042 light, #171d13 / #a8b963 dark)
  matching apps/desktop/src/styles/tokens/base.css exactly. The previous
  warm-brown palette is replaced.
- Pre-mixed surface, text, border, and status tokens computed in TS via
  a small color-mix() helper so React Native does not have to interpret
  CSS at runtime.
- Typography, radius, and spacing scales aligned to the desktop bridge
  (--radius-base 8px, IBM Plex sans/mono families).

Existing AppTheme keys are preserved so every screen and component that
already reads useAppTheme() picks up the new palette without any other
changes, and the type now also exposes fontFamilySans/fontFamilyMono.

Adds test/mobile.theme-tokens.test.ts to lock the color-mix math and
ensure future palette drift between desktop and mobile is caught.

Co-authored-by: Max Weinbach <mweinbach@users.noreply.github.com>

Parenta3c961e

3 files changed
  • apps/mobile/src/theme/tokens.ts+312−0
  • apps/mobile/src/theme/use-app-theme.ts+38−50
  • test/mobile.theme-tokens.test.ts+68−0