Skip to content

refactor(dashboard): Tokenize structural UI colors - #1516

Draft
sentry-junior[bot] wants to merge 9 commits into
mainfrom
feat/dashboard-color-tokens
Draft

refactor(dashboard): Tokenize structural UI colors#1516
sentry-junior[bot] wants to merge 9 commits into
mainfrom
feat/dashboard-color-tokens

Conversation

@sentry-junior

@sentry-junior sentry-junior Bot commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

Move dashboard structural colors into one root token set and point current surfaces at those tokens.

This is the groundwork for a light theme. Dark appearance stays the same. Status accents stay as Tailwind palette utilities.

What changed

  • Add semantic canvas, border, fill, overlay, text, focus, shadow, and chart tokens to packages/junior-dashboard/src/tailwind.css
  • Replace hard-coded shell colors across dashboard components with token utilities
  • Move the shell grid background into .dashboard-shell-bg
  • Point color-scheme at --dashboard-color-scheme for later theme switching

Checks

  • pnpm --filter @sentry/junior-dashboard typecheck
  • pnpm --filter @sentry/junior-dashboard lint
  • pnpm --filter @sentry/junior-dashboard test (245 passed)

Not included: a theme toggle, light palette values, or Shiki theme switching.

Requested by Nick.

--

View Junior Session [Sentry]

Move dashboard shell colors into root CSS tokens and replace hard-coded
white/black/hex surfaces so a light theme can share the same utilities.

Co-Authored-By: Nicholas Deschenes <nicholas.deschenes@sentry.io>
@vercel

vercel Bot commented Aug 13, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
junior-docs Ready Ready Preview Aug 13, 2026 6:01pm

Request Review

@sentry-junior
sentry-junior Bot requested a review from nsdeschenes August 13, 2026 10:02
…tokens

# Conflicts:
#	packages/junior-dashboard/src/client/App.tsx
#	packages/junior-dashboard/src/client/components/layout/DashboardHeader.tsx
#	packages/junior-dashboard/src/client/components/layout/SecondaryNavigation.tsx
#	packages/junior-dashboard/src/client/conversations/ConversationHeader.tsx
#	packages/junior-dashboard/src/client/conversations/ConversationPage.tsx
#	packages/junior-dashboard/src/client/conversations/ConversationSidebar.tsx
#	packages/junior-dashboard/src/client/conversations/ConversationTranscript.tsx
#	packages/junior-dashboard/src/client/conversations/PendingMailboxStack.tsx
#	packages/junior-dashboard/src/client/conversations/TranscriptActivityGroup.tsx
#	packages/junior-dashboard/src/client/conversations/TranscriptContextEventView.tsx
#	packages/junior-dashboard/src/client/conversations/TranscriptHeader.tsx
#	packages/junior-dashboard/src/client/conversations/TranscriptStructuredEventView.tsx
#	packages/junior-dashboard/src/client/conversations/TranscriptToolView.tsx
Comment thread packages/junior-dashboard/src/tailwind.css
@nsdeschenes nsdeschenes changed the title refactor(dashboard): tokenize structural UI colors refactor(dashboard): Tokenize structural UI colors Aug 13, 2026

@sentry-junior sentry-junior Bot left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Looks good to me. I checked the token values against the replaced dark-theme literals across the changed dashboard files, and the values and opacity variants match. The generated Tailwind CSS includes the new color, border, fill, chart, focus, and shadow utilities, with the remaining direct colors limited to status/data accents.

…tokens

# Conflicts:
#	packages/junior-dashboard/src/client/conversations/ConversationHeader.tsx
Comment thread packages/junior-dashboard/src/client/App.tsx Outdated
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.

1 participant