@veracity/vui 2.5.0-beta.1 → 2.5.0

package/dist/cjs/switch/consts.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switchColors = void 0;
+exports.switchColors = {
+    main: 'seaBlue.main',
+    hover: 'seaBlue.40',
+    disabled: 'sandstone.main',
+    disabledBg: 'sandstone.95',
+    green: 'landGreen.main',
+    red: 'energyRed.main'
+};

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

@@ -5,7 +5,7 @@ import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils';
 export declare type SwitchButtonProps = SystemProps & ThemingProps<'Switch'> & {
     /** Provides value to switch in controlled mode. */
     checked?: boolean;
-    /** Available theme colors for this component. */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'blue' | 'green' | 'prussian';
     /** Disables switch and related elements with the right styling. */
     disabled?: boolean;
@@ -38,7 +38,7 @@ export declare type SwitchProps = SystemProps & ThemingProps<'Switch'> & {
     button?: ReactNode;
     /** Provides value to switch button in controlled mode. */
     checked?: boolean;
-    /** Available theme colors for this component. @default blue */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'blue' | 'green' | 'prussian';
     /** Disables switch and related elements with the right styling. */
     disabled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"switch.types.d.ts","sourceRoot":"","sources":["../../../src/switch/switch.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"switch.types.d.ts","sourceRoot":"","sources":["../../../src/switch/switch.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAEzE,oBAAY,iBAAiB,GAAG,WAAW,GACzC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAA;IAC3C,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;IAC1C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACjE,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAEH,oBAAY,aAAa,GAAG,IAAI,CAC9B,WAAW,EACT,SAAS,GACT,aAAa,GACb,UAAU,GACV,MAAM,GACN,QAAQ,GACR,UAAU,GACV,SAAS,GACT,UAAU,GACV,MAAM,GACN,OAAO,GACP,SAAS,CACZ,GAAG;IACF,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAA;IAC3C,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;IAC1C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACjE,6CAA6C;IAC7C,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;IAC7B,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA"}

package/dist/cjs/switch/switchButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switchButton.d.ts","sourceRoot":"","sources":["../../../src/switch/switchButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAkClD,eAAO,MAAM,gBAAgB,gIAoB5B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,2DA+FvB,CAAA;AAEF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"switchButton.d.ts","sourceRoot":"","sources":["../../../src/switch/switchButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAkClD,eAAO,MAAM,gBAAgB,gIAkB5B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,2DAgGvB,CAAA;AAEF,eAAe,YAAY,CAAA"}

package/dist/cjs/switch/switchButton.js

@@ -38,6 +38,7 @@ exports.SwitchButton = exports.SwitchButtonBase = void 0;
 const react_1 = __importStar(require("react"));
 const core_1 = require("../core");
 const utils_1 = require("../utils");
+const consts_1 = require("./consts");
 const context_1 = require("./context");
 const SwitchInput = core_1.styled.inputBox `
   cursor: inherit;
@@ -51,41 +52,38 @@ const SwitchInput = core_1.styled.inputBox `
   width: calc(100% + 10px);
   z-index: 1;
 `;
-/** Circular element that moves along the track when toggled. */
-const SwitchThumb = core_1.styled.spanBox `
-  border-radius: round;
+const SwitchFoundation = core_1.styled.spanBox `
+  border-radius: 100px;
   display: inline-flex;
   flex-shrink: 0;
-  position: absolute;
   transition-duration: fast;
+  position: relative;
+`;
+/** Circular element that moves along the track when toggled. */
+const SwitchThumb = (0, core_1.styled)(SwitchFoundation) `
+  position: absolute;
 `;
 /** Track element along which the thumb moves when toggled. */
-const SwitchTrack = core_1.styled.spanBox `
+const SwitchTrack = (0, core_1.styled)(SwitchFoundation) `
   align-items: center;
-  border-radius: round;
-  display: inline-flex;
   flex: 1;
-  position: relative;
-  transition-duration: fast;
 `;
-exports.SwitchButtonBase = core_1.styled.spanBox `
+exports.SwitchButtonBase = (0, core_1.styled)(SwitchFoundation) `
   color: white;
   cursor: pointer;
-  display: inline-flex;
-  flex-shrink: 0;
-  position: relative;
+  --x-ring-color: green;
 
   &[aria-disabled='true'] {
     cursor: not-allowed;
 
     .vui-switchThumb {
-      background-color: disabled.color;
+      background-color: ${consts_1.switchColors.disabled};
     }
 
     .vui-switchTrack {
-      // Using ring instead of border when disabled, because it's easier
-      --x-ring-color: var(--vui-colors-disabled-border);
-      background-color: disabled.bg;
+      --x-ring-color: ${consts_1.switchColors.disabled};
+      background-color: ${consts_1.switchColors.disabledBg};
+      color: ${consts_1.switchColors.disabled};
     }
   }
 `;
@@ -129,14 +127,14 @@ exports.SwitchButton = (0, core_1.vui)((props, ref) => {
         ring: isFocused ? thumbStyles.ring : 0
     });
     const trackAliasedProps = (0, utils_1.filterUndefined)({
-        bg: isChecked ? trackStyles.bg : 'grey.50',
+        bg: isChecked ? trackStyles.bg : consts_1.switchColors.disabled,
         pl: isChecked ? 1 : labelOffset,
         pr: isChecked ? labelOffset : 1,
-        ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 1
+        ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 3
     });
     return (react_1.default.createElement(exports.SwitchButtonBase, Object.assign({ className: (0, utils_1.cs)('vui-switchButton', className), ref: ref }, buttonStyles, aliasedProps, rest),
-        react_1.default.createElement(SwitchInput, Object.assign({ className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, type: "checkbox" }, { checked, defaultChecked, disabled, id, name, required, value }, inputProps)),
-        react_1.default.createElement(SwitchTrack, Object.assign({ className: "vui-switchTrack" }, trackStyles, trackAliasedProps),
+        react_1.default.createElement(SwitchInput, Object.assign({ className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, tabIndex: -1, type: "checkbox" }, { checked, defaultChecked, disabled, id, name, required, value }, inputProps)),
+        react_1.default.createElement(SwitchTrack, Object.assign({ className: "vui-switchTrack", tabIndex: 0 }, trackStyles, trackAliasedProps),
             !isChecked && innerLabelOff,
             react_1.default.createElement(SwitchThumb, Object.assign({ className: "vui-switchThumb" }, thumbStyles, thumbAliasedProps)),
             isChecked && innerLabelOn)));

package/dist/cjs/switch/switchMain.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switchMain.d.ts","sourceRoot":"","sources":["../../../src/switch/switchMain.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,eAAO,MAAM,UAAU,iIActB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;YA+DT,mBAAmB;WACpB,kBAAkB;CAC1B,CAAA;AAKD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"switchMain.d.ts","sourceRoot":"","sources":["../../../src/switch/switchMain.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,eAAO,MAAM,UAAU,iIActB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM;YA6DT,mBAAmB;WACpB,kBAAkB;CAC1B,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/cjs/switch/switchMain.js

@@ -62,11 +62,10 @@ exports.SwitchBase = core_1.styled.labelBox `
  */
 exports.Switch = (0, core_1.vui)((props, ref) => {
     var _a;
-    const { button, checked, children, className, colorScheme, defaultChecked, disabled, id, innerLabelOff, innerLabelOn, inputProps, inputRef, labelLeft, labelRight, name, onBlur, onChange, onFocus, required, size, value, variant } = props, rest = __rest(props, ["button", "checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
+    const { button, checked, children, className, defaultChecked, disabled, id, innerLabelOff, innerLabelOn, inputProps, inputRef, labelLeft, labelRight, name, onBlur, onChange, onFocus, required, size, value, variant } = props, rest = __rest(props, ["button", "checked", "children", "className", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
     const styles = (0, core_1.useStyleConfig)('Switch', props);
     const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({
         checked,
-        colorScheme,
         defaultChecked,
         disabled,
         name,
@@ -77,7 +76,7 @@ exports.Switch = (0, core_1.vui)((props, ref) => {
         size,
         value,
         variant
-    }), [checked, colorScheme, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant]);
+    }), [checked, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant]);
     const aliasedProps = (0, utils_1.filterUndefined)({
         'aria-disabled': disabled
     });

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

@@ -1,4 +1,3 @@
-import { Dict } from '../utils';
 declare function sizeLg(): {
     button: {
         fontSize: string;
@@ -47,21 +46,18 @@ declare function sizeSm(): {
         size: string;
     };
 };
-declare function variantContained(props: Dict): {
-    button: {
-        thumb: {
-            bg: string;
-        };
-        track: {
-            bg: string;
-            ring: number;
+declare const _default: {
+    baseStyle: {
+        button: {
+            thumb: {
+                bg: string;
+            };
+            track: {
+                ring: number;
+            };
         };
     };
-};
-declare const _default: {
-    baseStyle: {};
     defaultProps: {
-        colorScheme: string;
         size: string;
         variant: string;
     };
@@ -72,7 +68,27 @@ declare const _default: {
         lg: typeof sizeLg;
     };
     variants: {
-        contained: typeof variantContained;
+        primary: {
+            button: {
+                track: {
+                    bg: string;
+                };
+            };
+        };
+        green: {
+            button: {
+                track: {
+                    bg: string;
+                };
+            };
+        };
+        red: {
+            button: {
+                track: {
+                    bg: string;
+                };
+            };
+        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/switch/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,MAAM;;;;;;;;;;;;;;;EAkBd;AAED,iBAAS,MAAM;;;;;;;;;;;;;;;EAkBd;AAED,iBAAS,MAAM;;;;;;;;;;;;;;;EAkBd;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,IAAI;;;;;;;;;;EAcpC;;;;;;;;;;;;;;;;;;AAsBD,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/switch/theme.ts"],"names":[],"mappings":"AAaA,iBAAS,MAAM;;;;;;;;;;;;;;;EAkBd;AAED,iBAAS,MAAM;;;;;;;;;;;;;;;EAkBd;AAED,iBAAS,MAAM;;;;;;;;;;;;;;;EAkBd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCD,wBAMC"}

package/dist/cjs/switch/theme.js

@@ -1,5 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const consts_1 = require("./consts");
+const baseStyle = {
+    button: {
+        thumb: {
+            bg: 'white'
+        },
+        track: {
+            ring: 3
+        }
+    }
+};
 function sizeLg() {
     const button = {
         fontSize: 'md',
@@ -51,24 +62,9 @@ function sizeSm() {
     };
     return { button, label };
 }
-function variantContained(props) {
-    const { colorScheme: c } = props;
-    const button = {
-        thumb: {
-            bg: 'white'
-        },
-        track: {
-            bg: `${c}.80`,
-            ring: 3
-        }
-    };
-    return { button };
-}
-const baseStyle = {};
 const defaultProps = {
-    colorScheme: 'blue',
     size: 'md',
-    variant: 'contained'
+    variant: 'primary'
 };
 const parts = ['container', 'button', 'label'];
 const sizes = {
@@ -77,7 +73,27 @@ const sizes = {
     lg: sizeLg
 };
 const variants = {
-    contained: variantContained
+    primary: {
+        button: {
+            track: {
+                bg: consts_1.switchColors.main
+            }
+        }
+    },
+    green: {
+        button: {
+            track: {
+                bg: consts_1.switchColors.green
+            }
+        }
+    },
+    red: {
+        button: {
+            track: {
+                bg: consts_1.switchColors.red
+            }
+        }
+    }
 };
 exports.default = {
     baseStyle,

package/dist/cjs/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAwBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDAmGnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAkBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDA+FnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/textarea/textarea.js

@@ -40,9 +40,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = exports.TextareaBase = void 0;
 const react_1 = __importStar(require("react"));
 const core_1 = require("../core");
+const consts_1 = require("../input/consts");
 const t_1 = __importDefault(require("../t"));
 const utils_1 = require("../utils");
-const consts_1 = require("./consts");
 const helpers_1 = require("./helpers");
 const TextareaTextarea = core_1.styled.textareaBox `
   border-radius: none;
@@ -53,15 +53,9 @@ const TextareaTextarea = core_1.styled.textareaBox `
   transition-duration: fast;
   width: 100%;
 
-  &::placeholder {
-    color: grey.60;
-  }
-
   &[aria-disabled='true'],
   &[aria-disabled='true']::placeholder {
-    background-color: disabled.bg;
-    border-color: disabled.border;
-    color: disabled.color;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 `;
@@ -76,13 +70,10 @@ exports.TextareaBase = core_1.styled.divBox `
  * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
  */
 exports.Textarea = (0, core_1.vui)((props, ref) => {
-    const _a = (0, core_1.omitThemingProps)(props), { autoFocus, className, colorScheme: colorSchemeProp, cols, defaultValue, disabled, id, isInvalid, maxLength, name, onBlur, onChange: onChangeProp, onFocus, placeholder, readOnly, required, resize = 'none', rows, showCount, textareaProps = {}, textareaRef, value } = _a, rest = __rest(_a, ["autoFocus", "className", "colorScheme", "cols", "defaultValue", "disabled", "id", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "rows", "showCount", "textareaProps", "textareaRef", "value"]);
+    const _a = (0, core_1.omitThemingProps)(props), { autoFocus, className, colorScheme: colorSchemeProp, cols, defaultValue, disabled, id, maxLength, name, onBlur, onChange: onChangeProp, onFocus, placeholder, readOnly, required, resize = 'none', rows, showCount, textareaProps = {}, textareaRef, value } = _a, rest = __rest(_a, ["autoFocus", "className", "colorScheme", "cols", "defaultValue", "disabled", "id", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "rows", "showCount", "textareaProps", "textareaRef", "value"]);
     const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
     const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue);
-    const colorProps = (0, utils_1.filterUndefined)({
-        colorScheme: colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)
-    });
-    const styles = (0, core_1.useStyleConfig)('Textarea', Object.assign(Object.assign({}, colorProps), props));
+    const styles = (0, core_1.useStyleConfig)('Textarea', props);
     function onChange(e) {
         setValueInternal(e.target.value);
         setCount(e.target.value.length);
@@ -93,9 +84,9 @@ exports.Textarea = (0, core_1.vui)((props, ref) => {
     });
     const textareaAliasedProps = (0, utils_1.filterUndefined)({
         'aria-disabled': disabled,
-        bg: readOnly ? consts_1.greyLightColor : undefined,
-        focusBorderColor: !readOnly ? 'transparent' : undefined,
-        focusRing: readOnly ? 0 : undefined
+        bg: readOnly ? consts_1.inputColors.disabled : undefined,
+        focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
+        focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
     (0, react_1.useEffect)(() => {
         var _a;
@@ -120,7 +111,7 @@ exports.Textarea = (0, core_1.vui)((props, ref) => {
             resize,
             rows
         }, { value: valueInternal }, styles.textarea, textareaAliasedProps, textareaProps)),
-        showCount && (react_1.default.createElement(t_1.default, { className: "vui-textareaCount", color: maxLength && count > maxLength ? consts_1.redColor : consts_1.greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+        showCount && (react_1.default.createElement(t_1.default, { className: "vui-textareaCount", color: maxLength && count > maxLength ? consts_1.inputColors.error : consts_1.inputColors.helpText, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
             count,
             " ",
             maxLength ? `/ ${maxLength}` : null))));

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

@@ -7,7 +7,7 @@ export declare type TextareaProps = SystemProps & ThemingProps<'Textarea'> & {
     autoFocus?: boolean;
     /** Children are disabled for this component. */
     children?: never;
-    /** Available theme colors for this component. @default grey */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'green' | 'grey' | 'red';
     /** Passed to the inner input. */
     cols?: number;
@@ -15,7 +15,7 @@ export declare type TextareaProps = SystemProps & ThemingProps<'Textarea'> & {
     defaultValue?: number | string;
     /** Passed to the inner input. */
     disabled?: boolean;
-    /** Styles the textarea in invalid state. */
+    /** Deprecated. Please use variant="red" instead. @deprecated*/
     isInvalid?: boolean;
     /** Passed to the inner input. */
     maxLength?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.types.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAEzE,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAA;IAC/C,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAA;IAClD,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAA;IAChD,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC,CAAA;IAChD,wCAAwC;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACvE,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA"}
+{"version":3,"file":"textarea.types.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAEzE,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;IACtC,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAA;IAC/C,iCAAiC;IACjC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAA;IAClD,iCAAiC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAA;IAChD,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC,CAAA;IAChD,wCAAwC;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;IACvE,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA"}

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

@@ -1,22 +1,39 @@
-import { Dict } from '../utils';
-declare function variantDefault(props: Dict): {
-    container: {};
-    textarea: {
-        borderColor: string;
-        focusRing: number;
-        focusRingColor: string;
-    };
-};
 declare const _default: {
-    baseStyle: {};
+    baseStyle: {
+        textarea: {
+            focusWithinRing: number;
+            color: string;
+        };
+        input: {
+            color: {
+                placeholder: string;
+            };
+        };
+    };
     defaultProps: {
-        colorScheme: string;
         variant: string;
     };
     parts: string[];
     sizes: {};
     variants: {
-        default: typeof variantDefault;
+        grey: {
+            textarea: {
+                borderColor: string;
+                focusWithinRingColor: string;
+            };
+        };
+        green: {
+            textarea: {
+                borderColor: string;
+                focusWithinRingColor: string;
+            };
+        };
+        red: {
+            textarea: {
+                borderColor: string;
+                focusWithinRingColor: string;
+            };
+        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/textarea/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,cAAc,CAAC,KAAK,EAAE,IAAI;;;;;;;EAiBlC;;;;;;;;;;;;;AAiBD,wBAMC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/textarea/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,wBAMC"}

package/dist/cjs/textarea/theme.js

@@ -1,28 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function variantDefault(props) {
-    const { colorScheme: c } = props;
-    const container = {};
-    const textarea = {
-        borderColor: `${c}.80`,
-        focusRing: 2,
-        focusRingColor: `${c}.80`
-    };
-    if (c === 'grey') {
-        textarea.borderColor = `${c}.60`;
-        textarea.focusRingColor = 'blue.50';
+const consts_1 = require("../input/consts");
+const baseStyle = {
+    textarea: {
+        focusWithinRing: 2,
+        color: consts_1.inputColors.inputText
+    },
+    input: {
+        color: { placeholder: consts_1.inputColors.placeholder }
     }
-    return { container, textarea };
-}
-const baseStyle = {};
+};
 const defaultProps = {
-    colorScheme: 'grey',
-    variant: 'default'
+    variant: 'grey'
 };
 const parts = ['container', 'textarea'];
 const sizes = {};
 const variants = {
-    default: variantDefault
+    grey: {
+        textarea: {
+            borderColor: consts_1.inputColors.border,
+            focusWithinRingColor: consts_1.inputColors.focus
+        }
+    },
+    green: {
+        textarea: {
+            borderColor: consts_1.inputColors.success,
+            focusWithinRingColor: consts_1.inputColors.success
+        }
+    },
+    red: {
+        textarea: {
+            borderColor: consts_1.inputColors.error,
+            focusWithinRingColor: consts_1.inputColors.error
+        }
+    }
 };
 exports.default = {
     baseStyle,