@atlaskit/textarea 4.7.7 → 5.0.0

package/dist/cjs/text-area.js

@@ -13,17 +13,15 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _components = require("@atlaskit/theme/components");
 var _styles = require("./styles");
-var _theme = require("./theme");
-var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "theme", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "tokens", "value"];
+var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value"];
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.7.7";
+var packageVersion = "5.0.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -37,7 +35,7 @@ var setSmartHeight = function setSmartHeight(el) {
   var borderBoxHeight = paddingBoxHeight + borderHeight * 2;
   el.style.height = "".concat(borderBoxHeight, "px");
 };
-var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var InnerTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var ourRef = (0, _react.useRef)(null);
   var _props$resize = props.resize,
     resize = _props$resize === void 0 ? 'smart' : _props$resize,
@@ -57,14 +55,12 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
     _props$minimumRows = props.minimumRows,
     minimumRows = _props$minimumRows === void 0 ? 2 : _props$minimumRows,
-    theme = props.theme,
     testId = props.testId,
     _props$maxHeight = props.maxHeight,
     maxHeight = _props$maxHeight === void 0 ? '50vh' : _props$maxHeight,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     onChange = props.onChange,
-    tokens = props.tokens,
     value = props.value,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   (0, _react.useEffect)(function () {
@@ -116,9 +112,7 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
       maxHeight: maxHeight
     });
   }, [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-  var textAreaStyles = (0, _react2.css)([baseStyles,
-  // not memoizing themeStyles as `tokens` is an unstable reference
-  (0, _styles.themeStyles)(tokens, appearance)]);
+  var textAreaStyles = (0, _react2.css)([baseStyles, (0, _styles.dynamicStyles)(appearance)]);
   return (0, _react2.jsx)("textarea", (0, _extends2.default)({}, controlProps, {
     value: value,
     disabled: isDisabled,
@@ -147,21 +141,9 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
 var TextArea = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function TextArea(props, ref) {
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
-  return (0, _react2.jsx)(_theme.Theme.Provider, {
-    value: props.theme
-  }, (0, _react2.jsx)(_theme.Theme.Consumer, {
-    appearance: props.appearance || 'standard',
-    mode: mode
-  }, function (tokens) {
-    return (0, _react2.jsx)(TextAreaWithTokens, (0, _extends2.default)({
-      ref: ref
-    }, props, {
-      tokens: tokens
-    }));
-  }));
+  return (0, _react2.jsx)(InnerTextArea, (0, _extends2.default)({
+    ref: ref
+  }, props));
 }));
 TextArea.displayName = 'TextArea';
-var _default = TextArea;
-exports.default = _default;
+var _default = exports.default = TextArea;

package/dist/es2019/component-tokens.js

@@ -1,54 +1,15 @@
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B100, B200, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
-export const disabledBackground = {
-  light: `var(--ds-background-disabled, ${N20})`,
-  dark: `var(--ds-background-disabled, ${DN20})`
-};
-export const disabledBorder = {
-  light: `var(--ds-border-disabled, ${N40})`,
-  dark: `var(--ds-border-disabled, ${DN40})`
-};
-export const invalidBorderColor = {
-  light: `var(--ds-border-danger, ${R400})`,
-  dark: `var(--ds-border-danger, ${R400})`
-};
-export const defaultBorderColor = {
-  light: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
-  dark: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40})`
-};
-export const defaultBorderColorFocus = {
-  light: `var(--ds-border-focused, ${B200})`,
-  dark: `var(--ds-border-focused, ${B100})`
-};
-export const defaultBackgroundColor = {
-  light: `var(--ds-background-input, ${N10})`,
-  dark: `var(--ds-background-input, ${DN10})`
-};
-export const defaultBackgroundColorHover = {
-  light: `var(--ds-background-input-hovered, ${N30})`,
-  dark: `var(--ds-background-input-hovered, ${DN30})`
-};
-export const defaultBackgroundColorFocus = {
-  light: `var(--ds-background-input-pressed, ${N0})`,
-  dark: `var(--ds-background-input-pressed, ${DN10})`
-};
-export const subtleBorderColorHover = {
-  light: "var(--ds-border-input, transparent)",
-  dark: "var(--ds-border-input, transparent)"
-};
-export const placeholderTextColor = {
-  light: `var(--ds-text-subtlest, ${N200})`,
-  dark: `var(--ds-text-subtlest, ${DN200})`
-};
-export const textColor = {
-  light: `var(--ds-text, ${N900})`,
-  dark: `var(--ds-text, ${DN600})`
-};
-export const disabledTextColor = {
-  light: `var(--ds-text-disabled, ${N70})`,
-  dark: `var(--ds-text-disabled, ${DN90})`
-};
-export const transparent = {
-  light: 'transparent',
-  dark: 'transparent'
-};
+import { B200, N0, N10, N100, N20, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
+export const disabledBackground = `var(--ds-background-disabled, ${N20})`;
+export const disabledBorder = `var(--ds-border-disabled, ${N40})`;
+export const invalidBorderColor = `var(--ds-border-danger, ${R400})`;
+export const defaultBorderColor = `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`;
+export const defaultBorderColorFocus = `var(--ds-border-focused, ${B200})`;
+export const defaultBackgroundColor = `var(--ds-background-input, ${N10})`;
+export const defaultBackgroundColorHover = `var(--ds-background-input-hovered, ${N30})`;
+export const defaultBackgroundColorFocus = `var(--ds-background-input-pressed, ${N0})`;
+export const subtleBorderColorHover = "var(--ds-border-input, transparent)";
+export const placeholderTextColor = `var(--ds-text-subtlest, ${N200})`;
+export const textColor = `var(--ds-text, ${N900})`;
+export const disabledTextColor = `var(--ds-text-disabled, ${N70})`;
+export const transparent = 'transparent';

package/dist/es2019/index.js

@@ -1,2 +1 @@
-export { default } from './text-area';
-export { Theme, themeTokens } from './theme';
+export { default } from './text-area';

package/dist/es2019/styles.js

@@ -4,6 +4,52 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize } from '@atlaskit/theme/constants';
+import * as componentTokens from './component-tokens';
+const disabledRules = {
+  backgroundColor: componentTokens.disabledBackground,
+  backgroundColorFocus: componentTokens.disabledBackground,
+  backgroundColorHover: componentTokens.disabledBackground,
+  borderColor: componentTokens.disabledBorder,
+  borderColorFocus: componentTokens.defaultBorderColorFocus,
+  textColor: componentTokens.disabledTextColor
+};
+const invalidRules = {
+  borderColor: componentTokens.invalidBorderColor,
+  borderColorFocus: componentTokens.defaultBorderColorFocus,
+  backgroundColor: componentTokens.defaultBackgroundColor,
+  backgroundColorFocus: componentTokens.defaultBackgroundColorFocus,
+  backgroundColorHover: componentTokens.defaultBackgroundColorHover
+};
+const backgroundColor = {
+  standard: componentTokens.defaultBackgroundColor,
+  subtle: componentTokens.transparent,
+  none: componentTokens.transparent
+};
+const backgroundColorFocus = {
+  standard: componentTokens.defaultBackgroundColorFocus,
+  subtle: componentTokens.defaultBackgroundColorFocus,
+  none: componentTokens.transparent
+};
+const backgroundColorHover = {
+  standard: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.defaultBackgroundColorHover,
+  none: componentTokens.transparent
+};
+const borderColor = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.transparent,
+  none: componentTokens.transparent
+};
+const borderColorFocus = {
+  standard: componentTokens.defaultBorderColorFocus,
+  subtle: componentTokens.defaultBorderColorFocus,
+  none: componentTokens.transparent
+};
+const borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 const grid = gridSize();
 const lineHeightBase = grid * 2.5;
 const lineHeightCompact = grid * 2;
@@ -30,38 +76,38 @@ const borderBoxMinHeightCompact = (minimumRows, borderHeight) => {
   const contentHeightCompact = lineHeightCompact * minimumRows;
   return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
 };
-const bgAndBorderColorStyles = (props, appearance) => css({
+const bgAndBorderColorStyles = appearance => appearance && css({
   '&:focus': {
-    backgroundColor: props.backgroundColorFocus,
-    borderColor: props.borderColorFocus,
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${props.borderColorFocus}` : undefined
+    backgroundColor: backgroundColorFocus[appearance],
+    borderColor: borderColorFocus[appearance],
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}` : undefined
   },
   '&:not(:focus)': {
-    backgroundColor: props.backgroundColor,
-    borderColor: props.borderColor
+    backgroundColor: backgroundColor[appearance],
+    borderColor: borderColor[appearance]
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&[data-invalid]:focus': {
-    backgroundColor: props.invalidRules.backgroundColorFocus,
-    borderColor: props.invalidRules.borderColorFocus,
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${props.invalidRules.borderColorFocus}` : undefined
+    backgroundColor: invalidRules.backgroundColorFocus,
+    borderColor: invalidRules.borderColorFocus,
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColorFocus}` : undefined
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '&[data-invalid]:not(:focus)': {
-    backgroundColor: props.invalidRules.backgroundColor,
-    borderColor: props.invalidRules.borderColor,
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${props.invalidRules.borderColor}` : undefined
+    backgroundColor: invalidRules.backgroundColor,
+    borderColor: invalidRules.borderColor,
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColor}` : undefined
   },
   // Disabled background and border styles should not be applied to components that
   // have either no background or transparent background to begin with
   ...(appearance === 'standard' ? {
     '&:disabled:focus': {
-      backgroundColor: props.disabledRules.backgroundColorFocus,
-      borderColor: props.disabledRules.borderColorFocus
+      backgroundColor: disabledRules.backgroundColorFocus,
+      borderColor: disabledRules.borderColorFocus
     },
     '&:disabled:not(:focus)': {
-      backgroundColor: props.disabledRules.backgroundColor,
-      borderColor: props.disabledRules.borderColor
+      backgroundColor: disabledRules.backgroundColor,
+      borderColor: disabledRules.borderColor
     }
   } : {})
 });
@@ -70,18 +116,18 @@ const placeholderStyle = placeholderTextColor => css({
     color: placeholderTextColor
   }
 });
-const hoverBackgroundAndBorderStyles = props => css({
+const hoverBackgroundAndBorderStyles = appearance => appearance && css({
   '&:hover:not(:read-only):not(:focus)': {
-    backgroundColor: props.backgroundColorHover,
-    borderColor: props.borderColorHover,
+    backgroundColor: backgroundColorHover[appearance],
+    borderColor: borderColorHover[appearance],
     '&:disabled': {
-      backgroundColor: props.disabledRules.backgroundColorHover
+      backgroundColor: disabledRules.backgroundColorHover
     },
     // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '&[data-invalid]': {
-      backgroundColor: props.invalidRules.backgroundColorHover,
-      borderColor: props.invalidRules.borderColor,
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${props.invalidRules.borderColor}` : undefined
+      backgroundColor: invalidRules.backgroundColorHover,
+      borderColor: invalidRules.borderColor,
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColor}` : undefined
     }
   }
 });
@@ -166,11 +212,11 @@ export const getBaseStyles = ({
 css([staticStyles, borderPaddingAndHeightStyles(minimumRows, appearance), resizeStyle(resize), borderStyle(appearance), fontFamilyStyle(isMonospaced), {
   maxHeight
 }]);
-export const themeStyles = (props, appearance) =>
+export const dynamicStyles = appearance =>
 // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-css([bgAndBorderColorStyles(props, appearance), hoverBackgroundAndBorderStyles(props), placeholderStyle(props.placeholderTextColor), {
-  color: props.textColor,
+css([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyle(componentTokens.placeholderTextColor), {
+  color: componentTokens.textColor,
   '&:disabled': {
-    color: props.disabledRules.textColor
+    color: disabledRules.textColor
   }
 }]);

package/dist/es2019/text-area.js

@@ -3,11 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import { useGlobalTheme } from '@atlaskit/theme/components';
-import { borderWidth, getBaseStyles, themeStyles } from './styles';
-import { Theme } from './theme';
+import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "4.7.7";
+const packageVersion = "5.0.0";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,
@@ -21,7 +19,7 @@ const setSmartHeight = el => {
   const borderBoxHeight = paddingBoxHeight + borderHeight * 2;
   el.style.height = `${borderBoxHeight}px`;
 };
-const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
+const InnerTextArea = /*#__PURE__*/forwardRef((props, ref) => {
   const ourRef = useRef(null);
   const {
     resize = 'smart',
@@ -33,13 +31,11 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     isInvalid = false,
     isMonospaced = false,
     minimumRows = 2,
-    theme,
     testId,
     maxHeight = '50vh',
     onBlur,
     onFocus,
     onChange,
-    tokens,
     value,
     ...rest
   } = props;
@@ -92,9 +88,7 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     isMonospaced,
     maxHeight
   }), [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-  const textAreaStyles = css([baseStyles,
-  // not memoizing themeStyles as `tokens` is an unstable reference
-  themeStyles(tokens, appearance)]);
+  const textAreaStyles = css([baseStyles, dynamicStyles(appearance)]);
   return jsx("textarea", _extends({}, controlProps, {
     value: value,
     disabled: isDisabled,
@@ -123,19 +117,9 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
 const TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
-  const {
-    mode
-  } = useGlobalTheme();
-  return jsx(Theme.Provider, {
-    value: props.theme
-  }, jsx(Theme.Consumer, {
-    appearance: props.appearance || 'standard',
-    mode: mode
-  }, tokens => jsx(TextAreaWithTokens, _extends({
+  return jsx(InnerTextArea, _extends({
     ref: ref
-  }, props, {
-    tokens: tokens
-  }))));
+  }, props));
 }));
 TextArea.displayName = 'TextArea';
 export default TextArea;

package/dist/esm/component-tokens.js

@@ -1,54 +1,15 @@
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B100, B200, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
-export var disabledBackground = {
-  light: "var(--ds-background-disabled, ".concat(N20, ")"),
-  dark: "var(--ds-background-disabled, ".concat(DN20, ")")
-};
-export var disabledBorder = {
-  light: "var(--ds-border-disabled, ".concat(N40, ")"),
-  dark: "var(--ds-border-disabled, ".concat(DN40, ")")
-};
-export var invalidBorderColor = {
-  light: "var(--ds-border-danger, ".concat(R400, ")"),
-  dark: "var(--ds-border-danger, ".concat(R400, ")")
-};
-export var defaultBorderColor = {
-  light: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
-  dark: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40, ")")
-};
-export var defaultBorderColorFocus = {
-  light: "var(--ds-border-focused, ".concat(B200, ")"),
-  dark: "var(--ds-border-focused, ".concat(B100, ")")
-};
-export var defaultBackgroundColor = {
-  light: "var(--ds-background-input, ".concat(N10, ")"),
-  dark: "var(--ds-background-input, ".concat(DN10, ")")
-};
-export var defaultBackgroundColorHover = {
-  light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
-  dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
-};
-export var defaultBackgroundColorFocus = {
-  light: "var(--ds-background-input-pressed, ".concat(N0, ")"),
-  dark: "var(--ds-background-input-pressed, ".concat(DN10, ")")
-};
-export var subtleBorderColorHover = {
-  light: "var(--ds-border-input, transparent)",
-  dark: "var(--ds-border-input, transparent)"
-};
-export var placeholderTextColor = {
-  light: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  dark: "var(--ds-text-subtlest, ".concat(DN200, ")")
-};
-export var textColor = {
-  light: "var(--ds-text, ".concat(N900, ")"),
-  dark: "var(--ds-text, ".concat(DN600, ")")
-};
-export var disabledTextColor = {
-  light: "var(--ds-text-disabled, ".concat(N70, ")"),
-  dark: "var(--ds-text-disabled, ".concat(DN90, ")")
-};
-export var transparent = {
-  light: 'transparent',
-  dark: 'transparent'
-};
+import { B200, N0, N10, N100, N20, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
+export var disabledBackground = "var(--ds-background-disabled, ".concat(N20, ")");
+export var disabledBorder = "var(--ds-border-disabled, ".concat(N40, ")");
+export var invalidBorderColor = "var(--ds-border-danger, ".concat(R400, ")");
+export var defaultBorderColor = "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")");
+export var defaultBorderColorFocus = "var(--ds-border-focused, ".concat(B200, ")");
+export var defaultBackgroundColor = "var(--ds-background-input, ".concat(N10, ")");
+export var defaultBackgroundColorHover = "var(--ds-background-input-hovered, ".concat(N30, ")");
+export var defaultBackgroundColorFocus = "var(--ds-background-input-pressed, ".concat(N0, ")");
+export var subtleBorderColorHover = "var(--ds-border-input, transparent)";
+export var placeholderTextColor = "var(--ds-text-subtlest, ".concat(N200, ")");
+export var textColor = "var(--ds-text, ".concat(N900, ")");
+export var disabledTextColor = "var(--ds-text-disabled, ".concat(N70, ")");
+export var transparent = 'transparent';

package/dist/esm/index.js

@@ -1,2 +1 @@
-export { default } from './text-area';
-export { Theme, themeTokens } from './theme';
+export { default } from './text-area';

package/dist/esm/styles.js

@@ -1,12 +1,58 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize } from '@atlaskit/theme/constants';
+import * as componentTokens from './component-tokens';
+var disabledRules = {
+  backgroundColor: componentTokens.disabledBackground,
+  backgroundColorFocus: componentTokens.disabledBackground,
+  backgroundColorHover: componentTokens.disabledBackground,
+  borderColor: componentTokens.disabledBorder,
+  borderColorFocus: componentTokens.defaultBorderColorFocus,
+  textColor: componentTokens.disabledTextColor
+};
+var invalidRules = {
+  borderColor: componentTokens.invalidBorderColor,
+  borderColorFocus: componentTokens.defaultBorderColorFocus,
+  backgroundColor: componentTokens.defaultBackgroundColor,
+  backgroundColorFocus: componentTokens.defaultBackgroundColorFocus,
+  backgroundColorHover: componentTokens.defaultBackgroundColorHover
+};
+var backgroundColor = {
+  standard: componentTokens.defaultBackgroundColor,
+  subtle: componentTokens.transparent,
+  none: componentTokens.transparent
+};
+var backgroundColorFocus = {
+  standard: componentTokens.defaultBackgroundColorFocus,
+  subtle: componentTokens.defaultBackgroundColorFocus,
+  none: componentTokens.transparent
+};
+var backgroundColorHover = {
+  standard: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.defaultBackgroundColorHover,
+  none: componentTokens.transparent
+};
+var borderColor = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.transparent,
+  none: componentTokens.transparent
+};
+var borderColorFocus = {
+  standard: componentTokens.defaultBorderColorFocus,
+  subtle: componentTokens.defaultBorderColorFocus,
+  none: componentTokens.transparent
+};
+var borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 var grid = gridSize();
 var lineHeightBase = grid * 2.5;
 var lineHeightCompact = grid * 2;
@@ -33,37 +79,37 @@ var borderBoxMinHeightCompact = function borderBoxMinHeightCompact(minimumRows,
   var contentHeightCompact = lineHeightCompact * minimumRows;
   return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
 };
-var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance) {
-  return css(_objectSpread({
+var bgAndBorderColorStyles = function bgAndBorderColorStyles(appearance) {
+  return appearance && css(_objectSpread({
     '&:focus': {
-      backgroundColor: props.backgroundColorFocus,
-      borderColor: props.borderColorFocus,
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", props.borderColorFocus) : undefined
+      backgroundColor: backgroundColorFocus[appearance],
+      borderColor: borderColorFocus[appearance],
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance]) : undefined
     },
     '&:not(:focus)': {
-      backgroundColor: props.backgroundColor,
-      borderColor: props.borderColor
+      backgroundColor: backgroundColor[appearance],
+      borderColor: borderColor[appearance]
     },
     // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '&[data-invalid]:focus': {
-      backgroundColor: props.invalidRules.backgroundColorFocus,
-      borderColor: props.invalidRules.borderColorFocus,
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", props.invalidRules.borderColorFocus) : undefined
+      backgroundColor: invalidRules.backgroundColorFocus,
+      borderColor: invalidRules.borderColorFocus,
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColorFocus) : undefined
     },
     // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
     '&[data-invalid]:not(:focus)': {
-      backgroundColor: props.invalidRules.backgroundColor,
-      borderColor: props.invalidRules.borderColor,
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", props.invalidRules.borderColor) : undefined
+      backgroundColor: invalidRules.backgroundColor,
+      borderColor: invalidRules.borderColor,
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor) : undefined
     }
   }, appearance === 'standard' ? {
     '&:disabled:focus': {
-      backgroundColor: props.disabledRules.backgroundColorFocus,
-      borderColor: props.disabledRules.borderColorFocus
+      backgroundColor: disabledRules.backgroundColorFocus,
+      borderColor: disabledRules.borderColorFocus
     },
     '&:disabled:not(:focus)': {
-      backgroundColor: props.disabledRules.backgroundColor,
-      borderColor: props.disabledRules.borderColor
+      backgroundColor: disabledRules.backgroundColor,
+      borderColor: disabledRules.borderColor
     }
   } : {}));
 };
@@ -74,19 +120,19 @@ var placeholderStyle = function placeholderStyle(placeholderTextColor) {
     }
   });
 };
-var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
-  return css({
+var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(appearance) {
+  return appearance && css({
     '&:hover:not(:read-only):not(:focus)': {
-      backgroundColor: props.backgroundColorHover,
-      borderColor: props.borderColorHover,
+      backgroundColor: backgroundColorHover[appearance],
+      borderColor: borderColorHover[appearance],
       '&:disabled': {
-        backgroundColor: props.disabledRules.backgroundColorHover
+        backgroundColor: disabledRules.backgroundColorHover
       },
       // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
       '&[data-invalid]': {
-        backgroundColor: props.invalidRules.backgroundColorHover,
-        borderColor: props.invalidRules.borderColor,
-        boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", props.invalidRules.borderColor) : undefined
+        backgroundColor: invalidRules.backgroundColorHover,
+        borderColor: invalidRules.borderColor,
+        boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor) : undefined
       }
     }
   });
@@ -178,13 +224,13 @@ export var getBaseStyles = function getBaseStyles(_ref) {
     }])
   );
 };
-export var themeStyles = function themeStyles(props, appearance) {
+export var dynamicStyles = function dynamicStyles(appearance) {
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-    css([bgAndBorderColorStyles(props, appearance), hoverBackgroundAndBorderStyles(props), placeholderStyle(props.placeholderTextColor), {
-      color: props.textColor,
+    css([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyle(componentTokens.placeholderTextColor), {
+      color: componentTokens.textColor,
       '&:disabled': {
-        color: props.disabledRules.textColor
+        color: disabledRules.textColor
       }
     }])
   );