feat: standardize color system with CSS variables across frontend#417
Merged
Hydrax117 merged 2 commits intoJun 1, 2026
Merged
Conversation
…d components Replace mixed hardcoded Tailwind colors with a unified CSS variable-based semantic token system throughout the entire frontend codebase. ## What changed ### globals.css — extended semantic token set - Kept existing tokens: background, foreground, card, primary, secondary, muted, accent, destructive, border, input, ring - Added surface tokens: --surface, --surface-raised, --surface-overlay (replaces bg-gray-800/700/900 dark surface patterns) - Added status tokens: --success/foreground/muted/muted-foreground, --warning/..., --info/... (replaces green-500, red-500, blue-500 patterns) - Updated --primary to blue (217 91% 60%) to match actual usage - Updated --destructive to full-opacity red in dark mode (0 72% 51%) - Both :root (light) and .dark variants defined for all new tokens ### tailwind.config.ts — new utility classes Added Tailwind color mappings for all new tokens: bg-surface, bg-surface-raised, bg-surface-overlay bg-success, text-success, border-success, bg-success-muted, etc. bg-warning, text-warning, bg-warning-muted, etc. bg-info, text-info, bg-info-muted, etc. ### 97 component/page files migrated Common patterns replaced: bg-blue-500/600 → bg-primary / bg-primary/90 text-blue-500/600 → text-primary border-blue-500 → border-primary ring-blue-500 → ring-primary bg-green-500/600 → bg-success / bg-success/90 text-green-500/600→ text-success bg-red-500 → bg-destructive text-red-500/600 → text-destructive bg-gray-800 → bg-surface bg-gray-900 → bg-background bg-gray-700 → bg-surface-raised border-gray-700 → border-border text-gray-400 → text-muted-foreground text-gray-300 → text-foreground/80 text-slate-400/500→ text-muted-foreground text-slate-300 → text-foreground/80 ### Tests updated - profile-header.test.tsx: updated online-indicator assertions from bg-green-500 → bg-success to match migrated component Closes Arenax-gaming#369
|
@Nusirat12345 is attempting to deploy a commit to the paul joseph's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@Nusirat12345 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
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.
Resolves #369
This PR standardizes the frontend color system by converting hardcoded Tailwind color classes to CSS variables throughout the app.
What changed:
Acceptance criteria addressed:
Please review the frontend styling and theming changes to confirm the updated variable set matches the app design.