@atlaskit/textarea 4.3.5 → 4.3.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/textarea
 
+## 4.3.6
+
+### Patch Changes
+
+- [`f63824e8227`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f63824e8227) - [ux] Updated input tokens within `@atlaskit/textarea`.
+
 ## 4.3.5
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -13,8 +13,8 @@ var disabledBackground = {
 };
 exports.disabledBackground = disabledBackground;
 var disabledBorder = {
-  light: "var(--ds-background-disabled, ".concat(_colors.N40, ")"),
-  dark: "var(--ds-background-disabled, ".concat(_colors.DN40, ")")
+  light: "var(--ds-border-disabled, ".concat(_colors.N40, ")"),
+  dark: "var(--ds-border-disabled, ".concat(_colors.DN40, ")")
 };
 exports.disabledBorder = disabledBorder;
 var invalidBorderColor = {
@@ -23,8 +23,8 @@ var invalidBorderColor = {
 };
 exports.invalidBorderColor = invalidBorderColor;
 var defaultBorderColor = {
-  light: "var(--ds-border, ".concat(_colors.N40, ")"),
-  dark: "var(--ds-border, ".concat(_colors.DN40, ")")
+  light: "var(--ds-border-input, ".concat(_colors.N40, ")"),
+  dark: "var(--ds-border-input, ".concat(_colors.DN40, ")")
 };
 exports.defaultBorderColor = defaultBorderColor;
 var defaultBorderColorFocus = {
@@ -38,13 +38,13 @@ var defaultBackgroundColor = {
 };
 exports.defaultBackgroundColor = defaultBackgroundColor;
 var defaultBackgroundColorHover = {
-  light: "var(--ds-surface, ".concat(_colors.N30, ")"),
-  dark: "var(--ds-surface, ".concat(_colors.DN30, ")")
+  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-surface, ".concat(_colors.N0, ")"),
-  dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
+  light: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-background-input-pressed, ".concat(_colors.DN10, ")")
 }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
 
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;

package/dist/cjs/text-area.js

@@ -40,7 +40,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = 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; }
 
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.3.5";
+var packageVersion = "4.3.6";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/cjs/version.json

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

package/dist/es2019/component-tokens.js

@@ -4,16 +4,16 @@ export const disabledBackground = {
   dark: `var(--ds-background-disabled, ${DN20})`
 };
 export const disabledBorder = {
-  light: `var(--ds-background-disabled, ${N40})`,
-  dark: `var(--ds-background-disabled, ${DN40})`
+  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, ${N40})`,
-  dark: `var(--ds-border, ${DN40})`
+  light: `var(--ds-border-input, ${N40})`,
+  dark: `var(--ds-border-input, ${DN40})`
 };
 export const defaultBorderColorFocus = {
   light: `var(--ds-border-focused, ${B100})`,
@@ -24,12 +24,12 @@ export const defaultBackgroundColor = {
   dark: `var(--ds-background-neutral, ${DN10})`
 };
 export const defaultBackgroundColorHover = {
-  light: `var(--ds-surface, ${N30})`,
-  dark: `var(--ds-surface, ${DN30})`
+  light: `var(--ds-background-input-hovered, ${N30})`,
+  dark: `var(--ds-background-input-hovered, ${DN30})`
 };
 export const defaultBackgroundColorFocus = {
-  light: `var(--ds-surface, ${N0})`,
-  dark: `var(--ds-surface, ${DN10})`
+  light: `var(--ds-background-input-pressed, ${N0})`,
+  dark: `var(--ds-background-input-pressed, ${DN10})`
 }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
 
 export const subtleHoverBackgroundColor = {

package/dist/es2019/text-area.js

@@ -8,7 +8,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "4.3.5";
+const packageVersion = "4.3.6";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,

package/dist/es2019/version.json

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

package/dist/esm/component-tokens.js

@@ -4,16 +4,16 @@ export var disabledBackground = {
   dark: "var(--ds-background-disabled, ".concat(DN20, ")")
 };
 export var disabledBorder = {
-  light: "var(--ds-background-disabled, ".concat(N40, ")"),
-  dark: "var(--ds-background-disabled, ".concat(DN40, ")")
+  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, ".concat(N40, ")"),
-  dark: "var(--ds-border, ".concat(DN40, ")")
+  light: "var(--ds-border-input, ".concat(N40, ")"),
+  dark: "var(--ds-border-input, ".concat(DN40, ")")
 };
 export var defaultBorderColorFocus = {
   light: "var(--ds-border-focused, ".concat(B100, ")"),
@@ -24,12 +24,12 @@ export var defaultBackgroundColor = {
   dark: "var(--ds-background-neutral, ".concat(DN10, ")")
 };
 export var defaultBackgroundColorHover = {
-  light: "var(--ds-surface, ".concat(N30, ")"),
-  dark: "var(--ds-surface, ".concat(DN30, ")")
+  light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
+  dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
 };
 export var defaultBackgroundColorFocus = {
-  light: "var(--ds-surface, ".concat(N0, ")"),
-  dark: "var(--ds-surface, ".concat(DN10, ")")
+  light: "var(--ds-background-input-pressed, ".concat(N0, ")"),
+  dark: "var(--ds-background-input-pressed, ".concat(DN10, ")")
 }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
 
 export var subtleHoverBackgroundColor = {

package/dist/esm/text-area.js

@@ -16,7 +16,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.3.5";
+var packageVersion = "4.3.6";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/esm/version.json

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

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

@@ -3,16 +3,16 @@ export declare const disabledBackground: {
     dark: "var(--ds-background-disabled)";
 };
 export declare const disabledBorder: {
-    light: "var(--ds-background-disabled)";
-    dark: "var(--ds-background-disabled)";
+    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)";
-    dark: "var(--ds-border)";
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
 };
 export declare const defaultBorderColorFocus: {
     light: "var(--ds-border-focused)";
@@ -23,12 +23,12 @@ export declare const defaultBackgroundColor: {
     dark: "var(--ds-background-neutral)";
 };
 export declare const defaultBackgroundColorHover: {
-    light: "var(--ds-surface)";
-    dark: "var(--ds-surface)";
+    light: "var(--ds-background-input-hovered)";
+    dark: "var(--ds-background-input-hovered)";
 };
 export declare const defaultBackgroundColorFocus: {
-    light: "var(--ds-surface)";
-    dark: "var(--ds-surface)";
+    light: "var(--ds-background-input-pressed)";
+    dark: "var(--ds-background-input-pressed)";
 };
 export declare const subtleHoverBackgroundColor: {
     light: "var(--ds-background-neutral-subtle-hovered)";

package/dist/types/theme.d.ts

@@ -31,8 +31,8 @@ export declare type ThemeTokens = {
 export declare const themeTokens: {
     borderColor: {
         standard: {
-            light: "var(--ds-border)";
-            dark: "var(--ds-border)";
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
         };
         subtle: {
             light: string;
@@ -73,12 +73,12 @@ export declare const themeTokens: {
     };
     backgroundColorFocus: {
         standard: {
-            light: "var(--ds-surface)";
-            dark: "var(--ds-surface)";
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
         };
         subtle: {
-            light: "var(--ds-surface)";
-            dark: "var(--ds-surface)";
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
         };
         none: {
             light: string;
@@ -87,8 +87,8 @@ export declare const themeTokens: {
     };
     backgroundColorHover: {
         standard: {
-            light: "var(--ds-surface)";
-            dark: "var(--ds-surface)";
+            light: "var(--ds-background-input-hovered)";
+            dark: "var(--ds-background-input-hovered)";
         };
         subtle: {
             light: "var(--ds-background-neutral-subtle-hovered)";
@@ -104,7 +104,7 @@ export declare const themeTokens: {
             backgroundColor: "var(--ds-background-disabled)";
             backgroundColorFocus: "var(--ds-background-disabled)";
             backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-border-disabled)";
             borderColorFocus: "var(--ds-border-focused)";
             textColor: "var(--ds-text-disabled)";
         };
@@ -112,7 +112,7 @@ export declare const themeTokens: {
             backgroundColor: "var(--ds-background-disabled)";
             backgroundColorFocus: "var(--ds-background-disabled)";
             backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-border-disabled)";
             borderColorFocus: "var(--ds-border-focused)";
             textColor: "var(--ds-text-disabled)";
         };
@@ -122,15 +122,15 @@ export declare const themeTokens: {
             borderColor: "var(--ds-border-danger)";
             borderColorFocus: "var(--ds-border-focused)";
             backgroundColor: "var(--ds-background-neutral)";
-            backgroundColorFocus: "var(--ds-surface)";
-            backgroundColorHover: "var(--ds-surface)";
+            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-neutral)";
-            backgroundColorFocus: "var(--ds-surface)";
-            backgroundColorHover: "var(--ds-surface)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
+            backgroundColorHover: "var(--ds-background-input-hovered)";
         };
     };
     textColor: {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.3.5",
+  "version": "4.3.6",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",