mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-13 07:42:55 +01:00
fix(preview): add missing font MIME types to web server
- Added MIME type mappings for .otf, .woff, and .woff2 font formats - Fixed missing break statement after .wav case (was falling through to .mp4) - Fonts now load correctly in editor preview without 404 errors - Resolves OTS parsing error messages in console The web server was already serving project directory files correctly, but browsers were rejecting font files due to missing/incorrect MIME types. Related to TASK-006
This commit is contained in:
Richard Osborne
125
dev-docs/tasks/phase-3/TASK-000-styles-overhaul/INDEX.md
Normal file
125
dev-docs/tasks/phase-3/TASK-000-styles-overhaul/INDEX.md
Normal file
@@ -0,0 +1,125 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user