@assure-one/design-system 1.32.0 → 1.33.0

package/dist/system-BDU18fVg.d.ts

@@ -0,0 +1,559 @@
+/**
+ * Reference tokens — raw palette.
+ *
+ * Programmatic access for theme switching, Figma sync, design tools, etc.
+ * Components should NOT consume these directly; use system tokens (./system.ts)
+ * or the CSS variables in ./tokens.css.
+ */
+declare const colors: {
+    readonly bg: "#ffffff";
+    readonly bg2: "#f1f3f8";
+    readonly bg3: "#e7eaf1";
+    readonly surface: "#ffffff";
+    readonly surface2: "#f7f8fc";
+    readonly fg: "#0a0a0a";
+    readonly fg2: "#38383b";
+    readonly fg3: "#5f5f64";
+    readonly fg4: "#6b6b70";
+    readonly fg5: "#9a9aa0";
+    readonly rule: "#e4e7ef";
+    readonly ruleSoft: "#eef0f5";
+    readonly ruleStrong: "#d3d8e3";
+    readonly accent: "#6c42f8";
+    readonly accent2: "#5127e8";
+    readonly accentTint: "#efeaff";
+    readonly accentHover: "#5e35f2";
+    readonly accentActive: "#5127e8";
+    readonly proBg: "#f4f1ff";
+    readonly proBgHover: "#eee9ff";
+    readonly proBgActive: "#e4ddff";
+    readonly proFg: "#6c42f8";
+    readonly proHover: "#5e35f2";
+    readonly proActive: "#5127e8";
+    readonly proDisabled: "#b7a7f3";
+    readonly proLine: "#7b5bd8";
+    readonly fgDisabled: "#a7a7ac";
+    readonly bgDisabled: "#f3f3f1";
+    readonly successFg: "#1f7a3d";
+    readonly successBg: "#eaf6ee";
+    readonly successLine: "#c5e5cf";
+    readonly warningFg: "#8a4606";
+    readonly warningBg: "#fff3e5";
+    readonly warningLine: "#f5d5a8";
+    readonly dangerFg: "#c43838";
+    readonly dangerBg: "#fbeaea";
+    readonly dangerLine: "#ecc5c5";
+    readonly fgOnAccent: "#ffffff";
+    readonly fgOnPro: "#ffffff";
+};
+declare const typography: {
+    readonly family: {
+        readonly display: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
+        readonly body: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
+        readonly mono: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
+    };
+    readonly weight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly ease: "cubic-bezier(0.2, 0.8, 0.2, 1)";
+};
+declare const radii: {
+    readonly btn: "7px";
+    readonly input: "7px";
+    readonly pill: "5px";
+    readonly card: "12px";
+    readonly icon: "4px";
+    readonly full: "9999px";
+};
+declare const shadows: {
+    readonly quiet: "0 1px 2px rgba(16, 20, 36, 0.05)";
+    readonly card: "0 1px 2px rgba(16, 20, 36, 0.04), 0 4px 12px -4px rgba(16, 20, 36, 0.08)";
+    readonly pop: "0 0 0 1px rgba(16, 20, 36, 0.03), 0 2px 4px -1px rgba(16, 20, 36, 0.06), 0 12px 28px -6px rgba(16, 20, 36, 0.14)";
+    readonly focusRing: "0 0 0 2px #ffffff, 0 0 0 4px #6c42f8";
+};
+declare const overlays: {
+    readonly hover: "rgba(10, 10, 10, 0.03)";
+    readonly active: "rgba(10, 10, 10, 0.05)";
+};
+declare const layout: {
+    readonly shellSidebarWidth: "200px";
+    readonly shellHeaderHeight: "56px";
+    readonly contentPad: "32px";
+};
+/**
+ * Spacing — 4px base scale. Components mostly use arbitrary values;
+ * this scale is exposed for programmatic access (e.g. design-tool sync).
+ */
+declare const spacing: {
+    readonly unit: "4px";
+    readonly 4: "4px";
+    readonly 8: "8px";
+    readonly 12: "12px";
+    readonly 16: "16px";
+    readonly 20: "20px";
+    readonly 24: "24px";
+    readonly 28: "28px";
+    readonly 32: "32px";
+    readonly 36: "36px";
+    readonly 40: "40px";
+    readonly 64: "64px";
+    readonly 80: "80px";
+    readonly 180: "180px";
+};
+/**
+ * Surface palette — the four canonical layers. Mirrors --color-bg / -2 /
+ * --color-surface / --color-surface-2.
+ */
+declare const surfaces: {
+    readonly bg: "#ffffff";
+    readonly bg2: "#f1f3f8";
+    readonly surface: "#ffffff";
+    readonly surface2: "#f7f8fc";
+};
+declare const motion: {
+    readonly ease: {
+        readonly outQuart: "cubic-bezier(0.2, 0.8, 0.2, 1)";
+        readonly out: "cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly in: "cubic-bezier(0.7, 0, 0.84, 0)";
+        readonly inOut: "cubic-bezier(0.65, 0, 0.35, 1)";
+    };
+    readonly duration: {
+        readonly instant: "100ms";
+        readonly fast: "150ms";
+        readonly normal: "250ms";
+        readonly slow: "400ms";
+    };
+};
+/**
+ * Icon boxes — the four sizes of target architecture §9.3. These are the boxes
+ * the library actually draws; `Icon`'s `size` prop maps onto them (W3-18).
+ */
+declare const iconSizes: {
+    readonly xs: "12px";
+    readonly sm: "14px";
+    readonly md: "16px";
+    readonly lg: "20px";
+};
+/**
+ * Global stacking layers — target architecture §21. Use them only for
+ * portalled surfaces and page chrome; anything else creates a local stacking
+ * context and uses small local integers.
+ *
+ * `popover` is the layer the CSS still spells `--z-dropdown`; the legacy name
+ * keeps working and resolves to the same value.
+ */
+declare const zIndex: {
+    readonly base: 0;
+    readonly sticky: 100;
+    readonly overlay: 200;
+    readonly modal: 300;
+    readonly popover: 400;
+    readonly toast: 500;
+    readonly tooltip: 600;
+};
+/**
+ * Breakpoints — Tailwind's defaults, restated so a media query built in JS
+ * (`useBreakpoint`, a chart's responsive config) reads the same numbers the
+ * `sm:`…`2xl:` variants do.
+ */
+declare const breakpoints: {
+    readonly sm: "40rem";
+    readonly md: "48rem";
+    readonly lg: "64rem";
+    readonly xl: "80rem";
+    readonly "2xl": "96rem";
+};
+declare const reference: {
+    readonly colors: {
+        readonly bg: "#ffffff";
+        readonly bg2: "#f1f3f8";
+        readonly bg3: "#e7eaf1";
+        readonly surface: "#ffffff";
+        readonly surface2: "#f7f8fc";
+        readonly fg: "#0a0a0a";
+        readonly fg2: "#38383b";
+        readonly fg3: "#5f5f64";
+        readonly fg4: "#6b6b70";
+        readonly fg5: "#9a9aa0";
+        readonly rule: "#e4e7ef";
+        readonly ruleSoft: "#eef0f5";
+        readonly ruleStrong: "#d3d8e3";
+        readonly accent: "#6c42f8";
+        readonly accent2: "#5127e8";
+        readonly accentTint: "#efeaff";
+        readonly accentHover: "#5e35f2";
+        readonly accentActive: "#5127e8";
+        readonly proBg: "#f4f1ff";
+        readonly proBgHover: "#eee9ff";
+        readonly proBgActive: "#e4ddff";
+        readonly proFg: "#6c42f8";
+        readonly proHover: "#5e35f2";
+        readonly proActive: "#5127e8";
+        readonly proDisabled: "#b7a7f3";
+        readonly proLine: "#7b5bd8";
+        readonly fgDisabled: "#a7a7ac";
+        readonly bgDisabled: "#f3f3f1";
+        readonly successFg: "#1f7a3d";
+        readonly successBg: "#eaf6ee";
+        readonly successLine: "#c5e5cf";
+        readonly warningFg: "#8a4606";
+        readonly warningBg: "#fff3e5";
+        readonly warningLine: "#f5d5a8";
+        readonly dangerFg: "#c43838";
+        readonly dangerBg: "#fbeaea";
+        readonly dangerLine: "#ecc5c5";
+        readonly fgOnAccent: "#ffffff";
+        readonly fgOnPro: "#ffffff";
+    };
+    readonly typography: {
+        readonly family: {
+            readonly display: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
+            readonly body: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
+            readonly mono: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
+        };
+        readonly weight: {
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+        };
+        readonly ease: "cubic-bezier(0.2, 0.8, 0.2, 1)";
+    };
+    readonly radii: {
+        readonly btn: "7px";
+        readonly input: "7px";
+        readonly pill: "5px";
+        readonly card: "12px";
+        readonly icon: "4px";
+        readonly full: "9999px";
+    };
+    readonly shadows: {
+        readonly quiet: "0 1px 2px rgba(16, 20, 36, 0.05)";
+        readonly card: "0 1px 2px rgba(16, 20, 36, 0.04), 0 4px 12px -4px rgba(16, 20, 36, 0.08)";
+        readonly pop: "0 0 0 1px rgba(16, 20, 36, 0.03), 0 2px 4px -1px rgba(16, 20, 36, 0.06), 0 12px 28px -6px rgba(16, 20, 36, 0.14)";
+        readonly focusRing: "0 0 0 2px #ffffff, 0 0 0 4px #6c42f8";
+    };
+    readonly overlays: {
+        readonly hover: "rgba(10, 10, 10, 0.03)";
+        readonly active: "rgba(10, 10, 10, 0.05)";
+    };
+    readonly layout: {
+        readonly shellSidebarWidth: "200px";
+        readonly shellHeaderHeight: "56px";
+        readonly contentPad: "32px";
+    };
+    readonly motion: {
+        readonly ease: {
+            readonly outQuart: "cubic-bezier(0.2, 0.8, 0.2, 1)";
+            readonly out: "cubic-bezier(0.16, 1, 0.3, 1)";
+            readonly in: "cubic-bezier(0.7, 0, 0.84, 0)";
+            readonly inOut: "cubic-bezier(0.65, 0, 0.35, 1)";
+        };
+        readonly duration: {
+            readonly instant: "100ms";
+            readonly fast: "150ms";
+            readonly normal: "250ms";
+            readonly slow: "400ms";
+        };
+    };
+    readonly spacing: {
+        readonly unit: "4px";
+        readonly 4: "4px";
+        readonly 8: "8px";
+        readonly 12: "12px";
+        readonly 16: "16px";
+        readonly 20: "20px";
+        readonly 24: "24px";
+        readonly 28: "28px";
+        readonly 32: "32px";
+        readonly 36: "36px";
+        readonly 40: "40px";
+        readonly 64: "64px";
+        readonly 80: "80px";
+        readonly 180: "180px";
+    };
+    readonly surfaces: {
+        readonly bg: "#ffffff";
+        readonly bg2: "#f1f3f8";
+        readonly surface: "#ffffff";
+        readonly surface2: "#f7f8fc";
+    };
+    readonly iconSizes: {
+        readonly xs: "12px";
+        readonly sm: "14px";
+        readonly md: "16px";
+        readonly lg: "20px";
+    };
+    readonly zIndex: {
+        readonly base: 0;
+        readonly sticky: 100;
+        readonly overlay: 200;
+        readonly modal: 300;
+        readonly popover: 400;
+        readonly toast: 500;
+        readonly tooltip: 600;
+    };
+    readonly breakpoints: {
+        readonly sm: "40rem";
+        readonly md: "48rem";
+        readonly lg: "64rem";
+        readonly xl: "80rem";
+        readonly "2xl": "96rem";
+    };
+};
+type ReferenceTokens = typeof reference;
+type ColorName = keyof typeof colors;
+
+/**
+ * System tokens — suite semantic mappings as CSS variable references.
+ *
+ * Use these from JS (e.g. inline styles, Storybook decorators, motion configs)
+ * when you can't use a Tailwind utility class. Component CSS should prefer the
+ * generated utilities (`bg-bg`, `text-fg-2`, `border-rule`, `bg-pro-fg`, etc.)
+ * which Tailwind 4 emits from `--color-*` tokens declared in ./tokens.css.
+ *
+ * Themes (.dark) re-map the underlying CSS variables; these references stay valid.
+ */
+declare const systemTokens: {
+    readonly color: {
+        readonly bg: "var(--color-bg)";
+        readonly bg2: "var(--color-bg-2)";
+        readonly bg3: "var(--color-bg-3)";
+        readonly surface: "var(--color-surface)";
+        readonly surface2: "var(--color-surface-2)";
+        readonly fg: "var(--color-fg)";
+        readonly fg2: "var(--color-fg-2)";
+        readonly fg3: "var(--color-fg-3)";
+        readonly fg4: "var(--color-fg-4)";
+        readonly fg5: "var(--color-fg-5)";
+        readonly rule: "var(--color-rule)";
+        readonly ruleSoft: "var(--color-rule-soft)";
+        readonly ruleStrong: "var(--color-rule-strong)";
+        readonly accent: "var(--color-accent)";
+        readonly accent2: "var(--color-accent-2)";
+        readonly accentTint: "var(--color-accent-tint)";
+        readonly accentHover: "var(--color-accent-hover)";
+        readonly accentActive: "var(--color-accent-active)";
+        readonly accentRing: "var(--color-accent-ring)";
+        readonly suiteAction: "var(--color-suite-action)";
+        readonly suiteActionHover: "var(--color-suite-action-hover)";
+        readonly suiteActionActive: "var(--color-suite-action-active)";
+        readonly fgOnSuiteAction: "var(--color-fg-on-suite-action)";
+        readonly brand: "var(--color-brand)";
+        readonly brandHover: "var(--color-brand-hover)";
+        readonly brandActive: "var(--color-brand-active)";
+        readonly brandDisabled: "var(--color-brand-disabled)";
+        readonly brandBg: "var(--color-brand-bg)";
+        readonly brandBgHover: "var(--color-brand-bg-hover)";
+        readonly brandBgActive: "var(--color-brand-bg-active)";
+        readonly brandLine: "var(--color-brand-line)";
+        readonly brandRing: "var(--color-brand-ring)";
+        readonly fgOnBrand: "var(--color-fg-on-brand)";
+        readonly proBg: "var(--color-pro-bg)";
+        readonly proBgHover: "var(--color-pro-bg-hover)";
+        readonly proBgActive: "var(--color-pro-bg-active)";
+        readonly proFg: "var(--color-pro-fg)";
+        readonly proHover: "var(--color-pro-hover)";
+        readonly proActive: "var(--color-pro-active)";
+        readonly proDisabled: "var(--color-pro-disabled)";
+        readonly proLine: "var(--color-pro-line)";
+        readonly proRing: "var(--color-pro-ring)";
+        readonly auditFg: "var(--color-audit-fg)";
+        readonly auditHover: "var(--color-audit-hover)";
+        readonly auditActive: "var(--color-audit-active)";
+        readonly auditDisabled: "var(--color-audit-disabled)";
+        readonly auditBg: "var(--color-audit-bg)";
+        readonly auditBgHover: "var(--color-audit-bg-hover)";
+        readonly auditBgActive: "var(--color-audit-bg-active)";
+        readonly auditLine: "var(--color-audit-line)";
+        readonly auditRing: "var(--color-audit-ring)";
+        readonly booksFg: "var(--color-books-fg)";
+        readonly booksHover: "var(--color-books-hover)";
+        readonly booksActive: "var(--color-books-active)";
+        readonly booksDisabled: "var(--color-books-disabled)";
+        readonly booksBg: "var(--color-books-bg)";
+        readonly booksBgHover: "var(--color-books-bg-hover)";
+        readonly booksBgActive: "var(--color-books-bg-active)";
+        readonly booksLine: "var(--color-books-line)";
+        readonly booksRing: "var(--color-books-ring)";
+        readonly taxFg: "var(--color-tax-fg)";
+        readonly taxHover: "var(--color-tax-hover)";
+        readonly taxActive: "var(--color-tax-active)";
+        readonly taxDisabled: "var(--color-tax-disabled)";
+        readonly taxBg: "var(--color-tax-bg)";
+        readonly taxBgHover: "var(--color-tax-bg-hover)";
+        readonly taxBgActive: "var(--color-tax-bg-active)";
+        readonly taxLine: "var(--color-tax-line)";
+        readonly taxRing: "var(--color-tax-ring)";
+        readonly fgOnAccent: "var(--color-fg-on-accent)";
+        readonly fgOnPro: "var(--color-fg-on-pro)";
+        readonly fgOnAudit: "var(--color-fg-on-audit)";
+        readonly fgOnBooks: "var(--color-fg-on-books)";
+        readonly fgOnTax: "var(--color-fg-on-tax)";
+        readonly fgDisabled: "var(--color-fg-disabled)";
+        readonly bgDisabled: "var(--color-bg-disabled)";
+        readonly overlayHover: "var(--color-overlay-hover)";
+        readonly overlayActive: "var(--color-overlay-active)";
+        readonly successFg: "var(--color-success-fg)";
+        readonly successBg: "var(--color-success-bg)";
+        readonly successLine: "var(--color-success-line)";
+        readonly warningFg: "var(--color-warning-fg)";
+        readonly warningBg: "var(--color-warning-bg)";
+        readonly warningLine: "var(--color-warning-line)";
+        readonly dangerFg: "var(--color-danger-fg)";
+        readonly dangerBg: "var(--color-danger-bg)";
+        readonly dangerLine: "var(--color-danger-line)";
+        readonly chart1: "var(--color-chart-1)";
+        readonly chart2: "var(--color-chart-2)";
+        readonly chart3: "var(--color-chart-3)";
+        readonly chart4: "var(--color-chart-4)";
+        readonly chartLine: "var(--color-chart-line)";
+        readonly chartAreaFrom: "var(--color-chart-area-from)";
+        readonly chartAreaTo: "var(--color-chart-area-to)";
+        readonly serviceTax: "var(--color-service-tax)";
+        readonly serviceTaxBg: "var(--color-service-tax-bg)";
+        readonly serviceAudit: "var(--color-service-audit)";
+        readonly serviceAuditBg: "var(--color-service-audit-bg)";
+        readonly serviceAccounting: "var(--color-service-accounting)";
+        readonly serviceAccountingBg: "var(--color-service-accounting-bg)";
+    };
+    /** Ordered chart series ramp — index a series by position, cycle with `% 4`. */
+    readonly chart: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)"];
+    readonly gradient: {
+        readonly brand: "var(--gradient-brand)";
+        readonly pro: "var(--gradient-pro)";
+        readonly audit: "var(--gradient-audit)";
+        readonly books: "var(--gradient-books)";
+        readonly tax: "var(--gradient-tax)";
+    };
+    readonly shadow: {
+        readonly quiet: "var(--shadow-quiet)";
+        readonly card: "var(--shadow-card)";
+        readonly pop: "var(--shadow-pop)";
+        readonly focusRing: "var(--shadow-focus-ring)";
+        readonly xs: "var(--shadow-xs)";
+        readonly sm: "var(--shadow-sm)";
+        readonly md: "var(--shadow-md)";
+        readonly lg: "var(--shadow-lg)";
+        readonly xl: "var(--shadow-xl)";
+        readonly "2xl": "var(--shadow-2xl)";
+    };
+    readonly radius: {
+        readonly btn: "var(--radius-btn)";
+        readonly input: "var(--radius-input)";
+        readonly pill: "var(--radius-pill)";
+        readonly card: "var(--radius-card)";
+        readonly icon: "var(--radius-icon)";
+        readonly full: "var(--radius-full)";
+    };
+    readonly type: {
+        readonly family: {
+            readonly display: "var(--font-display)";
+            readonly body: "var(--font-body)";
+            readonly mono: "var(--font-mono)";
+        };
+        readonly weight: {
+            readonly regular: "var(--font-weight-regular)";
+            readonly medium: "var(--font-weight-medium)";
+            readonly semibold: "var(--font-weight-semibold)";
+            readonly bold: "var(--font-weight-bold)";
+        };
+    };
+    readonly motion: {
+        readonly ease: {
+            readonly outQuart: "var(--ease-out-quart)";
+            readonly out: "var(--ease-out)";
+            readonly in: "var(--ease-in)";
+            readonly inOut: "var(--ease-in-out)";
+        };
+        readonly duration: {
+            readonly instant: "var(--duration-instant)";
+            readonly fast: "var(--duration-fast)";
+            readonly normal: "var(--duration-normal)";
+            readonly slow: "var(--duration-slow)";
+        };
+        readonly semantic: {
+            readonly duration: {
+                readonly press: "var(--motion-duration-press)";
+                readonly feedback: "var(--motion-duration-feedback)";
+                readonly overlay: "var(--motion-duration-overlay)";
+                readonly spatial: "var(--motion-duration-spatial)";
+                readonly deliberate: "var(--motion-duration-deliberate)";
+            };
+            readonly ease: {
+                readonly enter: "var(--motion-ease-enter)";
+                readonly exit: "var(--motion-ease-exit)";
+                readonly move: "var(--motion-ease-move)";
+            };
+        };
+    };
+    /**
+     * Control sizing (amendment A1, W2-03). One outer height per size name, with
+     * the padding, gap, label size and glyph size derived from it.
+     *
+     * **Nothing reads these yet** and the numbers are gated on decision D5
+     * (implementation plan §3) — what each control renders *today* is in
+     * `docs/design-system/control-sizes.md`, and W2-05 is the task that unifies
+     * them. Referencing the scale here is also what keeps the custom properties
+     * in the published stylesheet, so `[data-ds-density="compact"]` has something
+     * to re-point.
+     */
+    readonly control: {
+        readonly height: {
+            readonly xs: "var(--control-height-xs)";
+            readonly sm: "var(--control-height-sm)";
+            readonly md: "var(--control-height-md)";
+            readonly lg: "var(--control-height-lg)";
+            readonly xl: "var(--control-height-xl)";
+        };
+        readonly paddingX: {
+            readonly xs: "var(--control-padding-x-xs)";
+            readonly sm: "var(--control-padding-x-sm)";
+            readonly md: "var(--control-padding-x-md)";
+            readonly lg: "var(--control-padding-x-lg)";
+            readonly xl: "var(--control-padding-x-xl)";
+        };
+        readonly gap: {
+            readonly xs: "var(--control-gap-xs)";
+            readonly sm: "var(--control-gap-sm)";
+            readonly md: "var(--control-gap-md)";
+            readonly lg: "var(--control-gap-lg)";
+            readonly xl: "var(--control-gap-xl)";
+        };
+        readonly fontSize: {
+            readonly xs: "var(--control-font-size-xs)";
+            readonly sm: "var(--control-font-size-sm)";
+            readonly md: "var(--control-font-size-md)";
+            readonly lg: "var(--control-font-size-lg)";
+            readonly xl: "var(--control-font-size-xl)";
+        };
+        readonly icon: {
+            readonly xs: "var(--control-icon-xs)";
+            readonly sm: "var(--control-icon-sm)";
+            readonly md: "var(--control-icon-md)";
+            readonly lg: "var(--control-icon-lg)";
+            readonly xl: "var(--control-icon-xl)";
+        };
+    };
+    readonly layout: {
+        readonly shellSidebarWidth: "var(--shell-sidebar-w)";
+        readonly shellSidebarRailWidth: "var(--shell-sidebar-w-rail)";
+        readonly shellHeaderHeight: "var(--shell-header-h)";
+        readonly contentPad: "var(--content-pad)";
+    };
+    readonly z: {
+        readonly base: "var(--z-base)";
+        readonly dropdown: "var(--z-dropdown)";
+        readonly sticky: "var(--z-sticky)";
+        readonly overlay: "var(--z-overlay)";
+        readonly modal: "var(--z-modal)";
+        readonly toast: "var(--z-toast)";
+        readonly tooltip: "var(--z-tooltip)";
+    };
+};
+type SystemTokens = typeof systemTokens;
+
+export { type ColorName as C, type ReferenceTokens as R, type SystemTokens as S, reference as a, spacing as b, colors as c, surfaces as d, systemTokens as e, breakpoints as f, iconSizes as i, layout as l, motion as m, overlays as o, radii as r, shadows as s, typography as t, zIndex as z };