Primer branding: reuse existing radius/color tokens

[github-actions]

What changed

Spacing / color tokens (consistency with existing tokens):

• .anti-pattern-card and .ap-rate used literal border-radius: 8px / 12px instead of this file's own already-defined var(--radius-md) (--borderRadius-medium, 8px) and var(--radius-lg) (--borderRadius-large, 12px) tokens used everywhere else in the stylesheet.
• The dark-mode and light-mode --shadow-btn-primary-hover values duplicated the green accent as a literal RGB triplet (rgba(31, 136, 61, 0.25) / rgba(63,185,80,0.3)) instead of the file's own --accent-green-rgb custom property, which is already defined per color-mode and used for this exact purpose elsewhere (e.g. the .progress-step.completed focus ring and pulse animation).

Brand guidance that motivated each change

Fetched via the primer-brand MCP server (primer_brand_review, bundled snapshot of @primer/react-brand@0.76.0):

• hardcoded-px warning: "Hardcoded pixel sizes found (3px, 12px, 8px, 24px). Use size, spacing, or border-width tokens." → replaced the two literal 8px/12px radii with this project's existing --radius-md/--radius-lg tokens (which already resolve to Primer's --borderRadius-medium/--borderRadius-large).
• General token-reuse principle (primer_brand_tokens): prefer resolving to a single token source of truth rather than duplicating a color's numeric value in multiple places — applied to the --shadow-btn-primary-hover green RGB duplication.

Deviations found but deliberately not fixed, and why

• hardcoded-hex warning (#ffffff, #f6f8fa, #24292f, #57606a, etc.): every one of these hex values in :root is already the required CSS custom-property fallback syntax, e.g. var(--color-canvas-default, #ffffff), correctly paired with the matching Primer CSS variable. There is nothing to fix here without breaking the fallback-value pattern the file already uses consistently for both light and dark mode.
• pill-button warning (border-radius: 50%): all 9 occurrences are small functional UI elements — step indicators, radio/checkbox dots, a modal close button, spark/ring decorations — not marketing CTAs or primary buttons. Primer Brand's "no pill buttons" guidance (from primer_brand_page_design) targets Hero/CTABanner-style call-to-action buttons; the site's actual .btn classes already use the modest var(--radius-md) corner radius, not full rounding. Left unchanged as out of scope for this guidance.
• Component note: "No @primer/react-brand components were imported." This site is intentionally plain HTML/CSS layered on @primer/css (not the React marketing library @primer/react-brand), per the project's own architecture; adopting @primer/react-brand components would be a structural change outside this workflow's presentational-only scope.

Validation

• npm test: 326/327 passing — the 1 pre-existing failure (test/copilot-instructions.test.js, a stale generated-date assertion unrelated to styling) also fails identically on main before this change.
• npm run build: the prebuild step (fetch-vendor-assets.mjs) fails in this sandbox because it needs registry access to vendor @primer/css/transformers.js — reproduced identically on main, confirming it's a pre-existing environment limitation, not caused by this change. Ran npx vite build directly (bypassing only the network-dependent vendor-fetch step) with a placeholder vendor/primer/primer.css to confirm the actual CSS/HTML/JS compiles cleanly with no errors; build artifacts were removed afterward.

Warning

Firewall blocked 1 domain

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

• registry.npmjs.org

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

network:
  allowed:
    - defaults
    - "registry.npmjs.org"

See Network Configuration for more information.

Generated by Primer Branding · copilot · auto · 177.9 AIC · ⌖ 7.32 AIC · ⊞ 7.8K · ◷

[github-actions]

Reviewer kind: ponytail — this is a purely presentational CSS token-consistency refactor.

Verified: --accent-green-rgb values (31,136,61 / 63,185,80) and --radius-md/--radius-lg (8px/12px) match exactly what was previously hardcoded, so this is a safe, behavior-preserving swap to reuse existing tokens. No UI, accessibility, or functional impact. No blocking issues found.

Generated by Specialist PR Review for #295 · copilot · auto · 15.5 AIC · ⌖ 5.85 AIC · ⊞ 6.8K