mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-11 23:02:56 +01:00
126 lines
4.1 KiB
Markdown
126 lines
4.1 KiB
Markdown
# TASK-000: Design System Modernization - Task Index
|
|
|
|
## Overview
|
|
|
|
This is the master task for OpenNoodl's UI overhaul, broken down into 8 sub-tasks for incremental implementation.
|
|
|
|
**Color Scheme**: RED-MINIMAL palette
|
|
- **Primary**: Noodl Red (`#d21f3c`)
|
|
- **Secondary**: White (`#ffffff`)
|
|
- **Neutrals**: Pure black/gray (no color tint)
|
|
|
|
---
|
|
|
|
## Sub-Task Summary
|
|
|
|
| Task | Name | Priority | Effort | Dependencies |
|
|
|------|------|----------|--------|--------------|
|
|
| **000A** | Token Consolidation & Color Refresh | CRITICAL | 30 min | None |
|
|
| **000B** | Hardcoded Colors - Legacy Styles | HIGH | 1-2 hrs | 000A |
|
|
| **000C** | Hardcoded Colors - Node Graph | HIGH | 1-2 hrs | 000A |
|
|
| **000D** | Hardcoded Colors - Core UI | HIGH | 1-2 hrs | 000A |
|
|
| **000E** | Typography & Spacing Tokens | MEDIUM | 1 hr | 000A |
|
|
| **000F** | Component Updates - Buttons/Inputs | MEDIUM | 1-2 hrs | 000A, 000D, 000E |
|
|
| **000G** | Component Updates - Dialogs/Panels | MEDIUM | 1-2 hrs | 000A, 000D, 000E |
|
|
| **000H** | Migration Wizard Polish | HIGH | 1-2 hrs | 000A-000G |
|
|
|
|
**Total Estimated Effort**: 8-14 hours
|
|
|
|
---
|
|
|
|
## Recommended Execution Order
|
|
|
|
### Phase 1: Foundation (Do First)
|
|
1. **TASK-000A** - Token Consolidation & Color Refresh
|
|
- This is the foundation - everything else depends on it
|
|
- Location: `../TASK-000A-token-consolidation/OVERVIEW.md`
|
|
|
|
### Phase 2: Color Audit (Can Parallelize)
|
|
These can be done in any order after 000A:
|
|
|
|
2. **TASK-000B** - Hardcoded Colors - Legacy Styles
|
|
- Location: `../TASK-000B-hardcoded-colors-legacy/OVERVIEW.md`
|
|
|
|
3. **TASK-000C** - Hardcoded Colors - Node Graph
|
|
- Location: `../TASK-000C-hardcoded-colors-nodegraph/OVERVIEW.md`
|
|
|
|
4. **TASK-000D** - Hardcoded Colors - Core UI
|
|
- Location: `../TASK-000D-hardcoded-colors-coreui/OVERVIEW.md`
|
|
|
|
5. **TASK-000E** - Typography & Spacing Tokens
|
|
- Can be done independently
|
|
- Location: `../TASK-000E-typography-spacing/OVERVIEW.md`
|
|
|
|
### Phase 3: Visual Polish (After Color Audit)
|
|
6. **TASK-000F** - Component Updates - Buttons/Inputs
|
|
- Location: `../TASK-000F-component-buttons-inputs/OVERVIEW.md`
|
|
|
|
7. **TASK-000G** - Component Updates - Dialogs/Panels
|
|
- Location: `../TASK-000G-component-dialogs-panels/OVERVIEW.md`
|
|
|
|
### Phase 4: Final Polish
|
|
8. **TASK-000H** - Migration Wizard Polish
|
|
- Should be last as it benefits from all prior work
|
|
- Location: `../TASK-000H-migration-wizard-polish/OVERVIEW.md`
|
|
|
|
---
|
|
|
|
## Key Files Reference
|
|
|
|
### Color Token Files
|
|
- `packages/noodl-editor/src/editor/src/styles/custom-properties/colors.css` (primary)
|
|
- `packages/noodl-core-ui/src/styles/custom-properties/colors.css` (secondary)
|
|
|
|
### Color Source
|
|
- `dev-docs/tasks/phase-3/TASK-000-styles-overhaul/COLORS-RED-MINIMAL.md`
|
|
|
|
### Entry Points to Verify
|
|
- `packages/noodl-editor/src/editor/index.ts`
|
|
- `packages/noodl-core-ui/.storybook/preview.ts`
|
|
|
|
---
|
|
|
|
## Success Criteria (All Tasks Complete)
|
|
|
|
### Technical
|
|
- [ ] All colors use CSS variables (no hardcoded hex in styles)
|
|
- [ ] Token system supports future light theme
|
|
- [ ] Typography and spacing tokens available
|
|
|
|
### Visual
|
|
- [ ] App uses consistent RED-MINIMAL palette
|
|
- [ ] Pure dark backgrounds (no warm/brown tint)
|
|
- [ ] Primary accent is red (`#d21f3c`)
|
|
- [ ] Good contrast and readability
|
|
|
|
### User Experience
|
|
- [ ] Migration wizard looks polished
|
|
- [ ] Interactive states are obvious
|
|
- [ ] Overall feel matches modern dev tools
|
|
|
|
---
|
|
|
|
## Verification Commands
|
|
|
|
After all tasks complete:
|
|
|
|
```bash
|
|
# Check for remaining hardcoded colors in styles
|
|
grep -rn "#[0-9a-fA-F]\{6\}" packages/noodl-editor/src/editor/src/styles/ --include="*.css" --include="*.scss" | wc -l
|
|
|
|
# Check views directory
|
|
grep -rn "#[0-9a-fA-F]\{6\}" packages/noodl-editor/src/editor/src/views/ --include="*.css" --include="*.scss" | wc -l
|
|
|
|
# Check core-ui components
|
|
grep -rn "#[0-9a-fA-F]\{6\}" packages/noodl-core-ui/src/components/ --include="*.css" --include="*.scss" | wc -l
|
|
```
|
|
|
|
**Target: Near-zero hardcoded colors** (some node-specific colors may remain intentionally)
|
|
|
|
---
|
|
|
|
## Related Documents
|
|
|
|
- `DESIGN-SYSTEM-MODERNISATION.md` - Original detailed planning document
|
|
- `COLORS-RED-MINIMAL.md` - Complete CSS palette to use
|