@atlaskit/textarea 4.1.3 → 4.2.3

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/textarea
 
+## 4.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.2.0
+
+### Minor Changes
+
+- [`ae281b57bcd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ae281b57bcd) - Instrumented Radio with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes
+
+### Patch Changes
+
+- [`2d7cc544696`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d7cc544696) - Updates token usage to match the latest token set
+- Updated dependencies
+
 ## 4.1.3
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -3,61 +3,71 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparent = exports.disabledTextColor = exports.textColor = exports.placeholderTextColor = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColorHover = exports.defaultBackgroundColor = exports.defaultBorderColor = exports.defaultBorderColorFocus = exports.invalidBorderColor = exports.disabled = void 0;
+exports.transparent = exports.disabledTextColor = exports.textColor = exports.placeholderTextColor = exports.subtleHoverBackgroundColor = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColorHover = exports.defaultBackgroundColor = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.invalidBorderColor = exports.disabledBorder = exports.disabledBackground = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
-// The following are the name for color mappings in @atlaskit/themes
-// The exports are the functions, not the objects, so could not be used here
-var disabled = {
-  light: _colors.N20,
-  dark: _colors.DN20
-}; // For validation red is the new 'yellow' which was { light: Y300, dark: Y300 }
+var _tokens = require("@atlaskit/tokens");
 
-exports.disabled = disabled;
+var disabledBackground = {
+  light: (0, _tokens.token)('color.background.disabled', _colors.N20),
+  dark: (0, _tokens.token)('color.background.disabled', _colors.DN20)
+};
+exports.disabledBackground = disabledBackground;
+var disabledBorder = {
+  light: (0, _tokens.token)('color.background.disabled', _colors.N40),
+  dark: (0, _tokens.token)('color.background.disabled', _colors.DN40)
+};
+exports.disabledBorder = disabledBorder;
 var invalidBorderColor = {
-  light: _colors.R400,
-  dark: _colors.R400
+  light: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
+  dark: (0, _tokens.token)('color.iconBorder.danger', _colors.R400)
 };
 exports.invalidBorderColor = invalidBorderColor;
-var defaultBorderColorFocus = {
-  light: _colors.B100,
-  dark: _colors.B75
-};
-exports.defaultBorderColorFocus = defaultBorderColorFocus;
 var defaultBorderColor = {
-  light: _colors.N40,
-  dark: _colors.DN40
+  light: (0, _tokens.token)('color.border.neutral', _colors.N40),
+  dark: (0, _tokens.token)('color.border.neutral', _colors.DN40)
 };
 exports.defaultBorderColor = defaultBorderColor;
+var defaultBorderColorFocus = {
+  light: (0, _tokens.token)('color.border.focus', _colors.B100),
+  dark: (0, _tokens.token)('color.border.focus', _colors.B75)
+};
+exports.defaultBorderColorFocus = defaultBorderColorFocus;
 var defaultBackgroundColor = {
-  light: _colors.N10,
-  dark: _colors.DN10
+  light: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N10),
+  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.DN10)
 };
 exports.defaultBackgroundColor = defaultBackgroundColor;
 var defaultBackgroundColorHover = {
-  light: _colors.N30,
-  dark: _colors.DN30
+  light: (0, _tokens.token)('color.background.default', _colors.N30),
+  dark: (0, _tokens.token)('color.background.default', _colors.DN30)
 };
 exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
 var defaultBackgroundColorFocus = {
-  light: _colors.N0,
-  dark: _colors.DN10
-};
+  light: (0, _tokens.token)('color.background.default', _colors.N0),
+  dark: (0, _tokens.token)('color.background.default', _colors.DN10)
+}; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
+
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
+var subtleHoverBackgroundColor = {
+  light: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30),
+  dark: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.DN30)
+};
+exports.subtleHoverBackgroundColor = subtleHoverBackgroundColor;
 var placeholderTextColor = {
-  light: _colors.N100,
-  dark: _colors.DN200
+  light: (0, _tokens.token)('color.text.lowEmphasis', _colors.N100),
+  dark: (0, _tokens.token)('color.text.lowEmphasis', _colors.DN200)
 };
 exports.placeholderTextColor = placeholderTextColor;
 var textColor = {
-  light: _colors.N900,
-  dark: _colors.DN600
+  light: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
+  dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
 };
 exports.textColor = textColor;
 var disabledTextColor = {
-  light: _colors.N70,
-  dark: _colors.DN90
+  light: (0, _tokens.token)('color.text.disabled', _colors.N70),
+  dark: (0, _tokens.token)('color.text.disabled', _colors.DN90)
 };
 exports.disabledTextColor = disabledTextColor;
 var transparent = {

package/dist/cjs/text-area.js

@@ -38,7 +38,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.1.3";
+var packageVersion = "4.2.3";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -147,7 +147,9 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     ref: getTextAreaRef,
     onChange: handleOnChange,
     onBlur: onBlurWithAnalytics,
-    onFocus: onFocusWithAnalytics,
+    onFocus: onFocusWithAnalytics // TODO refactor to follow emotion styling rules
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
     css: textAreaStyles
   }, rest));
 });

package/dist/cjs/theme.js

@@ -17,18 +17,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var disabledRules = {
   light: {
-    backgroundColor: componentTokens.disabled.light,
-    backgroundColorFocus: componentTokens.disabled.light,
-    backgroundColorHover: componentTokens.disabled.light,
-    borderColor: componentTokens.defaultBorderColor.light,
+    backgroundColor: componentTokens.disabledBackground.light,
+    backgroundColorFocus: componentTokens.disabledBackground.light,
+    backgroundColorHover: componentTokens.disabledBackground.light,
+    borderColor: componentTokens.disabledBorder.light,
     borderColorFocus: componentTokens.defaultBorderColorFocus.light,
     textColor: componentTokens.disabledTextColor.light
   },
   dark: {
-    backgroundColor: componentTokens.disabled.dark,
-    backgroundColorFocus: componentTokens.disabled.dark,
-    backgroundColorHover: componentTokens.disabled.dark,
-    borderColor: componentTokens.defaultBorderColor.dark,
+    backgroundColor: componentTokens.disabledBackground.dark,
+    backgroundColorFocus: componentTokens.disabledBackground.dark,
+    backgroundColorHover: componentTokens.disabledBackground.dark,
+    borderColor: componentTokens.disabledBorder.dark,
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark,
     textColor: componentTokens.disabledTextColor.dark
   }
@@ -48,8 +48,7 @@ var invalidRules = {
     backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
     backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark
   }
-}; // The following do not yet have a darkmode 'map': N20A, N10
-
+};
 var backgroundColor = {
   standard: componentTokens.defaultBackgroundColor,
   subtle: componentTokens.transparent,
@@ -62,7 +61,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.subtleHoverBackgroundColor,
   none: componentTokens.transparent
 };
 var borderColor = {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.1.3",
+	"version": "4.2.3",
 	"sideEffects": false
 }

package/dist/es2019/component-tokens.js

@@ -1,46 +1,53 @@
-import { B100, B75, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors'; // The following are the name for color mappings in @atlaskit/themes
-// The exports are the functions, not the objects, so could not be used here
-
-export const disabled = {
-  light: N20,
-  dark: DN20
-}; // For validation red is the new 'yellow' which was { light: Y300, dark: Y300 }
-
-export const invalidBorderColor = {
-  light: R400,
-  dark: R400
+import { B100, B75, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+export const disabledBackground = {
+  light: token('color.background.disabled', N20),
+  dark: token('color.background.disabled', DN20)
 };
-export const defaultBorderColorFocus = {
-  light: B100,
-  dark: B75
+export const disabledBorder = {
+  light: token('color.background.disabled', N40),
+  dark: token('color.background.disabled', DN40)
+};
+export const invalidBorderColor = {
+  light: token('color.iconBorder.danger', R400),
+  dark: token('color.iconBorder.danger', R400)
 };
 export const defaultBorderColor = {
-  light: N40,
-  dark: DN40
+  light: token('color.border.neutral', N40),
+  dark: token('color.border.neutral', DN40)
+};
+export const defaultBorderColorFocus = {
+  light: token('color.border.focus', B100),
+  dark: token('color.border.focus', B75)
 };
 export const defaultBackgroundColor = {
-  light: N10,
-  dark: DN10
+  light: token('color.background.subtleNeutral.resting', N10),
+  dark: token('color.background.subtleNeutral.resting', DN10)
 };
 export const defaultBackgroundColorHover = {
-  light: N30,
-  dark: DN30
+  light: token('color.background.default', N30),
+  dark: token('color.background.default', DN30)
 };
 export const defaultBackgroundColorFocus = {
-  light: N0,
-  dark: DN10
+  light: token('color.background.default', N0),
+  dark: token('color.background.default', DN10)
+}; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
+
+export const subtleHoverBackgroundColor = {
+  light: token('color.background.transparentNeutral.hover', N30),
+  dark: token('color.background.transparentNeutral.hover', DN30)
 };
 export const placeholderTextColor = {
-  light: N100,
-  dark: DN200
+  light: token('color.text.lowEmphasis', N100),
+  dark: token('color.text.lowEmphasis', DN200)
 };
 export const textColor = {
-  light: N900,
-  dark: DN600
+  light: token('color.text.highEmphasis', N900),
+  dark: token('color.text.highEmphasis', DN600)
 };
 export const disabledTextColor = {
-  light: N70,
-  dark: DN90
+  light: token('color.text.disabled', N70),
+  dark: token('color.text.disabled', DN90)
 };
 export const transparent = {
   light: 'transparent',

package/dist/es2019/text-area.js

@@ -8,7 +8,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "4.1.3";
+const packageVersion = "4.2.3";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,
@@ -109,7 +109,9 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     ref: getTextAreaRef,
     onChange: handleOnChange,
     onBlur: onBlurWithAnalytics,
-    onFocus: onFocusWithAnalytics,
+    onFocus: onFocusWithAnalytics // TODO refactor to follow emotion styling rules
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
     css: textAreaStyles
   }, rest));
 });

package/dist/es2019/theme.js

@@ -2,18 +2,18 @@ import { createTheme } from '@atlaskit/theme/components';
 import * as componentTokens from './component-tokens';
 const disabledRules = {
   light: {
-    backgroundColor: componentTokens.disabled.light,
-    backgroundColorFocus: componentTokens.disabled.light,
-    backgroundColorHover: componentTokens.disabled.light,
-    borderColor: componentTokens.defaultBorderColor.light,
+    backgroundColor: componentTokens.disabledBackground.light,
+    backgroundColorFocus: componentTokens.disabledBackground.light,
+    backgroundColorHover: componentTokens.disabledBackground.light,
+    borderColor: componentTokens.disabledBorder.light,
     borderColorFocus: componentTokens.defaultBorderColorFocus.light,
     textColor: componentTokens.disabledTextColor.light
   },
   dark: {
-    backgroundColor: componentTokens.disabled.dark,
-    backgroundColorFocus: componentTokens.disabled.dark,
-    backgroundColorHover: componentTokens.disabled.dark,
-    borderColor: componentTokens.defaultBorderColor.dark,
+    backgroundColor: componentTokens.disabledBackground.dark,
+    backgroundColorFocus: componentTokens.disabledBackground.dark,
+    backgroundColorHover: componentTokens.disabledBackground.dark,
+    borderColor: componentTokens.disabledBorder.dark,
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark,
     textColor: componentTokens.disabledTextColor.dark
   }
@@ -33,8 +33,7 @@ const invalidRules = {
     backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
     backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark
   }
-}; // The following do not yet have a darkmode 'map': N20A, N10
-
+};
 const backgroundColor = {
   standard: componentTokens.defaultBackgroundColor,
   subtle: componentTokens.transparent,
@@ -47,7 +46,7 @@ const backgroundColorFocus = {
 };
 const backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.subtleHoverBackgroundColor,
   none: componentTokens.transparent
 };
 const borderColor = {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.1.3",
+	"version": "4.2.3",
 	"sideEffects": false
 }

package/dist/esm/component-tokens.js

@@ -1,46 +1,53 @@
-import { B100, B75, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors'; // The following are the name for color mappings in @atlaskit/themes
-// The exports are the functions, not the objects, so could not be used here
-
-export var disabled = {
-  light: N20,
-  dark: DN20
-}; // For validation red is the new 'yellow' which was { light: Y300, dark: Y300 }
-
-export var invalidBorderColor = {
-  light: R400,
-  dark: R400
+import { B100, B75, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+export var disabledBackground = {
+  light: token('color.background.disabled', N20),
+  dark: token('color.background.disabled', DN20)
 };
-export var defaultBorderColorFocus = {
-  light: B100,
-  dark: B75
+export var disabledBorder = {
+  light: token('color.background.disabled', N40),
+  dark: token('color.background.disabled', DN40)
+};
+export var invalidBorderColor = {
+  light: token('color.iconBorder.danger', R400),
+  dark: token('color.iconBorder.danger', R400)
 };
 export var defaultBorderColor = {
-  light: N40,
-  dark: DN40
+  light: token('color.border.neutral', N40),
+  dark: token('color.border.neutral', DN40)
+};
+export var defaultBorderColorFocus = {
+  light: token('color.border.focus', B100),
+  dark: token('color.border.focus', B75)
 };
 export var defaultBackgroundColor = {
-  light: N10,
-  dark: DN10
+  light: token('color.background.subtleNeutral.resting', N10),
+  dark: token('color.background.subtleNeutral.resting', DN10)
 };
 export var defaultBackgroundColorHover = {
-  light: N30,
-  dark: DN30
+  light: token('color.background.default', N30),
+  dark: token('color.background.default', DN30)
 };
 export var defaultBackgroundColorFocus = {
-  light: N0,
-  dark: DN10
+  light: token('color.background.default', N0),
+  dark: token('color.background.default', DN10)
+}; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
+
+export var subtleHoverBackgroundColor = {
+  light: token('color.background.transparentNeutral.hover', N30),
+  dark: token('color.background.transparentNeutral.hover', DN30)
 };
 export var placeholderTextColor = {
-  light: N100,
-  dark: DN200
+  light: token('color.text.lowEmphasis', N100),
+  dark: token('color.text.lowEmphasis', DN200)
 };
 export var textColor = {
-  light: N900,
-  dark: DN600
+  light: token('color.text.highEmphasis', N900),
+  dark: token('color.text.highEmphasis', DN600)
 };
 export var disabledTextColor = {
-  light: N70,
-  dark: DN90
+  light: token('color.text.disabled', N70),
+  dark: token('color.text.disabled', DN90)
 };
 export var transparent = {
   light: 'transparent',

package/dist/esm/text-area.js

@@ -15,7 +15,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.1.3";
+var packageVersion = "4.2.3";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -126,7 +126,9 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: getTextAreaRef,
     onChange: handleOnChange,
     onBlur: onBlurWithAnalytics,
-    onFocus: onFocusWithAnalytics,
+    onFocus: onFocusWithAnalytics // TODO refactor to follow emotion styling rules
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    ,
     css: textAreaStyles
   }, rest));
 });

package/dist/esm/theme.js

@@ -2,18 +2,18 @@ import { createTheme } from '@atlaskit/theme/components';
 import * as componentTokens from './component-tokens';
 var disabledRules = {
   light: {
-    backgroundColor: componentTokens.disabled.light,
-    backgroundColorFocus: componentTokens.disabled.light,
-    backgroundColorHover: componentTokens.disabled.light,
-    borderColor: componentTokens.defaultBorderColor.light,
+    backgroundColor: componentTokens.disabledBackground.light,
+    backgroundColorFocus: componentTokens.disabledBackground.light,
+    backgroundColorHover: componentTokens.disabledBackground.light,
+    borderColor: componentTokens.disabledBorder.light,
     borderColorFocus: componentTokens.defaultBorderColorFocus.light,
     textColor: componentTokens.disabledTextColor.light
   },
   dark: {
-    backgroundColor: componentTokens.disabled.dark,
-    backgroundColorFocus: componentTokens.disabled.dark,
-    backgroundColorHover: componentTokens.disabled.dark,
-    borderColor: componentTokens.defaultBorderColor.dark,
+    backgroundColor: componentTokens.disabledBackground.dark,
+    backgroundColorFocus: componentTokens.disabledBackground.dark,
+    backgroundColorHover: componentTokens.disabledBackground.dark,
+    borderColor: componentTokens.disabledBorder.dark,
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark,
     textColor: componentTokens.disabledTextColor.dark
   }
@@ -33,8 +33,7 @@ var invalidRules = {
     backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
     backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark
   }
-}; // The following do not yet have a darkmode 'map': N20A, N10
-
+};
 var backgroundColor = {
   standard: componentTokens.defaultBackgroundColor,
   subtle: componentTokens.transparent,
@@ -47,7 +46,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.subtleHoverBackgroundColor,
   none: componentTokens.transparent
 };
 var borderColor = {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.1.3",
+	"version": "4.2.3",
 	"sideEffects": false
 }

package/dist/types/component-tokens.d.ts

@@ -1,42 +1,50 @@
-export declare const disabled: {
-    light: string;
-    dark: string;
+export declare const disabledBackground: {
+    light: "var(--ds-background-disabled)";
+    dark: "var(--ds-background-disabled)";
 };
-export declare const invalidBorderColor: {
-    light: string;
-    dark: string;
+export declare const disabledBorder: {
+    light: "var(--ds-background-disabled)";
+    dark: "var(--ds-background-disabled)";
 };
-export declare const defaultBorderColorFocus: {
-    light: string;
-    dark: string;
+export declare const invalidBorderColor: {
+    light: "var(--ds-iconBorder-danger)";
+    dark: "var(--ds-iconBorder-danger)";
 };
 export declare const defaultBorderColor: {
-    light: string;
-    dark: string;
+    light: "var(--ds-border-neutral)";
+    dark: "var(--ds-border-neutral)";
+};
+export declare const defaultBorderColorFocus: {
+    light: "var(--ds-border-focus)";
+    dark: "var(--ds-border-focus)";
 };
 export declare const defaultBackgroundColor: {
-    light: string;
-    dark: string;
+    light: "var(--ds-background-subtleNeutral-resting)";
+    dark: "var(--ds-background-subtleNeutral-resting)";
 };
 export declare const defaultBackgroundColorHover: {
-    light: string;
-    dark: string;
+    light: "var(--ds-background-default)";
+    dark: "var(--ds-background-default)";
 };
 export declare const defaultBackgroundColorFocus: {
-    light: string;
-    dark: string;
+    light: "var(--ds-background-default)";
+    dark: "var(--ds-background-default)";
+};
+export declare const subtleHoverBackgroundColor: {
+    light: "var(--ds-background-transparentNeutral-hover)";
+    dark: "var(--ds-background-transparentNeutral-hover)";
 };
 export declare const placeholderTextColor: {
-    light: string;
-    dark: string;
+    light: "var(--ds-text-lowEmphasis)";
+    dark: "var(--ds-text-lowEmphasis)";
 };
 export declare const textColor: {
-    light: string;
-    dark: string;
+    light: "var(--ds-text-highEmphasis)";
+    dark: "var(--ds-text-highEmphasis)";
 };
 export declare const disabledTextColor: {
-    light: string;
-    dark: string;
+    light: "var(--ds-text-disabled)";
+    dark: "var(--ds-text-disabled)";
 };
 export declare const transparent: {
     light: string;

package/dist/types/theme.d.ts

@@ -31,8 +31,8 @@ export declare type ThemeTokens = {
 export declare const themeTokens: {
     borderColor: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--ds-border-neutral)";
+            dark: "var(--ds-border-neutral)";
         };
         subtle: {
             light: string;
@@ -45,12 +45,12 @@ export declare const themeTokens: {
     };
     borderColorFocus: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--ds-border-focus)";
+            dark: "var(--ds-border-focus)";
         };
         subtle: {
-            light: string;
-            dark: string;
+            light: "var(--ds-border-focus)";
+            dark: "var(--ds-border-focus)";
         };
         none: {
             light: string;
@@ -59,8 +59,8 @@ export declare const themeTokens: {
     };
     backgroundColor: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--ds-background-subtleNeutral-resting)";
+            dark: "var(--ds-background-subtleNeutral-resting)";
         };
         subtle: {
             light: string;
@@ -73,12 +73,12 @@ export declare const themeTokens: {
     };
     backgroundColorFocus: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--ds-background-default)";
+            dark: "var(--ds-background-default)";
         };
         subtle: {
-            light: string;
-            dark: string;
+            light: "var(--ds-background-default)";
+            dark: "var(--ds-background-default)";
         };
         none: {
             light: string;
@@ -87,12 +87,12 @@ export declare const themeTokens: {
     };
     backgroundColorHover: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--ds-background-default)";
+            dark: "var(--ds-background-default)";
         };
         subtle: {
-            light: string;
-            dark: string;
+            light: "var(--ds-background-transparentNeutral-hover)";
+            dark: "var(--ds-background-transparentNeutral-hover)";
         };
         none: {
             light: string;
@@ -101,45 +101,45 @@ export declare const themeTokens: {
     };
     disabledRules: {
         light: {
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
-            borderColor: string;
-            borderColorFocus: string;
-            textColor: string;
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorFocus: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-background-disabled)";
+            borderColorFocus: "var(--ds-border-focus)";
+            textColor: "var(--ds-text-disabled)";
         };
         dark: {
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
-            borderColor: string;
-            borderColorFocus: string;
-            textColor: string;
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorFocus: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-background-disabled)";
+            borderColorFocus: "var(--ds-border-focus)";
+            textColor: "var(--ds-text-disabled)";
         };
     };
     invalidRules: {
         light: {
-            borderColor: string;
-            borderColorFocus: string;
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
+            borderColor: "var(--ds-iconBorder-danger)";
+            borderColorFocus: "var(--ds-border-focus)";
+            backgroundColor: "var(--ds-background-subtleNeutral-resting)";
+            backgroundColorFocus: "var(--ds-background-default)";
+            backgroundColorHover: "var(--ds-background-default)";
         };
         dark: {
-            borderColor: string;
-            borderColorFocus: string;
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
+            borderColor: "var(--ds-iconBorder-danger)";
+            borderColorFocus: "var(--ds-border-focus)";
+            backgroundColor: "var(--ds-background-subtleNeutral-resting)";
+            backgroundColorFocus: "var(--ds-background-default)";
+            backgroundColorHover: "var(--ds-background-default)";
         };
     };
     textColor: {
-        light: string;
-        dark: string;
+        light: "var(--ds-text-highEmphasis)";
+        dark: "var(--ds-text-highEmphasis)";
     };
     placeholderTextColor: {
-        light: string;
-        dark: string;
+        light: "var(--ds-text-lowEmphasis)";
+        dark: "var(--ds-text-lowEmphasis)";
     };
 };
 export declare const Theme: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.1.3",
+  "version": "4.2.3",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,8 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -35,10 +36,10 @@
   },
   "devDependencies": {
     "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/form": "^8.2.2",
-    "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/form": "^8.4.0",
+    "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -61,18 +62,11 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "ui-components": [
-        "lite-mode"
-      ],
-      "analytics": [
-        "analytics-next"
-      ],
-      "theming": [
-        "new-theming-api"
-      ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ]
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "styling": "emotion",
+      "deprecation": "no-deprecated-imports"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"