CodeNomad/tasks/done/043-color-variable-migration.md

Task 043 - Color Variable Migration

Goal

Move all hard-coded color variables from src/index.css into src/styles/tokens.css, aligning with the documented light and dark palettes.

Prerequisites

• Task 042 complete (token scaffolding in place).
• Access to color definitions from docs/user-interface.md.

Acceptance Criteria

• Light mode color tokens (--surface-*, --border-*, --text-*, --accent, --status-success|error|warning) defined under :root in src/styles/tokens.css.
• Dark mode overrides defined under [data-theme="dark"] in the same file.
• src/index.css no longer declares color variables directly; it references the new tokens instead.
• Theme toggle continues to switch palettes correctly.

Steps

1. Transfer existing color custom properties from src/index.css into src/styles/tokens.css, renaming them to semantic names that match the design doc.
2. Add any missing variables required by the design spec (e.g., --surface-muted, --text-inverted).
3. Update src/index.css to reference the new semantic variable names where necessary (e.g., background-color: var(--surface-base)).
4. Remove redundant color declarations from src/index.css after confirming replacements.

Testing Checklist

• Run npm run dev and switch between light and dark themes.
• Verify primary screens (instance tabs, session view, prompt input) in both themes for correct colors.
• Confirm no CSS warnings/errors in the console.

Dependencies

• Depends on Task 042.
• Blocks Task 044 (typography tokens) and Task 045 (component migration batch 1).

Estimated Time

0.5 hours

Notes

• Align hex values with docs/user-interface.md; note any intentional deviations in the PR description.
• Provide side-by-side screenshots (light/dark) in the PR for quicker review.