refactor: map tailwind colors to css variables for dark mode support - #713
refactor: map tailwind colors to css variables for dark mode support#713matilde-sousa wants to merge 10 commits into
Conversation
✅ Deploy Preview for tts-fe-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
🌐 Netlify Preview disponível: |
There was a problem hiding this comment.
Pull request overview
This PR introduces a design-token based color system by defining theme CSS custom properties for light/dark mode and wiring Tailwind color utilities to those variables, so components can use consistent bg-*/text-* tokens across themes.
Changes:
- Added 6 new CSS custom properties under
:rootand.darkfor background/foreground/accent/border tokenization. - Extended Tailwind’s
theme.colorsto expose those CSS variables as utilities (bg-background,text-foreground,bg-accent, etc.). - Refactored the global
bodystyling to use the new token utilities instead of hardcoded Tailwind colors.
Reviewed changes
Copilot reviewed 1 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| tailwind.config.js | Adds Tailwind color entries mapped to new CSS variables so token utilities resolve via custom properties. |
| src/app.css | Defines the new light/dark CSS variables and updates global body styling to use token utilities. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
PedroLunet
left a comment
PedroLunet
left a comment
There was a problem hiding this comment.
Good job, just a quick correction! :)
|
🌐 Netlify Preview disponível: |
|
🌐 Netlify Preview disponível: |
|
🌐 Netlify Preview disponível: |
PedroLunet
left a comment
PedroLunet
left a comment
There was a problem hiding this comment.
@mariana2103 , @matilde-sousa and I upgraded this branch to tailwind 4 for it to be easier to solve the conflicts with develop.
I think its working fine but its hard to tell. This should have been a really easy PR but the migration on develop made it tricky.
Looks good to me but pls take close attention.
| --color-blueGray-950: #020617; | ||
|
|
||
| --color-background: var(--color-background); | ||
| --color-foreground: var(--color-foreground); |
There was a problem hiding this comment.
These are self-referential, i am not that sure but i think CSS marks them all as invalid and they resolve to nothing. The actual values are defined in :root and .dark below.
| outline: | ||
| 'border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50', | ||
| 'outline-solid': 'bg-white border-2 border-black text-black hover:bg-gray-100', | ||
| secondary: |
There was a problem hiding this comment.
Missing dark mode classes, every other variant has dark: counterparts but this one uses hardcoded border-black text-black bg-white, which will look broken in dark mode.
- Keep tailwindcss 4.2.4, prettier 3.8.3, prettier-plugin-tailwindcss 0.8.0 from this branch - Take postcss 8.5.14 from develop (newer) - Keep outline-solid variant + CourseInfo type and courseInfo prop from both branches
|
🌐 Netlify Preview disponível: |
|
🌐 Netlify Preview disponível: |
Closes #665
This pull request updates the application's color system to use new CSS custom properties for background, foreground, and accent colors, and refactors the body styles to use these variables instead of hardcoded Tailwind classes. This makes theming more consistent and maintainable across light and dark modes.
Color system and theming improvements:
--color-background,--color-foreground,--color-accent, etc.) for both light mode (:root) and dark mode (.dark) to centralize color definitions and simplify future theme changes. [1] [2]bodystyles to use the newbg-backgroundandtext-foregroundutility classes, which reference the new color variables, replacing the previous hardcoded Tailwind color classes.