Replace raw Tailwind colors with semantic names

[tyler-dane]

Priority

Medium (nice to have)

Feature Description

Replace all instances of the raw Tailwind color color-blue-gray-100 throughout the codebase with an appropriate semantic color variable, such as color-menu-bg. Ensure semantic naming aligns with our Compass theming guidelines.

This improves maintainability, makes theme changes easier, and supports our migration strategy for hybrid Tailwind + styled-components usage.

Use Case

Refactoring raw Tailwind color usage like color-blue-gray-100 to semantic variables will:

• Make UI consistent for theming and across light/dark modes
• Allow easier updates and migration for both Tailwind and styled-components
• Reduce risk from future palette, design system, or branding changes
• Improve clarity for contributors maintaining or extending styling.

Additional Context

• Search for all uses of color-blue-gray-100 (classnames and direct references)
• Replace with an existing or new semantic token, preferably color-menu-bg where appropriate
• Coordinate with Compass design system maintainers to ensure correct mapping
• Update documentation/examples to show semantic color usage patterns
• Link to Tailwind theming docs for reference
• Consider edge cases (buttons, backgrounds, hover states)
• Tag with refactor, theme, tailwind, semantic for tracking
• Milestone: Jan-Mar 2026