151 lines
7.2 KiB
Markdown
151 lines
7.2 KiB
Markdown
---
|
|
phase: 02.1-app-shell-navigation-search-foundation
|
|
plan: 02
|
|
subsystem: ui
|
|
tags: [kotlin, compose-multiplatform, theme, design-tokens, composition-local]
|
|
|
|
requires:
|
|
- phase: 02.1-01
|
|
provides: App shell foundation dependencies and Compose theme baseline
|
|
provides:
|
|
- Recipe semantic color, typography, spacing, shape, and glass token classes
|
|
- RecipeTheme CompositionLocal scaffold with read-only accessors
|
|
- Preserved MaterialTheme wrapper for legacy auth screens
|
|
affects: [app-shell, navigation, search, ui-chrome, future-feature-screens]
|
|
|
|
tech-stack:
|
|
added: []
|
|
patterns: [Compose staticCompositionLocalOf token scaffold, MaterialTheme compatibility wrapper]
|
|
|
|
key-files:
|
|
created:
|
|
- composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeColors.kt
|
|
- composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeTypography.kt
|
|
- composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeSpacing.kt
|
|
- composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeShapes.kt
|
|
- composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeGlass.kt
|
|
modified:
|
|
- composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeTheme.kt
|
|
|
|
key-decisions:
|
|
- "Keep MaterialTheme(colorScheme = ...) inside RecipeTheme so Phase 2 auth screens continue to resolve MaterialTheme symbols."
|
|
- "Map UI-SPEC spacing tokens 2xl and 3xl to Kotlin identifiers xxl and xxxl."
|
|
- "Keep Material 3 imports only in RecipeTheme.kt; token files depend only on Compose UI/runtime primitives."
|
|
|
|
patterns-established:
|
|
- "RecipeTheme exposes colors, typography, spacing, shapes, and glass through @Composable @ReadOnlyComposable getters."
|
|
- "Theme token data classes carry locked UI-SPEC values and avoid raw Material 3 dependencies."
|
|
|
|
requirements-completed: [UI-04, UI-09]
|
|
|
|
duration: 6min
|
|
completed: 2026-05-08
|
|
---
|
|
|
|
# Phase 02.1 Plan 02: Design Token Theme Summary
|
|
|
|
**Recipe design tokens with light/dark semantic colors, typography, spacing, chrome shape/glass defaults, and a MaterialTheme-compatible RecipeTheme provider.**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** 6 min
|
|
- **Started:** 2026-05-08T12:07:58Z
|
|
- **Completed:** 2026-05-08T12:14:06Z
|
|
- **Tasks:** 2
|
|
- **Files modified:** 7
|
|
|
|
## Accomplishments
|
|
|
|
- Added five token data classes for colors, typography, spacing, shapes, and glass defaults.
|
|
- Rewrote `RecipeTheme.kt` to provide five static CompositionLocals plus `RecipeTheme.*` read-only accessors.
|
|
- Preserved the Material 3 wrapper so `LoginScreen`, `PostLoginPlaceholderScreen`, and `SplashScreen` continue using `MaterialTheme.*`.
|
|
|
|
## Task Commits
|
|
|
|
Each task was committed atomically:
|
|
|
|
1. **Task 1: Create token data classes** - `7263231` (feat)
|
|
2. **Task 2: Rewrite RecipeTheme.kt** - `6c8ca90` (feat)
|
|
|
|
**Plan metadata:** this docs commit
|
|
|
|
## Files Created/Modified
|
|
|
|
- `composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeColors.kt` - Semantic light/dark color tokens with locked UI-SPEC hex values.
|
|
- `composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeTypography.kt` - Display, title, body, and label text styles.
|
|
- `composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeSpacing.kt` - xs/sm/lg/xl/xxl/xxxl spacing scale.
|
|
- `composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeShapes.kt` - Pill/circle chrome radii.
|
|
- `composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeGlass.kt` - Border, shadow, and blur defaults for future GlassSurface work.
|
|
- `composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/theme/RecipeTheme.kt` - MaterialTheme wrapper plus Recipe CompositionLocal provider.
|
|
- `.planning/phases/02.1-app-shell-navigation-search-foundation/02.1-02-SUMMARY.md` - Execution summary.
|
|
|
|
## Decisions Made
|
|
|
|
- Followed the plan's dual-theme decision: legacy auth code remains on MaterialTheme, while new shell code reads `RecipeTheme.colors`, `RecipeTheme.typography`, `RecipeTheme.spacing`, `RecipeTheme.shapes`, and `RecipeTheme.glass`.
|
|
- Used Kotlin-safe spacing identifiers `xxl` and `xxxl` for UI-SPEC `2xl` and `3xl`.
|
|
- Kept token files free of `androidx.compose.material3` imports; only `RecipeTheme.kt` imports Material 3.
|
|
|
|
## Deviations from Plan
|
|
|
|
No implementation deviations from the locked token values or theme API.
|
|
|
|
### Verification Deviations
|
|
|
|
**1. Plan command unavailable: `:composeApp:commonTest`**
|
|
- **Found during:** Plan-level verification
|
|
- **Issue:** Gradle reported that task `:composeApp:commonTest` does not exist in `:composeApp`.
|
|
- **Resolution:** Ran `:composeApp:iosSimulatorArm64Test` as the available iOS/common-source regression test task.
|
|
- **Result:** Passed.
|
|
|
|
**2. Pre-existing Spotless failures block `:composeApp:check`**
|
|
- **Found during:** Task 2 acceptance verification
|
|
- **Issue:** `:composeApp:check` fails at `spotlessKotlinCheck` in files outside this plan, including `App.kt`, `AuthSession.kt`, and `LokksmithOidcSupport.kt`.
|
|
- **Resolution:** Did not modify those files because plan ownership is limited to theme files and the user explicitly requested that dirty auth/user files remain untouched.
|
|
- **Result:** Owned theme code compiles through `:composeApp:compileKotlinIosSimulatorArm64`; no auth-screen diff was introduced.
|
|
|
|
---
|
|
|
|
**Total deviations:** 0 implementation deviations, 2 verification/environment deviations.
|
|
**Impact on plan:** Theme implementation is complete. Full `check` remains blocked by unrelated formatting debt outside this plan's ownership.
|
|
|
|
## Issues Encountered
|
|
|
|
- The plan's TDD flags could not be executed as RED/GREEN test commits without creating test files outside the plan ownership list. Verification was performed through compile and acceptance checks instead.
|
|
- Full `:composeApp:check` remains blocked by unrelated Spotless violations outside the owned files.
|
|
|
|
## TDD Gate Compliance
|
|
|
|
Warning: Task-level `tdd="true"` was present, but no test files were owned by this plan. No RED `test(02.1-02)` commit was created. The implementation was verified with the plan's compile, grep, auth-diff, and iOS simulator test checks.
|
|
|
|
## Known Stubs
|
|
|
|
None.
|
|
|
|
## Verification
|
|
|
|
- `./gradlew :composeApp:compileKotlinIosSimulatorArm64 -q` - PASS
|
|
- `./gradlew :composeApp:iosSimulatorArm64Test -q` - PASS
|
|
- `./gradlew :composeApp:commonTest -q` - NOT AVAILABLE, task does not exist
|
|
- `./gradlew :composeApp:check -q` - BLOCKED by pre-existing Spotless failures outside owned files
|
|
- No Material 3 imports in `RecipeColors.kt`, `RecipeTypography.kt`, `RecipeSpacing.kt`, `RecipeShapes.kt`, or `RecipeGlass.kt` - PASS
|
|
- `git diff --name-only composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/screens/auth/` - PASS, no auth screen changes
|
|
|
|
## User Setup Required
|
|
|
|
None - no external service configuration required.
|
|
|
|
## Next Phase Readiness
|
|
|
|
Plans 02.1-03 and later can consume the Recipe token API and build glass/search/dock components on top of it. The unrelated Spotless issues should be resolved by their owning wave before a full `composeApp:check` gate is required.
|
|
|
|
## Self-Check: PASSED
|
|
|
|
- Created/modified files exist on disk.
|
|
- Task commits `7263231` and `6c8ca90` exist in git history.
|
|
- `.planning/ROADMAP.md` was not modified.
|
|
- `.planning/STATE.md` remains dirty from pre-existing orchestrator/shared tracking state and was not updated by this plan.
|
|
|
|
---
|
|
*Phase: 02.1-app-shell-navigation-search-foundation*
|
|
*Completed: 2026-05-08*
|