refactor(edition): tokenize schedule view colors

[chiptus]

Migrates the schedule area (Now/Timeline/List views, filters, and voteConfig.ts vote families) to the edition semantic tokens (#357), with zero visual change.
Hover/pressed shades that step outside the token vocabulary (e.g. vote button hover:bg-orange-700, timeline white focus ring) stay literal on purpose.

Follow-up commits restore hover shades the tokenization had flattened and re-wrap the onboarding vote list so vote-* tokens resolve; after #367 hoisted the tokens to :root, the interim edition-view scope classes on portaled Select/Sheet content became dead and were removed.

Verification

• Open the Schedule tab in Now, Timeline, and List views; colors identical to production.
• Vote from a schedule card: Must Go / Interested / Won't Go buttons keep orange/blue/gray fills, darker hover, and tinted selected states.
• Open the filter sheet and lineup filters; the sheet and day/time dropdowns render dark, and the clear-filters button still shows red text with red hover tint.
• Scrub the timeline overview; the viewport window's focus ring is still white.
• Onboarding voting-explanation step still shows the orange/blue/gray vote tiles.

Closes #357

🤖 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 24, 2026 7:07am

[github-actions]

Playwright test results

 52 passed

Details

 52 tests across 15 suites
 1 minute, 3 seconds
 9d44e8f

[Copilot]

🟡 Changes recommended

The updated vote token classes in VOTE_CONFIG can render incorrectly outside the .edition-view scope, and several schedule filter states lose prior hover/opacity behavior, undermining the “zero visual change” requirement.

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

Pull request overview

This PR refactors the EditionView Schedule tab UI (Now/Timeline/List + filters) to use .edition-view semantic color tokens and updates voteConfig.ts to use the new vote-* token families, aiming for no visual changes while centralizing color definitions.

Changes:

• Replaced hardcoded Tailwind color utilities in Schedule tab components with edition-view semantic tokens (surface*, border*, accent*, live*, etc.).
• Updated schedule filter UI (sheet + lineup filters) and navigation styles to token-based colors.
• Migrated src/lib/voteConfig.ts vote colors to vote-* token classes for reuse across schedule-related voting UI.

File summaries

File	Description
src/pages/EditionView/tabs/ScheduleTab/VoteFilterChips.tsx	Tokenizes vote chip hover/selected text/background behavior.
src/pages/EditionView/tabs/ScheduleTab/VoteButtons.tsx	Updates vote button hover/selected text colors to token-based foregrounds.
src/pages/EditionView/tabs/ScheduleTab/TimeFilterSelect.tsx	Tokenizes time filter select trigger/content colors.
src/pages/EditionView/tabs/ScheduleTab/StageFilterButtons.tsx	Tokenizes stage filter button colors and hover states.
src/pages/EditionView/tabs/ScheduleTab/ScheduleNotRevealedPlaceholder.tsx	Updates placeholder copy color to subtle foreground token.
src/pages/EditionView/tabs/ScheduleTab/ScheduleNavigationItem.tsx	Tokenizes active/inactive schedule nav item colors.
src/pages/EditionView/tabs/ScheduleTab/ScheduleNavigation.tsx	Tokenizes schedule navigation container background.
src/pages/EditionView/tabs/ScheduleTab/ScheduleFilterSheet.tsx	Tokenizes filter trigger/sheet UI colors and action button styles.
src/pages/EditionView/tabs/ScheduleTab/list/TimeSlotGroup.tsx	Tokenizes list time slot group header background/text/border.
src/pages/EditionView/tabs/ScheduleTab/list/MobileSetCard.tsx	Tokenizes list card background/border and primary text colors.
src/pages/EditionView/tabs/ScheduleTab/list/ListDayGroup.tsx	Tokenizes sticky day header background/border/text colors.
src/pages/EditionView/tabs/ScheduleTab/lineup/StagesLineupGrid.tsx	Tokenizes lineup empty state + grid stage section styling.
src/pages/EditionView/tabs/ScheduleTab/lineup/LineupSetItem.tsx	Tokenizes lineup set item card + title text colors.
src/pages/EditionView/tabs/ScheduleTab/lineup/LineupFilters.tsx	Tokenizes lineup filter trigger/sheet UI colors and action button styles.
src/pages/EditionView/tabs/ScheduleTab/lineup/LineupDayHeader.tsx	Tokenizes lineup day header background/border/text colors.
src/pages/EditionView/tabs/ScheduleTab/lineup/DaysLineupView.tsx	Tokenizes lineup empty state text color.
src/pages/EditionView/tabs/ScheduleTab/horizontal/TimeScaleContainer.tsx	Tokenizes timeline header strip background.
src/pages/EditionView/tabs/ScheduleTab/horizontal/TimelineToolbar.tsx	Tokenizes timeline toolbar container + divider + toggle button colors.
src/pages/EditionView/tabs/ScheduleTab/horizontal/TimelineOverview.tsx	Tokenizes overview panel border/background and boundary label styling.
src/pages/EditionView/tabs/ScheduleTab/horizontal/StageRow.tsx	Tokenizes stage row track background.
src/pages/EditionView/tabs/ScheduleTab/horizontal/StageLabels.tsx	Tokenizes stage label text color.
src/pages/EditionView/tabs/ScheduleTab/horizontal/SetHeader.tsx	Tokenizes set header link color + hover color.
src/pages/EditionView/tabs/ScheduleTab/horizontal/SetBlock.tsx	Tokenizes set block card styling and metadata text.
src/pages/EditionView/tabs/ScheduleTab/horizontal/OverviewViewportWindow.tsx	Tokenizes overview viewport window fill while keeping white focus ring.
src/pages/EditionView/tabs/ScheduleTab/horizontal/OverviewStageRow.tsx	Tokenizes overview stage row background.
src/pages/EditionView/tabs/ScheduleTab/horizontal/NowButton.tsx	Migrates “Now” live indicator colors to live* tokens.
src/pages/EditionView/tabs/ScheduleTab/horizontal/HourMarkers.tsx	Tokenizes hour marker text and divider colors.
src/pages/EditionView/tabs/ScheduleTab/horizontal/DayJumpButtons.tsx	Tokenizes day jump separators, focus ring, and active/hover states.
src/pages/EditionView/tabs/ScheduleTab/horizontal/DateBand.tsx	Tokenizes date band border and date label text colors.
src/pages/EditionView/tabs/ScheduleTab/DayFilterSelect.tsx	Tokenizes day filter select trigger/content colors.
src/lib/voteConfig.ts	Replaces literal vote colors with vote-* token families.

Review details

Suppressed comments (2)

src/pages/EditionView/tabs/ScheduleTab/ScheduleFilterSheet.tsx:127

• The “Done” button hover color no longer changes (bg-accent + hover:bg-accent), but previously it darkened on hover. If this is intended to be visually identical, the hover shade should remain distinct.

            <Button type="button" className="bg-accent hover:bg-accent">

src/pages/EditionView/tabs/ScheduleTab/lineup/LineupFilters.tsx:116

• The “Done” button hover color no longer changes (bg-accent + hover:bg-accent), which removes the previous hover darkening and may be a visible regression.

            <Button type="button" className="bg-accent hover:bg-accent">

• Files reviewed: 31/31 changed files
• Comments generated: 6
• 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]

🟡 Changes recommended

VOTE_CONFIG now depends on .edition-view-scoped --vote-* CSS variables, but it’s consumed in non-edition-view pages (e.g. SetDetails) which will regress vote styling.

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

Review details

Suppressed comments (1)

src/lib/voteConfig.ts:19

• VOTE_CONFIG now relies on vote-* Tailwind colors (e.g. text-vote-must, bg-vote-must) whose CSS variables are only defined under the .edition-view scope (see src/index.css:105-139). There are existing consumers outside that scope (e.g. src/pages/SetDetails/SetVotingButtons.tsx:79, src/pages/SetDetails/SetGroupVoting.tsx:90-94), so these classes will compute to invalid colors and regress styling (especially dark:bg-vote-*-soft, which will stop overriding the light bg-*-50). Consider either wrapping those routes/sections in EditionViewRoot (or adding an .edition-view ancestor) or moving the --vote-* variables to a global scope.

    bgColor: "bg-orange-50 dark:bg-vote-must-soft",
    iconColor: "text-vote-must",
    textColor: "text-orange-900 dark:text-vote-must-foreground",
    descColor: "text-vote-must dark:text-vote-must-foreground",
    circleColor: "bg-vote-must",
    buttonSelected: "bg-vote-must hover:bg-orange-700",
    buttonUnselected:
      "border-vote-must-foreground text-vote-must-foreground hover:bg-vote-must-foreground hover:text-white",
    spinnerColor: "border-vote-must-foreground",

• Files reviewed: 32/32 changed files
• Comments generated: 2
• Review effort level: Lite

[Copilot]

🟡 Changes recommended

Several “zero visual change” replacements use accent-soft where the token value does not match the previous literal tints, so the refactor risks unintended color shifts.

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

Review details

Suppressed comments (4)

src/pages/EditionView/tabs/ScheduleTab/lineup/LineupFilters.tsx:69

• bg-accent-soft maps to purple-600/40 (src/index.css:49), which doesn’t match the previous bg-purple-600/50 and hover:bg-purple-400/10. If “zero visual change” is a hard requirement, keep these literal values (or update the token to match).

              variant="secondary"
              data-testid="schedule-filters-badge"
              className="bg-accent-soft text-foreground"
            >
              {activeFilterCount}

src/pages/EditionView/tabs/ScheduleTab/lineup/LineupFilters.tsx:78

• bg-accent-soft is purple-600/40 (src/index.css:49), so this badge will be noticeably lighter than the prior bg-purple-800/50. If the PR is targeting no visual change, keep bg-purple-800/50 here.

      <SheetContent
        side="bottom"
        data-testid="schedule-filter-sheet"
        className="bg-popover border-border max-h-[85vh] overflow-y-auto"
      >

src/pages/EditionView/tabs/ScheduleTab/ScheduleFilterSheet.tsx:69

• bg-accent-soft maps to --accent-soft (src/index.css:49), which is purple-600/40; this differs from the previous literal bg-purple-600/50 and hover:bg-purple-400/10. If the intent is “zero visual change”, these classes should stay literal (or the token value should match the old alpha).

          className={
            hasActiveFilters
              ? "flex items-center gap-2 bg-accent-soft text-foreground hover:bg-purple-600/60"
              : "flex items-center gap-2 text-subtle-foreground hover:bg-accent-soft hover:text-foreground"
          }

src/pages/EditionView/tabs/ScheduleTab/ScheduleFilterSheet.tsx:78

• bg-accent-soft uses --accent-soft (purple-600/40, src/index.css:49) so this badge background won’t match the prior bg-purple-800/50 (darker). If the PR needs zero visual change, keep the literal class here.

            <Badge
              variant="secondary"
              data-testid="schedule-filters-badge"
              className="bg-accent-soft text-foreground"
            >

• Files reviewed: 31/31 changed files
• Comments generated: 5
• Review effort level: Lite

[Copilot]

🔵 Needs a closer look

Several token substitutions provably change colors/hover states versus the prior Tailwind values (e.g. vote text shades and filter trigger/badge backgrounds), conflicting with the stated “zero visual change” requirement.

Review details

Suppressed comments (8)

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

src/lib/voteConfig.ts:15

• VOTE_CONFIG.mustGo.textColor/descColor now use vote-must-foreground, but that token is defined as orange-400 in src/index.css, whereas the previous dark-mode text/description colors were orange-100/orange-300. This likely changes the vote tile/button text colors in dark mode and breaks the PR's “zero visual change” goal.

    bgColor: "bg-orange-50 dark:bg-vote-must-soft",
    iconColor: "text-vote-must",
    textColor: "text-orange-900 dark:text-vote-must-foreground",
    descColor: "text-vote-must dark:text-vote-must-foreground",
    circleColor: "bg-vote-must",

src/lib/voteConfig.ts:45

• VOTE_CONFIG.wontGo.textColor/descColor now use vote-skip-foreground (gray-400 per src/index.css), but the previous dark-mode text/description shades were gray-100/gray-300. This likely changes vote tile/button text contrast in dark mode.

    bgColor: "bg-gray-50 dark:bg-vote-skip-soft",
    iconColor: "text-vote-skip",
    textColor: "text-gray-900 dark:text-vote-skip-foreground",
    descColor: "text-vote-skip dark:text-vote-skip-foreground",
    circleColor: "bg-vote-skip",

src/lib/voteConfig.ts:30

• VOTE_CONFIG.interested.textColor/descColor now use vote-interested-foreground (blue-400 per src/index.css), but the prior dark-mode text/description shades were blue-100/blue-300. If the intent is zero visual change, keep those original dark-mode text classes (or introduce dedicated tokens for them).

    bgColor: "bg-blue-50 dark:bg-vote-interested-soft",
    iconColor: "text-vote-interested",
    textColor: "text-blue-900 dark:text-vote-interested-foreground",
    descColor: "text-vote-interested dark:text-vote-interested-foreground",
    circleColor: "bg-vote-interested",

src/pages/EditionView/tabs/ScheduleTab/ScheduleFilterSheet.tsx:78

• The filters-count badge background changed from bg-purple-800/50 to bg-accent-soft (purple-600/40 per src/index.css), which is a different shade/opacity and likely changes the badge appearance.

            <Badge
              variant="secondary"
              data-testid="schedule-filters-badge"
              className="bg-accent-soft text-foreground"
            >

src/pages/EditionView/tabs/ScheduleTab/lineup/LineupFilters.tsx:68

• Same as ScheduleFilterSheet: the filters-count badge background moved to bg-accent-soft (purple-600/40), which doesn't match the previous bg-purple-800/50 visual.

          {hasActiveFilters && (
            <Badge
              variant="secondary"
              data-testid="schedule-filters-badge"
              className="bg-accent-soft text-foreground"
            >

src/pages/EditionView/tabs/ScheduleTab/horizontal/NowButton.tsx:15

• Hover text color changed from hover:text-fuchsia-100 to hover:text-live-foreground (fuchsia-200 per src/index.css), which removes the lighter hover state and likely violates the PR's “zero visual change” requirement. Since there's no live-hover token, keeping the literal hover:text-fuchsia-100 preserves the prior behavior.

      data-testid="now-jump-button"
      className="shrink-0 gap-1.5 self-center text-live-foreground hover:bg-live/10 hover:text-live-foreground"
      onClick={onJumpToNow}

src/pages/EditionView/tabs/ScheduleTab/ScheduleFilterSheet.tsx:69

• The active/inactive filter trigger uses bg-accent-soft/hover:bg-accent-soft, but --accent-soft is defined as bg-purple-600/40 in src/index.css, which doesn't match the previous bg-purple-600/50 (active) and hover:bg-purple-400/10 (inactive). This is a likely visual change despite the PR goal of no visual diffs.

          className={
            hasActiveFilters
              ? "flex items-center gap-2 bg-accent-soft text-foreground hover:bg-purple-600/60"
              : "flex items-center gap-2 text-subtle-foreground hover:bg-accent-soft hover:text-foreground"
          }

src/pages/EditionView/tabs/ScheduleTab/lineup/LineupFilters.tsx:59

• Same as ScheduleFilterSheet: bg-accent-soft/hover:bg-accent-soft corresponds to bg-purple-600/40 (see src/index.css) and does not match the prior active/inactive filter trigger backgrounds (bg-purple-600/50, hover:bg-purple-400/10). This likely introduces a visual change.

          className={
            hasActiveFilters
              ? "flex items-center gap-2 bg-accent-soft text-foreground hover:bg-purple-600/60"
              : "flex items-center gap-2 text-subtle-foreground hover:bg-accent-soft hover:text-foreground"
          }

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

[Copilot]

🟡 Changes recommended

Some replacements use accent-soft (defined as 40% opacity) where the previous UI used 50% opacity (bg-purple-600/50), which conflicts with the PR’s “zero visual change” requirement.

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

Review details

Suppressed comments (2)

src/pages/EditionView/tabs/ScheduleTab/ScheduleFilterSheet.tsx:68

• The active-filters trigger background switched from the old bg-purple-600/50 to bg-accent-soft (which is --accent-soft = purple-600/0.4 in src/index.css). Since this PR targets zero visual change and accent now supports opacity modifiers, use bg-accent/50 to preserve the previous 50% tint.

            hasActiveFilters
              ? "flex items-center gap-2 bg-accent-soft text-foreground hover:bg-accent/60"
              : "flex items-center gap-2 text-subtle-foreground hover:bg-accent-soft hover:text-foreground"

src/pages/EditionView/tabs/ScheduleTab/lineup/LineupFilters.tsx:58

• The active-filters trigger background switched from the old bg-purple-600/50 to bg-accent-soft (which is --accent-soft = purple-600/0.4 in src/index.css). Since this PR targets zero visual change and accent now supports opacity modifiers, use bg-accent/50 to preserve the previous 50% tint.

          className={
            hasActiveFilters
              ? "flex items-center gap-2 bg-accent-soft text-foreground hover:bg-accent/60"
              : "flex items-center gap-2 text-subtle-foreground hover:bg-accent-soft hover:text-foreground"

• Files reviewed: 32/32 changed files
• Comments generated: 2
• Review effort level: Lite