@autoguru/overdrive 4.59.0 → 4.60.0

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

@@ -13,6 +13,7 @@ declare const _default: {
             large: `var(--${string})`;
         };
         space: {
+            '0': `var(--${string})`;
             '1': `var(--${string})`;
             '2': `var(--${string})`;
             '3': `var(--${string})`;
@@ -22,22 +23,14 @@ declare const _default: {
             '7': `var(--${string})`;
             '8': `var(--${string})`;
             '9': `var(--${string})`;
+            '10': `var(--${string})`;
+            '11': `var(--${string})`;
+            '12': `var(--${string})`;
             none: `var(--${string})`;
         };
         color: {
             gamut: {
                 white: `var(--${string})`;
-                black: {
-                    '900': `var(--${string})`;
-                    '800': `var(--${string})`;
-                    '700': `var(--${string})`;
-                    '600': `var(--${string})`;
-                    '500': `var(--${string})`;
-                    '400': `var(--${string})`;
-                    '300': `var(--${string})`;
-                    '200': `var(--${string})`;
-                    '100': `var(--${string})`;
-                };
                 gray: {
                     '900': `var(--${string})`;
                     '800': `var(--${string})`;
@@ -126,19 +119,70 @@ declare const _default: {
                 placeholder: `var(--${string})`;
                 focusOutline: `var(--${string})`;
             };
+            foreground: {
+                primary: `var(--${string})`;
+                secondary: `var(--${string})`;
+                reverse: `var(--${string})`;
+                tertiaryInactive: `var(--${string})`;
+                tertiaryInactiveLight: `var(--${string})`;
+            };
+            background: {
+                default: `var(--${string})`;
+                reverse: `var(--${string})`;
+                inactive: `var(--${string})`;
+                emphasisInactive: `var(--${string})`;
+            };
+            border: {
+                default: `var(--${string})`;
+                emphasis: `var(--${string})`;
+                selected: `var(--${string})`;
+                strong: `var(--${string})`;
+            };
+            info: {
+                text: `var(--${string})`;
+                foreground: `var(--${string})`;
+                background: `var(--${string})`;
+            };
+            success: {
+                text: `var(--${string})`;
+                foreground: `var(--${string})`;
+                backgroundDark: `var(--${string})`;
+                backgroundLight: `var(--${string})`;
+            };
+            warning: {
+                text: `var(--${string})`;
+                foreground: `var(--${string})`;
+                backgroundDark: `var(--${string})`;
+                backgroundLight: `var(--${string})`;
+            };
+            alert: {
+                text: `var(--${string})`;
+                foreground: `var(--${string})`;
+                background: `var(--${string})`;
+            };
+            button: {
+                primary: {
+                    solid: {
+                        default: `var(--${string})`;
+                        hover: `var(--${string})`;
+                        pressed: `var(--${string})`;
+                        border: `var(--${string})`;
+                    };
+                    outlined: {
+                        border: `var(--${string})`;
+                        text: `var(--${string})`;
+                    };
+                };
+                critical: {
+                    solid: {
+                        default: `var(--${string})`;
+                    };
+                };
+            };
         };
         colours: {
             gamut: {
                 white: `var(--${string})`;
-                black900: `var(--${string})`;
-                black800: `var(--${string})`;
-                black700: `var(--${string})`;
-                black600: `var(--${string})`;
-                black500: `var(--${string})`;
-                black400: `var(--${string})`;
-                black300: `var(--${string})`;
-                black200: `var(--${string})`;
-                black100: `var(--${string})`;
                 gray900: `var(--${string})`;
                 gray800: `var(--${string})`;
                 gray700: `var(--${string})`;
@@ -285,6 +329,10 @@ declare const _default: {
             '3': `var(--${string})`;
             '4': `var(--${string})`;
             '5': `var(--${string})`;
+            z1: `var(--${string})`;
+            z2: `var(--${string})`;
+            z3: `var(--${string})`;
+            z4: `var(--${string})`;
             none: `var(--${string})`;
         };
         border: {
@@ -310,6 +358,11 @@ declare const _default: {
                 '1': `var(--${string})`;
                 pill: `var(--${string})`;
                 full: `var(--${string})`;
+                xsmall: `var(--${string})`;
+                small: `var(--${string})`;
+                medium: `var(--${string})`;
+                large: `var(--${string})`;
+                xlarge: `var(--${string})`;
             };
         };
         typography: {
@@ -350,6 +403,38 @@ declare const _default: {
                     fontSize: `var(--${string})`;
                     lineHeight: `var(--${string})`;
                 };
+                h1: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                };
+                h2: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                };
+                h3: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                };
+                h4: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                };
+                p1: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                };
+                p2: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                };
+                p3: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                };
+                p4: {
+                    fontSize: `var(--${string})`;
+                    lineHeight: `var(--${string})`;
+                };
             };
             colour: {
                 primary: `var(--${string})`;
@@ -371,6 +456,7 @@ declare const _default: {
             fontFamilyMono: `var(--${string})`;
             fontWeight: {
                 normal: `var(--${string})`;
+                medium: `var(--${string})`;
                 semiBold: `var(--${string})`;
                 bold: `var(--${string})`;
             };
@@ -405,6 +491,7 @@ declare const _default: {
             medium: string;
         };
         space: {
+            '0': string;
             '1': string;
             '2': string;
             '3': string;
@@ -414,77 +501,69 @@ declare const _default: {
             '7': string;
             '8': string;
             '9': string;
+            '10': string;
+            '11': string;
+            '12': string;
             none: string;
         };
         color: {
             gamut: {
-                white: string;
-                black: {
-                    '900': string;
-                    '800': string;
-                    '700': string;
-                    '600': string;
-                    '500': string;
-                    '400': string;
-                    '300': string;
-                    '200': string;
-                    '100': string;
-                };
                 gray: {
-                    '900': string;
-                    '800': string;
-                    '700': string;
-                    '600': string;
-                    '500': string;
-                    '400': string;
-                    '300': string;
-                    '200': string;
-                    '100': string;
+                    '900': `var(--${string})`;
+                    '800': `var(--${string})`;
+                    '700': `var(--${string})`;
+                    '600': `var(--${string})`;
+                    '500': `var(--${string})`;
+                    '400': `var(--${string})`;
+                    '300': `var(--${string})`;
+                    '200': `var(--${string})`;
+                    '100': `var(--${string})`;
                 };
                 green: {
-                    '900': string;
-                    '800': string;
-                    '700': string;
-                    '600': string;
-                    '500': string;
-                    '400': string;
-                    '300': string;
-                    '200': string;
-                    '100': string;
+                    '900': `var(--${string})`;
+                    '800': `var(--${string})`;
+                    '700': `var(--${string})`;
+                    '600': `var(--${string})`;
+                    '500': `var(--${string})`;
+                    '400': `var(--${string})`;
+                    '300': `var(--${string})`;
+                    '200': `var(--${string})`;
+                    '100': `var(--${string})`;
                 };
                 blue: {
-                    '900': string;
-                    '800': string;
-                    '700': string;
-                    '600': string;
-                    '500': string;
-                    '400': string;
-                    '300': string;
-                    '200': string;
-                    '100': string;
+                    '900': `var(--${string})`;
+                    '800': `var(--${string})`;
+                    '700': `var(--${string})`;
+                    '600': `var(--${string})`;
+                    '500': `var(--${string})`;
+                    '400': `var(--${string})`;
+                    '300': `var(--${string})`;
+                    '200': `var(--${string})`;
+                    '100': `var(--${string})`;
                 };
                 yellow: {
-                    '900': string;
-                    '800': string;
-                    '700': string;
-                    '600': string;
-                    '500': string;
-                    '400': string;
-                    '300': string;
-                    '200': string;
-                    '100': string;
+                    '900': `var(--${string})`;
+                    '800': `var(--${string})`;
+                    '700': `var(--${string})`;
+                    '600': `var(--${string})`;
+                    '500': `var(--${string})`;
+                    '400': `var(--${string})`;
+                    '300': `var(--${string})`;
+                    '200': `var(--${string})`;
+                    '100': `var(--${string})`;
                 };
                 red: {
-                    '900': string;
-                    '800': string;
-                    '700': string;
-                    '600': string;
-                    '500': string;
-                    '400': string;
-                    '300': string;
-                    '200': string;
-                    '100': string;
+                    '900': `var(--${string})`;
+                    '800': `var(--${string})`;
+                    '700': `var(--${string})`;
+                    '600': `var(--${string})`;
+                    '500': `var(--${string})`;
+                    '400': `var(--${string})`;
+                    '300': `var(--${string})`;
+                    '200': `var(--${string})`;
+                    '100': `var(--${string})`;
                 };
+                white: `var(--${string})`;
             };
             surface: {
                 page: string;
@@ -518,19 +597,70 @@ declare const _default: {
                 placeholder: string;
                 focusOutline: string;
             };
+            foreground: {
+                primary: string;
+                secondary: string;
+                reverse: string;
+                tertiaryInactive: string;
+                tertiaryInactiveLight: string;
+            };
+            background: {
+                default: string;
+                reverse: string;
+                inactive: string;
+                emphasisInactive: string;
+            };
+            border: {
+                default: string;
+                emphasis: string;
+                selected: string;
+                strong: string;
+            };
+            info: {
+                text: string;
+                foreground: string;
+                background: string;
+            };
+            success: {
+                text: string;
+                foreground: string;
+                backgroundDark: string;
+                backgroundLight: string;
+            };
+            warning: {
+                text: string;
+                foreground: string;
+                backgroundDark: string;
+                backgroundLight: string;
+            };
+            alert: {
+                text: string;
+                foreground: string;
+                background: string;
+            };
+            button: {
+                primary: {
+                    solid: {
+                        default: string;
+                        hover: string;
+                        pressed: string;
+                        border: string;
+                    };
+                    outlined: {
+                        border: string;
+                        text: string;
+                    };
+                };
+                critical: {
+                    solid: {
+                        default: string;
+                    };
+                };
+            };
         };
         colours: {
             gamut: {
                 white: string;
-                black900: string;
-                black800: string;
-                black700: string;
-                black600: string;
-                black500: string;
-                black400: string;
-                black300: string;
-                black200: string;
-                black100: string;
                 gray900: string;
                 gray800: string;
                 gray700: string;
@@ -678,6 +808,10 @@ declare const _default: {
             '3': string;
             '4': string;
             '5': string;
+            z1: string;
+            z2: string;
+            z3: string;
+            z4: string;
         };
         border: {
             width: {
@@ -702,6 +836,11 @@ declare const _default: {
                 '1': string;
                 pill: string;
                 full: string;
+                xsmall: string;
+                small: string;
+                medium: string;
+                large: string;
+                xlarge: string;
             };
         };
         typography: {
@@ -742,6 +881,38 @@ declare const _default: {
                     fontSize: string;
                     lineHeight: string;
                 };
+                h1: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                h2: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                h3: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                h4: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                p1: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                p2: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                p3: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                p4: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
             };
             colour: {
                 primary: string;
@@ -763,6 +934,7 @@ declare const _default: {
             fontFamilyMono: string;
             fontWeight: {
                 normal: string;
+                medium: string;
                 semiBold: string;
                 bold: 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/space.spec.d.ts

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

package/dist/themes/base/space.spec.d.ts.map

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

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

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import { tokens as flatRedTokens } from "../flat_red/tokens.js";
+import { tokens as neutralTokens } from "../neutral/tokens.js";
+import { tokens as baseTokens } from "./tokens.js";
+/**
+ * Pins the DS-2026 `space` ladder to exact pixel values. Snapshots only record
+ * the atomic-class KEY (e.g. `marginTop_9`), not the rendered px, so they pass
+ * whether `9` is 48px or 480px — this spec is the only guard that the key→px
+ * contract can't silently drift. Update it deliberately when the scale changes.
+ */
+const EXPECTED_SPACE = {
+  none: '0px',
+  '0': '0px',
+  '1': '4px',
+  '2': '8px',
+  '3': '12px',
+  '4': '16px',
+  '5': '20px',
+  '6': '24px',
+  '7': '32px',
+  '8': '40px',
+  '9': '48px',
+  '10': '64px',
+  '11': '80px',
+  '12': '96px'
+};
+describe('space token ladder', () => {
+  it('base theme maps every key to its exact DS-2026 pixel value', () => {
+    expect(baseTokens.space).toStrictEqual(EXPECTED_SPACE);
+  });
+  it('`0` and `none` both resolve to 0px (no 2px footgun)', () => {
+    expect(baseTokens.space['0']).toBe('0px');
+    expect(baseTokens.space.none).toBe('0px');
+  });
+  it('neutral theme inherits the base ladder unchanged via deepmerge', () => {
+    expect(neutralTokens.space).toStrictEqual(EXPECTED_SPACE);
+  });
+  it('flat_red theme inherits the base ladder unchanged via deepmerge', () => {
+    expect(flatRedTokens.space).toStrictEqual(EXPECTED_SPACE);
+  });
+});