Rename Tailwind colors to semantic names and switch to CSS variables #4304
Labels
💻 aspect: code
Concerns the software code in the repository
✨ goal: improvement
Improvement to an existing user-facing feature
🟨 priority: medium
Not blocking but should be addressed soon
🧱 stack: frontend
Related to the Nuxt frontend
⛔ status: blocked
Blocked & therefore, not ready for work
Milestone
Description
Using the colors mapped in this issue, rename all of the colors in the Tailwind configuration file and the tailwind classes used in our frontend components to use new, semantic names.
I strongly reccommend using find-and-replace with scripts like ripgrep or tools like the find and replace built into VS Code (which uses ripgrep internally!).
This PR will not result in any visual changes but will have a large diff. Provided all tests pass it will be safe to merge.
This PR should also move the colors from being hardcoded in the Tailwind configuration to being CSS variables. These colors should be nested under a
:root,:is(.light-mode *) {}
CSS selector.Here is an example with the "yellow" color:
Before (tailwind.config.ts)
After
Tailwind.config.ts
tailwind.css
The text was updated successfully, but these errors were encountered: