vectis-ui 0.1.0

package/dist/tokens/css.js

@@ -0,0 +1,29 @@
+import { isToken as e } from "./types.js";
+//#region src/tokens/css.ts
+function t(n, r = []) {
+	let i = [];
+	for (let [a, o] of Object.entries(n)) {
+		let n = [...r, a];
+		e(o) ? i.push({
+			path: n,
+			cssName: `--vectis-${n.join("-")}`,
+			token: o
+		}) : i.push(...t(o, n));
+	}
+	return i;
+}
+var n = /\{([^}]+)\}/g;
+function r(e, t) {
+	return e.replace(n, (e, n) => {
+		let r = `--vectis-${n.trim().split(".").join("-")}`;
+		if (!t.has(r)) throw Error(`Unknown token alias: {${n}}`);
+		return `var(${r})`;
+	});
+}
+function i(e, t, n = "  ") {
+	return e.map((e) => `${n}${e.cssName}: ${r(e.token.$value, t)};`).join("\n");
+}
+//#endregion
+export { t as flattenTokens, r as resolveTokenValue, i as toCssDeclarations };
+
+//# sourceMappingURL=css.js.map

package/dist/tokens/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","names":[],"sources":["../../src/tokens/css.ts"],"sourcesContent":["/**\n * Turning the design tokens into CSS.\n *\n * The tokens are written as nested groups of typed objects, and what a browser needs is a\n * flat list of custom properties. That translation happens here. The build uses it to\n * produce the stylesheet the library ships, and it is also published as part of the\n * package so that an application can do the same thing at runtime — a live theming tool\n * regenerating the variables as its user moves a slider, or exporting a configuration.\n */\nimport { isToken, type DesignToken, type TokenGroup } from './types'\n\nexport interface FlatToken {\n  path: string[]\n  cssName: string\n  token: DesignToken\n}\n\n/**\n * Walks the nested groups and returns one entry per token, each carrying the name of the\n * custom property it will become — the path through the groups, joined with dashes and\n * prefixed so that nothing collides with an application's own variables.\n */\nexport function flattenTokens(group: TokenGroup, prefix: string[] = []): FlatToken[] {\n  const out: FlatToken[] = []\n  for (const [key, node] of Object.entries(group)) {\n    const path = [...prefix, key]\n    if (isToken(node)) {\n      out.push({ path, cssName: `--vectis-${path.join('-')}`, token: node })\n    } else {\n      out.push(...flattenTokens(node, path))\n    }\n  }\n  return out\n}\n\nconst ALIAS_RE = /\\{([^}]+)\\}/g\n\n/**\n * A token's value may point at another token by name, in braces, instead of stating a\n * colour or a length of its own. Each of those references becomes a reading of the\n * corresponding custom property, so the link survives into the CSS and remains\n * overridable at runtime.\n *\n * A reference to a token that does not exist STOPS the build rather than being left as\n * it is. A dangling reference in CSS resolves to nothing at all, and the component using\n * it loses its colour with nothing in the console to say why.\n */\nexport function resolveTokenValue(value: string, known: ReadonlySet<string>): string {\n  return value.replace(ALIAS_RE, (_match, ref: string) => {\n    const cssName = `--vectis-${ref.trim().split('.').join('-')}`\n    if (!known.has(cssName)) {\n      throw new Error(`Unknown token alias: {${ref}}`)\n    }\n    return `var(${cssName})`\n  })\n}\n\n/** The final step: a list of tokens written out as the lines of a CSS rule. */\nexport function toCssDeclarations(\n  flat: FlatToken[],\n  known: ReadonlySet<string>,\n  indent = '  ',\n): string {\n  return flat\n    .map((f) => `${indent}${f.cssName}: ${resolveTokenValue(f.token.$value, known)};`)\n    .join('\\n')\n}\n"],"mappings":";;AAsBA,SAAgB,EAAc,GAAmB,IAAmB,CAAC,GAAgB;CACnF,IAAM,IAAmB,CAAC;CAC1B,KAAK,IAAM,CAAC,GAAK,MAAS,OAAO,QAAQ,CAAK,GAAG;EAC/C,IAAM,IAAO,CAAC,GAAG,GAAQ,CAAG;EAC5B,AAAI,EAAQ,CAAI,IACd,EAAI,KAAK;GAAE;GAAM,SAAS,YAAY,EAAK,KAAK,GAAG;GAAK,OAAO;EAAK,CAAC,IAErE,EAAI,KAAK,GAAG,EAAc,GAAM,CAAI,CAAC;CAEzC;CACA,OAAO;AACT;AAEA,IAAM,IAAW;AAYjB,SAAgB,EAAkB,GAAe,GAAoC;CACnF,OAAO,EAAM,QAAQ,IAAW,GAAQ,MAAgB;EACtD,IAAM,IAAU,YAAY,EAAI,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG;EAC1D,IAAI,CAAC,EAAM,IAAI,CAAO,GACpB,MAAU,MAAM,yBAAyB,EAAI,EAAE;EAEjD,OAAO,OAAO,EAAQ;CACxB,CAAC;AACH;AAGA,SAAgB,EACd,GACA,GACA,IAAS,MACD;CACR,OAAO,EACJ,KAAK,MAAM,GAAG,IAAS,EAAE,QAAQ,IAAI,EAAkB,EAAE,MAAM,QAAQ,CAAK,EAAE,EAAE,CAAC,CACjF,KAAK,IAAI;AACd"}

package/dist/tokens/index.d.ts

@@ -0,0 +1,370 @@
+export type { DesignToken, TokenGroup, TokenType } from './types.js';
+export { isToken } from './types.js';
+export { flattenTokens, resolveTokenValue, toCssDeclarations, type FlatToken } from './css.js';
+export declare const tokens: {
+    primitives: {
+        color: {
+            white: import('./types.js').DesignToken;
+            black: import('./types.js').DesignToken;
+            red: import('./types.js').TokenGroup;
+            amber: import('./types.js').TokenGroup;
+            green: import('./types.js').TokenGroup;
+            indigo: import('./types.js').TokenGroup;
+            gray: import('./types.js').TokenGroup;
+        };
+        space: {
+            '1': import('./types.js').DesignToken;
+            '2': import('./types.js').DesignToken;
+            '3': import('./types.js').DesignToken;
+            '4': import('./types.js').DesignToken;
+            '5': import('./types.js').DesignToken;
+            '6': import('./types.js').DesignToken;
+            '7': import('./types.js').DesignToken;
+            '8': import('./types.js').DesignToken;
+            '9': import('./types.js').DesignToken;
+            '10': import('./types.js').DesignToken;
+            '11': import('./types.js').DesignToken;
+            '12': import('./types.js').DesignToken;
+        };
+        font: {
+            family: {
+                sans: import('./types.js').DesignToken;
+                display: import('./types.js').DesignToken;
+                mono: import('./types.js').DesignToken;
+                icon: import('./types.js').DesignToken;
+            };
+            weight: {
+                regular: import('./types.js').DesignToken;
+                medium: import('./types.js').DesignToken;
+                semibold: import('./types.js').DesignToken;
+                bold: import('./types.js').DesignToken;
+            };
+            size: {
+                xs: import('./types.js').DesignToken;
+                sm: import('./types.js').DesignToken;
+                md: import('./types.js').DesignToken;
+                lg: import('./types.js').DesignToken;
+                xl: import('./types.js').DesignToken;
+                '2xl': import('./types.js').DesignToken;
+                '3xl': import('./types.js').DesignToken;
+                '4xl': import('./types.js').DesignToken;
+                '5xl': import('./types.js').DesignToken;
+            };
+            leading: {
+                none: import('./types.js').DesignToken;
+                tight: import('./types.js').DesignToken;
+                snug: import('./types.js').DesignToken;
+                normal: import('./types.js').DesignToken;
+                relaxed: import('./types.js').DesignToken;
+            };
+            tracking: {
+                tight: import('./types.js').DesignToken;
+                wide: import('./types.js').DesignToken;
+            };
+        };
+        radius: {
+            none: import('./types.js').DesignToken;
+            xs: import('./types.js').DesignToken;
+            sm: import('./types.js').DesignToken;
+            md: import('./types.js').DesignToken;
+            lg: import('./types.js').DesignToken;
+            xl: import('./types.js').DesignToken;
+            '2xl': import('./types.js').DesignToken;
+            full: import('./types.js').DesignToken;
+        };
+        shadow: {
+            xs: import('./types.js').DesignToken;
+            sm: import('./types.js').DesignToken;
+            md: import('./types.js').DesignToken;
+            lg: import('./types.js').DesignToken;
+            xl: import('./types.js').DesignToken;
+        };
+        duration: {
+            '0': import('./types.js').DesignToken;
+            '50': import('./types.js').DesignToken;
+            '100': import('./types.js').DesignToken;
+            '150': import('./types.js').DesignToken;
+            '200': import('./types.js').DesignToken;
+            '300': import('./types.js').DesignToken;
+            '400': import('./types.js').DesignToken;
+            '500': import('./types.js').DesignToken;
+            '700': import('./types.js').DesignToken;
+            '1000': import('./types.js').DesignToken;
+            '1500': import('./types.js').DesignToken;
+            '2000': import('./types.js').DesignToken;
+            '3000': import('./types.js').DesignToken;
+            '5000': import('./types.js').DesignToken;
+        };
+        ease: {
+            default: import('./types.js').DesignToken;
+            in: import('./types.js').DesignToken;
+            out: import('./types.js').DesignToken;
+            'in-out': import('./types.js').DesignToken;
+        };
+    };
+    semantic: {
+        color: {
+            surface: import('./types.js').DesignToken;
+            'surface-muted': import('./types.js').DesignToken;
+            'surface-raised': import('./types.js').DesignToken;
+            'surface-overlay': import('./types.js').DesignToken;
+            'surface-sunken': import('./types.js').DesignToken;
+            'surface-inverse': import('./types.js').DesignToken;
+            'surface-skeleton': import('./types.js').DesignToken;
+            'text-on-inverse': import('./types.js').DesignToken;
+            text: import('./types.js').DesignToken;
+            'text-muted': import('./types.js').DesignToken;
+            'text-subtle': import('./types.js').DesignToken;
+            'text-on-accent': import('./types.js').DesignToken;
+            'text-on-warning': import('./types.js').DesignToken;
+            border: import('./types.js').DesignToken;
+            'border-strong': import('./types.js').DesignToken;
+            accent: import('./types.js').DesignToken;
+            'accent-hover': import('./types.js').DesignToken;
+            'accent-active': import('./types.js').DesignToken;
+            'accent-surface': import('./types.js').DesignToken;
+            'accent-border': import('./types.js').DesignToken;
+            'accent-text': import('./types.js').DesignToken;
+            danger: import('./types.js').DesignToken;
+            'danger-hover': import('./types.js').DesignToken;
+            'danger-active': import('./types.js').DesignToken;
+            'danger-surface': import('./types.js').DesignToken;
+            'danger-border': import('./types.js').DesignToken;
+            'danger-text': import('./types.js').DesignToken;
+            success: import('./types.js').DesignToken;
+            'success-hover': import('./types.js').DesignToken;
+            'success-active': import('./types.js').DesignToken;
+            'success-surface': import('./types.js').DesignToken;
+            'success-border': import('./types.js').DesignToken;
+            'success-text': import('./types.js').DesignToken;
+            warning: import('./types.js').DesignToken;
+            'warning-hover': import('./types.js').DesignToken;
+            'warning-active': import('./types.js').DesignToken;
+            'warning-surface': import('./types.js').DesignToken;
+            'warning-border': import('./types.js').DesignToken;
+            'warning-text': import('./types.js').DesignToken;
+            backdrop: import('./types.js').DesignToken;
+            'event-surface': import('./types.js').DesignToken;
+            'event-border': import('./types.js').DesignToken;
+            'event-text': import('./types.js').DesignToken;
+        };
+        text: {
+            family: import('./types.js').DesignToken;
+            'family-heading': import('./types.js').DesignToken;
+            'family-code': import('./types.js').DesignToken;
+            display: {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+                tracking: import('./types.js').DesignToken;
+            };
+            'heading-1': {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+                tracking: import('./types.js').DesignToken;
+            };
+            'heading-2': {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+                tracking: import('./types.js').DesignToken;
+            };
+            'heading-3': {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+            };
+            'heading-4': {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+            };
+            subtitle: {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+            };
+            'body-xl': {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+            };
+            'body-lg': {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+            };
+            'body-md': {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+            };
+            'body-sm': {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+            };
+            label: {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+            };
+            caption: {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+            };
+            overline: {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+                tracking: import('./types.js').DesignToken;
+            };
+            code: {
+                size: import('./types.js').DesignToken;
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+            };
+            control: {
+                weight: import('./types.js').DesignToken;
+                leading: import('./types.js').DesignToken;
+            };
+        };
+        radius: {
+            interactive: import('./types.js').DesignToken;
+            surface: import('./types.js').DesignToken;
+            overlay: import('./types.js').DesignToken;
+            pill: import('./types.js').DesignToken;
+        };
+        duration: {
+            fast: import('./types.js').DesignToken;
+            base: import('./types.js').DesignToken;
+            slow: import('./types.js').DesignToken;
+        };
+        focus: {
+            'ring-color': import('./types.js').DesignToken;
+            'ring-width': import('./types.js').DesignToken;
+            'ring-offset': import('./types.js').DesignToken;
+        };
+        control: {
+            'height-xs': import('./types.js').DesignToken;
+            'height-sm': import('./types.js').DesignToken;
+            'height-md': import('./types.js').DesignToken;
+            'height-lg': import('./types.js').DesignToken;
+            'height-xl': import('./types.js').DesignToken;
+            'border-width': import('./types.js').DesignToken;
+            'size-check': import('./types.js').DesignToken;
+            'size-check-mark': import('./types.js').DesignToken;
+            'size-check-dot': import('./types.js').DesignToken;
+            'size-switch-w': import('./types.js').DesignToken;
+            'size-switch-h': import('./types.js').DesignToken;
+            'action-size-sm': import('./types.js').DesignToken;
+            'action-size-md': import('./types.js').DesignToken;
+            'action-size-lg': import('./types.js').DesignToken;
+            'size-slider-track': import('./types.js').DesignToken;
+            'size-slider-thumb': import('./types.js').DesignToken;
+            'size-slider-length': import('./types.js').DesignToken;
+            'size-slider-field': import('./types.js').DesignToken;
+            'size-carousel-block': import('./types.js').DesignToken;
+            'size-carousel-indicator': import('./types.js').DesignToken;
+            'size-carousel-indicator-active': import('./types.js').DesignToken;
+            'size-combobox-list-max-block': import('./types.js').DesignToken;
+            'size-menu-min': import('./types.js').DesignToken;
+            'size-menu-max': import('./types.js').DesignToken;
+            'size-progress-linear-thickness': import('./types.js').DesignToken;
+            'size-progress-linear-length': import('./types.js').DesignToken;
+            'size-progress-circular-diameter': import('./types.js').DesignToken;
+            'size-progress-circular-thickness': import('./types.js').DesignToken;
+            'size-skeleton-surface': import('./types.js').DesignToken;
+            'size-toast-width': import('./types.js').DesignToken;
+            'size-snackbar-min': import('./types.js').DesignToken;
+            'size-snackbar-max': import('./types.js').DesignToken;
+            'size-badge-h': import('./types.js').DesignToken;
+            'size-badge-dot': import('./types.js').DesignToken;
+            'size-avatar-ring': import('./types.js').DesignToken;
+            'size-date-picker-cell': import('./types.js').DesignToken;
+            'size-date-picker-dot': import('./types.js').DesignToken;
+            'size-date-picker-nav-min': import('./types.js').DesignToken;
+            'size-tab-indicator': import('./types.js').DesignToken;
+            'size-table-search': import('./types.js').DesignToken;
+            'size-time-picker-dial': import('./types.js').DesignToken;
+            'size-time-picker-number': import('./types.js').DesignToken;
+            'size-time-picker-center': import('./types.js').DesignToken;
+            'size-time-picker-hand': import('./types.js').DesignToken;
+            'size-time-picker-hand-minor': import('./types.js').DesignToken;
+            'size-time-input-list-max-block': import('./types.js').DesignToken;
+            'size-file-picker-min-block': import('./types.js').DesignToken;
+            'size-file-picker-icon': import('./types.js').DesignToken;
+            'size-file-picker-thumb': import('./types.js').DesignToken;
+            'size-calendar-hour': import('./types.js').DesignToken;
+            'size-calendar-gutter': import('./types.js').DesignToken;
+            'size-calendar-tick': import('./types.js').DesignToken;
+            'size-calendar-edge': import('./types.js').DesignToken;
+            'size-calendar-day-min': import('./types.js').DesignToken;
+            'size-calendar-handle': import('./types.js').DesignToken;
+            'size-calendar-allday-lane': import('./types.js').DesignToken;
+            'size-calendar-allday-max': import('./types.js').DesignToken;
+            'size-calendar-now-dot': import('./types.js').DesignToken;
+            'size-calendar-month-cell': import('./types.js').DesignToken;
+            'size-calendar-year-cell': import('./types.js').DesignToken;
+        };
+        icon: {
+            'size-sm': import('./types.js').DesignToken;
+            'size-md': import('./types.js').DesignToken;
+            'size-lg': import('./types.js').DesignToken;
+        };
+    };
+    themes: {
+        dark: {
+            color: {
+                surface: import('./types.js').DesignToken;
+                'surface-muted': import('./types.js').DesignToken;
+                'surface-raised': import('./types.js').DesignToken;
+                'surface-overlay': import('./types.js').DesignToken;
+                'surface-sunken': import('./types.js').DesignToken;
+                'surface-inverse': import('./types.js').DesignToken;
+                'surface-skeleton': import('./types.js').DesignToken;
+                'text-on-inverse': import('./types.js').DesignToken;
+                text: import('./types.js').DesignToken;
+                'text-muted': import('./types.js').DesignToken;
+                'text-subtle': import('./types.js').DesignToken;
+                'text-on-accent': import('./types.js').DesignToken;
+                border: import('./types.js').DesignToken;
+                'border-strong': import('./types.js').DesignToken;
+                accent: import('./types.js').DesignToken;
+                'accent-hover': import('./types.js').DesignToken;
+                'accent-active': import('./types.js').DesignToken;
+                'accent-surface': import('./types.js').DesignToken;
+                'accent-border': import('./types.js').DesignToken;
+                'accent-text': import('./types.js').DesignToken;
+                danger: import('./types.js').DesignToken;
+                'danger-hover': import('./types.js').DesignToken;
+                'danger-active': import('./types.js').DesignToken;
+                'danger-surface': import('./types.js').DesignToken;
+                'danger-border': import('./types.js').DesignToken;
+                'danger-text': import('./types.js').DesignToken;
+                success: import('./types.js').DesignToken;
+                'success-hover': import('./types.js').DesignToken;
+                'success-active': import('./types.js').DesignToken;
+                'success-surface': import('./types.js').DesignToken;
+                'success-border': import('./types.js').DesignToken;
+                'success-text': import('./types.js').DesignToken;
+                warning: import('./types.js').DesignToken;
+                'warning-hover': import('./types.js').DesignToken;
+                'warning-active': import('./types.js').DesignToken;
+                'warning-surface': import('./types.js').DesignToken;
+                'warning-border': import('./types.js').DesignToken;
+                'warning-text': import('./types.js').DesignToken;
+                backdrop: import('./types.js').DesignToken;
+                'event-surface': import('./types.js').DesignToken;
+                'event-border': import('./types.js').DesignToken;
+                'event-text': import('./types.js').DesignToken;
+            };
+            focus: {
+                'ring-color': import('./types.js').DesignToken;
+            };
+        };
+    };
+};
+export type Tokens = typeof tokens;

package/dist/tokens/index.js

@@ -0,0 +1,15 @@
+import { isToken as e } from "./types.js";
+import { primitives as t } from "./primitives.js";
+import { semantic as n } from "./semantic.js";
+import { dark as r } from "./themes/dark.js";
+import { flattenTokens as i, resolveTokenValue as a, toCssDeclarations as o } from "./css.js";
+//#region src/tokens/index.ts
+var s = {
+	primitives: t,
+	semantic: n,
+	themes: { dark: r }
+};
+//#endregion
+export { i as flattenTokens, e as isToken, a as resolveTokenValue, o as toCssDeclarations, s as tokens };
+
+//# sourceMappingURL=index.js.map

package/dist/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/tokens/index.ts"],"sourcesContent":["/**\n * What an application gets when it imports the design system's tokens: the tokens\n * themselves, exactly as the library defines them, and the means to turn them into CSS —\n * flattening the groups, following the references between tokens, writing the\n * declarations out.\n */\nimport { primitives } from './primitives'\nimport { semantic } from './semantic'\nimport { dark } from './themes/dark'\n\nexport type { DesignToken, TokenGroup, TokenType } from './types'\nexport { isToken } from './types'\nexport { flattenTokens, resolveTokenValue, toCssDeclarations, type FlatToken } from './css'\n\nexport const tokens = {\n  primitives,\n  semantic,\n  themes: { dark },\n}\n\nexport type Tokens = typeof tokens\n"],"mappings":";;;;;;AAcA,IAAa,IAAS;CACpB;CACA;CACA,QAAQ,EAAE,QAAK;AACjB"}

package/dist/tokens/primitives.d.ts

@@ -0,0 +1,101 @@
+import { TokenGroup } from './types.js';
+export declare const primitives: {
+    color: {
+        white: import('./types.js').DesignToken;
+        black: import('./types.js').DesignToken;
+        red: TokenGroup;
+        amber: TokenGroup;
+        green: TokenGroup;
+        indigo: TokenGroup;
+        gray: TokenGroup;
+    };
+    space: {
+        '1': import('./types.js').DesignToken;
+        '2': import('./types.js').DesignToken;
+        '3': import('./types.js').DesignToken;
+        '4': import('./types.js').DesignToken;
+        '5': import('./types.js').DesignToken;
+        '6': import('./types.js').DesignToken;
+        '7': import('./types.js').DesignToken;
+        '8': import('./types.js').DesignToken;
+        '9': import('./types.js').DesignToken;
+        '10': import('./types.js').DesignToken;
+        '11': import('./types.js').DesignToken;
+        '12': import('./types.js').DesignToken;
+    };
+    font: {
+        family: {
+            sans: import('./types.js').DesignToken;
+            display: import('./types.js').DesignToken;
+            mono: import('./types.js').DesignToken;
+            icon: import('./types.js').DesignToken;
+        };
+        weight: {
+            regular: import('./types.js').DesignToken;
+            medium: import('./types.js').DesignToken;
+            semibold: import('./types.js').DesignToken;
+            bold: import('./types.js').DesignToken;
+        };
+        size: {
+            xs: import('./types.js').DesignToken;
+            sm: import('./types.js').DesignToken;
+            md: import('./types.js').DesignToken;
+            lg: import('./types.js').DesignToken;
+            xl: import('./types.js').DesignToken;
+            '2xl': import('./types.js').DesignToken;
+            '3xl': import('./types.js').DesignToken;
+            '4xl': import('./types.js').DesignToken;
+            '5xl': import('./types.js').DesignToken;
+        };
+        leading: {
+            none: import('./types.js').DesignToken;
+            tight: import('./types.js').DesignToken;
+            snug: import('./types.js').DesignToken;
+            normal: import('./types.js').DesignToken;
+            relaxed: import('./types.js').DesignToken;
+        };
+        tracking: {
+            tight: import('./types.js').DesignToken;
+            wide: import('./types.js').DesignToken;
+        };
+    };
+    radius: {
+        none: import('./types.js').DesignToken;
+        xs: import('./types.js').DesignToken;
+        sm: import('./types.js').DesignToken;
+        md: import('./types.js').DesignToken;
+        lg: import('./types.js').DesignToken;
+        xl: import('./types.js').DesignToken;
+        '2xl': import('./types.js').DesignToken;
+        full: import('./types.js').DesignToken;
+    };
+    shadow: {
+        xs: import('./types.js').DesignToken;
+        sm: import('./types.js').DesignToken;
+        md: import('./types.js').DesignToken;
+        lg: import('./types.js').DesignToken;
+        xl: import('./types.js').DesignToken;
+    };
+    duration: {
+        '0': import('./types.js').DesignToken;
+        '50': import('./types.js').DesignToken;
+        '100': import('./types.js').DesignToken;
+        '150': import('./types.js').DesignToken;
+        '200': import('./types.js').DesignToken;
+        '300': import('./types.js').DesignToken;
+        '400': import('./types.js').DesignToken;
+        '500': import('./types.js').DesignToken;
+        '700': import('./types.js').DesignToken;
+        '1000': import('./types.js').DesignToken;
+        '1500': import('./types.js').DesignToken;
+        '2000': import('./types.js').DesignToken;
+        '3000': import('./types.js').DesignToken;
+        '5000': import('./types.js').DesignToken;
+    };
+    ease: {
+        default: import('./types.js').DesignToken;
+        in: import('./types.js').DesignToken;
+        out: import('./types.js').DesignToken;
+        'in-out': import('./types.js').DesignToken;
+    };
+};