Skip to content

refactor: replace hardcoded color hex with named brand tokens (Closes #872) - #971

Open
waterWang wants to merge 1 commit into
scout-off:mainfrom
waterWang:feat/replace-hardcoded-colors-872
Open

refactor: replace hardcoded color hex with named brand tokens (Closes #872)#971
waterWang wants to merge 1 commit into
scout-off:mainfrom
waterWang:feat/replace-hardcoded-colors-872

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Replaces hardcoded hex color values with named brand tokens and CSS variables, making the app more theme-aware and reducing hardcoded colors.

Changes

tailwind.config.ts

  • Added brand.blue token (rgb(var(--blue) / <alpha-value>)) for the chart blue color used in admin dashboards

app/globals.css

  • Added --blue: 59 130 246 CSS variable to :root (dark theme default)

components/PlayerCard.tsx

  • Replaced inline style={{ backgroundColor: '#22c55e', borderColor: '#4b5563' }} with conditional Tailwind classes (bg-green-500, border-gray-600, border-transparent)

components/admin/PlatformAnalyticsCharts.tsx

  • BRAND_GREEN: #00C853rgb(var(--green)) (ties to theme)
  • BRAND_BLUE: #3B82F6rgb(var(--blue)) (ties to theme)
  • TOOLTIP_STYLE.backgroundColor: #111827rgb(var(--card)) (ties to brand-card)
  • TOOLTIP_STYLE.border: #374151rgb(55 65 81) (documented gray-700 RGB)

components/admin/FeeRevenueChart.tsx

  • Same color constant replacements as PlatformAnalyticsCharts

Snapshot updates

  • Updated ScoutProfileCard snapshot to reflect the className change in PlayerCard

Verification

  • npm run build — ✅ passes
  • npm run test — ✅ all snapshots pass (7/7). Pre-existing failures (SQLite store tests) unchanged.

Closes #872

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace hardcoded color hex in tailwind.config.ts with descriptive token names

1 participant