@veracity/vui 0.0.1

package/theme/defaultTheme.d.ts

@@ -0,0 +1,494 @@
+declare const defaultTheme: {
+    fonts: {
+        avenir: string;
+    };
+    fontSizes: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    fontWeights: {
+        regular: number;
+        medium: number;
+        demi: number;
+        bold: number;
+    };
+    animations: {
+        fadeDown: string;
+        fadeIn: string;
+        fadeLeft: string;
+        fadeOut: string;
+        fadeRight: string;
+        fadeUp: string;
+        spin: string;
+    };
+    colors: {
+        blue: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+            100: string;
+        };
+        green: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+            100: string;
+        };
+        grey: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+            100: string;
+        };
+        pink: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+            100: string;
+        };
+        prussian: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+            100: string;
+        };
+        red: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+            100: string;
+        };
+        yellow: {
+            10: string;
+            20: string;
+            30: string;
+            40: string;
+            50: string;
+            60: string;
+            70: string;
+            80: string;
+            90: string;
+            100: string;
+        };
+    };
+    durations: {
+        fast: string;
+        normal: string;
+        slow: string;
+    };
+    radii: {
+        none: number;
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+    };
+    screens: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    transformers: {
+        space: (value: string | number) => string;
+    };
+    components: {
+        Box: {
+            defaultProps: {};
+            sizes: {};
+            variants: {};
+        };
+        Button: {
+            defaultProps: {
+                colorScheme: string;
+                size: string;
+                variant: string;
+            };
+            sizes: {
+                xs: {
+                    fontSize: string;
+                    h: number;
+                    iconSize: string;
+                    minW: number;
+                    spaceX: number;
+                };
+                sm: {
+                    fontSize: string;
+                    h: number;
+                    iconSize: string;
+                    minW: number;
+                    spaceX: number;
+                };
+                md: {
+                    fontSize: string;
+                    h: number;
+                    iconSize: string;
+                    minW: number;
+                    spaceX: number;
+                };
+                lg: {
+                    fontSize: string;
+                    h: number;
+                    iconSize: string;
+                    minW: number;
+                    spaceX: number;
+                };
+            };
+            variants: {
+                outlined: (props: import("..").Dict<any>) => {
+                    hoverBg: string;
+                    activeBg: string;
+                    bg: string;
+                    color: string;
+                    borderColor: string;
+                    borderWidth: number;
+                };
+                solid: (props: import("..").Dict<any>) => {
+                    hoverBg: string;
+                    activeBg: string;
+                    bg: string;
+                    color: string;
+                };
+                text: (props: import("..").Dict<any>) => {
+                    hoverBg: string;
+                    activeBg: string;
+                    bg: string;
+                    color: string;
+                };
+            };
+        };
+        Heading: {
+            defaultProps: {
+                size: string;
+            };
+            sizes: {
+                h1: {
+                    as: string;
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                h2: {
+                    as: string;
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                h3: {
+                    as: string;
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                h4: {
+                    as: string;
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                h5: {
+                    as: string;
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                h6: {
+                    as: string;
+                    fontSize: string;
+                    lineHeight: string;
+                };
+            };
+            variants: {};
+        };
+        Icon: {
+            defaultProps: {
+                size: string;
+            };
+            sizes: {
+                xs: {
+                    height: number;
+                    width: number;
+                };
+                sm: {
+                    height: number;
+                    width: number;
+                };
+                md: {
+                    height: number;
+                    width: number;
+                };
+                lg: {
+                    height: number;
+                    width: number;
+                };
+            };
+            variants: {};
+        };
+        Input: {
+            defaultProps: {
+                colorScheme: string;
+                size: string;
+                variant: string;
+            };
+            sizes: {
+                md: {
+                    fontSize: string;
+                    h: number;
+                };
+                lg: {
+                    fontSize: string;
+                    h: number;
+                };
+            };
+            variants: {
+                default: (props: import("..").Dict<any>) => {
+                    borderColor: string;
+                    focusWithinRing: number;
+                    focusWithinRingColor: string;
+                    iconColor: string;
+                };
+            };
+        };
+        Label: {
+            defaultProps: {
+                colorScheme: string;
+                size: string;
+                variant: string;
+            };
+            sizes: {
+                sm: {
+                    fontSize: string;
+                    h: number;
+                    iconSize: string;
+                    spaceX: number;
+                };
+                md: {
+                    fontSize: string;
+                    h: number;
+                    iconSize: string;
+                    spaceX: number;
+                };
+                lg: {
+                    fontSize: string;
+                    h: number;
+                    iconSize: string;
+                    spaceX: number;
+                };
+            };
+            variants: {
+                solid: (props: import("..").Dict<any>) => {
+                    hoverBg: string;
+                    activeBg: string;
+                    bg: string;
+                    color: string;
+                };
+                subtle: (props: import("..").Dict<any>) => {
+                    hoverBg: string;
+                    activeBg: string;
+                    bg: string;
+                    color: string;
+                };
+            };
+        };
+        Link: {
+            defaultProps: {};
+            sizes: {};
+            variants: {};
+        };
+        List: {
+            defaultProps: {
+                size: string;
+                variant: string;
+            };
+            parts: string[];
+            sizes: {
+                sm: {
+                    item: {
+                        fontSize: string;
+                        h: number;
+                    };
+                };
+                md: {
+                    item: {
+                        fontSize: string;
+                        h: number;
+                    };
+                };
+                lg: {
+                    item: {
+                        fontSize: string;
+                        h: number;
+                    };
+                };
+            };
+            variants: {
+                default: {
+                    item: {
+                        activeBg: string;
+                        borderRadius: string;
+                        hoverBg: string;
+                        hoverColor: string;
+                    };
+                };
+            };
+        };
+        P: {
+            defaultProps: {
+                size: string;
+            };
+            sizes: {
+                sm: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                md: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                lg: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                xl: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+                xxl: {
+                    fontSize: string;
+                    lineHeight: string;
+                };
+            };
+            variants: {};
+        };
+        Skeleton: {
+            defaultProps: {
+                colorScheme: string;
+                size: string;
+                variant: string;
+            };
+            sizes: {
+                xs: {
+                    h: number;
+                };
+                sm: {
+                    h: number;
+                };
+                md: {
+                    h: number;
+                };
+                lg: {
+                    h: number;
+                };
+            };
+            variants: {
+                circle: (props: import("..").Dict<any>) => {
+                    borderRadius: string;
+                    bg: string;
+                };
+                rect: (props: import("..").Dict<any>) => {
+                    borderRadius: string;
+                    bg: string;
+                    w: string;
+                };
+            };
+        };
+        T: {
+            defaultProps: {
+                size: string;
+            };
+            sizes: {
+                xs: {
+                    fontSize: string;
+                };
+                sm: {
+                    fontSize: string;
+                };
+                md: {
+                    fontSize: string;
+                };
+                lg: {
+                    fontSize: string;
+                };
+            };
+            variants: {};
+        };
+        Textarea: {
+            defaultProps: {
+                colorScheme: string;
+                variant: string;
+            };
+            sizes: {};
+            variants: {
+                default: (props: import("..").Dict<any>) => {
+                    borderColor: string;
+                    focusRing: number;
+                    focusRingColor: string;
+                };
+            };
+        };
+        Tile: {
+            defaultProps: {
+                variant: string;
+            };
+            sizes: {};
+            variants: {
+                default: {
+                    bg: string;
+                    borderRadius: string;
+                    shadow: number;
+                    hoverShadow: number;
+                    p: number;
+                };
+                outlined: {
+                    bg: string;
+                    border: number;
+                    borderColor: string;
+                    borderRadius: string;
+                    p: number;
+                };
+            };
+        };
+    };
+};
+export default defaultTheme;

package/theme/defaultTheme.js

@@ -0,0 +1,20 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var components_1 = __importDefault(require("./components"));
+var foundations_1 = __importDefault(require("./foundations"));
+var defaultTheme = __assign({ components: components_1.default }, foundations_1.default);
+exports.default = defaultTheme;

package/theme/foundations/animations.d.ts

@@ -0,0 +1,10 @@
+declare const animations: {
+    fadeDown: string;
+    fadeIn: string;
+    fadeLeft: string;
+    fadeOut: string;
+    fadeRight: string;
+    fadeUp: string;
+    spin: string;
+};
+export default animations;

package/theme/foundations/animations.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var animations = {
+    fadeDown: 'fadeDown 0.3s ease-in-out',
+    fadeIn: 'fadeIn 0.3s ease-in-out',
+    fadeLeft: 'fadeLeft 0.3s ease-in-out',
+    fadeOut: 'fadeOut 0.3s ease-in-out',
+    fadeRight: 'fadeRight 0.3s ease-in-out',
+    fadeUp: 'fadeUp 0.3s ease-in-out',
+    spin: 'spin 1s linear infinite'
+};
+exports.default = animations;

package/theme/foundations/colors.d.ts

@@ -0,0 +1,87 @@
+declare const colors: {
+    blue: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    green: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    grey: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    pink: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    prussian: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    red: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    yellow: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+};
+export default colors;

package/theme/foundations/colors.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var colors = {
+    blue: {
+        10: '#f6fbff',
+        20: '#e2f1ff',
+        30: '#c2e1fe',
+        40: '#a1cef9',
+        50: '#77baf9',
+        60: '#48a1f3',
+        70: '#1e86e5',
+        80: '#0067c5',
+        90: '#075094',
+        100: '#003f79'
+    },
+    green: {
+        10: '#efffed',
+        20: '#d8ffd3',
+        30: '#bdfbb6',
+        40: '#9df291',
+        50: '#82db77',
+        60: '#68c35e',
+        70: '#4ea344',
+        80: '#36842d',
+        90: '#276121',
+        100: '#024019'
+    },
+    grey: {
+        10: '#f7f8f9',
+        20: '#f1f3f5',
+        30: '#e1e6e9',
+        40: '#c3ccd3',
+        50: '#a5b3bd',
+        60: '#8799a7',
+        70: '#768b9c',
+        80: '#698091',
+        90: '#586c7a',
+        100: '#465663'
+    },
+    pink: {
+        10: '#fff3fd',
+        20: '#ffddf9',
+        30: '#ffbdf3',
+        40: '#ff8eea',
+        50: '#ff55df',
+        60: '#ff0ed2',
+        70: '#ee00c1',
+        80: '#da00b1',
+        90: '#a00082',
+        100: '#72005c'
+    },
+    prussian: {
+        10: '#eff3f5',
+        20: '#c5dce8',
+        30: '#91bbcf',
+        40: '#5690ac',
+        50: '#32718e',
+        60: '#0d5071',
+        70: '#003b57',
+        80: '#002a3e',
+        90: '#001620',
+        100: '#000b11'
+    },
+    red: {
+        10: '#fff1f1',
+        20: '#ffe4e4',
+        30: '#ffc8c8',
+        40: '#faa7ab',
+        50: '#fb7b81',
+        60: '#f64d55',
+        70: '#e84148',
+        80: '#d6383f',
+        90: '#b62f3a',
+        100: '#962730'
+    },
+    yellow: {
+        10: '#fffde7',
+        20: '#fff8bd',
+        30: '#ffed7a',
+        40: '#ffe43a',
+        50: '#ffd600',
+        60: '#fec600',
+        70: '#f4b40d',
+        80: '#e29c13',
+        90: '#b67b08',
+        100: '#83591a'
+    }
+};
+exports.default = colors;

package/theme/foundations/durations.d.ts

@@ -0,0 +1,6 @@
+declare const durations: {
+    fast: string;
+    normal: string;
+    slow: string;
+};
+export default durations;