docs(08): capture phase context

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 17:53:23 +02:00
parent 9196d030cc
commit 43246745e7
1 changed files with 86 additions and 0 deletions
@@ -0,0 +1,86 @@
+# Phase 8: Theme Foundation - Context
+
+**Gathered:** 2026-03-31
+**Status:** Ready for planning
+
+<domain>
+## Phase Boundary
+
+App has a complete MD3 color token system and working dark mode toggle with no flash of unstyled content. All existing hardcoded color classes are migrated to semantic tokens. This phase delivers the infrastructure that Phases 9-11 build upon.
+
+</domain>
+
+<decisions>
+## Implementation Decisions
+
+### Color palette scope
+- Essential roles only (~10 tokens): primary, on-primary, surface, on-surface, surface-variant, surface-container, on-surface-variant, outline, error, on-error
+- Primary hue: Indigo/Purple (#4338CA light, #A5B4FC dark)
+- Neutral gray surfaces (no tinted surfaces) — primary color only on interactive elements
+- Migrate all 63 existing hardcoded color classes to semantic tokens in Phase 8 (10 files), not deferred to Phase 9
+
+### Theme toggle UX
+- Position: top-right corner of the app, next to the "Ready2Blob" title
+- Style: segmented control with icons + labels [ Sun Light | Moon Dark | Monitor System ]
+- Default for first-time visitors: System (respects OS preference)
+- DOM class toggle on `<html>`, not React Context (already decided in STATE.md)
+
+### Flash prevention
+- Inline blocking script in `<head>` of index.html — reads localStorage before CSS paints
+- localStorage key: `r2b-theme` (namespaced to avoid conflicts)
+- Values: `"light"` | `"dark"` | `"system"` — absent treated as system
+- Dark class applied to `<html>` element (Tailwind v4 convention)
+- No real-time OS theme sync — system preference checked only on page load
+- No matchMedia change listener (user must reload if OS theme changes mid-session)
+
+### Claude's Discretion
+- Token naming convention (MD3 canonical vs simplified)
+- Token file structure (single file vs split)
+- Exact @theme directive mapping syntax
+- Segmented control component implementation details
+- Exact indigo/purple shade values and dark mode variants
+- Transition animation on theme switch (if any)
+
+</decisions>
+
+<code_context>
+## Existing Code Insights
+
+### Reusable Assets
+- No existing theme infrastructure — building from scratch
+- `index.css` currently just `@import "tailwindcss"` — clean starting point for token definitions
+
+### Established Patterns
+- Tailwind v4 via `@tailwindcss/vite` plugin (no config files)
+- `useReducer` + Context API for state management
+- Component structure: `src/components/ui/` (primitives) and `src/components/wizard/` (steps)
+
+### Integration Points
+- `src/index.css` — token definitions and @theme directive go here
+- `index.html` — inline script for flash prevention
+- `src/App.tsx` — ThemeToggle component placement (top-right, next to h1)
+- 10 .tsx files with 63 hardcoded color classes to migrate:
+  - App.tsx (2), BackendCard.tsx (5), FieldRenderer.tsx (17), PasswordField.tsx (8)
+  - AzureAuthToggle.tsx (7), SftpAuthToggle.tsx (10), DeploymentStep.tsx (2)
+  - OutputBlock.tsx (4), RemoteConfigStep.tsx (2), ReviewStep.tsx (6)
+
+</code_context>
+
+<specifics>
+## Specific Ideas
+
+No specific requirements — open to standard approaches
+
+</specifics>
+
+<deferred>
+## Deferred Ideas
+
+None — discussion stayed within phase scope
+
+</deferred>
+
+---
+
+*Phase: 08-theme-foundation*
+*Context gathered: 2026-03-31*