refactor: replace hard-coded colors with semantic theme colors

[jezweb]

Summary

Replaces hard-coded Tailwind color classes with shadcn/ui semantic theme colors for better dark mode support and maintainability.

Changes

todo-card.tsx

• text-gray-500 / text-gray-400 / text-gray-600 → text-muted-foreground (with opacity variants)
• text-blue-600 → text-primary (image badge)
• text-red-600 → text-destructive (overdue indicators)

todo-list.page.tsx

• text-gray-600 / text-gray-500 / text-gray-400 → text-muted-foreground (with opacity variants)

What Stayed the Same

Priority and status badge colors (bg-green-100, bg-yellow-100, bg-red-100, etc.) were intentionally kept as they're functional semantic indicators:

• 🟢 Green = Low priority / Completed
• 🟡 Yellow = Medium priority
• 🟠 Orange = High priority
• 🔴 Red = Urgent

These are data visualization colors, not UI theme colors.

Benefits

✅ Theme-aware: Colors automatically adapt to light/dark mode
✅ Consistent: Uses shadcn/ui semantic color system
✅ Maintainable: Change entire theme by editing CSS variables in one place
✅ Professional: Avoids arbitrary hard-coded color choices

Before vs After

Before (hard-coded):

After (semantic):

Semantic Colors Used

• text-muted-foreground - Subtle/secondary text
• text-muted-foreground/70 - Even more subtle (70% opacity)
• text-muted-foreground/40 - Very subtle (40% opacity for emoji)
• text-primary - Primary accent color
• text-destructive - Error/warning states

Testing

1. View todos list in light mode → text readable
2. Switch to dark mode → text adapts automatically
3. Verify overdue dates show in destructive color
4. Check image badges use primary color

Part of UX improvement phase to follow shadcn/ui best practices.

[coderabbitai]

Warning

Rate limit exceeded

@jezweb has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 27 minutes and 53 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between a44687a and ecb4699.

📒 Files selected for processing (2)

• src/modules/todos/components/todo-card.tsx (3 hunks)
• src/modules/todos/todo-list.page.tsx (2 hunks)

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}