Files

T

kawaandClaude Opus 4.6 43246745e7 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

3.2 KiB

Raw Blame History

Phase 8: Theme Foundation - Context

Gathered: 2026-03-31 Status: Ready for planning

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

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

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

## Specific Ideas

No specific requirements — open to standard approaches

## Deferred Ideas

None — discussion stayed within phase scope

Phase: 08-theme-foundation Context gathered: 2026-03-31

3.2 KiB Raw Blame History