@autoguru/overdrive 4.59.0 → 4.61.0

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

@@ -13,6 +13,7 @@ export declare const tokens: {
         medium: string;
     };
     space: {
+        '0': string;
         '1': string;
         '2': string;
         '3': string;
@@ -22,77 +23,80 @@ export declare const tokens: {
         '7': string;
         '8': string;
         '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
         none: string;
     };
     color: {
+        /**
+         * TRANSITION BRIDGE — the semantic `color.gamut` aliases the LEGACY
+         * `colours.gamut` CSS vars instead of holding raw hex. Themes and MFE
+         * tenants that override ONLY `colours.gamut` (flat_red, tenant custom
+         * palettes) therefore automatically drive the semantic gamut too. In the
+         * base theme the computed values are byte-identical to the raw hex
+         * (`colours.gamut` resolves to `colourMap`); the only thing that changes
+         * is that the semantic gamut now points at the legacy var rather than
+         * inlining the hex. This alias flips back to raw values at the DS-2026
+         * major (W4-P4), once tenants set the semantic gamut directly.
+         */
         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;
@@ -126,19 +130,70 @@ export declare const tokens: {
             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;
@@ -286,6 +341,10 @@ export declare const tokens: {
         '3': string;
         '4': string;
         '5': string;
+        z1: string;
+        z2: string;
+        z3: string;
+        z4: string;
     };
     border: {
         width: {
@@ -310,6 +369,11 @@ export declare const tokens: {
             '1': string;
             pill: string;
             full: string;
+            xsmall: string;
+            small: string;
+            medium: string;
+            large: string;
+            xlarge: string;
         };
     };
     typography: {
@@ -350,6 +414,38 @@ export declare const tokens: {
                 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;
@@ -371,6 +467,7 @@ export declare const tokens: {
         fontFamilyMono: string;
         fontWeight: {
             normal: string;
+            medium: string;
             semiBold: string;
             bold: 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QI,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4BjB;;;;;;;;;;WAUG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwZkB,CAAC"}

package/dist/themes/base/tokens.js

@@ -2,6 +2,7 @@ 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 { buildColourGamut } from "../makeTheme.js";
+import { overdriveTokens } from "../theme.css.js";
 import { colourMap, colourMapWithoutWhite, secondaryForeground } from "./colours.js";
 /**
  * Here lie the global tokens for theming Overdrive
@@ -18,6 +19,7 @@ export const tokens = {
     medium: '940px'
   },
   space: {
+    '0': '0px',
     '1': '4px',
     '2': '8px',
     '3': '12px',
@@ -25,12 +27,83 @@ export const tokens = {
     '5': '20px',
     '6': '24px',
     '7': '32px',
-    '8': '48px',
-    '9': '96px',
+    '8': '40px',
+    '9': '48px',
+    '10': '64px',
+    '11': '80px',
+    '12': '96px',
     none: '0px'
   },
   color: {
-    gamut: colourMap,
+    /**
+     * TRANSITION BRIDGE — the semantic `color.gamut` aliases the LEGACY
+     * `colours.gamut` CSS vars instead of holding raw hex. Themes and MFE
+     * tenants that override ONLY `colours.gamut` (flat_red, tenant custom
+     * palettes) therefore automatically drive the semantic gamut too. In the
+     * base theme the computed values are byte-identical to the raw hex
+     * (`colours.gamut` resolves to `colourMap`); the only thing that changes
+     * is that the semantic gamut now points at the legacy var rather than
+     * inlining the hex. This alias flips back to raw values at the DS-2026
+     * major (W4-P4), once tenants set the semantic gamut directly.
+     */
+    gamut: {
+      gray: {
+        '900': overdriveTokens.colours.gamut.gray900,
+        '800': overdriveTokens.colours.gamut.gray800,
+        '700': overdriveTokens.colours.gamut.gray700,
+        '600': overdriveTokens.colours.gamut.gray600,
+        '500': overdriveTokens.colours.gamut.gray500,
+        '400': overdriveTokens.colours.gamut.gray400,
+        '300': overdriveTokens.colours.gamut.gray300,
+        '200': overdriveTokens.colours.gamut.gray200,
+        '100': overdriveTokens.colours.gamut.gray100
+      },
+      green: {
+        '900': overdriveTokens.colours.gamut.green900,
+        '800': overdriveTokens.colours.gamut.green800,
+        '700': overdriveTokens.colours.gamut.green700,
+        '600': overdriveTokens.colours.gamut.green600,
+        '500': overdriveTokens.colours.gamut.green500,
+        '400': overdriveTokens.colours.gamut.green400,
+        '300': overdriveTokens.colours.gamut.green300,
+        '200': overdriveTokens.colours.gamut.green200,
+        '100': overdriveTokens.colours.gamut.green100
+      },
+      blue: {
+        '900': overdriveTokens.colours.gamut.blue900,
+        '800': overdriveTokens.colours.gamut.blue800,
+        '700': overdriveTokens.colours.gamut.blue700,
+        '600': overdriveTokens.colours.gamut.blue600,
+        '500': overdriveTokens.colours.gamut.blue500,
+        '400': overdriveTokens.colours.gamut.blue400,
+        '300': overdriveTokens.colours.gamut.blue300,
+        '200': overdriveTokens.colours.gamut.blue200,
+        '100': overdriveTokens.colours.gamut.blue100
+      },
+      yellow: {
+        '900': overdriveTokens.colours.gamut.yellow900,
+        '800': overdriveTokens.colours.gamut.yellow800,
+        '700': overdriveTokens.colours.gamut.yellow700,
+        '600': overdriveTokens.colours.gamut.yellow600,
+        '500': overdriveTokens.colours.gamut.yellow500,
+        '400': overdriveTokens.colours.gamut.yellow400,
+        '300': overdriveTokens.colours.gamut.yellow300,
+        '200': overdriveTokens.colours.gamut.yellow200,
+        '100': overdriveTokens.colours.gamut.yellow100
+      },
+      red: {
+        '900': overdriveTokens.colours.gamut.red900,
+        '800': overdriveTokens.colours.gamut.red800,
+        '700': overdriveTokens.colours.gamut.red700,
+        '600': overdriveTokens.colours.gamut.red600,
+        '500': overdriveTokens.colours.gamut.red500,
+        '400': overdriveTokens.colours.gamut.red400,
+        '300': overdriveTokens.colours.gamut.red300,
+        '200': overdriveTokens.colours.gamut.red200,
+        '100': overdriveTokens.colours.gamut.red100
+      },
+      white: overdriveTokens.colours.gamut.white
+    },
     surface: {
       page: colourMap.white,
       hard: colourMap.gray['900'],
@@ -45,9 +118,9 @@ export const tokens = {
       normal: colourMap.gray['900'],
       soft: colourMap.gray['700'],
       inverse: colourMap.white,
-      info: colourMap.blue['600'],
-      danger: colourMap.red['600'],
-      success: colourMap.green['700'],
+      info: colourMap.blue['900'],
+      danger: colourMap.red['800'],
+      success: colourMap.green['900'],
       warning: colourMap.yellow['800']
     },
     interactive: {
@@ -62,6 +135,90 @@ export const tokens = {
       overlayContainer: colourMap.white,
       placeholder: colourMap.gray['700'],
       focusOutline: colourMap.blue['500']
+    },
+    foreground: {
+      primary: colourMap.gray['900'],
+      // #212338
+      secondary: colourMap.gray['700'],
+      // #484c5f
+      reverse: colourMap.white,
+      // #ffffff
+      tertiaryInactive: colourMap.gray['400'],
+      // #8f95a1
+      tertiaryInactiveLight: colourMap.gray['300'] // #d4d9dd
+    },
+    background: {
+      default: colourMap.white,
+      // #ffffff
+      reverse: colourMap.gray['900'],
+      // #212338
+      inactive: colourMap.gray['300'],
+      // #d4d9dd
+      emphasisInactive: colourMap.gray['200'] // #eef0f2
+    },
+    border: {
+      default: colourMap.gray['300'],
+      // #d4d9dd
+      emphasis: colourMap.gray['400'],
+      // #8f95a1
+      selected: colourMap.gray['600'],
+      // #5c6172
+      strong: colourMap.gray['900'] // #212338
+    },
+    info: {
+      text: colourMap.blue['900'],
+      // #0d47a1
+      foreground: colourMap.blue['600'],
+      // #0d54e5
+      background: '#e1edfe' // Figma info surface — NOT blue-200 (#bad4ff)
+    },
+    success: {
+      text: colourMap.green['900'],
+      // #00574c
+      foreground: colourMap.green['600'],
+      // #01c68c
+      backgroundDark: colourMap.green['800'],
+      // #18856f
+      backgroundLight: colourMap.green['200'] // #e3f8f0
+    },
+    warning: {
+      text: colourMap.red['800'],
+      // #96110e (Figma warning/text is RED, not yellow)
+      foreground: colourMap.yellow['800'],
+      // #f69a1f
+      backgroundDark: colourMap.yellow['500'],
+      // #ffc001
+      backgroundLight: colourMap.yellow['200'] // #ffedb5
+    },
+    alert: {
+      text: colourMap.red['800'],
+      // #96110e
+      foreground: colourMap.red['600'],
+      // #d42b26
+      background: colourMap.red['200'] // #ffd4d4
+    },
+    button: {
+      primary: {
+        solid: {
+          default: colourMap.green['300'],
+          // #71edc2
+          hover: colourMap.green['400'],
+          // #36e5aa
+          pressed: colourMap.green['600'],
+          // #01c68c
+          border: colourMap.green['600'] // #01c68c
+        },
+        outlined: {
+          border: colourMap.green['800'],
+          // #18856f
+          text: colourMap.green['800'] // #18856f
+        }
+      },
+      critical: {
+        solid: {
+          default: colourMap.red['500'] // #e12e28
+        }
+      }
     }
   },
   colours: {
@@ -168,7 +325,11 @@ export const tokens = {
     '2': '0 1px 10px 0 rgba(0, 0, 0, 0.03),  0 4px 5px 0 rgba(0, 0, 0, 0.03),  0 2px 4px -1px rgba(0, 0, 0, 0.05)',
     '3': '0 3px 14px 2px rgba(0, 0, 0, 0.03),  0 8px 10px 1px rgba(0, 0, 0, 0.03),  0 5px 5px -3px rgba(0, 0, 0, 0.05)',
     '4': '0 6px 30px 5px rgba(0, 0, 0, 0.03), 0 16px 24px 2px rgba(0, 0, 0, 0.03), 0 8px 10px -5px rgba(0, 0, 0, 0.05)',
-    '5': '0 9px 46px 8px rgba(0, 0, 0, 0.03), 0 24px 38px 3px rgba(0, 0, 0, 0.03), 0 11px 15px -7px rgba(0, 0, 0, 0.05)'
+    '5': '0 9px 46px 8px rgba(0, 0, 0, 0.03), 0 24px 38px 3px rgba(0, 0, 0, 0.03), 0 11px 15px -7px rgba(0, 0, 0, 0.05)',
+    z1: '0px 1px 5px 0px rgba(0,0,0,0.03), 0px 2px 2px 0px rgba(0,0,0,0.03), 0px 3px 1px -2px rgba(0,0,0,0.05)',
+    z2: '0px 1px 10px 0px rgba(0,0,0,0.03), 0px 4px 5px 0px rgba(0,0,0,0.03), 0px 2px 4px -1px rgba(0,0,0,0.05)',
+    z3: '0px 3px 14px 2px rgba(0,0,0,0.03), 0px 8px 10px 1px rgba(0,0,0,0.03), 0px 5px 5px -3px rgba(0,0,0,0.05)',
+    z4: '0px 6px 30px 5px rgba(0,0,0,0.03), 0px 16px 24px 2px rgba(0,0,0,0.03), 0px 8px 10px -5px rgba(0,0,0,0.05)'
   },
   border: {
     width: {
@@ -192,7 +353,12 @@ export const tokens = {
       '2xl': '24px',
       '1': '4px',
       pill: `${1e9}px`,
-      full: '50%'
+      full: '50%',
+      xsmall: '4px',
+      small: '8px',
+      medium: '12px',
+      large: '16px',
+      xlarge: '20px'
     }
   },
   typography: {
@@ -232,6 +398,40 @@ export const tokens = {
       '9': {
         fontSize: '40px',
         lineHeight: '48px'
+      },
+      // Design System 2026 named text styles (opt-in) — line heights
+      // are ratio-derived: 1.25 for headings, 1.4 for paragraphs
+      h1: {
+        fontSize: '40px',
+        lineHeight: '50px'
+      },
+      h2: {
+        fontSize: '32px',
+        lineHeight: '40px'
+      },
+      h3: {
+        fontSize: '24px',
+        lineHeight: '30px'
+      },
+      h4: {
+        fontSize: '20px',
+        lineHeight: '25px'
+      },
+      p1: {
+        fontSize: '16px',
+        lineHeight: '22.4px'
+      },
+      p2: {
+        fontSize: '14px',
+        lineHeight: '19.6px'
+      },
+      p3: {
+        fontSize: '12px',
+        lineHeight: '16.8px'
+      },
+      p4: {
+        fontSize: '10px',
+        lineHeight: '14px'
       }
     },
     colour: {
@@ -254,7 +454,8 @@ export const tokens = {
     fontFamilyMono: "'Courier New', Courier, monospace",
     fontWeight: {
       normal: '400',
-      semiBold: '500',
+      medium: '500',
+      semiBold: '600',
       bold: '700'
     }
   },