mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-11 23:02:56 +01:00
134 lines
3.7 KiB
Markdown
134 lines
3.7 KiB
Markdown
# TASK-000A: Token Consolidation & Color Refresh - CHANGELOG
|
|
|
|
## 2025-12-30 - COMPLETED ✅
|
|
|
|
### Summary
|
|
|
|
Synchronized color token files across editor and core-ui packages to use the unified RED-MINIMAL palette. The editor package already had the RED-MINIMAL palette implemented; this task completed the sync by updating the core-ui package.
|
|
|
|
### Changes Made
|
|
|
|
#### 1. Synced Core UI Color Tokens
|
|
|
|
**File:** `packages/noodl-core-ui/src/styles/custom-properties/colors.css`
|
|
|
|
- **Replaced** old Rose + Violet palette with RED-MINIMAL palette
|
|
- **Updated** to match editor's color system exactly
|
|
- **Key Changes:**
|
|
- Primary color: Rose (#f43f5e) → Noodl Red (#d21f3c)
|
|
- Secondary color: Violet (#a78bfa) → White (#ffffff)
|
|
- Neutrals: Zinc palette → Pure black/white neutrals (no color tint)
|
|
- Status colors: Amber warnings → Red-based system
|
|
|
|
#### 2. Verified Import Paths
|
|
|
|
- ✅ Editor correctly imports: `../editor/src/styles/custom-properties/colors.css`
|
|
- ✅ Storybook correctly imports: `../src/styles/custom-properties/colors.css`
|
|
- ✅ Both files now contain identical RED-MINIMAL palette
|
|
|
|
### Status Before This Task
|
|
|
|
**Editor colors.css:**
|
|
|
|
- ✅ Already using RED-MINIMAL palette
|
|
- ✅ Pure neutral backgrounds (#0a0a0a → #333333)
|
|
- ✅ Red primary (#d21f3c)
|
|
- ✅ White secondary
|
|
|
|
**Core UI colors.css:**
|
|
|
|
- ❌ Still using Rose + Violet palette
|
|
- ❌ Zinc-based neutrals
|
|
- ❌ Different color tokens than editor
|
|
|
|
### Status After This Task
|
|
|
|
**Both Files:**
|
|
|
|
- ✅ Identical RED-MINIMAL palette
|
|
- ✅ Single source of truth (copied between packages)
|
|
- ✅ Pure neutral backgrounds (no warm/brown tint)
|
|
- ✅ Red primary (#d21f3c)
|
|
- ✅ White secondary
|
|
- ✅ Legacy aliases maintained for backwards compatibility
|
|
|
|
### Testing
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
**Result:** ✅ Compiled successfully
|
|
|
|
- No CSS variable errors
|
|
- Editor launches correctly
|
|
- Webpack build completes without issues
|
|
|
|
### Files Modified
|
|
|
|
1. `packages/noodl-core-ui/src/styles/custom-properties/colors.css`
|
|
- Complete replacement with RED-MINIMAL palette
|
|
- 308 lines (identical to editor's version)
|
|
|
|
### Visual Changes Expected
|
|
|
|
**Backgrounds:**
|
|
|
|
- Warmer zinc tones (#18181b) → Pure blacks (#0a0a0a, #121212, #1a1a1a)
|
|
- More neutral, less warm appearance
|
|
|
|
**Primary Actions:**
|
|
|
|
- Rose pink (#f43f5e) → Noodl Red (#d21f3c)
|
|
- Slightly darker, more brand-aligned
|
|
|
|
**Secondary Actions:**
|
|
|
|
- Violet (#a78bfa) → White (#ffffff)
|
|
- More minimal, higher contrast
|
|
|
|
**Text:**
|
|
|
|
- Should maintain good contrast with pure black backgrounds
|
|
|
|
### Next Steps
|
|
|
|
This completes TASK-000A. The remaining sub-tasks can now proceed:
|
|
|
|
- **TASK-000B**: Hardcoded Colors - Legacy Styles
|
|
- **TASK-000C**: Hardcoded Colors - Node Graph
|
|
- **TASK-000D**: Hardcoded Colors - Core UI
|
|
- **TASK-000E**: Typography & Spacing Tokens
|
|
- **TASK-000F**: Component Updates - Buttons/Inputs
|
|
- **TASK-000G**: Component Updates - Dialogs/Panels
|
|
- **TASK-000H**: Migration Wizard Polish
|
|
|
|
### Notes
|
|
|
|
- Both packages now use identical color systems
|
|
- Legacy aliases (`--base-color-yellow-*`, `--base-color-teal-*`, `--base-color-grey-*`) maintained for backwards compatibility
|
|
- Future light theme structure included (commented out) in both files
|
|
- No breaking changes - all existing token names preserved
|
|
|
|
### Risk Assessment
|
|
|
|
**Risk Level:** ✅ LOW
|
|
|
|
- Editor was already using RED-MINIMAL successfully
|
|
- Only synced core-ui to match
|
|
- Legacy aliases prevent breaking existing components
|
|
- Easy rollback via git if needed
|
|
|
|
### Time Spent
|
|
|
|
- **Estimated:** 30 minutes
|
|
- **Actual:** ~20 minutes
|
|
- **Efficiency:** Under estimate ✅
|
|
|
|
---
|
|
|
|
**Status:** COMPLETE
|
|
**Dependencies Resolved:** None (was foundation task)
|
|
**Blocks:** None
|
|
**Unblocks:** TASK-000B, 000C, 000D, 000E (can now proceed)
|