@autoguru/overdrive 4.62.0 → 4.63.0

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

package/dist/components/OverdriveProvider/useColorOverrides.spec.js

@@ -0,0 +1,226 @@
+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 { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { colourMap } from "../../themes/base/colours.js";
+import { tokens as baseTokens } from "../../themes/base/tokens.js";
+import { getColourLuminance, getRGBValues } from "../../themes/helpers.js";
+import { useColorOverrides } from "./useColorOverrides.js";
+const BRAND = '#6d39a8'; // Merchant Finder's purple — dark, wants white on it
+const BRIGHT = '#e5bc01'; // a bright yellow — wants dark ink on it
+
+const vars = (overrides, tokens = baseTokens) => renderHook(() => useColorOverrides(overrides, tokens)).result.current;
+const luminance = colour => getColourLuminance(getRGBValues(colour));
+describe('useColorOverrides', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+  it('generates nothing when no overrides are supplied', () => {
+    expect(vars()).toEqual({});
+  });
+  describe('back-compat with the existing five keys', () => {
+    it('writes the legacy primary intent vars it always has', () => {
+      const result = vars({
+        primaryBackground: BRAND,
+        primaryForeground: '#ffffff',
+        primaryBorder: '#000000'
+      });
+      expect(result['--od-colours-intent-primary-background-standard']).toBe(BRAND);
+      expect(result['--od-colours-intent-primary-foreground']).toBe('#ffffff');
+      expect(result['--od-colours-intent-primary-border']).toBe('#000000');
+      expect(result['--od-typography-colour-primary']).toBe(BRAND);
+    });
+    it('honours explicitly supplied mild and strong values', () => {
+      const result = vars({
+        primaryBackground: BRAND,
+        primaryBackgroundMild: '#eeeeee',
+        primaryBackgroundStrong: '#111111'
+      });
+      expect(result['--od-colours-intent-primary-background-mild']).toBe('#eeeeee');
+      expect(result['--od-colours-intent-primary-background-strong']).toBe('#111111');
+    });
+    it('derives mild lighter and strong darker than the brand, not identical', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      const mild = result['--od-colours-intent-primary-background-mild'];
+      const strong = result['--od-colours-intent-primary-background-strong'];
+
+      // regression guard: these were derived with identical arguments and
+      // both resolved to the same lightened colour, so a branded button's
+      // hover and active states were indistinguishable from resting
+      expect(mild).not.toBe(strong);
+      expect(luminance(mild)).toBeGreaterThan(luminance(BRAND));
+      expect(luminance(strong)).toBeLessThan(luminance(BRAND));
+    });
+  });
+  describe('brand accent', () => {
+    it('writes the brand pair from the supplied background', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-color-brand-solid']).toBe(BRAND);
+    });
+    it('picks white as on-brand content for a dark brand', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.white);
+    });
+    it('picks dark ink as on-brand content for a bright brand', () => {
+      const result = vars({
+        primaryBackground: BRIGHT
+      });
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.gray['900']);
+    });
+    it('prefers an explicit primaryForeground over the derived value', () => {
+      const result = vars({
+        primaryBackground: BRIGHT,
+        primaryForeground: '#123456'
+      });
+      expect(result['--od-color-brand-on-solid']).toBe('#123456');
+    });
+    it('ignores a primaryForeground that would be illegible on the brand', () => {
+      // a tenant pairing a light brand with white button text: taken
+      // verbatim this puts a white tick on a light checkbox, which is
+      // worse than the fixed dark ink these controls had before they
+      // followed the brand at all
+      const result = vars({
+        primaryBackground: '#ff6d00',
+        primaryForeground: '#ffffff'
+      });
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.gray['900']);
+      // the button label still honours what the tenant asked for — that
+      // is their stated brand pairing, and it was already the behaviour
+      expect(result['--od-colours-intent-primary-foreground']).toBe('#ffffff');
+    });
+    it('derives the button label too when no primaryForeground is given', () => {
+      // otherwise a light brand keeps the theme's white label and the
+      // solid button is unreadable, which the prop docs promise against
+      const result = vars({
+        primaryBackground: BRIGHT
+      });
+      expect(result['--od-colours-intent-primary-foreground']).toBe(colourMap.gray['900']);
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.gray['900']);
+    });
+    it('picks its contrast candidates from the active theme, not the base one', () => {
+      // the two candidates are the theme's own page background and body
+      // ink, so a theme that changes either gets decisions made against
+      // what it actually renders
+      const recoloured = _objectSpread(_objectSpread({}, baseTokens), {}, {
+        color: _objectSpread(_objectSpread({}, baseTokens.color), {}, {
+          background: _objectSpread(_objectSpread({}, baseTokens.color.background), {}, {
+            default: '#fff8e1'
+          }),
+          foreground: _objectSpread(_objectSpread({}, baseTokens.color.foreground), {}, {
+            primary: '#1a0033'
+          })
+        })
+      });
+      const result = vars({
+        primaryBackground: BRIGHT
+      }, recoloured);
+      expect(result['--od-color-brand-on-solid']).toBe('#1a0033');
+    });
+  });
+  describe('outlined button', () => {
+    it('takes the brand verbatim for border and label', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-color-button-primary-outlined-border']).toBe(BRAND);
+      expect(result['--od-color-button-primary-outlined-text']).toBe(BRAND);
+    });
+    it('derives a hover wash paler than the pressed wash', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      const hover = result['--od-color-button-primary-outlined-hover'];
+      const pressed = result['--od-color-button-primary-outlined-pressed'];
+      expect(luminance(hover)).toBeGreaterThan(luminance(pressed));
+      expect(luminance(pressed)).toBeGreaterThan(luminance(BRAND));
+    });
+  });
+  describe('links and focus rings', () => {
+    it('leaves them alone when only a brand background is supplied', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-colours-foreground-link']).toBeUndefined();
+      expect(result['--od-typography-colour-link']).toBeUndefined();
+    });
+    it('brands them only when linkColor is passed explicitly', () => {
+      const result = vars({
+        primaryBackground: BRAND,
+        linkColor: BRAND
+      });
+      expect(result['--od-colours-foreground-link']).toBe(BRAND);
+      expect(result['--od-typography-colour-link']).toBe(BRAND);
+    });
+  });
+  describe('invalid values', () => {
+    it('warns, drops the key, and does not mutate the caller object', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const supplied = {
+        primaryBackground: 'not-a-colour',
+        primaryForeground: '#ffffff'
+      };
+      const result = vars(supplied);
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('primaryBackground'));
+      expect(result['--od-color-brand-solid']).toBeUndefined();
+      // the hook used to `delete` off the prop object itself, which
+      // mutates state an MFE may be holding in a GraphQL cache
+      expect(supplied.primaryBackground).toBe('not-a-colour');
+    });
+  });
+  describe('contrast warning', () => {
+    it('warns when the brand is too light to read on the page background', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      // a colour not warned about elsewhere in this file, since the
+      // warning is deduplicated for the life of the module
+      vars({
+        primaryBackground: '#ffd54a'
+      });
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('does not meet WCAG AA'));
+    });
+    it('stays quiet for a brand with enough contrast', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      vars({
+        primaryBackground: BRAND
+      });
+      expect(warn).not.toHaveBeenCalled();
+    });
+    it('warns only once for a repeated colour, since the provider re-renders freely', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      vars({
+        primaryBackground: '#ffe08a'
+      });
+      vars({
+        primaryBackground: '#ffe08a'
+      });
+      vars({
+        primaryBackground: '#ffe08a'
+      });
+      expect(warn).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe('server rendering', () => {
+    it('keeps overrides when the DOM colour check is unavailable', () => {
+      // `isValidColor` uses `Option`, a DOM global. Failing closed on the
+      // server stripped every override, so a branded page shipped no
+      // inline vars and only picked up the brand on hydration.
+      const original = globalThis.Option;
+      // @ts-expect-error simulating a non-DOM environment
+      delete globalThis.Option;
+      try {
+        const result = vars({
+          primaryBackground: BRAND
+        });
+        expect(result['--od-color-brand-solid']).toBe(BRAND);
+      } finally {
+        globalThis.Option = original;
+      }
+    });
+  });
+});

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Radio/Radio.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,KAAK,QAYhB,CAAC;AAEH,eAAO,MAAM,aAAa,QAOxB,CAAC"}
+{"version":3,"file":"Radio.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Radio/Radio.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,KAAK,QAYhB,CAAC;AAEH,eAAO,MAAM,aAAa,QAQxB,CAAC"}

package/dist/components/Radio/Radio.css.js

@@ -3,7 +3,7 @@ __vanilla_filescope__.setFileScope("lib/components/Radio/Radio.css.ts", "@autogu
 import { style } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 import { checkable, nativeInput } 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 outerSize = vars.space['6'];
@@ -42,7 +42,8 @@ export const inner = style([circleBase, {
   }
 }], "inner");
 export const innerSelected = style({
-  backgroundColor: colorContrast,
+  // on the brand fill, unlike the unselected hover dot above
+  backgroundColor: vars.color.brand.onSolid,
   selectors: {
     [`${nativeInput}:hover ~${checkable} &`]: {
       transform: 'scale(0.85)'

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,MAAM,QAqBjB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAKH,eAAO,MAAM,MAAM,sCAkCjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}
+{"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,MAAM,QAqBjB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAKH,eAAO,MAAM,MAAM,sCAoCjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}

package/dist/components/Switch/Switch.css.js

@@ -5,7 +5,7 @@ import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
 import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 globalLayer(LAYER_ORDER);
-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 colorLight = vars.colours.background.light;
@@ -78,6 +78,8 @@ export const handle = styleVariants({
       [cssLayerComponent]: {
         selectors: {
           [`${toggleOn} &`]: {
+            // on the brand track, so on-brand rather than page
+            backgroundColor: vars.color.brand.onSolid,
             transform: handleTranslate
           },
           [`${toggle}:not([data-disabled]):hover &`]: {

package/dist/styles/intentColorset.css.d.ts

@@ -1,8 +1,8 @@
 import { type RecipeVariants } from '@vanilla-extract/recipes';
-export declare const variantIntentionalColors: Record<"success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information", string>;
-export declare const variantIntentionalColorsInverted: Record<"success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information", string>;
+export declare const variantIntentionalColors: Record<"brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information", string>;
+export declare const variantIntentionalColorsInverted: Record<"brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information", string>;
 export declare const styledIntentionalElement: import("@vanilla-extract/recipes").RuntimeFn<{
-    intention: Record<"success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information", object>;
+    intention: Record<"brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information", object>;
     inverted: {
         true: {};
         false: {};

package/dist/styles/sprinkles.css.d.ts

@@ -30,18 +30,18 @@ export declare const sprinkles: ((props: {
     borderLeftColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
     borderRightColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
     borderTopColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
-    borderBottomColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
-    borderLeftColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
-    borderRightColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
-    borderTopColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
+    borderBottomColour?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
+    borderLeftColour?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
+    borderRightColour?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
+    borderTopColour?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
     borderLeftStyle?: "none" | "solid" | undefined;
     borderBottomStyle?: "none" | "solid" | undefined;
     borderRightStyle?: "none" | "solid" | undefined;
     borderTopStyle?: "none" | "solid" | undefined;
     color?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | "placeholder" | "primary" | "secondary" | "reverse" | "tertiary" | "unset" | "infoText" | "infoForeground" | "successText" | "successForeground" | "warningText" | "warningForeground" | "alertText" | "alertForeground" | undefined;
-    colour?: "link" | "white" | "body" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
+    colour?: "link" | "white" | "body" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
     backgroundColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "reverse" | "default" | "inactive" | "emphasisInactive" | "emphasisLight" | "modal" | "transparent" | "infoBackgroundStrong" | "infoBackgroundSubtle" | "successBackgroundStrong" | "successBackgroundSubtle" | "warningBackgroundStrong" | "warningBackgroundSubtle" | "alertBackgroundStrong" | "alertBackgroundSubtle" | undefined;
-    backgroundColour?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information" | "transparent" | "black900" | undefined;
+    backgroundColour?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information" | "transparent" | "black900" | undefined;
     opacity?: number | "0" | "1" | undefined;
     fontWeight?: "bold" | "medium" | "normal" | "semiBold" | undefined;
     textTransform?: "capitalize" | "lowercase" | "uppercase" | undefined;
@@ -56,9 +56,9 @@ export declare const sprinkles: ((props: {
     borderColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
     borderColorX?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
     borderColorY?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
-    borderColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
-    borderColourX?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
-    borderColourY?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
+    borderColour?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
+    borderColourX?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
+    borderColourY?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
     borderStyle?: "none" | "solid" | undefined;
     borderStyleBottom?: "none" | "solid" | undefined;
     borderStyleLeft?: "none" | "solid" | undefined;
@@ -504,9 +504,9 @@ export declare const valueArrays: {
     alignItems: ("stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart")[];
     borderColors: ("page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "disabled" | "muted")[];
     gapSizesWithVar: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "none")[];
-    intentBackgroundColoursStandard: ("success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information")[];
-    intentBorderColours: ("success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information")[];
-    intentForegroundColours: ("success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information")[];
+    intentBackgroundColoursStandard: ("brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information")[];
+    intentBorderColours: ("brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information")[];
+    intentForegroundColours: ("brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information")[];
     justifyContent: ("space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart")[];
     spaceWithNone: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "none")[];
     width: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full" | "auto" | "fit-content" | "max-content" | "min-content")[];

package/dist/styles/typography.css.d.ts

@@ -1,5 +1,5 @@
 export declare const sprinklesLegacyText: ((props: {
-    color?: "link" | "white" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
+    color?: "link" | "white" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
 }) => string) & {
     properties: Set<"color">;
 };

package/dist/themes/base/contrastGuide.spec.js

@@ -32,9 +32,10 @@ describe('contrast guide', () => {
 const tokenPairs = tokens => {
   const {
     surface,
-    content
+    content,
+    brand
   } = tokens.color;
-  return [['content.normal on surface.page', content.normal, surface.page], ['content.soft on surface.page', content.soft, surface.page], ['content.inverse on surface.hard', content.inverse, surface.hard], ['content.inverse on surface.soft', content.inverse, surface.soft], ['content.info on surface.page', content.info, surface.page], ['content.danger on surface.page', content.danger, surface.page], ['content.success on surface.page', content.success, surface.page], ['content.warning on surface.page', content.warning, surface.page]].concat(_toConsumableArray(Object.entries(tokens.colours.intent).flatMap(([name, intent]) => [[`intent.${name} foreground on background.standard`, intent.foreground, intent.background.standard], [`intent.${name} foreground on background.strong`, intent.foreground, intent.background.strong]])));
+  return [['brand.onSolid on brand.solid', brand.onSolid, brand.solid], ['content.normal on surface.page', content.normal, surface.page], ['content.soft on surface.page', content.soft, surface.page], ['content.inverse on surface.hard', content.inverse, surface.hard], ['content.inverse on surface.soft', content.inverse, surface.soft], ['content.info on surface.page', content.info, surface.page], ['content.danger on surface.page', content.danger, surface.page], ['content.success on surface.page', content.success, surface.page], ['content.warning on surface.page', content.warning, surface.page]].concat(_toConsumableArray(Object.entries(tokens.colours.intent).flatMap(([name, intent]) => [[`intent.${name} foreground on background.standard`, intent.foreground, intent.background.standard], [`intent.${name} foreground on background.strong`, intent.foreground, intent.background.strong]])));
 };
 const KNOWN_AA_FAILURES = {
   base: ['content.warning on surface.page', 'intent.brand foreground on background.standard', 'intent.primary foreground on background.standard', 'intent.primary foreground on background.strong', 'intent.shine foreground on background.standard', 'intent.shine foreground on background.strong', 'intent.success foreground on background.standard', 'intent.warning foreground on background.standard', 'intent.warning foreground on background.strong'],
@@ -42,6 +43,14 @@ const KNOWN_AA_FAILURES = {
   neutral: ['content.warning on surface.page', 'intent.brand foreground on background.standard', 'intent.shine foreground on background.standard', 'intent.shine foreground on background.strong', 'intent.success foreground on background.standard', 'intent.warning foreground on background.standard', 'intent.warning foreground on background.strong']
 };
 describe.each([['base', baseTokens], ['flat_red', flatRedTokens], ['neutral', neutralTokens]])('theme token audit: %s', (themeName, tokens) => {
+  // The brand pair is seeded to the values its consumers (Switch, Radio,
+  // CheckBox) rendered before it existed, which is what makes introducing it a
+  // zero-visual-change addition. If someone re-brands the seed without also
+  // moving those components, this fails first and says why.
+  it('seeds the brand pair to the values its consumers rendered before it existed', () => {
+    expect(tokens.color.brand.solid).toBe(tokens.color.foreground.primary);
+    expect(tokens.color.brand.onSolid).toBe(tokens.color.background.default);
+  });
   it('has no undocumented AA failures in intended pairings', () => {
     const failures = tokenPairs(tokens).filter(([, foreground, background]) => {
       return ratio(foreground, background) < 4.5;

package/dist/themes/base/index.d.ts

@@ -87,6 +87,10 @@ declare const _default: {
                     '100': `var(--${string})`;
                 };
             };
+            brand: {
+                solid: `var(--${string})`;
+                onSolid: `var(--${string})`;
+            };
             surface: {
                 page: `var(--${string})`;
                 hard: `var(--${string})`;
@@ -615,6 +619,10 @@ declare const _default: {
                 };
                 white: `var(--${string})`;
             };
+            brand: {
+                solid: string;
+                onSolid: string;
+            };
             surface: {
                 page: string;
                 hard: string;

package/dist/themes/base/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}

package/dist/themes/base/tokens.d.ts

@@ -98,6 +98,23 @@ export declare const tokens: {
             };
             white: `var(--${string})`;
         };
+        /**
+         * Seeded to the values the surfaces reading it render today, so adding
+         * this pair is byte-identical on every theme: `solid` matches
+         * `color.foreground.primary` and `onSolid` matches
+         * `color.background.default`.
+         *
+         * Raw hex, not a `colours.gamut.*` var alias — `color.gamut.*` is a
+         * transition bridge onto the legacy gamut, which `flat_red` overrides.
+         * Raw hex keeps the resolved value the same in all three themes, and is
+         * how `foreground.primary` / `background.default` are already seeded.
+         *
+         * A tenant re-brands this pair at runtime via `colorOverrides`.
+         */
+        brand: {
+            solid: string;
+            onSolid: string;
+        };
         surface: {
             page: string;
             hard: string;

package/dist/themes/base/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4BjB;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ckB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4BjB;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA2DH;;;;;;;;;;;;WAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoZkB,CAAC"}

package/dist/themes/base/tokens.js

@@ -105,6 +105,24 @@ export const tokens = {
       },
       white: overdriveTokens.colours.gamut.white
     },
+    /**
+     * Seeded to the values the surfaces reading it render today, so adding
+     * this pair is byte-identical on every theme: `solid` matches
+     * `color.foreground.primary` and `onSolid` matches
+     * `color.background.default`.
+     *
+     * Raw hex, not a `colours.gamut.*` var alias — `color.gamut.*` is a
+     * transition bridge onto the legacy gamut, which `flat_red` overrides.
+     * Raw hex keeps the resolved value the same in all three themes, and is
+     * how `foreground.primary` / `background.default` are already seeded.
+     *
+     * A tenant re-brands this pair at runtime via `colorOverrides`.
+     */
+    brand: {
+      solid: colourMap.gray['900'],
+      // #212338
+      onSolid: colourMap.white // #ffffff
+    },
     surface: {
       page: colourMap.white,
       hard: colourMap.gray['900'],

package/dist/themes/flat_red/index.d.ts

@@ -87,6 +87,10 @@ declare const _default: {
                     '100': `var(--${string})`;
                 };
             };
+            brand: {
+                solid: `var(--${string})`;
+                onSolid: `var(--${string})`;
+            };
             surface: {
                 page: `var(--${string})`;
                 hard: `var(--${string})`;
@@ -615,6 +619,10 @@ declare const _default: {
                 };
                 white: `var(--${string})`;
             };
+            brand: {
+                solid: string;
+                onSolid: string;
+            };
             surface: {
                 page: string;
                 hard: string;

package/dist/themes/flat_red/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/flat_red/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/flat_red/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}

package/dist/themes/flat_red/tokens.d.ts

@@ -84,6 +84,10 @@ export declare const tokens: {
             };
             white: `var(--${string})`;
         };
+        brand: {
+            solid: string;
+            onSolid: string;
+        };
         surface: {
             page: string;
             hard: string;

package/dist/themes/flat_red/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/flat_red/tokens.ts"],"names":[],"mappings":"AAmEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DK,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/flat_red/tokens.ts"],"names":[],"mappings":"AAmEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DK,CAAC"}

package/dist/themes/index.d.ts

@@ -90,6 +90,10 @@ export declare const themes: {
                     '100': `var(--${string})`;
                 };
             };
+            brand: {
+                solid: `var(--${string})`;
+                onSolid: `var(--${string})`;
+            };
             surface: {
                 page: `var(--${string})`;
                 hard: `var(--${string})`;
@@ -618,6 +622,10 @@ export declare const themes: {
                 };
                 white: `var(--${string})`;
             };
+            brand: {
+                solid: string;
+                onSolid: string;
+            };
             surface: {
                 page: string;
                 hard: string;

package/dist/themes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/themes/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AAEpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA0C,CAAC;AAC9D,OAAO,EACN,aAAa,EACb,mBAAmB,EACnB,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,KAAK,aAAa,GAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACN,eAAe,EACf,iBAAiB,EACjB,KAAK,WAAW,GAChB,MAAM,aAAa,CAAC;AACrB,mBAAmB,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/themes/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AAEpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA0C,CAAC;AAC9D,OAAO,EACN,aAAa,EACb,mBAAmB,EACnB,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,KAAK,aAAa,GAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACN,eAAe,EACf,iBAAiB,EACjB,KAAK,WAAW,GAChB,MAAM,aAAa,CAAC;AACrB,mBAAmB,SAAS,CAAC"}

package/dist/themes/makeTheme.d.ts

@@ -99,6 +99,10 @@ export declare const themeTokensWithLayer: (tokens: ThemeTokens) => {
                 '100': `var(--${string})`;
             };
         };
+        brand: {
+            solid: `var(--${string})`;
+            onSolid: `var(--${string})`;
+        };
         surface: {
             page: `var(--${string})`;
             hard: `var(--${string})`;

package/dist/themes/makeTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"makeTheme.d.ts","sourceRoot":"","sources":["../../lib/themes/makeTheme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAE/E,eAAO,MAAM,WAAW,EAAE,WAKzB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,WAAW,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,WAErD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,QAAO,SAAS,WAAW,EAEpD,CAAC;AAEF,eAAO,MAAM,UAAU,8CAGtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGtD,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAC7B,qBAAoB,WAAyB;;CAG5C,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEjE,eAAO,MAAM,gBAAgB,GAAI,SAAS,SAAS,KAAG,gBAepD,CAAC"}
+{"version":3,"file":"makeTheme.d.ts","sourceRoot":"","sources":["../../lib/themes/makeTheme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAE/E,eAAO,MAAM,WAAW,EAAE,WAKzB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,WAAW,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,KAAK,IAAI,WAErD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,QAAO,SAAS,WAAW,EAEpD,CAAC;AAEF,eAAO,MAAM,UAAU,8CAGtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGtD,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAC7B,qBAAoB,WAAyB;;CAG5C,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEjE,eAAO,MAAM,gBAAgB,GAAI,SAAS,SAAS,KAAG,gBAepD,CAAC"}

package/dist/themes/neutral/index.d.ts

@@ -87,6 +87,10 @@ declare const _default: {
                     '100': `var(--${string})`;
                 };
             };
+            brand: {
+                solid: `var(--${string})`;
+                onSolid: `var(--${string})`;
+            };
             surface: {
                 page: `var(--${string})`;
                 hard: `var(--${string})`;
@@ -615,6 +619,10 @@ declare const _default: {
                 };
                 white: `var(--${string})`;
             };
+            brand: {
+                solid: string;
+                onSolid: string;
+            };
             surface: {
                 page: string;
                 hard: string;

package/dist/themes/neutral/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/neutral/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/neutral/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}

package/dist/themes/neutral/tokens.d.ts

@@ -84,6 +84,10 @@ export declare const tokens: {
             };
             white: `var(--${string})`;
         };
+        brand: {
+            solid: string;
+            onSolid: string;
+        };
         surface: {
             page: string;
             hard: string;

package/dist/themes/neutral/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/neutral/tokens.ts"],"names":[],"mappings":"AAoEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiLK,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/neutral/tokens.ts"],"names":[],"mappings":"AAoEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiLK,CAAC"}

package/dist/themes/theme.css.d.ts

@@ -146,6 +146,10 @@ export declare const overdriveTokens: {
                 '100': `var(--${string})`;
             };
         };
+        brand: {
+            solid: `var(--${string})`;
+            onSolid: `var(--${string})`;
+        };
         surface: {
             page: `var(--${string})`;
             hard: `var(--${string})`;

package/dist/themes/theme.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.css.d.ts","sourceRoot":"","sources":["../../lib/themes/theme.css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAKpD,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDQ,CAAC;AAEtB,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC;AA6crC;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAI3B,CAAC;AAGF,OAAO,EAAE,eAAe,IAAI,iBAAiB,EAAE,CAAC;AAEhD,MAAM,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,eAAe,CAAC,CAAC;AAErE,0FAA0F;AAC1F,eAAO,MAAM,SAAS,QAKpB,CAAC"}
+{"version":3,"file":"theme.css.d.ts","sourceRoot":"","sources":["../../lib/themes/theme.css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAKpD,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDQ,CAAC;AAEtB,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC;AA6drC;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAI3B,CAAC;AAGF,OAAO,EAAE,eAAe,IAAI,iBAAiB,EAAE,CAAC;AAEhD,MAAM,MAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,eAAe,CAAC,CAAC;AAErE,0FAA0F;AAC1F,eAAO,MAAM,SAAS,QAKpB,CAAC"}

package/dist/themes/theme.css.js

@@ -101,6 +101,22 @@ const THEME_CONTRACT = {
   // new colour token structure 2025
   color: {
     gamut: coloursWithWhite,
+    /**
+     * The tenant brand accent — the "on" colour of a selection control and
+     * the seed a tenant re-brands from.
+     *
+     * Deliberately its own pair rather than a reuse of
+     * `color.foreground.primary`: that leaf is body-text ink shared with
+     * nine unrelated components, so a tenant branding its checked controls
+     * would drag every piece of primary text along with them.
+     *
+     * `onSolid` is the contrast-safe content placed on top of `solid` — the
+     * Switch handle, the Radio dot, the CheckBox tick.
+     */
+    brand: {
+      solid: 'color-brand-solid',
+      onSolid: 'color-brand-on-solid'
+    },
     surface: {
       page: null,
       hard: null,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.62.0",
+	"version": "4.63.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",