@veracity/vui 0.3.0 → 0.3.2

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,51 @@ declare const _default: {
         };
     };
     Divider: {
+        baseStyle: {};
         defaultProps: {};
         sizes: {};
         variants: {};
     };
     Footer: {
+        baseStyle: {};
         defaultProps: {};
         parts: string[];
         sizes: {};
         variants: {};
     };
+    Header: {
+        baseStyle: {};
+        defaultProps: {};
+        parts: string[];
+        sizes: {};
+        variants: {
+            test: {
+                container: {
+                    bg: string;
+                    color: string;
+                };
+                profile: {
+                    content: {
+                        color: string;
+                    };
+                    trigger: {
+                        color: string;
+                        name: string;
+                    };
+                };
+                services: {
+                    button: {
+                        variant: string;
+                    };
+                };
+                signIn: {
+                    colorScheme: string;
+                };
+            };
+        };
+    };
     Heading: {
+        baseStyle: {};
         defaultProps: {
             size: string;
         };
@@ -256,6 +295,7 @@ declare const _default: {
         variants: {};
     };
     Icon: {
+        baseStyle: {};
         defaultProps: {
             size: string;
         };
@@ -280,11 +320,13 @@ declare const _default: {
         variants: {};
     };
     Image: {
+        baseStyle: {};
         defaultProps: {};
         sizes: {};
         variants: {};
     };
     Input: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -346,6 +388,7 @@ declare const _default: {
         };
     };
     Link: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -391,9 +434,15 @@ declare const _default: {
                     hoverColor: string;
                 };
             };
+            plain: {
+                container: {
+                    hoverTextDecoration: string;
+                };
+            };
         };
     };
     List: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -469,12 +518,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 +562,7 @@ declare const _default: {
         };
     };
     P: {
+        baseStyle: {};
         defaultProps: {
             size: string;
         };
@@ -526,6 +591,7 @@ declare const _default: {
         variants: {};
     };
     Panel: {
+        baseStyle: {};
         defaultProps: {
             variant: string;
         };
@@ -541,12 +607,14 @@ declare const _default: {
         };
     };
     Popover: {
+        baseStyle: {};
         defaultProps: {};
         parts: string[];
         sizes: {};
         variants: {};
     };
     Radio: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -592,6 +660,7 @@ declare const _default: {
         };
     };
     Skeleton: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -624,6 +693,7 @@ declare const _default: {
         };
     };
     Spinner: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -688,6 +758,7 @@ declare const _default: {
         };
     };
     Switch: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -759,6 +830,7 @@ declare const _default: {
         };
     };
     T: {
+        baseStyle: {};
         defaultProps: {
             size: string;
         };
@@ -779,6 +851,7 @@ declare const _default: {
         variants: {};
     };
     Tag: {
+        baseStyle: {};
         defaultProps: {
             colorScheme: string;
             size: string;
@@ -857,6 +930,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,51 @@ declare const defaultTheme: {
             };
         };
         Divider: {
+            baseStyle: {};
             defaultProps: {};
             sizes: {};
             variants: {};
         };
         Footer: {
+            baseStyle: {};
             defaultProps: {};
             parts: string[];
             sizes: {};
             variants: {};
         };
+        Header: {
+            baseStyle: {};
+            defaultProps: {};
+            parts: string[];
+            sizes: {};
+            variants: {
+                test: {
+                    container: {
+                        bg: string;
+                        color: string;
+                    };
+                    profile: {
+                        content: {
+                            color: string;
+                        };
+                        trigger: {
+                            color: string;
+                            name: string;
+                        };
+                    };
+                    services: {
+                        button: {
+                            variant: string;
+                        };
+                    };
+                    signIn: {
+                        colorScheme: string;
+                    };
+                };
+            };
+        };
         Heading: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -419,6 +463,7 @@ declare const defaultTheme: {
             variants: {};
         };
         Icon: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -443,11 +488,13 @@ declare const defaultTheme: {
             variants: {};
         };
         Image: {
+            baseStyle: {};
             defaultProps: {};
             sizes: {};
             variants: {};
         };
         Input: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -509,6 +556,7 @@ declare const defaultTheme: {
             };
         };
         Link: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -554,9 +602,15 @@ declare const defaultTheme: {
                         hoverColor: string;
                     };
                 };
+                plain: {
+                    container: {
+                        hoverTextDecoration: string;
+                    };
+                };
             };
         };
         List: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -632,12 +686,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 +730,7 @@ declare const defaultTheme: {
             };
         };
         P: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -689,6 +759,7 @@ declare const defaultTheme: {
             variants: {};
         };
         Panel: {
+            baseStyle: {};
             defaultProps: {
                 variant: string;
             };
@@ -704,12 +775,14 @@ declare const defaultTheme: {
             };
         };
         Popover: {
+            baseStyle: {};
             defaultProps: {};
             parts: string[];
             sizes: {};
             variants: {};
         };
         Radio: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -755,6 +828,7 @@ declare const defaultTheme: {
             };
         };
         Skeleton: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -787,6 +861,7 @@ declare const defaultTheme: {
             };
         };
         Spinner: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -851,6 +926,7 @@ declare const defaultTheme: {
             };
         };
         Switch: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -922,6 +998,7 @@ declare const defaultTheme: {
             };
         };
         T: {
+            baseStyle: {};
             defaultProps: {
                 size: string;
             };
@@ -942,6 +1019,7 @@ declare const defaultTheme: {
             variants: {};
         };
         Tag: {
+            baseStyle: {};
             defaultProps: {
                 colorScheme: string;
                 size: string;
@@ -1020,6 +1098,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;

package/theme/foundations/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.yellow = exports.red = exports.prussian = exports.pink = exports.grey = exports.green = exports.blue = void 0;
+exports.disabled = exports.yellow = exports.red = exports.prussian = exports.pink = exports.grey = exports.green = exports.blue = void 0;
 exports.blue = {
     10: '#f6fbff',
     20: '#e2f1ff',
@@ -85,6 +85,11 @@ exports.yellow = {
     90: '#b67b08',
     100: '#83591a'
 };
+exports.disabled = {
+    bg: exports.grey[10],
+    border: exports.grey[50],
+    color: exports.grey[50]
+};
 exports.default = {
     blue: exports.blue,
     green: exports.green,
@@ -92,5 +97,6 @@ exports.default = {
     pink: exports.pink,
     prussian: exports.prussian,
     red: exports.red,
-    yellow: exports.yellow
+    yellow: exports.yellow,
+    disabled: exports.disabled
 };

package/theme/foundations/index.d.ts

@@ -96,6 +96,11 @@ declare const _default: {
             90: string;
             100: string;
         };
+        disabled: {
+            bg: string;
+            border: string;
+            color: string;
+        };
     };
     durations: {
         instant: string;

package/theme/foundations/shadows.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var colors_1 = require("./colors");
 var utils_1 = require("../../utils");
-var greyLight = (0, utils_1.hexToRGB)(colors_1.grey[80], 0.4);
-var greyDark = (0, utils_1.hexToRGB)(colors_1.grey[80], 0.6);
+var colors_1 = require("./colors");
+var greyLight = (0, utils_1.hexToRGBA)(colors_1.grey[80], 0.4);
+var greyDark = (0, utils_1.hexToRGBA)(colors_1.grey[80], 0.6);
 exports.default = {
     '0': "0 0 0 0 #fff",
     '1': "0 2px 5px 0 " + greyLight,

package/theme/foundations/transformers.js

@@ -19,12 +19,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var system_1 = require("@xstyled/system");
 exports.default = {
     border: function (value, _a) {
+        var _b;
         var props = _a.props;
         if (typeof value === 'number')
             return value + "px solid";
         var values = value.split(' ');
-        var _b = __read(values, 3), width = _b[0], style = _b[1], color = _b[2];
-        var colorValue = (0, system_1.getColor)(color)(props);
+        var _c = __read(values, 3), width = _c[0], _d = _c[1], style = _d === void 0 ? '' : _d, color = _c[2];
+        var colorValue = (_b = (0, system_1.getColor)(color)(props)) !== null && _b !== void 0 ? _b : '';
         return width + " " + style + " " + colorValue;
     },
     space: function (value) {

package/theme/index.d.ts

@@ -1,6 +1,5 @@
-import defaultTheme from './defaultTheme';
 export { default as components } from './components';
-export { default as defaultTheme } from './defaultTheme';
+export { default, default as defaultTheme } from './defaultTheme';
 export { default as foundations } from './foundations';
 export { default as animations } from './foundations/animations';
 export { default as borders } from './foundations/borders';
@@ -19,4 +18,3 @@ export { default as transforms } from './foundations/transforms';
 export { default as transitions } from './foundations/transitions';
 export { default as zIndices } from './foundations/zIndices';
 export * from './types';
-export default defaultTheme;