OpenNoodl/dev-docs/tasks/phase-9-styles-overhaul/CLEANUP-SUBTASKS/TASK-000A-token-consolidation/CHANGELOG.md

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

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)