Replace hardcoded hex colors with Tailwind design tokens - #29
Open
AakashKB wants to merge 2 commits into
Open
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (19)
✅ Files skipped from review due to trivial changes (18)
📝 WalkthroughWalkthroughReplaced multiple hard-coded color values with CSS custom properties and Tailwind design-token classes across UI components, added new theme CSS variables, and made .gitignore Supabase rules use recursive glob patterns. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
core-web/src/components/Landing/LandingPage.tsx (1)
267-293: Consider replacingtext-[#000]withtext-text-bodyfor consistency.The file now mixes
text-text-body(used elsewhere, e.g., lines 181, 196) with hardcodedtext-[#000]. Since#000is equivalent to#000000which matches--color-text-body, these could be unified for consistency with the PR's goal of using design tokens.Affected lines: 268, 272, 283, 291.
♻️ Suggested diff
<div className="flex justify-end"> - <div className="bg-[`#F4F4F4`] rounded-[10px] px-2.5 py-1.5 max-w-[70%]"> - <p className="text-[9px] text-[`#000`]">What's on my schedule today?</p> + <div className="bg-[`#F4F4F4`] rounded-[10px] px-2.5 py-1.5 max-w-[70%]"> + <p className="text-[9px] text-text-body">What's on my schedule today?</p> </div> </div> <div className="max-w-[85%]"> - <p className="text-[9px] text-[`#000`] mb-1.5">You have 3 meetings today:</p> + <p className="text-[9px] text-text-body mb-1.5">You have 3 meetings today:</p> <div className="space-y-1"> ... <p className="text-[7px] text-text-tertiary">{evt.time}</p> - <p className="text-[8px] font-medium text-[`#000`]">{evt.title}</p> + <p className="text-[8px] font-medium text-text-body">{evt.title}</p> ... </div> <div className="flex justify-end"> <div className="bg-[`#F4F4F4`] rounded-[10px] px-2.5 py-1.5 max-w-[70%]"> - <p className="text-[9px] text-[`#000`]">Draft a reply to Sarah's email</p> + <p className="text-[9px] text-text-body">Draft a reply to Sarah's email</p> </div> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@core-web/src/components/Landing/LandingPage.tsx` around lines 267 - 293, Replace hardcoded text color classes `text-[`#000`]` in LandingPage.tsx with the design-token class `text-text-body` for consistency; update the <p> elements inside the schedule card and the draft-reply card (the elements rendering "What's on my schedule today?", "You have 3 meetings today:", each event title line using {evt.title}, and "Draft a reply to Sarah's email") so their className uses `text-text-body` instead of `text-[`#000`]`. Ensure you change every occurrence in the mapped event block and the surrounding static <p> elements so all text uses `text-text-body` consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.gitignore:
- Around line 45-47: This PR contains unrelated .gitignore changes (the
recursive patterns "**/supabase/.temp/" and "**/supabase/.branches/") that
should be moved out of the color-token refactor; revert or remove those two Git
ignore entries from this branch and create a small housekeeping branch/PR with
the .gitignore edits instead, then update this PR to include only the intended
color-token replacements and add the missing seven component files (Chat,
Calendar, Dropdown, Landing components) referenced in the summary so the diff
matches the PR description.
---
Nitpick comments:
In `@core-web/src/components/Landing/LandingPage.tsx`:
- Around line 267-293: Replace hardcoded text color classes `text-[`#000`]` in
LandingPage.tsx with the design-token class `text-text-body` for consistency;
update the <p> elements inside the schedule card and the draft-reply card (the
elements rendering "What's on my schedule today?", "You have 3 meetings today:",
each event title line using {evt.title}, and "Draft a reply to Sarah's email")
so their className uses `text-text-body` instead of `text-[`#000`]`. Ensure you
change every occurrence in the mapped event block and the surrounding static <p>
elements so all text uses `text-text-body` consistently.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f25b0b95-b672-470f-a78f-43728ca2a1c8
📒 Files selected for processing (8)
.gitignorecore-web/src/components/Calendar/components/AllDayEventsSection.tsxcore-web/src/components/Calendar/components/DraggableEventBlock.tsxcore-web/src/components/Calendar/components/MonthView.tsxcore-web/src/components/Chat/ContentPartsRenderer.tsxcore-web/src/components/Chat/StreamingText.tsxcore-web/src/components/Dropdown/Dropdown.tsxcore-web/src/components/Landing/LandingPage.tsx
Comment on lines
+45
to
+47
| # Supabase local (match nested e.g. core-api/supabase/) | ||
| **/supabase/.temp/ | ||
| **/supabase/.branches/ |
There was a problem hiding this comment.
These changes are unrelated to the stated PR objectives.
The .gitignore updates for Supabase artifacts are technically correct (the recursive **/ patterns will properly match nested directories), but they are completely unrelated to the PR's stated goal of "Replace hardcoded hex colors with Tailwind design tokens."
Additionally, the PR summary mentions updating 7 component files across Chat, Calendar, Dropdown, and Landing, but only .gitignore is provided for review.
Recommendations:
- Move these
.gitignorechanges to a separate housekeeping PR. - Ensure this PR only contains the color token replacements described in the objectives.
- Verify that all 7 mentioned component files are included in the PR.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.gitignore around lines 45 - 47, This PR contains unrelated .gitignore
changes (the recursive patterns "**/supabase/.temp/" and
"**/supabase/.branches/") that should be moved out of the color-token refactor;
revert or remove those two Git ignore entries from this branch and create a
small housekeeping branch/PR with the .gitignore edits instead, then update this
PR to include only the intended color-token replacements and add the missing
seven component files (Chat, Calendar, Dropdown, Landing components) referenced
in the summary so the diff matches the PR description.
AakashKB
force-pushed
the
fix/replace-hardcoded-colors-with-tokens
branch
from
April 1, 2026 18:19
b8ab7c0 to
ac4bf0a
Compare
Contributor
Author
|
Made a commit to add new themes where a match for hard-coded color was non-existent. Can revert this if we just want it for exact matches. And it seems the existing tw themes diverge from the design guideline mdx tokens. Using index as source of truth for now, lmk if otherwise |
|
2 tasks
hackertron
previously approved these changes
Apr 3, 2026
Contributor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
core-web/src/index.cssToken replacements made
#FFFFFFvar(--color-bg-white)#EAEAEAbg-border-light#E7E7E6var(--color-border-gray)/border-border-gray#F4F3F1bg-gray-50#00000054text-text-tertiaryRemaining hardcoded colors (no exact token match)
These were intentionally skipped, the closest token is listed but none are exact matches. Would it make sense to add new tokens to the theme for these, or adjust existing ones?
#F4F4F4--color-bg-gray#F4F3F1#FCFCFC--color-bg-light#FDFDFD#F9F9F9--color-bg-shell#F6F6F6#F7F8FA--color-bg-light#FDFDFD#F8F8FA--color-bg-light#FDFDFD#FAFAFA--color-bg-light#FDFDFD#F0F1F3--color-gray-100#E7E7E6#E3E3E5--color-bg-gray-dark#E5E7EB#1e1e1e--color-bg-dark#000000--color-bg-codetoken#2d2d2d--color-gray-800#3D3D3C--color-bg-code-headertoken#323232--color-gray-800#3D3D3C#000--color-text-dark#000000Test plan
Closes #11
Summary by CodeRabbit