@autoguru/overdrive 4.61.0 → 4.63.0

package/dist/components/OverdriveProvider/useColorOverrides.spec.js

@@ -0,0 +1,226 @@
+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 { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { colourMap } from "../../themes/base/colours.js";
+import { tokens as baseTokens } from "../../themes/base/tokens.js";
+import { getColourLuminance, getRGBValues } from "../../themes/helpers.js";
+import { useColorOverrides } from "./useColorOverrides.js";
+const BRAND = '#6d39a8'; // Merchant Finder's purple — dark, wants white on it
+const BRIGHT = '#e5bc01'; // a bright yellow — wants dark ink on it
+
+const vars = (overrides, tokens = baseTokens) => renderHook(() => useColorOverrides(overrides, tokens)).result.current;
+const luminance = colour => getColourLuminance(getRGBValues(colour));
+describe('useColorOverrides', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+  it('generates nothing when no overrides are supplied', () => {
+    expect(vars()).toEqual({});
+  });
+  describe('back-compat with the existing five keys', () => {
+    it('writes the legacy primary intent vars it always has', () => {
+      const result = vars({
+        primaryBackground: BRAND,
+        primaryForeground: '#ffffff',
+        primaryBorder: '#000000'
+      });
+      expect(result['--od-colours-intent-primary-background-standard']).toBe(BRAND);
+      expect(result['--od-colours-intent-primary-foreground']).toBe('#ffffff');
+      expect(result['--od-colours-intent-primary-border']).toBe('#000000');
+      expect(result['--od-typography-colour-primary']).toBe(BRAND);
+    });
+    it('honours explicitly supplied mild and strong values', () => {
+      const result = vars({
+        primaryBackground: BRAND,
+        primaryBackgroundMild: '#eeeeee',
+        primaryBackgroundStrong: '#111111'
+      });
+      expect(result['--od-colours-intent-primary-background-mild']).toBe('#eeeeee');
+      expect(result['--od-colours-intent-primary-background-strong']).toBe('#111111');
+    });
+    it('derives mild lighter and strong darker than the brand, not identical', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      const mild = result['--od-colours-intent-primary-background-mild'];
+      const strong = result['--od-colours-intent-primary-background-strong'];
+
+      // regression guard: these were derived with identical arguments and
+      // both resolved to the same lightened colour, so a branded button's
+      // hover and active states were indistinguishable from resting
+      expect(mild).not.toBe(strong);
+      expect(luminance(mild)).toBeGreaterThan(luminance(BRAND));
+      expect(luminance(strong)).toBeLessThan(luminance(BRAND));
+    });
+  });
+  describe('brand accent', () => {
+    it('writes the brand pair from the supplied background', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-color-brand-solid']).toBe(BRAND);
+    });
+    it('picks white as on-brand content for a dark brand', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.white);
+    });
+    it('picks dark ink as on-brand content for a bright brand', () => {
+      const result = vars({
+        primaryBackground: BRIGHT
+      });
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.gray['900']);
+    });
+    it('prefers an explicit primaryForeground over the derived value', () => {
+      const result = vars({
+        primaryBackground: BRIGHT,
+        primaryForeground: '#123456'
+      });
+      expect(result['--od-color-brand-on-solid']).toBe('#123456');
+    });
+    it('ignores a primaryForeground that would be illegible on the brand', () => {
+      // a tenant pairing a light brand with white button text: taken
+      // verbatim this puts a white tick on a light checkbox, which is
+      // worse than the fixed dark ink these controls had before they
+      // followed the brand at all
+      const result = vars({
+        primaryBackground: '#ff6d00',
+        primaryForeground: '#ffffff'
+      });
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.gray['900']);
+      // the button label still honours what the tenant asked for — that
+      // is their stated brand pairing, and it was already the behaviour
+      expect(result['--od-colours-intent-primary-foreground']).toBe('#ffffff');
+    });
+    it('derives the button label too when no primaryForeground is given', () => {
+      // otherwise a light brand keeps the theme's white label and the
+      // solid button is unreadable, which the prop docs promise against
+      const result = vars({
+        primaryBackground: BRIGHT
+      });
+      expect(result['--od-colours-intent-primary-foreground']).toBe(colourMap.gray['900']);
+      expect(result['--od-color-brand-on-solid']).toBe(colourMap.gray['900']);
+    });
+    it('picks its contrast candidates from the active theme, not the base one', () => {
+      // the two candidates are the theme's own page background and body
+      // ink, so a theme that changes either gets decisions made against
+      // what it actually renders
+      const recoloured = _objectSpread(_objectSpread({}, baseTokens), {}, {
+        color: _objectSpread(_objectSpread({}, baseTokens.color), {}, {
+          background: _objectSpread(_objectSpread({}, baseTokens.color.background), {}, {
+            default: '#fff8e1'
+          }),
+          foreground: _objectSpread(_objectSpread({}, baseTokens.color.foreground), {}, {
+            primary: '#1a0033'
+          })
+        })
+      });
+      const result = vars({
+        primaryBackground: BRIGHT
+      }, recoloured);
+      expect(result['--od-color-brand-on-solid']).toBe('#1a0033');
+    });
+  });
+  describe('outlined button', () => {
+    it('takes the brand verbatim for border and label', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-color-button-primary-outlined-border']).toBe(BRAND);
+      expect(result['--od-color-button-primary-outlined-text']).toBe(BRAND);
+    });
+    it('derives a hover wash paler than the pressed wash', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      const hover = result['--od-color-button-primary-outlined-hover'];
+      const pressed = result['--od-color-button-primary-outlined-pressed'];
+      expect(luminance(hover)).toBeGreaterThan(luminance(pressed));
+      expect(luminance(pressed)).toBeGreaterThan(luminance(BRAND));
+    });
+  });
+  describe('links and focus rings', () => {
+    it('leaves them alone when only a brand background is supplied', () => {
+      const result = vars({
+        primaryBackground: BRAND
+      });
+      expect(result['--od-colours-foreground-link']).toBeUndefined();
+      expect(result['--od-typography-colour-link']).toBeUndefined();
+    });
+    it('brands them only when linkColor is passed explicitly', () => {
+      const result = vars({
+        primaryBackground: BRAND,
+        linkColor: BRAND
+      });
+      expect(result['--od-colours-foreground-link']).toBe(BRAND);
+      expect(result['--od-typography-colour-link']).toBe(BRAND);
+    });
+  });
+  describe('invalid values', () => {
+    it('warns, drops the key, and does not mutate the caller object', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const supplied = {
+        primaryBackground: 'not-a-colour',
+        primaryForeground: '#ffffff'
+      };
+      const result = vars(supplied);
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('primaryBackground'));
+      expect(result['--od-color-brand-solid']).toBeUndefined();
+      // the hook used to `delete` off the prop object itself, which
+      // mutates state an MFE may be holding in a GraphQL cache
+      expect(supplied.primaryBackground).toBe('not-a-colour');
+    });
+  });
+  describe('contrast warning', () => {
+    it('warns when the brand is too light to read on the page background', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      // a colour not warned about elsewhere in this file, since the
+      // warning is deduplicated for the life of the module
+      vars({
+        primaryBackground: '#ffd54a'
+      });
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('does not meet WCAG AA'));
+    });
+    it('stays quiet for a brand with enough contrast', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      vars({
+        primaryBackground: BRAND
+      });
+      expect(warn).not.toHaveBeenCalled();
+    });
+    it('warns only once for a repeated colour, since the provider re-renders freely', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      vars({
+        primaryBackground: '#ffe08a'
+      });
+      vars({
+        primaryBackground: '#ffe08a'
+      });
+      vars({
+        primaryBackground: '#ffe08a'
+      });
+      expect(warn).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe('server rendering', () => {
+    it('keeps overrides when the DOM colour check is unavailable', () => {
+      // `isValidColor` uses `Option`, a DOM global. Failing closed on the
+      // server stripped every override, so a branded page shipped no
+      // inline vars and only picked up the brand on hydration.
+      const original = globalThis.Option;
+      // @ts-expect-error simulating a non-DOM environment
+      delete globalThis.Option;
+      try {
+        const result = vars({
+          primaryBackground: BRAND
+        });
+        expect(result['--od-color-brand-solid']).toBe(BRAND);
+      } finally {
+        globalThis.Option = original;
+      }
+    });
+  });
+});

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Radio/Radio.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,KAAK,QAYhB,CAAC;AAEH,eAAO,MAAM,aAAa,QAOxB,CAAC"}
+{"version":3,"file":"Radio.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Radio/Radio.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,aAAa,QAGxB,CAAC;AAEH,eAAO,MAAM,KAAK,QAYhB,CAAC;AAEH,eAAO,MAAM,aAAa,QAQxB,CAAC"}

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

@@ -3,7 +3,7 @@ __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.color.foreground.primary;
+const colorAccent = vars.color.brand.solid;
 const colorContrast = vars.color.background.default;
 const colorMid = vars.colours.background.neutral;
 const outerSize = vars.space['6'];
@@ -42,7 +42,8 @@ export const inner = style([circleBase, {
   }
 }], "inner");
 export const innerSelected = style({
-  backgroundColor: colorContrast,
+  // on the brand fill, unlike the unselected hover dot above
+  backgroundColor: vars.color.brand.onSolid,
   selectors: {
     [`${nativeInput}:hover ~${checkable} &`]: {
       transform: 'scale(0.85)'

package/dist/components/StandardModal/StandardModal.js

@@ -112,7 +112,7 @@ export const StandardModal = ({
             onClick: closeButtonHandler,
             children: /*#__PURE__*/_jsx(Icon, {
               className: textStyles({
-                color: 'tertiaryInactive'
+                color: 'tertiary'
               }),
               icon: XIcon,
               size: "medium"

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,MAAM,QAqBjB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAKH,eAAO,MAAM,MAAM,sCAkCjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}
+{"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,MAAM,QAqBjB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAKH,eAAO,MAAM,MAAM,sCAoCjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}

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

@@ -5,7 +5,7 @@ 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.color.foreground.primary;
+const colorAccent = vars.color.brand.solid;
 const colorContrast = vars.color.background.default;
 const colorMid = vars.colours.background.neutral;
 const colorLight = vars.colours.background.light;
@@ -78,6 +78,8 @@ export const handle = styleVariants({
       [cssLayerComponent]: {
         selectors: {
           [`${toggleOn} &`]: {
+            // on the brand track, so on-brand rather than page
+            backgroundColor: vars.color.brand.onSolid,
             transform: handleTranslate
           },
           [`${toggle}:not([data-disabled]):hover &`]: {

package/dist/components/private/InputBase/InputState.css.js

@@ -19,7 +19,7 @@ export const disabled = styleVariants({
 export const natural = {
   default: {
     colour: style({
-      color: vars.color.foreground.tertiaryInactive
+      color: vars.color.foreground.tertiary
     }, "natural_default_colour"),
     borderColour: style({
       borderColor: vars.border.colours.gray

package/dist/components/private/InputBase/NotchedBase.css.js

@@ -157,7 +157,7 @@ export const placeholder = styleVariants({
     color: vars.colours.background.neutral
   },
   mutedLabelStyles: {
-    color: vars.color.foreground.tertiaryInactive
+    color: vars.color.foreground.tertiary
   }
 }, "placeholder");
 const calcPlaceholderTranslate = (notched, prefixed, size) => {

package/dist/components/private/InputBase/withEnhancedInput.css.js

@@ -14,7 +14,7 @@ export const input = {
           cursor: 'not-allowed'
         },
         '&::placeholder': {
-          color: vars.color.foreground.tertiaryInactive,
+          color: vars.color.foreground.tertiary,
           fontSize: vars.typography.size['4'].fontSize,
           lineHeight: vars.typography.size['4'].lineHeight,
           opacity: 1

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

@@ -1,8 +1,8 @@
 import { type RecipeVariants } from '@vanilla-extract/recipes';
-export declare const variantIntentionalColors: Record<"success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information", string>;
-export declare const variantIntentionalColorsInverted: Record<"success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information", string>;
+export declare const variantIntentionalColors: Record<"brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information", string>;
+export declare const variantIntentionalColorsInverted: Record<"brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information", string>;
 export declare const styledIntentionalElement: import("@vanilla-extract/recipes").RuntimeFn<{
-    intention: Record<"success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information", object>;
+    intention: Record<"brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information", object>;
     inverted: {
         true: {};
         false: {};

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

@@ -26,22 +26,22 @@ export declare const responsiveConditions: {
     };
 };
 export declare const sprinkles: ((props: {
-    borderBottomColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderLeftColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderRightColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderTopColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderBottomColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
-    borderLeftColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
-    borderRightColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
-    borderTopColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
+    borderBottomColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderLeftColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderRightColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderTopColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderBottomColour?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
+    borderLeftColour?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
+    borderRightColour?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
+    borderTopColour?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
     borderLeftStyle?: "none" | "solid" | undefined;
     borderBottomStyle?: "none" | "solid" | undefined;
     borderRightStyle?: "none" | "solid" | undefined;
     borderTopStyle?: "none" | "solid" | undefined;
-    color?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | "primary" | "secondary" | "reverse" | "tertiaryInactive" | "tertiaryInactiveLight" | "unset" | "infoText" | "infoForeground" | "successText" | "successForeground" | "warningText" | "warningForeground" | "alertText" | "alertForeground" | undefined;
-    colour?: "link" | "white" | "body" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
-    backgroundColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "reverse" | "default" | "inactive" | "emphasisInactive" | "transparent" | "infoBackground" | "successBackgroundDark" | "successBackgroundLight" | "warningBackgroundDark" | "warningBackgroundLight" | "alertBackground" | undefined;
-    backgroundColour?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information" | "transparent" | "black900" | undefined;
+    color?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | "placeholder" | "primary" | "secondary" | "reverse" | "tertiary" | "unset" | "infoText" | "infoForeground" | "successText" | "successForeground" | "warningText" | "warningForeground" | "alertText" | "alertForeground" | undefined;
+    colour?: "link" | "white" | "body" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | "muted" | "unset" | undefined;
+    backgroundColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "reverse" | "default" | "inactive" | "emphasisInactive" | "emphasisLight" | "modal" | "transparent" | "infoBackgroundStrong" | "infoBackgroundSubtle" | "successBackgroundStrong" | "successBackgroundSubtle" | "warningBackgroundStrong" | "warningBackgroundSubtle" | "alertBackgroundStrong" | "alertBackgroundSubtle" | undefined;
+    backgroundColour?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information" | "transparent" | "black900" | undefined;
     opacity?: number | "0" | "1" | undefined;
     fontWeight?: "bold" | "medium" | "normal" | "semiBold" | undefined;
     textTransform?: "capitalize" | "lowercase" | "uppercase" | undefined;
@@ -51,14 +51,14 @@ export declare const sprinkles: ((props: {
     pointerEvents?: "none" | "auto" | undefined;
     userSelect?: "none" | "text" | "auto" | undefined;
     useVar?: "gap" | undefined;
-    bg?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "reverse" | "default" | "inactive" | "emphasisInactive" | "transparent" | "infoBackground" | "successBackgroundDark" | "successBackgroundLight" | "warningBackgroundDark" | "warningBackgroundLight" | "alertBackground" | undefined;
-    fg?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | "primary" | "secondary" | "reverse" | "tertiaryInactive" | "tertiaryInactiveLight" | "unset" | "infoText" | "infoForeground" | "successText" | "successForeground" | "warningText" | "warningForeground" | "alertText" | "alertForeground" | undefined;
-    borderColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderColorX?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderColorY?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "muted" | "transparent" | "disabled" | undefined;
-    borderColour?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
-    borderColourX?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
-    borderColourY?: "gray" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "brand" | "shine" | "information" | "dark" | undefined;
+    bg?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "reverse" | "default" | "inactive" | "emphasisInactive" | "emphasisLight" | "modal" | "transparent" | "infoBackgroundStrong" | "infoBackgroundSubtle" | "successBackgroundStrong" | "successBackgroundSubtle" | "warningBackgroundStrong" | "warningBackgroundSubtle" | "alertBackgroundStrong" | "alertBackgroundSubtle" | undefined;
+    fg?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "soft" | "success" | "info" | "danger" | "warning" | "normal" | "inverse" | "placeholder" | "primary" | "secondary" | "reverse" | "tertiary" | "unset" | "infoText" | "infoForeground" | "successText" | "successForeground" | "warningText" | "warningForeground" | "alertText" | "alertForeground" | undefined;
+    borderColor?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderColorX?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderColorY?: "white" | "gray900" | "gray800" | "gray700" | "gray600" | "gray500" | "gray400" | "gray300" | "gray200" | "gray100" | "green900" | "green800" | "green700" | "green600" | "green500" | "green400" | "green300" | "green200" | "green100" | "blue900" | "blue800" | "blue700" | "blue600" | "blue500" | "blue400" | "blue300" | "blue200" | "blue100" | "yellow900" | "yellow800" | "yellow700" | "yellow600" | "yellow500" | "yellow400" | "yellow300" | "yellow200" | "yellow100" | "red900" | "red800" | "red700" | "red600" | "red500" | "red400" | "red300" | "red200" | "red100" | "page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "emphasis" | "selected" | "strong" | "disabled" | "muted" | "transparent" | undefined;
+    borderColour?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
+    borderColourX?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
+    borderColourY?: "gray" | "brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "light" | "neutral" | "shine" | "information" | "dark" | undefined;
     borderStyle?: "none" | "solid" | undefined;
     borderStyleBottom?: "none" | "solid" | undefined;
     borderStyleLeft?: "none" | "solid" | undefined;
@@ -502,11 +502,11 @@ export type Sprinkles = Parameters<typeof sprinkles>[0];
 export type SprinklesLegacyColours = Pick<Sprinkles, 'backgroundColour' | 'borderColour' | 'borderBottomColour' | 'borderLeftColour' | 'borderRightColour' | 'borderTopColour' | 'colour'>;
 export declare const valueArrays: {
     alignItems: ("stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart")[];
-    borderColors: ("page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "muted" | "disabled")[];
+    borderColors: ("page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "default" | "disabled" | "muted")[];
     gapSizesWithVar: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "none")[];
-    intentBackgroundColoursStandard: ("success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information")[];
-    intentBorderColours: ("success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information")[];
-    intentForegroundColours: ("success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "brand" | "shine" | "information")[];
+    intentBackgroundColoursStandard: ("brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information")[];
+    intentBorderColours: ("brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information")[];
+    intentForegroundColours: ("brand" | "success" | "danger" | "warning" | "primary" | "secondary" | "neutral" | "shine" | "information")[];
     justifyContent: ("space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart")[];
     spaceWithNone: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "none")[];
     width: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "full" | "auto" | "fit-content" | "max-content" | "min-content")[];

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":"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"}
+{"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;AAyMF,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

@@ -84,7 +84,7 @@ const semanticGamut = buildColourGamut({
 
 // `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)
+  // primary, secondary, reverse, tertiary, placeholder (W1-P1)
   infoText: tokens.color.info.text,
   infoForeground: tokens.color.info.foreground,
   successText: tokens.color.success.text,
@@ -101,13 +101,15 @@ const semanticColor = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}
 
 // `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
+  // default, reverse, inactive, emphasisInactive, emphasisLight, modal (W1-P1)
+  infoBackgroundStrong: tokens.color.info.backgroundStrong,
+  infoBackgroundSubtle: tokens.color.info.backgroundSubtle,
+  successBackgroundStrong: tokens.color.success.backgroundStrong,
+  successBackgroundSubtle: tokens.color.success.backgroundSubtle,
+  warningBackgroundStrong: tokens.color.warning.backgroundStrong,
+  warningBackgroundSubtle: tokens.color.warning.backgroundSubtle,
+  alertBackgroundStrong: tokens.color.alert.backgroundStrong,
+  alertBackgroundSubtle: tokens.color.alert.backgroundSubtle
 }, semanticGamut), {}, {
   white: tokens.color.gamut.white,
   transparent: 'transparent'

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

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

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

@@ -32,9 +32,10 @@ describe('contrast guide', () => {
 const tokenPairs = tokens => {
   const {
     surface,
-    content
+    content,
+    brand
   } = 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]])));
+  return [['brand.onSolid on brand.solid', brand.onSolid, brand.solid], ['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'],
@@ -42,6 +43,14 @@ const KNOWN_AA_FAILURES = {
   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) => {
+  // The brand pair is seeded to the values its consumers (Switch, Radio,
+  // CheckBox) rendered before it existed, which is what makes introducing it a
+  // zero-visual-change addition. If someone re-brands the seed without also
+  // moving those components, this fails first and says why.
+  it('seeds the brand pair to the values its consumers rendered before it existed', () => {
+    expect(tokens.color.brand.solid).toBe(tokens.color.foreground.primary);
+    expect(tokens.color.brand.onSolid).toBe(tokens.color.background.default);
+  });
   it('has no undocumented AA failures in intended pairings', () => {
     const failures = tokenPairs(tokens).filter(([, foreground, background]) => {
       return ratio(foreground, background) < 4.5;