# 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.
