diff --git a/docs/superpowers/specs/2026-04-19-xtablo-expo-primary-purple-design.md b/docs/superpowers/specs/2026-04-19-xtablo-expo-primary-purple-design.md new file mode 100644 index 0000000..add4aad --- /dev/null +++ b/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.