@atlaskit/textarea - npm Package Compare versions

Comparing version 4.7.7 to 5.0.0

CHANGELOG.md

 # @atlaskit/textarea
 
+## 5.0.0
+
+### Major Changes
+
+- [#41866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41866) [`ed8b6957789`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed8b6957789) - Removes any usage of deprecated legacy theming APIs. These have been superseeded by design tokens.
+
 ## 4.7.7
@@ -7,3 +13,3 @@
 
-- [`29941aaea33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/29941aaea33) - update focused fallback color to meet contrast requirement
+- [#37613](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/37613) [`29941aaea33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/29941aaea33) - update focused fallback color to meet contrast requirement
 
@@ -14,3 +20,3 @@ ## 4.7.6
 
-- [`9af31f3c1ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9af31f3c1ae) - Delete version.json
+- [#38731](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38731) [`9af31f3c1ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9af31f3c1ae) - Delete version.json
 
@@ -21,3 +27,3 @@ ## 4.7.5
 
-- [`356d6ebed05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/356d6ebed05) - This package is now onboarded onto the product push model.
+- [#38201](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/38201) [`356d6ebed05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/356d6ebed05) - This package is now onboarded onto the product push model.
 
@@ -28,3 +34,3 @@ ## 4.7.4
 
-- [`964e8db6c94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/964e8db6c94) - update border width to use border spacing token
+- [#36662](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36662) [`964e8db6c94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/964e8db6c94) - update border width to use border spacing token
 
@@ -35,3 +41,3 @@ ## 4.7.3
 
-- [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
+- [#35441](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35441) [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
 
@@ -42,3 +48,3 @@ ## 4.7.2
 
-- [`8f436f0c301`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f436f0c301) - extend border contrast feature flag to support confluence
+- [#35111](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35111) [`8f436f0c301`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f436f0c301) - extend border contrast feature flag to support confluence
 
@@ -49,3 +55,3 @@ ## 4.7.1
 
-- [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+- [#32935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32935) [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
 
@@ -56,3 +62,3 @@ ## 4.7.0
 
-- [`5f37caad726`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f37caad726) - [ux] reduce border width to 1px and update fallback color of border
+- [#33171](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33171) [`5f37caad726`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f37caad726) - [ux] reduce border width to 1px and update fallback color of border
 
@@ -63,3 +69,3 @@ ## 4.6.3
 
-- [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+- [#34051](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34051) [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
 
@@ -70,3 +76,3 @@ ## 4.6.2
 
-- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
 
@@ -77,3 +83,3 @@ ## 4.6.1
 
-- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
 
@@ -84,3 +90,3 @@ ## 4.6.0
 
-- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
 
@@ -95,3 +101,3 @@ ### Patch Changes
 
-- [`e028bee17df`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e028bee17df) - [ux] fix(style): update fallback color of placeholder to meet contrast requirement
+- [#33004](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33004) [`e028bee17df`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e028bee17df) - [ux] fix(style): update fallback color of placeholder to meet contrast requirement
 
@@ -132,3 +138,3 @@ ## 4.5.6
 
-- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+- [#26303](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26303) [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
 
@@ -139,3 +145,3 @@ ## 4.5.0
 
-- [`6612a236510`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6612a236510) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+- [#24710](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24710) [`6612a236510`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6612a236510) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
 
@@ -150,3 +156,3 @@ ### Patch Changes
 
-- [`b8841384da6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8841384da6) - Disabled background and border styles should not be applied to components that have either no background or transparent background to begin with. Textfield and textarea variants that do not have backgrounds (sublte or none) have no backgrounds or borders applied when disabled. As such, any comopnents that consume these will also be affected.
+- [#24968](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24968) [`b8841384da6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8841384da6) - Disabled background and border styles should not be applied to components that have either no background or transparent background to begin with. Textfield and textarea variants that do not have backgrounds (sublte or none) have no backgrounds or borders applied when disabled. As such, any comopnents that consume these will also be affected.
 
@@ -157,3 +163,3 @@ ## 4.3.11
 
-- [`bedbdec0e82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bedbdec0e82) - Update hover state appearance of subtle Textarea, Textfield and Select components to match the hover states of their default counterparts.
+- [#25314](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/25314) [`bedbdec0e82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bedbdec0e82) - Update hover state appearance of subtle Textarea, Textfield and Select components to match the hover states of their default counterparts.
 
@@ -164,3 +170,3 @@ ## 4.3.10
 
-- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874) [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
 
@@ -171,3 +177,3 @@ ## 4.3.9
 
-- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492) [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
 
@@ -178,3 +184,3 @@ ## 4.3.8
 
-- [`e4abd2c2888`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4abd2c2888) - Update token used for background color of subtle text area on hover
+- [#23381](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23381) [`e4abd2c2888`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4abd2c2888) - Update token used for background color of subtle text area on hover
 - [`926f9b57c59`](https://bitbucket.org/atlassian/atlassian-frontend/commits/926f9b57c59) - Internal code change turning on new linting rules.
@@ -187,3 +193,3 @@ - [`fe575d49d66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe575d49d66) - Updated styles to use new input design tokens
 
-- [`45ebe7af434`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45ebe7af434) - Moved to using declarative entrypoints internally. Public API is unchanged.
+- [#22642](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22642) [`45ebe7af434`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45ebe7af434) - Moved to using declarative entrypoints internally. Public API is unchanged.
 
@@ -194,3 +200,3 @@ ## 4.3.6
 
-- [`f63824e8227`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f63824e8227) - [ux] Updated input tokens within `@atlaskit/textarea`.
+- [#21570](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/21570) [`f63824e8227`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f63824e8227) - [ux] Updated input tokens within `@atlaskit/textarea`.
 
@@ -207,3 +213,3 @@ ## 4.3.5
 
-- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650) [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
 
@@ -232,3 +238,3 @@ ## 4.3.3
 
-- [`2e56ff8ea50`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e56ff8ea50) - [ux] Fixed a bug where smart resize did not work when the value prop was changed
+- [#18526](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/18526) [`2e56ff8ea50`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e56ff8ea50) - [ux] Fixed a bug where smart resize did not work when the value prop was changed
 
@@ -239,3 +245,3 @@ ## 4.2.6
 
-- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- [#16752](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752) [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
 - Updated dependencies
@@ -253,3 +259,3 @@
 
-- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- [#15998](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998) [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
 - [`af7c289395b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af7c289395b) - Fix TypeScript issue where text area HTML attributes were not exposed in component prop types.
@@ -280,3 +286,3 @@ - Updated dependencies
 
-- [`ae281b57bcd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ae281b57bcd) - Instrumented Radio with the new theming package, `@atlaskit/tokens`.
+- [#13302](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13302) [`ae281b57bcd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ae281b57bcd) - Instrumented Radio with the new theming package, `@atlaskit/tokens`.
 
@@ -295,3 +301,3 @@ New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
 
-- [`c5785203506`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5785203506) - Updated homepage in package.json
+- [#13728](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13728) [`c5785203506`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5785203506) - Updated homepage in package.json
 
@@ -302,3 +308,3 @@ ## 4.1.2
 
-- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+- [#12880](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12880) [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
 
@@ -309,3 +315,3 @@ ## 4.1.1
 
-- [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
+- [#12167](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12167) [`d6f7ff383cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6f7ff383cf) - Updates to development dependency `storybook-addon-performance`
 
@@ -316,3 +322,3 @@ ## 4.1.0
 
-- [`7af2427f3a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7af2427f3a8) - [ux] Update form field examples for validation and add a new prop to RadioGroup component
+- [#11113](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/11113) [`7af2427f3a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7af2427f3a8) - [ux] Update form field examples for validation and add a new prop to RadioGroup component
 
@@ -323,3 +329,3 @@ ## 4.0.2
 
-- [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
+- [#8644](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/8644) [`79c23df6340`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79c23df6340) - Use injected package name and version for analytics instead of version.json.
 
@@ -330,3 +336,3 @@ ## 4.0.1
 
-- [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
+- [#5857](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5857) [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
 
@@ -337,3 +343,3 @@ ## 4.0.0
 
-- [`782b6e5182`](https://bitbucket.org/atlassian/atlassian-frontend/commits/782b6e5182) - ### Brief
+- [#5860](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5860) [`782b6e5182`](https://bitbucket.org/atlassian/atlassian-frontend/commits/782b6e5182) - ### Brief
 
@@ -388,3 +394,3 @@ The goal of this major for textarea is to improve the component's performance, by both
 
-- [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
+- [#5497](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5497) [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
 This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
@@ -403,3 +409,3 @@ Also add `typescript` to `devDependencies` to denote version that the package was built with.
 
-- [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser
+- [#4707](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/4707) [`6360c46009`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6360c46009) - Reenable integration tests for Edge browser
 
@@ -410,3 +416,3 @@ ## 3.0.2
 
-- [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
+- [#3885](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3885) [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
 
@@ -420,3 +426,3 @@ Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
 
-- [`e99262c6f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e99262c6f0) - All form elements now have a default font explicitly set
+- [#3823](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3823) [`e99262c6f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e99262c6f0) - All form elements now have a default font explicitly set
 
@@ -427,3 +433,3 @@ ## 3.0.0
 
-- [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
+- [#3335](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/3335) [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
 For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
@@ -439,3 +445,3 @@
 
-- [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
+- [#2866](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/2866) [`54a9514fcf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54a9514fcf) - Build and supporting files will no longer be published to npm
 
@@ -452,3 +458,3 @@ ## 2.2.9
 
-- [`7aa4756beb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7aa4756beb) - Change imports to comply with Atlassian conventions- Updated dependencies
+- [#1868](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/1868) [`7aa4756beb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7aa4756beb) - Change imports to comply with Atlassian conventions- Updated dependencies
 
@@ -455,0 +461,0 @@ ## 2.2.7

dist/cjs/component-tokens.js

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

dist/cjs/index.js

@@ -7,8 +7,2 @@ "use strict";
 });
-Object.defineProperty(exports, "Theme", {
-  enumerable: true,
-  get: function get() {
-    return _theme.Theme;
-  }
-});
 Object.defineProperty(exports, "default", {
@@ -20,9 +14,2 @@ enumerable: true,
 });
-Object.defineProperty(exports, "themeTokens", {
-  enumerable: true,
-  get: function get() {
-    return _theme.themeTokens;
-  }
-});
-var _textArea = _interopRequireDefault(require("./text-area"));
-var _theme = require("./theme");
+var _textArea = _interopRequireDefault(require("./text-area"));

dist/cjs/styles.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.themeStyles = exports.getBaseStyles = exports.borderWidth = void 0;
+exports.getBaseStyles = exports.dynamicStyles = exports.borderWidth = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -12,4 +13,52 @@ var _react = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
-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; } /** @jsx jsx */
+var componentTokens = _interopRequireWildcard(require("./component-tokens"));
+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 || _typeof(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(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; } /** @jsx jsx */
+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 = (0, _constants.gridSize)();
@@ -25,7 +74,6 @@ var lineHeightBase = grid * 2.5;
 var codeFontFamily = (0, _constants.codeFontFamily)();
-var borderWidth = 2;
+var borderWidth = exports.borderWidth = 2;
 
 // Safari puts on some difficult to remove styles, mainly for disabled inputs
 // but we want full control so need to override them in all cases
-exports.borderWidth = borderWidth;
 var overrideSafariDisabledStyles = {
@@ -43,33 +91,33 @@ WebkitTextFillColor: 'unset',
 };
-var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance) {
-  return (0, _react.css)(_objectSpread({
+var bgAndBorderColorStyles = function bgAndBorderColorStyles(appearance) {
+  return appearance && (0, _react.css)(_objectSpread({
     '&:focus': {
-      backgroundColor: props.backgroundColorFocus,
-      borderColor: props.borderColorFocus,
-      boxShadow: (0, _platformFeatureFlags.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: (0, _platformFeatureFlags.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: (0, _platformFeatureFlags.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: (0, _platformFeatureFlags.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: (0, _platformFeatureFlags.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: (0, _platformFeatureFlags.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
     }
@@ -85,15 +133,15 @@ } : {}));
 };
-var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
-  return (0, _react.css)({
+var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(appearance) {
+  return appearance && (0, _react.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: (0, _platformFeatureFlags.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: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor) : undefined
       }
@@ -177,3 +225,3 @@ }
 });
-var getBaseStyles = function getBaseStyles(_ref) {
+var getBaseStyles = exports.getBaseStyles = function getBaseStyles(_ref) {
   var minimumRows = _ref.minimumRows,
@@ -191,14 +239,12 @@ resize = _ref.resize,
 };
-exports.getBaseStyles = getBaseStyles;
-var themeStyles = function themeStyles(props, appearance) {
+var dynamicStyles = exports.dynamicStyles = function dynamicStyles(appearance) {
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-    (0, _react.css)([bgAndBorderColorStyles(props, appearance), hoverBackgroundAndBorderStyles(props), placeholderStyle(props.placeholderTextColor), {
-      color: props.textColor,
+    (0, _react.css)([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyle(componentTokens.placeholderTextColor), {
+      color: componentTokens.textColor,
       '&:disabled': {
-        color: props.disabledRules.textColor
+        color: disabledRules.textColor
       }
     }])
   );
-};
-exports.themeStyles = themeStyles;
+};

dist/cjs/text-area.js

@@ -16,13 +16,11 @@ "use strict";
 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 = {
@@ -41,3 +39,3 @@ componentName: 'textArea',
 };
-var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var InnerTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var ourRef = (0, _react.useRef)(null);
@@ -62,3 +60,2 @@ var _props$resize = props.resize,
     minimumRows = _props$minimumRows === void 0 ? 2 : _props$minimumRows,
-    theme = props.theme,
     testId = props.testId,
@@ -70,3 +67,2 @@ _props$maxHeight = props.maxHeight,
     onChange = props.onChange,
-    tokens = props.tokens,
     value = props.value,
@@ -123,5 +119,3 @@ rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   }, [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, {
@@ -155,19 +149,7 @@ value: value,
 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;

dist/es2019/component-tokens.js

 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';

dist/es2019/index.js

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

dist/es2019/styles.js

@@ -7,2 +7,48 @@ /** @jsx jsx */
 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();
@@ -34,23 +80,23 @@ const lineHeightBase = grid * 2.5;
 };
-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
   },
@@ -61,8 +107,8 @@ // Disabled background and border styles should not be applied to components that
     '&: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
     }
@@ -76,14 +122,14 @@ } : {})
 });
-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
     }
@@ -173,9 +219,9 @@ }
 }]);
-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
   }
 }]);

dist/es2019/text-area.js

@@ -6,7 +6,5 @@ import _extends from "@babel/runtime/helpers/extends";
 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 = {
@@ -25,3 +23,3 @@ componentName: 'textArea',
 };
-const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
+const InnerTextArea = /*#__PURE__*/forwardRef((props, ref) => {
   const ourRef = useRef(null);
@@ -38,3 +36,2 @@ const {
     minimumRows = 2,
-    theme,
     testId,
@@ -45,3 +42,2 @@ maxHeight = '50vh',
     onChange,
-    tokens,
     value,
@@ -99,5 +95,3 @@ ...rest
   }), [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, {
@@ -131,17 +125,7 @@ value: value,
 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;

dist/esm/component-tokens.js

 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';

dist/esm/index.js

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

dist/esm/styles.js

 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 */
@@ -10,2 +10,48 @@ import { css } from '@emotion/react';
 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();
@@ -37,33 +83,33 @@ var lineHeightBase = grid * 2.5;
 };
-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
     }
@@ -79,15 +125,15 @@ } : {}));
 };
-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
       }
@@ -184,9 +230,9 @@ }
 };
-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
       }
@@ -193,0 +239,0 @@ }])

dist/esm/text-area.js

@@ -5,5 +5,5 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "theme", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "tokens", "value"];
-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; }
+var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value"];
+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 */
@@ -13,7 +13,5 @@ import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from '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';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.7.7";
+var packageVersion = "5.0.0";
 var analyticsParams = {
@@ -32,3 +30,3 @@ componentName: 'textArea',
 };
-var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
+var InnerTextArea = /*#__PURE__*/forwardRef(function (props, ref) {
   var ourRef = useRef(null);
@@ -53,3 +51,2 @@ var _props$resize = props.resize,
     minimumRows = _props$minimumRows === void 0 ? 2 : _props$minimumRows,
-    theme = props.theme,
     testId = props.testId,
@@ -61,3 +58,2 @@ _props$maxHeight = props.maxHeight,
     onChange = props.onChange,
-    tokens = props.tokens,
     value = props.value,
@@ -114,5 +110,3 @@ rest = _objectWithoutProperties(props, _excluded);
   }, [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-  var textAreaStyles = css([baseStyles,
-  // not memoizing themeStyles as `tokens` is an unstable reference
-  themeStyles(tokens, appearance)]);
+  var textAreaStyles = css([baseStyles, dynamicStyles(appearance)]);
   return jsx("textarea", _extends({}, controlProps, {
@@ -146,18 +140,7 @@ value: value,
 var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
-  return jsx(Theme.Provider, {
-    value: props.theme
-  }, jsx(Theme.Consumer, {
-    appearance: props.appearance || 'standard',
-    mode: mode
-  }, function (tokens) {
-    return jsx(TextAreaWithTokens, _extends({
-      ref: ref
-    }, props, {
-      tokens: tokens
-    }));
-  }));
+  return jsx(InnerTextArea, _extends({
+    ref: ref
+  }, props));
 }));
 TextArea.displayName = 'TextArea';
 export default TextArea;

dist/types-ts4.5/component-tokens.d.ts

@@ -1,52 +0,13 @@
-export declare const disabledBackground: {
-    light: "var(--ds-background-disabled)";
-    dark: "var(--ds-background-disabled)";
-};
-export declare const disabledBorder: {
-    light: "var(--ds-border-disabled)";
-    dark: "var(--ds-border-disabled)";
-};
-export declare const invalidBorderColor: {
-    light: "var(--ds-border-danger)";
-    dark: "var(--ds-border-danger)";
-};
-export declare const defaultBorderColor: {
-    light: "var(--ds-border-input)";
-    dark: "var(--ds-border-input)";
-};
-export declare const defaultBorderColorFocus: {
-    light: "var(--ds-border-focused)";
-    dark: "var(--ds-border-focused)";
-};
-export declare const defaultBackgroundColor: {
-    light: "var(--ds-background-input)";
-    dark: "var(--ds-background-input)";
-};
-export declare const defaultBackgroundColorHover: {
-    light: "var(--ds-background-input-hovered)";
-    dark: "var(--ds-background-input-hovered)";
-};
-export declare const defaultBackgroundColorFocus: {
-    light: "var(--ds-background-input-pressed)";
-    dark: "var(--ds-background-input-pressed)";
-};
-export declare const subtleBorderColorHover: {
-    light: "var(--ds-border-input)";
-    dark: "var(--ds-border-input)";
-};
-export declare const placeholderTextColor: {
-    light: "var(--ds-text-subtlest)";
-    dark: "var(--ds-text-subtlest)";
-};
-export declare const textColor: {
-    light: "var(--ds-text)";
-    dark: "var(--ds-text)";
-};
-export declare const disabledTextColor: {
-    light: "var(--ds-text-disabled)";
-    dark: "var(--ds-text-disabled)";
-};
-export declare const transparent: {
-    light: string;
-    dark: string;
-};
+export declare const disabledBackground: "var(--ds-background-disabled)";
+export declare const disabledBorder: "var(--ds-border-disabled)";
+export declare const invalidBorderColor: "var(--ds-border-danger)";
+export declare const defaultBorderColor: "var(--ds-border-input)";
+export declare const defaultBorderColorFocus: "var(--ds-border-focused)";
+export declare const defaultBackgroundColor: "var(--ds-background-input)";
+export declare const defaultBackgroundColorHover: "var(--ds-background-input-hovered)";
+export declare const defaultBackgroundColorFocus: "var(--ds-background-input-pressed)";
+export declare const subtleBorderColorHover: "var(--ds-border-input)";
+export declare const placeholderTextColor: "var(--ds-text-subtlest)";
+export declare const textColor: "var(--ds-text)";
+export declare const disabledTextColor: "var(--ds-text-disabled)";
+export declare const transparent = "transparent";

dist/types-ts4.5/index.d.ts

 export { default } from './text-area';
-export { Theme, themeTokens } from './theme';
-export type { ThemeAppearance, ThemeProps, ThemeTokens } from './theme';
 export type { TextAreaProps } from './types';

dist/types-ts4.5/styles.d.ts

@@ -1,2 +0,1 @@
-import { ThemeTokens } from './theme';
 import { TextAreaProps } from './types';
@@ -12,2 +11,2 @@ export interface StyleProps {
 export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => import("@emotion/react").SerializedStyles;
-export declare const themeStyles: (props: ThemeTokens, appearance: TextAreaProps['appearance']) => import("@emotion/react").SerializedStyles;
+export declare const dynamicStyles: (appearance: TextAreaProps['appearance']) => import("@emotion/react").SerializedStyles;

dist/types-ts4.5/types.d.ts

@@ -5,9 +5,9 @@ /// <reference types="react" />
     /**
-     * controls the appearance of the field.
-     * subtle shows styling on hover.
-     * none prevents all field styling.
+     * Controls the appearance of the field.
+     * Subtle shows styling on hover.
+     * None prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions.
      */
     appearance?: 'standard' | 'subtle' | 'none';
     /**
-     * Set whether the fields should expand to fill available horizontal space.
+     * Sets whether the field should expand to fill available horizontal space.
      */
@@ -24,3 +24,3 @@ isCompact?: boolean;
     /**
-     * Set required for form that the field is part of.
+     * Sets whether the field is required for form that the field is part of.
      */
@@ -33,27 +33,27 @@ isRequired?: boolean;
     /**
-     * The minimum number of rows of text to display
+     * The minimum number of rows of text to display.
      */
     minimumRows?: number;
     /**
-     * The maxheight of the textarea
+     * The maximum height of the text area.
      */
     maxHeight?: string;
     /**
-     * The value of the text-area.
+     * The value of the text area.
      */
     value?: string;
     /**
-     * The default value of the textarea
+     * The default value of the text area.
      */
     defaultValue?: string;
     /**
-     * Name of the input form control
+     * Name of the input form control.
      */
     name?: string;
     /**
-     * The placeholder within the textarea
+     * The placeholder within the text area.
      */
     placeholder?: string;
     /**
-     * Handler to be called when the input is blurred
+     * Handler to be called when the input is blurred.
      */
@@ -66,16 +66,16 @@ onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
     /**
-     * Handler to be called when the input is focused
+     * Handler to be called when the input is focused.
      */
     onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
     /**
-     * Sets content text value to monospace
+     * Sets the content text value to monospace.
      */
     isMonospaced?: boolean;
     /**
-     * Enables the resizing of the textarea:
-     * auto: both directions.
-     * horizontal: only along the x axis.
-     * vertical: only along the y axis.
-     * smart (default): vertically grows and shrinks the textarea automatically to wrap your input text.
-     * none: explicitly disallow resizing on the textarea.
+     * Enables resizing of the text area. The default setting is `smart`.
+     * Auto enables resizing in both directions.
+     * Horizontal enables resizing only along the X axis.
+     * Vertical enables resizing only along the Y axis.
+     * Smart vertically grows and shrinks the text area automatically to wrap your input text.
+     * None explicitly disallows resizing of the text area.
      */
@@ -88,3 +88,3 @@ resize?: 'auto' | 'vertical' | 'horizontal' | 'smart' | 'none';
     /**
-     * The theme function TextArea consumes to derive theming constants for use in styling its components
+     * The theme function `TextArea` consumes to derive theming constants for use in styling its components
      */
@@ -95,3 +95,3 @@ theme?: any;
      * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests
+     * serving as a hook for automated tests.
      */
@@ -98,0 +98,0 @@ testId?: string;

dist/types/component-tokens.d.ts

@@ -1,52 +0,13 @@
-export declare const disabledBackground: {
-    light: "var(--ds-background-disabled)";
-    dark: "var(--ds-background-disabled)";
-};
-export declare const disabledBorder: {
-    light: "var(--ds-border-disabled)";
-    dark: "var(--ds-border-disabled)";
-};
-export declare const invalidBorderColor: {
-    light: "var(--ds-border-danger)";
-    dark: "var(--ds-border-danger)";
-};
-export declare const defaultBorderColor: {
-    light: "var(--ds-border-input)";
-    dark: "var(--ds-border-input)";
-};
-export declare const defaultBorderColorFocus: {
-    light: "var(--ds-border-focused)";
-    dark: "var(--ds-border-focused)";
-};
-export declare const defaultBackgroundColor: {
-    light: "var(--ds-background-input)";
-    dark: "var(--ds-background-input)";
-};
-export declare const defaultBackgroundColorHover: {
-    light: "var(--ds-background-input-hovered)";
-    dark: "var(--ds-background-input-hovered)";
-};
-export declare const defaultBackgroundColorFocus: {
-    light: "var(--ds-background-input-pressed)";
-    dark: "var(--ds-background-input-pressed)";
-};
-export declare const subtleBorderColorHover: {
-    light: "var(--ds-border-input)";
-    dark: "var(--ds-border-input)";
-};
-export declare const placeholderTextColor: {
-    light: "var(--ds-text-subtlest)";
-    dark: "var(--ds-text-subtlest)";
-};
-export declare const textColor: {
-    light: "var(--ds-text)";
-    dark: "var(--ds-text)";
-};
-export declare const disabledTextColor: {
-    light: "var(--ds-text-disabled)";
-    dark: "var(--ds-text-disabled)";
-};
-export declare const transparent: {
-    light: string;
-    dark: string;
-};
+export declare const disabledBackground: "var(--ds-background-disabled)";
+export declare const disabledBorder: "var(--ds-border-disabled)";
+export declare const invalidBorderColor: "var(--ds-border-danger)";
+export declare const defaultBorderColor: "var(--ds-border-input)";
+export declare const defaultBorderColorFocus: "var(--ds-border-focused)";
+export declare const defaultBackgroundColor: "var(--ds-background-input)";
+export declare const defaultBackgroundColorHover: "var(--ds-background-input-hovered)";
+export declare const defaultBackgroundColorFocus: "var(--ds-background-input-pressed)";
+export declare const subtleBorderColorHover: "var(--ds-border-input)";
+export declare const placeholderTextColor: "var(--ds-text-subtlest)";
+export declare const textColor: "var(--ds-text)";
+export declare const disabledTextColor: "var(--ds-text-disabled)";
+export declare const transparent = "transparent";

dist/types/index.d.ts

 export { default } from './text-area';
-export { Theme, themeTokens } from './theme';
-export type { ThemeAppearance, ThemeProps, ThemeTokens } from './theme';
 export type { TextAreaProps } from './types';

dist/types/styles.d.ts

@@ -1,2 +0,1 @@
-import { ThemeTokens } from './theme';
 import { TextAreaProps } from './types';
@@ -12,2 +11,2 @@ export interface StyleProps {
 export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => import("@emotion/react").SerializedStyles;
-export declare const themeStyles: (props: ThemeTokens, appearance: TextAreaProps['appearance']) => import("@emotion/react").SerializedStyles;
+export declare const dynamicStyles: (appearance: TextAreaProps['appearance']) => import("@emotion/react").SerializedStyles;

dist/types/types.d.ts

@@ -5,9 +5,9 @@ /// <reference types="react" />
     /**
-     * controls the appearance of the field.
-     * subtle shows styling on hover.
-     * none prevents all field styling.
+     * Controls the appearance of the field.
+     * Subtle shows styling on hover.
+     * None prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions.
      */
     appearance?: 'standard' | 'subtle' | 'none';
     /**
-     * Set whether the fields should expand to fill available horizontal space.
+     * Sets whether the field should expand to fill available horizontal space.
      */
@@ -24,3 +24,3 @@ isCompact?: boolean;
     /**
-     * Set required for form that the field is part of.
+     * Sets whether the field is required for form that the field is part of.
      */
@@ -33,27 +33,27 @@ isRequired?: boolean;
     /**
-     * The minimum number of rows of text to display
+     * The minimum number of rows of text to display.
      */
     minimumRows?: number;
     /**
-     * The maxheight of the textarea
+     * The maximum height of the text area.
      */
     maxHeight?: string;
     /**
-     * The value of the text-area.
+     * The value of the text area.
      */
     value?: string;
     /**
-     * The default value of the textarea
+     * The default value of the text area.
      */
     defaultValue?: string;
     /**
-     * Name of the input form control
+     * Name of the input form control.
      */
     name?: string;
     /**
-     * The placeholder within the textarea
+     * The placeholder within the text area.
      */
     placeholder?: string;
     /**
-     * Handler to be called when the input is blurred
+     * Handler to be called when the input is blurred.
      */
@@ -66,16 +66,16 @@ onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
     /**
-     * Handler to be called when the input is focused
+     * Handler to be called when the input is focused.
      */
     onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
     /**
-     * Sets content text value to monospace
+     * Sets the content text value to monospace.
      */
     isMonospaced?: boolean;
     /**
-     * Enables the resizing of the textarea:
-     * auto: both directions.
-     * horizontal: only along the x axis.
-     * vertical: only along the y axis.
-     * smart (default): vertically grows and shrinks the textarea automatically to wrap your input text.
-     * none: explicitly disallow resizing on the textarea.
+     * Enables resizing of the text area. The default setting is `smart`.
+     * Auto enables resizing in both directions.
+     * Horizontal enables resizing only along the X axis.
+     * Vertical enables resizing only along the Y axis.
+     * Smart vertically grows and shrinks the text area automatically to wrap your input text.
+     * None explicitly disallows resizing of the text area.
      */
@@ -88,3 +88,3 @@ resize?: 'auto' | 'vertical' | 'horizontal' | 'smart' | 'none';
     /**
-     * The theme function TextArea consumes to derive theming constants for use in styling its components
+     * The theme function `TextArea` consumes to derive theming constants for use in styling its components
      */
@@ -95,3 +95,3 @@ theme?: any;
      * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests
+     * serving as a hook for automated tests.
      */
@@ -98,0 +98,0 @@ testId?: string;

package.json

 {
   "name": "@atlaskit/textarea",
-  "version": "4.7.7",
+  "version": "5.0.0",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
@@ -41,4 +41,3 @@ "publishConfig": {
     "./styles": "./src/styles.tsx",
-    "./text-area": "./src/text-area.tsx",
-    "./theme": "./src/theme.tsx"
+    "./text-area": "./src/text-area.tsx"
   },
@@ -48,4 +47,4 @@ "dependencies": {
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.17.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
@@ -52,0 +51,0 @@ "@emotion/react": "^11.7.1"

report.api.md

@@ -20,6 +20,3 @@ <!-- API Report Version: 2.3 -->
 
-import { ComponentType } from 'react';
 import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
-import { ThemeProp } from '@atlaskit/theme/components';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
@@ -353,168 +350,2 @@
 
-// @public @deprecated (undocumented)
-export const Theme: {
-  Consumer: ComponentType<
-    {
-      children: (tokens: ThemeTokens) => ReactNode;
-    } & ThemeProps
-  >;
-  Provider: ComponentType<{
-    children?: ReactNode;
-    value?: ThemeProp<ThemeTokens, ThemeProps> | undefined;
-  }>;
-  useTheme: (props: ThemeProps) => ThemeTokens;
-};
-
-// @public (undocumented)
-export type ThemeAppearance = 'none' | 'standard' | 'subtle';
-
-// @public (undocumented)
-export type ThemeProps = {
-  appearance: ThemeAppearance;
-  mode: 'dark' | 'light';
-};
-
-// @public @deprecated (undocumented)
-export type ThemeTokens = {
-  borderColor: string;
-  borderColorFocus: string;
-  borderColorHover: string;
-  backgroundColor: string;
-  backgroundColorFocus: string;
-  backgroundColorHover: string;
-  disabledRules: {
-    backgroundColor: string;
-    backgroundColorFocus: string;
-    backgroundColorHover: string;
-    borderColor: string;
-    borderColorFocus: string;
-    textColor: string;
-  };
-  invalidRules: {
-    borderColor: string;
-    borderColorFocus: string;
-    backgroundColor: string;
-    backgroundColorFocus: string;
-    backgroundColorHover: string;
-  };
-  textColor: string;
-  placeholderTextColor: string;
-};
-
-// @public @deprecated (undocumented)
-export const themeTokens: {
-  borderColor: {
-    standard: {
-      light: 'var(--ds-border-input)';
-      dark: 'var(--ds-border-input)';
-    };
-    subtle: {
-      light: string;
-      dark: string;
-    };
-    none: {
-      light: string;
-      dark: string;
-    };
-  };
-  borderColorFocus: {
-    standard: {
-      light: 'var(--ds-border-focused)';
-      dark: 'var(--ds-border-focused)';
-    };
-    subtle: {
-      light: 'var(--ds-border-focused)';
-      dark: 'var(--ds-border-focused)';
-    };
-    none: {
-      light: string;
-      dark: string;
-    };
-  };
-  backgroundColor: {
-    standard: {
-      light: 'var(--ds-background-input)';
-      dark: 'var(--ds-background-input)';
-    };
-    subtle: {
-      light: string;
-      dark: string;
-    };
-    none: {
-      light: string;
-      dark: string;
-    };
-  };
-  backgroundColorFocus: {
-    standard: {
-      light: 'var(--ds-background-input-pressed)';
-      dark: 'var(--ds-background-input-pressed)';
-    };
-    subtle: {
-      light: 'var(--ds-background-input-pressed)';
-      dark: 'var(--ds-background-input-pressed)';
-    };
-    none: {
-      light: string;
-      dark: string;
-    };
-  };
-  backgroundColorHover: {
-    standard: {
-      light: 'var(--ds-background-input-hovered)';
-      dark: 'var(--ds-background-input-hovered)';
-    };
-    subtle: {
-      light: 'var(--ds-background-input-hovered)';
-      dark: 'var(--ds-background-input-hovered)';
-    };
-    none: {
-      light: string;
-      dark: string;
-    };
-  };
-  disabledRules: {
-    light: {
-      backgroundColor: 'var(--ds-background-disabled)';
-      backgroundColorFocus: 'var(--ds-background-disabled)';
-      backgroundColorHover: 'var(--ds-background-disabled)';
-      borderColor: 'var(--ds-border-disabled)';
-      borderColorFocus: 'var(--ds-border-focused)';
-      textColor: 'var(--ds-text-disabled)';
-    };
-    dark: {
-      backgroundColor: 'var(--ds-background-disabled)';
-      backgroundColorFocus: 'var(--ds-background-disabled)';
-      backgroundColorHover: 'var(--ds-background-disabled)';
-      borderColor: 'var(--ds-border-disabled)';
-      borderColorFocus: 'var(--ds-border-focused)';
-      textColor: 'var(--ds-text-disabled)';
-    };
-  };
-  invalidRules: {
-    light: {
-      borderColor: 'var(--ds-border-danger)';
-      borderColorFocus: 'var(--ds-border-focused)';
-      backgroundColor: 'var(--ds-background-input)';
-      backgroundColorFocus: 'var(--ds-background-input-pressed)';
-      backgroundColorHover: 'var(--ds-background-input-hovered)';
-    };
-    dark: {
-      borderColor: 'var(--ds-border-danger)';
-      borderColorFocus: 'var(--ds-border-focused)';
-      backgroundColor: 'var(--ds-background-input)';
-      backgroundColorFocus: 'var(--ds-background-input-pressed)';
-      backgroundColorHover: 'var(--ds-background-input-hovered)';
-    };
-  };
-  textColor: {
-    light: 'var(--ds-text)';
-    dark: 'var(--ds-text)';
-  };
-  placeholderTextColor: {
-    light: 'var(--ds-text-subtlest)';
-    dark: 'var(--ds-text-subtlest)';
-  };
-};
-
 // (No @packageDocumentation comment for this package)
@@ -521,0 +352,0 @@ ```

tmp/api-report-tmp.d.ts

@@ -9,6 +9,3 @@ ## API Report File for "@atlaskit/textarea"
 
-import { ComponentType } from 'react';
 import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
-import { ThemeProp } from '@atlaskit/theme/components';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
@@ -50,168 +47,4 @@
 
-// @public @deprecated (undocumented)
-export const Theme: {
-    Consumer: ComponentType<    {
-    children: (tokens: ThemeTokens) => ReactNode;
-    } & ThemeProps>;
-    Provider: ComponentType<    {
-    children?: ReactNode;
-    value?: ThemeProp<ThemeTokens, ThemeProps> | undefined;
-    }>;
-    useTheme: (props: ThemeProps) => ThemeTokens;
-};
-
-// @public (undocumented)
-export type ThemeAppearance = 'none' | 'standard' | 'subtle';
-
-// @public (undocumented)
-export type ThemeProps = {
-    appearance: ThemeAppearance;
-    mode: 'dark' | 'light';
-};
-
-// @public @deprecated (undocumented)
-export type ThemeTokens = {
-    borderColor: string;
-    borderColorFocus: string;
-    borderColorHover: string;
-    backgroundColor: string;
-    backgroundColorFocus: string;
-    backgroundColorHover: string;
-    disabledRules: {
-        backgroundColor: string;
-        backgroundColorFocus: string;
-        backgroundColorHover: string;
-        borderColor: string;
-        borderColorFocus: string;
-        textColor: string;
-    };
-    invalidRules: {
-        borderColor: string;
-        borderColorFocus: string;
-        backgroundColor: string;
-        backgroundColorFocus: string;
-        backgroundColorHover: string;
-    };
-    textColor: string;
-    placeholderTextColor: string;
-};
-
-// @public @deprecated (undocumented)
-export const themeTokens: {
-    borderColor: {
-        standard: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        subtle: {
-            light: string;
-            dark: string;
-        };
-        none: {
-            light: string;
-            dark: string;
-        };
-    };
-    borderColorFocus: {
-        standard: {
-            light: "var(--ds-border-focused)";
-            dark: "var(--ds-border-focused)";
-        };
-        subtle: {
-            light: "var(--ds-border-focused)";
-            dark: "var(--ds-border-focused)";
-        };
-        none: {
-            light: string;
-            dark: string;
-        };
-    };
-    backgroundColor: {
-        standard: {
-            light: "var(--ds-background-input)";
-            dark: "var(--ds-background-input)";
-        };
-        subtle: {
-            light: string;
-            dark: string;
-        };
-        none: {
-            light: string;
-            dark: string;
-        };
-    };
-    backgroundColorFocus: {
-        standard: {
-            light: "var(--ds-background-input-pressed)";
-            dark: "var(--ds-background-input-pressed)";
-        };
-        subtle: {
-            light: "var(--ds-background-input-pressed)";
-            dark: "var(--ds-background-input-pressed)";
-        };
-        none: {
-            light: string;
-            dark: string;
-        };
-    };
-    backgroundColorHover: {
-        standard: {
-            light: "var(--ds-background-input-hovered)";
-            dark: "var(--ds-background-input-hovered)";
-        };
-        subtle: {
-            light: "var(--ds-background-input-hovered)";
-            dark: "var(--ds-background-input-hovered)";
-        };
-        none: {
-            light: string;
-            dark: string;
-        };
-    };
-    disabledRules: {
-        light: {
-            backgroundColor: "var(--ds-background-disabled)";
-            backgroundColorFocus: "var(--ds-background-disabled)";
-            backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-border-disabled)";
-            borderColorFocus: "var(--ds-border-focused)";
-            textColor: "var(--ds-text-disabled)";
-        };
-        dark: {
-            backgroundColor: "var(--ds-background-disabled)";
-            backgroundColorFocus: "var(--ds-background-disabled)";
-            backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-border-disabled)";
-            borderColorFocus: "var(--ds-border-focused)";
-            textColor: "var(--ds-text-disabled)";
-        };
-    };
-    invalidRules: {
-        light: {
-            borderColor: "var(--ds-border-danger)";
-            borderColorFocus: "var(--ds-border-focused)";
-            backgroundColor: "var(--ds-background-input)";
-            backgroundColorFocus: "var(--ds-background-input-pressed)";
-            backgroundColorHover: "var(--ds-background-input-hovered)";
-        };
-        dark: {
-            borderColor: "var(--ds-border-danger)";
-            borderColorFocus: "var(--ds-border-focused)";
-            backgroundColor: "var(--ds-background-input)";
-            backgroundColorFocus: "var(--ds-background-input-pressed)";
-            backgroundColorHover: "var(--ds-background-input-hovered)";
-        };
-    };
-    textColor: {
-        light: "var(--ds-text)";
-        dark: "var(--ds-text)";
-    };
-    placeholderTextColor: {
-        light: "var(--ds-text-subtlest)";
-        dark: "var(--ds-text-subtlest)";
-    };
-};
-
 // (No @packageDocumentation comment for this package)
 
 ```

No alert changes

Worsened metrics

Total package byte prevSize

130589

decreased by-19.3%

Number of package files

39

decreased by-13.33%

Lines of code

1875

decreased by-34.46%

Dependency changes

• Updated@atlaskit/theme@^12.6.0

• Updated@atlaskit/tokens@^1.28.0