CodeNomad/tasks/done/053-markdown-style-refactor.md

Task 053 - Markdown & Code Block Styling Refactor

Goal

Extract the remaining markdown/code-block styling from src/index.css into token-aware utilities and ensure all prose rendering uses the shared system.

Prerequisites

• Task 052 complete (panels cleaned up).

Acceptance Criteria

• src/index.css no longer contains .prose, .markdown-code-block, .code-block-header, .code-block-copy, or .code-block-inline blocks; equivalent styling lives in a new src/styles/markdown.css (imported from index.css) and/or token helpers.
• New markdown helpers rely on tokens for colors, borders, and typography (no hard-coded hex values).
• Code block copy button, language label, and inline code maintain current interaction and contrast in both themes.
• MessagePart markdown rendering (src/components/markdown.tsx) automatically picks up the new styling without component changes.

Steps

1. Move markdown-related CSS into a dedicated styles/markdown.css file, rewriting colors with tokens.
2. Replace any legacy values (e.g., text-gray-700) with token references.
3. Update src/index.css to import the new stylesheet after tokens/components layers.
4. Verify formatted markdown in the message stream (headings, lists, code blocks, copy button).

Testing Checklist

• Run npm run build.
• Manually view messages with markdown (headings, inline code, block code, tables) in both themes.

Dependencies

• Depends on Task 052.
• Blocks final cleanup task for attachment/keyboard chips.

Estimated Time

0.75 hours

Notes

• Branch suggestion: feature/task-053-markdown-style-refactor.
• If additional tokens are needed (e.g., --surface-prose), document them in the PR.