@autoguru/overdrive 4.41.0-next.6 → 4.42.0-next.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/themes/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AAEpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA0C,CAAC;AAC9D,OAAO,EACN,eAAe,EACf,iBAAiB,EACjB,KAAK,WAAW,GAChB,MAAM,aAAa,CAAC;AACrB,mBAAmB,SAAS,CAAC"}

package/dist/themes/index.js

@@ -1,5 +1,10 @@
 "use strict";
 
+import { default as baseTheme } from "./base/index.js";
+import { default as flatRedTheme } from "./flat_red/index.js";
+import { default as neutralTheme } from "./neutral/index.js";
 export { default as baseTheme } from "./base/index.js";
 export { default as flatRedTheme } from "./flat_red/index.js";
-export { default as neutralTheme } from "./neutral/index.js";
+export { default as neutralTheme } from "./neutral/index.js";
+export const themes = [baseTheme, flatRedTheme, neutralTheme];
+export { overdriveTokens, themeContractVars } from "./theme.css.js";

package/dist/themes/makeTheme.d.ts

@@ -1,8 +1,402 @@
-import { BreakPoints, ColourGamut, ColourMap } from './tokens';
+import type { BreakPoints, ColourMap, FlattenedColours, ThemeTokens } from '.';
 export declare const breakpoints: BreakPoints;
+export declare const themeTokensWithLayer: (tokens: ThemeTokens) => {
+    mode: string;
+    body: import("./helpers").TokensFromContract<{
+        backgroundColour: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        colour: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    }>;
+    contentWidth: import("./helpers").TokensFromContract<{
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    }>;
+    space: import("./helpers").TokensFromContract<{
+        '1': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '2': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '3': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '4': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '5': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '6': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '7': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '8': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '9': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    }>;
+    color: import("./helpers").TokensFromContract<{
+        gamut: {
+            white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            black: {
+                '900': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '800': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '700': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '600': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '500': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '400': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '300': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '200': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '100': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            gray: {
+                '900': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '800': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '700': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '600': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '500': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '400': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '300': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '200': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '100': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            green: {
+                '900': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '800': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '700': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '600': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '500': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '400': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '300': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '200': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '100': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            blue: {
+                '900': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '800': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '700': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '600': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '500': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '400': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '300': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '200': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '100': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            yellow: {
+                '900': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '800': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '700': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '600': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '500': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '400': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '300': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '200': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '100': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            red: {
+                '900': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '800': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '700': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '600': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '500': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '400': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '300': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '200': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                '100': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        surface: {
+            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            accent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            hard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            soft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        content: {
+            onBody: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            onSurface: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            accent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            hard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            soft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        interactive: {
+            border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderMuted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            surfaceDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            contentDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            linkVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            overlayBg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            overlayContainer: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            placeholder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            focusOutline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    }>;
+    colours: import("./helpers").TokensFromContract<{
+        gamut: {
+            white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            black900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            black800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            black700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            black600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            black500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            black400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            black300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            black200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            black100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gray900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gray800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gray700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gray600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gray500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gray400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gray300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gray200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gray100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            green900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            green800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            green700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            green600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            green500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            green400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            green300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            green200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            green100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            blue900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            blue800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            blue700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            blue600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            blue500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            blue400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            blue300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            blue200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            blue100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            yellow900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            yellow800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            yellow700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            yellow600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            yellow500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            yellow400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            yellow300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            yellow200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            yellow100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            red900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            red800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            red700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            red600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            red500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            red400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            red300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            red200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            red100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        foreground: {
+            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        background: {
+            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            light: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            neutralDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        intent: {
+            primary: {
+                background: {
+                    standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            brand: {
+                background: {
+                    standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            secondary: {
+                background: {
+                    standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            shine: {
+                background: {
+                    standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            danger: {
+                background: {
+                    standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            warning: {
+                background: {
+                    standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            neutral: {
+                background: {
+                    standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            success: {
+                background: {
+                    standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            information: {
+                background: {
+                    standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    }>;
+    elevation: import("./helpers").TokensFromContract<{
+        '1': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '2': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '3': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '4': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '5': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    }>;
+    border: import("./helpers").TokensFromContract<{
+        width: {
+            '1': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            '2': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            '3': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        colours: {
+            light: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            gray: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            dark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        radius: {
+            none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            min: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            '2xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            '1': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            pill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    }>;
+    typography: import("./helpers").TokensFromContract<{
+        size: {
+            '1': {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            '2': {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            '3': {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            '4': {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            '5': {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            '6': {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            '7': {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            '8': {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            '9': {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        colour: {
+            primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            shine: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            dark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            muted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            light: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            information: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        fontWeight: {
+            normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            semiBold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    }>;
+    animation: import("./helpers").TokensFromContract<{
+        easing: {
+            standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            decelerate: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            accelerate: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    }>;
+    icon: import("./helpers").TokensFromContract<{
+        size: {
+            small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    }>;
+    opacity: import("./helpers").TokensFromContract<{
+        overlayBg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    }>;
+    '@layer': string;
+};
 export declare const makeRuntimeTokens: (runtimeBreakpoints?: BreakPoints) => {
     breakpoints: BreakPoints;
 };
 export type RuntimeTokens = ReturnType<typeof makeRuntimeTokens>;
-export declare const buildColourGamut: (colours: ColourMap) => Record<ColourGamut, string>;
+export declare const buildColourGamut: (colours: ColourMap) => FlattenedColours;
 //# sourceMappingURL=makeTheme.d.ts.map

package/dist/themes/makeTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"makeTheme.d.ts","sourceRoot":"","sources":["../../lib/themes/makeTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE/D,eAAO,MAAM,WAAW,EAAE,WAKzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC7B,qBAAoB,WAAyB;;CAG5C,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEjE,eAAO,MAAM,gBAAgB,GAC5B,SAAS,SAAS,KAChB,MAAM,CAAC,WAAW,EAAE,MAAM,CAe3B,CAAC"}
+{"version":3,"file":"makeTheme.d.ts","sourceRoot":"","sources":["../../lib/themes/makeTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAE/E,eAAO,MAAM,WAAW,EAAE,WAKzB,CAAC;AAKF,eAAO,MAAM,oBAAoB,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGtD,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAC7B,qBAAoB,WAAyB;;CAG5C,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEjE,eAAO,MAAM,gBAAgB,GAAI,SAAS,SAAS,KAAG,gBAepD,CAAC"}

package/dist/themes/makeTheme.js

@@ -3,12 +3,16 @@
 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 { cssLayerTheme } from "../styles/layers.css.js";
 export const breakpoints = {
   mobile: '0px',
   tablet: '768px',
   desktop: '1024px',
   largeDesktop: '1920px'
 };
+export const themeTokensWithLayer = tokens => _objectSpread({
+  '@layer': cssLayerTheme
+}, tokens);
 export const makeRuntimeTokens = function () {
   let runtimeBreakpoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : breakpoints;
   return {