@tempoxyz/ds 0.3.10 → 0.3.13

package/dist/marketing/vars.d.ts

@@ -0,0 +1,907 @@
+import { Vars } from 'zyzz';
+/**
+ * The Marketing variable set. It starts as a copy of the Web variables, so marketing pages
+ * share the TDS 1.0 Core primitives and the Platform token names, and diverges as the
+ * Marketing designs define their own values. Marketing never imports the Web surface, so a
+ * change here does not reach product interfaces. Extend it to add page tokens.
+ *
+ * @example
+ * export const { style, vars } = Config.create({
+ *   id: 'site',
+ *   vars: Vars.extend(variables, { spacing: { section: '7.5rem' } }, { id: 'site/vars' }),
+ * })
+ */
+export declare const variables: Vars.Definition<{
+    readonly aspect: {
+        readonly video: "16 / 9";
+    };
+    readonly blur: {
+        readonly '4': "4px";
+        readonly '8': "8px";
+        readonly '12': "12px";
+        readonly '16': "16px";
+        readonly '24': "24px";
+        readonly '40': "40px";
+        readonly '64': "64px";
+    };
+    readonly borderWidth: {
+        readonly none: Vars.Reference<"spacing", "0rem">;
+        readonly regular: Vars.Reference<"spacing", "1px">;
+        readonly thick: Vars.Reference<"spacing", "0.125rem">;
+        readonly thin: Vars.Reference<"spacing", "0.5px">;
+    };
+    readonly breakpoint: {
+        readonly '640': "40rem";
+        readonly '768': "48rem";
+        readonly '1024': "64rem";
+        readonly '1280': "80rem";
+        readonly '1536': "96rem";
+    };
+    readonly color: {
+        readonly accent: {
+            readonly alpha: {
+                readonly regular: {
+                    readonly blue: {
+                        readonly '100': "rgb(68 113 237 / 0.08)";
+                        readonly '200': "rgb(116 152 251 / 0.16)";
+                    };
+                    readonly green: {
+                        readonly '100': "rgb(19 169 99 / 0.08)";
+                        readonly '200': "rgb(89 229 164 / 0.16)";
+                    };
+                    readonly orange: {
+                        readonly '100': "rgb(224 111 18 / 0.08)";
+                        readonly '200': "rgb(250 142 54 / 0.16)";
+                    };
+                    readonly red: {
+                        readonly '100': "rgb(235 52 23 / 0.08)";
+                        readonly '200': "rgb(245 92 69 / 0.16)";
+                    };
+                };
+                readonly strong: {
+                    readonly blue: {
+                        readonly '100': "rgb(68 113 237 / 0.16)";
+                        readonly '200': "rgb(116 152 251 / 0.32)";
+                    };
+                    readonly green: {
+                        readonly '100': "rgb(19 169 99 / 0.16)";
+                        readonly '200': "rgb(89 229 164 / 0.32)";
+                    };
+                    readonly orange: {
+                        readonly '100': "rgb(224 111 18 / 0.16)";
+                        readonly '200': "rgb(250 142 54 / 0.32)";
+                    };
+                    readonly red: {
+                        readonly '100': "rgb(235 52 23 / 0.16)";
+                        readonly '200': "rgb(245 92 69 / 0.32)";
+                    };
+                };
+            };
+            readonly blue: {
+                readonly background: {
+                    readonly dark: "#7498fb";
+                    readonly light: "#4471ed";
+                };
+                readonly foreground: {
+                    readonly dark: "#7498fb";
+                    readonly light: "#3059d3";
+                };
+            };
+            readonly cyan: {
+                readonly background: {
+                    readonly dark: "#48cce6";
+                    readonly light: "#00aacb";
+                };
+                readonly foreground: {
+                    readonly dark: "#48cce6";
+                    readonly light: "#056e85";
+                };
+            };
+            readonly green: {
+                readonly background: {
+                    readonly dark: "#59e5a4";
+                    readonly light: "#13a963";
+                };
+                readonly foreground: {
+                    readonly dark: "#59e5a4";
+                    readonly light: "#007441";
+                };
+            };
+            readonly magenta: {
+                readonly background: {
+                    readonly dark: "#e54088";
+                    readonly light: "#cc055b";
+                };
+                readonly foreground: {
+                    readonly dark: "#e54088";
+                    readonly light: "#ba0352";
+                };
+            };
+            readonly olive: {
+                readonly background: {
+                    readonly dark: "#c4dc65";
+                    readonly light: "#95b226";
+                };
+                readonly foreground: {
+                    readonly dark: "#c4dc65";
+                    readonly light: "#596d01";
+                };
+            };
+            readonly orange: {
+                readonly background: {
+                    readonly dark: "#fa8e36";
+                    readonly light: "#e06f12";
+                };
+                readonly foreground: {
+                    readonly dark: "#fa8e36";
+                    readonly light: "#a14d04";
+                };
+            };
+            readonly purple: {
+                readonly background: {
+                    readonly dark: "#cf79ef";
+                    readonly light: "#ba59dd";
+                };
+                readonly foreground: {
+                    readonly dark: "#cf79ef";
+                    readonly light: "#9835ba";
+                };
+            };
+            readonly red: {
+                readonly background: {
+                    readonly dark: "#f55c45";
+                    readonly light: "#eb3417";
+                };
+                readonly foreground: {
+                    readonly dark: "#f55c45";
+                    readonly light: "#bf1d00";
+                };
+            };
+            readonly violet: {
+                readonly background: {
+                    readonly dark: "#9877f1";
+                    readonly light: "#7e59e4";
+                };
+                readonly foreground: {
+                    readonly dark: "#9877f1";
+                    readonly light: "#6f47d1";
+                };
+            };
+        };
+        readonly action: {
+            readonly danger: {
+                readonly fill: {
+                    readonly hover: "#eb3417";
+                    readonly rest: "#eb3417";
+                };
+                readonly label: {
+                    rest: Vars.Reference<"color", "#fff">;
+                };
+            };
+            readonly focusRing: {
+                dark: Vars.Reference<"color", "#ffffff8f">;
+                light: Vars.Reference<"color", "#0000008f">;
+            };
+            readonly primary: {
+                fill: {
+                    hover: {
+                        dark: Vars.Reference<"color", "#ffffffcc">;
+                        light: Vars.Reference<"color", "#000000cc">;
+                    };
+                    pressed: {
+                        dark: Vars.Reference<"color", "#ffffffa3">;
+                        light: Vars.Reference<"color", "#00000099">;
+                    };
+                };
+            };
+            readonly secondary: {
+                fill: {
+                    hover: {
+                        dark: Vars.Reference<"color", "#ffffff0f">;
+                        light: Vars.Reference<"color", "#0000000f">;
+                    };
+                    pressed: {
+                        dark: Vars.Reference<"color", "#ffffff3d">;
+                        light: Vars.Reference<"color", "#00000029">;
+                    };
+                };
+            };
+            readonly tertiary: {
+                fill: {
+                    hover: {
+                        dark: Vars.Reference<"color", "#ffffff0a">;
+                        light: Vars.Reference<"color", "#0000000a">;
+                    };
+                    pressed: {
+                        dark: Vars.Reference<"color", "#ffffff0f">;
+                        light: Vars.Reference<"color", "#0000000f">;
+                    };
+                };
+            };
+        };
+        readonly background: {
+            readonly elevated: {
+                readonly dark: "#1a1a1a";
+                readonly light: Vars.Reference<"color", "#fff">;
+            };
+            readonly menu: {
+                readonly dark: "#222";
+                readonly light: Vars.Reference<"color", "#fff">;
+            };
+            readonly primary: {
+                dark: Vars.Reference<"color", "#141414">;
+                light: Vars.Reference<"color", "#f5f5f5">;
+            };
+            readonly secondary: {
+                dark: Vars.Reference<"color", "#141414">;
+                light: Vars.Reference<"color", "#fff">;
+            };
+            readonly sidebar: {
+                readonly dark: Vars.Reference<"color", "#141414">;
+                readonly light: "#fafafa";
+            };
+        };
+        readonly border: {
+            readonly focus: {
+                dark: Vars.Reference<"color", "#ffffff85">;
+                light: Vars.Reference<"color", "#00000066">;
+            };
+            readonly negative: {
+                dark: Vars.Reference<"color", "rgb(245 92 69 / 0.32)">;
+                light: Vars.Reference<"color", "rgb(235 52 23 / 0.16)">;
+            };
+            readonly positive: {
+                dark: Vars.Reference<"color", "rgb(89 229 164 / 0.32)">;
+                light: Vars.Reference<"color", "rgb(19 169 99 / 0.16)">;
+            };
+            readonly warning: {
+                dark: Vars.Reference<"color", "rgb(250 142 54 / 0.32)">;
+                light: Vars.Reference<"color", "rgb(224 111 18 / 0.16)">;
+            };
+        };
+        readonly component: {
+            readonly button: {
+                primary: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#fff">;
+                        light: Vars.Reference<"color", "#000">;
+                    };
+                };
+                secondary: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff29">;
+                        light: Vars.Reference<"color", "#00000014">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#ffffff1f">;
+                        light: Vars.Reference<"color", "#0000000a">;
+                    };
+                };
+                tertiary: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                };
+            };
+            readonly input: {
+                overlay: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#ffffff3d">;
+                        light: Vars.Reference<"color", "#00000033">;
+                    };
+                };
+                primary: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#ffffff1f">;
+                        light: Vars.Reference<"color", "#0000000a">;
+                    };
+                };
+                secondary: {
+                    border: {
+                        dark: Vars.Reference<"color", "#ffffff3d">;
+                        light: Vars.Reference<"color", "#00000029">;
+                    };
+                    fill: {
+                        dark: Vars.Reference<"color", "#ffffff00">;
+                        light: Vars.Reference<"color", "#00000000">;
+                    };
+                };
+            };
+            readonly pullTab: {
+                dark: Vars.Reference<"color", "#ffffff3d">;
+                light: Vars.Reference<"color", "#0000001f">;
+            };
+        };
+        readonly container: {
+            readonly accent: Vars.Reference<"color", "rgb(68 113 237 / 0.08)">;
+            readonly control: {
+                dark: Vars.Reference<"color", "#ffffff0a">;
+                light: Vars.Reference<"color", "#0000000a">;
+            };
+            readonly negative: {
+                dark: Vars.Reference<"color", "rgb(245 92 69 / 0.16)">;
+                light: Vars.Reference<"color", "rgb(235 52 23 / 0.08)">;
+            };
+            readonly positive: {
+                dark: Vars.Reference<"color", "rgb(89 229 164 / 0.16)">;
+                light: Vars.Reference<"color", "rgb(19 169 99 / 0.08)">;
+            };
+            readonly regular: {
+                dark: Vars.Reference<"color", "#ffffff14">;
+                light: Vars.Reference<"color", "#0000000a">;
+            };
+            readonly selected: {
+                dark: Vars.Reference<"color", "#ffffff1f">;
+                light: Vars.Reference<"color", "#fff">;
+            };
+            readonly solid: {
+                readonly dark: "#353535";
+                readonly light: "#e6e6e6";
+            };
+            readonly strong: {
+                dark: Vars.Reference<"color", "#ffffff29">;
+                light: Vars.Reference<"color", "#00000014">;
+            };
+            readonly special: "rgb(126 89 228 / 0.08)";
+            readonly subtle: {
+                dark: Vars.Reference<"color", "#ffffff14">;
+                light: Vars.Reference<"color", "#00000008">;
+            };
+            readonly warning: {
+                dark: Vars.Reference<"color", "rgb(250 142 54 / 0.16)">;
+                light: Vars.Reference<"color", "rgb(224 111 18 / 0.08)">;
+            };
+        };
+        readonly content: {
+            readonly accent: "#4471ed";
+            readonly negative: Vars.Reference<"color", "#eb3417" | "#f55c45">;
+            readonly positive: Vars.Reference<"color", "#13a963" | "#59e5a4">;
+            readonly primary: {
+                dark: Vars.Reference<"color", "#fff">;
+                light: Vars.Reference<"color", "#000">;
+            };
+            readonly secondary: {
+                dark: Vars.Reference<"color", "#ffffffa3">;
+                light: Vars.Reference<"color", "#0000008f">;
+            };
+            readonly special: "#7e59e4";
+            readonly subtle: {
+                dark: Vars.Reference<"color", "#ffffff33">;
+                light: Vars.Reference<"color", "#00000033">;
+            };
+            readonly tertiary: {
+                dark: Vars.Reference<"color", "#ffffff85">;
+                light: Vars.Reference<"color", "#00000066">;
+            };
+            readonly warning: Vars.Reference<"color", "#e06f12" | "#fa8e36">;
+        };
+        readonly inverse: {
+            readonly background: {
+                primary: {
+                    dark: Vars.Reference<"color", "#f5f5f5">;
+                    light: Vars.Reference<"color", "#000">;
+                };
+                secondary: {
+                    dark: Vars.Reference<"color", "#fff">;
+                    light: Vars.Reference<"color", "#141414">;
+                };
+            };
+            readonly container: {
+                regular: {
+                    dark: Vars.Reference<"color", "#0000000a">;
+                    light: Vars.Reference<"color", "#ffffff1f">;
+                };
+            };
+            readonly content: {
+                primary: {
+                    dark: Vars.Reference<"color", "#000">;
+                    light: Vars.Reference<"color", "#fff">;
+                };
+            };
+        };
+        readonly line: {
+            readonly card: {
+                readonly dark: "#ffffff0d";
+                readonly light: Vars.Reference<"color", "#00000014">;
+            };
+            readonly primary: {
+                dark: Vars.Reference<"color", "#ffffff3d">;
+                light: Vars.Reference<"color", "#00000029">;
+            };
+            readonly secondary: {
+                dark: Vars.Reference<"color", "#ffffff14">;
+                light: Vars.Reference<"color", "#00000014">;
+            };
+            readonly tertiary: {
+                dark: Vars.Reference<"color", "#ffffff14">;
+                light: Vars.Reference<"color", "#0000000a">;
+            };
+        };
+        readonly material: {
+            readonly regular: {
+                dark: Vars.Reference<"color", "#ffffff7a">;
+                light: Vars.Reference<"color", "#00000066">;
+            };
+            readonly texture: {
+                readonly dark: "#ffffff12";
+                readonly light: "#00000012";
+            };
+            readonly thick: {
+                dark: Vars.Reference<"color", "#ffffffa3">;
+                light: Vars.Reference<"color", "#00000099">;
+            };
+            readonly thin: {
+                dark: Vars.Reference<"color", "#ffffff3d">;
+                light: Vars.Reference<"color", "#00000033">;
+            };
+            readonly ultrathick: {
+                dark: Vars.Reference<"color", "#ffffffcc">;
+                light: Vars.Reference<"color", "#000000cc">;
+            };
+            readonly ultrathin: {
+                dark: Vars.Reference<"color", "#ffffff29">;
+                light: Vars.Reference<"color", "#00000014">;
+            };
+        };
+        readonly neutral: {
+            readonly '000': "#fff";
+            readonly '003': "#f7f7f7";
+            readonly '004': "#f5f5f5";
+            readonly '006': "#f0f0f0";
+            readonly '008': "#ebebeb";
+            readonly '012': "#e0e0e0";
+            readonly '016': "#d6d6d6";
+            readonly '020': "#ccc";
+            readonly '024': "#c2c2c2";
+            readonly '028': "#b8b8b8";
+            readonly '032': "#adadad";
+            readonly '036': "#a3a3a3";
+            readonly '040': "#999";
+            readonly '044': "#8f8f8f";
+            readonly '048': "#858585";
+            readonly '052': "#7a7a7a";
+            readonly '056': "#707070";
+            readonly '060': "#666";
+            readonly '064': "#5c5c5c";
+            readonly '068': "#525252";
+            readonly '072': "#474747";
+            readonly '076': "#3d3d3d";
+            readonly '080': "#333";
+            readonly '084': "#292929";
+            readonly '088': "#1f1f1f";
+            readonly '092': "#141414";
+            readonly '096': "#0a0a0a";
+            readonly '100': "#000";
+            readonly shade: {
+                readonly '000': "#00000000";
+                readonly '003': "#00000008";
+                readonly '004': "#0000000a";
+                readonly '006': "#0000000f";
+                readonly '008': "#00000014";
+                readonly '012': "#0000001f";
+                readonly '016': "#00000029";
+                readonly '020': "#00000033";
+                readonly '032': "#00000052";
+                readonly '040': "#00000066";
+                readonly '056': "#0000008f";
+                readonly '060': "#00000099";
+                readonly '080': "#000000cc";
+            };
+            readonly tint: {
+                readonly '000': "#ffffff00";
+                readonly '004': "#ffffff0a";
+                readonly '006': "#ffffff0f";
+                readonly '008': "#ffffff14";
+                readonly '012': "#ffffff1f";
+                readonly '016': "#ffffff29";
+                readonly '020': "#ffffff33";
+                readonly '024': "#ffffff3d";
+                readonly '040': "#ffffff66";
+                readonly '048': "#ffffff7a";
+                readonly '052': "#ffffff85";
+                readonly '056': "#ffffff8f";
+                readonly '064': "#ffffffa3";
+                readonly '080': "#ffffffcc";
+            };
+        };
+        readonly overlay: {
+            readonly action: {
+                readonly secondary: {
+                    readonly fill: {
+                        readonly hover: "#70707047";
+                    };
+                };
+                readonly tertiary: {
+                    fill: {
+                        hover: Vars.Reference<"color", "#ffffff1f">;
+                    };
+                };
+            };
+            readonly container: {
+                readonly regular: "#70707052";
+            };
+            readonly content: {
+                primary: Vars.Reference<"color", "#fff">;
+                secondary: Vars.Reference<"color", "#ffffffa3">;
+                tertiary: Vars.Reference<"color", "#ffffff85">;
+            };
+        };
+        readonly scrim: {
+            readonly regular: Vars.Reference<"color", "#00000029">;
+            readonly strong: Vars.Reference<"color", "#00000052">;
+        };
+        readonly shadow: {
+            readonly elevated: {
+                readonly dark: "#0000003d";
+                readonly light: Vars.Reference<"color", "#0000001f">;
+            };
+            readonly primary: {
+                dark: Vars.Reference<"color", "#00000052">;
+                light: Vars.Reference<"color", "#00000014">;
+            };
+            readonly secondary: {
+                dark: Vars.Reference<"color", "#00000029">;
+                light: Vars.Reference<"color", "#0000000a">;
+            };
+        };
+    };
+    readonly container: {
+        readonly '256': "16rem";
+        readonly '288': "18rem";
+        readonly '320': "20rem";
+        readonly '384': "24rem";
+        readonly '448': "28rem";
+        readonly '512': "32rem";
+        readonly '576': "36rem";
+        readonly '672': "42rem";
+        readonly '768': "48rem";
+        readonly '896': "56rem";
+        readonly '1024': "64rem";
+        readonly '1152': "72rem";
+        readonly '1280': "80rem";
+    };
+    readonly dropShadow: {
+        readonly '1': "0 1px 1px rgb(0 0 0 / 0.05)";
+        readonly '2': "0 1px 2px rgb(0 0 0 / 0.15)";
+        readonly '3': "0 3px 3px rgb(0 0 0 / 0.12)";
+        readonly '4': "0 4px 4px rgb(0 0 0 / 0.15)";
+        readonly '7': "0 9px 7px rgb(0 0 0 / 0.1)";
+        readonly '25': "0 25px 25px rgb(0 0 0 / 0.15)";
+    };
+    readonly ease: {
+        readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly 'in-out': "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly overshoot: "cubic-bezier(0.34, 1.36, 0.64, 1)";
+        readonly snappy: "cubic-bezier(0.23, 1, 0.32, 1)";
+        readonly spring: "cubic-bezier(0.32, 0.72, 0, 1)";
+    };
+    readonly fontFamily: {
+        readonly body: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"";
+        readonly display: "\"HB Set v0.96\", Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif";
+        readonly heading: "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif";
+        readonly mono: "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+    };
+    readonly fontSize: {
+        readonly '12': "0.75rem";
+        readonly '14': "0.875rem";
+        readonly '16': "1rem";
+        readonly '18': "1.125rem";
+        readonly '20': "1.25rem";
+        readonly '24': "1.5rem";
+        readonly '30': "1.875rem";
+        readonly '36': "2.25rem";
+        readonly '48': "3rem";
+        readonly '60': "3.75rem";
+        readonly '72': "4.5rem";
+        readonly '96': "6rem";
+        readonly '128': "8rem";
+    };
+    readonly insetShadow: {
+        readonly '0': "inset 0 1px rgb(0 0 0 / 0.05)";
+        readonly '1': "inset 0 1px 1px rgb(0 0 0 / 0.05)";
+        readonly '4': "inset 0 2px 4px rgb(0 0 0 / 0.05)";
+    };
+    readonly opacity: {
+        readonly disabled: 0.32;
+        readonly hover: 0.86;
+    };
+    readonly outlineOffset: {
+        readonly '-2': "-2px";
+        readonly '0': "0px";
+        readonly '2': "2px";
+    };
+    readonly outlineWidth: {
+        readonly '1': "1px";
+        readonly '2': "2px";
+    };
+    readonly perspective: {
+        readonly '100': "100px";
+        readonly '300': "300px";
+        readonly '500': "500px";
+        readonly '800': "800px";
+        readonly '1200': "1200px";
+    };
+    readonly radius: {
+        readonly '2xl': "calc(4rem * var(--tds-corner-scale, 1))";
+        readonly '2xs': "calc(0.5rem * var(--tds-corner-scale, 1))";
+        readonly '3xs': "calc(0.25rem * var(--tds-corner-scale, 1))";
+        readonly full: Vars.Reference<"spacing", "62.4375rem">;
+        readonly lg: "calc(2rem * var(--tds-corner-scale, 1))";
+        readonly md: "calc(1.5rem * var(--tds-corner-scale, 1))";
+        readonly none: Vars.Reference<"spacing", "0rem">;
+        readonly sm: "calc(1rem * var(--tds-corner-scale, 1))";
+        readonly xl: "calc(2.5rem * var(--tds-corner-scale, 1))";
+        readonly xs: "calc(0.75rem * var(--tds-corner-scale, 1))";
+    };
+    readonly scale: {
+        readonly enter: 0.96;
+        readonly press: 0.98;
+    };
+    readonly shadow: {
+        readonly large: "0 24px 64px #00000014, 0 8px 48px #00000014, 0 2px 8px #0000000a";
+        readonly regular: "0 8px 48px #0000000a, 0 4px 16px #0000000a, 0 2px 8px #0000000a";
+        readonly small: "0 4px 12px #0000000a, 0 2px 8px #0000000a, 0 0 2px #0000000a";
+    };
+    readonly spacing: {
+        readonly [-10]: "-0.625rem";
+        readonly [-12]: "-0.75rem";
+        readonly [-16]: "-1rem";
+        readonly [-20]: "-1.25rem";
+        readonly [-24]: "-1.5rem";
+        readonly [-4]: "-0.25rem";
+        readonly [-6]: "-0.375rem";
+        readonly [-8]: "-0.5rem";
+        readonly 0: "0rem";
+        readonly "0-5": "0.5px";
+        readonly 1: "1px";
+        readonly "1-5": "1.5px";
+        readonly 10: "0.625rem";
+        readonly 100: "6.25rem";
+        readonly 12: "0.75rem";
+        readonly 120: "7.5rem";
+        readonly 140: "8.75rem";
+        readonly 16: "1rem";
+        readonly 160: "10rem";
+        readonly 180: "11.25rem";
+        readonly 2: "0.125rem";
+        readonly 20: "1.25rem";
+        readonly 200: "12.5rem";
+        readonly 24: "1.5rem";
+        readonly 240: "15rem";
+        readonly 28: "1.75rem";
+        readonly 280: "17.5rem";
+        readonly 3: "0.1875rem";
+        readonly 32: "2rem";
+        readonly 320: "20rem";
+        readonly 36: "2.25rem";
+        readonly 360: "22.5rem";
+        readonly 4: "0.25rem";
+        readonly 40: "2.5rem";
+        readonly 44: "2.75rem";
+        readonly 48: "3rem";
+        readonly 52: "3.25rem";
+        readonly 56: "3.5rem";
+        readonly 6: "0.375rem";
+        readonly 60: "3.75rem";
+        readonly 64: "4rem";
+        readonly 72: "4.5rem";
+        readonly 8: "0.5rem";
+        readonly 80: "5rem";
+        readonly 999: "62.4375rem";
+        readonly none: Vars.Reference<"spacing", "0rem">;
+        readonly page: {
+            readonly gutter: Vars.Reference<"spacing", "0.75rem">;
+            readonly margin: Vars.Reference<"spacing", "1.5rem">;
+        };
+        readonly section: {
+            readonly lg: Vars.Reference<"spacing", "7.5rem">;
+            readonly md: Vars.Reference<"spacing", "5rem">;
+            readonly none: Vars.Reference<"spacing", "0rem">;
+            readonly sm: Vars.Reference<"spacing", "2.5rem">;
+            readonly xl: Vars.Reference<"spacing", "11.25rem">;
+            readonly xs: Vars.Reference<"spacing", "1.5rem">;
+        };
+    };
+    readonly textShadow: {
+        readonly '0': "0px 1px 0px rgb(0 0 0 / 0.15)";
+        readonly '1': "0px 1px 1px rgb(0 0 0 / 0.2)";
+        readonly '2': "0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075)";
+        readonly '4': "0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)";
+        readonly '8': "0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)";
+    };
+    readonly transitionDuration: {
+        readonly '0': "0ms";
+        readonly '100': "100ms";
+        readonly '120': "120ms";
+        readonly '140': "140ms";
+        readonly '150': "150ms";
+        readonly '160': "160ms";
+        readonly '180': "180ms";
+        readonly '200': "200ms";
+        readonly '220': "220ms";
+        readonly '240': "240ms";
+        readonly '280': "280ms";
+        readonly '320': "320ms";
+    };
+    readonly typography: {
+        readonly body: {
+            readonly b1: {
+                readonly fontFamily: Vars.Reference<"string", "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"">;
+                readonly fontSize: "16px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "-.18px";
+                readonly lineHeight: "22px";
+            };
+            readonly b1Strong: {
+                readonly fontFamily: Vars.Reference<"string", "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"">;
+                readonly fontSize: "16px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: "-.18px";
+                readonly lineHeight: "22px";
+            };
+            readonly b2: {
+                readonly fontFamily: Vars.Reference<"string", "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"">;
+                readonly fontSize: "14px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "-.09px";
+                readonly lineHeight: "20px";
+            };
+            readonly b2Strong: {
+                readonly fontFamily: Vars.Reference<"string", "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"">;
+                readonly fontSize: "14px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: "-.09px";
+                readonly lineHeight: "20px";
+            };
+            readonly b3: {
+                readonly fontFamily: Vars.Reference<"string", "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"">;
+                readonly fontSize: "12px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: ".01px";
+                readonly lineHeight: "16px";
+            };
+            readonly b3Strong: {
+                readonly fontFamily: Vars.Reference<"string", "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"">;
+                readonly fontSize: "12px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: ".01px";
+                readonly lineHeight: "16px";
+            };
+        };
+        readonly display: {
+            readonly d1: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "44px";
+                readonly fontWeight: 300;
+                readonly letterSpacing: "-1.76px";
+                readonly lineHeight: "41.8px";
+            };
+            readonly d2: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "36px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "-1.44px";
+                readonly lineHeight: "34.2px";
+            };
+        };
+        readonly heading: {
+            readonly h1: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "32px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: "-.48px";
+                readonly lineHeight: "36.8px";
+            };
+            readonly h2: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "24px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: "-.36px";
+                readonly lineHeight: "27.6px";
+            };
+            readonly h3: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "20px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: "-.3px";
+                readonly lineHeight: "23px";
+            };
+            readonly h4: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "18px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: "-.27px";
+                readonly lineHeight: "20.7px";
+            };
+        };
+        readonly label: {
+            readonly l2: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "14px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: ".14px";
+                readonly lineHeight: "20px";
+            };
+            readonly l3: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "12px";
+                readonly fontWeight: 500;
+                readonly letterSpacing: ".15px";
+                readonly lineHeight: "16px";
+            };
+        };
+        readonly mono: {
+            readonly m1: {
+                readonly fontFamily: Vars.Reference<"string", "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace">;
+                readonly fontSize: "12px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "0px";
+                readonly lineHeight: "16px";
+            };
+        };
+        readonly utility: {
+            readonly m1: {
+                readonly fontFamily: Vars.Reference<"string", "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace">;
+                readonly fontSize: "12px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: ".72px";
+                readonly lineHeight: "16px";
+            };
+            readonly m2: {
+                readonly fontFamily: Vars.Reference<"string", "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace">;
+                readonly fontSize: "10px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: ".6px";
+                readonly lineHeight: "12px";
+            };
+        };
+        readonly value: {
+            readonly v1: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "80px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "-2.4px";
+                readonly lineHeight: "normal";
+            };
+            readonly v2: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "52px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "-1.56px";
+                readonly lineHeight: "normal";
+            };
+            readonly v3: {
+                readonly fontFamily: Vars.Reference<"string", "Pilat, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif">;
+                readonly fontSize: "40px";
+                readonly fontWeight: 400;
+                readonly letterSpacing: "-1.2px";
+                readonly lineHeight: "normal";
+            };
+        };
+    };
+    readonly zIndex: {
+        readonly modal: 60;
+        readonly overlay: 40;
+        readonly popover: 50;
+        readonly toast: 1000;
+    };
+}>;
+//# sourceMappingURL=vars.d.ts.map