@papyrus-ui/styles 0.2.0 → 0.3.1

package/dist/types/styles/global.css.d.ts

@@ -5,159 +5,1575 @@
 /**
  * Define variables
  */
-export declare const vars: {
+export declare const lightThemeTokens: {
+    color: {
+        black: string;
+        white: string;
+        transparent: string;
+        primary900: string;
+        primary800: string;
+        primary700: string;
+        primary600: string; /**
+         * Document
+         * ========
+         */
+        primary500: string;
+        primary400: string;
+        primary300: string;
+        primary200: string;
+        primary100: string;
+        primary50: string;
+        secondary900: string;
+        secondary800: string;
+        secondary700: string;
+        secondary600: string;
+        secondary500: string;
+        secondary400: string;
+        secondary300: string;
+        secondary200: string;
+        secondary100: string;
+        secondary50: string;
+        info900: string;
+        info800: string;
+        info700: string;
+        info600: string;
+        info500: string;
+        info400: string;
+        info300: string;
+        info200: string;
+        info100: string;
+        info50: string;
+        success900: string;
+        success800: string;
+        success700: string;
+        success600: string;
+        success500: string;
+        success400: string;
+        success300: string;
+        success200: string;
+        success100: string;
+        success50: string;
+        warning900: string;
+        warning800: string;
+        warning700: string;
+        warning600: string;
+        warning500: string;
+        warning400: string;
+        warning300: string;
+        warning200: string;
+        warning100: string;
+        warning50: string;
+        danger900: string;
+        danger800: string;
+        danger700: string;
+        danger600: string;
+        danger500: string;
+        danger400: string;
+        danger300: string;
+        danger200: string;
+        danger100: string;
+        danger50: string;
+        neutral900: string;
+        neutral800: string;
+        neutral700: string;
+        neutral600: string;
+        neutral500: string;
+        neutral400: string;
+        neutral300: string;
+        neutral200: string;
+        neutral100: string;
+        neutral50: string;
+        light900: string;
+        light800: string;
+        light700: string;
+        light600: string;
+        light500: string;
+        light400: string;
+        light300: string;
+        light200: string;
+        light100: string;
+        light50: string;
+        dark900: string;
+        dark800: string;
+        dark700: string;
+        dark600: string;
+        dark500: string;
+        dark400: string;
+        dark300: string;
+        dark200: string;
+        dark100: string;
+        /**
+         * Reset focus styles for input components.
+         */
+        dark50: string;
+        disabled: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    borderRadius: {
+        full: string;
+        "3xl": string;
+        "2xl": string;
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        button: string;
+        tag: string;
+    };
+    gradient: {
+        highlight: string;
+    };
+    transition: {
+        base: string;
+        fade: string;
+        collapse: string;
+    };
+    typography: {
+        button: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            textDecoration: string;
+        };
+        caption: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            textDecoration: string;
+        };
+        label: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            textDecoration: string;
+        };
+        body: {
+            md: {
+                primary: {
+                    regular: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    bold: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    regular: {
+                        fontFamily: string;
+                        /**
+                         * Set cursor pointer for checkbox and radio labels
+                         */
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    bold: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            sm: {
+                primary: {
+                    regular: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    bold: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    regular: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    bold: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+        };
+        heading: {
+            "3xl": {
+                primary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    /**
+                     * Increase thumb size on hover for WebKit range inputs.
+                     */
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            "2xl": {
+                primary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        /**
+                         * Remove the default spacing and border for appropriate components.
+                         */
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string; /**
+                         * Remove default spacing and border for fieldsets.
+                         */
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            xl: {
+                primary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            lg: {
+                primary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            md: {
+                primary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            sm: {
+                primary: {
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+        };
+    };
     boxShadow: {
-        focusDanger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        focusSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        inset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        focus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        inset: string;
+        sm: string;
+        md: string;
+        lg: string;
+        focus: string;
+        focusDanger: string;
+        focusSuccess: string;
     };
-    fontFamily: {
-        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const darkThemeTokens: {
+    color: {
+        black: string;
+        white: string;
+        transparent: string;
+        primary900: string;
+        primary800: string;
+        primary700: string;
+        primary600: string; /**
+         * Document
+         * ========
+         */
+        primary500: string;
+        primary400: string;
+        primary300: string;
+        primary200: string;
+        primary100: string;
+        primary50: string;
+        secondary900: string;
+        secondary800: string;
+        secondary700: string;
+        secondary600: string;
+        secondary500: string;
+        secondary400: string;
+        secondary300: string;
+        secondary200: string;
+        secondary100: string;
+        secondary50: string;
+        info900: string;
+        info800: string;
+        info700: string;
+        info600: string;
+        info500: string;
+        info400: string;
+        info300: string;
+        info200: string;
+        info100: string;
+        info50: string;
+        success900: string;
+        success800: string;
+        success700: string;
+        success600: string;
+        success500: string;
+        success400: string;
+        success300: string;
+        success200: string;
+        success100: string;
+        success50: string;
+        warning900: string;
+        warning800: string;
+        warning700: string;
+        warning600: string;
+        warning500: string;
+        warning400: string;
+        warning300: string;
+        warning200: string;
+        warning100: string;
+        warning50: string;
+        danger900: string;
+        danger800: string;
+        danger700: string;
+        danger600: string;
+        danger500: string;
+        danger400: string;
+        danger300: string;
+        danger200: string;
+        danger100: string;
+        danger50: string;
+        neutral900: string;
+        neutral800: string;
+        neutral700: string;
+        neutral600: string;
+        neutral500: string;
+        neutral400: string;
+        neutral300: string;
+        neutral200: string;
+        neutral100: string;
+        neutral50: string;
+        light900: string;
+        light800: string;
+        light700: string;
+        light600: string;
+        light500: string;
+        light400: string;
+        light300: string;
+        light200: string;
+        light100: string;
+        light50: string;
+        dark900: string;
+        dark800: string;
+        dark700: string;
+        dark600: string;
+        dark500: string;
+        dark400: string;
+        dark300: string;
+        dark200: string;
+        dark100: string;
+        /**
+         * Reset focus styles for input components.
+         */
+        dark50: string;
+        disabled: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
     };
     borderRadius: {
-        xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        '2xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        '3xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        full: string;
+        "3xl": string;
+        "2xl": string;
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+        button: string;
+        tag: string;
     };
+    gradient: {
+        highlight: string;
+    };
+    transition: {
+        base: string;
+        fade: string;
+        collapse: string;
+    };
+    typography: {
+        button: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            textDecoration: string;
+        };
+        caption: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            textDecoration: string;
+        };
+        label: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            letterSpacing: string;
+            textTransform: string;
+            textDecoration: string;
+        };
+        body: {
+            md: {
+                primary: {
+                    regular: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    bold: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    regular: {
+                        fontFamily: string;
+                        /**
+                         * Set cursor pointer for checkbox and radio labels
+                         */
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    bold: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            sm: {
+                primary: {
+                    regular: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    bold: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    regular: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    bold: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+        };
+        heading: {
+            "3xl": {
+                primary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    /**
+                     * Increase thumb size on hover for WebKit range inputs.
+                     */
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            "2xl": {
+                primary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        /**
+                         * Remove the default spacing and border for appropriate components.
+                         */
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string; /**
+                         * Remove default spacing and border for fieldsets.
+                         */
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            xl: {
+                primary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            lg: {
+                primary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            md: {
+                primary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+            sm: {
+                primary: {
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                    mobile: {
+                        fontFamily: string;
+                        fontSize: string;
+                        fontWeight: string;
+                        lineHeight: string;
+                        letterSpacing: string;
+                        textTransform: string;
+                        textDecoration: string;
+                    };
+                };
+            };
+        };
+    };
+    boxShadow: {
+        inset: string;
+        sm: string;
+        md: string;
+        lg: string;
+        focus: string;
+        focusDanger: string;
+        focusSuccess: string;
+    };
+};
+export declare const vars: {
     color: {
-        light500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        light300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        light100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        accent800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        success200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        accent600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        accent400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        success800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        dark200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        dark400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        success400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        success600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        light50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        dark50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        dark700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        danger200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        dark900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        accent300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        danger400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        transparent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         primary500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        accent100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        danger600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         warning800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        danger800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         warning600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         warning400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         warning200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        success50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         danger50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         light900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         light700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         light400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         light200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        accent900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        success100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        accent700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        accent500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        success700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        dark300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        success900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         dark500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        success300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        success500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         dark100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        accent50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        dark600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        warning50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        danger100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        dark800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        accent200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        danger300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        warning900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        danger500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        warning700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        danger700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        warning500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        primary800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        danger900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        warning300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        warning100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        light800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        light600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    letterSpacing: {
-        normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        wider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        widest: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        wide: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        tighter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        tight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontSize: {
+        xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        "2xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        "3xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        "4xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        "5xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        "6xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        "7xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        "8xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        "9xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    borderRadius: {
+        full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        "3xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        "2xl": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        '2xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        '3xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        '4xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        '5xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        '6xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    lineHeight: {
-        relaxed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        snug: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        loose: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        tight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        button: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tag: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     gradient: {
         highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        highlightAlt: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    fontWeight: {
-        extraLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        light: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        semiBold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        extraBold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        thin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     transition: {
         base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         fade: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         collapse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
+    typography: {
+        button: {
+            fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        caption: {
+            fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        label: {
+            fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        body: {
+            md: {
+                primary: {
+                    regular: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    bold: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+                secondary: {
+                    regular: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    bold: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            sm: {
+                primary: {
+                    regular: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    bold: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+                secondary: {
+                    regular: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    bold: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        };
+        heading: {
+            "3xl": {
+                primary: {
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            "2xl": {
+                primary: {
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            xl: {
+                primary: {
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            lg: {
+                primary: {
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            md: {
+                primary: {
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            sm: {
+                primary: {
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+                secondary: {
+                    desktop: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    mobile: {
+                        fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        letterSpacing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textTransform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        textDecoration: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        };
+    };
+    boxShadow: {
+        inset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        focus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        focusDanger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        focusSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
 };
+/**
+ * Define Themes
+ */
+export declare const lightTheme: string;
+export declare const darkTheme: string;