@veracity/vui 0.3.1 → 0.4.0

package/theme/components.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     Avatar: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -48,11 +49,13 @@ declare const _default: {
         };
     };
     Box: {
+        baseStyle: {};
         defaultProps: {};
         sizes: {};
         variants: {};
     };
     Button: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -157,11 +160,13 @@ declare const _default: {
         };
     };
     Card: {
+        baseStyle: {};
         defaultProps: {};
         sizes: {};
         variants: {};
     };
     Checkbox: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -207,17 +212,104 @@ declare const _default: {
         };
     };
     Divider: {
+        baseStyle: {};
         defaultProps: {};
         sizes: {};
         variants: {};
     };
     Footer: {
+        baseStyle: {};
         defaultProps: {};
         parts: string[];
         sizes: {};
         variants: {};
     };
+    Header: {
+        baseStyle: {};
+        defaultProps: {};
+        parts: string[];
+        sizes: {};
+        variants: {
+            dark: {
+                container: {
+                    bg: string;
+                    borderBottom: number;
+                };
+                account: {
+                    trigger: {
+                        bg: string;
+                        color: string;
+                        hoverBg: string;
+                        activeBg: string;
+                    };
+                };
+                createAccount: {
+                    link: {
+                        color: {
+                            xs: string;
+                            md: string;
+                        };
+                        hoverColor: {
+                            xs: string;
+                            md: string;
+                        };
+                    };
+                    text: {
+                        color: {
+                            md: string;
+                        };
+                    };
+                };
+                divider: {
+                    borderColor: string;
+                };
+                linkItem: {
+                    container: {
+                        hoverBg: {
+                            xs: string;
+                            md: string;
+                        };
+                        activeBg: {
+                            xs: string;
+                            md: string;
+                        };
+                    };
+                    link: {
+                        borderColor: string;
+                    };
+                };
+                linksList: {
+                    color: {
+                        md: string;
+                    };
+                };
+                logo: {
+                    svg: {
+                        pathFill: string;
+                    };
+                };
+                mobileContent: {
+                    top: string;
+                };
+                mobileToggle: {
+                    variant: string;
+                };
+                notifications: {
+                    variant: string;
+                };
+                services: {
+                    button: {
+                        variant: string;
+                    };
+                };
+                signIn: {
+                    colorScheme: string;
+                };
+            };
+        };
+    };
     Heading: {
+        baseStyle: {};
         defaultProps: {
             size: string;
         };
@@ -256,6 +348,7 @@ declare const _default: {
         variants: {};
     };
     Icon: {
+        baseStyle: {};
         defaultProps: {
             size: string;
         };
@@ -280,11 +373,13 @@ declare const _default: {
         variants: {};
     };
     Image: {
+        baseStyle: {};
         defaultProps: {};
         sizes: {};
         variants: {};
     };
     Input: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -346,6 +441,7 @@ declare const _default: {
         };
     };
     Link: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -391,9 +487,15 @@ declare const _default: {
                     hoverColor: string;
                 };
             };
+            plain: {
+                container: {
+                    hoverTextDecoration: string;
+                };
+            };
         };
     };
     List: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -469,12 +571,27 @@ declare const _default: {
         };
     };
     Menu: {
-        defaultProps: {};
+        baseStyle: {};
+        defaultProps: {
+            size: string;
+        };
         parts: string[];
-        sizes: {};
+        sizes: {
+            md: {
+                list: {
+                    size: string;
+                };
+            };
+            lg: {
+                list: {
+                    size: string;
+                };
+            };
+        };
         variants: {};
     };
     Notification: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             variant: string;
@@ -498,6 +615,7 @@ declare const _default: {
         };
     };
     P: {
+        baseStyle: {};
         defaultProps: {
             size: string;
         };
@@ -526,6 +644,7 @@ declare const _default: {
         variants: {};
     };
     Panel: {
+        baseStyle: {};
         defaultProps: {
             variant: string;
         };
@@ -541,12 +660,14 @@ declare const _default: {
         };
     };
     Popover: {
+        baseStyle: {};
         defaultProps: {};
         parts: string[];
         sizes: {};
         variants: {};
     };
     Radio: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -592,6 +713,7 @@ declare const _default: {
         };
     };
     Skeleton: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -624,6 +746,7 @@ declare const _default: {
         };
     };
     Spinner: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -688,6 +811,7 @@ declare const _default: {
         };
     };
     Switch: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -759,6 +883,7 @@ declare const _default: {
         };
     };
     T: {
+        baseStyle: {};
         defaultProps: {
             size: string;
         };
@@ -779,6 +904,7 @@ declare const _default: {
         variants: {};
     };
     Tag: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -857,6 +983,7 @@ declare const _default: {
         };
     };
     Textarea: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             variant: string;

package/theme/components.js

@@ -10,24 +10,25 @@ var theme_4 = __importDefault(require("../card/theme"));
 var theme_5 = __importDefault(require("../checkbox/theme"));
 var theme_6 = __importDefault(require("../divider/theme"));
 var theme_7 = __importDefault(require("../footer/theme"));
-var theme_8 = __importDefault(require("../heading/theme"));
-var theme_9 = __importDefault(require("../icon/theme"));
-var theme_10 = __importDefault(require("../image/theme"));
-var theme_11 = __importDefault(require("../input/theme"));
-var theme_12 = __importDefault(require("../link/theme"));
-var theme_13 = __importDefault(require("../list/theme"));
-var theme_14 = __importDefault(require("../menu/theme"));
-var theme_15 = __importDefault(require("../notification/theme"));
-var theme_16 = __importDefault(require("../p/theme"));
-var theme_17 = __importDefault(require("../panel/theme"));
-var theme_18 = __importDefault(require("../popover/theme"));
-var theme_19 = __importDefault(require("../radio/theme"));
-var theme_20 = __importDefault(require("../skeleton/theme"));
-var theme_21 = __importDefault(require("../spinner/theme"));
-var theme_22 = __importDefault(require("../switch/theme"));
-var theme_23 = __importDefault(require("../t/theme"));
-var theme_24 = __importDefault(require("../tag/theme"));
-var theme_25 = __importDefault(require("../textarea/theme"));
+var theme_8 = __importDefault(require("../header/theme"));
+var theme_9 = __importDefault(require("../heading/theme"));
+var theme_10 = __importDefault(require("../icon/theme"));
+var theme_11 = __importDefault(require("../image/theme"));
+var theme_12 = __importDefault(require("../input/theme"));
+var theme_13 = __importDefault(require("../link/theme"));
+var theme_14 = __importDefault(require("../list/theme"));
+var theme_15 = __importDefault(require("../menu/theme"));
+var theme_16 = __importDefault(require("../notification/theme"));
+var theme_17 = __importDefault(require("../p/theme"));
+var theme_18 = __importDefault(require("../panel/theme"));
+var theme_19 = __importDefault(require("../popover/theme"));
+var theme_20 = __importDefault(require("../radio/theme"));
+var theme_21 = __importDefault(require("../skeleton/theme"));
+var theme_22 = __importDefault(require("../spinner/theme"));
+var theme_23 = __importDefault(require("../switch/theme"));
+var theme_24 = __importDefault(require("../t/theme"));
+var theme_25 = __importDefault(require("../tag/theme"));
+var theme_26 = __importDefault(require("../textarea/theme"));
 exports.default = {
     Avatar: theme_1.default,
     Box: theme_2.default,
@@ -36,22 +37,23 @@ exports.default = {
     Checkbox: theme_5.default,
     Divider: theme_6.default,
     Footer: theme_7.default,
-    Heading: theme_8.default,
-    Icon: theme_9.default,
-    Image: theme_10.default,
-    Input: theme_11.default,
-    Link: theme_12.default,
-    List: theme_13.default,
-    Menu: theme_14.default,
-    Notification: theme_15.default,
-    P: theme_16.default,
-    Panel: theme_17.default,
-    Popover: theme_18.default,
-    Radio: theme_19.default,
-    Skeleton: theme_20.default,
-    Spinner: theme_21.default,
-    Switch: theme_22.default,
-    T: theme_23.default,
-    Tag: theme_24.default,
-    Textarea: theme_25.default
+    Header: theme_8.default,
+    Heading: theme_9.default,
+    Icon: theme_10.default,
+    Image: theme_11.default,
+    Input: theme_12.default,
+    Link: theme_13.default,
+    List: theme_14.default,
+    Menu: theme_15.default,
+    Notification: theme_16.default,
+    P: theme_17.default,
+    Panel: theme_18.default,
+    Popover: theme_19.default,
+    Radio: theme_20.default,
+    Skeleton: theme_21.default,
+    Spinner: theme_22.default,
+    Switch: theme_23.default,
+    T: theme_24.default,
+    Tag: theme_25.default,
+    Textarea: theme_26.default
 };

package/theme/defaultTheme.d.ts

@@ -96,6 +96,11 @@ declare const defaultTheme: {
             90: string;
             100: string;
         };
+        disabled: {
+            bg: string;
+            border: string;
+            color: string;
+        };
     };
     durations: {
         instant: string;
@@ -163,6 +168,7 @@ declare const defaultTheme: {
     zIndices: {};
     components: {
         Avatar: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -211,11 +217,13 @@ declare const defaultTheme: {
             };
         };
         Box: {
+            baseStyle: {};
             defaultProps: {};
             sizes: {};
             variants: {};
         };
         Button: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -320,11 +328,13 @@ declare const defaultTheme: {
             };
         };
         Card: {
+            baseStyle: {};
             defaultProps: {};
             sizes: {};
             variants: {};
         };
         Checkbox: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -370,17 +380,104 @@ declare const defaultTheme: {
             };
         };
         Divider: {
+            baseStyle: {};
             defaultProps: {};
             sizes: {};
             variants: {};
         };
         Footer: {
+            baseStyle: {};
             defaultProps: {};
             parts: string[];
             sizes: {};
             variants: {};
         };
+        Header: {
+            baseStyle: {};
+            defaultProps: {};
+            parts: string[];
+            sizes: {};
+            variants: {
+                dark: {
+                    container: {
+                        bg: string;
+                        borderBottom: number;
+                    };
+                    account: {
+                        trigger: {
+                            bg: string;
+                            color: string;
+                            hoverBg: string;
+                            activeBg: string;
+                        };
+                    };
+                    createAccount: {
+                        link: {
+                            color: {
+                                xs: string;
+                                md: string;
+                            };
+                            hoverColor: {
+                                xs: string;
+                                md: string;
+                            };
+                        };
+                        text: {
+                            color: {
+                                md: string;
+                            };
+                        };
+                    };
+                    divider: {
+                        borderColor: string;
+                    };
+                    linkItem: {
+                        container: {
+                            hoverBg: {
+                                xs: string;
+                                md: string;
+                            };
+                            activeBg: {
+                                xs: string;
+                                md: string;
+                            };
+                        };
+                        link: {
+                            borderColor: string;
+                        };
+                    };
+                    linksList: {
+                        color: {
+                            md: string;
+                        };
+                    };
+                    logo: {
+                        svg: {
+                            pathFill: string;
+                        };
+                    };
+                    mobileContent: {
+                        top: string;
+                    };
+                    mobileToggle: {
+                        variant: string;
+                    };
+                    notifications: {
+                        variant: string;
+                    };
+                    services: {
+                        button: {
+                            variant: string;
+                        };
+                    };
+                    signIn: {
+                        colorScheme: string;
+                    };
+                };
+            };
+        };
         Heading: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -419,6 +516,7 @@ declare const defaultTheme: {
             variants: {};
         };
         Icon: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -443,11 +541,13 @@ declare const defaultTheme: {
             variants: {};
         };
         Image: {
+            baseStyle: {};
             defaultProps: {};
             sizes: {};
             variants: {};
         };
         Input: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -509,6 +609,7 @@ declare const defaultTheme: {
             };
         };
         Link: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -554,9 +655,15 @@ declare const defaultTheme: {
                         hoverColor: string;
                     };
                 };
+                plain: {
+                    container: {
+                        hoverTextDecoration: string;
+                    };
+                };
             };
         };
         List: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -632,12 +739,27 @@ declare const defaultTheme: {
             };
         };
         Menu: {
-            defaultProps: {};
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+            };
             parts: string[];
-            sizes: {};
+            sizes: {
+                md: {
+                    list: {
+                        size: string;
+                    };
+                };
+                lg: {
+                    list: {
+                        size: string;
+                    };
+                };
+            };
             variants: {};
         };
         Notification: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 variant: string;
@@ -661,6 +783,7 @@ declare const defaultTheme: {
             };
         };
         P: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -689,6 +812,7 @@ declare const defaultTheme: {
             variants: {};
         };
         Panel: {
+            baseStyle: {};
             defaultProps: {
                 variant: string;
             };
@@ -704,12 +828,14 @@ declare const defaultTheme: {
             };
         };
         Popover: {
+            baseStyle: {};
             defaultProps: {};
             parts: string[];
             sizes: {};
             variants: {};
         };
         Radio: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -755,6 +881,7 @@ declare const defaultTheme: {
             };
         };
         Skeleton: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -787,6 +914,7 @@ declare const defaultTheme: {
             };
         };
         Spinner: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -851,6 +979,7 @@ declare const defaultTheme: {
             };
         };
         Switch: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -922,6 +1051,7 @@ declare const defaultTheme: {
             };
         };
         T: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -942,6 +1072,7 @@ declare const defaultTheme: {
             variants: {};
         };
         Tag: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -1020,6 +1151,7 @@ declare const defaultTheme: {
             };
         };
         Textarea: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 variant: string;

package/theme/foundations/colors.d.ts

@@ -82,6 +82,11 @@ export declare const yellow: {
     90: string;
     100: string;
 };
+export declare const disabled: {
+    bg: string;
+    border: string;
+    color: string;
+};
 declare const _default: {
     blue: {
         10: string;
@@ -167,5 +172,10 @@ declare const _default: {
         90: string;
         100: string;
     };
+    disabled: {
+        bg: string;
+        border: string;
+        color: string;
+    };
 };
 export default _default;