@ctlyst.id/voila-ui 1.0.0

package/dist/types/theme/styles/atoms/typography.css.d.ts

@@ -0,0 +1,329 @@
+export declare const typographyAtoms: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[{
+    config: {
+        fontFamily: {
+            values: {
+                playfair: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                poppins: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+            };
+            staticScale: {
+                readonly playfair: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly poppins: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            name: "fontFamily";
+        };
+        fontSize: {
+            values: {
+                caption: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                footer: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                heading1: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                heading2: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                heading3: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                heading4: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                heading5: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                heading6: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                subtitle1: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                subtitle2: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                body1: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                body2: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+            };
+            staticScale: {
+                readonly heading1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly heading2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly heading3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly heading4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly heading5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly heading6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly subtitle1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly subtitle2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly body1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly body2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly footer: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            name: "fontSize";
+        };
+        lineHeight: {
+            values: {
+                none: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                normal: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                16: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                20: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                24: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                28: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                32: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                40: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                48: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                56: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+            };
+            staticScale: {
+                readonly normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly 16: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly 20: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly 24: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly 28: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly 32: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly 40: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly 48: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly 56: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            name: "lineHeight";
+        };
+        letterSpacing: {
+            values: {
+                normal: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                tighter: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                tight: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                wide: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                wider: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+            };
+            staticScale: {
+                readonly tighter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly tight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly wide: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly wider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            name: "letterSpacing";
+        };
+        textAlign: {
+            values: {
+                center: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                left: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                right: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                justify: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+            };
+            staticScale: ("center" | "left" | "right" | "justify")[];
+            name: "textAlign";
+        };
+        fontWeight: {
+            values: {
+                bold: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                normal: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                black: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                hairline: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                thin: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                light: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                medium: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                semibold: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+                extrabold: {
+                    default: string;
+                    conditions: Record<string | number, string>;
+                };
+            };
+            staticScale: {
+                readonly hairline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly thin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly light: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly semibold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly extrabold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                readonly black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            name: "fontWeight";
+        };
+    };
+} & {
+    config: {
+        fontFamily: {
+            dynamic: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            dynamicScale: true;
+            name: "fontFamily";
+            vars: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+        };
+        fontSize: {
+            dynamic: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            dynamicScale: true;
+            name: "fontSize";
+            vars: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+        };
+        lineHeight: {
+            dynamic: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            dynamicScale: true;
+            name: "lineHeight";
+            vars: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+        };
+        letterSpacing: {
+            dynamic: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            dynamicScale: true;
+            name: "letterSpacing";
+            vars: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+        };
+        textAlign: {
+            dynamic: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            dynamicScale: true;
+            name: "textAlign";
+            vars: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+        };
+        fontStyle: {
+            dynamic: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+            dynamicScale: true;
+            name: "fontStyle";
+            vars: {
+                default: string;
+                conditions: Record<string | number, string>;
+            };
+        };
+    };
+} & {
+    config: {};
+}]>;
+export type TypographyAtoms = Parameters<typeof typographyAtoms>[0];

package/dist/types/theme/styles/globals.css.d.ts

@@ -0,0 +1,3 @@
+declare var __default__: string;
+export default __default__;
+export declare var rippleEffect: string;

package/dist/types/theme/styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from './atoms';
+export { theme } from './theme.css';
+export { getVarName, motionSafe, responsiveStyle } from './utils';

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

@@ -0,0 +1,240 @@
+export declare const theme: {
+    breakpoints: {
+        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})`;
+    };
+    borderStyles: {
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        solid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    borderWidths: {
+        0: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    colors: {
+        blackTypoHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        blackTypoMedium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        blackTypoLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        whiteTypoHigh: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        whiteTypoMedium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        whiteTypoLow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        redSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        redSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        yellowSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        yellowSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        blueSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        blueSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        greenSurface1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        greenSurface2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        redAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        redAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        redAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        yellowAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        yellowAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        yellowAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        blueAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        blueAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        blueAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        greenAccent1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        greenAccent2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        greenAccent3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        red1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        red2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        red3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        yellow1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        yellow2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        yellow3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        blue1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        blue2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        blue3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        green1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        green2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        green3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `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})`;
+        grey1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        grey2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        grey3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        transparent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fonts: {
+        readonly playfair: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly poppins: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontSizes: {
+        readonly heading1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly heading2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly heading3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly heading4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly heading5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly heading6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly subtitle1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly subtitle2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly body1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly body2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly footer: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontWeights: {
+        readonly hairline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly thin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly light: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly semibold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly extrabold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    letterSpacings: {
+        readonly tighter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly tight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly wide: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly wider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    lineHeights: {
+        readonly normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly 16: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly 20: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly 24: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly 28: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly 32: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly 40: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly 48: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        readonly 56: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    opacity: {
+        0: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        30: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        60: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        90: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    radii: {
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        rounded: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    space: {
+        0: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        14: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        16: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        18: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        20: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        22: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        24: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        32: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        40: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        48: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        56: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        64: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        72: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        80: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        88: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        96: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        104: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        112: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        auto: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        fitContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        maxContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        minContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '100vh': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '100vw': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gapX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gapY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    transitionDurations: {
+        150: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        3000: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    transitionEasingFunctions: {
+        linear: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        in: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        out: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        inOut: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    transitionProperties: {
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        all: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        default: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        colors: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        opacity: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        shadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        transform: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    sizes: {
+        0: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        8: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        10: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        12: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        14: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        16: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        18: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        20: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        22: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        24: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        32: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        40: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        48: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        56: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        64: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        72: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        80: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        88: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        96: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        104: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        112: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        auto: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        fitContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        maxContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        minContent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '100vh': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '100vw': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gapX: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gapY: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    shadows: {
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        raised: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        floating: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    zIndices: {
+        hide: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        auto: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        docked: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dropdown: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        sticky: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        banner: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        overlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        modal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        popover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        skipLink: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        toast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tooltip: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+export default theme;

package/dist/types/theme/styles/utils.d.ts

@@ -0,0 +1,17 @@
+import type { StyleRule } from '@vanilla-extract/css';
+export declare const getVarName: (_value: string | null, path: string[]) => string;
+export declare const motionSafe: (style: StyleRule) => {
+    '@media': {
+        '(prefers-reduced-motion: no-preference)': StyleRule;
+    };
+};
+type CSSProps = Omit<StyleRule, '@media' | '@supports'>;
+type ResponsiveStyle = {
+    xs?: CSSProps;
+    sm?: CSSProps;
+    md?: CSSProps;
+    lg?: CSSProps;
+    xl?: CSSProps;
+};
+export declare const responsiveStyle: ({ xs, sm, md, lg, xl }: ResponsiveStyle) => StyleRule;
+export {};

package/dist/types/theme/tokens/animation.d.ts

@@ -0,0 +1,21 @@
+export declare const transitionDurations: {
+    '150': string;
+    '300': string;
+    '600': string;
+    '3000': string;
+};
+export declare const transitionProperties: {
+    none: string;
+    all: string;
+    default: string;
+    colors: string;
+    opacity: string;
+    shadow: string;
+    transform: string;
+};
+export declare const transitionEasingFunctions: {
+    linear: string;
+    in: string;
+    out: string;
+    inOut: string;
+};

package/dist/types/theme/tokens/border.d.ts

@@ -0,0 +1,9 @@
+export declare const borderStyles: {
+    none: string;
+    solid: string;
+};
+export declare const borderWidths: {
+    '0': string;
+    '1': string;
+    '2': string;
+};

package/dist/types/theme/tokens/breakpoints.d.ts

@@ -0,0 +1,9 @@
+export declare const breakpoints: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export type Breakpoint = keyof typeof breakpoints;
+export declare const breakpointNames: ("xs" | "sm" | "md" | "lg" | "xl")[];