Skip to content

refactor(theme): source the base colour tokens from Primer - #3148

Open
afonsojramos wants to merge 2 commits into
native-theme-supportfrom
primer-base-color-tokens
Open

refactor(theme): source the base colour tokens from Primer#3148
afonsojramos wants to merge 2 commits into
native-theme-supportfrom
primer-base-color-tokens

Conversation

@afonsojramos

Copy link
Copy Markdown
Member

Summary

Stacked on #3130. Resolves the long-standing TODO in tailwind.config.mts by replacing the six Tailwind palette literals (scrollbar track/thumb/thumb-hover, counter primary/secondary/text) with Primer design tokens.

  • Primer tokens resolve per colour scheme on the [data-color-mode] wrapper, so these now follow the colorblind / Tritanopia / Soft dark / high-contrast palettes — the literals stayed frozen at generic gray/blue regardless of scheme.
  • The light-dark() shims become unnecessary for them; only --gitify-background and --gitify-account-error-bg keep it, as their light/dark asymmetry is an intentional design choice rather than scheme resolution.
  • Counter pills move from saturated blue.300/gray.200 to the --bgColor-accent-muted / --bgColor-neutral-muted fills GitHub itself uses, softer and scheme-aware. Glass is unaffected (it overrides pill fills with its own glass tokens).

Mappings (light-scheme values for comparison):

Token Before After
scrollbar-track gray.100 --bgColor-muted (#f6f8fa)
scrollbar-thumb gray.300 (#d1d5db) --borderColor-default (#d1d9e0)
scrollbar-thumb-hover gray.400 --borderColor-emphasis (#818b98)
counter-primary blue.300 --bgColor-accent-muted (#ddf4ff)
counter-secondary gray.200 --bgColor-neutral-muted
counter-text gray.800 --fgColor-default

Verified token resolution in the built app across Classic light / dark / System / Soft dark — under Soft dark the pills and background now pick up the dimmed palette (#4184e41a, #262c36) instead of the frozen literals.

Replace the Tailwind palette literals behind the scrollbar and counter tokens with
Primer design tokens, resolving the long-standing TODO. Primer tokens resolve per
colour scheme on the wrapper, so these now follow the accessibility and
high-contrast palettes (the literals stayed frozen), and the `light-dark()` pairs
become unnecessary except for the two tokens with an intentional light/dark
asymmetry. Counter pills move to the accent-muted / neutral-muted fills GitHub
itself uses; Glass is unaffected, it overrides pill fills with its own tokens.
@afonsojramos
afonsojramos requested a review from setchy as a code owner August 5, 2026 21:43
@github-actions github-actions Bot added the refactor Refactoring of existing feature label Aug 5, 2026
@sonarqubecloud

sonarqubecloud Bot commented Aug 5, 2026

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor Refactoring of existing feature

Development

Successfully merging this pull request may close these issues.

1 participant