refactor(edition): tokenize artists and set colors

[chiptus]

Migrates the artists/vote tab, explore page, and set details to the .edition-view semantic tokens (#358); Spotify/SoundCloud brand colors stay literal per the vocabulary doc.

Sanctioned small shifts (per the vocabulary doc's "absorbs today" tables):

• The explore page's off-palette vote buttons (orange/blue/gray 500) now use the canonical vote-* families (600 shades), unifying them with the rest of the app.
• The "No SoundCloud" badge text moves from gray-400 to subtle-foreground (purple-300).

Follow-up commit re-applies token scope on portaled Select/Popover content (Radix portals escape .edition-view, so tokens resolved to the light root theme) and restores hover shades that the tokenization had flattened.

Verification

• Browse the vote tab and open a set's details; cards, badges, notes, and links look identical to production.
• Open the vote tab's sort/filter dropdowns and popovers; they render dark (popover token), not white.
• Open the explore page; vote buttons match the vote-tab shades and the "No SoundCloud" badge text is soft purple.
• Spotify/SoundCloud platform links keep their brand colors.

Closes #358

🤖 Generated with Claude Code

https://claude.ai/code/session_01GtnAr22sTrdCMn9rcKrwQn

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
upline	Ready	Preview	Aug 23, 2026 7:08am

[github-actions]

Playwright test results

 52 passed

Details

 52 tests across 15 suites
 1 minute, 5 seconds
 8f239d4

[Copilot]

🟡 Changes recommended

Tokenized SelectContent/PopoverContent styling is used in components that render via portals, so without reapplying .edition-view scope the dropdown/help surfaces will resolve to global (light) tokens and visually regress in edition views.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR migrates the Edition “Vote” tab UI, Explore page UI, and Set Details UI from hardcoded Tailwind color classes to the .edition-view semantic token vocabulary (surfaces, foreground tiers, borders, accents, and vote-* families), aiming to preserve existing visuals while making the edition identity themeable.

Changes:

• Tokenized Set Details cards (info, image, group voting, and notes) to use surface*, foreground tiers, border*, and accent roles.
• Tokenized Vote tab cards and filter controls (cards, toggles, selects, and helper popovers) to use .edition-view role tokens.
• Tokenized Explore set card + voting actions, including switching Explore vote buttons to canonical vote-* token families.

File summaries

File	Description
src/pages/SetDetails/SetNotes.tsx	Tokenize notes card + CTA styling to edition semantic roles.
src/pages/SetDetails/SetInfoCard.tsx	Tokenize set info card surface and text hierarchy.
src/pages/SetDetails/SetImageCard.tsx	Tokenize image card surface/border styling.
src/pages/SetDetails/SetGroupVoting.tsx	Tokenize group voting card + individual vote rows.
src/pages/SetDetails/notes/SetNoteItem.tsx	Tokenize note item surface, text, and destructive affordance.
src/pages/SetDetails/notes/CreateNoteForm.tsx	Tokenize note form textarea and buttons.
src/pages/SetDetails/MultiArtistSetInfoCard.tsx	Tokenize multi-artist set info UI text/surfaces.
src/pages/SetDetails/MixedArtistImage.tsx	Tokenize overlay text to foreground.
src/pages/SetDetails/IndividualArtistCard.tsx	Tokenize per-artist card surface and metadata text.
src/pages/ExploreSetPage/VotingActions.tsx	Switch Explore vote buttons to vote-* token families and foreground roles.
src/pages/ExploreSetPage/SetExploreCard/SupportingArtists.tsx	Tokenize supporting-artist labels and badges to semantic roles.
src/pages/ExploreSetPage/SetExploreCard/SoundCloudBadge.tsx	Adjust “No SoundCloud” badge text role.
src/pages/ExploreSetPage/SetExploreCard/SetCardHeader.tsx	Tokenize header badge text role.
src/pages/ExploreSetPage/SetExploreCard/PrimaryArtistDisplay.tsx	Tokenize borders and placeholder icon color.
src/pages/ExploreSetPage/SetExploreCard.tsx	Tokenize card content text + footer hint text.
src/pages/ExploreSetPage/ExplorationProgress.tsx	Tokenize progress label + track background.
src/pages/ExploreSetPage/components/ProgressInfoTooltip.tsx	Tokenize trigger button and tooltip label roles.
src/pages/ExploreSetPage/components/LoadingState.tsx	Tokenize loading text to foreground.
src/pages/ExploreSetPage/components/ExplorePageHeader.tsx	Tokenize header/back button text + hover surface.
src/pages/ExploreSetPage/components/EmptyState.tsx	Tokenize empty state text to foreground.
src/pages/EditionView/tabs/VoteTab/SingleArtistSetCard.tsx	Tokenize vote card surface + hover surface role.
src/pages/EditionView/tabs/VoteTab/SetListItem.tsx	Tokenize list item surface and description text role.
src/pages/EditionView/tabs/VoteTab/SetCard/SocialPlatformLink.tsx	Tokenize platform link surface while keeping brand color literal.
src/pages/EditionView/tabs/VoteTab/SetCard/SetMetadata.tsx	Tokenize metadata text tiers.
src/pages/EditionView/tabs/VoteTab/SetCard/SetHeader.tsx	Tokenize header title text and multi-artist badge styling.
src/pages/EditionView/tabs/VoteTab/SetCard/SetDescription.tsx	Switch default description class to tokenized muted text.
src/pages/EditionView/tabs/VoteTab/SetCard/MultiArtistInfo.tsx	Tokenize multi-artist label text tier.
src/pages/EditionView/tabs/VoteTab/MultiArtistSetCard.tsx	Tokenize vote card surface + hover surface role.
src/pages/EditionView/tabs/VoteTab/filters/VotePerspectiveToggle.tsx	Tokenize toggle borders and selected state roles.
src/pages/EditionView/tabs/VoteTab/filters/TimeFormatToggle.tsx	Tokenize time-format toggle selected/unselected styling.
src/pages/EditionView/tabs/VoteTab/filters/SortControls.tsx	Tokenize sort select + help popover styling.
src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx	Tokenize select triggers/menus and labels for mobile filters.
src/pages/EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx	Tokenize toggle and info icon accent usage.
src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx	Tokenize desktop stage filter label + selected chip styling.
src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx	Tokenize empty state card, icons, and text hierarchy.

Review details

Suppressed comments (2)

src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx:100

• Same Portal scoping issue as the Stage select: SelectContent is portaled, so token classes resolve to global values unless you re-apply .edition-view on the content element.

          <SelectContent className="bg-popover border">

src/pages/EditionView/tabs/VoteTab/filters/MobileFilters.tsx:131

• Same Portal scoping issue as the other selects in this file: SelectContent is portaled, so bg-popover/border won’t pick up edition-view variables unless the scope class is applied.

          <SelectContent className="bg-popover border">

• Files reviewed: 35/35 changed files
• Comments generated: 7
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🔵 Needs a closer look

Several token substitutions appear to introduce unintended visible color shifts that conflict with the PR’s “zero visual change” claim (e.g., gray “No SoundCloud” text and multiple purple-400→accent mappings).

Review details

Suppressed comments (8)

Previously missed (6) — in code that hasn't changed since the last review.

src/pages/EditionView/tabs/VoteTab/SetCard/SetHeader.tsx:28

• This multi-artist count badge uses bg-accent-soft (defined as purple-600/40) but the previous style was purple-600/50, so this is likely a visible change despite the “zero visual change” goal. If you want to keep the 50% alpha while staying token-based, use bg-accent/50 and the existing popover foreground token for the text.

          variant="secondary"
          className="bg-accent-soft text-foreground text-xs"
        >

src/pages/EditionView/tabs/VoteTab/EmptyArtistsState.tsx:18

• These icons changed from text-purple-400 to text-accent (purple-600 in .edition-view), which is likely a visible color change. If the intent is “no visual change”, text-ring matches the documented purple-400 token in the edition scope.

            <div className="relative">
              <Music className="h-16 w-16 text-accent" />
              <Sparkles className="h-6 w-6 text-notice absolute -top-1 -right-1" />

src/pages/SetDetails/notes/SetNoteItem.tsx:37

• The date color changed from purple-400 to text-accent (purple-600 in .edition-view), which likely breaks the “zero visual change” goal. text-ring matches the edition token documented as purple-400.
  src/pages/SetDetails/notes/CreateNoteForm.tsx:41
• This "Cancel" outline button still uses literal purple classes (border-purple-400, hover:bg-purple-400). If the goal is to migrate to .edition-view tokens with no color drift, ring maps to purple-400 in the edition scope and keeps the exact shade.
  src/pages/EditionView/tabs/VoteTab/filters/DesktopFilters.tsx:63
• This stage-filter button’s inactive styling still uses literal purple classes. To fully migrate to .edition-view tokens without changing the shade, use ring (purple-400) for border/text/hover background in the inactive branch.

                  className={
                    state.stages.includes(stage.id)
                      ? "bg-accent hover:bg-purple-700"
                      : "border-purple-400 text-accent hover:bg-purple-400 hover:text-foreground"
                  }

src/pages/EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx:47

• Planning mode button styling still uses literal purple classes; using ring keeps the same purple-400 shade but stays within the edition token system.

This issue also appears on line 70 of the same file.

          className={
            isFestivalMode
              ? "bg-orange-600 hover:bg-orange-700 text-foreground border-orange-600"
              : "border-purple-400 text-accent hover:bg-purple-400 hover:text-foreground"
          }

src/pages/ExploreSetPage/SetExploreCard/SoundCloudBadge.tsx:32

• The "No SoundCloud" badge text switched from gray-400 to text-subtle-foreground (purple-300 under .edition-view), which contradicts the PR’s claim that this badge stays gray. Use the vote skip foreground token (maps to gray-400) or keep the literal gray class.

    <div className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-gray-600/20 border border-gray-500/30 text-subtle-foreground text-xs">

src/pages/EditionView/tabs/VoteTab/filters/FestivalModeToggle.tsx:70

• This info icon changed from purple-400 to text-accent (purple-600 in .edition-view), which is likely a visible change. Use text-ring to keep the documented purple-400 shade.

            <Info className="h-3 w-3 text-accent" />

• Files reviewed: 35/35 changed files
• Comments generated: 0 new
• Review effort level: Lite