@autoguru/overdrive 4.59.0 → 4.60.0

package/dist/components/OptionGrid/OptionGrid.css.js

@@ -126,7 +126,7 @@ export const gridItemContainerStyle = style([sprinkles({
 }), {
   '@layer': {
     [cssLayerComponent]: {
-      backgroundColor: tokens.colours.background.body,
+      backgroundColor: tokens.color.background.default,
       borderColor: tokens.border.colours.gray,
       minHeight: '80px'
     }
@@ -135,7 +135,7 @@ export const gridItemContainerStyle = style([sprinkles({
 export const gridItemStyle = style([gridItemContainerStyle, {
   '@layer': {
     [cssLayerComponent]: {
-      backgroundColor: tokens.colours.background.body,
+      backgroundColor: tokens.color.background.default,
       borderColor: tokens.border.colours.gray,
       minHeight: '80px',
       selectors: {
@@ -143,7 +143,7 @@ export const gridItemStyle = style([gridItemContainerStyle, {
           cursor: 'pointer'
         },
         [selectors.selected]: {
-          backgroundColor: tokens.colours.background.body,
+          backgroundColor: tokens.color.background.default,
           borderColor: tokens.border.colours.dark
         },
         [`${selectors.hoverNotSelected}, ${selectors.focusVisibleNotSelected}`]: {
@@ -156,7 +156,7 @@ export const gridItemStyle = style([gridItemContainerStyle, {
           display: 'block',
           height: '100%',
           left: 0,
-          outlineColor: tokens.colours.gamut.black900,
+          outlineColor: tokens.color.gamut.gray['900'],
           outlineStyle: 'solid',
           outlineWidth: tokens.border.width[2],
           position: 'absolute',
@@ -164,9 +164,9 @@ export const gridItemStyle = style([gridItemContainerStyle, {
           width: '100%'
         },
         [selectors.disabled]: {
-          backgroundColor: tokens.colours.gamut.gray100,
+          backgroundColor: tokens.color.gamut.gray['100'],
           borderColor: 'transparent',
-          color: tokens.colours.gamut.black500,
+          color: tokens.color.gamut.gray['500'],
           cursor: 'not-allowed'
         }
       }
@@ -186,7 +186,7 @@ export const indicatorStyle = style({
 }, "indicatorStyle");
 export const checkboxStyle = style([sprinkles({
   alignItems: 'center',
-  borderColour: 'gray',
+  borderColor: 'default',
   borderRadius: 'sm',
   borderStyle: 'solid',
   borderWidth: '1',
@@ -200,15 +200,15 @@ export const checkboxStyle = style([sprinkles({
       color: 'transparent',
       selectors: {
         [selectors.selected]: {
-          backgroundColor: tokens.colours.foreground.body,
-          color: tokens.colours.background.body
+          backgroundColor: tokens.color.foreground.primary,
+          color: tokens.color.background.default
         },
         [`${selectors.hoverNotSelected}, ${selectors.focusVisibleNotSelected}`]: {
-          backgroundColor: tokens.colours.gamut.gray300,
-          color: tokens.colours.background.body
+          backgroundColor: tokens.color.gamut.gray['300'],
+          color: tokens.color.background.default
         },
         [selectors.disabled]: {
-          borderColor: tokens.colours.gamut.gray200
+          borderColor: tokens.color.gamut.gray['200']
         }
       }
     }
@@ -230,10 +230,10 @@ const pseudoRadio = style({
           width: '100%'
         },
         [`${selectors.hover}:after, ${selectors.focusVisible}:after`]: {
-          background: tokens.colours.gamut.gray200
+          background: tokens.color.gamut.gray['200']
         },
         [`&[data-selected]:after`]: {
-          background: tokens.colours.gamut.white
+          background: tokens.color.gamut.white
         }
       }
     }
@@ -249,20 +249,20 @@ export const radioButtonStyle = style([sprinkles({
 }), {
   '@layer': {
     [cssLayerComponent]: {
-      backgroundColor: tokens.colours.background.body,
+      backgroundColor: tokens.color.background.default,
       borderColor: tokens.border.colours.gray,
       selectors: {
         [selectors.selected]: {
-          backgroundColor: tokens.colours.foreground.body,
+          backgroundColor: tokens.color.foreground.primary,
           borderColor: tokens.border.colours.dark
         },
         [`${selectors.hoverNotSelected}, ${selectors.focusVisibleNotSelected}`]: {
-          backgroundColor: tokens.colours.gamut.gray300,
-          borderColor: tokens.colours.gamut.gray300
+          backgroundColor: tokens.color.gamut.gray['300'],
+          borderColor: tokens.color.gamut.gray['300']
         },
         [selectors.disabled]: {
-          backgroundColor: tokens.colours.gamut.gray100,
-          borderColor: tokens.colours.gamut.gray200
+          backgroundColor: tokens.color.gamut.gray['100'],
+          borderColor: tokens.color.gamut.gray['200']
         }
       }
     }

package/dist/components/OptionList/OptionList.css.js

@@ -22,14 +22,14 @@ export const descriptionStyle = style([sprinkles({
 }), {
   '@layer': {
     [cssLayerComponent]: {
-      color: tokens.colours.gamut.gray400
+      color: tokens.color.gamut.gray['400']
     }
   }
 }], "descriptionStyle");
 
 // === Option item styles
 export const optionItemStyle = style([sprinkles({
-  borderColour: 'gray',
+  borderColor: 'default',
   borderStyle: 'solid',
   borderWidth: '1',
   display: 'flex',
@@ -41,7 +41,7 @@ export const optionItemStyle = style([sprinkles({
 }), {
   '@layer': {
     [cssLayerComponent]: {
-      background: tokens.colours.background.body,
+      background: tokens.color.background.default,
       selectors: {
         ['&+&']: {
           borderTopStyle: 'none'
@@ -55,14 +55,14 @@ export const optionItemStyle = style([sprinkles({
           borderBottomRightRadius: tokens.border.radius.md
         },
         [selectors.hoverNotDisabled]: {
-          background: tokens.colours.gamut.gray200,
+          background: tokens.color.gamut.gray['200'],
           cursor: 'pointer'
         },
         [selectors.focusVisible]: {
-          background: tokens.colours.gamut.gray200
+          background: tokens.color.gamut.gray['200']
         },
         [selectors.disabled]: {
-          background: tokens.colours.background.body,
+          background: tokens.color.background.default,
           cursor: 'default'
         }
       }
@@ -88,7 +88,7 @@ export const checkbox = style([sprinkles({
 }), {
   '@layer': {
     [cssLayerComponent]: {
-      background: tokens.colours.background.body,
+      background: tokens.color.background.default,
       borderColor: tokens.border.colours.gray,
       color: 'transparent',
       transitionDuration: '100ms',
@@ -96,13 +96,13 @@ export const checkbox = style([sprinkles({
       transitionTimingFunction: 'ease-in',
       selectors: {
         [selectors.checked]: {
-          background: tokens.colours.gamut.gray900,
+          background: tokens.color.gamut.gray['900'],
           borderColor: tokens.border.colours.dark,
-          color: tokens.colours.background.body
+          color: tokens.color.background.default
         },
         [`${optionItemStyle}:hover &:not([data-checked],[data-disabled])`]: {
-          background: tokens.colours.gamut.gray300,
-          color: tokens.colours.background.body
+          background: tokens.color.gamut.gray['300'],
+          color: tokens.color.background.default
         }
       }
     }

package/dist/components/OrderedList/OrderedList.js

@@ -30,7 +30,7 @@ export const OrderedList = ({
     className: [styles.root.default, stack({
       gap: '2'
     }), textStyles({
-      colour: 'dark'
+      color: 'primary'
     }), {
       [styles.root.firstOccurrence]: cycle === -1
     }, className],

package/dist/components/Pagination/Bubble.js

@@ -12,11 +12,11 @@ export const Bubble = ({
   disabled,
   onClick
 }) => {
-  let backgroundColour = 'transparent';
-  if (selected) backgroundColour = 'green900';else if (disabled) backgroundColour = 'gray200';
+  let backgroundColor = 'transparent';
+  if (selected) backgroundColor = 'green900';else if (disabled) backgroundColor = 'gray200';
   return /*#__PURE__*/_jsx(Box, {
     as: "button",
-    backgroundColour: backgroundColour,
+    backgroundColor: backgroundColor,
     display: "flex",
     overflow: "hidden",
     alignItems: "center",

package/dist/components/Pagination/Pagination.css.js

@@ -17,11 +17,11 @@ export const activeItem = style({
   width: paginationBubbleSize,
   selectors: {
     [`&:not(${selectedItem}):hover`]: {
-      backgroundColor: vars.colours.background.body,
+      backgroundColor: vars.color.background.default,
       boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.background.strong}, ${vars.elevation['1']}`
     },
     [`&:not(${selectedItem}):active`]: {
-      backgroundColor: vars.colours.background.body,
+      backgroundColor: vars.color.background.default,
       boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.background.strong}, ${vars.elevation['1']}`
     }
   }

package/dist/components/Popover/Popover.css.js

@@ -10,12 +10,12 @@ export const overlayStyle = style([sprinkles({
   borderRadius: 'md',
   borderWidth: '1',
   borderStyle: 'solid',
-  borderColour: 'light',
+  borderColor: 'gray200',
   padding: '4'
 }), {
   '@layer': {
     [cssLayerComponent]: {
-      backgroundColor: tokens.colours.background.body,
+      backgroundColor: tokens.color.background.default,
       boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
       minWidth: '280px'
     }
@@ -41,7 +41,7 @@ export const triggerStyle = style({
 export const fullScreenStyle = style({
   '@layer': {
     [cssLayerComponent]: {
-      backgroundColor: tokens.colours.background.body,
+      backgroundColor: tokens.color.background.default,
       bottom: 0,
       left: 0,
       position: 'fixed',

package/dist/components/ProgressBar/ProgressBar.js

@@ -17,11 +17,11 @@ export const ProgressBar = ({
 }) => /*#__PURE__*/_jsx(Box, {
   className: styles.container,
   borderRadius: "1",
-  backgroundColour: "gray100",
+  backgroundColor: "gray100",
   odComponent: "progress-bar",
   children: /*#__PURE__*/_jsx(Box, {
     borderRadius: "1",
-    backgroundColour: backgroundColorMap[colour],
+    backgroundColor: backgroundColorMap[colour],
     className: [styles.bar, styles.container],
     style: {
       width: `${clamp(value, 0, 1) * 100}%`

package/dist/components/ProgressBarGroup/ProgressBarGroup.js

@@ -24,7 +24,7 @@ export const ProgressBarGroup = ({
     children: values.map((value, idx) => /*#__PURE__*/_jsxs(Fragment, {
       children: [/*#__PURE__*/_jsx(Text, {
         size: "3",
-        colour: "light",
+        color: "gray700",
         className: styles.label,
         children: hasPrefixLabels ? prefixLabels[idx] : ''
       }), /*#__PURE__*/_jsx(ProgressBar, {
@@ -32,7 +32,7 @@ export const ProgressBarGroup = ({
         value: value / count
       }), /*#__PURE__*/_jsx(Text, {
         size: "3",
-        colour: "light",
+        color: "gray700",
         children: hasSuffixLabels ? suffixLabels[idx] : ''
       })]
     }, idx))

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

@@ -1,6 +1,6 @@
 export declare const circular: string;
 export declare const path: string;
-export declare const colours: Record<"danger" | "warning" | "light" | "primary" | "secondary" | "default", string>;
+export declare const colours: Record<"danger" | "warning" | "primary" | "secondary" | "default" | "light", string>;
 export declare const size: {
     small: Record<"path" | "circular", string>;
     medium: Record<"path" | "circular", string>;

package/dist/components/ProgressSpinner/ProgressSpinner.css.js

@@ -42,10 +42,10 @@ export const colours = styleVariants({
     stroke: vars.typography.colour.danger
   },
   default: {
-    stroke: vars.colours.foreground.body
+    stroke: vars.color.foreground.primary
   },
   light: {
-    stroke: vars.typography.colour.white
+    stroke: vars.color.foreground.reverse
   },
   primary: {
     stroke: vars.typography.colour.primary

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

@@ -3,8 +3,8 @@ __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.colours.foreground.body;
-const colorContrast = vars.colours.background.body;
+const colorAccent = vars.color.foreground.primary;
+const colorContrast = vars.color.background.default;
 const colorMid = vars.colours.background.neutral;
 const outerSize = vars.space['6'];
 const innerSize = vars.space['3'];

package/dist/components/ScrollPane/ScrollPane.css.js

@@ -3,7 +3,7 @@ __vanilla_filescope__.setFileScope("lib/components/ScrollPane/ScrollPane.css.ts"
 import { style } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 export const root = style({
-  scrollbarColor: `${vars.colours.gamut.gray300} transparent`,
+  scrollbarColor: `${vars.color.gamut.gray['300']} transparent`,
   scrollbarWidth: 'thin',
   '::-webkit-scrollbar': {
     backgroundColor: 'transparent',
@@ -17,7 +17,7 @@ export const root = style({
     backgroundColor: 'transparent'
   },
   '::-webkit-scrollbar-thumb': {
-    backgroundColor: vars.colours.gamut.gray300,
+    backgroundColor: vars.color.gamut.gray['300'],
     borderRadius: '999px'
   },
   '::-webkit-scrollbar-button': {
@@ -25,7 +25,7 @@ export const root = style({
   },
   selectors: {
     ['&::-webkit-scrollbar-thumb:hover']: {
-      backgroundColor: vars.colours.gamut.gray400
+      backgroundColor: vars.color.gamut.gray['400']
     }
   }
 }, "root");

package/dist/components/SearchBar/SearchBar.css.js

@@ -23,10 +23,10 @@ const placeholder = style({
     [cssLayerComponent]: {
       selectors: {
         '&::placeholder': {
-          color: tokens.colours.gamut.gray400
+          color: tokens.color.gamut.gray['400']
         },
         '&:disabled::placeholder': {
-          color: tokens.colours.gamut.gray300
+          color: tokens.color.gamut.gray['300']
         }
       }
     }
@@ -36,23 +36,23 @@ export const searchBarStyle = style([{
   '@layer': {
     [cssLayerComponent]: {
       alignItems: 'center',
-      backgroundColor: tokens.colours.background.body,
+      backgroundColor: tokens.color.background.default,
       borderColor: tokens.border.colours.gray,
       borderRadius: tokens.border.radius['md'],
       borderStyle: 'solid',
       borderWidth: tokens.border.width[2],
-      color: tokens.colours.gamut.gray400,
+      color: tokens.color.gamut.gray['400'],
       display: 'flex',
       gap: tokens.space[2],
       padding: `0 ${tokens.space[4]}`,
       selectors: {
         '&:focus, &[data-focus], &[data-focused]': {
           borderColor: tokens.border.colours.dark,
-          color: tokens.colours.gamut.gray900
+          color: tokens.color.gamut.gray['900']
         },
         '&:disabled, &[data-disabled]': {
           borderColor: tokens.border.colours.light,
-          color: tokens.colours.gamut.gray300,
+          color: tokens.color.gamut.gray['300'],
           cursor: 'not-allowed'
         },
         '&:hover:not(:disabled,[data-disabled]), &[data-hover]:not(:disabled,[data-disabled])': {

package/dist/components/SelectInput/SelectInput.css.js

@@ -9,7 +9,7 @@ export const input = style({
 export const paddedInput = style({
   selectors: {
     [`${input}&`]: {
-      paddingRight: vars.space['8']
+      paddingRight: vars.space['9']
     }
   }
 }, "paddedInput");

package/dist/components/Slider/Slider.css.js

@@ -15,7 +15,7 @@ export const container = sprinkles({
 });
 export const label = sprinkles({
   fontSize: '6',
-  fontWeight: 'semiBold',
+  fontWeight: 'medium',
   color: 'normal'
 });
 export const valueDisplay = sprinkles({
@@ -25,7 +25,7 @@ export const valueDisplay = sprinkles({
 });
 export const valueText = sprinkles({
   fontSize: '7',
-  fontWeight: 'semiBold',
+  fontWeight: 'medium',
   color: 'normal'
 });
 export const sliderContainer = sprinkles({
@@ -47,10 +47,10 @@ export const track = style([sprinkles({
 }), {
   '@layer': {
     [cssLayerComponent]: {
-      backgroundColor: vars.colours.gamut.gray300,
+      backgroundColor: vars.color.gamut.gray['300'],
       selectors: {
         [selectors.disabled]: {
-          backgroundColor: vars.colours.gamut.gray200,
+          backgroundColor: vars.color.gamut.gray['200'],
           cursor: 'not-allowed'
         }
       }
@@ -64,7 +64,7 @@ export const thumb = style([sprinkles({
 }), {
   '@layer': {
     [cssLayerComponent]: {
-      backgroundColor: vars.colours.gamut.black900,
+      backgroundColor: vars.color.gamut.gray['900'],
       cursor: 'pointer',
       position: 'absolute',
       top: '50%',
@@ -81,7 +81,7 @@ export const thumb = style([sprinkles({
           boxShadow: `0 0 0 4px rgba(0, 0, 0, 0.2)`
         },
         [selectors.disabled]: {
-          backgroundColor: vars.colours.gamut.gray500,
+          backgroundColor: vars.color.gamut.gray['500'],
           cursor: 'not-allowed'
         }
       }

package/dist/components/SliderProgress/ProgressStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/ProgressStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAe,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,UAAU,iBACT,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAEjB,UAAU,IAAI,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,iBAAiB,CA+ChE,CAAC"}
+{"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/ProgressStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAe,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,UAAU,iBACT,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAEjB,UAAU,IAAI,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,iBAAiB,CAiDhE,CAAC"}

package/dist/components/SliderProgress/ProgressStep.js

@@ -25,7 +25,9 @@ export const ProgressStep = /*#__PURE__*/memo(({
       ref: elementRef,
       position: "absolute",
       display: hasPassed ? 'none' : 'block',
-      className: [styles.item, styles.empty],
+      className: [styles.item, styles.empty]
+      // eslint-disable-next-line no-restricted-syntax -- RETAINED: public prop pass-through, intent-capable, reverted by the C-theme-bridge corrective package (docs/ds2026-plan/track-c.md §1.5 + deviation 12).
+      ,
       backgroundColour: backgroundColour
     }), /*#__PURE__*/_jsx(Box, {
       ref: elementRef,
@@ -35,7 +37,9 @@ export const ProgressStep = /*#__PURE__*/memo(({
         [styles.passed]: hasPassed,
         [styles.active]: isActive,
         [styles.paused]: isActive && paused
-      }],
+      }]
+      // eslint-disable-next-line no-restricted-syntax -- RETAINED: public prop pass-through, intent-capable, reverted by the C-theme-bridge corrective package (docs/ds2026-plan/track-c.md §1.5 + deviation 12).
+      ,
       backgroundColour: backgroundColour,
       style: {
         animationDuration: duration

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

@@ -1 +1 @@
-{"version":3,"file":"SliderProgress.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/SliderProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,mBAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC,EAC3D,IAAI,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IAEpB,aAAa,IAAI,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,mBAAmB,CAgCpE,CAAC"}
+{"version":3,"file":"SliderProgress.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/SliderProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,mBAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC,EAC3D,IAAI,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IAEpB,aAAa,IAAI,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,mBAAmB,CAiCpE,CAAC"}

package/dist/components/SliderProgress/SliderProgress.js

@@ -22,7 +22,9 @@ export const SliderProgress = /*#__PURE__*/memo(({
   }).fill('').map((_, index) => /*#__PURE__*/_jsx(ProgressStep, {
     className: styles.step,
     paused: paused,
-    duration: duration,
+    duration: duration
+    // eslint-disable-next-line no-restricted-syntax -- RETAINED: public prop pass-through, intent-capable (accepts the 9 legacy intents), reverted by the C-theme-bridge corrective package (docs/ds2026-plan/track-c.md §1.5 + deviation 12).
+    ,
     backgroundColour: backgroundColour,
     hasPassed: index < activeIndex,
     isActive: index === activeIndex,

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,EAAE,QAWb,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAO5B,CAAC"}
+{"version":3,"file":"Stack.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,EAAE,QAYb,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAO5B,CAAC"}

package/dist/components/Stack/Stack.css.js

@@ -9,6 +9,7 @@ export const hr = style({
   '@layer': {
     [cssLayerComponent]: {
       borderStyle: 'none',
+      // eslint-disable-next-line no-restricted-syntax -- RETAINED: tenant-variant key (the in-repo `neutral` theme overrides colours.background.neutral to gray400, which the unbridged color.background.inactive would drift from) — docs/ds2026-plan/track-c.md §1.5 extension.
       boxShadow: `inset 0 0 0 1px ${vars.colours.background.neutral}`,
       height: '1px',
       margin: 0,

package/dist/components/StandardModal/StandardModal.css.js

@@ -13,8 +13,8 @@ export const modal = style(_objectSpread({
   alignSelf: 'flex-end',
   borderRadius: `${vars.border.radius['2xl']} ${vars.border.radius['2xl']} 0 0`,
   height: 'auto',
-  maxHeight: `calc(100vh - ${vars.space['8']})`,
-  minHeight: `calc(3 * ${vars.space['8']})`,
+  maxHeight: `calc(100vh - ${vars.space['9']})`,
+  minHeight: `calc(3 * ${vars.space['9']})`,
   width: '100vw'
 }, responsiveStyle({
   tablet: {
@@ -22,9 +22,9 @@ export const modal = style(_objectSpread({
     borderRadius: vars.border.radius['2xl']
   },
   desktop: {
-    maxWidth: `calc(100% - ${vars.space['9']} * 2)`,
+    maxWidth: `calc(100% - ${vars.space['12']} * 2)`,
     height: 'auto',
-    maxHeight: `calc(100vh - ${vars.space['9']} * 2)`,
+    maxHeight: `calc(100vh - ${vars.space['12']} * 2)`,
     boxShadow: '0 0 32px 0 rgba(0,0,0, 0.012), 0 24px 96px 0 rgba(0,0,0, 0.08)',
     marginTop: 0
   }

package/dist/components/StandardModal/StandardModal.js

@@ -74,8 +74,8 @@ export const StandardModal = ({
         "aria-labelledby": titleId,
         display: "flex",
         flexDirection: "column",
-        backgroundColour: "white",
-        marginTop: "8",
+        backgroundColor: "white",
+        marginTop: "9",
         className: clsx([styles.modal, {
           [styles.modalSizeStandard]: size === 'standard'
         }, {
@@ -95,7 +95,7 @@ export const StandardModal = ({
           paddingLeft: "5",
           paddingRight: "2",
           borderWidthBottom: "1",
-          borderColour: "light",
+          borderColor: "muted",
           children: [/*#__PURE__*/_jsx(Box, {
             flexGrow: "0",
             id: titleId,
@@ -112,7 +112,7 @@ export const StandardModal = ({
             onClick: closeButtonHandler,
             children: /*#__PURE__*/_jsx(Icon, {
               className: textStyles({
-                colour: 'muted'
+                color: 'tertiaryInactive'
               }),
               icon: XIcon,
               size: "medium"

package/dist/components/Stepper/Stepper.js

@@ -31,7 +31,7 @@ const Handle = ({
   className: [styles.handle.default, {
     [styles.handle.disabled]: disabled
   }, textStyles({
-    colour: 'white'
+    color: 'white'
   })],
   backgroundColour: disabled ? 'neutral' : 'primary',
   "aria-label": label,
@@ -108,7 +108,7 @@ export const Stepper = ({
     "aria-disabled": disabled,
     tabIndex: 0,
     borderWidth: "1",
-    borderColour: "gray",
+    borderColor: "default",
     padding: "3",
     borderRadius: "1",
     width: isFullWidth ? 'full' : 'fit-content',
@@ -132,7 +132,7 @@ export const Stepper = ({
       }), /*#__PURE__*/_jsx(Box, {
         children: /*#__PURE__*/_jsx(Text, {
           as: "span",
-          colour: "dark",
+          color: "primary",
           display: "block",
           className: clsx(styles.label),
           size: "4",

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

@@ -5,8 +5,8 @@ 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.colours.foreground.body;
-const colorContrast = vars.colours.background.body;
+const colorAccent = vars.color.foreground.primary;
+const colorContrast = vars.color.background.default;
 const colorMid = vars.colours.background.neutral;
 const colorLight = vars.colours.background.light;
 const height = vars.space['6'];

package/dist/components/Table/TableCell.css.js

@@ -3,7 +3,7 @@ __vanilla_filescope__.setFileScope("lib/components/Table/TableCell.css.ts", "@au
 import { style } from '@vanilla-extract/css';
 import { overdriveTokens as vars } from "../../themes/theme.css.js";
 export const root = style({
-  borderBottomColor: vars.colours.gamut.black100,
+  borderBottomColor: vars.color.border.default,
   /*
   We do this hack, as our row's have no distinct element. Once subgrid is
   	supported across browsers we can revisit this approach.
@@ -22,7 +22,7 @@ export const root = style({
   },
   selectors: {
     '&:hover:before': {
-      backgroundColor: vars.colours.gamut.gray100,
+      backgroundColor: vars.color.gamut.gray['100'],
       transitionTimingFunction: vars.animation.easing.decelerate
     }
   }

package/dist/components/Table/TableCell.js

@@ -29,7 +29,7 @@ export const TableCell = /*#__PURE__*/forwardRef(({
     className: styles.root,
     children: typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/_jsx(Text, {
       as: "span",
-      colour: "dark",
+      color: "primary",
       display: "block",
       size: "3",
       children: children