Skip to content

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

Merged
afonsojramos merged 2 commits into
mainfrom
primer-base-color-tokens
Aug 6, 2026
Merged

refactor(theme): source the base colour tokens from Primer#3148
afonsojramos merged 2 commits into
mainfrom
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.

@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
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 force-pushed the native-theme-support branch from bccd866 to 046bb8e Compare August 6, 2026 16:18
@afonsojramos
afonsojramos force-pushed the primer-base-color-tokens branch from 9d6811f to 2240ba9 Compare August 6, 2026 16:18
@sonarqubecloud

sonarqubecloud Bot commented Aug 6, 2026

Copy link
Copy Markdown

Base automatically changed from native-theme-support to main August 6, 2026 17:26
@afonsojramos
afonsojramos merged commit 28a3566 into main Aug 6, 2026
16 of 25 checks passed
@afonsojramos
afonsojramos deleted the primer-base-color-tokens branch August 6, 2026 17:31
@github-actions github-actions Bot added this to the Release 7.x.x milestone Aug 6, 2026
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