Uh oh!
There was an error while loading. Please reload this page.
fix(a11y): single-source rarity tokens, 3:1 legendary, neutral rarity text - #217
Conversation
Deploying with |
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs | frontend | 4450f0a | Commit Preview URL Branch Preview URL | Jun 12 2026, 05:10 PM |
📝 WalkthroughWalkthroughThis PR refactors rarity color styling across achievement and profile components to use canonical CSS tokens instead of hardcoded hex values. Rarity tier tokens are reorganized in globals.css with ChangesRarity Color Token Migration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/src/components/ProfileView.tsx (1)
10-11: ⚡ Quick winInconsistent fallback and type compared to Achievements.tsx.
The
rarityVarhelper here usesvar(--text-muted)as the fallback, whileAchievements.tsx(lines 12-14) usesvar(--border). Since these colors are applied to borders, backgrounds, and shadows,var(--border)is more semantically appropriate and ensures visual consistency if a rarity token is missing.Additionally, the parameter type here is
string, while Achievements uses the more specificRarityTiertype. Sinceua.achievement.rarityshould be typed asRarityTier, using the stricter type improves type safety.♻️ Align with Achievements.tsx pattern
-// Rarity colors come only from the canonical --rarity-* tokens (globals.css).-const rarityVar = (r: string) => `var(--rarity-${r}, var(--text-muted))`;+import type { RarityTier } from "`@/lib/types`";++// Rarity colors come only from the canonical --rarity-* tokens (globals.css).+const rarityVar = (r: RarityTier) => `var(--rarity-${r}, var(--border))`;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/ProfileView.tsx` around lines 10 - 11, Update the rarityVar helper to match Achievements.tsx: change its fallback from var(--text-muted) to var(--border) and tighten the parameter type from string to the RarityTier type used elsewhere; ensure usages (e.g., places that pass ua.achievement.rarity) still compile and import or reference RarityTier where rarityVar is declared so the helper enforces the stricter type and produces the same border-appropriate fallback color.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@frontend/src/components/ProfileView.tsx`:
- Around line 10-11: Update the rarityVar helper to match Achievements.tsx:
change its fallback from var(--text-muted) to var(--border) and tighten the
parameter type from string to the RarityTier type used elsewhere; ensure usages
(e.g., places that pass ua.achievement.rarity) still compile and import or
reference RarityTier where rarityVar is declared so the helper enforces the
stricter type and produces the same border-appropriate fallback color.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 67e93ca5-cd2f-4100-aec5-1e1d7edc11d5
📒 Files selected for processing (4)
frontend/src/app/globals.cssfrontend/src/components/ProfileView.tsxfrontend/src/components/TitleFlair.tsxfrontend/src/components/screens/Achievements.tsx
Uh oh!
There was an error while loading. Please reload this page.
docs: PROGRAM.md — record #217, close rarity + deploy-stall backlog items
Resolves the PROGRAM.md backlog item: duplicate --rarity-* definitions in globals.css.
:rootrarity block; the legacy block (canonical per decision) now defines each of the ten tokens exactly once.--rarity-legendarypinned to #b4862c (wasvar(--brand-progress)#e8a33a at 2.10:1 — under the 3:1 non-text bar). All five tiers now clear 3:1 on every required non-text surface (legendary worst case 3.02).var(--text); TitleFlair appends the literal tier name; the Achievements showcase strip gains a rarity text line (was border-color-only, a 1.4.1 gap).--rarity-legendary-bgintentionally stays on the lighter gold base (comment added): a #b4862c-based tint would put the TitleFlair border vs its own interior under 3:1.Verified by fresh-context measurement: all rarity-adjacent text ≥4.87:1; all required non-text ≥3.02:1; two legendary items (Achievements icon-tile glyph 2.82, progress fill 2.64) rely on the documented decorative/redundant carve-out. Toast and Settings render pixel-identical for the four unchanged tiers (headless-Chrome harness diff).
Do not merge yet — awaiting visual sign-off on the changed surfaces.
Summary by CodeRabbit
Style
Bug Fixes