Primer branding: fix broken --text-default token reference

[github-actions]

What changed

Color

• .ap-fix strong in src/styles/style.css referenced var(--text-default), a CSS custom property that was never defined anywhere in the stylesheet. It silently fell back to the browser default text color (black) in both light and dark mode, breaking dark-mode color parity for anti-pattern "fix" text shown in the wizard. Changed to var(--text-primary), the site's existing semantic token that maps to Primer's color-fg-default (with a light/dark-aware hex fallback), matching how every other text color in the stylesheet is handled.

Brand guidance that motivated this change

Retrieved from the primer-brand MCP server (bundled @primer/react-brand@0.77.0 snapshot):

• Primer brand color tokens (e.g. --brand-color-text-default, --brand-color-text-muted) are semantic and theme-aware — foreground text should always resolve through a defined, theme-responsive variable rather than falling back to the raw browser default, to preserve light/dark parity and contrast.

Audit scope

I reviewed src/index.html, src/styles/style.css, and markup emitted from src/js/ against Primer color, typography, spacing, and voice/tone guidance (colors, font stacks, border-radius scale, spacing tokens, button/heading copy). The site already follows Primer conventions closely:

• Colors are layered as semantic custom properties with Primer --color-* CSS variable fallbacks, with full light/dark parity.
• Typography uses the system font stack consistently; no divergent font families found.
• Spacing/border-radius use local --radius-md / --radius-lg tokens tied to Primer's border-radius scale.
• Button/heading copy ("Continue", "Analyze", "Copy prompt") is concise and on-tone.
• No hardcoded off-brand hex colors or gradients were found outside of documented, Primer-token-derived shadow/overlay values.

Deviations found but not fixed

None — this was the only concrete deviation found. The change set is intentionally minimal (a one-line CSS fix) per the "small, human-reviewable" guidance.

Validation

• npm test: 325/327 tests pass. The 2 failing tests (test/copilot-instructions.test.js) are pre-existing pattern-library/manifest drift failures, confirmed present on main before this change (unrelated to this CSS fix).
• npm run build (full): the prebuild step fails only because the sandbox blocks outbound npm-registry access (a pre-existing environment network restriction, not a regression caused by this change).
• npx vite build (core build, bypassing the network-dependent vendor-asset prefetch): succeeds cleanly, confirming the CSS compiles and bundles without errors.

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 · 100.5 AIC · ⌖ 8.34 AIC · ⊞ 9.4K · ◷