# Expo Primary Purple Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Replace the Expo app's current blue primary accent with the `apps/main` purple brand color and centralize that primary token.

**Architecture:** First establish a shared Expo brand source in `xtablo-expo/constants/colors.ts`, then migrate direct blue primary usages onto that shared purple or its darker pressed companion. Keep semantic non-primary colors unchanged and treat this as a visual token migration, not a UI redesign.

**Tech Stack:** Expo SDK 54, React Native, Expo Router, TypeScript, Jest, Expo ESLint.

**Spec:** `docs/superpowers/specs/2026-04-19-xtablo-expo-primary-purple-design.md`

---

## File Structure

### Shared color source
- Modify: `xtablo-expo/constants/colors.ts` — define the Expo brand purple constants and route shared tint/default-primary values through them

### Screens and components with current primary-blue accents
- Modify: `xtablo-expo/app/(app)/(tabs)/_layout.tsx`
- Modify: `xtablo-expo/app/(app)/(tabs)/index.tsx`
- Modify: `xtablo-expo/app/(app)/(tabs)/planning.tsx`
- Modify: `xtablo-expo/app/(app)/(tabs)/settings.tsx`
- Modify: `xtablo-expo/app/(app)/(tabs)/tablos.tsx`
- Modify: `xtablo-expo/app/(app)/channel/[cid].tsx`
- Modify: `xtablo-expo/app/(app)/tablo/[id].tsx`
- Modify: `xtablo-expo/app/(app)/task/[id].tsx`
- Modify: `xtablo-expo/app/(app)/user/index.tsx`
- Modify: `xtablo-expo/app/login.tsx`
- Modify: `xtablo-expo/app/signup.tsx`
- Modify: `xtablo-expo/components/tasks/AssigneePicker.tsx`
- Modify: `xtablo-expo/components/tasks/EtapePicker.tsx`
- Modify: `xtablo-expo/components/tasks/EtapeSheet.tsx`
- Modify: `xtablo-expo/components/tasks/TaskList.tsx`
- Modify: `xtablo-expo/components/tasks/TaskRow.tsx`
- Modify: `xtablo-expo/types/tasks.types.ts`

### Existing modified files to handle carefully
- Respect current in-progress Expo SDK 54 edits already present in `xtablo-expo`
- Do not revert unrelated type/test/lint fixes already in the worktree

---

## Chunk 1: Establish Shared Brand Tokens

### Task 1: Centralize the purple primary in `colors.ts`

**Files:**
- Modify: `xtablo-expo/constants/colors.ts`

- [ ] **Step 1: Write a failing verification command**

Run:

```bash
rg -n "tintColorLight|tabIconSelected|#0a7ea4|#3b82f6" xtablo-expo/constants/colors.ts
```

Expected: output still shows the old shared tint/default-primary values.

- [ ] **Step 2: Replace the shared blue primary with the `apps/main` purple**

Update `xtablo-expo/constants/colors.ts` to define and export:
- `PRIMARY = "#804EEC"`
- `PRIMARY_DARK = "#6f3fd4"`

Then wire the light-mode tint and selected-tab values to that shared purple source.

- [ ] **Step 3: Verify the shared color source changed as expected**

Run:

```bash
rg -n "#804EEC|#6f3fd4|#0a7ea4" xtablo-expo/constants/colors.ts
```

Expected:
- `#804EEC` and `#6f3fd4` are present
- `#0a7ea4` is gone

- [ ] **Step 4: Commit**

```bash
git add xtablo-expo/constants/colors.ts
git commit -m "feat(expo): add shared purple brand color"
```

---

## Chunk 2: Replace App-Wide Primary Blue Usages

### Task 2: Migrate direct primary-blue accents to the shared purple

**Files:**
- Modify: `xtablo-expo/app/(app)/(tabs)/_layout.tsx`
- Modify: `xtablo-expo/app/(app)/(tabs)/index.tsx`
- Modify: `xtablo-expo/app/(app)/(tabs)/planning.tsx`
- Modify: `xtablo-expo/app/(app)/(tabs)/settings.tsx`
- Modify: `xtablo-expo/app/(app)/(tabs)/tablos.tsx`
- Modify: `xtablo-expo/app/(app)/channel/[cid].tsx`
- Modify: `xtablo-expo/app/(app)/tablo/[id].tsx`
- Modify: `xtablo-expo/app/(app)/task/[id].tsx`
- Modify: `xtablo-expo/app/(app)/user/index.tsx`
- Modify: `xtablo-expo/app/login.tsx`
- Modify: `xtablo-expo/app/signup.tsx`
- Modify: `xtablo-expo/components/tasks/AssigneePicker.tsx`
- Modify: `xtablo-expo/components/tasks/EtapePicker.tsx`
- Modify: `xtablo-expo/components/tasks/EtapeSheet.tsx`
- Modify: `xtablo-expo/components/tasks/TaskList.tsx`
- Modify: `xtablo-expo/components/tasks/TaskRow.tsx`
- Modify: `xtablo-expo/types/tasks.types.ts`

- [ ] **Step 1: Write a failing verification command**

Run:

```bash
rg -n "#3b82f6|#60a5fa|#1e3a8a|#007bff" xtablo-expo --glob '!**/node_modules/**'
```

Expected: primary-brand blue usages are still present across the Expo app.

- [ ] **Step 2: Replace blue primary accents with the purple brand values**

Apply the following rules:
- replace generic primary `#3b82f6` with `#804EEC`
- replace darker pressed/hover blue where it is acting as the primary companion with `#6f3fd4`
- replace blue gradients used for primary hero/header treatments with purple equivalents derived from the new brand
- replace default blue fallbacks with the purple primary
- keep non-primary semantic colors unchanged

- [ ] **Step 3: Verify the direct primary blue usages are gone**

Run:

```bash
rg -n "#3b82f6|#60a5fa|#1e3a8a|#007bff" xtablo-expo --glob '!**/node_modules/**'
```

Expected: no remaining results, or only intentionally preserved non-primary cases that are explicitly reviewed.

- [ ] **Step 4: Run app verification**

Run:

```bash
cd xtablo-expo && npx tsc --noEmit
cd xtablo-expo && npm run lint
cd xtablo-expo && npx jest --runInBand --watchman=false
```

Expected:
- TypeScript passes
- lint has no new errors caused by this migration
- Jest still passes

- [ ] **Step 5: Commit**

```bash
git add xtablo-expo
git commit -m "feat(expo): align primary accents with web purple brand"
```
