@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page/utils/color-palette.util.test.ts

@@ -3,6 +3,8 @@ import chroma from 'chroma-js';
 import type { ColorItem } from '../models';
 import {
   bestContrastBrandRole,
+  bestContrastNeutralRole,
+  firstViableContrastRole,
   generateNeutralPalette,
   classifyColor,
   paletteRoleIdForToken,
@@ -388,6 +390,129 @@ describe('bestContrastBrandRole (BP-5886 Phase 4)', () => {
   });
 });
 
+describe('bestContrastNeutralRole', () => {
+  const LIGHT = '#ffffff';
+  const DARK = '#000000';
+
+  const palette = (light?: string, dark?: string): ColorItem[] => {
+    const colors: ColorItem[] = [
+      { id: PALETTE_COLOR_IDS.primary, value: '#ff0000', type: 'palette' },
+      { id: PALETTE_COLOR_IDS.secondary, value: '#00ff00', type: 'palette' },
+    ];
+
+    if (light) {
+      colors.push({
+        id: PALETTE_COLOR_IDS.neutralLight,
+        value: light,
+        type: 'palette',
+      });
+    }
+
+    if (dark) {
+      colors.push({
+        id: PALETTE_COLOR_IDS.neutralDark,
+        value: dark,
+        type: 'palette',
+      });
+    }
+
+    return colors;
+  };
+
+  test('takes the dark neutral on a light surface and the light neutral on a dark one', () => {
+    expect(bestContrastNeutralRole(LIGHT, palette('#f5f5f5', '#111111'))).toBe(
+      PALETTE_COLOR_IDS.neutralDark,
+    );
+    expect(bestContrastNeutralRole(DARK, palette('#f5f5f5', '#111111'))).toBe(
+      PALETTE_COLOR_IDS.neutralLight,
+    );
+  });
+
+  test('never picks a brand role, even when a brand colour contrasts more', () => {
+    // The brand roles are pure black/white (maximal contrast) but must be ignored — only the
+    // neutrals compete for body text on the page.
+    const colors: ColorItem[] = [
+      { id: PALETTE_COLOR_IDS.primary, value: '#000000', type: 'palette' },
+      { id: PALETTE_COLOR_IDS.secondary, value: '#ffffff', type: 'palette' },
+      { id: PALETTE_COLOR_IDS.neutralLight, value: '#e0e0e0', type: 'palette' },
+      { id: PALETTE_COLOR_IDS.neutralDark, value: '#202020', type: 'palette' },
+    ];
+
+    const role = bestContrastNeutralRole(LIGHT, colors);
+
+    expect(role).toBe(PALETTE_COLOR_IDS.neutralDark);
+    expect(role).not.toBe(PALETTE_COLOR_IDS.primary);
+    expect(role).not.toBe(PALETTE_COLOR_IDS.secondary);
+  });
+
+  test('undefined when there is no neutral role or the base is unusable', () => {
+    expect(bestContrastNeutralRole(LIGHT, palette())).toBeUndefined();
+    expect(
+      bestContrastNeutralRole('transparent', palette('#f5f5f5', '#111111')),
+    ).toBeUndefined();
+    expect(
+      bestContrastNeutralRole('', palette('#f5f5f5', '#111111')),
+    ).toBeUndefined();
+  });
+});
+
+describe('firstViableContrastRole', () => {
+  const colors = (p0: string, p1: string): ColorItem[] => [
+    { id: PALETTE_COLOR_IDS.primary, value: p0, type: 'palette' },
+    { id: PALETTE_COLOR_IDS.secondary, value: p1, type: 'palette' },
+  ];
+
+  test('returns the first listed role that clears the floor, not the highest-contrast one', () => {
+    // On white, palette-1 (#000, 21:1) contrasts more than palette-0 (#767676, ~4:1), but
+    // palette-0 is listed first and clears 3 → it wins by hierarchy.
+    const order = [PALETTE_COLOR_IDS.primary, PALETTE_COLOR_IDS.secondary];
+
+    expect(
+      firstViableContrastRole(
+        '#ffffff',
+        colors('#767676', '#000000'),
+        order,
+        3,
+      ),
+    ).toBe(PALETTE_COLOR_IDS.primary);
+  });
+
+  test('skips a first role that breaches the floor and takes the next viable one', () => {
+    const order = [PALETTE_COLOR_IDS.primary, PALETTE_COLOR_IDS.secondary];
+
+    // palette-0 (#eeeeee) is illegible on white (<3); palette-1 (#000) clears it.
+    expect(
+      firstViableContrastRole(
+        '#ffffff',
+        colors('#eeeeee', '#000000'),
+        order,
+        3,
+      ),
+    ).toBe(PALETTE_COLOR_IDS.secondary);
+  });
+
+  test('undefined when no listed role clears the floor or the base is unusable', () => {
+    const order = [PALETTE_COLOR_IDS.primary, PALETTE_COLOR_IDS.secondary];
+
+    expect(
+      firstViableContrastRole(
+        '#ffffff',
+        colors('#f2f2f2', '#eeeeee'),
+        order,
+        3,
+      ),
+    ).toBeUndefined();
+    expect(
+      firstViableContrastRole(
+        'transparent',
+        colors('#000000', '#ffffff'),
+        order,
+        3,
+      ),
+    ).toBeUndefined();
+  });
+});
+
 describe('paletteRoleIdForToken', () => {
   test('maps the bare logo token to its common', () => {
     expect(paletteRoleIdForToken('logo-text-color')).toBe('palette-0');
@@ -1085,7 +1210,7 @@ describe('logo-context-less templates (BP-5886)', () => {
       // MAKER-ONLY as of 2026-08-07: the admin needs four visible, editable
       // swatches, and a template save clears them again anyway
       // (`clearPaletteRoleValues`). What was removed is this running during
-      // `migrateBrandPageModel` — as `migration23` it wrote these defaults into
+      // `migrateBrandPageModel` — the removed migration-time fallback wrote these defaults into
       // models on the ~17 call sites that have no logo, and blank-only filling
       // then stopped the customer's real logo ever correcting them. Renderers now
       // take their fallback at CSS emit instead, where it cannot be persisted.

package/src/brand-page/utils/color-palette.util.ts

@@ -10,6 +10,9 @@ import { isColorLinearGradient } from '@src/utils/helpers';
  * colour value, mint a deterministic palette id for it, and translate between an id
  * and its `var(--id)` reference. Side-effect and framework free so migration, maker
  * and renderer can all share them.
+ *
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: its colour bake uses `isBlankColorValue`. Pin the v22
+ * interpretation before changing that helper after the migration releases.
  */
 
 const CUSTOM_ID_PREFIX = 'palette-custom-';
@@ -678,40 +681,39 @@ export const generateNeutralPalette = (
 });
 
 /**
- * The contrast a colour-strategy copy colour must clear against the layer it sits on, or
- * the strategy falls back to a neutral.
+ * The minimum contrast a BRAND text colour must clear against the surface it sits on for the
+ * birth-time bake to use it; below this the bake falls back (to the other brand role, then a
+ * neutral for the page). One colour covers *all* copy on a surface, so no threshold guarantees
+ * every size — this is a floor for large brand copy.
  *
- * **WCAG AA for LARGE text (3:1), not 4.5:1, deliberately.** One colour covers *all* copy
- * on a layer, so no threshold is a guarantee at every size; 3:1 keeps brand colours that
- * are still legible (a mid-blue primary on the dark neutral is 3.77:1, which 4.5 would
- * throw away for a near-white neutral) while catching the broken end (~1.1:1, invisible
- * text). Raising it to 4.5 is a one-line change.
+ * **2:1 — deliberately BELOW WCAG AA large-text (3:1).** The brand's own logo-text colour is the
+ * site identity and should lead its headings even when it's a bright mid-tone that lands ~2.3:1
+ * on white (a large bold heading still reads there — the BP-5969 call, ADR-0020). 2:1 keeps that
+ * while still rejecting the genuinely invisible end (~1:1, e.g. a near-white role on white). A
+ * brand-identity-over-strict-contrast trade; raising it back toward 3 is a one-line change.
  *
- * > NOTE: **dormant** — its only caller was the retired `light`/`dark` `contrast`
- * > resolver (BP-5886, ADR 0017). `bestContrastBrandRole`'s remaining callers use the
- * > default `minRatio` of 0. Retire alongside the other theme-pair leftovers.
+ * Live consumer: `viableBrandRole` (`container-text-color.util.ts`), the contrast bake's floor.
  */
-export const STRATEGY_COPY_MIN_CONTRAST = 3;
+export const STRATEGY_COPY_MIN_CONTRAST = 2;
 
 /**
- * The brand role (`palette-0` / `palette-1`) whose colour reads best against `against` —
- * WCAG 2.1 contrast ratio. `undefined` when neither role holds a usable solid colour,
- * when `against` itself is not one, or when no role clears `minRatio`.
+ * The palette role from `candidateIds` whose colour reads best against `against` — WCAG 2.1
+ * contrast ratio. `undefined` when `against` is not a solid, no candidate holds a usable solid
+ * colour, or none clears `minRatio`. Candidates are ranked in the order given, so an exact tie
+ * resolves to the earlier id.
  *
- * The ratio, rather than a lightness comparison, answers the degenerate palettes with no
- * second rule: two dark brand colours against the dark neutral yield the less dark one.
- * Alpha is ignored (`chroma.contrast` composites nothing).
+ * The ratio, rather than a lightness comparison, answers the degenerate palettes with no second
+ * rule: two dark candidates against the dark neutral yield the less dark one. Alpha is ignored
+ * (`chroma.contrast` composites nothing).
  *
- * **`minRatio` is the legibility floor, and without it this ranks without judging** — it
- * returns the *best available* role even when unreadable (a mono dark logo puts near-black
- * copy on the dark neutral at 1.12:1). `undefined` then routes the caller to its neutral
- * fallback, which is right because the neutrals are *brand-hue tinted*, so the hue
- * survives; a lightness-adjusted brand colour could not be a palette **role**, so it would
- * be a literal and stop following palette edits.
+ * **`minRatio` is the legibility floor, and without it this ranks without judging** — it returns
+ * the *best available* role even when unreadable. `undefined` then routes the caller to its own
+ * fallback.
  */
-export const bestContrastBrandRole = (
+export const bestContrastRole = (
   against: string,
   colors: ColorItem[] = [],
+  candidateIds: string[],
   minRatio = 0,
 ): string | undefined => {
   // `canonicalSolidHex` rather than `chroma.valid`: a gradient, an unresolved `var()`
@@ -724,8 +726,7 @@ export const bestContrastBrandRole = (
 
   const byId = new Map(colors.map((c) => [c.id, c.value]));
 
-  // Primary first, so an exact tie resolves to it deterministically (`>` below).
-  const candidates = [PALETTE_COLOR_IDS.primary, PALETTE_COLOR_IDS.secondary]
+  const candidates = candidateIds
     .map((id): { id: string; hex?: string } => ({
       id,
       hex: canonicalSolidHex(byId.get(id) ?? ''),
@@ -744,6 +745,71 @@ export const bestContrastBrandRole = (
   return best && best.ratio >= minRatio ? best.id : undefined;
 };
 
+/**
+ * The BRAND role (`palette-0` / `palette-1`) that reads best against `against`; primary wins
+ * ties. The neutrals are excluded on purpose — a section title on a coloured surface takes a
+ * brand accent. See `bestContrastRole` for the ranking and the `minRatio` floor (without it, an
+ * `undefined` return routes the caller to its neutral fallback, which is right because the
+ * neutrals are brand-hue tinted, so the hue survives).
+ */
+export const bestContrastBrandRole = (
+  against: string,
+  colors: ColorItem[] = [],
+  minRatio = 0,
+): string | undefined =>
+  bestContrastRole(
+    against,
+    colors,
+    [PALETTE_COLOR_IDS.primary, PALETTE_COLOR_IDS.secondary],
+    minRatio,
+  );
+
+/**
+ * The NEUTRAL role (`palette-2` light / `palette-3` dark) that reads best against `against` — the
+ * readable, brand-hue-tinted text colour for copy on a plain surface (the page background),
+ * replacing the retired base coat. Light role wins ties.
+ */
+export const bestContrastNeutralRole = (
+  against: string,
+  colors: ColorItem[] = [],
+): string | undefined =>
+  bestContrastRole(against, colors, [
+    PALETTE_COLOR_IDS.neutralLight,
+    PALETTE_COLOR_IDS.neutralDark,
+  ]);
+
+/**
+ * The FIRST role in `orderedIds` whose colour clears `minRatio` against `against` — a PRIORITY
+ * pick, not a best-contrast pick: an earlier id wins even when a later one contrasts more. Honours
+ * a brand hierarchy (e.g. logo-text before logo-background) while still guaranteeing legibility via
+ * the floor. `undefined` when `against` is not a solid or no listed role clears `minRatio`, so the
+ * caller can route on to its own fallback.
+ */
+export const firstViableContrastRole = (
+  against: string,
+  colors: ColorItem[] = [],
+  orderedIds: string[],
+  minRatio: number,
+): string | undefined => {
+  const baseHex = canonicalSolidHex(against);
+
+  if (!baseHex) {
+    return undefined;
+  }
+
+  const byId = new Map(colors.map((c) => [c.id, c.value]));
+
+  for (const id of orderedIds) {
+    const hex = canonicalSolidHex(byId.get(id) ?? '');
+
+    if (hex && chroma.contrast(baseHex, hex) >= minRatio) {
+      return id;
+    }
+  }
+
+  return undefined;
+};
+
 // The fallback palette. The neutrals are generated from the two blues (one code path) so
 // it stays self-consistent with real logos.
 export const DEFAULT_PRIMARY = '#2b6cff';

package/src/brand-page/utils/color.util.test.ts

@@ -306,54 +306,87 @@ describe('color.util - withColorOpacity fades references too (BP-5886)', () => {
   });
 });
 
-describe('color.util - getNavThemeByTextStyle', () => {
-  // palette-0 dark, palette-1 light, plus brand-tinted neutrals.
-  const PALETTE: ColorItem[] = [
-    { id: 'palette-0', value: '#111111', type: 'palette' },
-    { id: 'palette-1', value: '#eeeeee', type: 'palette' },
-    { id: 'palette-2', value: '#f5f5f5', type: 'palette' },
-    { id: 'palette-3', value: '#1a1a1a', type: 'palette' },
+describe('color.util - getNavThemeByTextStyle (ADR-0022: nav themes off the logo)', () => {
+  // palette-0 = logo text (green), palette-1 = logo background (navy), + neutrals.
+  const LOGO_PALETTE: ColorItem[] = [
+    { id: 'palette-0', value: '#7abd2d', type: 'palette' }, // green — logo text
+    { id: 'palette-1', value: '#130e34', type: 'palette' }, // navy  — logo background
+    { id: 'palette-2', value: '#455538', type: 'palette' },
+    { id: 'palette-3', value: '#ecedff', type: 'palette' },
   ];
 
-  test('derives the contrasting brand role for a dark primary (the option-1 → option-2 bug)', () => {
-    const theme = getNavThemeByTextStyle(
-      { color: 'var(--palette-0)' },
-      PALETTE,
-    );
+  test('R1: logo text colour is legible on the header → primary = logo text, selected label inverts', () => {
+    // green clears 2:1 on a white header, so the nav themes on the logo text colour and the
+    // selected label takes the contrasting brand role (navy) so it reads on the green fill.
+    const theme = getNavThemeByTextStyle('#ffffff', LOGO_PALETTE);
 
-    // primary is kept verbatim; the selected label takes the OTHER brand role so it
-    // reads on the primary fill — the thing that regressed under color-v2.
     expect(theme.primaryColor).toBe('var(--palette-0)');
     expect(theme.secondaryColor).toBe('var(--palette-1)');
     expect(theme.secondaryColor).not.toBe(theme.primaryColor);
   });
 
-  test('is symmetric — a light primary contrasts against the dark brand role', () => {
-    const theme = getNavThemeByTextStyle(
-      { color: 'var(--palette-1)' },
-      PALETTE,
-    );
+  test('R2: logo text colour fails 2:1 on the header → falls back to logo background colour', () => {
+    // header IS the green logo-text colour → green-on-green fails, navy clears.
+    const theme = getNavThemeByTextStyle('#7abd2d', LOGO_PALETTE);
 
     expect(theme.primaryColor).toBe('var(--palette-1)');
+    // selected label inverts to the other brand role (logo text / green) so it reads on the fill.
     expect(theme.secondaryColor).toBe('var(--palette-0)');
+    expect(theme.secondaryColor).not.toBe(theme.primaryColor);
   });
 
-  test('a non-brand-role base still picks whichever brand role reads best against it', () => {
-    // a dark neutral base: palette-1 (light) out-contrasts palette-0 (dark).
+  test('R3: neither brand role is legible → a generated neutral literal, not a palette ref', () => {
+    // both brand roles sit at the header's own luminance → both fail; primary is a generated
+    // neutral (a literal), so it is NOT a var(--palette-N) reference.
+    const grayPalette: ColorItem[] = [
+      { id: 'palette-0', value: '#7f7f7f', type: 'palette' },
+      { id: 'palette-1', value: '#808080', type: 'palette' },
+      { id: 'palette-2', value: '#f5f5f5', type: 'palette' },
+      { id: 'palette-3', value: '#111111', type: 'palette' },
+    ];
+
+    const theme = getNavThemeByTextStyle('#808080', grayPalette);
+
+    expect(theme.primaryColor).not.toMatch(/^var\(/);
+    expect(wcagContrast(theme.primaryColor, '#808080')).toBeGreaterThanOrEqual(
+      2,
+    );
+    // even with a neutral-literal fill, the selected label still inverts to a brand role.
+    expect(theme.secondaryColor).toMatch(/^var\(--palette-\d+\)$/);
+    expect(theme.secondaryColor).not.toBe(theme.primaryColor);
+  });
+
+  test('R4: an unset/transparent header anchors to the page background', () => {
+    // Green logo text fails on the matching green page behind a transparent header, so navy wins.
     const theme = getNavThemeByTextStyle(
-      { color: 'var(--palette-3)' },
-      PALETTE,
+      'transparent',
+      LOGO_PALETTE,
+      'var(--palette-0)',
     );
 
-    expect(theme.secondaryColor).toBe('var(--palette-1)');
+    expect(theme.primaryColor).toBe('var(--palette-1)');
   });
 
-  test('falls back to the primary when the palette can supply no brand role', () => {
-    // No palette at all — the reference cannot be resolved to a colour, so rather than
-    // mint an off-palette literal we leave the label equal to the primary (no throw).
-    const theme = getNavThemeByTextStyle({ color: 'var(--palette-0)' }, []);
+  test('R5: an unset header uses white only when the page has no solid anchor', () => {
+    // The signature carries no button-colour input at all (the ADR-0022 decouple).
+    const theme = getNavThemeByTextStyle(undefined, LOGO_PALETTE);
 
     expect(theme.primaryColor).toBe('var(--palette-0)');
-    expect(theme.secondaryColor).toBe('var(--palette-0)');
+  });
+
+  test('R6: brand picks stay palette references so the nav tracks palette edits', () => {
+    const theme = getNavThemeByTextStyle('#ffffff', LOGO_PALETTE);
+
+    expect(theme.primaryColor).toMatch(/^var\(--palette-\d+\)$/);
+    expect(theme.secondaryColor).toMatch(/^var\(--palette-\d+\)$/);
+  });
+
+  test('degenerate: an empty palette yields a neutral literal and no invert (no throw)', () => {
+    // No palette → the brand roles cannot resolve → primary is a generated neutral; with no
+    // role to invert against, the selected label falls back to the primary (pre-ADR behaviour).
+    const theme = getNavThemeByTextStyle(undefined, []);
+
+    expect(theme.primaryColor).not.toMatch(/^var\(/);
+    expect(theme.secondaryColor).toBe(theme.primaryColor);
   });
 });

package/src/brand-page/utils/color.util.ts

@@ -1,3 +1,8 @@
+/**
+ * MIGRATION-22 SNAPSHOT DEPENDENCY: its colour bake reaches `backgroundColorFromStyle`,
+ * `isTransparentColour` and `isHexTransparent` through `container-text-color.util.ts`. After
+ * migration-22 releases, pin their v22 behaviour in the migration before changing them.
+ */
 import isHexColor from 'validator/lib/isHexColor';
 import { hexToRGBA, RGBAtoHex } from '@src/utils/helpers';
 import type { ColorItem, Theme } from '../models';
@@ -7,6 +12,8 @@ import {
   bestContrastBrandRole,
   resolveColorReference,
   toColorVarReference,
+  PALETTE_COLOR_IDS,
+  STRATEGY_COPY_MIN_CONTRAST,
 } from './color-palette.util';
 import Color, { type ColorInstance } from 'color';
 
@@ -256,26 +263,82 @@ export const backgroundColorFromStyle = (
   style: BrandPageCssStyle | undefined,
 ): string | undefined => style?.backgroundColor || style?.background;
 
+// A solid, fully-opaque hex from any parseable colour, else undefined (transparent,
+// gradient, image, `var(--…)`, unparseable) — so a contrast check only runs against a real
+// surface.
+const solidHex = (value: string | undefined): string | undefined => {
+  if (!value) {
+    return undefined;
+  }
+
+  try {
+    const parsed = Color(value);
+
+    return parsed.alpha() === 1 ? parsed.hex() : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
 /**
- * The nav "theme" for a display-type switch: the base colour the caller passes (kept
- * verbatim, incl. its palette `var(--id)` reference) plus the contrasting palette-role
- * reference to pair with it — e.g. a TAB_2 selected button paints its background with
- * `primaryColor` and its label with `secondaryColor`.
+ * The nav "theme" for a header nav display-type switch. Nav themes off the LOGO, independently
+ * of the page's button styling (ADR-0022): `primaryColor` — the dominant nav colour used for
+ * default text, border and the selected button's fill — is the first brand role that stays
+ * legible (>= `STRATEGY_COPY_MIN_CONTRAST`) on the header background: logo text colour
+ * (`palette-0`), else logo background colour (`palette-1`), else a generated neutral.
+ * `secondaryColor` — the selected button's label — is the brand role that best contrasts
+ * `primaryColor` (`bestContrastBrandRole`), so the label reads on the filled pill
+ * ("encapsulated contrast").
  *
- * `secondaryColor` is a palette-role reference, not a resolved literal, so the label
- * keeps tracking palette edits. It is the brand role that reads best (WCAG) against the
- * base's resolved value; when the palette can't supply one (empty/blank palette) it
- * falls back to the base so we never mint an off-palette colour.
+ * Brand picks are returned as palette `var(--id)` references so the nav keeps tracking palette
+ * edits; only the neutral fallback is a literal. `headerBackgroundColor` is the preferred surface
+ * the nav sits on. When it does not paint, `pageBackgroundColor` is the surface visible behind the
+ * header; white is the final fallback when neither resolves to a solid colour.
  */
 export const getNavThemeByTextStyle = (
-  textStyle: BrandPageCssStyle,
+  headerBackgroundColor: string | undefined,
   colors: ColorItem[] = [],
+  pageBackgroundColor?: string,
 ): Theme => {
-  const primaryColor = textStyle.color!;
-  const baseValue = resolveColorReference(primaryColor, colors, {
-    withRoleDefaults: true,
-  });
-  const contrastRole = bestContrastBrandRole(baseValue, colors);
+  const logoTextColor = toColorVarReference(PALETTE_COLOR_IDS.primary);
+  const logoBackgroundColor = toColorVarReference(PALETTE_COLOR_IDS.secondary);
+
+  const resolvedSurface = (color: string | undefined): string | undefined =>
+    solidHex(
+      resolveColorReference(color ?? '', colors, { withRoleDefaults: true }),
+    );
+
+  // A transparent/unset header reveals the page surface. Image and gradient backgrounds have no
+  // single contrast anchor, so only then does the historic light fallback apply.
+  const surface =
+    resolvedSurface(headerBackgroundColor) ??
+    resolvedSurface(pageBackgroundColor) ??
+    '#ffffff';
+
+  const clearsOnSurface = (roleRef: string): boolean => {
+    const resolved = solidHex(
+      resolveColorReference(roleRef, colors, { withRoleDefaults: true }),
+    );
+
+    return (
+      !!resolved &&
+      contrastRatio(Color(resolved), Color(surface)) >=
+        STRATEGY_COPY_MIN_CONTRAST
+    );
+  };
+
+  const primaryColor = clearsOnSurface(logoTextColor)
+    ? logoTextColor
+    : clearsOnSurface(logoBackgroundColor)
+      ? logoBackgroundColor
+      : (mutedTextForBackground(surface, {
+          targetContrast: STRATEGY_COPY_MIN_CONTRAST,
+        }) ?? logoTextColor);
+
+  const contrastRole = bestContrastBrandRole(
+    resolveColorReference(primaryColor, colors, { withRoleDefaults: true }),
+    colors,
+  );
 
   return {
     primaryColor,