Skip to content

Primer branding: align accent colors with Primer color tokens - #174

Draft
github-actions[bot] wants to merge 1 commit into
mainfrom
primer-branding-token-alignment-b67dda7ba7b26ddf
Draft

Primer branding: align accent colors with Primer color tokens#174
github-actions[bot] wants to merge 1 commit into
mainfrom
primer-branding-token-alignment-b67dda7ba7b26ddf

Conversation

@github-actions

Copy link
Copy Markdown
Contributor

Color

  • --agent-purple (light) and --agent-purple-dark (both themes) were hardcoded hex values (#8250df, #6639ba) unrelated to any Primer scale variable, unlike every other brand accent color in this file (--accent-blue, --accent-green, --label-*, etc.), which all follow the var(--color-X, #hexFallback) pattern so they inherit Primer's @primer/css custom properties when available. Per the primer-brand MCP token data (primer_brand_tokens --query "purple" / color primitives), #8250df corresponds to Primer's --color-done-emphasis and #6639ba to --color-done-fg. Updated both to reference those Primer variables with the existing hex as fallback, matching the pattern already used for every sibling color token in the same :root / [data-color-mode="dark"] blocks.
  • --accent-green-solid / --accent-green-hover (light theme) were similarly hardcoded (#1f883d, #1a7f37) even though the sibling --accent-green variable two lines above already used var(--color-success-emphasis, #1f883d). Aligned them to var(--color-success-emphasis, ...) and var(--color-success-fg, ...) respectively, consistent with Primer's semantic success-color tokens and the rest of the file's convention.

Deliberately not changed

  • The equivalent dark-theme --label-* and --accent-green-solid/--accent-green-hover variables were left as raw hex. The repo's own test/a11y.test.js regex-parses these dark-theme values as literal 6-digit hex to compute WCAG contrast ratios (darkVar() matches #[0-9a-fA-F]{6} directly); wrapping them in var(--color-x, #hex) broke that test even though the visual/computed color is unchanged. Rather than touch the test harness (out of scope for a presentational-only change), I kept those dark-mode values as plain hex.
  • No gradients were flattened — the existing multi-stop gradients (title, hero glow, card sheen) already source every color from the file's own CSS custom properties (which in turn reference Primer tokens with hex fallbacks), so they already comply with brand-token usage.
  • Typography (--font-sans, --font-mono) and spacing (rem/px usage) were reviewed against Primer Brand's font-stack and spacing-scale tokens; the existing system-font stack and rem-based spacing did not show clear, low-risk deviations worth changing without restructuring layout, so left untouched per the "focused change set" guidance.

Validation

  • npm test — 199/199 tests passing (13 files).
  • npm run build — succeeds, dist/ output generated without errors.

Warning

Firewall blocked 1 domain

The following domain was blocked by the firewall during workflow execution:

  • cdn.jsdelivr.net

To allow these domains, add them to the network.allowed list in your workflow frontmatter:

network:
  allowed:
    - defaults
    - "cdn.jsdelivr.net"

See Network Configuration for more information.

Generated by Primer Branding · auto · 80 AIC · ⌖ 3.47 AIC · ⊞ 9.4K ·

…kens

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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.

0 participants