@veracity/vui 2.5.0-beta.1 → 2.5.0

package/dist/esm/switch/switchButton.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
 import { cs, filterUndefined } from '../utils';
+import { switchColors } from './consts';
 import { useSwitchContext } from './context';
 const SwitchInput = styled.inputBox `
   cursor: inherit;
@@ -14,41 +15,38 @@ const SwitchInput = styled.inputBox `
   width: calc(100% + 10px);
   z-index: 1;
 `;
-/** Circular element that moves along the track when toggled. */
-const SwitchThumb = styled.spanBox `
-  border-radius: round;
+const SwitchFoundation = 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 = styled(SwitchFoundation) `
+  position: absolute;
 `;
 /** Track element along which the thumb moves when toggled. */
-const SwitchTrack = styled.spanBox `
+const SwitchTrack = styled(SwitchFoundation) `
   align-items: center;
-  border-radius: round;
-  display: inline-flex;
   flex: 1;
-  position: relative;
-  transition-duration: fast;
 `;
-export const SwitchButtonBase = styled.spanBox `
+export const SwitchButtonBase = 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: ${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: ${switchColors.disabled};
+      background-color: ${switchColors.disabledBg};
+      color: ${switchColors.disabled};
     }
   }
 `;
@@ -92,14 +90,14 @@ export const SwitchButton = vui((props, ref) => {
         ring: isFocused ? thumbStyles.ring : 0
     });
     const trackAliasedProps = filterUndefined({
-        bg: isChecked ? trackStyles.bg : 'grey.50',
+        bg: isChecked ? trackStyles.bg : 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.createElement(SwitchButtonBase, { className: cs('vui-switchButton', className), ref: ref, ...buttonStyles, ...aliasedProps, ...rest },
-        React.createElement(SwitchInput, { className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, type: "checkbox", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),
-        React.createElement(SwitchTrack, { className: "vui-switchTrack", ...trackStyles, ...trackAliasedProps },
+        React.createElement(SwitchInput, { className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, tabIndex: -1, type: "checkbox", ...{ checked, defaultChecked, disabled, id, name, required, value }, ...inputProps }),
+        React.createElement(SwitchTrack, { className: "vui-switchTrack", tabIndex: 0, ...trackStyles, ...trackAliasedProps },
             !isChecked && innerLabelOff,
             React.createElement(SwitchThumb, { className: "vui-switchThumb", ...thumbStyles, ...thumbAliasedProps }),
             isChecked && innerLabelOn)));

package/dist/esm/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/esm/switch/switchMain.js

@@ -24,11 +24,10 @@ export const SwitchBase = styled.labelBox `
  * Forwards many relevant props to the innner input element. Exposes some props to the children via context.
  */
 export const Switch = vui((props, ref) => {
-    const { button, checked, children, className, colorScheme, defaultChecked, disabled, id, innerLabelOff, innerLabelOn, inputProps, inputRef, labelLeft, labelRight, name, onBlur, onChange, onFocus, required, size, value, variant, ...rest } = props;
+    const { button, checked, children, className, defaultChecked, disabled, id, innerLabelOff, innerLabelOn, inputProps, inputRef, labelLeft, labelRight, name, onBlur, onChange, onFocus, required, size, value, variant, ...rest } = props;
     const styles = useStyleConfig('Switch', props);
     const context = useMemo(() => filterUndefined({
         checked,
-        colorScheme,
         defaultChecked,
         disabled,
         name,
@@ -39,7 +38,7 @@ export const Switch = 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 = filterUndefined({
         'aria-disabled': disabled
     });

package/dist/esm/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/esm/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/esm/switch/theme.js

@@ -1,3 +1,14 @@
+import { switchColors } from './consts';
+const baseStyle = {
+    button: {
+        thumb: {
+            bg: 'white'
+        },
+        track: {
+            ring: 3
+        }
+    }
+};
 function sizeLg() {
     const button = {
         fontSize: 'md',
@@ -49,24 +60,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 = {
@@ -75,7 +71,27 @@ const sizes = {
     lg: sizeLg
 };
 const variants = {
-    contained: variantContained
+    primary: {
+        button: {
+            track: {
+                bg: switchColors.main
+            }
+        }
+    },
+    green: {
+        button: {
+            track: {
+                bg: switchColors.green
+            }
+        }
+    },
+    red: {
+        button: {
+            track: {
+                bg: switchColors.red
+            }
+        }
+    }
 };
 export default {
     baseStyle,

package/dist/esm/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/esm/textarea/textarea.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
+import { inputColors } from '../input/consts';
 import T from '../t';
 import { cs, filterUndefined } from '../utils';
-import { greyColor, greyLightColor, redColor } from './consts';
 import { getInitialCount } from './helpers';
 const TextareaTextarea = styled.textareaBox `
   border-radius: none;
@@ -13,15 +13,9 @@ const TextareaTextarea = 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;
   }
 `;
@@ -36,13 +30,10 @@ export const TextareaBase = styled.divBox `
  * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
  */
 export const Textarea = vui((props, ref) => {
-    const { 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, ...rest } = omitThemingProps(props);
+    const { autoFocus, className, colorScheme: colorSchemeProp, cols, defaultValue, disabled, id, maxLength, name, onBlur, onChange: onChangeProp, onFocus, placeholder, readOnly, required, resize = 'none', rows, showCount, textareaProps = {}, textareaRef, value, ...rest } = omitThemingProps(props);
     const [count, setCount] = useState(getInitialCount(props));
     const [valueInternal, setValueInternal] = useState(defaultValue);
-    const colorProps = filterUndefined({
-        colorScheme: colorSchemeProp ?? (isInvalid ? 'red' : undefined)
-    });
-    const styles = useStyleConfig('Textarea', { ...colorProps, ...props });
+    const styles = useStyleConfig('Textarea', props);
     function onChange(e) {
         setValueInternal(e.target.value);
         setCount(e.target.value.length);
@@ -53,9 +44,9 @@ export const Textarea = vui((props, ref) => {
     });
     const textareaAliasedProps = filterUndefined({
         'aria-disabled': disabled,
-        bg: readOnly ? greyLightColor : undefined,
-        focusBorderColor: !readOnly ? 'transparent' : undefined,
-        focusRing: readOnly ? 0 : undefined
+        bg: readOnly ? inputColors.disabled : undefined,
+        focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
+        focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
     useEffect(() => {
         setValueInternal(value);
@@ -79,7 +70,7 @@ export const Textarea = vui((props, ref) => {
                 resize,
                 rows
             }, value: valueInternal, ...styles.textarea, ...textareaAliasedProps, ...textareaProps }),
-        showCount && (React.createElement(T, { className: "vui-textareaCount", color: maxLength && count > maxLength ? redColor : greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+        showCount && (React.createElement(T, { className: "vui-textareaCount", color: maxLength && count > maxLength ? inputColors.error : inputColors.helpText, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
             count,
             " ",
             maxLength ? `/ ${maxLength}` : null))));

package/dist/esm/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/esm/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/esm/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/esm/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/esm/textarea/theme.js

@@ -1,26 +1,37 @@
-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';
+import { inputColors } from '../input/consts';
+const baseStyle = {
+    textarea: {
+        focusWithinRing: 2,
+        color: inputColors.inputText
+    },
+    input: {
+        color: { placeholder: 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: inputColors.border,
+            focusWithinRingColor: inputColors.focus
+        }
+    },
+    green: {
+        textarea: {
+            borderColor: inputColors.success,
+            focusWithinRingColor: inputColors.success
+        }
+    },
+    red: {
+        textarea: {
+            borderColor: inputColors.error,
+            focusWithinRingColor: inputColors.error
+        }
+    }
 };
 export default {
     baseStyle,

package/dist/esm/theme/components.d.ts

@@ -1335,6 +1335,7 @@ declare const _default: {
         baseStyle: {};
         defaultProps: {
             size: string;
+            variant: string;
         };
         sizes: {
             sm: {
@@ -1374,12 +1375,28 @@ declare const _default: {
                 };
             };
         };
-        variants: {};
+        variants: {
+            primary: {
+                bg: string;
+                color: string;
+            };
+            green: {
+                bg: string;
+                color: string;
+            };
+            red: {
+                bg: string;
+                color: string;
+            };
+        };
     };
     ProgressCircular: {
-        baseStyle: {};
+        baseStyle: {
+            color: string;
+        };
         defaultProps: {
             size: string;
+            variant: string;
         };
         sizes: {
             sm: {
@@ -1407,7 +1424,26 @@ declare const _default: {
                 fontSize: number;
             };
         };
-        variants: {};
+        variants: {
+            primary: {
+                stroke: {
+                    main: string;
+                    progress: string;
+                };
+            };
+            green: {
+                stroke: {
+                    main: string;
+                    progress: string;
+                };
+            };
+            red: {
+                stroke: {
+                    main: string;
+                    progress: string;
+                };
+            };
+        };
     };
     Popover: {
         baseStyle: {};
@@ -1607,9 +1643,17 @@ declare const _default: {
         };
     };
     Switch: {
-        baseStyle: {};
+        baseStyle: {
+            button: {
+                thumb: {
+                    bg: string;
+                };
+                track: {
+                    ring: number;
+                };
+            };
+        };
         defaultProps: {
-            colorScheme: string;
             size: string;
             variant: string;
         };
@@ -1665,14 +1709,24 @@ declare const _default: {
             };
         };
         variants: {
-            contained: (props: import("..").Dict<any>) => {
+            primary: {
                 button: {
-                    thumb: {
+                    track: {
+                        bg: string;
+                    };
+                };
+            };
+            green: {
+                button: {
+                    track: {
                         bg: string;
                     };
+                };
+            };
+            red: {
+                button: {
                     track: {
                         bg: string;
-                        ring: number;
                     };
                 };
             };
@@ -2030,20 +2084,39 @@ declare const _default: {
         };
     };
     Textarea: {
-        baseStyle: {};
+        baseStyle: {
+            textarea: {
+                focusWithinRing: number;
+                color: string;
+            };
+            input: {
+                color: {
+                    placeholder: string;
+                };
+            };
+        };
         defaultProps: {
-            colorScheme: string;
             variant: string;
         };
         parts: string[];
         sizes: {};
         variants: {
-            default: (props: import("..").Dict<any>) => {
-                container: {};
+            grey: {
+                textarea: {
+                    borderColor: string;
+                    focusWithinRingColor: string;
+                };
+            };
+            green: {
+                textarea: {
+                    borderColor: string;
+                    focusWithinRingColor: string;
+                };
+            };
+            red: {
                 textarea: {
                     borderColor: string;
-                    focusRing: number;
-                    focusRingColor: string;
+                    focusWithinRingColor: string;
                 };
             };
         };

package/dist/esm/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,wBA6CC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,wBA6CC"}