feat(component-header-footer): read brand colors from CSS custom properties (UDS-2250)

[juanmitriatti]

UDS-2250: Header and Footer read brand colors from CSS custom properties

What & why

Webspark's Unbranded (KE) profile (epic WS2-2964) replaces brand colors in the compiled unity-bootstrap-theme stylesheet, so every SCSS-styled component follows the site palette. The header and footer did not: their colors were hardcoded as styled-components JS constants injected at runtime, out of reach of any stylesheet replacement.

This change makes component-header-footer read every brand color from a CSS custom property with the current value as fallback, e.g. var(--bs-gold, #ffc627). Branded sites are pixel-identical because of the fallbacks; sites that define the variables (Webspark unbranded palettes rewrite --bs-* in the compiled CSS) get the header and footer following the palette natively.

Pairs with UDS-2248 (isUnbranded/unbrandedLogo props).

Changes

• src/header/colors.js — the two brand constants now read from custom properties (single choke point; all 10 header style files and the ACCENT_* aliases inherit it, gradients included):
  • ASU_MAROON → var(--bs-maroon, #8c1d40)
  • ASU_GOLD → var(--bs-gold, #ffc627)
• src/footer/index.styles.js — the footer's local --color-base-gold definition now reads var(--bs-gold, #ffc627); every var(--color-base-gold) usage (Innovation background, contact/accordion gold hovers) inherits it.
• README.md — new "Theming: brand colors" section documenting the pattern and rationale.
• Added tests locking the contract: src/header/colors.test.js and src/footer/footer-brand-colors.test.js.

Scope decisions

• Brand accents only (maroon, gold). Grays/neutrals stay as fixed literals — the unbranded palette swaps brand colors, not neutrals.
• No unity-bootstrap-theme change. --bs-maroon/--bs-gold (and --bs-darkmaroon/--bs-darkgold) are already emitted at :root and already rewritten by the Webspark palette system; no header/footer style uses a dark shade, so no --uds-color-base-* additions were needed.
• No new props, no API changes, no new dependencies.

Testing

• component-header-footer Jest suite: 50 passed / 10 suites (includes the 2 new contract tests).
• Datalayer Playwright: 2 passed.
• The footer-brand-colors test was mutation-verified (reverting the source to bare hex fails the test).

Acceptance criteria notes

• Accessibility (keyboard + screen reader) — no rendered change on branded sites; palette-driven change is Webspark's responsibility.
• Design/Brand review — branded output is byte-identical, so no Brand input expected.
• Technical documentation — README section added.
• Cross-team code review via PR.

[asu-jenkins-devops]

Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1767/index.html