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

packages/component-header-footer/README.md

@@ -31,3 +31,20 @@ import { ASUHeader as Header, ASUFooter as Footer } from '@asu/component-header-
 
 ### Import for use in HTML page
 You can find an example of how to set `ASUHeader` and `ASUFooter` props for use in a browser [here](/packages/component-header/examples/global-header-footer.html)
+
+## Theming: brand colors
+
+The header and footer read ASU brand colors (maroon, gold) from Bootstrap's CSS
+custom properties, with the standard hex as a fallback — for example
+`var(--bs-gold, #ffc627)` and `var(--bs-maroon, #8c1d40)`. This includes gradient
+usages such as the selected nav-item underline and the animated title underline.
+
+- **Branded sites** render pixel-identically: with no `--bs-*` overrides present,
+  the hex fallback applies.
+- **Unbranded (KE) sites**: Webspark's unbranded palette rewrites `--bs-*` in the
+  compiled `unity-bootstrap-theme` stylesheet, so the header and footer follow the
+  site palette natively — no props or API changes required.
+
+Brand colors are centralized: the header's live in `src/header/colors.js`; the
+footer's gold flows through the local `--color-base-gold` custom property in
+`src/footer/index.styles.js`. Grays and other neutrals remain fixed literals.

packages/component-header-footer/src/footer/footer-brand-colors.test.js

@@ -0,0 +1,26 @@
+// @ts-check
+import { render, cleanup } from "@testing-library/react";
+import React from "react";
+
+import { ASUFooter } from ".";
+
+import { completeState } from "../../__mocks__/data/props-mock";
+
+// styled-components v6 injects its rules as <style> text nodes in non-production
+// (Jest sets NODE_ENV=test), so the compiled CSS is readable from the DOM.
+const getInjectedCss = () =>
+  Array.from(document.querySelectorAll("style"))
+    .map(styleEl => styleEl.textContent || "")
+    .join("");
+
+describe("footer brand gold custom property", () => {
+  afterEach(cleanup);
+
+  it("defines --color-base-gold from --bs-gold with the current hex as fallback", () => {
+    render(<ASUFooter {...completeState} />);
+    // Tolerate stylis whitespace normalization around the colon and comma.
+    expect(getInjectedCss()).toMatch(
+      /--color-base-gold\s*:\s*var\(\s*--bs-gold\s*,\s*#ffc627\s*\)/
+    );
+  });
+});

packages/component-header-footer/src/footer/index.styles.js

@@ -17,7 +17,7 @@ const StyledFooter = styled.footer`
   --color-divider-darker: #1e1e1e;
   --color-base-white: #ffffff;
   --color-base-grey-2: #e8e8e8;
-  --color-base-gold: #ffc627;
+  --color-base-gold: var(--bs-gold, #ffc627);
   --color-divider-lighter: #393939;
   --color-base-grey-7: #191919;
   --color-base-grey-4: #bfbfbf;

packages/component-header-footer/src/header/colors.js

@@ -6,8 +6,11 @@
  */
 
 // Primary ASU Brand Colors
-export const ASU_MAROON = "#8c1d40";
-export const ASU_GOLD = "#ffc627";
+// Read from Bootstrap-emitted CSS custom properties so Webspark's unbranded (KE)
+// palette (which rewrites --bs-* in the compiled unity-bootstrap-theme CSS) flows
+// into the header. The hex fallback keeps branded sites pixel-identical. UDS-2250.
+export const ASU_MAROON = "var(--bs-maroon, #8c1d40)";
+export const ASU_GOLD = "var(--bs-gold, #ffc627)";
 
 // Grayscale Colors
 export const ASU_WHITE = "#ffffff";

packages/component-header-footer/src/header/colors.test.js

@@ -0,0 +1,17 @@
+// @ts-check
+import { ASU_MAROON, ASU_GOLD, ACCENT_PRIMARY, ACCENT_SECONDARY } from "./colors";
+
+describe("header brand color constants", () => {
+  it("reads maroon from the --bs-maroon custom property with the current hex as fallback", () => {
+    expect(ASU_MAROON).toBe("var(--bs-maroon, #8c1d40)");
+  });
+
+  it("reads gold from the --bs-gold custom property with the current hex as fallback", () => {
+    expect(ASU_GOLD).toBe("var(--bs-gold, #ffc627)");
+  });
+
+  it("keeps the semantic accent aliases pointed at the brand constants", () => {
+    expect(ACCENT_PRIMARY).toBe(ASU_MAROON);
+    expect(ACCENT_SECONDARY).toBe(ASU_GOLD);
+  });
+});