@peculiar/react-components 0.3.15-alpha.1 → 0.4.0

package/dist/esnext/Radio/radio.js

@@ -14,9 +14,14 @@ const RadioRoot = styled('label')({
     width: 'var(--pv-size-base-4)',
     height: 'var(--pv-size-base-4)',
     borderRadius: '50%',
-    color: 'var(--pv-color-gray-6)',
     position: 'relative',
-});
+}, (props) => ({
+    ...(props.theme.mode === 'dark' ? {
+        color: 'var(--pv-color-gray-5)',
+    } : {
+        color: 'var(--pv-color-gray-6)',
+    }),
+}));
 const RadioInput = styled('input')({
     cursor: 'inherit',
     width: '100%',
@@ -28,7 +33,6 @@ const RadioInput = styled('input')({
     borderWidth: '2px',
     borderStyle: 'solid',
     appearance: 'none',
-    color: 'var(--pv-color-gray-9)',
     borderColor: 'currentColor',
     backgroundColor: 'transparent',
     '&:before': {
@@ -43,43 +47,61 @@ const RadioInput = styled('input')({
         backgroundColor: 'currentColor',
         transition: 'opacity 200ms',
     },
-    '&:checked': {
-        '+ [aria-hidden]': {
-            color: 'var(--pv-color-primary)',
-            opacity: 1,
-        },
-    },
-    '&:not(:disabled)': {
-        cursor: 'pointer',
+}, (props) => {
+    const isDark = props.theme.mode === 'dark';
+    let color = 'var(--pv-color-gray-9)';
+    let colorChecked = 'var(--pv-color-primary-shade-1)';
+    let ellipseColorChecked = 'var(--pv-color-primary)';
+    let colorDisabled = 'var(--pv-color-gray-6)';
+    let colorDisabledChecked = 'var(--pv-color-gray-7)';
+    if (isDark) {
+        color = 'var(--pv-color-gray-7)';
+        colorChecked = 'var(--pv-color-primary)';
+        ellipseColorChecked = 'var(--pv-color-primary-tint-1)';
+        colorDisabled = 'var(--pv-color-gray-5)';
+        colorDisabled = 'var(--pv-color-gray-5)';
+        colorDisabledChecked = 'var(--pv-color-gray-5)';
+    }
+    return ({
+        color,
         '&:checked': {
-            color: 'var(--pv-color-primary-shade-1)',
-        },
-        '&:hover': {
-            '&:before': {
-                opacity: 0.18,
+            '+ [aria-hidden]': {
+                color: ellipseColorChecked,
+                opacity: 1,
             },
         },
-        '&:focus': {
-            '&:before': {
-                opacity: 0.23,
+        '&:not(:disabled)': {
+            cursor: 'pointer',
+            '&:checked': {
+                color: colorChecked,
             },
-        },
-        '&:active': {
-            '&:before': {
-                opacity: 0.30,
+            '&:hover': {
+                '&:before': {
+                    opacity: 0.18,
+                },
+            },
+            '&:focus': {
+                '&:before': {
+                    opacity: 0.23,
+                },
+            },
+            '&:active': {
+                '&:before': {
+                    opacity: 0.30,
+                },
             },
         },
-    },
-    '&:disabled': {
-        cursor: 'not-allowed',
-        '+ [aria-hidden]': {
-            color: 'inherit',
-        },
-        color: 'var(--pv-color-gray-6)',
-        '&:checked': {
-            color: 'var(--pv-color-gray-7)',
+        '&:disabled': {
+            cursor: 'not-allowed',
+            '+ [aria-hidden]': {
+                color: 'inherit',
+            },
+            color: colorDisabled,
+            '&:checked': {
+                color: colorDisabledChecked,
+            },
         },
-    },
+    });
 });
 const CheckboxIcon = styled('svg')({
     display: 'block',

package/dist/esnext/Radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/Radio/radio.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/Radio/radio.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Select/select.js

@@ -16,11 +16,9 @@ const SelectRoot = styled('select')((props) => ({
     width: '100%',
     borderRadius: '4px',
     padding: '0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2)',
-    color: 'var(--pv-color-black)',
     backgroundColor: 'var(--pv-color-gray-1)',
     borderStyle: 'solid',
     borderWidth: '1px',
-    borderColor: 'var(--pv-color-gray-8)',
     transition: 'background-color 200ms, color 200ms, border-color 200ms',
     display: 'block',
     appearance: 'none',
@@ -28,26 +26,6 @@ const SelectRoot = styled('select')((props) => ({
     fontSize: 'var(--pv-text-c1-size)',
     lineHeight: 'var(--pv-text-c1-height)',
     letterSpacing: 'var(--pv-text-c1-spacing)',
-    '&:hover': {
-        backgroundColor: 'var(--pv-color-gray-3)',
-        borderColor: 'var(--pv-color-gray-7)',
-    },
-    '&:disabled': {
-        cursor: 'not-allowed',
-        backgroundColor: 'var(--pv-color-gray-1)',
-        borderColor: 'var(--pv-color-gray-5)',
-        color: 'var(--pv-color-gray-7)',
-    },
-    '&:not(:disabled)': {
-        '&[aria-invalid]': {
-            backgroundColor: 'var(--pv-color-wrong-tint-5)',
-            borderColor: 'var(--pv-color-wrong-tint-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-secondary-tint-5)',
-            borderColor: 'var(--pv-color-secondary-tint-3)',
-        },
-    },
     ...(props.selectSize === 'small' && {
         height: 'var(--pv-size-base-6)',
     }),
@@ -57,7 +35,54 @@ const SelectRoot = styled('select')((props) => ({
     ...(props.selectSize === 'large' && {
         height: 'var(--pv-size-base-8)',
     }),
-}));
+}), (props) => {
+    const isDark = props.theme.mode === 'dark';
+    const color = isDark
+        ? 'var(--pv-color-white)'
+        : 'var(--pv-color-black)';
+    let borderColor = 'var(--pv-color-gray-8)';
+    let borderColorHover = 'var(--pv-color-gray-7)';
+    let borderColorDisabled = 'var(--pv-color-gray-5)';
+    let colorDisabled = 'var(--pv-color-gray-7)';
+    let invalidBackgroundColor = 'var(--pv-color-wrong-tint-5)';
+    let invalidBorderColor = 'var(--pv-color-wrong-tint-3)';
+    let backgroundColorFocus = 'var(--pv-color-secondary-tint-5)';
+    let borderColorFocus = 'var(--pv-color-secondary-tint-3)';
+    if (isDark) {
+        borderColor = 'var(--pv-color-gray-5)';
+        borderColorHover = 'var(--pv-color-gray-4)';
+        borderColorDisabled = 'var(--pv-color-gray-4)';
+        colorDisabled = 'var(--pv-color-gray-4)';
+        invalidBackgroundColor = 'var(--pv-color-wrong-shade-4)';
+        invalidBorderColor = 'var(--pv-color-wrong-shade-1)';
+        backgroundColorFocus = 'var(--pv-color-secondary-shade-4)';
+        borderColorFocus = 'var(--pv-color-secondary-shade-1)';
+    }
+    return ({
+        color,
+        borderColor,
+        '&:hover': {
+            backgroundColor: 'var(--pv-color-gray-3)',
+            borderColor: borderColorHover,
+        },
+        '&:disabled': {
+            cursor: 'not-allowed',
+            backgroundColor: 'var(--pv-color-gray-1)',
+            borderColor: borderColorDisabled,
+            color: colorDisabled,
+        },
+        '&:not(:disabled)': {
+            '&[aria-invalid]': {
+                backgroundColor: invalidBackgroundColor,
+                borderColor: invalidBorderColor,
+            },
+            '&:focus': {
+                backgroundColor: backgroundColorFocus,
+                borderColor: borderColorFocus,
+            },
+        },
+    });
+});
 const SelectLabel = styled('label')({
     marginBottom: '2px',
     display: 'inline-block',

package/dist/esnext/Select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/Select/select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/Select/select.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Switch/switch.js

@@ -20,7 +20,7 @@ const SwitchRoot = styled('label')({
 });
 const SwitchInput = styled('input', {
     shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
-})((props) => ({
+})({
     label: 'Switch-input',
     overflow: 'hidden',
     width: '100%',
@@ -31,39 +31,65 @@ const SwitchInput = styled('input', {
     borderRadius: 'inherit',
     appearance: 'none',
     backgroundColor: 'var(--pv-color-gray-6)',
-    '&:checked': {
-        backgroundColor: `var(--pv-color-${props.color})`,
-        '+ [aria-hidden]': {
-            transform: 'translateX(calc(50% - 2px))',
-            '&:before': {
-                backgroundColor: `var(--pv-color-${props.color}-shade-2)`,
+}, (props) => {
+    const isDark = props.theme.mode === 'dark';
+    let backgroundColorChecked = `var(--pv-color-${props.color})`;
+    let borderColor = 'var(--pv-color-gray-3)';
+    let borderColorDisabled = 'var(--pv-color-gray-3)';
+    let backgroundColorDisabled = 'var(--pv-color-gray-1)';
+    let backgroundColorDisabledChecked = `var(--pv-color-${props.color}-tint-3)`;
+    if (isDark) {
+        backgroundColorChecked = `var(--pv-color-${props.color}-tint-1)`;
+        borderColor = 'var(--pv-color-gray-9)';
+        borderColorDisabled = 'var(--pv-color-gray-6)';
+        backgroundColorDisabled = 'var(--pv-color-gray-7)';
+        backgroundColorDisabledChecked = `var(--pv-color-${props.color}-shade-3)`;
+    }
+    return {
+        '&:checked': {
+            backgroundColor: backgroundColorChecked,
+            '+ [aria-hidden]': {
+                transform: 'translateX(calc(50% - 2px))',
+                '&:before': {
+                    backgroundColor: `var(--pv-color-${props.color}-shade-2)`,
+                },
             },
         },
-    },
-    '&:disabled': {
-        cursor: 'not-allowed',
-        pointerEvents: 'none',
-        opacity: 0.4,
-    },
-    '&:not(:disabled)': {
-        cursor: 'pointer',
-        '&:hover': {
-            '+ [aria-hidden]:before': {
-                opacity: 0.18,
+        '&:disabled': {
+            cursor: 'not-allowed',
+            pointerEvents: 'none',
+            backgroundColor: 'var(--pv-color-gray-4)',
+            '+ [aria-hidden]': {
+                borderColor: borderColorDisabled,
+                backgroundColor: backgroundColorDisabled,
             },
-        },
-        '&:focus': {
-            '+ [aria-hidden]:before': {
-                opacity: 0.23,
+            '&:checked': {
+                backgroundColor: backgroundColorDisabledChecked,
             },
         },
-        '&:active': {
-            '+ [aria-hidden]:before': {
-                opacity: 0.30,
+        '&:not(:disabled)': {
+            cursor: 'pointer',
+            '+ [aria-hidden]': {
+                borderColor,
+            },
+            '&:hover': {
+                '+ [aria-hidden]:before': {
+                    opacity: 0.18,
+                },
+            },
+            '&:focus': {
+                '+ [aria-hidden]:before': {
+                    opacity: 0.23,
+                },
+            },
+            '&:active': {
+                '+ [aria-hidden]:before': {
+                    opacity: 0.30,
+                },
             },
         },
-    },
-}));
+    };
+});
 const SwitchDot = styled(Box)({
     display: 'block',
     position: 'absolute',
@@ -95,7 +121,7 @@ export const Switch = React.forwardRef((props, ref) => {
     const id = useId(idProp);
     return (React.createElement(SwitchRoot, { ref: ref, htmlFor: id, ...other },
         React.createElement(SwitchInput, { ...inputProps, type: "checkbox", name: name, id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, color: color, onChange: onChange }),
-        React.createElement(SwitchDot, { "aria-hidden": true, background: `${color}-contrast`, borderColor: "gray-3", borderWidth: 1, borderStyle: "solid", borderRadius: 100 })));
+        React.createElement(SwitchDot, { "aria-hidden": true, background: `${color}-contrast`, borderWidth: 1, borderStyle: "solid", borderRadius: 100 })));
 });
 Switch.displayName = 'Switch';
 Switch.defaultProps = {

package/dist/esnext/Switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/Switch/switch.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/Switch/switch.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Tabs/tab.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
 import { Typography } from '../Typography';
 /**
  *
@@ -7,7 +8,9 @@ import { Typography } from '../Typography';
 /**
  * Styles.
  */
-const TabRoot = styled('button')({
+const TabRoot = styled('button', {
+    shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
+})((props) => ({
     fontFamily: 'inherit',
     outline: 'none',
     cursor: 'pointer',
@@ -23,23 +26,59 @@ const TabRoot = styled('button')({
     alignItems: 'center',
     justifyContent: 'center',
     textDecoration: 'none',
-    '&:disabled': {
-        cursor: 'not-allowed',
-    },
-    '&[aria-selected]': {
+    ...(props.selected && ({
         borderColor: 'var(--pv-color-secondary)',
-    },
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-secondary-tint-5)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-secondary-tint-4)',
+    })),
+}), (props) => {
+    const isDark = props.theme.mode === 'dark';
+    const isWhite = props.color === 'white';
+    let color;
+    const colorDisabled = isDark
+        ? 'var(--pv-color-gray-5)'
+        : 'var(--pv-color-gray-7)';
+    let backgroundColorHove = 'var(--pv-color-secondary-tint-5)';
+    let backgroundColorFocus = 'var(--pv-color-secondary-tint-4)';
+    let backgroundColorActive = 'var(--pv-color-secondary-tint-3)';
+    if (isWhite) {
+        color = 'var(--pv-color-gray-9)';
+    }
+    else if (isDark) {
+        color = 'var(--pv-color-gray-7)';
+    }
+    else {
+        color = 'var(--pv-color-gray-10)';
+    }
+    if (isDark) {
+        backgroundColorHove = 'var(--pv-color-secondary-shade-4)';
+        backgroundColorFocus = 'var(--pv-color-secondary-shade-3)';
+        backgroundColorActive = 'var(--pv-color-secondary-shade-2)';
+    }
+    if (props.selected) {
+        if (isDark || isWhite) {
+            color = 'var(--pv-color-white)';
+        }
+        else {
+            color = 'var(--pv-color-black)';
+        }
+    }
+    return {
+        '&:disabled': {
+            cursor: 'not-allowed',
+            color: colorDisabled,
         },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-secondary-tint-3)',
+        '&:not(:disabled)': {
+            color,
+            '&:hover': {
+                backgroundColor: backgroundColorHove,
+            },
+            '&:focus': {
+                backgroundColor: backgroundColorFocus,
+            },
+            '&:active': {
+                backgroundColor: backgroundColorActive,
+            },
         },
-    },
+    };
 });
 /**
  *
@@ -49,28 +88,13 @@ export const Tab = React.forwardRef((props, ref) => {
     // @ts-ignore
     selected, children, onChange, ...other } = props;
     const Component = component || 'button';
-    const textColor = React.useMemo(() => {
-        if (disabled) {
-            return 'gray-7';
-        }
-        if (color === 'white') {
-            if (selected) {
-                return 'white';
-            }
-            return 'gray-9';
-        }
-        if (selected) {
-            return 'black';
-        }
-        return 'gray-10';
-    }, [disabled, selected, color]);
     const handleClick = (event) => {
         if (!selected && onChange) {
             onChange(event, id);
         }
     };
-    return (React.createElement(TabRoot, { as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id, "aria-selected": selected || undefined, onClick: handleClick, ...other },
-        React.createElement(Typography, { variant: "s2", component: "span", color: textColor }, children)));
+    return (React.createElement(TabRoot, { as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id, color: color, selected: selected, onClick: handleClick, ...other },
+        React.createElement(Typography, { variant: "s2", component: "span", color: "inherit" }, children)));
 });
 Tab.displayName = 'Tab';
 Tab.defaultProps = {

package/dist/esnext/Tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/Tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAuC3C;;GAEG;AAEH;;GAEG;AACH,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC/B,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,CAAC;IACT,YAAY,EAAE,uBAAuB;IACrC,SAAS,EAAE,wBAAwB;IACnC,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,yBAAyB;IAClC,eAAe,EAAE,aAAa;IAC9B,UAAU,EAAE,yDAAyD;IACrE,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,cAAc,EAAE,MAAM;IACtB,YAAY,EAAE;QACZ,MAAM,EAAE,aAAa;KACtB;IACD,kBAAkB,EAAE;QAClB,WAAW,EAAE,2BAA2B;KACzC;IACD,kBAAkB,EAAE;QAClB,SAAS,EAAE;YACT,eAAe,EAAE,kCAAkC;SACpD;QACD,SAAS,EAAE;YACT,eAAe,EAAE,kCAAkC;SACpD;QACD,UAAU,EAAE;YACV,eAAe,EAAE,kCAAkC;SACpD;KACF;CACF,CAAC,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAChE,MAAM,EACJ,KAAK,GAAG,OAAO,EACf,SAAS,EACT,EAAE,EACF,QAAQ;IACR,aAAa;IACb,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,SAAS,IAAI,QAAQ,CAAC;IAExC,MAAM,SAAS,GAAc,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9C,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC;SACjB;QAED,IAAI,KAAK,KAAK,OAAO,EAAE;YACrB,IAAI,QAAQ,EAAE;gBACZ,OAAO,OAAO,CAAC;aAChB;YAED,OAAO,QAAQ,CAAC;SACjB;QAED,IAAI,QAAQ,EAAE;YACZ,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhC,MAAM,WAAW,GAAG,CAAC,KAAsD,EAAE,EAAE;QAC7E,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;YACzB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,mBACS,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,WAAW,KAChB,KAAK;QAET,oBAAC,UAAU,IACT,OAAO,EAAC,IAAI,EACZ,SAAS,EAAC,MAAM,EAChB,KAAK,EAAE,SAAS,IAEf,QAAQ,CACE,CACL,CACX,CAAC;AACJ,CAAC,CAAqC,CAAC;AAEvC,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;AAExB,GAAG,CAAC,YAAY,GAAG;IACjB,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,OAAO;CACf,CAAC"}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/Tabs/tab.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/TextField/text_field.js

@@ -17,33 +17,9 @@ const TextFieldInput = styled(Typography)((props) => ({
     backgroundColor: 'var(--pv-color-gray-1)',
     borderStyle: 'solid',
     borderWidth: '1px',
-    borderColor: 'var(--pv-color-gray-8)',
     transition: 'background-color 200ms, color 200ms, border-color 200ms',
     display: 'inline-flex',
     appearance: 'none',
-    '&::placeholder': {
-        color: 'var(--pv-color-gray-9)',
-    },
-    '&:hover': {
-        backgroundColor: 'var(--pv-color-gray-3)',
-        borderColor: 'var(--pv-color-gray-7)',
-    },
-    '&:disabled': {
-        cursor: 'not-allowed',
-        backgroundColor: 'var(--pv-color-gray-1)',
-        borderColor: 'var(--pv-color-gray-5)',
-        color: 'var(--pv-color-gray-7)',
-    },
-    '&:not(:disabled)': {
-        '&[aria-invalid]': {
-            backgroundColor: 'var(--pv-color-wrong-tint-5)',
-            borderColor: 'var(--pv-color-wrong-tint-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-secondary-tint-5)',
-            borderColor: 'var(--pv-color-secondary-tint-3)',
-        },
-    },
     ...(props.size === 'small' && {
         height: 'var(--pv-size-base-6)',
     }),
@@ -53,7 +29,59 @@ const TextFieldInput = styled(Typography)((props) => ({
     ...(props.size === 'large' && {
         height: 'var(--pv-size-base-8)',
     }),
-}));
+}), (props) => {
+    const isDark = props.theme.mode === 'dark';
+    const color = isDark
+        ? 'var(--pv-color-white)'
+        : 'var(--pv-color-black)';
+    let borderColor = 'var(--pv-color-gray-8)';
+    let colorPlaceholder = 'var(--pv-color-gray-9)';
+    let borderColorHover = 'var(--pv-color-gray-7)';
+    let borderColorDisabled = 'var(--pv-color-gray-5)';
+    let colorDisabled = 'var(--pv-color-gray-7)';
+    let invalidBackgroundColor = 'var(--pv-color-wrong-tint-5)';
+    let invalidBorderColor = 'var(--pv-color-wrong-tint-3)';
+    let backgroundColorFocus = 'var(--pv-color-secondary-tint-5)';
+    let borderColorFocus = 'var(--pv-color-secondary-tint-3)';
+    if (isDark) {
+        borderColor = 'var(--pv-color-gray-5)';
+        colorPlaceholder = 'var(--pv-color-gray-6)';
+        borderColorHover = 'var(--pv-color-gray-4)';
+        borderColorDisabled = 'var(--pv-color-gray-4)';
+        colorDisabled = 'var(--pv-color-gray-4)';
+        invalidBackgroundColor = 'var(--pv-color-wrong-shade-4)';
+        invalidBorderColor = 'var(--pv-color-wrong-shade-1)';
+        backgroundColorFocus = 'var(--pv-color-secondary-shade-4)';
+        borderColorFocus = 'var(--pv-color-secondary-shade-1)';
+    }
+    return ({
+        color,
+        borderColor,
+        '&::placeholder': {
+            color: colorPlaceholder,
+        },
+        '&:hover': {
+            backgroundColor: 'var(--pv-color-gray-3)',
+            borderColor: borderColorHover,
+        },
+        '&:disabled': {
+            cursor: 'not-allowed',
+            backgroundColor: 'var(--pv-color-gray-1)',
+            borderColor: borderColorDisabled,
+            color: colorDisabled,
+        },
+        '&:not(:disabled)': {
+            '&[aria-invalid]': {
+                backgroundColor: invalidBackgroundColor,
+                borderColor: invalidBorderColor,
+            },
+            '&:focus': {
+                backgroundColor: backgroundColorFocus,
+                borderColor: borderColorFocus,
+            },
+        },
+    });
+});
 const TextFieldLabel = styled('label')({
     label: 'TextField-label',
     marginBottom: '2px',
@@ -72,7 +100,7 @@ export const TextField = React.forwardRef((props, ref) => {
             React.createElement(Typography, { component: "span", variant: "c2", color: "gray-10" }, label))),
         React.createElement(TextFieldInput, { ...inputProps, 
             // @ts-ignore
-            component: "input", color: "black", variant: size === 'small' ? 'c1' : 'b3', size: size, type: type, disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, autoFocus: autoFocus, "aria-invalid": error || undefined, onChange: onChange, placeholder: placeholder, readOnly: readOnly }),
+            component: "input", variant: size === 'small' ? 'c1' : 'b3', size: size, type: type, disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, autoFocus: autoFocus, "aria-invalid": error || undefined, onChange: onChange, placeholder: placeholder, readOnly: readOnly }),
         error && errorText && (React.createElement(TextFieldError, { variant: "c2", color: "wrong" }, errorText))));
 });
 TextField.displayName = 'TextField';

package/dist/esnext/TextField/text_field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text_field.js","sourceRoot":"","sources":["../../../src/TextField/text_field.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"text_field.js","sourceRoot":"","sources":["../../../src/TextField/text_field.tsx"],"names":[],"mappings":"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"}