@autoguru/overdrive 4.61.0 → 4.63.0

package/dist/components/Alert/Alert.js

@@ -75,7 +75,7 @@ export const Alert = ({
           onClick: onRequestClose,
           children: /*#__PURE__*/_jsx(Icon, {
             className: sprinkles({
-              color: 'tertiaryInactive'
+              color: 'tertiary'
             }),
             icon: XIcon,
             size: "medium"

package/dist/components/Box/useBox/useBox.d.ts

@@ -12,6 +12,7 @@ export declare const useBox: ({ as, className: incomingClassName, odComponent, t
         placeholder?: string | undefined | undefined;
         default?: boolean | undefined | undefined;
         selected?: boolean | undefined | undefined;
+        disabled?: boolean | undefined | undefined;
         min?: number | string | undefined | undefined;
         muted?: boolean | undefined | undefined;
         step?: number | string | undefined | undefined;
@@ -23,7 +24,6 @@ export declare const useBox: ({ as, className: incomingClassName, odComponent, t
         wrap?: string | undefined | undefined;
         open?: boolean | undefined | undefined;
         multiple?: boolean | undefined | undefined;
-        disabled?: boolean | undefined | undefined;
         span?: number | undefined | undefined;
         label?: string | undefined | undefined;
         cite?: string | undefined | undefined;

package/dist/components/Button/Button.css.d.ts

@@ -148,6 +148,10 @@ export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
     isLoading: {
         true: {};
     };
+    /** Empty here; the appearance lives in the `intent: 'primary'` compound. */
+    outlined: {
+        true: {};
+    };
 }>;
 type ButtonRecipeProps = NonNullable<Required<RecipeVariants<typeof button>>>;
 export type ButtonSize = ButtonRecipeProps['size'];
@@ -156,6 +160,7 @@ export type ButtonIntent = ButtonRecipeProps['intent'];
 export type ButtonIsFullWidth = ButtonRecipeProps['isFullWidth'];
 export type ButtonIsLoading = ButtonRecipeProps['isLoading'];
 export type ButtonMinimal = ButtonRecipeProps['minimal'];
+export type ButtonOutlined = ButtonRecipeProps['outlined'];
 export type ButtonRounded = ButtonRecipeProps['rounded'];
 export interface StyledButtonProps {
     /**
@@ -174,8 +179,15 @@ export interface StyledButtonProps {
      * Present a borderless minimal appearance
      */
     minimal?: ButtonMinimal;
+    /**
+     * Transparent fill with a brand-coloured border and label.
+     *
+     * Currently applies to `variant="primary"` only, and ignored when `minimal`
+     * is set — the two are opposites.
+     */
+    outlined?: ButtonOutlined;
     isFullWidth?: ButtonIsFullWidth;
-    isLoading?: ButtonIsFullWidth;
+    isLoading?: ButtonIsLoading;
 }
 export {};
 //# sourceMappingURL=Button.css.d.ts.map

package/dist/components/Button/Button.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAe,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAYzE,eAAO,MAAM,aAAa,QAAkC,CAAC;AAC7D,eAAO,MAAM,cAAc,QAKzB,CAAC;AACH,eAAO,MAAM,OAAO,QAA4B,CAAC;AAGjD,eAAO,MAAM,MAAM;;;;gBA+Cd,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;;;;;gBAUD,CAAC,iBAAiB,CAAC;;kBAElB;;;;;;;gBAQD,CAAC,iBAAiB,CAAC;;;;;;;kBASlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAOlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;;;;;kBAalB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;;;gBAQD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;;;;;;;;;;EAsMJ,CAAC;AAEH,KAAK,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AACvD,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAC;AACjE,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAC7D,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AACzD,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AAEzD,MAAM,WAAW,iBAAiB;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC9B"}
+{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAe,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAYzE,eAAO,MAAM,aAAa,QAAkC,CAAC;AAC7D,eAAO,MAAM,cAAc,QAKzB,CAAC;AACH,eAAO,MAAM,OAAO,QAA4B,CAAC;AAGjD,eAAO,MAAM,MAAM;;;;gBA+Cd,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;kBAGlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;;;;;gBAUD,CAAC,iBAAiB,CAAC;;kBAElB;;;;;;;gBAQD,CAAC,iBAAiB,CAAC;;;;;;;kBASlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAOlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;;;;;kBAalB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;gBAKD,CAAC,iBAAiB,CAAC;;;;;;kBAQlB;;;;;;;gBAQD,CAAC,iBAAiB,CAAC;;;;kBAIlB;;;;;;;;;;;;;;IAcJ,4EAA4E;;;;EA4N5E,CAAC;AAEH,KAAK,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AACvD,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAC;AACjE,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAC7D,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AACzD,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;AAC3D,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;AAEzD,MAAM,WAAW,iBAAiB;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,SAAS,CAAC,EAAE,eAAe,CAAC;CAC5B"}

package/dist/components/Button/Button.css.js

@@ -212,6 +212,10 @@ export const button = recipe({
     },
     isLoading: {
       true: {}
+    },
+    /** Empty here; the appearance lives in the `intent: 'primary'` compound. */
+    outlined: {
+      true: {}
     }
   },
   compoundVariants: [
@@ -409,6 +413,37 @@ export const button = recipe({
         }
       }
     }
+  },
+  // Compound class names are index-based — append, never insert.
+  {
+    variants: {
+      intent: 'primary',
+      outlined: true
+    },
+    style: {
+      '@layer': {
+        [cssLayerComponent]: {
+          // intent primary sets this too, at equal specificity.
+          backgroundColor: 'transparent',
+          border: `1px solid ${vars.color.button.primary.outlined.border}`,
+          color: vars.color.button.primary.outlined.text,
+          selectors: {
+            '&:focus-visible, &:not(:disabled):hover': {
+              backgroundColor: vars.color.button.primary.outlined.hover,
+              borderColor: vars.color.button.primary.outlined.border,
+              color: vars.color.button.primary.outlined.text
+            },
+            '&:active:not(:disabled, [data-loading])': {
+              backgroundColor: vars.color.button.primary.outlined.pressed,
+              // Restated: intent primary's nested `:active`
+              // (0,3,0) beats this variant's `:focus-visible`.
+              borderColor: vars.color.button.primary.outlined.border,
+              color: vars.color.button.primary.outlined.text
+            }
+          }
+        }
+      }
+    }
   }],
   defaultVariants: {
     size: 'medium',

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EASb,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EAIhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,KAAK,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAOhD,QAAA,MAAM,mBAAmB;;CAEf,CAAC;AAEX,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,WAChB,SAAQ,IAAI,CACV,eAAe,EACb,UAAU,GACV,IAAI,GACJ,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,GACd,MAAM,GACN,WAAW,CACb,EACD,IAAI,CACH,cAAc,EACZ,YAAY,GACZ,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,eAAe,CACjB,EACD,iBAAiB,EACjB,UAAU;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACxB;AAcD,eAAO,MAAM,YAAY,GAAI,MAAM,WAAW,CAAC,MAAM,CAAC,uBACnB,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,MAAM,uFAwIlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EASb,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EAIhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,KAAK,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAOhD,QAAA,MAAM,mBAAmB;;CAEf,CAAC;AAEX,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,WAChB,SAAQ,IAAI,CACV,eAAe,EACb,UAAU,GACV,IAAI,GACJ,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,GACd,MAAM,GACN,WAAW,CACb,EACD,IAAI,CACH,cAAc,EACZ,YAAY,GACZ,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,eAAe,CACjB,EACD,iBAAiB,EACjB,UAAU;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACxB;AAcD,eAAO,MAAM,YAAY,GAAI,MAAM,WAAW,CAAC,MAAM,CAAC,uBACnB,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,MAAM,uFA4IlB,CAAC"}

package/dist/components/Button/Button.js

@@ -65,6 +65,7 @@ export const Button = /*#__PURE__*/forwardRef(({
   isFullWidth = false,
   localeText,
   minimal = false,
+  outlined = false,
   rounded = false,
   size = 'medium',
   testId,
@@ -84,7 +85,9 @@ export const Button = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const [functionallyDisabled, setFunctionallyDisabled] = useState(false);
   const language = _objectSpread(_objectSpread({}, LOCALE_TEXT_DEFAULT), localeText);
-  const isInverse = minimal || variant === 'secondary';
+  // `minimal` wins; primary-only because only it has outlined tokens.
+  const isOutlined = outlined && !minimal && variant === 'primary';
+  const isInverse = minimal || isOutlined || variant === 'secondary';
   const isSingleIconChild = useMemo(() => /*#__PURE__*/isValidElement(children) && children.type === Icon && typeof children.type !== 'string', [children]);
   const shape = isSingleIconChild && 'iconOnly' || rounded && 'rounded' || 'default';
   const onClick = useCallback(event => {
@@ -105,6 +108,7 @@ export const Button = /*#__PURE__*/forwardRef(({
       isFullWidth,
       isLoading,
       minimal,
+      outlined: isOutlined,
       rounded,
       shape,
       size

package/dist/components/CheckBox/CheckBox.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.css.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,QAAQ,wCA0BnB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC"}
+{"version":3,"file":"CheckBox.css.d.ts","sourceRoot":"","sources":["../../../lib/components/CheckBox/CheckBox.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,QAAQ,wCA6BnB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC"}

package/dist/components/CheckBox/CheckBox.css.js

@@ -3,7 +3,7 @@ __vanilla_filescope__.setFileScope("lib/components/CheckBox/CheckBox.css.ts", "@
 import { style, styleVariants } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 import { nativeInput, checkable } from "../private/CheckableBase/CheckableBase.css.js";
-const colorAccent = vars.color.foreground.primary;
+const colorAccent = vars.color.brand.solid;
 const colorContrast = vars.color.background.default;
 const colorMid = vars.colours.background.neutral;
 const size = vars.space['6'];
@@ -33,7 +33,10 @@ export const checkbox = styleVariants({
   },
   selected: {
     backgroundColor: colorAccent,
-    borderColor: colorAccent
+    borderColor: colorAccent,
+    // On `selected` only — the Icon always renders, hidden by matching
+    // the page background.
+    color: vars.color.brand.onSolid
   }
 }, "checkbox");
 export const icon = style({

package/dist/components/DateInput/DateInput.js

@@ -172,7 +172,7 @@ export const DateInput = withEnhancedInput(({
       gap: '2',
       spaceBetween: true
     }), disabled && sprinkles({
-      color: 'tertiaryInactive'
+      color: 'tertiary'
     })),
     children: [/*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, fieldProps), {}, {
       className: styles.verticalCenterStyle,

package/dist/components/EditableText/EditableText.css.js

@@ -7,7 +7,7 @@ globalLayer(LAYER_ORDER);
 export const root = style({
   '@layer': {
     [cssLayerComponent]: {
-      boxShadow: `inset 0 -1px 0 0 ${vars.color.foreground.tertiaryInactive}`,
+      boxShadow: `inset 0 -1px 0 0 ${vars.color.foreground.tertiary}`,
       transitionDelay: '0s',
       transitionDuration: '0.2s',
       transitionProperty: 'box-shadow',

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":""}