@veracity/vui 1.8.0-redesign.0 → 1.8.0

package/dist/cjs/tag/tag.types.d.ts

@@ -2,10 +2,10 @@
 import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export declare type TagInnerProps = {
+export declare type TagProps = SystemProps & ThemingProps<'Tag'> & {
     /** Alias for textTransform prop. @deprecated */
     casing?: TypographyProps['textTransform'];
-    /** Available theme colors for this component. @deprecated */
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
     /** Displays tag and its content in disabled state with appropriate styling. */
     disabled?: boolean;
@@ -32,5 +32,4 @@ export declare type TagInnerProps = {
     /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight'];
 };
-export declare type TagProps = SystemProps & ThemingProps<'Tag'> & TagInnerProps;
 //# sourceMappingURL=tag.types.d.ts.map

package/dist/cjs/tag/tag.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.types.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,aAAa,GAAG;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;IACvE,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CACvC,CAAA;AAED,oBAAY,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA"}
+{"version":3,"file":"tag.types.d.ts","sourceRoot":"","sources":["../../../src/tag/tag.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,QAAQ,GAAG,WAAW,GAChC,YAAY,CAAC,KAAK,CAAC,GAAG;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAA;IACvE,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CACvC,CAAA"}

package/dist/cjs/tag/tagButton.js

@@ -25,8 +25,6 @@ exports.TagButton = (0, core_1.vui)((props, ref) => {
     const { className } = props, rest = __rest(props, ["className"]);
     const mergedProps = Object.assign(Object.assign({}, (0, context_1.useTagContext)()), props);
     const styles = (0, core_1.useStyleConfig)('Tag', (0, context_1.useTagContext)());
-    return (react_1.default.createElement(button_1.default, Object.assign({ borderColor: "transparent", 
-        // borderRadius={isRound ? undefined : 2}
-        className: (0, utils_1.cs)('vui-tagButton', className), disabled: mergedProps.disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: mergedProps.variant }, styles.button, rest)));
+    return (react_1.default.createElement(button_1.default, Object.assign({ borderColor: "transparent", className: (0, utils_1.cs)('vui-tagButton', className), colorScheme: mergedProps.colorScheme, disabled: mergedProps.disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: "text" }, styles.button, rest)));
 });
 exports.default = exports.TagButton;

package/dist/cjs/tag/theme.d.ts

@@ -1,25 +1,41 @@
+import { Dict } from '../utils';
+declare function variantSolid(props: Dict): {
+    container: {
+        hoverBg: string;
+        activeBg: string;
+        bg: string;
+        color: string;
+        focusRing: number;
+    };
+    button: {
+        hoverBg: string;
+        activeBg: string;
+        bg: string;
+        color: string;
+    };
+};
+declare function variantSubtle(props: Dict): {
+    container: {
+        hoverBg: string;
+        activeBg: string;
+        bg: string;
+        color: string;
+    };
+    button: {
+        hoverBg: string;
+        activeBg: string;
+        color: string;
+    };
+};
 declare const _default: {
     baseStyle: {};
     defaultProps: {
+        colorScheme: string;
         size: string;
         variant: string;
     };
     parts: string[];
     sizes: {
-        xs: {
-            container: {
-                borderRadius: string;
-                fontSize: string;
-                h: number;
-                spaceX: number;
-            };
-            button: {
-                size: string;
-            };
-            icon: {
-                size: string;
-            };
-        };
         sm: {
             container: {
                 fontSize: string;
@@ -61,170 +77,8 @@ declare const _default: {
         };
     };
     variants: {
-        subtleGrey: {
-            container: {
-                bg: string;
-                hoverBg: string;
-                borderColor: string;
-                color: string;
-                activeBg: string;
-            };
-            button: {
-                bg: string;
-                hoverBg: string;
-                hoverBorderColor: string;
-                color: string;
-                activeBg: string;
-            };
-        };
-        subtleBlue: {
-            container: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                borderColor: string;
-                color: string;
-            };
-            button: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                hoverBorderColor: string;
-                color: string;
-            };
-        };
-        subtleRed: {
-            container: {
-                bg: string;
-                borderColor: string;
-                hoverBg: string;
-                activeBg: string;
-                color: string;
-            };
-            button: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                hoverBorderColor: string;
-                color: string;
-            };
-        };
-        subtleYellow: {
-            container: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                borderColor: string;
-                color: string;
-            };
-            button: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                hoverBorderColor: string;
-                color: string;
-            };
-        };
-        subtleGreen: {
-            container: {
-                bg: string;
-                hoverBg: string;
-                borderColor: string;
-                color: string;
-                activeBg: string;
-            };
-            button: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                hoverBorderColor: string;
-                color: string;
-            };
-        };
-        /** solids next */
-        solidBlue: {
-            container: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                borderColor: string;
-                color: string;
-            };
-            button: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                hoverBorderColor: string;
-                activeBorderColor: string;
-                color: string;
-            };
-        };
-        solidDarkBlue: {
-            container: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                borderColor: string;
-                color: string;
-            };
-            button: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                hoverBorderColor: string;
-                color: string;
-            };
-        };
-        solidRed: {
-            container: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                borderColor: string;
-                color: string;
-            };
-            button: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                hoverBorderColor: string;
-                activeBorderColor: string;
-                color: string;
-            };
-        };
-        solidYellow: {
-            container: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                borderColor: string;
-                color: string;
-            };
-            button: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                hoverBorderColor: string;
-                color: string;
-            };
-        };
-        solidGreen: {
-            container: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                borderColor: string;
-                color: string;
-            };
-            button: {
-                bg: string;
-                hoverBg: string;
-                activeBg: string;
-                hoverBorderColor: string;
-                activeBorderColor: string;
-                color: string;
-            };
-        };
+        solid: typeof variantSolid;
+        subtle: typeof variantSubtle;
     };
 };
 export default _default;

package/dist/cjs/tag/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tag/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAmJE,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFpB,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tag/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,YAAY,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;;;;;EAmChC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;;;EAgCjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DD,wBAMC"}

package/dist/cjs/tag/theme.js

@@ -1,26 +1,71 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+function variantSolid(props) {
+    const { colorScheme: c } = props;
+    const container = {
+        hoverBg: `${c}.90`,
+        activeBg: `${c}.100`,
+        bg: `${c}.80`,
+        color: 'white',
+        focusRing: 3
+    };
+    const button = {
+        hoverBg: `${c}.70`,
+        activeBg: `${c}.60`,
+        bg: `${c}.80`,
+        color: 'white'
+    };
+    if (c === 'prussian') {
+        container.hoverBg = 'prussian.60';
+        container.activeBg = 'prussian.50';
+        button.hoverBg = 'prussian.60';
+        button.activeBg = 'prussian.50';
+    }
+    if (c === 'yellow') {
+        container.hoverBg = 'yellow.80';
+        container.activeBg = 'yellow.90';
+        container.bg = 'yellow.70';
+        button.hoverBg = 'yellow.60';
+        button.activeBg = 'yellow.50';
+        button.bg = 'yellow.70';
+    }
+    return { container, button };
+}
+function variantSubtle(props) {
+    const { colorScheme: c } = props;
+    const container = {
+        hoverBg: `${c}.30`,
+        activeBg: `${c}.40`,
+        bg: `${c}.20`,
+        color: `${c}.90`
+    };
+    const button = {
+        hoverBg: `${c}.30`,
+        activeBg: `${c}.40`,
+        color: `${c}.90`
+    };
+    if (c === 'blue') {
+        container.color = 'blue.80';
+        button.color = 'blue.80';
+    }
+    if (c === 'grey') {
+        container.color = 'prussian.80';
+        button.color = 'prussian.80';
+    }
+    if (c === 'yellow') {
+        container.color = 'yellow.100';
+        button.color = 'yellow.100';
+    }
+    return { container, button };
+}
 const baseStyle = {};
 const defaultProps = {
+    colorScheme: 'blue',
     size: 'md',
-    variant: 'subtleBlue'
+    variant: 'subtle'
 };
 const parts = ['container', 'button', 'icon', 'text'];
 const sizes = {
-    xs: {
-        container: {
-            borderRadius: 'lg',
-            fontSize: 'sm',
-            h: 20,
-            spaceX: 4
-        },
-        button: {
-            size: 'sm'
-        },
-        icon: {
-            size: 'xs'
-        }
-    },
     sm: {
         container: {
             fontSize: 'sm',
@@ -28,7 +73,7 @@ const sizes = {
             spaceX: 4
         },
         button: {
-            size: 'sm'
+            size: 'xs'
         },
         icon: {
             size: 'xs'
@@ -41,7 +86,7 @@ const sizes = {
             spaceX: 6
         },
         button: {
-            size: 'sm'
+            size: 'xs'
         },
         icon: {
             size: 'sm'
@@ -54,7 +99,7 @@ const sizes = {
             spaceX: 8
         },
         button: {
-            size: 'md'
+            size: 'sm'
         },
         icon: {
             size: 'md'
@@ -62,170 +107,8 @@ const sizes = {
     }
 };
 const variants = {
-    subtleGrey: {
-        container: {
-            bg: 'sandstone.95',
-            hoverBg: 'sandstone.90',
-            borderColor: 'sandstone.90',
-            color: 'sandstone.20',
-            activeBg: 'sandstone.85'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'sandstone.90',
-            hoverBorderColor: 'transparent',
-            color: 'sandstone.20',
-            activeBg: 'sandstone.85'
-        }
-    },
-    subtleBlue: {
-        container: {
-            bg: 'skyBlue.95',
-            hoverBg: 'skyBlue.90',
-            activeBg: 'skyBlue.85',
-            borderColor: 'skyBlue.95',
-            color: 'seaBlue.28'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'skyBlue.90',
-            activeBg: 'skyBlue.85',
-            hoverBorderColor: 'transparent',
-            color: 'seaBlue.28'
-        }
-    },
-    subtleRed: {
-        container: {
-            bg: 'energyRed.95',
-            borderColor: 'energyRed.95',
-            hoverBg: 'energyRed.90',
-            activeBg: 'energyRed.85',
-            color: 'energyRed.45'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'energyRed.90',
-            activeBg: 'energyRed.85',
-            hoverBorderColor: 'transparent',
-            color: 'energyRed.45'
-        }
-    },
-    subtleYellow: {
-        container: {
-            bg: 'sunflower.85',
-            hoverBg: 'sunflower.70',
-            activeBg: 'sunflower.65',
-            borderColor: 'terracotta.30',
-            color: 'sunflower.20'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'sunflower.70',
-            activeBg: 'sunflower.65',
-            hoverBorderColor: 'transparent',
-            color: 'sunflower.20'
-        }
-    },
-    subtleGreen: {
-        container: {
-            bg: 'landGreen.95',
-            hoverBg: 'landGreen.90',
-            borderColor: 'landGreen.30',
-            color: 'landGreen.30',
-            activeBg: 'landGreen.85'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'landGreen.90',
-            activeBg: 'landGreen.85',
-            hoverBorderColor: 'transparent',
-            color: 'landGreen.30'
-        }
-    },
-    /** solids next */
-    solidBlue: {
-        container: {
-            bg: 'seaBlue.28',
-            hoverBg: 'seaBlue.35',
-            activeBg: 'seaBlue.40',
-            borderColor: 'seaBlue.28',
-            color: 'white'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'seaBlue.35',
-            activeBg: 'seaBlue.40',
-            hoverBorderColor: 'transparent',
-            activeBorderColor: 'transparent',
-            color: 'white'
-        }
-    },
-    solidDarkBlue: {
-        container: {
-            bg: 'darkBlue.18',
-            hoverBg: 'darkBlue.25',
-            activeBg: 'darkBlue.35',
-            borderColor: 'darkBlue.18',
-            color: 'white'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'darkBlue.25',
-            activeBg: 'darkBlue.35',
-            hoverBorderColor: 'transparent',
-            color: 'white'
-        }
-    },
-    solidRed: {
-        container: {
-            bg: 'energyRed.45',
-            hoverBg: 'energyRed.54',
-            activeBg: 'energyRed.60',
-            borderColor: 'energyRed.45',
-            color: 'white'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'energyRed.54',
-            activeBg: 'energyRed.60',
-            hoverBorderColor: 'transparent',
-            activeBorderColor: 'transparent',
-            color: 'white'
-        }
-    },
-    solidYellow: {
-        container: {
-            bg: 'sunflower.65',
-            hoverBg: 'sunflower.80',
-            activeBg: 'sunflower.85',
-            borderColor: 'sunflower.65',
-            color: 'sunflower.15'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'sunflower.80',
-            activeBg: 'sunflower.85',
-            hoverBorderColor: 'transparent',
-            color: 'sunflower.15'
-        }
-    },
-    solidGreen: {
-        container: {
-            bg: 'landGreen.35',
-            hoverBg: 'landGreen.41',
-            activeBg: 'landGreen.45',
-            borderColor: 'landGreen.35',
-            color: 'white'
-        },
-        button: {
-            bg: 'transparent',
-            hoverBg: 'landGreen.41',
-            activeBg: 'landGreen.45',
-            hoverBorderColor: 'transparent',
-            activeBorderColor: 'transparent',
-            color: 'white'
-        }
-    }
+    solid: variantSolid,
+    subtle: variantSubtle
 };
 exports.default = {
     baseStyle,

package/dist/cjs/textarea/textarea.js

@@ -44,7 +44,7 @@ const t_1 = __importDefault(require("../t"));
 const utils_1 = require("../utils");
 const helpers_1 = require("./helpers");
 const TextareaTextarea = core_1.styled.textareaBox `
-  border-radius: none;
+  border-radius: md;
   border-width: 1px;
   outline: none;
   padding: 1;