squarex-ui-component-lib 1.0.4 → 1.0.5

package/dist/tokens/index.d.ts

@@ -0,0 +1,1646 @@
+/**
+ * SquareX Design Tokens
+ *
+ * A comprehensive design token system following industry standards.
+ *
+ * ## Architecture
+ *
+ * 1. **Core Tokens** (primitives) - Raw values, not meant for direct use in components
+ * 2. **Semantic Tokens** - Context-aware tokens that reference core values
+ * 3. **Themes** - Complete token sets for different color schemes
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { tokens } from '@/tokens';
+ *
+ * const Button = styled.button`
+ *   background-color: ${tokens.color.background.brand.default};
+ *   color: ${tokens.color.text.brand.onBrand};
+ *   padding: ${tokens.spacing.md}px ${tokens.spacing.lg}px;
+ *   border-radius: ${tokens.radius.md}px;
+ *   font-size: ${tokens.typography.body.m.regular.fontSize}px;
+ *   transition: ${tokens.transition.base};
+ *
+ *   &:hover {
+ *     background-color: ${tokens.color.background.brand.hover};
+ *   }
+ * `;
+ * ```
+ *
+ * @module tokens
+ */
+import { lightTheme, darkTheme } from './themes';
+/**
+ * Main token object - use this in your components
+ */
+export declare const tokens: {
+    readonly color: {
+        readonly background: {
+            readonly brand: {
+                readonly default: "#8851bf";
+                readonly secondary: "#b897d9";
+                readonly tertiary: "#dbcbec";
+                readonly hover: "#6d4199";
+                readonly secondaryHover: "#a074cc";
+                readonly tertiaryHover: "#cfb9e5";
+                readonly subtleLow: "rgba(136, 81, 191, 0.08)";
+                readonly subtleMedium: "rgba(136, 81, 191, 0.08)";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#dad6f2";
+                readonly hover: "#695bcc";
+                readonly secondaryHover: "#695bcc";
+                readonly tertiaryHover: "#c7c1ec";
+                readonly subtleLow: "rgba(68, 50, 191, 0.08)";
+                readonly subtleMedium: "rgba(68, 50, 191, 0.08)";
+            };
+            readonly success: {
+                readonly default: "#14ae5c";
+                readonly secondary: "#a1dfbe";
+                readonly tertiary: "#e7f7ef";
+                readonly hover: "#108b4a";
+                readonly secondaryHover: "#72ce9d";
+                readonly tertiaryHover: "#a1dfbe";
+                readonly subtleLow: "#a1dfbe";
+                readonly subtleMedium: "#a1dfbe";
+            };
+            readonly warning: {
+                readonly default: "#faca0a";
+                readonly secondary: "#fcdf6c";
+                readonly tertiary: "#fdefb5";
+                readonly hover: "#c8a208";
+                readonly secondaryHover: "#fbd53b";
+                readonly tertiaryHover: "#fdea9d";
+                readonly subtleLow: "#fdea9d";
+                readonly subtleMedium: "#fdea9d";
+            };
+            readonly danger: {
+                readonly default: "#f04e4c";
+                readonly secondary: "#f7a7a5";
+                readonly tertiary: "#fde9e9";
+                readonly hover: "#bd1b19";
+                readonly secondaryHover: "#f47a79";
+                readonly tertiaryHover: "#f9bdbc";
+                readonly subtleLow: "rgba(236, 34, 31, 0.08)";
+                readonly subtleMedium: "rgba(236, 34, 31, 0.08)";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#cee8fd";
+                readonly hover: "#0a70c4";
+                readonly secondaryHover: "#3da3f7";
+                readonly tertiaryHover: "#9ed1fb";
+                readonly subtleLow: "#9ed1fb";
+                readonly subtleMedium: "#9ed1fb";
+            };
+            readonly neutral: {
+                readonly default: "#768494";
+                readonly secondary: "#adb5bf";
+                readonly tertiary: "#e4e6ea";
+                readonly hover: "#5e6a76";
+                readonly secondaryHover: "#919da9";
+                readonly tertiaryHover: "#c8ced4";
+                readonly subtleLow: "rgba(118, 132, 148, 0.08)";
+                readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+            };
+            readonly default: {
+                readonly default: "#f1f3f4";
+                readonly hover: "#e4e6ea";
+                readonly glass: "rgba(255, 255, 255, 0.30)";
+                readonly onGlass: "rgba(255, 255, 255, 0.60)";
+                readonly onGlassSecondary: "rgba(255, 255, 255, 0.70)";
+                readonly onGlassTertiary: "rgba(255, 255, 255, 0.80)";
+                readonly onGlassHover: "rgba(255, 255, 255, 0.80)";
+            };
+            readonly disabled: {
+                readonly default: "#dbdbdb";
+                readonly secondary: "#ededed";
+            };
+            readonly utilities: {
+                readonly scrim: "rgba(255, 255, 255, 0.7)";
+                readonly overlay: "rgba(0, 0, 0, 0.5)";
+                readonly blanket: "rgba(0, 0, 0, 0.7)";
+                readonly bgOnGlass: "rgba(255, 255, 255, 0.45)";
+                readonly bgOnGlassOnGlass: "rgba(255, 255, 255, 0.6)";
+                readonly hoverOverlay: "rgba(0, 0, 0, 0.2)";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+            };
+            readonly brand: {
+                readonly default: "#8851bf";
+                readonly secondary: "#b897d9";
+                readonly tertiary: "#dbcbec";
+                readonly onBrand: "#f3eef9";
+                readonly onBrandSecondary: "#36204c";
+                readonly onBrandTertiary: "#6d4199";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#c7c1ec";
+                readonly onAction: "#eceaf9";
+                readonly onActionSecondary: "#291e73";
+                readonly onActionTertiary: "#362899";
+            };
+            readonly success: {
+                readonly default: "#084625";
+                readonly secondary: "#108b4a";
+                readonly tertiary: "#14ae5c";
+                readonly onSuccess: "#e7f7ef";
+                readonly onSuccessSecondary: "#0c6837";
+                readonly onSuccessTertiary: "#084625";
+            };
+            readonly warning: {
+                readonly default: "#4b3d03";
+                readonly secondary: "#967906";
+                readonly tertiary: "#c8a208";
+                readonly onWarning: "#4b3d03";
+                readonly onWarningSecondary: "#645104";
+                readonly onWarningTertiary: "#967906";
+            };
+            readonly danger: {
+                readonly default: "#ec221f";
+                readonly secondary: "#f04e4c";
+                readonly tertiary: "#f47a79";
+                readonly onDanger: "#fde9e9";
+                readonly onDangerSecondary: "#5e0e0c";
+                readonly onDangerTertiary: "#bd1b19";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#b6ddfc";
+                readonly onInfo: "#e7f3fe";
+                readonly onInfoSecondary: "#053862";
+                readonly onInfoTertiary: "#0a70c4";
+            };
+            readonly neutral: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+                readonly onNeutral: "#f1f3f4";
+                readonly onNeutralSecondary: "#2f353b";
+                readonly onNeutralTertiary: "#5e6a76";
+            };
+            readonly disabled: {
+                readonly default: "#b8b8b8";
+                readonly secondary: "#cacaca";
+                readonly onDisabled: "#a6a6a6";
+                readonly onDisabledSecondary: "#cacaca";
+            };
+            readonly utilities: {
+                readonly onOverlay: "rgba(12, 12, 13, 1.00)";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly default: "#ffffff";
+                readonly secondary: "#d6dadf";
+                readonly tertiary: "#768494";
+                readonly subtleLow: "rgba(255, 255, 255, 0.80)";
+                readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+                readonly subtleHigh: "rgba(255, 255, 255, 0.40)";
+            };
+            readonly brand: {
+                readonly default: "#cfb9e5";
+                readonly secondary: "#b897d9";
+                readonly tertiary: "#dbcbec";
+                readonly onBrand: "#f3eef9";
+                readonly onBrandSecondary: "#36204c";
+                readonly onBrandTertiary: "#6d4199";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#c7c1ec";
+                readonly onAction: "#eceaf9";
+                readonly onActionSecondary: "#362899";
+                readonly onActionTertiary: "#1b144c";
+            };
+            readonly success: {
+                readonly default: "#084625";
+                readonly secondary: "#108b4a";
+                readonly tertiary: "#14ae5c";
+            };
+            readonly warning: {
+                readonly default: "#645104";
+                readonly secondary: "#c8a208";
+                readonly tertiary: "#faca0a";
+            };
+            readonly danger: {
+                readonly default: "#ec221f";
+                readonly secondary: "#f47a79";
+                readonly tertiary: "#fbd3d2";
+                readonly onDanger: "#bd1b19";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#b6ddfc";
+            };
+            readonly neutral: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#c8ced4";
+                readonly onNeutral: "#f1f3f4";
+                readonly onNeutralSecondary: "#474f59";
+                readonly onNeutralTertiary: "#5e6a76";
+            };
+            readonly disabled: {
+                readonly default: "#b8b8b8";
+            };
+            readonly utilities: {
+                readonly swatch: "rgba(0, 0, 0, 0.24)";
+            };
+        };
+        readonly icon: {
+            readonly default: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+            };
+            readonly brand: {
+                readonly default: "#36204c";
+                readonly secondary: "#6d4199";
+                readonly tertiary: "#8851bf";
+                readonly onBrand: "#f3eef9";
+                readonly onBrandSecondary: "#36204c";
+                readonly onBrandTertiary: "#6d4199";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#c7c1ec";
+                readonly onAction: "#eceaf9";
+                readonly onActionSecondary: "#291e73";
+                readonly onActionTertiary: "#362899";
+            };
+            readonly success: {
+                readonly default: "#14ae5c";
+                readonly secondary: "#a1dfbe";
+                readonly tertiary: "#d0efde";
+                readonly onSuccess: "#e7f7ef";
+                readonly onSuccessSecondary: "#0c6837";
+                readonly onSuccessTertiary: "#084625";
+            };
+            readonly warning: {
+                readonly default: "#faca0a";
+                readonly secondary: "#fcdf6c";
+                readonly tertiary: "#fdefb5";
+                readonly onWarning: "#191401";
+                readonly onWarningSecondary: "#645104";
+                readonly onWarningTertiary: "#4b3d03";
+            };
+            readonly danger: {
+                readonly default: "#ec221f";
+                readonly secondary: "#f04e4c";
+                readonly tertiary: "#f47a79";
+                readonly onDanger: "#fde9e9";
+                readonly onDangerSecondary: "#8e1413";
+                readonly onDangerTertiary: "#5e0e0c";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#b6ddfc";
+                readonly onInfo: "#010e19";
+                readonly onInfoSecondary: "#053862";
+                readonly onInfoTertiary: "#042a4a";
+            };
+            readonly neutral: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+                readonly onNeutral: "#f1f3f4";
+                readonly onNeutralSecondary: "#474f59";
+                readonly onNeutralTertiary: "#5e6a76";
+            };
+            readonly disabled: {
+                readonly default: "#b8b8b8";
+                readonly secondary: "#cacaca";
+                readonly onDisabled: "#a6a6a6";
+                readonly onDisabledSecondary: "#cacaca";
+            };
+            readonly utilities: {
+                readonly onOverlay: "rgba(12, 12, 13, 1.00)";
+            };
+        };
+    };
+    readonly typography: {
+        readonly heroTitle: {
+            readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+            readonly fontSize: 40;
+            readonly fontWeight: 700;
+            readonly lineHeight: 1.25;
+            readonly letterSpacing: "-0.01em";
+        };
+        readonly titlePage: {
+            readonly small: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 20;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.25;
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly base: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 24;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.25;
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly large: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 28;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.25;
+                readonly letterSpacing: "-0.01em";
+            };
+        };
+        readonly heading: {
+            readonly small: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 16;
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly base: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 18;
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly large: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 20;
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+        };
+        readonly subheading: {
+            readonly small: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 14;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly base: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 16;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly large: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 18;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+        };
+        readonly subtitle: {
+            readonly small: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 18;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly base: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 20;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly large: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 24;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+        };
+        readonly body: {
+            readonly xs: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 12;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.5;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 12;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.5;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly s: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 13;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 13;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly m: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 14;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 14;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly l: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 16;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 16;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+            };
+        };
+        readonly singleLine: {
+            readonly xxs: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 11;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 11;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly xs: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 12;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 12;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly s: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 13;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 13;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly m: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 14;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 14;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly l: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 16;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 16;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+            };
+        };
+        readonly code: {
+            readonly fontFamily: "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+            readonly fontSize: 13;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.75;
+            readonly letterSpacing: "0";
+        };
+    };
+    readonly spacing: {
+        readonly 0: 0;
+        readonly 50: 2;
+        readonly 100: 4;
+        readonly 150: 6;
+        readonly 200: 8;
+        readonly 300: 12;
+        readonly 400: 16;
+        readonly 500: 20;
+        readonly 600: 24;
+        readonly 800: 32;
+        readonly 1200: 48;
+        readonly 1600: 64;
+        readonly 2400: 96;
+        readonly 4000: 160;
+        readonly '-100': -4;
+        readonly '-200': -8;
+        readonly '-300': -12;
+        readonly '-400': -16;
+        readonly '-600': -24;
+    };
+    readonly radius: {
+        readonly none: 0;
+        readonly sm: 4;
+        readonly md: 8;
+        readonly lg: 12;
+        readonly xl: 16;
+        readonly full: 9999;
+    };
+    readonly borderWidth: {
+        readonly none: 0;
+        readonly thin: 1;
+        readonly medium: 1.5;
+        readonly thick: 2;
+    };
+    readonly depth: {
+        readonly 0: 0;
+        readonly 25: 1;
+        readonly 100: 4;
+        readonly 200: 8;
+        readonly 400: 16;
+        readonly 800: 32;
+        readonly 1200: 48;
+        readonly '-25': -1;
+        readonly '-100': -4;
+        readonly '-200': -8;
+        readonly '-400': -16;
+        readonly '-800': -32;
+        readonly '-1200': -48;
+    };
+    readonly iconSize: {
+        readonly sm: 24;
+        readonly md: 32;
+        readonly lg: 40;
+    };
+    readonly shadow: {
+        readonly xs: `0 1px ${number}px rgba(0, 0, 0, 0.1)`;
+        readonly sm: `0 2px ${number}px rgba(0, 0, 0, 0.12)`;
+        readonly md: `0 4px ${number}px rgba(0, 0, 0, 0.15)`;
+        readonly lg: `0 8px ${number}px rgba(0, 0, 0, 0.18)`;
+        readonly xl: `0 16px ${number}px rgba(0, 0, 0, 0.20)`;
+        readonly none: "none";
+    };
+    readonly blur: {
+        readonly none: "blur(0px)";
+        readonly soft: "blur(2px)";
+        readonly light: "blur(4px)";
+        readonly medium: "blur(8px)";
+        readonly heavy: "blur(12px)";
+        readonly intense: "blur(24px)";
+    };
+    readonly transition: {
+        readonly fast: "150ms ease-in-out";
+        readonly base: "250ms ease-in-out";
+        readonly slow: "350ms ease-in-out";
+        readonly verySlow: "500ms ease-in-out";
+    };
+    readonly duration: {
+        readonly instant: 100;
+        readonly fast: 150;
+        readonly base: 250;
+        readonly slow: 350;
+        readonly verySlow: 500;
+    };
+    readonly easing: {
+        readonly linear: "linear";
+        readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly spring: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+    };
+    readonly breakpoint: {
+        readonly mobile: 375;
+        readonly tablet: 768;
+        readonly desktop: 1200;
+        readonly wide: 1440;
+    };
+    readonly media: {
+        readonly mobile: "@media (min-width: 375px)";
+        readonly tablet: "@media (min-width: 768px)";
+        readonly desktop: "@media (min-width: 1200px)";
+        readonly wide: "@media (min-width: 1440px)";
+    };
+    readonly fontFamily: {
+        readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+        readonly mono: "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+    };
+    readonly fontWeight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly fontSize: {
+        readonly scale01: 11;
+        readonly scale02: 12;
+        readonly scale03: 13;
+        readonly scale04: 14;
+        readonly scale05: 16;
+        readonly scale06: 18;
+        readonly scale07: 20;
+        readonly scale08: 24;
+        readonly scale09: 28;
+        readonly scale10: 32;
+        readonly scale11: 40;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.25;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+    readonly letterSpacing: {
+        readonly tight: "-0.01em";
+        readonly normal: "0";
+        readonly wide: "0.01em";
+    };
+    readonly fontStyle: {
+        readonly normal: "normal";
+        readonly italic: "italic";
+    };
+};
+/**
+ * Core primitives - use with caution
+ * Prefer semantic tokens from `tokens` object
+ */
+export declare const primitives: {
+    readonly colors: {
+        readonly gray: {
+            readonly 50: "#f6f6f6";
+            readonly 100: "#ededed";
+            readonly 150: "#e4e4e4";
+            readonly 200: "#dbdbdb";
+            readonly 300: "#cacaca";
+            readonly 400: "#b8b8b8";
+            readonly 500: "#a6a6a6";
+            readonly 600: "#858585";
+            readonly 700: "#646464";
+            readonly 800: "#424242";
+            readonly 900: "#323232";
+            readonly 950: "#212121";
+            readonly 1000: "#111111";
+        };
+        readonly purple: {
+            readonly 50: "#f3eef9";
+            readonly 100: "#e7dcf2";
+            readonly 150: "#dbcbec";
+            readonly 200: "#cfb9e5";
+            readonly 300: "#b897d9";
+            readonly 400: "#a074cc";
+            readonly 500: "#8851bf";
+            readonly 600: "#6d4199";
+            readonly 700: "#523173";
+            readonly 800: "#36204c";
+            readonly 900: "#291839";
+            readonly 950: "#1b1026";
+            readonly 1000: "#0e0813";
+        };
+        readonly violet: {
+            readonly 50: "#eceaf9";
+            readonly 100: "#dad6f2";
+            readonly 150: "#c7c1ec";
+            readonly 200: "#b4ade5";
+            readonly 300: "#8f84d9";
+            readonly 400: "#695bcc";
+            readonly 500: "#4432bf";
+            readonly 600: "#362899";
+            readonly 700: "#291e73";
+            readonly 800: "#1b144c";
+            readonly 900: "#140f39";
+            readonly 950: "#0e0a26";
+            readonly 1000: "#070513";
+        };
+        readonly red: {
+            readonly 50: "#fde9e9";
+            readonly 100: "#fbd3d2";
+            readonly 150: "#f9bdbc";
+            readonly 200: "#f7a7a5";
+            readonly 300: "#f47a79";
+            readonly 400: "#f04e4c";
+            readonly 500: "#ec221f";
+            readonly 600: "#bd1b19";
+            readonly 700: "#8e1413";
+            readonly 800: "#5e0e0c";
+            readonly 900: "#470a09";
+            readonly 950: "#2f0706";
+            readonly 1000: "#180303";
+        };
+        readonly green: {
+            readonly 50: "#e7f7ef";
+            readonly 100: "#d0efde";
+            readonly 150: "#b8e7ce";
+            readonly 200: "#a1dfbe";
+            readonly 300: "#72ce9d";
+            readonly 400: "#43be7d";
+            readonly 500: "#14ae5c";
+            readonly 600: "#108b4a";
+            readonly 700: "#0c6837";
+            readonly 800: "#084625";
+            readonly 900: "#06341c";
+            readonly 950: "#042312";
+            readonly 1000: "#021109";
+        };
+        readonly yellow: {
+            readonly 50: "#fefae6";
+            readonly 100: "#fef4ce";
+            readonly 150: "#fdefb5";
+            readonly 200: "#fdea9d";
+            readonly 300: "#fcdf6c";
+            readonly 400: "#fbd53b";
+            readonly 500: "#faca0a";
+            readonly 600: "#c8a208";
+            readonly 700: "#967906";
+            readonly 800: "#645104";
+            readonly 900: "#4b3d03";
+            readonly 950: "#322802";
+            readonly 1000: "#191401";
+        };
+        readonly blue: {
+            readonly 50: "#e7f3fe";
+            readonly 100: "#cee8fd";
+            readonly 150: "#b6ddfc";
+            readonly 200: "#9ed1fb";
+            readonly 300: "#6dbaf9";
+            readonly 400: "#3da3f7";
+            readonly 500: "#0c8cf5";
+            readonly 600: "#0a70c4";
+            readonly 700: "#075493";
+            readonly 800: "#053862";
+            readonly 900: "#042a4a";
+            readonly 950: "#021c31";
+            readonly 1000: "#010e19";
+        };
+        readonly slate: {
+            readonly 50: "#f1f3f4";
+            readonly 100: "#e4e6ea";
+            readonly 150: "#d6dadf";
+            readonly 200: "#c8ced4";
+            readonly 300: "#adb5bf";
+            readonly 400: "#919da9";
+            readonly 500: "#768494";
+            readonly 600: "#5e6a76";
+            readonly 700: "#474f59";
+            readonly 800: "#2f353b";
+            readonly 900: "#23282c";
+            readonly 950: "#181a1e";
+            readonly 1000: "#0c0d0f";
+        };
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+    };
+    readonly alphas: {
+        readonly white: {
+            readonly 50: "rgba(255, 255, 255, 0.04)";
+            readonly 100: "rgba(255, 255, 255, 0.08)";
+            readonly 150: "rgba(255, 255, 255, 0.15)";
+            readonly 200: "rgba(255, 255, 255, 0.20)";
+            readonly 300: "rgba(255, 255, 255, 0.30)";
+            readonly 350: "rgba(255, 255, 255, 0.35)";
+            readonly 400: "rgba(255, 255, 255, 0.40)";
+            readonly 500: "rgba(255, 255, 255, 0.50)";
+            readonly 600: "rgba(255, 255, 255, 0.60)";
+            readonly 700: "rgba(255, 255, 255, 0.70)";
+            readonly 800: "rgba(255, 255, 255, 0.80)";
+        };
+        readonly black: {
+            readonly 100: "rgba(12, 12, 13, 0.05)";
+            readonly 200: "rgba(12, 12, 13, 0.10)";
+            readonly 300: "rgba(12, 12, 13, 0.20)";
+            readonly 400: "rgba(12, 12, 13, 0.40)";
+            readonly 500: "rgba(12, 12, 13, 0.70)";
+            readonly 600: "rgba(12, 12, 13, 0.80)";
+            readonly 700: "rgba(12, 12, 13, 0.85)";
+            readonly 800: "rgba(12, 12, 13, 0.90)";
+            readonly 900: "rgba(12, 12, 13, 0.95)";
+            readonly 1000: "rgba(12, 12, 13, 1.00)";
+        };
+        readonly purple: {
+            readonly 100: "rgba(136, 81, 191, 0.08)";
+            readonly 200: "rgba(136, 81, 191, 0.16)";
+        };
+        readonly violet: {
+            readonly 100: "rgba(68, 50, 191, 0.08)";
+            readonly 200: "rgba(68, 50, 191, 0.16)";
+        };
+        readonly slate: {
+            readonly 100: "rgba(118, 132, 148, 0.08)";
+            readonly 200: "rgba(118, 132, 148, 0.16)";
+        };
+        readonly green: {
+            readonly 100: "rgba(20, 174, 92, 0.08)";
+            readonly 200: "rgba(20, 174, 92, 0.16)";
+        };
+        readonly red: {
+            readonly 100: "rgba(236, 34, 31, 0.08)";
+            readonly 200: "rgba(236, 34, 31, 0.16)";
+        };
+        readonly yellow: {
+            readonly 100: "rgba(229, 160, 0, 0.08)";
+            readonly 200: "rgba(229, 160, 0, 0.16)";
+        };
+    };
+    readonly space: {
+        readonly 0: 0;
+        readonly 50: 2;
+        readonly 100: 4;
+        readonly 150: 6;
+        readonly 200: 8;
+        readonly 300: 12;
+        readonly 400: 16;
+        readonly 500: 20;
+        readonly 600: 24;
+        readonly 800: 32;
+        readonly 1200: 48;
+        readonly 1600: 64;
+        readonly 2400: 96;
+        readonly 4000: 160;
+        readonly '-100': -4;
+        readonly '-200': -8;
+        readonly '-300': -12;
+        readonly '-400': -16;
+        readonly '-600': -24;
+    };
+    readonly radius: {
+        readonly none: 0;
+        readonly sm: 4;
+        readonly md: 8;
+        readonly lg: 12;
+        readonly xl: 16;
+        readonly full: 9999;
+    };
+    readonly borderWidth: {
+        readonly none: 0;
+        readonly thin: 1;
+        readonly medium: 1.5;
+        readonly thick: 2;
+    };
+    readonly depth: {
+        readonly 0: 0;
+        readonly 25: 1;
+        readonly 100: 4;
+        readonly 200: 8;
+        readonly 400: 16;
+        readonly 800: 32;
+        readonly 1200: 48;
+        readonly '-25': -1;
+        readonly '-100': -4;
+        readonly '-200': -8;
+        readonly '-400': -16;
+        readonly '-800': -32;
+        readonly '-1200': -48;
+    };
+    readonly iconSize: {
+        readonly sm: 24;
+        readonly md: 32;
+        readonly lg: 40;
+    };
+    readonly blur: {
+        readonly none: 0;
+        readonly soft: 2;
+        readonly light: 4;
+        readonly medium: 8;
+        readonly heavy: 12;
+        readonly intense: 24;
+    };
+    readonly elevation: {
+        readonly xs: 1;
+        readonly sm: 2;
+        readonly md: 4;
+        readonly lg: 8;
+        readonly xl: 16;
+    };
+    readonly fontFamily: {
+        readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+        readonly mono: "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+    };
+    readonly fontWeight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly fontSize: {
+        readonly scale01: 11;
+        readonly scale02: 12;
+        readonly scale03: 13;
+        readonly scale04: 14;
+        readonly scale05: 16;
+        readonly scale06: 18;
+        readonly scale07: 20;
+        readonly scale08: 24;
+        readonly scale09: 28;
+        readonly scale10: 32;
+        readonly scale11: 40;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.25;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+    readonly letterSpacing: {
+        readonly tight: "-0.01em";
+        readonly normal: "0";
+        readonly wide: "0.01em";
+    };
+    readonly fontStyle: {
+        readonly normal: "normal";
+        readonly italic: "italic";
+    };
+    readonly breakpoints: {
+        readonly mobile: 375;
+        readonly tablet: 768;
+        readonly desktop: 1200;
+        readonly wide: 1440;
+    };
+};
+/**
+ * Available themes
+ */
+export declare const themes: {
+    readonly light: {
+        readonly color: {
+            readonly background: {
+                readonly brand: {
+                    readonly default: "#8851bf";
+                    readonly secondary: "#b897d9";
+                    readonly tertiary: "#dbcbec";
+                    readonly hover: "#6d4199";
+                    readonly secondaryHover: "#a074cc";
+                    readonly tertiaryHover: "#cfb9e5";
+                    readonly subtleLow: "rgba(136, 81, 191, 0.08)";
+                    readonly subtleMedium: "rgba(136, 81, 191, 0.08)";
+                };
+                readonly action: {
+                    readonly default: "#4432bf";
+                    readonly secondary: "#8f84d9";
+                    readonly tertiary: "#dad6f2";
+                    readonly hover: "#695bcc";
+                    readonly secondaryHover: "#695bcc";
+                    readonly tertiaryHover: "#c7c1ec";
+                    readonly subtleLow: "rgba(68, 50, 191, 0.08)";
+                    readonly subtleMedium: "rgba(68, 50, 191, 0.08)";
+                };
+                readonly success: {
+                    readonly default: "#14ae5c";
+                    readonly secondary: "#a1dfbe";
+                    readonly tertiary: "#e7f7ef";
+                    readonly hover: "#108b4a";
+                    readonly secondaryHover: "#72ce9d";
+                    readonly tertiaryHover: "#a1dfbe";
+                    readonly subtleLow: "#a1dfbe";
+                    readonly subtleMedium: "#a1dfbe";
+                };
+                readonly warning: {
+                    readonly default: "#faca0a";
+                    readonly secondary: "#fcdf6c";
+                    readonly tertiary: "#fdefb5";
+                    readonly hover: "#c8a208";
+                    readonly secondaryHover: "#fbd53b";
+                    readonly tertiaryHover: "#fdea9d";
+                    readonly subtleLow: "#fdea9d";
+                    readonly subtleMedium: "#fdea9d";
+                };
+                readonly danger: {
+                    readonly default: "#f04e4c";
+                    readonly secondary: "#f7a7a5";
+                    readonly tertiary: "#fde9e9";
+                    readonly hover: "#bd1b19";
+                    readonly secondaryHover: "#f47a79";
+                    readonly tertiaryHover: "#f9bdbc";
+                    readonly subtleLow: "rgba(236, 34, 31, 0.08)";
+                    readonly subtleMedium: "rgba(236, 34, 31, 0.08)";
+                };
+                readonly info: {
+                    readonly default: "#0c8cf5";
+                    readonly secondary: "#6dbaf9";
+                    readonly tertiary: "#cee8fd";
+                    readonly hover: "#0a70c4";
+                    readonly secondaryHover: "#3da3f7";
+                    readonly tertiaryHover: "#9ed1fb";
+                    readonly subtleLow: "#9ed1fb";
+                    readonly subtleMedium: "#9ed1fb";
+                };
+                readonly neutral: {
+                    readonly default: "#768494";
+                    readonly secondary: "#adb5bf";
+                    readonly tertiary: "#e4e6ea";
+                    readonly hover: "#5e6a76";
+                    readonly secondaryHover: "#919da9";
+                    readonly tertiaryHover: "#c8ced4";
+                    readonly subtleLow: "rgba(118, 132, 148, 0.08)";
+                    readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+                };
+                readonly default: {
+                    readonly default: "#f1f3f4";
+                    readonly hover: "#e4e6ea";
+                    readonly glass: "rgba(255, 255, 255, 0.30)";
+                    readonly onGlass: "rgba(255, 255, 255, 0.60)";
+                    readonly onGlassSecondary: "rgba(255, 255, 255, 0.70)";
+                    readonly onGlassTertiary: "rgba(255, 255, 255, 0.80)";
+                    readonly onGlassHover: "rgba(255, 255, 255, 0.80)";
+                };
+                readonly disabled: {
+                    readonly default: "#dbdbdb";
+                    readonly secondary: "#ededed";
+                };
+                readonly utilities: {
+                    readonly scrim: "rgba(255, 255, 255, 0.7)";
+                    readonly overlay: "rgba(0, 0, 0, 0.5)";
+                    readonly blanket: "rgba(0, 0, 0, 0.7)";
+                    readonly bgOnGlass: "rgba(255, 255, 255, 0.45)";
+                    readonly bgOnGlassOnGlass: "rgba(255, 255, 255, 0.6)";
+                    readonly hoverOverlay: "rgba(0, 0, 0, 0.2)";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly default: "#2f353b";
+                    readonly secondary: "#768494";
+                    readonly tertiary: "#adb5bf";
+                };
+                readonly brand: {
+                    readonly default: "#8851bf";
+                    readonly secondary: "#b897d9";
+                    readonly tertiary: "#dbcbec";
+                    readonly onBrand: "#f3eef9";
+                    readonly onBrandSecondary: "#36204c";
+                    readonly onBrandTertiary: "#6d4199";
+                };
+                readonly action: {
+                    readonly default: "#4432bf";
+                    readonly secondary: "#8f84d9";
+                    readonly tertiary: "#c7c1ec";
+                    readonly onAction: "#eceaf9";
+                    readonly onActionSecondary: "#291e73";
+                    readonly onActionTertiary: "#362899";
+                };
+                readonly success: {
+                    readonly default: "#084625";
+                    readonly secondary: "#108b4a";
+                    readonly tertiary: "#14ae5c";
+                    readonly onSuccess: "#e7f7ef";
+                    readonly onSuccessSecondary: "#0c6837";
+                    readonly onSuccessTertiary: "#084625";
+                };
+                readonly warning: {
+                    readonly default: "#4b3d03";
+                    readonly secondary: "#967906";
+                    readonly tertiary: "#c8a208";
+                    readonly onWarning: "#4b3d03";
+                    readonly onWarningSecondary: "#645104";
+                    readonly onWarningTertiary: "#967906";
+                };
+                readonly danger: {
+                    readonly default: "#ec221f";
+                    readonly secondary: "#f04e4c";
+                    readonly tertiary: "#f47a79";
+                    readonly onDanger: "#fde9e9";
+                    readonly onDangerSecondary: "#5e0e0c";
+                    readonly onDangerTertiary: "#bd1b19";
+                };
+                readonly info: {
+                    readonly default: "#0c8cf5";
+                    readonly secondary: "#6dbaf9";
+                    readonly tertiary: "#b6ddfc";
+                    readonly onInfo: "#e7f3fe";
+                    readonly onInfoSecondary: "#053862";
+                    readonly onInfoTertiary: "#0a70c4";
+                };
+                readonly neutral: {
+                    readonly default: "#2f353b";
+                    readonly secondary: "#768494";
+                    readonly tertiary: "#adb5bf";
+                    readonly onNeutral: "#f1f3f4";
+                    readonly onNeutralSecondary: "#2f353b";
+                    readonly onNeutralTertiary: "#5e6a76";
+                };
+                readonly disabled: {
+                    readonly default: "#b8b8b8";
+                    readonly secondary: "#cacaca";
+                    readonly onDisabled: "#a6a6a6";
+                    readonly onDisabledSecondary: "#cacaca";
+                };
+                readonly utilities: {
+                    readonly onOverlay: "rgba(12, 12, 13, 1.00)";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly default: "#ffffff";
+                    readonly secondary: "#d6dadf";
+                    readonly tertiary: "#768494";
+                    readonly subtleLow: "rgba(255, 255, 255, 0.80)";
+                    readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+                    readonly subtleHigh: "rgba(255, 255, 255, 0.40)";
+                };
+                readonly brand: {
+                    readonly default: "#cfb9e5";
+                    readonly secondary: "#b897d9";
+                    readonly tertiary: "#dbcbec";
+                    readonly onBrand: "#f3eef9";
+                    readonly onBrandSecondary: "#36204c";
+                    readonly onBrandTertiary: "#6d4199";
+                };
+                readonly action: {
+                    readonly default: "#4432bf";
+                    readonly secondary: "#8f84d9";
+                    readonly tertiary: "#c7c1ec";
+                    readonly onAction: "#eceaf9";
+                    readonly onActionSecondary: "#362899";
+                    readonly onActionTertiary: "#1b144c";
+                };
+                readonly success: {
+                    readonly default: "#084625";
+                    readonly secondary: "#108b4a";
+                    readonly tertiary: "#14ae5c";
+                };
+                readonly warning: {
+                    readonly default: "#645104";
+                    readonly secondary: "#c8a208";
+                    readonly tertiary: "#faca0a";
+                };
+                readonly danger: {
+                    readonly default: "#ec221f";
+                    readonly secondary: "#f47a79";
+                    readonly tertiary: "#fbd3d2";
+                    readonly onDanger: "#bd1b19";
+                };
+                readonly info: {
+                    readonly default: "#0c8cf5";
+                    readonly secondary: "#6dbaf9";
+                    readonly tertiary: "#b6ddfc";
+                };
+                readonly neutral: {
+                    readonly default: "#2f353b";
+                    readonly secondary: "#768494";
+                    readonly tertiary: "#c8ced4";
+                    readonly onNeutral: "#f1f3f4";
+                    readonly onNeutralSecondary: "#474f59";
+                    readonly onNeutralTertiary: "#5e6a76";
+                };
+                readonly disabled: {
+                    readonly default: "#b8b8b8";
+                };
+                readonly utilities: {
+                    readonly swatch: "rgba(0, 0, 0, 0.24)";
+                };
+            };
+            readonly icon: {
+                readonly default: {
+                    readonly default: "#2f353b";
+                    readonly secondary: "#768494";
+                    readonly tertiary: "#adb5bf";
+                };
+                readonly brand: {
+                    readonly default: "#36204c";
+                    readonly secondary: "#6d4199";
+                    readonly tertiary: "#8851bf";
+                    readonly onBrand: "#f3eef9";
+                    readonly onBrandSecondary: "#36204c";
+                    readonly onBrandTertiary: "#6d4199";
+                };
+                readonly action: {
+                    readonly default: "#4432bf";
+                    readonly secondary: "#8f84d9";
+                    readonly tertiary: "#c7c1ec";
+                    readonly onAction: "#eceaf9";
+                    readonly onActionSecondary: "#291e73";
+                    readonly onActionTertiary: "#362899";
+                };
+                readonly success: {
+                    readonly default: "#14ae5c";
+                    readonly secondary: "#a1dfbe";
+                    readonly tertiary: "#d0efde";
+                    readonly onSuccess: "#e7f7ef";
+                    readonly onSuccessSecondary: "#0c6837";
+                    readonly onSuccessTertiary: "#084625";
+                };
+                readonly warning: {
+                    readonly default: "#faca0a";
+                    readonly secondary: "#fcdf6c";
+                    readonly tertiary: "#fdefb5";
+                    readonly onWarning: "#191401";
+                    readonly onWarningSecondary: "#645104";
+                    readonly onWarningTertiary: "#4b3d03";
+                };
+                readonly danger: {
+                    readonly default: "#ec221f";
+                    readonly secondary: "#f04e4c";
+                    readonly tertiary: "#f47a79";
+                    readonly onDanger: "#fde9e9";
+                    readonly onDangerSecondary: "#8e1413";
+                    readonly onDangerTertiary: "#5e0e0c";
+                };
+                readonly info: {
+                    readonly default: "#0c8cf5";
+                    readonly secondary: "#6dbaf9";
+                    readonly tertiary: "#b6ddfc";
+                    readonly onInfo: "#010e19";
+                    readonly onInfoSecondary: "#053862";
+                    readonly onInfoTertiary: "#042a4a";
+                };
+                readonly neutral: {
+                    readonly default: "#2f353b";
+                    readonly secondary: "#768494";
+                    readonly tertiary: "#adb5bf";
+                    readonly onNeutral: "#f1f3f4";
+                    readonly onNeutralSecondary: "#474f59";
+                    readonly onNeutralTertiary: "#5e6a76";
+                };
+                readonly disabled: {
+                    readonly default: "#b8b8b8";
+                    readonly secondary: "#cacaca";
+                    readonly onDisabled: "#a6a6a6";
+                    readonly onDisabledSecondary: "#cacaca";
+                };
+                readonly utilities: {
+                    readonly onOverlay: "rgba(12, 12, 13, 1.00)";
+                };
+            };
+        };
+    };
+    readonly dark: {
+        readonly color: {
+            readonly background: {
+                readonly brand: {
+                    readonly default: "#a074cc";
+                    readonly secondary: "#6d4199";
+                    readonly tertiary: "#36204c";
+                    readonly hover: "#b897d9";
+                    readonly secondaryHover: "#8851bf";
+                    readonly tertiaryHover: "#523173";
+                    readonly subtleLow: "rgba(136, 81, 191, 0.08)";
+                    readonly subtleMedium: "rgba(136, 81, 191, 0.16)";
+                };
+                readonly action: {
+                    readonly default: "#695bcc";
+                    readonly secondary: "#362899";
+                    readonly tertiary: "#1b144c";
+                    readonly hover: "#8f84d9";
+                    readonly secondaryHover: "#4432bf";
+                    readonly tertiaryHover: "#291e73";
+                    readonly subtleLow: "rgba(68, 50, 191, 0.08)";
+                    readonly subtleMedium: "rgba(68, 50, 191, 0.16)";
+                };
+                readonly success: {
+                    readonly default: "#108b4a";
+                    readonly secondary: "#084625";
+                    readonly tertiary: "#042312";
+                    readonly hover: "#14ae5c";
+                    readonly secondaryHover: "#0c6837";
+                    readonly tertiaryHover: "#084625";
+                    readonly subtleLow: "#06341c";
+                    readonly subtleMedium: "#084625";
+                };
+                readonly warning: {
+                    readonly default: "#c8a208";
+                    readonly secondary: "#645104";
+                    readonly tertiary: "#322802";
+                    readonly hover: "#faca0a";
+                    readonly secondaryHover: "#967906";
+                    readonly tertiaryHover: "#4b3d03";
+                    readonly subtleLow: "#4b3d03";
+                    readonly subtleMedium: "#645104";
+                };
+                readonly danger: {
+                    readonly default: "#bd1b19";
+                    readonly secondary: "#5e0e0c";
+                    readonly tertiary: "#2f0706";
+                    readonly hover: "#ec221f";
+                    readonly secondaryHover: "#8e1413";
+                    readonly tertiaryHover: "#470a09";
+                    readonly subtleLow: "rgba(236, 34, 31, 0.08)";
+                    readonly subtleMedium: "rgba(236, 34, 31, 0.16)";
+                };
+                readonly info: {
+                    readonly default: "#0a70c4";
+                    readonly secondary: "#053862";
+                    readonly tertiary: "#021c31";
+                    readonly hover: "#0c8cf5";
+                    readonly secondaryHover: "#075493";
+                    readonly tertiaryHover: "#042a4a";
+                    readonly subtleLow: "#042a4a";
+                    readonly subtleMedium: "#053862";
+                };
+                readonly neutral: {
+                    readonly default: "#5e6a76";
+                    readonly secondary: "#2f353b";
+                    readonly tertiary: "#181a1e";
+                    readonly hover: "#768494";
+                    readonly secondaryHover: "#474f59";
+                    readonly tertiaryHover: "#23282c";
+                    readonly subtleLow: "rgba(118, 132, 148, 0.08)";
+                    readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+                };
+                readonly default: {
+                    readonly default: "#181a1e";
+                    readonly hover: "#23282c";
+                    readonly glass: "rgba(12, 12, 13, 0.20)";
+                    readonly onGlass: "rgba(12, 12, 13, 0.80)";
+                    readonly onGlassSecondary: "rgba(12, 12, 13, 0.85)";
+                    readonly onGlassTertiary: "rgba(12, 12, 13, 0.90)";
+                    readonly onGlassHover: "rgba(12, 12, 13, 0.90)";
+                };
+                readonly disabled: {
+                    readonly default: "#424242";
+                    readonly secondary: "#323232";
+                };
+                readonly utilities: {
+                    readonly scrim: "rgba(0, 0, 0, 0.7)";
+                    readonly overlay: "rgba(255, 255, 255, 0.1)";
+                    readonly blanket: "rgba(255, 255, 255, 0.15)";
+                    readonly bgOnGlass: "rgba(0, 0, 0, 0.45)";
+                    readonly bgOnGlassOnGlass: "rgba(0, 0, 0, 0.6)";
+                    readonly hoverOverlay: "rgba(255, 255, 255, 0.1)";
+                };
+            };
+            readonly text: {
+                readonly default: {
+                    readonly default: "#f1f3f4";
+                    readonly secondary: "#adb5bf";
+                    readonly tertiary: "#768494";
+                };
+                readonly brand: {
+                    readonly default: "#b897d9";
+                    readonly secondary: "#a074cc";
+                    readonly tertiary: "#6d4199";
+                    readonly onBrand: "#1b1026";
+                    readonly onBrandSecondary: "#cfb9e5";
+                    readonly onBrandTertiary: "#b897d9";
+                };
+                readonly action: {
+                    readonly default: "#8f84d9";
+                    readonly secondary: "#695bcc";
+                    readonly tertiary: "#362899";
+                    readonly onAction: "#0e0a26";
+                    readonly onActionSecondary: "#b4ade5";
+                    readonly onActionTertiary: "#8f84d9";
+                };
+                readonly success: {
+                    readonly default: "#72ce9d";
+                    readonly secondary: "#43be7d";
+                    readonly tertiary: "#14ae5c";
+                    readonly onSuccess: "#042312";
+                    readonly onSuccessSecondary: "#a1dfbe";
+                    readonly onSuccessTertiary: "#72ce9d";
+                };
+                readonly warning: {
+                    readonly default: "#fcdf6c";
+                    readonly secondary: "#fbd53b";
+                    readonly tertiary: "#faca0a";
+                    readonly onWarning: "#322802";
+                    readonly onWarningSecondary: "#fdea9d";
+                    readonly onWarningTertiary: "#fcdf6c";
+                };
+                readonly danger: {
+                    readonly default: "#f04e4c";
+                    readonly secondary: "#ec221f";
+                    readonly tertiary: "#bd1b19";
+                    readonly onDanger: "#2f0706";
+                    readonly onDangerSecondary: "#f7a7a5";
+                    readonly onDangerTertiary: "#f47a79";
+                };
+                readonly info: {
+                    readonly default: "#3da3f7";
+                    readonly secondary: "#0c8cf5";
+                    readonly tertiary: "#0a70c4";
+                    readonly onInfo: "#021c31";
+                    readonly onInfoSecondary: "#9ed1fb";
+                    readonly onInfoTertiary: "#6dbaf9";
+                };
+                readonly neutral: {
+                    readonly default: "#f1f3f4";
+                    readonly secondary: "#adb5bf";
+                    readonly tertiary: "#768494";
+                    readonly onNeutral: "#181a1e";
+                    readonly onNeutralSecondary: "#c8ced4";
+                    readonly onNeutralTertiary: "#adb5bf";
+                };
+                readonly disabled: {
+                    readonly default: "#858585";
+                    readonly secondary: "#646464";
+                    readonly onDisabled: "#b8b8b8";
+                    readonly onDisabledSecondary: "#a6a6a6";
+                };
+                readonly utilities: {
+                    readonly onOverlay: "rgba(255, 255, 255, 0.80)";
+                };
+            };
+            readonly border: {
+                readonly default: {
+                    readonly default: "#2f353b";
+                    readonly secondary: "#474f59";
+                    readonly tertiary: "#768494";
+                    readonly subtleLow: "rgba(12, 12, 13, 0.90)";
+                    readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+                    readonly subtleHigh: "rgba(12, 12, 13, 0.40)";
+                };
+                readonly brand: {
+                    readonly default: "#523173";
+                    readonly secondary: "#6d4199";
+                    readonly tertiary: "#36204c";
+                    readonly onBrand: "#1b1026";
+                    readonly onBrandSecondary: "#cfb9e5";
+                    readonly onBrandTertiary: "#a074cc";
+                };
+                readonly action: {
+                    readonly default: "#362899";
+                    readonly secondary: "#291e73";
+                    readonly tertiary: "#1b144c";
+                    readonly onAction: "#0e0a26";
+                    readonly onActionSecondary: "#8f84d9";
+                    readonly onActionTertiary: "#b4ade5";
+                };
+                readonly success: {
+                    readonly default: "#72ce9d";
+                    readonly secondary: "#43be7d";
+                    readonly tertiary: "#14ae5c";
+                };
+                readonly warning: {
+                    readonly default: "#fcdf6c";
+                    readonly secondary: "#fbd53b";
+                    readonly tertiary: "#faca0a";
+                };
+                readonly danger: {
+                    readonly default: "#ec221f";
+                    readonly secondary: "#bd1b19";
+                    readonly tertiary: "#5e0e0c";
+                    readonly onDanger: "#f04e4c";
+                };
+                readonly info: {
+                    readonly default: "#0c8cf5";
+                    readonly secondary: "#0a70c4";
+                    readonly tertiary: "#053862";
+                };
+                readonly neutral: {
+                    readonly default: "#adb5bf";
+                    readonly secondary: "#768494";
+                    readonly tertiary: "#474f59";
+                    readonly onNeutral: "#181a1e";
+                    readonly onNeutralSecondary: "#c8ced4";
+                    readonly onNeutralTertiary: "#adb5bf";
+                };
+                readonly disabled: {
+                    readonly default: "#646464";
+                };
+                readonly utilities: {
+                    readonly swatch: "rgba(255, 255, 255, 0.24)";
+                };
+            };
+            readonly icon: {
+                readonly default: {
+                    readonly default: "#e4e6ea";
+                    readonly secondary: "#919da9";
+                    readonly tertiary: "#5e6a76";
+                };
+                readonly brand: {
+                    readonly default: "#b897d9";
+                    readonly secondary: "#a074cc";
+                    readonly tertiary: "#8851bf";
+                    readonly onBrand: "#1b1026";
+                    readonly onBrandSecondary: "#cfb9e5";
+                    readonly onBrandTertiary: "#b897d9";
+                };
+                readonly action: {
+                    readonly default: "#695bcc";
+                    readonly secondary: "#4432bf";
+                    readonly tertiary: "#291e73";
+                    readonly onAction: "#0e0a26";
+                    readonly onActionSecondary: "#b4ade5";
+                    readonly onActionTertiary: "#8f84d9";
+                };
+                readonly success: {
+                    readonly default: "#43be7d";
+                    readonly secondary: "#108b4a";
+                    readonly tertiary: "#084625";
+                    readonly onSuccess: "#042312";
+                    readonly onSuccessSecondary: "#a1dfbe";
+                    readonly onSuccessTertiary: "#72ce9d";
+                };
+                readonly warning: {
+                    readonly default: "#fbd53b";
+                    readonly secondary: "#c8a208";
+                    readonly tertiary: "#645104";
+                    readonly onWarning: "#322802";
+                    readonly onWarningSecondary: "#fdea9d";
+                    readonly onWarningTertiary: "#fcdf6c";
+                };
+                readonly danger: {
+                    readonly default: "#f04e4c";
+                    readonly secondary: "#ec221f";
+                    readonly tertiary: "#bd1b19";
+                    readonly onDanger: "#2f0706";
+                    readonly onDangerSecondary: "#f7a7a5";
+                    readonly onDangerTertiary: "#f47a79";
+                };
+                readonly info: {
+                    readonly default: "#3da3f7";
+                    readonly secondary: "#0a70c4";
+                    readonly tertiary: "#053862";
+                    readonly onInfo: "#021c31";
+                    readonly onInfoSecondary: "#9ed1fb";
+                    readonly onInfoTertiary: "#6dbaf9";
+                };
+                readonly neutral: {
+                    readonly default: "#e4e6ea";
+                    readonly secondary: "#919da9";
+                    readonly tertiary: "#5e6a76";
+                    readonly onNeutral: "#181a1e";
+                    readonly onNeutralSecondary: "#c8ced4";
+                    readonly onNeutralTertiary: "#adb5bf";
+                };
+                readonly disabled: {
+                    readonly default: "#858585";
+                    readonly secondary: "#646464";
+                    readonly onDisabled: "#b8b8b8";
+                    readonly onDisabledSecondary: "#a6a6a6";
+                };
+                readonly utilities: {
+                    readonly onOverlay: "rgba(255, 255, 255, 0.80)";
+                };
+            };
+        };
+    };
+};
+export type Theme = typeof lightTheme | typeof darkTheme;
+export type ThemeMode = 'light' | 'dark';
+export type Tokens = typeof tokens;
+export type Primitives = typeof primitives;
+export type { ColorToken, AlphaToken, FontFamilyToken, FontWeightToken, FontSizeToken, LineHeightToken, LetterSpacingToken, SpaceToken, RadiusToken, BorderWidthToken, DepthToken, IconSizeToken, BlurToken, ElevationToken, BreakpointToken, MediaQueryToken, } from './core';
+export type { BackgroundToken, TextToken, BorderToken, IconToken, TypographyToken, ShadowToken, BackdropBlurToken, TransitionToken, DurationToken, EasingToken, } from './semantic';
+export type { LightTheme, DarkTheme } from './themes';
+export default tokens;
+//# sourceMappingURL=index.d.ts.map