Skip to content

refactor(leaderboard): replace hardcoded colors with theme tokens#256

Merged
anderdc merged 1 commit intoentrius:testfrom
bittoby:refactor/leaderboard-theme-color-tokens
Apr 15, 2026
Merged

refactor(leaderboard): replace hardcoded colors with theme tokens#256
anderdc merged 1 commit intoentrius:testfrom
bittoby:refactor/leaderboard-theme-color-tokens

Conversation

@bittoby
Copy link
Copy Markdown
Contributor

@bittoby bittoby commented Apr 14, 2026

Summary

Replace all hardcoded color values (hex, rgba) in leaderboard components with centralized theme tokens and alpha() utility. Add REPO_OWNER_AVATAR_BACKGROUNDS constant to theme.ts for owner avatar background colors.

Files changed: TopPRsTable.tsx, TopRepositoriesTable.tsx, SectionCard.tsx, RankIcon.tsx, types.ts, theme.ts

What was replaced:

  • #ffffff / #ffftheme.palette.text.primary
  • rgba(255,255,255,0.1/0.2/0.05)theme.palette.border.light/medium/subtle
  • rgba(255,255,255,0.02/0.05)theme.palette.surface.subtle/light
  • #000000theme.palette.background.default
  • Text opacity variants → alpha(common.white, TEXT_OPACITY.*)
  • Owner avatar #ffffff/#F7931AREPO_OWNER_AVATAR_BACKGROUNDS.*
  • Chart tooltip/grid/axis colors → alpha() with existing palette values

No visual changes. Pure refactor.

Related Issues

Type of Change

  • Bug fix
  • New feature
  • Refactor
  • Documentation
  • Other (describe below)

Checklist

  • New components are modularized/separated where sensible
  • Uses predefined theme (e.g. no hardcoded colors)
  • Responsive/mobile checked
  • Tested against the test API
  • npm run format and npm run lint:fix have been run
  • npm run build passes
  • Screenshots included for any UI/visual changes

@bittoby bittoby force-pushed the refactor/leaderboard-theme-color-tokens branch 2 times, most recently from 12398f2 to d49253f Compare April 15, 2026 12:37
@bittoby
Copy link
Copy Markdown
Contributor Author

bittoby commented Apr 15, 2026

@anderdc I refactored code following your previous PR feedback(#262 (review)). would you appreciate your feedback. thanks

Copy link
Copy Markdown
Collaborator

@anderdc anderdc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two things to fix:

  • getRepositoryOwnerAvatarBackground is duplicated — identical function in both TopPRsTable.tsx and TopRepositoriesTable.tsx. Extract it to a shared spot (e.g. types.ts or a small util in the leaderboard folder).
  • STATUS_COLORS.open replacing rgba(255,255,255,0.6) in types.ts is a visual change. #8b949e (solid gray) looks different from white at 60% opacity on dark backgrounds. Use alpha(UI_COLORS.white, 0.6) to preserve the original appearance, or pick the closest existing token.

Replace all hardcoded color values (hex, rgba) in leaderboard components
with centralized theme tokens and alpha() utility. Extract shared
getRepositoryOwnerAvatarBackground helper to types.ts and add
REPO_OWNER_AVATAR_BACKGROUNDS constant to theme.ts.

Files changed: TopPRsTable.tsx, TopRepositoriesTable.tsx, SectionCard.tsx,
RankIcon.tsx, types.ts, theme.ts

Made-with: Cursor
@bittoby bittoby force-pushed the refactor/leaderboard-theme-color-tokens branch from bbdcfa1 to 35281a3 Compare April 15, 2026 14:54
@bittoby bittoby requested a review from anderdc April 15, 2026 14:58
@bittoby
Copy link
Copy Markdown
Contributor Author

bittoby commented Apr 15, 2026

@anderdc I updated all. Pls check again.

@anderdc anderdc merged commit 8931bf2 into entrius:test Apr 15, 2026
2 checks passed
@anderdc anderdc added the refactor Code restructuring without behavior change label Apr 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor Code restructuring without behavior change

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants