docs: add expo primary purple design spec
This commit is contained in:
Arthur Belleville
parent
5a5bf1c93b
commit
ee02241700
1 changed files with 108 additions and 0 deletions
|
|
@ -0,0 +1,108 @@
|
||||||
|
# Expo App: Primary Purple Alignment with `apps/main`
|
||||||
|
|
||||||
|
**Date:** 2026-04-19
|
||||||
|
**Scope:** Replace the Expo app's current blue primary accent with the same purple used in `apps/main`, and centralize that brand color so future UI work does not reintroduce the old blue by accident.
|
||||||
|
|
||||||
|
## Context
|
||||||
|
|
||||||
|
The web app in `apps/main` uses a purple primary brand color, with `#804EEC` as the main accent and `#6f3fd4` as the darker pressed/hover variant.
|
||||||
|
|
||||||
|
The Expo app in `xtablo-expo` still uses blue as its effective primary color:
|
||||||
|
- `xtablo-expo/constants/colors.ts` defines the shared tint as `#0a7ea4`
|
||||||
|
- many screens and components hardcode `#3b82f6`
|
||||||
|
- several gradients and selected states use blue ramps and blue default fallbacks
|
||||||
|
|
||||||
|
This makes the mobile app visually inconsistent with the main product brand and also spreads the primary color across too many independent literals.
|
||||||
|
|
||||||
|
## Goal
|
||||||
|
|
||||||
|
Make the Expo app use the same purple primary accent as `apps/main`, while keeping the change strictly visual:
|
||||||
|
- primary accent becomes `#804EEC`
|
||||||
|
- pressed/hover companion becomes `#6f3fd4`
|
||||||
|
- hardcoded primary-blue usages are replaced
|
||||||
|
- feature behavior, layout, and non-primary semantic colors stay unchanged
|
||||||
|
|
||||||
|
## Non-Goals
|
||||||
|
|
||||||
|
- redesigning screens
|
||||||
|
- changing success, warning, destructive, or neutral palettes
|
||||||
|
- changing the full user-selectable tablo color palette beyond current primary/default behavior
|
||||||
|
- introducing a broader theming system beyond what is needed for this migration
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### Shared Brand Source
|
||||||
|
|
||||||
|
`xtablo-expo/constants/colors.ts` becomes the canonical source for the Expo brand color:
|
||||||
|
- `PRIMARY = "#804EEC"`
|
||||||
|
- `PRIMARY_DARK = "#6f3fd4"`
|
||||||
|
- updated light/dark tint values for shared theme consumers
|
||||||
|
|
||||||
|
This file remains the source for:
|
||||||
|
- shared tab tint values
|
||||||
|
- common color fallbacks
|
||||||
|
- default primary references used by screens and components
|
||||||
|
|
||||||
|
### Usage Layers
|
||||||
|
|
||||||
|
The migration affects two layers:
|
||||||
|
|
||||||
|
1. **Shared theme layer**
|
||||||
|
- shared tint colors
|
||||||
|
- default primary fallbacks
|
||||||
|
- any exported shared purple helpers needed by screens
|
||||||
|
|
||||||
|
2. **Screen/component layer**
|
||||||
|
- direct `#3b82f6` usages that are clearly acting as the app's primary brand accent
|
||||||
|
- blue gradients that are currently used as primary hero/header treatments
|
||||||
|
- selected/check states, CTA buttons, active tabs, and chat own-message accents
|
||||||
|
|
||||||
|
## Component Coverage
|
||||||
|
|
||||||
|
Expected coverage includes:
|
||||||
|
- `xtablo-expo/constants/colors.ts`
|
||||||
|
- navigation accent in `app/(app)/(tabs)/_layout.tsx`
|
||||||
|
- auth entrypoints like `app/login.tsx` and `app/signup.tsx`
|
||||||
|
- planning, tablos, settings, profile, task details, and tablo detail screens
|
||||||
|
- task pickers, sheets, task-row/status UI
|
||||||
|
- chat send/action and own-message accents
|
||||||
|
|
||||||
|
Representative hardcoded usages to migrate:
|
||||||
|
- `#3b82f6`
|
||||||
|
- blue default fallbacks like `item.color ? ColorMap[item.color] ?? "#3b82f6" : "#3b82f6"`
|
||||||
|
- blue gradients such as `["#1e3a8a", "#3b82f6", "#60a5fa"]`
|
||||||
|
|
||||||
|
## Data Flow
|
||||||
|
|
||||||
|
There is no feature or runtime behavior change. The visual flow is:
|
||||||
|
|
||||||
|
1. define the purple brand tokens once
|
||||||
|
2. route shared tint/default-primary values through that source
|
||||||
|
3. replace screen-level hardcoded primary blue usages with the shared purple or its pressed companion
|
||||||
|
4. leave non-primary semantic colors untouched
|
||||||
|
|
||||||
|
This keeps the brand color centralized while allowing the existing app structure to remain intact.
|
||||||
|
|
||||||
|
## Implementation Rules
|
||||||
|
|
||||||
|
- Replace only primary-brand blue usages, not unrelated semantic colors.
|
||||||
|
- Prefer shared constants when the styling site is conceptually “primary”.
|
||||||
|
- Keep existing selectable tablo colors intact except where the current default is standing in for the app primary.
|
||||||
|
- Preserve current interaction states and only swap their visual tokens.
|
||||||
|
|
||||||
|
## Verification
|
||||||
|
|
||||||
|
Verification should prove the visual migration rather than claim global UI cleanup:
|
||||||
|
|
||||||
|
- search for remaining `#3b82f6` usages and confirm any survivors are intentional
|
||||||
|
- verify `xtablo-expo` still typechecks
|
||||||
|
- run lint/tests as spot verification where touched files overlap existing checks
|
||||||
|
- manually inspect the main primary entrypoints:
|
||||||
|
- tab active color
|
||||||
|
- auth links/buttons
|
||||||
|
- planning CTAs and selection states
|
||||||
|
- tablos headers and actions
|
||||||
|
- settings/profile accents
|
||||||
|
- chat send and own-message accents
|
||||||
|
|
||||||
|
Existing unrelated lint warnings in the Expo app are not part of the success criteria for this task.
|
||||||
Loading…
Reference in a new issue