@autoguru/overdrive 4.59.0 → 4.60.0

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

@@ -1 +1 @@
-{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AAqLA,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AA2IF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,SAAS,EACP,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,iBAAiB,GACjB,QAAQ,CACV,CAAC;AAIF,eAAO,MAAM,WAAW;;;;;;;;;;CAcvB,CAAC"}
+{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AAiDA;;;;;GAKG;AACH,eAAO,MAAM,mCAAmC;IAC/C;;;;;OAKG;;CAEH,CAAC;AAuMF,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AA2IF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,SAAS,EACP,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,iBAAiB,GACjB,QAAQ,CACV,CAAC;AAIF,eAAO,MAAM,WAAW;;;;;;;;;;CAcvB,CAAC"}

package/dist/styles/sprinkles.css.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /* eslint-disable sonarjs/no-duplicate-string */
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
 import { mapValues } from 'es-toolkit';
-import { breakpoints } from "../themes/makeTheme.js";
+import { breakpoints, buildColourGamut } from "../themes/makeTheme.js";
 import { overdriveTokens as tokens } from "../themes/theme.css.js";
 import { arrayFromKeys } from "../utils/object.js";
 import { cssLayerStyleprops } from "./layers.css.js";
@@ -45,7 +45,23 @@ const intentBackgroundColoursStandard = mapValues(tokens.colours.intent, ({
 const intentBorderColours = mapValues(tokens.colours.intent, ({
   border
 }) => border);
-const backgroundColours = _objectSpread(_objectSpread(_objectSpread({}, intentBackgroundColoursStandard), tokens.colours.gamut), {}, {
+
+/**
+ * Test-only: deprecated colour-value aliases retained until the DS-2026 major.
+ * Exported so the R12 guard spec can assert the alias resolves to its real
+ * token value; spread into `backgroundColours` so the alias and the tested
+ * value are the same object.
+ */
+export const __deprecatedBackgroundColourAliases = {
+  /**
+   * @deprecated Use `gray900`. `black900` is retained only as an alias of
+   * `gray900` (#212338 — the DS-2026 "Tarmac Black") so existing
+   * `backgroundColour="black900"` usages keep resolving after the black ramp
+   * was removed. Scheduled for removal in the DS-2026 major (W4-P4).
+   */
+  black900: tokens.colours.gamut.gray900
+};
+const backgroundColours = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, intentBackgroundColoursStandard), tokens.colours.gamut), __deprecatedBackgroundColourAliases), {}, {
   transparent: 'transparent'
 });
 const borderColors = _objectSpread({
@@ -54,6 +70,60 @@ const borderColors = _objectSpread({
   disabled: tokens.color.interactive.borderDisabled
 }, tokens.color.surface);
 const borderColours = _objectSpread(_objectSpread({}, tokens.border.colours), intentBorderColours);
+
+// --- SEMANTIC COLOUR PARITY (C-P1) ---
+// Flat semantic ramp: every legacy gamut key (gray900, green300, …) gets a
+// semantic equivalent at the IDENTICAL base value (color.gamut === colours.gamut).
+const semanticGamut = buildColourGamut({
+  gray: tokens.color.gamut.gray,
+  green: tokens.color.gamut.green,
+  blue: tokens.color.gamut.blue,
+  yellow: tokens.color.gamut.yellow,
+  red: tokens.color.gamut.red
+});
+
+// `color` (text/foreground) semantic value space
+const semanticColor = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, tokens.color.content), tokens.color.foreground), {}, {
+  // primary, secondary, reverse, tertiaryInactive, tertiaryInactiveLight (W1-P1)
+  infoText: tokens.color.info.text,
+  infoForeground: tokens.color.info.foreground,
+  successText: tokens.color.success.text,
+  successForeground: tokens.color.success.foreground,
+  warningText: tokens.color.warning.text,
+  warningForeground: tokens.color.warning.foreground,
+  alertText: tokens.color.alert.text,
+  alertForeground: tokens.color.alert.foreground
+}, semanticGamut), {}, {
+  // gray900 … red100
+  white: tokens.color.gamut.white,
+  unset: 'unset'
+});
+
+// `backgroundColor` semantic value space
+const semanticBackgroundColor = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, tokens.color.surface), tokens.color.background), {}, {
+  // default, reverse, inactive, emphasisInactive (W1-P1)
+  infoBackground: tokens.color.info.background,
+  successBackgroundDark: tokens.color.success.backgroundDark,
+  successBackgroundLight: tokens.color.success.backgroundLight,
+  warningBackgroundDark: tokens.color.warning.backgroundDark,
+  warningBackgroundLight: tokens.color.warning.backgroundLight,
+  alertBackground: tokens.color.alert.background
+}, semanticGamut), {}, {
+  white: tokens.color.gamut.white,
+  transparent: 'transparent'
+});
+
+// `border*Color` semantic value space
+const semanticBorderColor = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, tokens.color.border), {}, {
+  default: tokens.color.interactive.border,
+  // existing (gray300)
+  muted: tokens.color.interactive.borderMuted,
+  // existing (gray200)
+  disabled: tokens.color.interactive.borderDisabled
+}, tokens.color.surface), semanticGamut), {}, {
+  white: tokens.color.gamut.white,
+  transparent: 'transparent'
+});
 const colours = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, tokens.colours.foreground), tokens.typography.colour), intentForegroundColours), {}, {
   unset: 'unset',
   white: tokens.colours.gamut.white
@@ -90,24 +160,28 @@ const baseProperties = defineProperties({
   '@layer': cssLayerStyleprops,
   properties: {
     // Borders
-    borderBottomColor: borderColors,
-    borderLeftColor: borderColors,
-    borderRightColor: borderColors,
-    borderTopColor: borderColors,
+    borderBottomColor: semanticBorderColor,
+    borderLeftColor: semanticBorderColor,
+    borderRightColor: semanticBorderColor,
+    borderTopColor: semanticBorderColor,
+    /** @deprecated Use borderBottomColor — removed in v5 (DS-2026 major). */
     borderBottomColour: mappedBorderBottomColours,
+    /** @deprecated Use borderLeftColor — removed in v5 (DS-2026 major). */
     borderLeftColour: mappedBorderLeftColours,
+    /** @deprecated Use borderRightColor — removed in v5 (DS-2026 major). */
     borderRightColour: mappedBorderRightColours,
+    /** @deprecated Use borderTopColor — removed in v5 (DS-2026 major). */
     borderTopColour: mappedBorderTopColours,
     borderLeftStyle: ['none', 'solid'],
     borderBottomStyle: ['none', 'solid'],
     borderRightStyle: ['none', 'solid'],
     borderTopStyle: ['none', 'solid'],
     // Color
-    color: tokens.color.content,
+    color: semanticColor,
+    /** @deprecated Use color — removed in v5 (DS-2026 major). */
     colour: mappedColours,
-    backgroundColor: _objectSpread(_objectSpread({}, tokens.color.surface), {}, {
-      transparent: 'transparent'
-    }),
+    backgroundColor: semanticBackgroundColor,
+    /** @deprecated Use backgroundColor — removed in v5 (DS-2026 major). */
     backgroundColour: mappedBackgroundColours,
     opacity: [0, '1', '0'],
     // Typography
@@ -132,8 +206,11 @@ const baseProperties = defineProperties({
     borderColor: ['borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'],
     borderColorX: ['borderLeftColor', 'borderRightColor'],
     borderColorY: ['borderBottomColor', 'borderTopColor'],
+    /** @deprecated Use borderColor — removed in v5 (DS-2026 major). */
     borderColour: ['borderBottomColour', 'borderLeftColour', 'borderRightColour', 'borderTopColour'],
+    /** @deprecated Use borderColorX — removed in v5 (DS-2026 major). */
     borderColourX: ['borderLeftColour', 'borderRightColour'],
+    /** @deprecated Use borderColorY — removed in v5 (DS-2026 major). */
     borderColourY: ['borderBottomColour', 'borderTopColour'],
     borderStyle: ['borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopStyle'],
     borderStyleBottom: ['borderBottomStyle'],

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

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

package/dist/styles/sprinkles.spec.d.ts.map

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

package/dist/styles/sprinkles.spec.js

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { overdriveTokens } from "../themes/theme.css.js";
+import { __deprecatedBackgroundColourAliases } from "./sprinkles.css.js";
+describe('deprecated backgroundColour aliases (R12 guard)', () => {
+  it('black900 resolves to the gray900 token value', () => {
+    expect(__deprecatedBackgroundColourAliases.black900).toBe(overdriveTokens.colours.gamut.gray900);
+  });
+});

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

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

package/dist/styles/typography.d.ts

@@ -8,6 +8,47 @@ export declare const DEFAULT_TEXT_SIZE: Sprinkles["text"];
 export declare const DEFAULT_TEXT_WEIGHT: Sprinkles["fontWeight"];
 export type TextTags = (typeof TEXT_TAGS)[number];
 export type HeadingTags = (typeof HEADING_TAGS)[number];
+export declare const TEXT_STYLES: readonly ["h1", "h2", "h3", "h4", "p1", "p2", "p3", "p4"];
+export type NamedTextStyle = (typeof TEXT_STYLES)[number];
+/**
+ * Design System 2026 named text styles (opt-in). Each has its own size
+ * token — headings use a 1.25 line-height ratio, paragraphs 1.4 — and a
+ * default weight applied when no `weight` or `strong` is set.
+ */
+export declare const namedTextStyleMap: {
+    readonly h1: {
+        readonly size: "h1";
+        readonly weight: "bold";
+    };
+    readonly h2: {
+        readonly size: "h2";
+        readonly weight: "bold";
+    };
+    readonly h3: {
+        readonly size: "h3";
+        readonly weight: "bold";
+    };
+    readonly h4: {
+        readonly size: "h4";
+        readonly weight: "bold";
+    };
+    readonly p1: {
+        readonly size: "p1";
+        readonly weight: "normal";
+    };
+    readonly p2: {
+        readonly size: "p2";
+        readonly weight: "normal";
+    };
+    readonly p3: {
+        readonly size: "p3";
+        readonly weight: "normal";
+    };
+    readonly p4: {
+        readonly size: "p4";
+        readonly weight: "normal";
+    };
+};
 export interface TypographyProps {
     /** Aligns text horizontally */
     align?: Sprinkles['textAlign'];
@@ -19,8 +60,8 @@ export interface TypographyProps {
     colour?: LegacyTextColours;
     /** @deprecated prefer `wrap` prop as it supports all wrapping values */
     noWrap?: boolean;
-    /** Font size of the text */
-    size?: Sprinkles['text'];
+    /** Font size of the text, a size scale value or a named text style (`h1`-`h4`, `p1`-`p4`) */
+    size?: Sprinkles['text'] | NamedTextStyle;
     /** Bold font weight */
     strong?: boolean;
     /** Applies text capitalisation style */
@@ -35,7 +76,7 @@ export interface TypographyProps {
 /**
  * Applies typography-related styling including font size and weight, has opinionated defaults.
  */
-export declare const typography: ({ align: textAlign, breakWord, color, colour, noWrap, size: text, strong, transform: textTransform, weight, wrap, wordBreak, }: TypographyProps) => string;
+export declare const typography: ({ align: textAlign, breakWord, color, colour, noWrap, size, strong, transform: textTransform, weight, wrap, wordBreak, }: TypographyProps) => string;
 export interface TextStylesProps extends TypographyProps {
     as?: TextTags | HeadingTags;
     className?: ClassName;

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

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../lib/styles/typography.ts"],"names":[],"mappings":"AAAA,OAAa,EAAE,KAAK,UAAU,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AAG1D,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAEN,KAAK,iBAAiB,EAEtB,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,SAAS,iCAAkC,CAAC;AACzD,eAAO,MAAM,YAAY,+CAAgD,CAAC;AAC1E,eAAO,MAAM,mBAAmB,EAAgB,iBAAiB,CAAC;AAClE,eAAO,MAAM,iBAAiB,EAAU,SAAS,CAAC,MAAM,CAAC,CAAC;AAC1D,eAAO,MAAM,mBAAmB,EAAe,SAAS,CAAC,YAAY,CAAC,CAAC;AAEvE,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAClD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAaxD,MAAM,WAAW,eAAe;IAC/B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/B,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,sCAAsC;IACtC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,uBAAuB;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IACvC,sBAAsB;IACtB,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACjC,gCAAgC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC7B,yCAAyC;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,gIAYxB,eAAe,WAiBhB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACvD,EAAE,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EAC1B,EAAW,EACX,SAAS,EAET,MAA8C,EAC9C,IAAwD,EACxD,MAA8C,EAE9C,GAAG,KAAK,EACR,EAAE,eAAe,UAMjB"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../lib/styles/typography.ts"],"names":[],"mappings":"AAAA,OAAa,EAAE,KAAK,UAAU,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AAG1D,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAEN,KAAK,iBAAiB,EAGtB,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,SAAS,iCAAkC,CAAC;AACzD,eAAO,MAAM,YAAY,+CAAgD,CAAC;AAC1E,eAAO,MAAM,mBAAmB,EAAgB,iBAAiB,CAAC;AAClE,eAAO,MAAM,iBAAiB,EAAU,SAAS,CAAC,MAAM,CAAC,CAAC;AAC1D,eAAO,MAAM,mBAAmB,EAAe,SAAS,CAAC,YAAY,CAAC,CAAC;AAEvE,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAClD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,WAAW,2DASd,CAAC;AACX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAe7B,CAAC;AAkBF,MAAM,WAAW,eAAe;IAC/B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/B,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,sCAAsC;IACtC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC;IAC1C,uBAAuB;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IACvC,sBAAsB;IACtB,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACjC,gCAAgC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC7B,yCAAyC;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,0HAYxB,eAAe,WA6BjB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACvD,EAAE,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EAC1B,EAAW,EACX,SAAS,EAET,MAA8C,EAC9C,IAAwD,EACxD,MAA8C,EAE9C,GAAG,KAAK,EACR,EAAE,eAAe,UAMjB"}

package/dist/styles/typography.js

@@ -6,13 +6,63 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import clsx from 'clsx';
 import { resetStyles } from "./elementStyles.js";
 import { sprinkles } from "./sprinkles.css.js";
-import { common, sprinklesLegacyText } from "./typography.css.js";
+import { common,
+// eslint-disable-next-line no-restricted-imports -- RETAINED: the legacy text-colour sprinkle stays until the DS-2026 major (Track C).
+sprinklesLegacyText } from "./typography.css.js";
 export const TEXT_TAGS = ['p', 'span', 'label'];
 export const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 export const DEFAULT_TEXT_COLOUR = 'neutral';
 export const DEFAULT_TEXT_SIZE = '4';
 export const DEFAULT_TEXT_WEIGHT = 'normal';
+export const TEXT_STYLES = ['h1', 'h2', 'h3', 'h4', 'p1', 'p2', 'p3', 'p4'];
+/**
+ * Design System 2026 named text styles (opt-in). Each has its own size
+ * token — headings use a 1.25 line-height ratio, paragraphs 1.4 — and a
+ * default weight applied when no `weight` or `strong` is set.
+ */
+export const namedTextStyleMap = {
+  h1: {
+    size: 'h1',
+    weight: 'bold'
+  },
+  // 40/50
+  h2: {
+    size: 'h2',
+    weight: 'bold'
+  },
+  // 32/40
+  h3: {
+    size: 'h3',
+    weight: 'bold'
+  },
+  // 24/30
+  h4: {
+    size: 'h4',
+    weight: 'bold'
+  },
+  // 20/25
+  p1: {
+    size: 'p1',
+    weight: 'normal'
+  },
+  // 16/22.4
+  p2: {
+    size: 'p2',
+    weight: 'normal'
+  },
+  // 14/19.6
+  p3: {
+    size: 'p3',
+    weight: 'normal'
+  },
+  // 12/16.8
+  p4: {
+    size: 'p4',
+    weight: 'normal'
+  } // 10/14 — no semibold per spec
+};
 const isHeadingTag = tag => HEADING_TAGS.includes(tag);
+const isNamedTextStyle = size => typeof size === 'string' && TEXT_STYLES.includes(size);
 const headingSizeMap = {
   h1: '8',
   h2: '7',
@@ -32,23 +82,30 @@ export const typography = ({
   colour,
   // legacy colours
   noWrap = false,
-  size: text = DEFAULT_TEXT_SIZE,
+  size,
   strong = false,
   transform: textTransform,
-  weight = DEFAULT_TEXT_WEIGHT,
+  weight,
   wrap,
   wordBreak
-}) => clsx(common, sprinkles({
-  color,
-  fontWeight: strong === true ? 'bold' : weight,
-  text,
-  textAlign,
-  textTransform,
-  textWrap: noWrap === true ? 'nowrap' : wrap,
-  wordBreak: breakWord === true ? 'break-word' : wordBreak
-}), !color && sprinklesLegacyText({
-  color: colour !== null && colour !== void 0 ? colour : strong === true ? 'dark' : DEFAULT_TEXT_COLOUR
-}));
+}) => {
+  var _ref, _namedStyle$size, _namedStyle$weight;
+  const namedStyle = size && isNamedTextStyle(size) ? namedTextStyleMap[size] : undefined;
+  const text = (_ref = (_namedStyle$size = namedStyle === null || namedStyle === void 0 ? void 0 : namedStyle.size) !== null && _namedStyle$size !== void 0 ? _namedStyle$size : size) !== null && _ref !== void 0 ? _ref : DEFAULT_TEXT_SIZE;
+  // precedence: explicit weight > strong > named-style weight > default
+  const fontWeight = weight !== null && weight !== void 0 ? weight : strong === true ? 'bold' : (_namedStyle$weight = namedStyle === null || namedStyle === void 0 ? void 0 : namedStyle.weight) !== null && _namedStyle$weight !== void 0 ? _namedStyle$weight : DEFAULT_TEXT_WEIGHT;
+  return clsx(common, sprinkles({
+    color,
+    fontWeight,
+    text,
+    textAlign,
+    textTransform,
+    textWrap: noWrap === true ? 'nowrap' : wrap,
+    wordBreak: breakWord === true ? 'break-word' : wordBreak
+  }), !color && sprinklesLegacyText({
+    color: colour !== null && colour !== void 0 ? colour : strong === true ? 'dark' : DEFAULT_TEXT_COLOUR
+  }));
+};
 /**
  * Primary utility for styling typography, combines reset styles, style props and element props.
  * Also accepts a heading tag which will apply colour, font weight and size defaults.
@@ -70,7 +127,7 @@ export const typography = ({
  *   breakWord: true
  * })
  */
-export function textStyles(_ref) {
+export function textStyles(_ref2) {
   let {
       as = 'span',
       className,
@@ -78,8 +135,8 @@ export function textStyles(_ref) {
       size = isHeadingTag(as) ? headingSizeMap[as] : undefined,
       weight = isHeadingTag(as) ? 'bold' : undefined
       // remaining style props
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
   return clsx(resetStyles(as), typography(_objectSpread({
     colour,
     size,

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

@@ -1,15 +1,4 @@
 export declare const colourMapWithoutWhite: {
-    black: {
-        '900': string;
-        '800': string;
-        '700': string;
-        '600': string;
-        '500': string;
-        '400': string;
-        '300': string;
-        '200': string;
-        '100': string;
-    };
     gray: {
         '900': string;
         '800': string;
@@ -68,17 +57,6 @@ export declare const colourMapWithoutWhite: {
 };
 export declare const colourMap: {
     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;

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

@@ -1 +1 @@
-{"version":3,"file":"colours.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/colours.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEb,CAAC;AAEtB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGD,CAAC;AACtB,eAAO,MAAM,mBAAmB,QAAwB,CAAC"}
+{"version":3,"file":"colours.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/colours.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDb,CAAC;AAEtB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGD,CAAC;AACtB,eAAO,MAAM,mBAAmB,QAAwB,CAAC"}

package/dist/themes/base/colours.js

@@ -2,17 +2,6 @@ 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; }
 export const colourMapWithoutWhite = {
-  black: {
-    '900': '#222222',
-    '800': '#2A2C2A',
-    '700': '#444644',
-    '600': '#626262',
-    '500': '#808080',
-    '400': '#ADB1B5',
-    '300': '#D4D9DD',
-    '200': '#DDE0E3',
-    '100': '#E4E4E4'
-  },
   gray: {
     '900': '#212338',
     '800': '#34384c',
@@ -25,11 +14,11 @@ export const colourMapWithoutWhite = {
     '100': '#fafbfc'
   },
   green: {
-    '900': '#078171',
-    '800': '#05987a',
+    '900': '#00574c',
+    '800': '#18856f',
     '700': '#03af83',
     '600': '#01c68c',
-    '500': '#00dd95',
+    '500': '#00dda5',
     '400': '#36e5aa',
     '300': '#71edc2',
     '200': '#e3f8f0',
@@ -41,9 +30,9 @@ export const colourMapWithoutWhite = {
     '700': '#0d50ce',
     '600': '#0d54e5',
     '500': '#0d59fc',
-    '400': '#4680fc',
-    '300': '#80a7fd',
-    '200': '#e1edfe',
+    '400': '#4a86ff',
+    '300': '#81afff',
+    '200': '#bad4ff',
     '100': '#f3f8ff'
   },
   yellow: {

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

@@ -0,0 +1,31 @@
+/**
+ * The AutoGuru Design System 2026 contrast guide.
+ *
+ * Encodes the Figma "Contrast guide" frame: the only foreground-on-background
+ * colour combinations approved by design. Text combos meet WCAG AA (4.5:1);
+ * `icon-only` and `inactive-only` combos are conditional exceptions and must
+ * not be used for regular text.
+ *
+ * Do not use any colour combination that is not listed here.
+ *
+ * @see https://www.figma.com/design/ZkQlQcJkF7NTnZomVrPRN5/AutoGuru-Design-System-2026?node-id=360-12804
+ */
+export type ContrastUsage = 'text' | 'icon-only' | 'inactive-only';
+type Hue = 'gray' | 'green' | 'blue' | 'yellow' | 'red';
+type Step = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+/** A palette reference in design notation, e.g. `green-900`. */
+export type ContrastColourToken = `${Hue}-${Step}` | 'white';
+export interface ContrastCombo {
+    foreground: ContrastColourToken;
+    background: ContrastColourToken;
+    usage: ContrastUsage;
+}
+/** Resolves a contrast-guide token to its hex value in `colourMap`. */
+export declare const contrastGuideColour: (token: ContrastColourToken) => string;
+/**
+ * Every approved combination, grouped by the background's ramp. Order within
+ * each group follows the Figma chart (darkest background first).
+ */
+export declare const contrastGuide: Record<Hue, ContrastCombo[]>;
+export {};
+//# sourceMappingURL=contrastGuide.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contrastGuide.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/contrastGuide.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,WAAW,GAAG,eAAe,CAAC;AAEnE,KAAK,GAAG,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AACxD,KAAK,IAAI,GACN,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAET,gEAAgE;AAChE,MAAM,MAAM,mBAAmB,GAAG,GAAG,GAAG,IAAI,IAAI,EAAE,GAAG,OAAO,CAAC;AAE7D,MAAM,WAAW,aAAa;IAC7B,UAAU,EAAE,mBAAmB,CAAC;IAChC,UAAU,EAAE,mBAAmB,CAAC;IAChC,KAAK,EAAE,aAAa,CAAC;CACrB;AAED,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,GAAI,OAAO,mBAAmB,KAAG,MAIhE,CAAC;AAmBF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,GAAG,EAAE,aAAa,EAAE,CA4EtD,CAAC"}

package/dist/themes/base/contrastGuide.js

@@ -0,0 +1,43 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { colourMap } from "./colours.js";
+/**
+ * The AutoGuru Design System 2026 contrast guide.
+ *
+ * Encodes the Figma "Contrast guide" frame: the only foreground-on-background
+ * colour combinations approved by design. Text combos meet WCAG AA (4.5:1);
+ * `icon-only` and `inactive-only` combos are conditional exceptions and must
+ * not be used for regular text.
+ *
+ * Do not use any colour combination that is not listed here.
+ *
+ * @see https://www.figma.com/design/ZkQlQcJkF7NTnZomVrPRN5/AutoGuru-Design-System-2026?node-id=360-12804
+ */
+/** A palette reference in design notation, e.g. `green-900`. */
+/** Resolves a contrast-guide token to its hex value in `colourMap`. */
+export const contrastGuideColour = token => {
+  if (token === 'white') return colourMap.white;
+  const [hue, step] = token.split('-');
+  return colourMap[hue][step];
+};
+const combos = (foreground, backgrounds, usage = 'text') => backgrounds.map(background => ({
+  foreground,
+  background,
+  usage
+}));
+const onWhite = (foregrounds, usage = 'text') => foregrounds.map(foreground => ({
+  foreground,
+  background: 'white',
+  usage
+}));
+
+/**
+ * Every approved combination, grouped by the background's ramp. Order within
+ * each group follows the Figma chart (darkest background first).
+ */
+export const contrastGuide = {
+  green: [].concat(_toConsumableArray(combos('white', ['green-900', 'green-800'])), _toConsumableArray(onWhite(['green-900', 'green-800'])), _toConsumableArray(combos('gray-900', ['green-600', 'green-500', 'green-400', 'green-300'])), _toConsumableArray(onWhite(['green-600'], 'icon-only')), _toConsumableArray(combos('green-900', ['green-200', 'green-100']))),
+  yellow: [].concat(_toConsumableArray(combos('gray-900', ['yellow-900', 'yellow-800', 'yellow-700', 'yellow-600', 'yellow-500', 'yellow-400', 'yellow-300', 'yellow-200', 'yellow-100'])), _toConsumableArray(combos('red-900', ['yellow-500', 'yellow-400', 'yellow-300', 'yellow-200', 'yellow-100']))),
+  gray: [].concat(_toConsumableArray(combos('white', ['gray-900', 'gray-800', 'gray-700', 'gray-600', 'gray-500'])), _toConsumableArray(onWhite(['gray-900', 'gray-800', 'gray-700', 'gray-600', 'gray-500'])), _toConsumableArray(onWhite(['gray-400'], 'inactive-only')), _toConsumableArray(combos('gray-900', ['gray-300', 'gray-200', 'gray-100']))),
+  blue: [].concat(_toConsumableArray(combos('white', ['blue-900', 'blue-800', 'blue-700', 'blue-600', 'blue-500'])), _toConsumableArray(onWhite(['blue-900', 'blue-800', 'blue-700', 'blue-600'])), _toConsumableArray(combos('gray-900', ['blue-200', 'blue-100'])), _toConsumableArray(combos('blue-900', ['blue-200', 'blue-100']))),
+  red: [].concat(_toConsumableArray(combos('white', ['red-900', 'red-800', 'red-700', 'red-600', 'red-500'])), _toConsumableArray(onWhite(['red-900', 'red-800', 'red-700'])), _toConsumableArray(onWhite(['red-600'], 'icon-only')), _toConsumableArray(combos('gray-900', ['red-200', 'red-100'])), _toConsumableArray(combos('red-900', ['red-200', 'red-100'])))
+};

package/dist/themes/base/contrastGuide.spec.d.ts

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

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

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

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

@@ -0,0 +1,51 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { describe, expect, it } from 'vitest';
+import { tokens as flatRedTokens } from "../flat_red/tokens.js";
+import { getContrastRatio } from "../helpers.js";
+import { tokens as neutralTokens } from "../neutral/tokens.js";
+import { contrastGuide, contrastGuideColour } from "./contrastGuide.js";
+import { tokens as baseTokens } from "./tokens.js";
+const ratio = (foreground, background) => 1 / getContrastRatio(foreground, background);
+const allCombos = Object.values(contrastGuide).flat();
+const label = ({
+  foreground,
+  background
+}) => `${foreground} on ${background}`;
+const KNOWN_BELOW_ICON_THRESHOLD = new Set(['green-600 on white']);
+describe('contrast guide', () => {
+  describe.each(allCombos.filter(combo => combo.usage === 'text'))('text combo $foreground on $background', combo => {
+    it('passes WCAG AA for normal text (4.5:1)', () => {
+      expect(ratio(contrastGuideColour(combo.foreground), contrastGuideColour(combo.background))).toBeGreaterThanOrEqual(4.5);
+    });
+  });
+  describe.each(allCombos.filter(combo => combo.usage !== 'text'))('conditional combo $foreground on $background ($usage)', combo => {
+    it('meets the 3:1 non-text threshold (or is a documented exception)', () => {
+      const value = ratio(contrastGuideColour(combo.foreground), contrastGuideColour(combo.background));
+      if (KNOWN_BELOW_ICON_THRESHOLD.has(label(combo))) {
+        expect(value).toBeLessThan(3);
+      } else {
+        expect(value).toBeGreaterThanOrEqual(3);
+      }
+    });
+  });
+});
+const tokenPairs = tokens => {
+  const {
+    surface,
+    content
+  } = 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]])));
+};
+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'],
+  flat_red: ['content.warning on surface.page', 'intent.brand foreground on background.standard', 'intent.primary 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'],
+  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) => {
+  it('has no undocumented AA failures in intended pairings', () => {
+    const failures = tokenPairs(tokens).filter(([, foreground, background]) => {
+      return ratio(foreground, background) < 4.5;
+    }).map(([name]) => name).sort();
+    expect(failures).toEqual(_toConsumableArray(KNOWN_AA_FAILURES[themeName]).sort());
+  });
+});