Rogee
f3e10256a8
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
110 lines
4.9 KiB
Markdown
110 lines
4.9 KiB
Markdown
# Implementation Plan: portal-senior-color-redesign
|
|
|
|
**Branch**: `[feat/portal-senior-color-redesign]` | **Date**: 2026-02-06 | **Spec**: `N/A`
|
|
**Input**: User request to redesign Portal color system for minimal, senior-friendly UX and provide a branch for visual validation.
|
|
|
|
## Summary
|
|
|
|
Implement a senior-friendly, minimal color system for `frontend/portal` by introducing semantic design tokens (default + high-contrast), applying them to shared shells/components (layouts, navbar, footer), and adding PrimeVue-friendly global styling so visual changes are broad, consistent, and easy to validate by product stakeholders.
|
|
|
|
## Technical Context
|
|
|
|
**Language/Version**: Vue 3 (ESM), JavaScript, CSS (Tailwind v4)
|
|
**Primary Dependencies**: Vite, TailwindCSS v4, PrimeVue 4 (`@primevue/themes/aura`), PrimeIcons
|
|
**Storage**: N/A
|
|
**Testing**: `npm -C frontend/portal run lint`, `npm -C frontend/portal run build`
|
|
**Target Platform**: Web browser (Portal tenant-facing frontend)
|
|
**Project Type**: Web frontend module (`frontend/portal`)
|
|
**Performance Goals**: No regressions in initial render and interactivity; preserve current bundle behavior
|
|
**Constraints**: Keep changes focused on styling/theme surfaces; no route/business-logic changes; avoid generated files; maintain readability and accessibility contrast goals
|
|
**Scale/Scope**: Global portal style tokens + shared layout/component surfaces for meaningful visual review
|
|
|
|
## Constitution Check
|
|
|
|
- Conforms to repository planning rule: complete plan defined before non-trivial implementation.
|
|
- Scope limited to `frontend/portal` styling/theme layers and shared UI shell.
|
|
- No generated files are modified.
|
|
- Verification includes frontend lint/build checks before handoff.
|
|
|
|
## Project Structure
|
|
|
|
### Documentation (this feature)
|
|
|
|
```text
|
|
docs/
|
|
└── plan.md
|
|
```
|
|
|
|
### Source Code (repository root)
|
|
|
|
```text
|
|
frontend/portal/
|
|
├── src/assets/main.css
|
|
├── src/main.js
|
|
├── src/layout/LayoutMain.vue
|
|
├── src/layout/LayoutUser.vue
|
|
├── src/layout/LayoutCreator.vue
|
|
├── src/layout/LayoutAuth.vue
|
|
├── src/components/TopNavbar.vue
|
|
└── src/components/AppFooter.vue
|
|
```
|
|
|
|
**Structure Decision**: Apply color redesign through centralized tokens and shared shell/components to maximize consistency and minimize page-level edits.
|
|
|
|
## Plan Phases
|
|
|
|
1. **Token Foundation**
|
|
- Define semantic color tokens for senior-light and high-contrast modes.
|
|
- Map tokens for Tailwind and global CSS usage.
|
|
2. **Shared Surface Application**
|
|
- Update shared layouts/navbar/footer from hardcoded slate/dark palette to semantic tokens.
|
|
- Remove distracting decorative backgrounds and improve contrast/focus cues.
|
|
3. **PrimeVue Alignment + Verification**
|
|
- Add global PrimeVue color overrides for button/input/panel/readability consistency.
|
|
- Run lint/build verification and prepare branch handoff for visual QA.
|
|
|
|
## Tasks
|
|
|
|
1. Create and verify a dedicated feature branch for this redesign.
|
|
2. Rebuild `src/assets/main.css` with:
|
|
- semantic palette tokens,
|
|
- default + high-contrast variable sets,
|
|
- global base styles (body/link/focus),
|
|
- PrimeVue global color overrides.
|
|
3. Ensure `src/main.js` imports and theme setup remain compatible after token changes.
|
|
4. Refactor shared shells to semantic colors and reduced visual noise:
|
|
- `LayoutMain.vue`, `LayoutUser.vue`, `LayoutCreator.vue`, `LayoutAuth.vue`.
|
|
5. Refactor shared navigation/footer surfaces to semantic tokens:
|
|
- `TopNavbar.vue`, `AppFooter.vue`.
|
|
6. Run portal checks (`lint`, `build`) and resolve any regressions caused by this change set.
|
|
7. Provide branch name and reviewer instructions for visual validation.
|
|
|
|
## Dependencies
|
|
|
|
- Phase 2 depends on semantic token completion from Phase 1.
|
|
- Phase 3 depends on Phase 2 to verify final visual consistency and avoid rework.
|
|
- Reviewer validation depends on successful lint/build completion.
|
|
|
|
## Acceptance Criteria
|
|
|
|
- A new branch exists containing only portal color-system redesign changes.
|
|
- Portal shared shells/components use semantic color tokens instead of ad-hoc hardcoded palette where modified.
|
|
- High-contrast mode token set is available for accessibility-forward validation.
|
|
- `npm -C frontend/portal run lint` passes.
|
|
- `npm -C frontend/portal run build` passes.
|
|
- User can run portal and visually compare revised palette/readability across login, home shell, user shell, and creator shell.
|
|
|
|
## Risks
|
|
|
|
- Broad visual changes may impact component contrast unexpectedly in edge views not directly edited.
|
|
- PrimeVue internal styles can override utility classes; requires targeted global overrides.
|
|
- Overly aggressive recolor could reduce brand recognition; keep primary brand hue stable while improving accessibility.
|
|
|
|
## Complexity Tracking
|
|
|
|
> **Fill ONLY if Constitution Check has violations that must be justified**
|
|
|
|
| Violation | Why Needed | Simpler Alternative Rejected Because |
|
|
|-----------|------------|-------------------------------------|
|
|
| N/A | N/A | N/A |
|