@autoguru/overdrive 4.58.0 → 4.60.0

package/dist/themes/theme.css.js

@@ -6,17 +6,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createGlobalThemeContract, style } from '@vanilla-extract/css';
 import { buildColourGamut } from "./makeTheme.js";
 const colours = {
-  black: {
-    '900': 'color-gamut-black-900',
-    '800': 'color-gamut-black-800',
-    '700': 'color-gamut-black-700',
-    '600': 'color-gamut-black-600',
-    '500': 'color-gamut-black-500',
-    '400': 'color-gamut-black-400',
-    '300': 'color-gamut-black-300',
-    '200': 'color-gamut-black-200',
-    '100': 'color-gamut-black-100'
-  },
   gray: {
     '900': 'color-gamut-gray-900',
     '800': 'color-gamut-gray-800',
@@ -94,6 +83,7 @@ const THEME_CONTRACT = {
     large: 'content-width-lg'
   },
   space: {
+    '0': 'space-0',
     '1': 'space-1',
     '2': 'space-2',
     '3': 'space-3',
@@ -103,6 +93,9 @@ const THEME_CONTRACT = {
     '7': 'space-7',
     '8': 'space-8',
     '9': 'space-9',
+    '10': 'space-10',
+    '11': 'space-11',
+    '12': 'space-12',
     none: 'space-none'
   },
   // new colour token structure 2025
@@ -139,23 +132,96 @@ const THEME_CONTRACT = {
       overlayContainer: 'color-interactive-overlay-container',
       placeholder: 'color-interactive-placeholder',
       focusOutline: 'color-interactive-focus-outline'
+    },
+    foreground: {
+      primary: 'color-foreground-primary',
+      secondary: 'color-foreground-secondary',
+      reverse: 'color-foreground-reverse',
+      tertiaryInactive: 'color-foreground-tertiary-inactive',
+      tertiaryInactiveLight: 'color-foreground-tertiary-inactive-light'
+    },
+    background: {
+      default: 'color-background-default',
+      reverse: 'color-background-reverse',
+      inactive: 'color-background-inactive',
+      emphasisInactive: 'color-background-emphasis-inactive'
+    },
+    border: {
+      default: 'color-border-default',
+      emphasis: 'color-border-emphasis',
+      selected: 'color-border-selected',
+      strong: 'color-border-strong'
+    },
+    info: {
+      text: 'color-info-text',
+      foreground: 'color-info-foreground',
+      background: 'color-info-background'
+    },
+    success: {
+      text: 'color-success-text',
+      foreground: 'color-success-foreground',
+      backgroundDark: 'color-success-background-dark',
+      backgroundLight: 'color-success-background-light'
+    },
+    warning: {
+      text: 'color-warning-text',
+      foreground: 'color-warning-foreground',
+      backgroundDark: 'color-warning-background-dark',
+      backgroundLight: 'color-warning-background-light'
+    },
+    alert: {
+      text: 'color-alert-text',
+      foreground: 'color-alert-foreground',
+      background: 'color-alert-background'
+    },
+    button: {
+      primary: {
+        solid: {
+          default: 'color-button-primary-solid-default',
+          hover: 'color-button-primary-solid-hover',
+          pressed: 'color-button-primary-solid-pressed',
+          border: 'color-button-primary-solid-border'
+        },
+        outlined: {
+          border: 'color-button-primary-outlined-border',
+          text: 'color-button-primary-outlined-text'
+        }
+      },
+      critical: {
+        solid: {
+          default: 'color-button-critical-solid-default'
+        }
+      }
     }
   },
   // existing colours for compatability
+  /**
+   * @deprecated Use color.* — removed in v5 (DS-2026 major). The legacy
+   * `colours` contract (gamut/foreground/background/intent) is retained,
+   * exported, and fully functional for MFE compatibility until then — do
+   * not add new internal usages (see docs/ds2026-plan/track-c.md).
+   */
   colours: {
+    /** @deprecated Use color.gamut.* — removed in v5 (DS-2026 major). */
     gamut: _objectSpread(_objectSpread({}, buildColourGamut(colours)), {}, {
       white: 'color-gamut-white'
     }),
+    /** @deprecated Use color.foreground.* — removed in v5 (DS-2026 major). */
     foreground: {
       body: null,
       link: null
     },
+    /** @deprecated Use color.background.* — removed in v5 (DS-2026 major). */
     background: {
       body: null,
       light: null,
       neutral: null,
       neutralDark: null
     },
+    /**
+     * @deprecated Use color.{info,success,warning,alert}.* — removed in v5
+     * (DS-2026 major).
+     */
     intent: {
       primary: {
         background: {
@@ -246,6 +312,10 @@ const THEME_CONTRACT = {
     '3': 'elevation-3',
     '4': 'elevation-4',
     '5': 'elevation-5',
+    z1: 'elevation-z1',
+    z2: 'elevation-z2',
+    z3: 'elevation-z3',
+    z4: 'elevation-z4',
     none: 'elevation-none'
   },
   border: {
@@ -263,14 +333,27 @@ const THEME_CONTRACT = {
     radius: {
       none: 'border-radius-none',
       min: 'border-radius-min',
+      /** @deprecated Use radius.xsmall (identical 4px value) — removed in v5 (DS-2026 major). */
       sm: 'border-radius-sm',
       md: 'border-radius-md',
       lg: 'border-radius-lg',
       xl: 'border-radius-xl',
+      /**
+       * @deprecated Use radius.xlarge — removed in v5 (DS-2026 major).
+       * Note: values differ today (2xl = 24px, xlarge = 20px); the exact
+       * DS-2026 mapping for this key is pending design resolution
+       * (master §6-Q2) and will be finalised at the major.
+       */
       '2xl': 'border-radius-2xl',
+      /** @deprecated Use radius.xsmall (identical 4px value) — removed in v5 (DS-2026 major). */
       '1': 'border-radius-1',
       pill: 'border-radius-pill',
-      full: 'border-radius-full'
+      full: 'border-radius-full',
+      xsmall: 'border-radius-xsmall',
+      small: 'border-radius-small',
+      medium: 'border-radius-medium',
+      large: 'border-radius-large',
+      xlarge: 'border-radius-xlarge'
     }
   },
   typography: {
@@ -310,9 +393,43 @@ const THEME_CONTRACT = {
       '9': {
         fontSize: 'typography-size-9-font-size',
         lineHeight: 'typography-size-9-line-height'
+      },
+      // Design System 2026 named text styles (opt-in)
+      h1: {
+        fontSize: 'typography-size-h1-font-size',
+        lineHeight: 'typography-size-h1-line-height'
+      },
+      h2: {
+        fontSize: 'typography-size-h2-font-size',
+        lineHeight: 'typography-size-h2-line-height'
+      },
+      h3: {
+        fontSize: 'typography-size-h3-font-size',
+        lineHeight: 'typography-size-h3-line-height'
+      },
+      h4: {
+        fontSize: 'typography-size-h4-font-size',
+        lineHeight: 'typography-size-h4-line-height'
+      },
+      p1: {
+        fontSize: 'typography-size-p1-font-size',
+        lineHeight: 'typography-size-p1-line-height'
+      },
+      p2: {
+        fontSize: 'typography-size-p2-font-size',
+        lineHeight: 'typography-size-p2-line-height'
+      },
+      p3: {
+        fontSize: 'typography-size-p3-font-size',
+        lineHeight: 'typography-size-p3-line-height'
+      },
+      p4: {
+        fontSize: 'typography-size-p4-font-size',
+        lineHeight: 'typography-size-p4-line-height'
       }
     },
     // phase out: typography specific colours for backwards compatibility
+    /** @deprecated Use color.foreground.* — removed in v5 (DS-2026 major). */
     colour: {
       primary: null,
       brand: null,
@@ -333,6 +450,7 @@ const THEME_CONTRACT = {
     fontFamilyMono: 'font-family-mono',
     fontWeight: {
       normal: 'font-weight-normal',
+      medium: 'font-weight-medium',
       semiBold: 'font-weight-semi-bold',
       bold: 'font-weight-bold'
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.58.0",
+	"version": "4.60.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -129,29 +129,29 @@
 		"@antebudimir/eslint-plugin-vanilla-extract": "^1.12.0",
 		"@autoguru/babel-preset": "3.2.0",
 		"@autoguru/eslint-plugin": "2.0.1",
-		"@autoguru/icons": "2.0.1",
+		"@autoguru/icons": "2.1.0",
 		"@autoguru/tsconfig": "1.3.1",
 		"@autoguru/utilities": "^1.3.3",
-		"@babel/cli": "7.28.3",
-		"@babel/core": "7.28.5",
+		"@babel/cli": "7.29.7",
+		"@babel/core": "7.29.7",
 		"@babel/plugin-proposal-class-properties": "7.18.6",
-		"@babel/plugin-proposal-export-default-from": "7.27.1",
+		"@babel/plugin-proposal-export-default-from": "7.29.7",
 		"@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
 		"@babel/plugin-proposal-object-rest-spread": "7.20.7",
 		"@babel/plugin-proposal-optional-chaining": "7.21.0",
 		"@babel/plugin-syntax-dynamic-import": "7.8.3",
-		"@babel/plugin-transform-classes": "7.28.4",
-		"@babel/plugin-transform-runtime": "7.28.5",
-		"@babel/plugin-transform-spread": "7.27.1",
-		"@babel/plugin-transform-strict-mode": "7.27.1",
-		"@babel/preset-env": "7.28.5",
-		"@babel/preset-react": "7.28.5",
-		"@babel/preset-typescript": "7.28.5",
-		"@babel/runtime-corejs3": "7.28.4",
+		"@babel/plugin-transform-classes": "7.29.7",
+		"@babel/plugin-transform-runtime": "7.29.7",
+		"@babel/plugin-transform-spread": "7.29.7",
+		"@babel/plugin-transform-strict-mode": "7.29.7",
+		"@babel/preset-env": "7.29.7",
+		"@babel/preset-react": "7.29.7",
+		"@babel/preset-typescript": "7.29.7",
+		"@babel/runtime-corejs3": "7.29.7",
 		"@changesets/cli": "2.29.7",
 		"@chromatic-com/storybook": "4.1.1",
 		"@internationalized/date": "3.12.1",
-		"@octokit/rest": "22.0.0",
+		"@octokit/rest": "22.0.1",
 		"@popperjs/core": "2.11.8",
 		"@react-stately/toggle": "3.9.2",
 		"@storybook/addon-a11y": "9.1.20",
@@ -162,7 +162,7 @@
 		"@storybook/react-vite": "9.1.20",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/jest-dom": "6.9.1",
-		"@testing-library/react": "16.3.0",
+		"@testing-library/react": "16.3.2",
 		"@testing-library/react-hooks": "8.0.1",
 		"@testing-library/user-event": "14.6.1",
 		"@types/node": "24.9.1",
@@ -258,7 +258,7 @@
 		}
 	},
 	"volta": {
-		"node": "22.22.2",
+		"node": "22.23.1",
 		"yarn": "4.15.0"
 	},
 	"packageManager": "yarn@4.15.0"