@atlaskit/textfield 5.1.9 → 5.1.12

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/textfield
 
+## 5.1.12
+
+### Patch Changes
+
+- [`7c14ea36248`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c14ea36248) - [ux] Updated input tokens within `@atlaskit/textfield`.
+
+## 5.1.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.1.10
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
 ## 5.1.9
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -18,8 +18,8 @@ var defaultBackgroundColor = {
 };
 exports.defaultBackgroundColor = defaultBackgroundColor;
 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, ")")
 };
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
 var defaultBackgroundColorHover = {

package/dist/cjs/text-field.js

@@ -40,7 +40,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.9"
+  packageVersion: "5.1.12"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.1.9",
+	"version": "5.1.12",
 	"sideEffects": false
 }

package/dist/es2019/component-tokens.js

@@ -8,8 +8,8 @@ export const defaultBackgroundColor = {
   dark: `var(--ds-background-input, ${DN10})`
 };
 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})`
 };
 export const defaultBackgroundColorHover = {
   light: `var(--ds-background-input-hovered, ${N30})`,

package/dist/es2019/text-field.js

@@ -9,7 +9,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.9"
+  packageVersion: "5.1.12"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.1.9",
+	"version": "5.1.12",
 	"sideEffects": false
 }

package/dist/esm/component-tokens.js

@@ -8,8 +8,8 @@ export var defaultBackgroundColor = {
   dark: "var(--ds-background-input, ".concat(DN10, ")")
 };
 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, ")")
 };
 export var defaultBackgroundColorHover = {
   light: "var(--ds-background-input-hovered, ".concat(N30, ")"),

package/dist/esm/text-field.js

@@ -17,7 +17,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.9"
+  packageVersion: "5.1.12"
 };
 var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.1.9",
+	"version": "5.1.12",
 	"sideEffects": false
 }

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

@@ -7,8 +7,8 @@ export declare const defaultBackgroundColor: {
     dark: "var(--ds-background-input)";
 };
 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 defaultBackgroundColorHover: {
     light: "var(--ds-background-input-hovered)";

package/dist/types/styles.d.ts

@@ -36,7 +36,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
         borderColor: "var(--ds-border-danger)";
     };
     readonly '&[data-invalid]:focus-within': {
-        backgroundColor: "var(--ds-surface)";
+        backgroundColor: "var(--ds-background-input-pressed)";
         borderColor: "var(--ds-border-focused)";
     };
     readonly '@media screen and (-ms-high-contrast: active)': {
@@ -68,12 +68,12 @@ export declare const inputStyles: (mode: ThemeModes) => {
         readonly fontFamily: string;
     };
     readonly '&[data-compact]': {
-        readonly padding: string;
-        readonly height: string;
+        readonly padding: `${number}px ${number}px`;
+        readonly height: `${string}em`;
     };
     readonly '&:not([data-compact])': {
-        readonly padding: string;
-        readonly height: string;
+        readonly padding: `${number}px ${number}px`;
+        readonly height: `${string}em`;
     };
     readonly '&[disabled]': {
         readonly WebkitTextFillColor: "var(--ds-text-disabled)";
@@ -113,12 +113,12 @@ export declare const textFieldColors: {
     };
     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;
@@ -179,14 +179,14 @@ export declare const textFieldColors: {
         light: {
             backgroundColor: "var(--ds-background-input)";
             backgroundColorHover: "var(--ds-background-input-hovered)";
-            backgroundColorFocus: "var(--ds-surface)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
             borderColor: "var(--ds-border-danger)";
             borderColorFocus: "var(--ds-border-focused)";
         };
         dark: {
             backgroundColor: "var(--ds-background-input)";
             backgroundColorHover: "var(--ds-background-input-hovered)";
-            backgroundColorFocus: "var(--ds-surface)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
             borderColor: "var(--ds-border-danger)";
             borderColorFocus: "var(--ds-border-focused)";
         };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.1.9",
+  "version": "5.1.12",
   "description": "A text field is an input that allows a user to write or edit text.",
   "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",
@@ -27,7 +27,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -35,8 +35,8 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^20.5.0",
-    "@atlaskit/button": "^16.2.0",
+    "@atlaskit/avatar": "^21.0.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/icon": "^21.10.0",
@@ -51,7 +51,7 @@
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "3.9.10",
+    "typescript": "4.2.4",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [