@autoguru/overdrive 4.62.0 → 4.64.0

package/dist/components/FilterChip/FilterChip.js

@@ -0,0 +1,152 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["type", "label", "value", "operator", "selected", "pressed", "expanded", "onClick", "onRemove", "removeLabel", "className", "testId", "aria-haspopup"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { PlusIcon, XIcon } from '@autoguru/icons';
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import { useNullCheck } from "../../hooks/useNullCheck/index.js";
+import { useBox } from "../Box/useBox/useBox.js";
+import { Icon } from "../Icon/Icon.js";
+import * as styles from "./FilterChip.css.js";
+/** Attributes forwarded to the chip body. */
+/** The props every chip except `add` shares. */
+/** A category and its chosen value, e.g. `Vehicle type: Truck`. */
+/** A category, a comparison operator and a value, e.g. `Usage (km): over 100,000 km`. */
+/** A bare label with no value, e.g. `Serviced`. */
+/**
+ * The dashed "Add Filter" affordance that opens a filter picker. It holds no
+ * filter, so it takes no value, no state and nothing to remove, and `onClick` is
+ * required.
+ */
+/** All FilterChip props, discriminated on `type`. */
+/**
+ * The four filter chip shapes.
+ *
+ * - `select` — a category and its chosen value, e.g. `Vehicle type: Truck`
+ * - `numeric` — a category, a comparison operator and a value, e.g. `Usage (km): over 100,000 km`
+ * - `simple` — a bare label with no value
+ * - `add` — the dashed "Add Filter" affordance that opens a filter picker
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A filter chip represents one active filter in a filter bar. The body opens an
+ * editor for the filter's value and the trailing `×` clears it.
+ *
+ * Distinct from `Badge`, which is a static, non-interactive label.
+ *
+ * The forwarded `ref` lands on the chip body, which is what a `Popover` anchors
+ * to. It is attached only when the body is a button — that is, when `onClick` is
+ * supplied. A chip without one has an inert `<span>` body and receives no ref,
+ * whether or not it has a `×`.
+ *
+ * Removal is by the `×` button only — the WAI-ARIA APG chip pattern also removes
+ * a focused chip on `Backspace`/`Delete`, which this component does not
+ * implement.
+ */
+export const FilterChip = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      type = 'select',
+      label,
+      value,
+      operator,
+      selected = false,
+      pressed,
+      expanded,
+      onClick,
+      onRemove,
+      removeLabel,
+      className,
+      testId,
+      'aria-haspopup': ariaHasPopup
+    } = _ref,
+    bodyAttrs = _objectWithoutProperties(_ref, _excluded);
+  const isAdd = type === 'add';
+  const isSelected = !isAdd && selected;
+  const showRemove = !isAdd && typeof onRemove === 'function';
+  const isInteractive = typeof onClick === 'function' || showRemove;
+  useNullCheck(!isAdd || typeof onClick === 'function', 'FilterChip: an "add" chip needs an onClick — without one it renders as static text that still looks like a button.');
+  useNullCheck(typeof onClick === 'function' || expanded === undefined && pressed === undefined, 'FilterChip: "expanded" and "pressed" describe the chip body, which is only a button when onClick is supplied. Without one they are dropped.');
+  const accessibleName = label.replace(/:\s*$/, '');
+  const removeName = [accessibleName, operator, value].filter(Boolean).join(' ');
+  const stateProps = {
+    'aria-expanded': expanded,
+    'aria-haspopup': ariaHasPopup !== null && ariaHasPopup !== void 0 ? ariaHasPopup : expanded === undefined ? undefined : true,
+    'aria-pressed': isAdd ? undefined : pressed
+  };
+  const isBodyButton = typeof onClick === 'function';
+  const bodyInteractionProps = isBodyButton ? _objectSpread(_objectSpread({}, stateProps), {}, {
+    onClick,
+    ref,
+    type: 'button'
+  }) : {};
+  const bodyAs = isBodyButton ? 'button' : 'span';
+  const rootAs = showRemove ? 'div' : bodyAs;
+  const {
+    Component: Root,
+    componentProps: rootProps
+  } = useBox(_objectSpread({
+    as: rootAs,
+    className: [styles.chip({
+      variant: isAdd ? 'add' : 'filter',
+      selected: isSelected,
+      interactive: isInteractive
+    }), !showRemove && styles.chipBody(), !showRemove && isBodyButton && styles.buttonFont, className],
+    odComponent: 'filter-chip',
+    testId
+  }, showRemove ? {} : _objectSpread(_objectSpread({}, bodyAttrs), bodyInteractionProps)));
+  const {
+    Component: Body,
+    componentProps: bodyProps
+  } = useBox(_objectSpread(_objectSpread({
+    as: bodyAs,
+    className: [styles.chipBody({
+      withRemove: true
+    }), styles.innerButtonText, isBodyButton && styles.buttonFont]
+  }, bodyAttrs), bodyInteractionProps));
+  const {
+    Component: Remove,
+    componentProps: removeProps
+  } = useBox({
+    as: 'button',
+    className: [styles.buttonFont, styles.innerButtonText, styles.removeButton],
+    'aria-label': removeLabel !== null && removeLabel !== void 0 ? removeLabel : `Remove ${removeName} filter`,
+    onClick: onRemove,
+    type: 'button'
+  });
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isAdd && /*#__PURE__*/_jsx(Icon, {
+      icon: PlusIcon,
+      size: "small"
+    }), /*#__PURE__*/_jsx("span", {
+      className: clsx(styles.labelText, (type === 'select' || type === 'numeric') && styles.categoryLabel({
+        selected: isSelected
+      })),
+      children: label
+    }), type === 'numeric' && operator ? /*#__PURE__*/_jsx("span", {
+      className: styles.labelText,
+      children: operator
+    }) : null, (type === 'select' || type === 'numeric') && value ? /*#__PURE__*/_jsx("span", {
+      className: styles.valueText,
+      title: value,
+      children: value
+    }) : null]
+  });
+  if (showRemove) {
+    return /*#__PURE__*/_jsxs(Root, _objectSpread(_objectSpread({}, rootProps), {}, {
+      children: [/*#__PURE__*/_jsx(Body, _objectSpread(_objectSpread({}, bodyProps), {}, {
+        children: content
+      })), /*#__PURE__*/_jsx(Remove, _objectSpread(_objectSpread({}, removeProps), {}, {
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: XIcon,
+          size: "small"
+        })
+      }))]
+    }));
+  }
+  return /*#__PURE__*/_jsx(Root, _objectSpread(_objectSpread({}, rootProps), {}, {
+    children: content
+  }));
+});
+FilterChip.displayName = 'FilterChip';

package/dist/components/FilterChip/default.d.ts

@@ -0,0 +1,2 @@
+export { FilterChip as default } from './FilterChip';
+//# sourceMappingURL=default.d.ts.map

package/dist/components/FilterChip/default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../lib/components/FilterChip/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/FilterChip/default.js

@@ -0,0 +1 @@
+export { FilterChip as default } from "./FilterChip.js";

package/dist/components/FilterChip/index.d.ts

@@ -0,0 +1,3 @@
+export { FilterChip } from './FilterChip';
+export type { FilterChipProps, FilterChipType } from './FilterChip';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FilterChip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/FilterChip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/FilterChip/index.js

@@ -0,0 +1 @@
+export { FilterChip } from "./FilterChip.js";

package/dist/components/MinimalModal/MinimalModal.css.js

@@ -10,12 +10,12 @@ export const content = style({
   overscrollBehavior: 'contain'
 }, "content");
 const borderRoundTop = style({
-  borderTopLeftRadius: tokens.border.radius['2xl'],
-  borderTopRightRadius: tokens.border.radius['2xl']
+  borderTopLeftRadius: tokens.border.radius.medium,
+  borderTopRightRadius: tokens.border.radius.medium
 }, "borderRoundTop");
 const borderRoundBottom = style({
-  borderBottomLeftRadius: tokens.border.radius['2xl'],
-  borderBottomRightRadius: tokens.border.radius['2xl']
+  borderBottomLeftRadius: tokens.border.radius.medium,
+  borderBottomRightRadius: tokens.border.radius.medium
 }, "borderRoundBottom");
 export const borders = styleVariants({
   center: [borderRoundTop, borderRoundBottom],

package/dist/components/OverdriveProvider/OverdriveProvider.d.ts

@@ -14,7 +14,19 @@ export interface ProviderProps {
     breakpoints?: BreakPoints;
     /** When true, prevents applying theme styles at the body level */
     noBodyLevelTheming?: boolean;
-    /** Custom colour overrides for select theme tokens */
+    /**
+     * Custom colour overrides for select theme tokens — the runtime brand hook.
+     *
+     * `primaryBackground` drives the primary Button, the brand accent behind
+     * Switch/Radio/CheckBox on-states, the outlined Button, and
+     * `<Text colour="primary">`. `primaryForeground` is the content placed on
+     * top of it; when omitted it is derived for contrast.
+     *
+     * `linkColor` is deliberately separate rather than following
+     * `primaryBackground`: it also drives every focus ring in the library, and a
+     * colour picked as a fill behind white text is often illegible as link text
+     * on the page background. Pass it explicitly to brand links.
+     */
     colorOverrides?: Partial<ColorOverrides>;
     /** Reference to an HTML element where portals should be mounted */
     portalMountPoint?: PortalMountPoint;

package/dist/components/OverdriveProvider/OverdriveProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverdriveProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/OverdriveProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAAwD,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE7E,KAAK,aAAa,GAAG,OAAO,eAAe,CAAC;AAC5C,KAAK,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;AAqC5D,MAAM,WAAW,aAAa;IAC7B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,SAAS,CAAC;IACzB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,aAAa,EAAE,gBAAgB,GAAG,kBAAkB,CAAC;IAClE,UAAU,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACpD,IAAI,EAAE,aAAa,CAAC;CACpB;AAMD,eAAO,MAAM,QAAQ,uBAIpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,aAInC,CAAC;AAUF,eAAO,MAAM,QAAQ,GAAI,iGAQtB,aAAa,sBA6Df,CAAC;AAEF,eAAO,MAAM,iBAAiB,2CAK7B,CAAC"}
+{"version":3,"file":"OverdriveProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/OverdriveProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAAwD,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE7E,KAAK,aAAa,GAAG,OAAO,eAAe,CAAC;AAC5C,KAAK,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;AAqC5D,MAAM,WAAW,aAAa;IAC7B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,SAAS,CAAC;IACzB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,eAChB,SAAQ,IAAI,CAAC,aAAa,EAAE,gBAAgB,GAAG,kBAAkB,CAAC;IAClE,UAAU,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACpD,IAAI,EAAE,aAAa,CAAC;CACpB;AAMD,eAAO,MAAM,QAAQ,uBAIpB,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,aAInC,CAAC;AAUF,eAAO,MAAM,QAAQ,GAAI,iGAQtB,aAAa,sBAkEf,CAAC;AAEF,eAAO,MAAM,iBAAiB,2CAK7B,CAAC"}

package/dist/components/OverdriveProvider/OverdriveProvider.js

@@ -66,7 +66,12 @@ export const Provider = ({
   theme = baseTheme
 }) => {
   const runtimeTokens = useMemo(() => makeRuntimeTokens(breakpoints), [breakpoints]);
-  const styles = useColorOverrides(colorOverrides, String(theme.vars.mode));
+  // The theme's resolved tokens, not `theme.vars` — those are CSS var
+  // *references* (`var(--od-mode)`), so the mode check downstream never
+  // matched and its light/dark branch was dead. Passing the tokens also lets
+  // contrast decisions be made against this theme's own page background and
+  // body ink rather than the base theme's.
+  const styles = useColorOverrides(colorOverrides, theme.tokens);
   const themeValues = useMemo(() => ({
     themeClass: theme.themeRef,
     themeName: theme.name,

package/dist/components/OverdriveProvider/useColorOverrides.d.ts

@@ -1,7 +1,8 @@
+import { type ThemeTokens } from '../../themes/theme.css';
 /** valid colour override keys */
-declare const colorOverrideKeys: readonly ["primaryBackground", "primaryBackgroundMild", "primaryBackgroundStrong", "primaryBorder", "primaryForeground"];
+declare const colorOverrideKeys: readonly ["primaryBackground", "primaryBackgroundMild", "primaryBackgroundStrong", "primaryBorder", "primaryForeground", "linkColor"];
 export type ColorOverrides = Record<(typeof colorOverrideKeys)[number], string>;
-export declare const useColorOverrides: (overrides: Partial<ColorOverrides> | undefined, themeMode: string) => {
+export declare const useColorOverrides: (overrides: Partial<ColorOverrides> | undefined, tokens: ThemeTokens) => {
     [cssVarName: string]: string;
 };
 export {};

package/dist/components/OverdriveProvider/useColorOverrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useColorOverrides.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/useColorOverrides.ts"],"names":[],"mappings":"AAMA,iCAAiC;AACjC,QAAA,MAAM,iBAAiB,0HAMb,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AAYhF,eAAO,MAAM,iBAAiB,GAC7B,WAAW,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,EAC9C,WAAW,MAAM;;CAgEjB,CAAC"}
+{"version":3,"file":"useColorOverrides.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/useColorOverrides.ts"],"names":[],"mappings":"AAQA,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAe3E,iCAAiC;AACjC,QAAA,MAAM,iBAAiB,uIAOb,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AAsFhF,eAAO,MAAM,iBAAiB,GAC7B,WAAW,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,EAC9C,QAAQ,WAAW;;CAgJnB,CAAC"}

package/dist/components/OverdriveProvider/useColorOverrides.js

@@ -1,71 +1,207 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useMemo } from 'react';
-import { shadedColour } from "../../themes/helpers.js";
+import { getContrastRatio, passesAccessibilityContrast, shadedColour } from "../../themes/helpers.js";
 import { overdriveTokens } from "../../themes/theme.css.js";
+/** The active theme's own values, so contrast decisions match what it renders. */
+const themeContext = tokens => ({
+  mode: String(tokens.mode),
+  pageBackground: tokens.color.background.default,
+  bodyInk: tokens.color.foreground.primary
+});
+
 /** valid colour override keys */
-const colorOverrideKeys = ['primaryBackground', 'primaryBackgroundMild', 'primaryBackgroundStrong', 'primaryBorder', 'primaryForeground'];
+const colorOverrideKeys = ['primaryBackground', 'primaryBackgroundMild', 'primaryBackgroundStrong', 'primaryBorder', 'primaryForeground', 'linkColor'];
 const isValidColor = color => {
+  // `Option` is a DOM global, so this throws during SSR. Failing closed there
+  // stripped every override, leaving the brand to appear only on hydration.
+  if (typeof Option === 'undefined') return true;
   try {
     const s = new Option();
     s.style.color = color !== null && color !== void 0 ? color : '';
     return s.style.color !== '';
   } catch {
-    return false;
+    return true;
   }
 };
-export const useColorOverrides = (overrides, themeMode) => {
+
+/** Warn once per message — the provider re-renders on every child change. */
+const warned = new Set();
+const warnOnce = message => {
+  if (warned.has(message)) return;
+  warned.add(message);
+  console.warn(message);
+};
+
+/**
+ * Contrast-safe content for a brand fill, chosen from the active theme's own
+ * page background and body ink.
+ *
+ * `getContrastRatio` returns `min/max` — the reciprocal of the WCAG ratio — so
+ * the SMALLER value wins.
+ */
+const onBrandColour = (brand, theme) => getContrastRatio(theme.pageBackground, brand) < getContrastRatio(theme.bodyInk, brand) ? theme.pageBackground : theme.bodyInk;
+
+/**
+ * Prefer `primaryForeground`, but only while it clears 3:1 on the fill — it was
+ * chosen as a button label colour, and a light brand paired with white text
+ * would otherwise leave an invisible tick.
+ */
+const resolveOnBrand = (brand, theme, suppliedForeground) => {
+  if (!suppliedForeground) return onBrandColour(brand, theme);
+  const legible = passesAccessibilityContrast({
+    colour1: suppliedForeground,
+    colour2: brand,
+    level: 'AA',
+    textSize: 'LARGE'
+  });
+  if (legible) return suppliedForeground;
+  const derived = onBrandColour(brand, theme);
+  warnOnce(`Overdrive Provider: primaryForeground (${suppliedForeground}) does not meet 3:1 against primaryBackground (${brand}), so selection controls would be illegible. Using ${derived} for their tick/dot/knob instead.`);
+  return derived;
+};
+
+/** Dev-only nudge for a colour drawn as text or a border on the page. */
+const warnOnLowContrast = (colour, key, theme) => {
+  if (colour && !passesAccessibilityContrast({
+    colour1: colour,
+    colour2: theme.pageBackground,
+    level: 'AA',
+    textSize: 'SMALL'
+  })) {
+    warnOnce(`Overdrive Provider: ${key} (${colour}) does not meet WCAG AA (4.5:1) against the page background. Anything drawn in it as text or a border — outlined buttons, links, focus rings — may be hard to read.`);
+  }
+};
+export const useColorOverrides = (overrides, tokens) => {
   return useMemo(() => {
-    var _overrides$primaryBac, _mildPrimary, _strongPrimary, _overrides$primaryFor, _overrides$primaryBor, _overrides$primaryBac2;
+    var _onBrand, _outlinedHover, _outlinedPressed, _mildPrimary, _strongPrimary, _buttonForeground, _valid$primaryBorder;
     if (!overrides) return {};
+    const theme = themeContext(tokens);
+
+    // Copy before pruning — callers commonly hold this object in a cache.
+    const valid = _objectSpread({}, overrides);
     colorOverrideKeys.forEach(key => {
-      if (overrides[key] && !isValidColor(overrides[key])) {
-        console.warn(`Overdrive Provider: Invalid override color value for ${key}: ${overrides[key]}`);
-        delete overrides[key];
+      if (valid[key] && !isValidColor(valid[key])) {
+        console.warn(`Overdrive Provider: Invalid override color value for ${key}: ${valid[key]}`);
+        delete valid[key];
       }
     });
+    const {
+      primaryBackground,
+      linkColor
+    } = valid;
+    // unknown modes degrade to light, the common case
+    const isDarkTheme = theme.mode === 'dark';
     let mildPrimary = null;
     let strongPrimary = null;
-    if (overrides.primaryBackground) {
-      mildPrimary = overrides.primaryBackgroundMild || shadedColour({
-        colour: overrides.primaryBackground,
-        isDarkTheme: false,
-        direction: themeMode === 'light' ? 'forward' : 'backward',
+    let onBrand = null;
+    let buttonForeground = null;
+    let outlinedHover = null;
+    let outlinedPressed = null;
+    if (primaryBackground) {
+      var _valid$primaryForegro;
+      // Opposite directions: in a light theme mild is the paler wash and
+      // strong the deeper press state. These were once identical.
+      mildPrimary = valid.primaryBackgroundMild || shadedColour({
+        colour: primaryBackground,
+        isDarkTheme,
+        direction: 'forward',
         intensity: 0.1
       });
-      strongPrimary = overrides.primaryBackgroundStrong || shadedColour({
-        colour: overrides.primaryBackground,
-        isDarkTheme: false,
-        direction: themeMode === 'light' ? 'forward' : 'backward',
+      strongPrimary = valid.primaryBackgroundStrong || shadedColour({
+        colour: primaryBackground,
+        isDarkTheme,
+        direction: 'backward',
         intensity: 0.1
       });
+
+      // Honours an explicit value even when poor; only derives if absent.
+      buttonForeground = (_valid$primaryForegro = valid.primaryForeground) !== null && _valid$primaryForegro !== void 0 ? _valid$primaryForegro : onBrandColour(primaryBackground, theme);
+
+      // Stricter — a glyph failing 3:1 on the fill is invisible.
+      onBrand = resolveOnBrand(primaryBackground, theme, valid.primaryForeground);
+
+      // Pale tints behind an outlined button, hover the paler of the two.
+      outlinedHover = shadedColour({
+        colour: primaryBackground,
+        isDarkTheme,
+        direction: 'forward',
+        intensity: 0.5
+      });
+      outlinedPressed = shadedColour({
+        colour: primaryBackground,
+        isDarkTheme,
+        direction: 'forward',
+        intensity: 0.42
+      });
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      warnOnLowContrast(primaryBackground, 'primaryBackground', theme);
+      warnOnLowContrast(linkColor, 'linkColor', theme);
     }
+
     // slightly messy use of ts-expect-error but assignInlineVars only generates css vars to apply to a container
     // any property that is undefined will not have an inline css var generated
     return assignInlineVars(overdriveTokens, {
+      color: {
+        brand: {
+          //@ts-expect-error no undefined
+          solid: primaryBackground !== null && primaryBackground !== void 0 ? primaryBackground : undefined,
+          //@ts-expect-error no undefined
+          onSolid: (_onBrand = onBrand) !== null && _onBrand !== void 0 ? _onBrand : undefined
+        },
+        button: {
+          primary: {
+            outlined: {
+              // Verbatim — tenants expect their own brand.
+              //@ts-expect-error no undefined
+              border: primaryBackground !== null && primaryBackground !== void 0 ? primaryBackground : undefined,
+              //@ts-expect-error no undefined
+              text: primaryBackground !== null && primaryBackground !== void 0 ? primaryBackground : undefined,
+              //@ts-expect-error no undefined
+              hover: (_outlinedHover = outlinedHover) !== null && _outlinedHover !== void 0 ? _outlinedHover : undefined,
+              //@ts-expect-error no undefined
+              pressed: (_outlinedPressed = outlinedPressed) !== null && _outlinedPressed !== void 0 ? _outlinedPressed : undefined
+            }
+          }
+        }
+      },
       colours: {
+        foreground: {
+          // also brands every focus ring, via focusOutline.css.ts
+          //@ts-expect-error no undefined
+          link: linkColor !== null && linkColor !== void 0 ? linkColor : undefined
+        },
         intent: {
           primary: {
             background: {
               //@ts-expect-error no undefined
-              standard: (_overrides$primaryBac = overrides.primaryBackground) !== null && _overrides$primaryBac !== void 0 ? _overrides$primaryBac : undefined,
+              standard: primaryBackground !== null && primaryBackground !== void 0 ? primaryBackground : undefined,
               //@ts-expect-error no undefined
               mild: (_mildPrimary = mildPrimary) !== null && _mildPrimary !== void 0 ? _mildPrimary : undefined,
               //@ts-expect-error no undefined
               strong: (_strongPrimary = strongPrimary) !== null && _strongPrimary !== void 0 ? _strongPrimary : undefined
             },
+            // Derived — the theme's own value would leave a white
+            // label on a light brand.
             //@ts-expect-error no undefined
-            foreground: (_overrides$primaryFor = overrides.primaryForeground) !== null && _overrides$primaryFor !== void 0 ? _overrides$primaryFor : undefined,
+            foreground: (_buttonForeground = buttonForeground) !== null && _buttonForeground !== void 0 ? _buttonForeground : undefined,
             //@ts-expect-error no undefined
-            border: (_overrides$primaryBor = overrides.primaryBorder) !== null && _overrides$primaryBor !== void 0 ? _overrides$primaryBor : undefined
+            border: (_valid$primaryBorder = valid.primaryBorder) !== null && _valid$primaryBorder !== void 0 ? _valid$primaryBorder : undefined
           }
         }
       },
       typography: {
         colour: {
           //@ts-expect-error no undefined
-          primary: (_overrides$primaryBac2 = overrides.primaryBackground) !== null && _overrides$primaryBac2 !== void 0 ? _overrides$primaryBac2 : undefined
+          primary: primaryBackground !== null && primaryBackground !== void 0 ? primaryBackground : undefined,
+          // read by TextLink and by the `colour="link"` sprinkle
+          //@ts-expect-error no undefined
+          link: linkColor !== null && linkColor !== void 0 ? linkColor : undefined
         }
       }
     });
-  }, [overrides, themeMode]);
+  }, [overrides, tokens]);
 };

package/dist/components/OverdriveProvider/useColorOverrides.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useColorOverrides.spec.d.ts.map

package/dist/components/OverdriveProvider/useColorOverrides.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorOverrides.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/useColorOverrides.spec.ts"],"names":[],"mappings":""}