@atlaskit/textfield 5.6.7 → 6.0.0

package/dist/esm/styles.js

@@ -2,107 +2,72 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { R400 } from '@atlaskit/theme/colors';
+import { B200, N0, N10, N100, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize as getFontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize as getGridSize } from '@atlaskit/theme/constants';
-import * as componentTokens from './component-tokens';
 var fontSize = getFontSize();
 var gridSize = getGridSize();
-var disabledRules = {
-  light: {
-    backgroundColor: componentTokens.disabledBackgroundColor.light,
-    backgroundColorHover: componentTokens.disabledBackgroundColor.light,
-    borderColor: componentTokens.disabledBackgroundColor.light,
-    textColor: componentTokens.disabledTextColor.light
-  },
-  dark: {
-    backgroundColor: componentTokens.disabledBackgroundColor.dark,
-    backgroundColorHover: componentTokens.disabledBackgroundColor.dark,
-    borderColor: componentTokens.disabledBackgroundColor.dark,
-    textColor: componentTokens.disabledTextColor.dark
-  }
-};
-var invalidRules = {
-  light: {
-    // ----
-    backgroundColor: componentTokens.defaultBackgroundColor.light,
-    backgroundColorHover: componentTokens.defaultBackgroundColorHover.light,
-    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
-    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.light,
-    borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
-    borderColorFocus: componentTokens.defaultBorderColorFocus.light
-  },
-  dark: {
-    // ----
-    backgroundColor: componentTokens.defaultBackgroundColor.dark,
-    backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark,
-    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
-    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
-    borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
-    borderColorFocus: componentTokens.defaultBorderColorFocus.dark
-  }
-};
 var backgroundColor = {
-  standard: componentTokens.defaultBackgroundColor,
-  subtle: componentTokens.transparent,
-  none: componentTokens.transparent
+  standard: "var(--ds-background-input, ".concat(N10, ")"),
+  subtle: 'transparent',
+  none: 'transparent'
 };
 var backgroundColorFocus = {
-  standard: componentTokens.defaultBackgroundColorFocus,
-  subtle: componentTokens.defaultBackgroundColorFocus,
-  none: componentTokens.transparent
+  standard: "var(--ds-background-input-pressed, ".concat(N0, ")"),
+  subtle: "var(--ds-background-input-pressed, ".concat(N0, ")"),
+  none: 'transparent'
 };
 var backgroundColorHover = {
-  standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
-  none: componentTokens.transparent
+  standard: "var(--ds-background-input-hovered, ".concat(N30, ")"),
+  subtle: "var(--ds-background-input-hovered, ".concat(N30, ")"),
+  none: 'transparent'
 };
 var borderColor = {
-  standard: componentTokens.defaultBorderColor,
-  subtle: componentTokens.transparent,
-  none: componentTokens.transparent
+  standard: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
+  subtle: 'transparent',
+  none: 'transparent'
 };
 var borderColorFocus = {
-  standard: componentTokens.defaultBorderColorFocus,
-  subtle: componentTokens.defaultBorderColorFocus,
-  none: componentTokens.transparent
+  standard: "var(--ds-border-focused, ".concat(B200, ")"),
+  subtle: "var(--ds-border-focused, ".concat(B200, ")"),
+  none: 'transparent'
 };
 var borderColorHover = {
-  standard: componentTokens.defaultBorderColor,
-  subtle: componentTokens.subtleBorderColorHover,
-  none: componentTokens.transparent
+  standard: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
+  subtle: "var(--ds-border-input, transparent)",
+  none: 'transparent'
 };
-var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance, mode) {
+var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance) {
   return {
-    backgroundColor: backgroundColor[appearance][mode],
-    borderColor: borderColor[appearance][mode],
-    color: componentTokens.textColor[mode],
+    backgroundColor: backgroundColor[appearance],
+    borderColor: borderColor[appearance],
+    color: "var(--ds-text, ".concat(N900, ")"),
     cursor: 'text',
     '&:hover:not([data-disabled])': {
-      backgroundColor: backgroundColorHover[appearance][mode],
-      borderColor: borderColorHover[appearance][mode]
+      backgroundColor: backgroundColorHover[appearance],
+      borderColor: borderColorHover[appearance]
     },
     '&:focus-within:not([data-disabled])': {
-      backgroundColor: backgroundColorFocus[appearance][mode],
-      borderColor: borderColorFocus[appearance][mode],
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance][mode]) : 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
     },
     '&[data-disabled]': _objectSpread({
-      color: disabledRules[mode].textColor,
+      color: "var(--ds-text-disabled, ".concat(N70, ")"),
       cursor: 'not-allowed'
     }, appearance === 'standard' && {
-      backgroundColor: disabledRules[mode].backgroundColor,
-      borderColor: disabledRules[mode].borderColor
+      backgroundColor: "var(--ds-background-disabled, ".concat(N10, ")"),
+      borderColor: "var(--ds-background-disabled, ".concat(N10, ")")
     }),
     '&[data-invalid], &[data-invalid]:hover': {
-      borderColor: invalidRules[mode].borderColor,
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColor) : undefined
+      borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")")) : undefined
     },
     '&[data-invalid]:focus-within': {
-      backgroundColor: invalidRules[mode].backgroundColorFocus,
-      borderColor: invalidRules[mode].borderColorFocus,
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColorFocus) : undefined
+      backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")"),
+      borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")")) : undefined
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -127,15 +92,13 @@ var widthMap = {
 var getMaxWidth = function getMaxWidth(width) {
   return !width ? "100%" : width in widthMap ? widthMap[width] : +width;
 };
-export var containerStyles = function containerStyles(appearance, mode, width) {
+export var containerStyles = function containerStyles(appearance, width) {
   return _objectSpread(_objectSpread(_objectSpread({
     alignItems: 'center'
-  }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
+  }, getContainerTextBgAndBorderColor(appearance)), {}, {
     borderRadius: 3,
     borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2
-  }, getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  {
+  }, getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? {
     padding: "var(--ds-border-width, 1px)".concat(" 0")
   } : {}), {}, {
     borderStyle: appearance === 'none' ? 'none' : 'solid',
@@ -152,7 +115,7 @@ export var containerStyles = function containerStyles(appearance, mode, width) {
     pointerEvents: 'auto'
   });
 };
-export var inputStyles = function inputStyles(mode) {
+export var inputStyles = function inputStyles() {
   return {
     backgroundColor: 'transparent',
     border: 0,
@@ -180,7 +143,7 @@ export var inputStyles = function inputStyles(mode) {
       // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
       // which takes priority over color and makes the text unreadable. Need to
       // override it with the color we want.
-      WebkitTextFillColor: disabledRules[mode].textColor
+      WebkitTextFillColor: "var(--ds-text-disabled, ".concat(N70, ")")
     },
     // Hide the clear indicator on Edge (Windows only)
     '&::-ms-clear': {
@@ -193,9 +156,9 @@ export var inputStyles = function inputStyles(mode) {
       textOverflow: 'ellipsis'
     },
     '&::placeholder': {
-      color: componentTokens.placeholderTextColor[mode],
+      color: "var(--ds-text-subtlest, ".concat(N200, ")"),
       '&:disabled': {
-        color: disabledRules[mode].textColor
+        color: "var(--ds-text-disabled, ".concat(N70, ")")
       }
     },
     '@media screen and (-ms-high-contrast: active)': {
@@ -204,18 +167,4 @@ export var inputStyles = function inputStyles(mode) {
       }
     }
   };
-};
-
-// TODO: Remove when removing legacy theming.
-export var textFieldColors = {
-  backgroundColor: backgroundColor,
-  backgroundColorFocus: backgroundColorFocus,
-  backgroundColorHover: backgroundColorHover,
-  borderColor: borderColor,
-  borderColorFocus: borderColorFocus,
-  borderColorHover: borderColorHover,
-  placeholderTextColor: componentTokens.placeholderTextColor,
-  textColor: componentTokens.textColor,
-  invalidRules: invalidRules,
-  disabledRules: disabledRules
 };

package/dist/esm/text-field.js

@@ -2,47 +2,47 @@ import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"];
+var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.7"
+  packageVersion: "6.0.0"
 };
 var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
+    className = props.className,
+    elemAfterInput = props.elemAfterInput,
+    elemBeforeInput = props.elemBeforeInput,
     _props$isCompact = props.isCompact,
     isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
     _props$isDisabled = props.isDisabled,
     isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
     _props$isInvalid = props.isInvalid,
     isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
-    _props$isRequired = props.isRequired,
-    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-    _props$isReadOnly = props.isReadOnly,
-    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
     _props$isMonospaced = props.isMonospaced,
     isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
-    width = props.width,
-    elemAfterInput = props.elemAfterInput,
-    elemBeforeInput = props.elemBeforeInput,
-    testId = props.testId,
-    onFocus = props.onFocus,
+    _props$isReadOnly = props.isReadOnly,
+    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    name = props.name,
     onBlur = props.onBlur,
+    onChange = props.onChange,
+    onFocus = props.onFocus,
     onMouseDown = props.onMouseDown,
-    className = props.className,
+    placeholder = props.placeholder,
+    testId = props.testId,
+    width = props.width,
     spreadProps = _objectWithoutProperties(props, _excluded);
   var inputRef = useRef(null);
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   var handleOnFocus = usePlatformLeafEventHandler(_objectSpread({
     fn: function fn(event) {
       onFocus && onFocus(event);
@@ -80,15 +80,19 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [ref]);
   var containerStyles = useMemo(function () {
-    return getContainerStyles(appearance, mode, width);
-  }, [appearance, mode, width]);
-  var inputStyle = useMemo(function () {
-    return getInputStyles(mode);
-  }, [mode]);
+    return getContainerStyles(appearance, width);
+  }, [appearance, width]);
+  var inputStyle = getInputStyles();
   return (
-    // We use event bubbling here to listen to any child element mouse down event.
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /**
+     * It is not normally acceptable to add click and key handlers to
+     * non-interactive elements as this is an accessibility anti-pattern.
+     * However, because this instance is to handle events on all children that
+     * should be associated with the input, we can add role="presentation" so
+     * that there are no negative impacts to assistive technologies.
+     */
     jsx("div", {
+      role: "presentation",
       "data-disabled": isDisabled ? isDisabled : undefined,
       "data-invalid": isInvalid ? isInvalid : undefined,
       "data-ds--text-field--container": true,
@@ -100,21 +104,24 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
       css: containerStyles,
       className: className
     }, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
+      "aria-invalid": isInvalid ? isInvalid : undefined
+      // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      ,
+      css: inputStyle,
       "data-compact": isCompact ? isCompact : undefined,
-      "data-monospaced": isMonospaced ? isMonospaced : undefined,
       "data-ds--text-field--input": true,
+      "data-monospaced": isMonospaced ? isMonospaced : undefined,
       "data-testid": testId,
-      "aria-invalid": isInvalid ? isInvalid : undefined,
       disabled: isDisabled,
-      readOnly: isReadOnly,
-      required: isRequired,
+      name: name,
       onBlur: handleOnBlur,
+      onChange: onChange,
       onFocus: handleOnFocus,
-      ref: setInputRef
-      // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      ,
-      css: inputStyle
+      placeholder: placeholder,
+      readOnly: isReadOnly,
+      ref: setInputRef,
+      required: isRequired
     })), elemAfterInput)
   );
 });

package/dist/types/index.d.ts

@@ -1,3 +1,2 @@
 export { default } from './text-field';
-export { textFieldColors as TextFieldColors } from './styles';
 export type { TextfieldProps as TextFieldProps, Appearance } from './types';

package/dist/types/styles.d.ts

@@ -1,6 +1,5 @@
-import { ThemeModes } from '@atlaskit/theme/types';
 import { Appearance } from './types';
-export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number) => {
+export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
     readonly borderStyle: "none" | "solid";
     readonly boxSizing: "border-box";
     readonly display: "flex";
@@ -57,7 +56,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     };
     readonly alignItems: "center";
 };
-export declare const inputStyles: (mode: ThemeModes) => {
+export declare const inputStyles: () => {
     readonly backgroundColor: "transparent";
     readonly border: 0;
     readonly boxSizing: "border-box";
@@ -104,127 +103,3 @@ export declare const inputStyles: (mode: ThemeModes) => {
         };
     };
 };
-export declare const textFieldColors: {
-    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;
-        };
-    };
-    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;
-        };
-    };
-    borderColorHover: {
-        standard: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        subtle: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        none: {
-            light: string;
-            dark: string;
-        };
-    };
-    placeholderTextColor: {
-        light: "var(--ds-text-subtlest)";
-        dark: "var(--ds-text-subtlest)";
-    };
-    textColor: {
-        light: "var(--ds-text)";
-        dark: "var(--ds-text)";
-    };
-    invalidRules: {
-        light: {
-            backgroundColor: "var(--ds-background-input)";
-            backgroundColorHover: "var(--ds-background-input-hovered)";
-            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-background-input-pressed)";
-            borderColor: "var(--ds-border-danger)";
-            borderColorFocus: "var(--ds-border-focused)";
-        };
-    };
-    disabledRules: {
-        light: {
-            backgroundColor: "var(--ds-background-disabled)";
-            backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-background-disabled)";
-            textColor: "var(--ds-text-disabled)";
-        };
-        dark: {
-            backgroundColor: "var(--ds-background-disabled)";
-            backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-background-disabled)";
-            textColor: "var(--ds-text-disabled)";
-        };
-    };
-};

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

@@ -1,3 +1,2 @@
 export { default } from './text-field';
-export { textFieldColors as TextFieldColors } from './styles';
 export type { TextfieldProps as TextFieldProps, Appearance } from './types';

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

@@ -1,6 +1,5 @@
-import { ThemeModes } from '@atlaskit/theme/types';
 import { Appearance } from './types';
-export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number) => {
+export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
     readonly borderStyle: "none" | "solid";
     readonly boxSizing: "border-box";
     readonly display: "flex";
@@ -57,7 +56,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     };
     readonly alignItems: "center";
 };
-export declare const inputStyles: (mode: ThemeModes) => {
+export declare const inputStyles: () => {
     readonly backgroundColor: "transparent";
     readonly border: 0;
     readonly boxSizing: "border-box";
@@ -104,127 +103,3 @@ export declare const inputStyles: (mode: ThemeModes) => {
         };
     };
 };
-export declare const textFieldColors: {
-    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;
-        };
-    };
-    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;
-        };
-    };
-    borderColorHover: {
-        standard: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        subtle: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        none: {
-            light: string;
-            dark: string;
-        };
-    };
-    placeholderTextColor: {
-        light: "var(--ds-text-subtlest)";
-        dark: "var(--ds-text-subtlest)";
-    };
-    textColor: {
-        light: "var(--ds-text)";
-        dark: "var(--ds-text)";
-    };
-    invalidRules: {
-        light: {
-            backgroundColor: "var(--ds-background-input)";
-            backgroundColorHover: "var(--ds-background-input-hovered)";
-            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-background-input-pressed)";
-            borderColor: "var(--ds-border-danger)";
-            borderColorFocus: "var(--ds-border-focused)";
-        };
-    };
-    disabledRules: {
-        light: {
-            backgroundColor: "var(--ds-background-disabled)";
-            backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-background-disabled)";
-            textColor: "var(--ds-text-disabled)";
-        };
-        dark: {
-            backgroundColor: "var(--ds-background-disabled)";
-            backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-background-disabled)";
-            textColor: "var(--ds-text-disabled)";
-        };
-    };
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.6.7",
+  "version": "6.0.0",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.21.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/codemod-utils": "^4.2.3",
     "@atlaskit/ds-lib": "^2.2.0",
@@ -97,4 +98,4 @@
   },
   "homepage": "https://atlassian.design/components/textfield/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}