@everlywell/ui-kit 0.0.1 → 0.0.2-menu-next

package/lib/theme/index.d.ts

@@ -1,4 +1,11 @@
 export declare const theme: {
+    breakpoints: {
+        mobile: string;
+        tablet: string;
+        largeTablet: string;
+        desktop: string;
+        largeDesktop: string;
+    };
     fonts: {
         body: string;
         heading: string;
@@ -8,12 +15,16 @@ export declare const theme: {
         thin: string;
         xlight: string;
         light: string;
-        book: string;
-        regular: string;
+        normal: string;
+        medium: string;
+        semiBold: string;
         bold: string;
         xbold: string;
+        black: string;
     };
     fontSizes: {
+        '3xs': string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -22,17 +33,29 @@ export declare const theme: {
         '2xl': string;
         '3xl': string;
         '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '9xl': string;
+        '10xl': string;
+        '11xl': string;
     };
     letterSpacings: {
-        tightest: string;
+        tighter: string;
         tight: string;
         normal: string;
         wide: string;
+        wider: string;
         widest: string;
     };
     lineHeights: {
-        body: string;
-        button: string;
+        body: number;
+        normal: string;
+        none: number;
+        shorter: number;
+        short: number;
+        base: number;
+        tall: number;
     };
     sizes: {
         max: string;
@@ -41,61 +64,71 @@ export declare const theme: {
     };
     space: {
         /**
-         * TODO: figure out best way to define spacing
-         * maybe do something like this?
-         * 0, 0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10
-         * 0,     2,    4,   8,   12,  16,  24,  32,  40,  48, 64, 80, 96, 128, 160
+         * Base unit: 4px
+         * 1 rem = 16px
+         *
+         * Mental model:
+         *
+         * If you need a spacing of 40px, divide it by 4.
+         * That'll give you 10. Then use it in your component.
          */
         0: number;
+        0.5: string;
         1: string;
+        1.5: string;
         2: string;
         3: string;
         4: string;
         5: string;
         6: string;
-        7: string;
         8: string;
-        9: string;
         10: string;
-        11: string;
+        12: string;
+        16: string;
+        20: string;
+    };
+    shadows: {
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        outline: string;
+        inner: string;
+        none: string;
+        'dark-lg': string;
+        dialog: string;
+    };
+    zIndices: {
+        hide: number;
+        auto: string;
+        base: number;
+        docked: number;
+        dropdown: number;
+        sticky: number;
+        banner: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
     };
     colors: {
-        white: {
-            base: string;
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-        };
-        black: {
-            base: string;
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-        };
-        grayscale: {
+        tints: {
+            black: string;
             darkGrey: string;
-            grey: string;
-            mediumGrey: string;
+            uiGrey: string;
+            medGrey: string;
             lightGrey: string;
             darkCream: string;
             cream: string;
             lightCream: string;
+            white: string;
         };
-        red: {
+        viridian: {
             50: string;
             100: string;
             200: string;
@@ -106,20 +139,20 @@ export declare const theme: {
             700: string;
             800: string;
             900: string;
-            wash: string;
-            lighter: string;
-            light: string;
-            base: string;
             dark: string;
-        };
-        yellow: {
-            wash: string;
-            lighter: string;
-            light: string;
             base: string;
+            light: string;
+            lighter: string;
+            wash: string;
+        };
+        sunshine: {
             dark: string;
+            base: string;
+            light: string;
+            lighter: string;
+            wash: string;
         };
-        green: {
+        terracotta: {
             50: string;
             100: string;
             200: string;
@@ -130,39 +163,39 @@ export declare const theme: {
             700: string;
             800: string;
             900: string;
-            wash: string;
-            lighter: string;
-            light: string;
-            base: string;
             dark: string;
-        };
-        lightBlue: {
-            wash: string;
-            lighter: string;
-            light: string;
             base: string;
-            dark: string;
-        };
-        blue: {
-            wash: string;
-            lighter: string;
             light: string;
-            base: string;
-            dark: string;
-        };
-        indigo: {
-            wash: string;
             lighter: string;
-            light: string;
-            base: string;
-            dark: string;
+            wash: string;
         };
         violet: {
-            wash: string;
+            dark: string;
+            base: string;
+            light: string;
             lighter: string;
+            wash: string;
+        };
+        eggplant: {
+            dark: string;
+            base: string;
             light: string;
+            lighter: string;
+            wash: string;
+        };
+        moonlight: {
+            dark: string;
             base: string;
+            light: string;
+            lighter: string;
+            wash: string;
+        };
+        sky: {
             dark: string;
+            base: string;
+            light: string;
+            lighter: string;
+            wash: string;
         };
     };
     components: {
@@ -180,21 +213,30 @@ export declare const theme: {
             } | undefined;
             sizes?: {
                 sm: {
-                    fontSize: string;
+                    fontSize: ("md" | "lg")[];
                     px: number[];
                     py: number[];
-                    '.chakra-button__icon > svg': {
-                        width: string;
-                        height: string;
+                    '&:has(> svg:only-child)': {
+                        px: number;
+                        py: number;
+                        svg: {
+                            fontSize: string;
+                        };
+                    };
+                    svg: {
+                        fontSize: string;
                     };
                 };
                 md: {
-                    fontSize: string;
+                    fontSize: ("lg" | "xl")[];
                     px: number[];
                     py: number[];
+                    '&:has(> svg:only-child)': {
+                        px: number[];
+                        py: number[];
+                    };
                     svg: {
-                        width: ("1.25rem" | "1.5rem")[];
-                        height: ("1.25rem" | "1.5rem")[];
+                        fontSize: ("1.5rem" | "1.25rem")[];
                     };
                 };
                 wide: {
@@ -202,14 +244,17 @@ export declare const theme: {
                     px: number;
                     py: number;
                     width: string;
-                    '.chakra-button__icon > svg': {
-                        width: string;
-                        height: string;
+                    '&:has(> svg:only-child)': {
+                        px: number;
+                        py: number;
+                    };
+                    svg: {
+                        fontSize: string;
                     };
                 };
             } | undefined;
             variants?: {
-                solid: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+                primary: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
                     bg: string;
                     color: string;
                     ':hover, &.hover': {
@@ -223,7 +268,7 @@ export declare const theme: {
                         color: string;
                     };
                 };
-                outline: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+                secondary: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
                     color: string;
                     boxShadow: (theme: Record<string, any>) => string;
                     ':hover, &.hover': {
@@ -242,27 +287,298 @@ export declare const theme: {
                 };
             } | undefined;
             defaultProps?: {
-                size?: "sm" | "md" | "wide" | undefined;
-                variant?: "outline" | "solid" | undefined;
+                size?: "wide" | "sm" | "md" | undefined;
+                variant?: "primary" | "secondary" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Drawer: {
+            baseStyle?: {
+                overlay: {
+                    bg: string;
+                    backgroundImage: string;
+                };
+                dialogContainer: {
+                    zIndex: string;
+                };
+                dialog: {
+                    bg: string;
+                    pt: number[];
+                    display: string;
+                    flexDirection: string;
+                    alignItems: string;
+                    gap: number;
+                    boxShadow: string;
+                };
+                header: {
+                    px: number;
+                    display: string;
+                    flexDirection: string;
+                    justifyContent: string;
+                    alignItems: string;
+                };
+                closeButton: {
+                    bg: string;
+                    borderRadius: string;
+                    p: number;
+                    _hover: {
+                        bg: string;
+                    };
+                    '& .chakra-icon': {
+                        p: number;
+                    };
+                };
+                body: {
+                    px: number;
+                    flexGrow: number;
+                };
+                footer: {
+                    py: number;
+                    px: number;
+                };
+            } | undefined;
+            sizes?: {
+                partial: {
+                    dialog: {
+                        maxW: number;
+                    };
+                };
+                full: {
+                    dialog: {
+                        maxW: string;
+                        minH: string;
+                        borderRadius: number;
+                    };
+                };
+            } | undefined;
+            variants?: {
+                [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+                    keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "dialogContainer" | "closeButton")[];
+                }>;
+            } | undefined;
+            defaultProps?: {
+                size?: "full" | "partial" | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "dialogContainer" | "closeButton")[];
+        };
+        Heading: {
+            baseStyle?: {
+                fontFamily: (theme: Record<string, any>) => string;
+                fontWeight: string;
+            } | undefined;
+            sizes?: {
+                '3xl': {
+                    fontSize: ("6xl" | "11xl")[];
+                    lineHeight: string;
+                };
+                '2xl': {
+                    fontSize: ("6xl" | "9xl")[];
+                    lineHeight: string;
+                };
+                xl: {
+                    fontSize: ("4xl" | "7xl")[];
+                    lineHeight: string;
+                };
+                lg: {
+                    fontFamily: (theme: Record<string, any>) => string;
+                    fontWeight: string;
+                    fontSize: ("3xl" | "6xl")[];
+                    lineHeight: string;
+                };
+                md: {
+                    fontFamily: (theme: Record<string, any>) => string;
+                    fontWeight: string;
+                    fontSize: ("2xl" | "4xl")[];
+                    lineHeight: string;
+                };
+                sm: {
+                    fontFamily: (theme: Record<string, any>) => string;
+                    fontWeight: string;
+                    fontSize: ("lg" | "3xl")[];
+                    lineHeight: string;
+                };
+            } | undefined;
+            variants?: {
+                [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+            } | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Icon: {
+            baseStyle?: {} | undefined;
+            sizes?: {
+                sm: {
+                    fontSize: string;
+                };
+                md: {
+                    fontSize: string;
+                };
+                lg: {
+                    fontSize: string;
+                };
+            } | undefined;
+            variants?: {} | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                variant?: undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Link: {
+            baseStyle?: {
+                color: string;
+                fontWeight: string;
+                _hover: {
+                    textDecoration: string;
+                    cursor: string;
+                };
+            } | undefined;
+            sizes?: {
+                sm: {
+                    fontSize: ("3xs" | "xs")[];
+                    lineHeight: string;
+                };
+                md: {
+                    fontSize: ("2xs" | "sm")[];
+                    lineHeight: string;
+                };
+                lg: {
+                    fontSize: ("xs" | "md")[];
+                    lineHeight: string;
+                };
+            } | undefined;
+            variants?: {} | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                variant?: undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
+        Text: {
+            baseStyle?: {
+                fontWeight: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontSize: string;
+                p: number;
+            } | undefined;
+            sizes?: {
+                xs: {
+                    fontSize: ("2xs" | "xs")[];
+                };
+                sm: {
+                    fontSize: ("xs" | "sm")[];
+                };
+                md: {
+                    fontSize: ("sm" | "md")[];
+                };
+                lg: {
+                    fontSize: ("md" | "lg")[];
+                };
+                xl: {
+                    fontSize: ("lg" | "2xl")[];
+                    lineHeight: ("shorter" | "short")[];
+                };
+            } | undefined;
+            variants?: {
+                [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+            } | undefined;
+            defaultProps?: {
+                size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+                variant?: string | number | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+        };
+        Menu: {
+            baseStyle?: {
+                button: {};
+                list: {
+                    boxShadow: string;
+                    backgroundColor: string;
+                };
+                item: {
+                    fontWeight: string;
+                    lineHeight: string;
+                    color: string;
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _disabled: {
+                        backgroundColor: string;
+                        color: string;
+                        cursor: string;
+                    };
+                };
+                groupTitle: {
+                    color: string;
+                    letterSpacing: string;
+                };
+                command: {
+                    color: string;
+                };
+                divider: {
+                    borderColor: string;
+                    borderBottom: string;
+                };
+            } | undefined;
+            sizes?: {
+                sm: {
+                    button: {};
+                    item: {
+                        fontSize: ("sm" | "md")[];
+                        paddingY: string;
+                        paddingX: string;
+                    };
+                    groupTitle: {
+                        fontSize: ("md" | "lg")[];
+                        paddingY: string;
+                        paddingX: string;
+                    };
+                    divider: {
+                        marginY: string;
+                    };
+                };
+                md: {
+                    item: {
+                        fontSize: ("lg" | "xl")[];
+                        paddingY: string;
+                        paddingX: string;
+                    };
+                    groupTitle: {
+                        fontSize: ("xl" | "2xl")[];
+                        paddingY: string;
+                        paddingX: string;
+                    };
+                };
+                lg: {
+                    item: {
+                        fontSize: ("2xl" | "3xl")[];
+                        paddingX: string;
+                        paddingY: string;
+                    };
+                    groupTitle: {
+                        fontSize: ("4xl" | "5xl")[];
+                        paddingX: string;
+                        paddingY: string;
+                    };
+                };
+            } | undefined;
+            variants?: {} | undefined;
+            defaultProps?: {
+                size?: "sm" | "md" | "lg" | undefined;
+                variant?: undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("button" | "list" | "item" | "groupTitle" | "command" | "divider")[];
+        };
     };
     styles: import("@chakra-ui/theme-tools/dist/component").Styles;
     config: import("@chakra-ui/theme/dist/theme.types").ThemeConfig;
-    shadows: {
-        xs: string;
-        sm: string;
-        base: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        outline: string;
-        inner: string;
-        none: string;
-        "dark-lg": string;
-    };
     borders: {
         none: number;
         "1px": string;
@@ -293,29 +609,6 @@ export declare const theme: {
             "ultra-slow": string;
         };
     };
-    breakpoints: {
-        base: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-    };
-    zIndices: {
-        hide: number;
-        auto: string;
-        base: number;
-        docked: number;
-        dropdown: number;
-        sticky: number;
-        banner: number;
-        overlay: number;
-        modal: number;
-        popover: number;
-        skipLink: number;
-        toast: number;
-        tooltip: number;
-    };
     radii: {
         none: string;
         sm: string;

package/lib/theme/layout/Box/Box.d.ts

@@ -0,0 +1,3 @@
+import { Box, BoxProps as ChakraButtonProps } from '@chakra-ui/react';
+export type BoxProps = ChakraButtonProps;
+export default Box;