@x12i/tokens 0.0.0-stage → 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,1007 @@
+declare const base: {
+    readonly border: {
+        readonly width: {
+            readonly "1": "1px";
+            readonly "2": "2px";
+            readonly default: "1px";
+            readonly emphasis: "2px";
+            readonly focus: "2px";
+        };
+    };
+    readonly color: {
+        readonly black: "#000000";
+        readonly white: "#ffffff";
+        readonly neutral: {
+            readonly "1": "#07090e";
+            readonly "2": "#0f1217";
+            readonly "3": "#181b20";
+            readonly "4": "#24262c";
+            readonly "5": "#32353c";
+            readonly "6": "#44484e";
+            readonly "7": "#5d6067";
+            readonly "8": "#777a82";
+            readonly "9": "#92959d";
+            readonly "10": "#b0b4bc";
+            readonly "11": "#e7ebf4";
+            readonly "12": "#f8faff";
+        };
+        readonly accent: {
+            readonly "1": "#0a0c25";
+            readonly "2": "#12163a";
+            readonly "3": "#1d2059";
+            readonly "4": "#282d74";
+            readonly "5": "#373e94";
+            readonly "6": "#444cb2";
+            readonly "7": "#5057dc";
+            readonly "8": "#5d67ee";
+            readonly "9": "#6e7cfd";
+            readonly "10": "#8b9bff";
+            readonly "11": "#e1e7ff";
+            readonly "12": "#f4f6ff";
+        };
+        readonly success: {
+            readonly "1": "#011408";
+            readonly "2": "#00220f";
+            readonly "3": "#003219";
+            readonly "4": "#004424";
+            readonly "5": "#005a31";
+            readonly "6": "#006d3c";
+            readonly "7": "#008148";
+            readonly "8": "#009253";
+            readonly "9": "#19a661";
+            readonly "10": "#59bc81";
+            readonly "11": "#d0f2da";
+            readonly "12": "#effaf2";
+        };
+        readonly warning: {
+            readonly "1": "#180d00";
+            readonly "2": "#271700";
+            readonly "3": "#3a2400";
+            readonly "4": "#4d3200";
+            readonly "5": "#654200";
+            readonly "6": "#7b5100";
+            readonly "7": "#916100";
+            readonly "8": "#a46e00";
+            readonly "9": "#bb7e00";
+            readonly "10": "#d09945";
+            readonly "11": "#fae4c7";
+            readonly "12": "#fdf6ec";
+        };
+        readonly danger: {
+            readonly "1": "#210505";
+            readonly "2": "#340909";
+            readonly "3": "#4f0a0d";
+            readonly "4": "#691214";
+            readonly "5": "#861d1f";
+            readonly "6": "#a12628";
+            readonly "7": "#c51d28";
+            readonly "8": "#d73337";
+            readonly "9": "#e9504d";
+            readonly "10": "#f97770";
+            readonly "11": "#ffdfdc";
+            readonly "12": "#fff4f3";
+        };
+        readonly info: {
+            readonly "1": "#00121d";
+            readonly "2": "#001e2d";
+            readonly "3": "#002d42";
+            readonly "4": "#003d58";
+            readonly "5": "#005172";
+            readonly "6": "#00628a";
+            readonly "7": "#0075a3";
+            readonly "8": "#0084b8";
+            readonly "9": "#0097d2";
+            readonly "10": "#4cb0e5";
+            readonly "11": "#d0edff";
+            readonly "12": "#eef9ff";
+        };
+        readonly categorical: {
+            readonly light: {
+                readonly "1": "#2971c6";
+                readonly "2": "#ac5700";
+                readonly "3": "#008758";
+                readonly "4": "#a8488d";
+                readonly "5": "#867000";
+                readonly "6": "#00818c";
+                readonly "7": "#b94642";
+                readonly "8": "#8059bb";
+            };
+            readonly dark: {
+                readonly "1": "#70adfb";
+                readonly "2": "#e99355";
+                readonly "3": "#53c48e";
+                readonly "4": "#e189c5";
+                readonly "5": "#c5a93b";
+                readonly "6": "#00c1d0";
+                readonly "7": "#f28881";
+                readonly "8": "#b897f0";
+            };
+        };
+        readonly sequential: {
+            readonly "1": "#e9f3ff";
+            readonly "2": "#bcd9ff";
+            readonly "3": "#8ebfff";
+            readonly "4": "#5ea4fd";
+            readonly "5": "#478ade";
+            readonly "6": "#3f72b2";
+            readonly "7": "#3f5b7f";
+            readonly "8": "#384453";
+            readonly "9": "#242f3d";
+        };
+        readonly diverging: {
+            readonly "1": "#2a6cba";
+            readonly "2": "#5e8dc9";
+            readonly "3": "#8dadd7";
+            readonly "4": "#bdcee3";
+            readonly "5": "#eeeeee";
+            readonly "6": "#dfc7b7";
+            readonly "7": "#cea081";
+            readonly "8": "#bb7949";
+            readonly "9": "#a45300";
+        };
+    };
+    readonly font: {
+        readonly family: {
+            readonly sans: "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Hebrew', 'Noto Sans Arabic', 'Helvetica Neue', Arial, sans-serif";
+            readonly mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace";
+        };
+        readonly weight: {
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+        };
+        readonly size: {
+            readonly "12": "12px";
+            readonly "13": "13px";
+            readonly "14": "14px";
+            readonly "16": "16px";
+            readonly "20": "20px";
+            readonly "24": "24px";
+            readonly "30": "30px";
+            readonly "48": "48px";
+        };
+        readonly lineHeight: {
+            readonly "16": "16px";
+            readonly "20": "20px";
+            readonly "22": "22px";
+            readonly "24": "24px";
+            readonly "28": "28px";
+            readonly "32": "32px";
+            readonly "38": "38px";
+            readonly "56": "56px";
+        };
+    };
+    readonly radius: {
+        readonly "2": "2px";
+        readonly "4": "4px";
+        readonly "6": "6px";
+        readonly "8": "8px";
+        readonly "12": "12px";
+        readonly "16": "16px";
+        readonly full: "9999px";
+        readonly control: "6px";
+        readonly panel: "8px";
+        readonly overlay: "12px";
+        readonly pill: "9999px";
+    };
+    readonly size: {
+        readonly "12": "12px";
+        readonly "16": "16px";
+        readonly "20": "20px";
+        readonly "24": "24px";
+        readonly "28": "28px";
+        readonly "32": "32px";
+        readonly "40": "40px";
+        readonly "44": "44px";
+        readonly "48": "48px";
+        readonly "56": "56px";
+        readonly icon: {
+            readonly xs: "12px";
+            readonly sm: "16px";
+            readonly md: "20px";
+            readonly lg: "24px";
+        };
+        readonly target: {
+            readonly min: "24px";
+            readonly touch: "44px";
+        };
+    };
+    readonly space: {
+        readonly "0": "0px";
+        readonly "1": "4px";
+        readonly "2": "8px";
+        readonly "3": "12px";
+        readonly "4": "16px";
+        readonly "5": "20px";
+        readonly "6": "24px";
+        readonly "8": "32px";
+        readonly "10": "40px";
+        readonly "12": "48px";
+        readonly "16": "64px";
+        readonly "20": "80px";
+        readonly "24": "96px";
+        readonly "0-5": "2px";
+    };
+    readonly text: {
+        readonly display: {
+            readonly size: "48px";
+            readonly lineHeight: "56px";
+            readonly weight: 600;
+        };
+        readonly h1: {
+            readonly size: "30px";
+            readonly lineHeight: "38px";
+            readonly weight: 600;
+        };
+        readonly h2: {
+            readonly size: "24px";
+            readonly lineHeight: "32px";
+            readonly weight: 600;
+        };
+        readonly h3: {
+            readonly size: "20px";
+            readonly lineHeight: "28px";
+            readonly weight: 600;
+        };
+        readonly h4: {
+            readonly size: "16px";
+            readonly lineHeight: "24px";
+            readonly weight: 600;
+        };
+        readonly body: {
+            readonly size: "14px";
+            readonly lineHeight: "22px";
+            readonly weight: 400;
+        };
+        readonly label: {
+            readonly size: "13px";
+            readonly lineHeight: "20px";
+            readonly weight: 500;
+        };
+        readonly caption: {
+            readonly size: "12px";
+            readonly lineHeight: "16px";
+            readonly weight: 400;
+        };
+        readonly code: {
+            readonly size: "13px";
+            readonly lineHeight: "20px";
+            readonly weight: 400;
+        };
+    };
+    readonly icon: {
+        readonly strokeWidth: 1.5;
+    };
+    readonly duration: {
+        readonly instant: "90ms";
+        readonly fast: "150ms";
+        readonly base: "240ms";
+        readonly slow: "400ms";
+    };
+    readonly easing: {
+        readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+        readonly enter: "cubic-bezier(0, 0, 0, 1)";
+        readonly exit: "cubic-bezier(0.3, 0, 1, 1)";
+    };
+    readonly z: {
+        readonly base: 0;
+        readonly sticky: 10;
+        readonly dropdown: 100;
+        readonly overlay: 200;
+        readonly modal: 300;
+        readonly toast: 400;
+        readonly tooltip: 500;
+    };
+    readonly breakpoint: {
+        readonly xs: "480px";
+        readonly sm: "640px";
+        readonly md: "768px";
+        readonly lg: "1024px";
+        readonly xl: "1280px";
+        readonly "2xl": "1536px";
+    };
+};
+
+declare const component: {
+    readonly button: {
+        readonly height: {
+            readonly xs: "24px";
+            readonly sm: "28px";
+            readonly md: "32px";
+            readonly lg: "40px";
+            readonly xl: "48px";
+        };
+        readonly paddingInline: {
+            readonly xs: "8px";
+            readonly sm: "8px";
+            readonly md: "12px";
+            readonly lg: "16px";
+            readonly xl: "20px";
+        };
+        readonly gap: "8px";
+    };
+    readonly badge: {
+        readonly height: {
+            readonly sm: "16px";
+            readonly md: "20px";
+        };
+    };
+    readonly grid: {
+        readonly row: {
+            readonly height: "40px";
+        };
+    };
+};
+
+declare const densityComfortable: {
+    readonly size: {
+        readonly control: {
+            readonly xs: "28px";
+            readonly sm: "32px";
+            readonly md: "40px";
+            readonly lg: "48px";
+            readonly xl: "56px";
+        };
+    };
+    readonly space: {
+        readonly control: {
+            readonly inline: {
+                readonly xs: "12px";
+                readonly sm: "12px";
+                readonly md: "16px";
+                readonly lg: "20px";
+                readonly xl: "24px";
+            };
+            readonly gap: "12px";
+        };
+    };
+};
+
+declare const densityCompact: {
+    readonly size: {
+        readonly control: {
+            readonly xs: "20px";
+            readonly sm: "24px";
+            readonly md: "28px";
+            readonly lg: "32px";
+            readonly xl: "40px";
+        };
+    };
+    readonly space: {
+        readonly control: {
+            readonly inline: {
+                readonly xs: "4px";
+                readonly sm: "4px";
+                readonly md: "8px";
+                readonly lg: "12px";
+                readonly xl: "16px";
+            };
+            readonly gap: "4px";
+        };
+    };
+};
+
+declare const densityDefault: {
+    readonly size: {
+        readonly control: {
+            readonly xs: "24px";
+            readonly sm: "28px";
+            readonly md: "32px";
+            readonly lg: "40px";
+            readonly xl: "48px";
+        };
+    };
+    readonly space: {
+        readonly control: {
+            readonly inline: {
+                readonly xs: "8px";
+                readonly sm: "8px";
+                readonly md: "12px";
+                readonly lg: "16px";
+                readonly xl: "20px";
+            };
+            readonly gap: "8px";
+        };
+    };
+};
+
+declare const dark: {
+    readonly color: {
+        readonly accent: {
+            readonly default: "#5d67ee";
+            readonly hover: "#5057dc";
+            readonly active: "#444cb2";
+            readonly subtle: "#1d2059";
+            readonly "on-accent": "#ffffff";
+        };
+        readonly bg: {
+            readonly canvas: "#07090e";
+            readonly surface: "#0f1217";
+            readonly raised: "#181b20";
+            readonly overlay: "#24262c";
+            readonly inverse: "#f8faff";
+        };
+        readonly border: {
+            readonly subtle: "#24262c";
+            readonly default: "#777a82";
+            readonly strong: "#92959d";
+            readonly focus: "#6e7cfd";
+        };
+        readonly text: {
+            readonly primary: "#f8faff";
+            readonly secondary: "#b0b4bc";
+            readonly tertiary: "#92959d";
+            readonly disabled: "#44484e";
+            readonly inverse: "#07090e";
+            readonly link: "#8b9bff";
+        };
+        readonly status: {
+            readonly success: {
+                readonly background: "#00220f";
+                readonly foreground: "#59bc81";
+                readonly border: "#006d3c";
+            };
+            readonly warning: {
+                readonly background: "#271700";
+                readonly foreground: "#d09945";
+                readonly border: "#7b5100";
+            };
+            readonly danger: {
+                readonly background: "#340909";
+                readonly foreground: "#f97770";
+                readonly border: "#a12628";
+            };
+            readonly info: {
+                readonly background: "#001e2d";
+                readonly foreground: "#4cb0e5";
+                readonly border: "#00628a";
+            };
+        };
+        readonly chart: {
+            readonly axis: "#b0b4bc";
+            readonly grid: "#24262c";
+            readonly muted: "#777a82";
+            readonly reference: "#92959d";
+            readonly categorical: {
+                readonly "1": "#70adfb";
+                readonly "2": "#e99355";
+                readonly "3": "#53c48e";
+                readonly "4": "#e189c5";
+                readonly "5": "#c5a93b";
+                readonly "6": "#00c1d0";
+                readonly "7": "#f28881";
+                readonly "8": "#b897f0";
+            };
+            readonly good: "#009253";
+            readonly warning: "#a46e00";
+            readonly critical: "#d73337";
+        };
+        readonly selection: "#282d74";
+        readonly highlight: "#4d3200";
+        readonly scrim: "rgba(0, 0, 0, 0.7)";
+    };
+    readonly shadow: {
+        readonly raised: "0px 0px 0px 1px #ffffff14";
+        readonly overlay: "0px 8px 24px 0px #00000080";
+        readonly modal: "0px 16px 48px 0px #000000a6";
+        readonly toast: "0px 8px 24px 0px #00000080";
+    };
+};
+
+declare const hc: {
+    readonly color: {
+        readonly accent: {
+            readonly default: "#8b9bff";
+            readonly hover: "#e1e7ff";
+            readonly active: "#f4f6ff";
+            readonly subtle: "#0a0c25";
+            readonly "on-accent": "#000000";
+        };
+        readonly bg: {
+            readonly canvas: "#000000";
+            readonly surface: "#000000";
+            readonly raised: "#07090e";
+            readonly overlay: "#0f1217";
+            readonly inverse: "#ffffff";
+        };
+        readonly border: {
+            readonly subtle: "#777a82";
+            readonly default: "#b0b4bc";
+            readonly strong: "#ffffff";
+            readonly focus: "#d09945";
+        };
+        readonly text: {
+            readonly primary: "#ffffff";
+            readonly secondary: "#e7ebf4";
+            readonly tertiary: "#b0b4bc";
+            readonly disabled: "#777a82";
+            readonly inverse: "#000000";
+            readonly link: "#8b9bff";
+        };
+        readonly status: {
+            readonly success: {
+                readonly background: "#000000";
+                readonly foreground: "#59bc81";
+                readonly border: "#59bc81";
+            };
+            readonly warning: {
+                readonly background: "#000000";
+                readonly foreground: "#d09945";
+                readonly border: "#d09945";
+            };
+            readonly danger: {
+                readonly background: "#000000";
+                readonly foreground: "#f97770";
+                readonly border: "#f97770";
+            };
+            readonly info: {
+                readonly background: "#000000";
+                readonly foreground: "#4cb0e5";
+                readonly border: "#4cb0e5";
+            };
+        };
+        readonly chart: {
+            readonly axis: "#e7ebf4";
+            readonly grid: "#44484e";
+            readonly muted: "#92959d";
+            readonly reference: "#b0b4bc";
+            readonly categorical: {
+                readonly "1": "#70adfb";
+                readonly "2": "#e99355";
+                readonly "3": "#53c48e";
+                readonly "4": "#e189c5";
+                readonly "5": "#c5a93b";
+                readonly "6": "#00c1d0";
+                readonly "7": "#f28881";
+                readonly "8": "#b897f0";
+            };
+            readonly good: "#59bc81";
+            readonly warning: "#d09945";
+            readonly critical: "#f97770";
+        };
+        readonly selection: "#373e94";
+        readonly highlight: "#654200";
+        readonly scrim: "rgba(0, 0, 0, 0.9)";
+    };
+    readonly shadow: {
+        readonly raised: "0px 0px 0px 0px #00000000";
+        readonly overlay: "0px 0px 0px 0px #00000000";
+        readonly modal: "0px 0px 0px 0px #00000000";
+        readonly toast: "0px 0px 0px 0px #00000000";
+    };
+};
+
+declare const light: {
+    readonly color: {
+        readonly accent: {
+            readonly default: "#444cb2";
+            readonly hover: "#373e94";
+            readonly active: "#282d74";
+            readonly subtle: "#e1e7ff";
+            readonly "on-accent": "#ffffff";
+        };
+        readonly bg: {
+            readonly canvas: "#f8faff";
+            readonly surface: "#ffffff";
+            readonly raised: "#ffffff";
+            readonly overlay: "#ffffff";
+            readonly inverse: "#0f1217";
+        };
+        readonly border: {
+            readonly subtle: "#e7ebf4";
+            readonly default: "#777a82";
+            readonly strong: "#5d6067";
+            readonly focus: "#444cb2";
+        };
+        readonly text: {
+            readonly primary: "#0f1217";
+            readonly secondary: "#44484e";
+            readonly tertiary: "#5d6067";
+            readonly disabled: "#92959d";
+            readonly inverse: "#f8faff";
+            readonly link: "#373e94";
+        };
+        readonly status: {
+            readonly success: {
+                readonly background: "#d0f2da";
+                readonly foreground: "#003219";
+                readonly border: "#009253";
+            };
+            readonly warning: {
+                readonly background: "#fae4c7";
+                readonly foreground: "#3a2400";
+                readonly border: "#a46e00";
+            };
+            readonly danger: {
+                readonly background: "#ffdfdc";
+                readonly foreground: "#4f0a0d";
+                readonly border: "#d73337";
+            };
+            readonly info: {
+                readonly background: "#d0edff";
+                readonly foreground: "#002d42";
+                readonly border: "#0084b8";
+            };
+        };
+        readonly chart: {
+            readonly axis: "#44484e";
+            readonly grid: "#e7ebf4";
+            readonly muted: "#777a82";
+            readonly reference: "#5d6067";
+            readonly categorical: {
+                readonly "1": "#2971c6";
+                readonly "2": "#ac5700";
+                readonly "3": "#008758";
+                readonly "4": "#a8488d";
+                readonly "5": "#867000";
+                readonly "6": "#00818c";
+                readonly "7": "#b94642";
+                readonly "8": "#8059bb";
+            };
+            readonly good: "#006d3c";
+            readonly warning: "#7b5100";
+            readonly critical: "#a12628";
+        };
+        readonly selection: "#8b9bff";
+        readonly highlight: "#d09945";
+        readonly scrim: "rgba(7, 9, 14, 0.5)";
+    };
+    readonly shadow: {
+        readonly raised: "0px 1px 3px 0px #0f12171a";
+        readonly overlay: "0px 6px 16px -2px #0f121724";
+        readonly modal: "0px 16px 40px -4px #0f12172e";
+        readonly toast: "0px 8px 24px -4px #0f121729";
+    };
+};
+
+/** Prefix of every CSS custom property the kit emits. */
+declare const CSS_VAR_PREFIX = "kit";
+/** Attribute that selects a theme on the root or any subtree. */
+declare const THEME_ATTRIBUTE = "data-theme";
+/** Attribute that selects a density on the root or any subtree. */
+declare const DENSITY_ATTRIBUTE = "data-density";
+/** localStorage key where the user's theme choice persists. */
+declare const THEME_STORAGE_KEY = "kit-theme";
+/** localStorage key where the user's density choice persists. */
+declare const DENSITY_STORAGE_KEY = "kit-density";
+declare const themeNames: readonly ["light", "dark", "hc"];
+declare const densityNames: readonly ["compact", "default", "comfortable"];
+type ThemeName = (typeof themeNames)[number];
+type DensityName = (typeof densityNames)[number];
+/** Raw token values per theme, for charts and canvases that need real colors. */
+declare const themes: {
+    readonly light: {
+        readonly color: {
+            readonly accent: {
+                readonly default: "#444cb2";
+                readonly hover: "#373e94";
+                readonly active: "#282d74";
+                readonly subtle: "#e1e7ff";
+                readonly "on-accent": "#ffffff";
+            };
+            readonly bg: {
+                readonly canvas: "#f8faff";
+                readonly surface: "#ffffff";
+                readonly raised: "#ffffff";
+                readonly overlay: "#ffffff";
+                readonly inverse: "#0f1217";
+            };
+            readonly border: {
+                readonly subtle: "#e7ebf4";
+                readonly default: "#777a82";
+                readonly strong: "#5d6067";
+                readonly focus: "#444cb2";
+            };
+            readonly text: {
+                readonly primary: "#0f1217";
+                readonly secondary: "#44484e";
+                readonly tertiary: "#5d6067";
+                readonly disabled: "#92959d";
+                readonly inverse: "#f8faff";
+                readonly link: "#373e94";
+            };
+            readonly status: {
+                readonly success: {
+                    readonly background: "#d0f2da";
+                    readonly foreground: "#003219";
+                    readonly border: "#009253";
+                };
+                readonly warning: {
+                    readonly background: "#fae4c7";
+                    readonly foreground: "#3a2400";
+                    readonly border: "#a46e00";
+                };
+                readonly danger: {
+                    readonly background: "#ffdfdc";
+                    readonly foreground: "#4f0a0d";
+                    readonly border: "#d73337";
+                };
+                readonly info: {
+                    readonly background: "#d0edff";
+                    readonly foreground: "#002d42";
+                    readonly border: "#0084b8";
+                };
+            };
+            readonly chart: {
+                readonly axis: "#44484e";
+                readonly grid: "#e7ebf4";
+                readonly muted: "#777a82";
+                readonly reference: "#5d6067";
+                readonly categorical: {
+                    readonly "1": "#2971c6";
+                    readonly "2": "#ac5700";
+                    readonly "3": "#008758";
+                    readonly "4": "#a8488d";
+                    readonly "5": "#867000";
+                    readonly "6": "#00818c";
+                    readonly "7": "#b94642";
+                    readonly "8": "#8059bb";
+                };
+                readonly good: "#006d3c";
+                readonly warning: "#7b5100";
+                readonly critical: "#a12628";
+            };
+            readonly selection: "#8b9bff";
+            readonly highlight: "#d09945";
+            readonly scrim: "rgba(7, 9, 14, 0.5)";
+        };
+        readonly shadow: {
+            readonly raised: "0px 1px 3px 0px #0f12171a";
+            readonly overlay: "0px 6px 16px -2px #0f121724";
+            readonly modal: "0px 16px 40px -4px #0f12172e";
+            readonly toast: "0px 8px 24px -4px #0f121729";
+        };
+    };
+    readonly dark: {
+        readonly color: {
+            readonly accent: {
+                readonly default: "#5d67ee";
+                readonly hover: "#5057dc";
+                readonly active: "#444cb2";
+                readonly subtle: "#1d2059";
+                readonly "on-accent": "#ffffff";
+            };
+            readonly bg: {
+                readonly canvas: "#07090e";
+                readonly surface: "#0f1217";
+                readonly raised: "#181b20";
+                readonly overlay: "#24262c";
+                readonly inverse: "#f8faff";
+            };
+            readonly border: {
+                readonly subtle: "#24262c";
+                readonly default: "#777a82";
+                readonly strong: "#92959d";
+                readonly focus: "#6e7cfd";
+            };
+            readonly text: {
+                readonly primary: "#f8faff";
+                readonly secondary: "#b0b4bc";
+                readonly tertiary: "#92959d";
+                readonly disabled: "#44484e";
+                readonly inverse: "#07090e";
+                readonly link: "#8b9bff";
+            };
+            readonly status: {
+                readonly success: {
+                    readonly background: "#00220f";
+                    readonly foreground: "#59bc81";
+                    readonly border: "#006d3c";
+                };
+                readonly warning: {
+                    readonly background: "#271700";
+                    readonly foreground: "#d09945";
+                    readonly border: "#7b5100";
+                };
+                readonly danger: {
+                    readonly background: "#340909";
+                    readonly foreground: "#f97770";
+                    readonly border: "#a12628";
+                };
+                readonly info: {
+                    readonly background: "#001e2d";
+                    readonly foreground: "#4cb0e5";
+                    readonly border: "#00628a";
+                };
+            };
+            readonly chart: {
+                readonly axis: "#b0b4bc";
+                readonly grid: "#24262c";
+                readonly muted: "#777a82";
+                readonly reference: "#92959d";
+                readonly categorical: {
+                    readonly "1": "#70adfb";
+                    readonly "2": "#e99355";
+                    readonly "3": "#53c48e";
+                    readonly "4": "#e189c5";
+                    readonly "5": "#c5a93b";
+                    readonly "6": "#00c1d0";
+                    readonly "7": "#f28881";
+                    readonly "8": "#b897f0";
+                };
+                readonly good: "#009253";
+                readonly warning: "#a46e00";
+                readonly critical: "#d73337";
+            };
+            readonly selection: "#282d74";
+            readonly highlight: "#4d3200";
+            readonly scrim: "rgba(0, 0, 0, 0.7)";
+        };
+        readonly shadow: {
+            readonly raised: "0px 0px 0px 1px #ffffff14";
+            readonly overlay: "0px 8px 24px 0px #00000080";
+            readonly modal: "0px 16px 48px 0px #000000a6";
+            readonly toast: "0px 8px 24px 0px #00000080";
+        };
+    };
+    readonly hc: {
+        readonly color: {
+            readonly accent: {
+                readonly default: "#8b9bff";
+                readonly hover: "#e1e7ff";
+                readonly active: "#f4f6ff";
+                readonly subtle: "#0a0c25";
+                readonly "on-accent": "#000000";
+            };
+            readonly bg: {
+                readonly canvas: "#000000";
+                readonly surface: "#000000";
+                readonly raised: "#07090e";
+                readonly overlay: "#0f1217";
+                readonly inverse: "#ffffff";
+            };
+            readonly border: {
+                readonly subtle: "#777a82";
+                readonly default: "#b0b4bc";
+                readonly strong: "#ffffff";
+                readonly focus: "#d09945";
+            };
+            readonly text: {
+                readonly primary: "#ffffff";
+                readonly secondary: "#e7ebf4";
+                readonly tertiary: "#b0b4bc";
+                readonly disabled: "#777a82";
+                readonly inverse: "#000000";
+                readonly link: "#8b9bff";
+            };
+            readonly status: {
+                readonly success: {
+                    readonly background: "#000000";
+                    readonly foreground: "#59bc81";
+                    readonly border: "#59bc81";
+                };
+                readonly warning: {
+                    readonly background: "#000000";
+                    readonly foreground: "#d09945";
+                    readonly border: "#d09945";
+                };
+                readonly danger: {
+                    readonly background: "#000000";
+                    readonly foreground: "#f97770";
+                    readonly border: "#f97770";
+                };
+                readonly info: {
+                    readonly background: "#000000";
+                    readonly foreground: "#4cb0e5";
+                    readonly border: "#4cb0e5";
+                };
+            };
+            readonly chart: {
+                readonly axis: "#e7ebf4";
+                readonly grid: "#44484e";
+                readonly muted: "#92959d";
+                readonly reference: "#b0b4bc";
+                readonly categorical: {
+                    readonly "1": "#70adfb";
+                    readonly "2": "#e99355";
+                    readonly "3": "#53c48e";
+                    readonly "4": "#e189c5";
+                    readonly "5": "#c5a93b";
+                    readonly "6": "#00c1d0";
+                    readonly "7": "#f28881";
+                    readonly "8": "#b897f0";
+                };
+                readonly good: "#59bc81";
+                readonly warning: "#d09945";
+                readonly critical: "#f97770";
+            };
+            readonly selection: "#373e94";
+            readonly highlight: "#654200";
+            readonly scrim: "rgba(0, 0, 0, 0.9)";
+        };
+        readonly shadow: {
+            readonly raised: "0px 0px 0px 0px #00000000";
+            readonly overlay: "0px 0px 0px 0px #00000000";
+            readonly modal: "0px 0px 0px 0px #00000000";
+            readonly toast: "0px 0px 0px 0px #00000000";
+        };
+    };
+};
+/** Raw token values per density. */
+declare const densities: {
+    readonly compact: {
+        readonly size: {
+            readonly control: {
+                readonly xs: "20px";
+                readonly sm: "24px";
+                readonly md: "28px";
+                readonly lg: "32px";
+                readonly xl: "40px";
+            };
+        };
+        readonly space: {
+            readonly control: {
+                readonly inline: {
+                    readonly xs: "4px";
+                    readonly sm: "4px";
+                    readonly md: "8px";
+                    readonly lg: "12px";
+                    readonly xl: "16px";
+                };
+                readonly gap: "4px";
+            };
+        };
+    };
+    readonly default: {
+        readonly size: {
+            readonly control: {
+                readonly xs: "24px";
+                readonly sm: "28px";
+                readonly md: "32px";
+                readonly lg: "40px";
+                readonly xl: "48px";
+            };
+        };
+        readonly space: {
+            readonly control: {
+                readonly inline: {
+                    readonly xs: "8px";
+                    readonly sm: "8px";
+                    readonly md: "12px";
+                    readonly lg: "16px";
+                    readonly xl: "20px";
+                };
+                readonly gap: "8px";
+            };
+        };
+    };
+    readonly comfortable: {
+        readonly size: {
+            readonly control: {
+                readonly xs: "28px";
+                readonly sm: "32px";
+                readonly md: "40px";
+                readonly lg: "48px";
+                readonly xl: "56px";
+            };
+        };
+        readonly space: {
+            readonly control: {
+                readonly inline: {
+                    readonly xs: "12px";
+                    readonly sm: "12px";
+                    readonly md: "16px";
+                    readonly lg: "20px";
+                    readonly xl: "24px";
+                };
+                readonly gap: "12px";
+            };
+        };
+    };
+};
+type Leaves<T, Path extends string = ""> = T extends string | number ? Path : {
+    [K in keyof T & string]: Leaves<T[K], Path extends "" ? K : `${Path}.${K}`>;
+}[keyof T & string];
+type BaseTokenPath = Leaves<typeof base>;
+type ComponentTokenPath = Leaves<typeof component>;
+type ThemeTokenPath = Leaves<typeof light>;
+type DensityTokenPath = Leaves<typeof densityDefault>;
+/** Dot path of any token, for example `color.bg.surface`. */
+type TokenPath = BaseTokenPath | ComponentTokenPath | ThemeTokenPath | DensityTokenPath;
+/** The CSS custom property name for a token path: `color.bg.surface` becomes `--kit-color-bg-surface`. */
+declare function cssVarName(path: TokenPath): string;
+/** A `var()` reference for a token path, for inline styles and canvas code. */
+declare function cssVar(path: TokenPath, fallback?: string): string;
+
+export { CSS_VAR_PREFIX, DENSITY_ATTRIBUTE, DENSITY_STORAGE_KEY, THEME_ATTRIBUTE, THEME_STORAGE_KEY, base, component, cssVar, cssVarName, dark, densities, densityComfortable, densityCompact, densityDefault, densityNames, hc, light, themeNames, themes };
+export type { BaseTokenPath, ComponentTokenPath, DensityName, DensityTokenPath, ThemeName, ThemeTokenPath, TokenPath };