docs: add expo primary purple design spec

docs/superpowers/specs/2026-04-19-xtablo-expo-primary-purple-design.md

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