@atlaskit/textfield - npm Package Compare versions

Comparing version 5.0.5 to 5.1.0

CHANGELOG.md

 # @atlaskit/textfield
 
+## 5.1.0
+
+### Minor Changes
+
+- [`78ba9e045b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78ba9e045b8) - Internal refactor to align to the design system techstack.
+- [`4d34d35270e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4d34d35270e) - Instrumented text field with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation.
+  Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`af4bca32ad4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af4bca32ad4) - Internal changes to supress eslint rules.
+- [`ac656b4875e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac656b4875e) - Internal style refactor with no visual change.
+- Updated dependencies
+
 ## 5.0.5
@@ -4,0 +21,0 @@

dist/cjs/component-tokens.js

@@ -6,43 +6,41 @@ "use strict";
 });
-exports.placeholderTextColor = exports.disabledTextColor = exports.textColor = exports.transparent = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = exports.invalidBorderColor = exports.disabledBackgroundColor = void 0;
+exports.placeholderTextColor = exports.disabledTextColor = exports.textColor = exports.transparent = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.subtleBackgroundColorHover = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = exports.disabledBackgroundColor = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
-// The following are the name for color mappings in @atlaskit/themes
-// The exports are the functions, not the objects, so could not be used here
+var _tokens = require("@atlaskit/tokens");
+
 var disabledBackgroundColor = {
-  light: _colors.N20,
-  dark: _colors.DN20
-}; // For validation red is the new 'yellow' which was { light: Y300, dark: Y300 }
-
+  light: (0, _tokens.token)('color.background.disabled', _colors.N10),
+  dark: (0, _tokens.token)('color.background.disabled', _colors.DN10)
+};
 exports.disabledBackgroundColor = disabledBackgroundColor;
-var invalidBorderColor = {
-  light: _colors.R400,
-  dark: _colors.R400
-}; // The following do not yet have a darkmode 'map': N20A, N10
-
-exports.invalidBorderColor = invalidBorderColor;
 var defaultBackgroundColor = {
-  light: _colors.N10,
-  dark: _colors.DN10
+  light: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.N10),
+  dark: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.DN10)
 };
 exports.defaultBackgroundColor = defaultBackgroundColor;
 var defaultBackgroundColorFocus = {
-  light: _colors.N0,
-  dark: _colors.DN10
+  light: (0, _tokens.token)('color.background.default', _colors.N0),
+  dark: (0, _tokens.token)('color.background.default', _colors.DN10)
 };
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
 var defaultBackgroundColorHover = {
-  light: _colors.N30,
-  dark: _colors.DN30
+  light: (0, _tokens.token)('color.background.default', _colors.N30),
+  dark: (0, _tokens.token)('color.background.default', _colors.DN30)
 };
 exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
+var subtleBackgroundColorHover = {
+  light: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30),
+  dark: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.DN30)
+};
+exports.subtleBackgroundColorHover = subtleBackgroundColorHover;
 var defaultBorderColor = {
-  light: _colors.N40,
-  dark: _colors.DN40
+  light: (0, _tokens.token)('color.border.neutral', _colors.N40),
+  dark: (0, _tokens.token)('color.border.neutral', _colors.DN40)
 };
 exports.defaultBorderColor = defaultBorderColor;
 var defaultBorderColorFocus = {
-  light: _colors.B100,
-  dark: _colors.B75
+  light: (0, _tokens.token)('color.border.focus', _colors.B100),
+  dark: (0, _tokens.token)('color.border.focus', _colors.B75)
 };
@@ -56,15 +54,15 @@ exports.defaultBorderColorFocus = defaultBorderColorFocus;
 var textColor = {
-  light: _colors.N900,
-  dark: _colors.DN600
+  light: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
+  dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
 };
 exports.textColor = textColor;
 var disabledTextColor = {
-  light: _colors.N70,
-  dark: _colors.DN90
+  light: (0, _tokens.token)('color.text.disabled', _colors.N70),
+  dark: (0, _tokens.token)('color.text.disabled', _colors.DN90)
 };
 exports.disabledTextColor = disabledTextColor;
 var placeholderTextColor = {
-  light: _colors.N100,
-  dark: _colors.DN90
+  light: (0, _tokens.token)('color.text.lowEmphasis', _colors.N100),
+  dark: (0, _tokens.token)('color.text.lowEmphasis', _colors.DN90)
 };
 exports.placeholderTextColor = placeholderTextColor;

dist/cjs/index.js

@@ -17,3 +17,3 @@ "use strict";
   get: function get() {
-    return _styles.TextFieldColors;
+    return _styles.textFieldColors;
   }
@@ -20,0 +20,0 @@ });

dist/cjs/styles.js

@@ -10,8 +10,12 @@ "use strict";
 });
-exports.TextFieldColors = exports.inputStyles = exports.containerStyles = void 0;
+exports.textFieldColors = exports.inputStyles = exports.containerStyles = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var componentTokens = _interopRequireWildcard(require("./component-tokens"));
@@ -31,17 +35,11 @@
   light: {
-    backgroundColor: componentTokens.defaultBackgroundColor.light,
-    backgroundColorFocus: componentTokens.disabledBackgroundColor.light,
+    backgroundColor: componentTokens.disabledBackgroundColor.light,
     backgroundColorHover: componentTokens.disabledBackgroundColor.light,
-    // same as bg, appears as no border
-    borderColor: componentTokens.defaultBackgroundColor.light,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.light,
+    borderColor: componentTokens.disabledBackgroundColor.light,
     textColor: componentTokens.disabledTextColor.light
   },
   dark: {
-    backgroundColor: componentTokens.defaultBackgroundColor.dark,
-    backgroundColorFocus: componentTokens.disabledBackgroundColor.dark,
+    backgroundColor: componentTokens.disabledBackgroundColor.dark,
     backgroundColorHover: componentTokens.disabledBackgroundColor.dark,
-    // same as bg, appears as no border
-    borderColor: componentTokens.defaultBackgroundColor.dark,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.dark,
+    borderColor: componentTokens.disabledBackgroundColor.dark,
     textColor: componentTokens.disabledTextColor.dark
@@ -52,13 +50,17 @@ }
   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,
-    backgroundColorHover: componentTokens.defaultBackgroundColorHover.light,
-    borderColor: componentTokens.invalidBorderColor.light,
+    borderColor: (0, _tokens.token)('color.iconBorder.danger', _colors.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,
-    backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark,
-    borderColor: componentTokens.invalidBorderColor.dark,
+    borderColor: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark
@@ -79,3 +81,3 @@ }
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.subtleBackgroundColorHover,
   none: componentTokens.transparent
@@ -113,11 +115,3 @@ };
     },
-    '&[data-disabled]:focus-within': {
-      backgroundColor: disabledRules[mode].backgroundColorFocus,
-      borderColor: disabledRules[mode].borderColorFocus
-    },
-    '&[data-disabled]:hover': {
-      backgroundColor: disabledRules[mode].backgroundColorHover
-    },
     '&[data-invalid]': {
-      backgroundColor: invalidRules[mode].backgroundColor,
       borderColor: invalidRules[mode].borderColor
@@ -129,5 +123,2 @@ },
     },
-    '&[data-invalid]:hover': {
-      backgroundColor: invalidRules[mode].backgroundColorHover
-    },
     '@media screen and (-ms-high-contrast: active)': {
@@ -231,6 +222,7 @@ '&[data-invalid]:focus-within': {
   };
-};
+}; // TODO: Remove when removing legacy theming.
 
+
 exports.inputStyles = inputStyles;
-var TextFieldColors = {
+var textFieldColors = {
   backgroundColor: backgroundColor,
@@ -246,2 +238,2 @@ backgroundColorFocus: backgroundColorFocus,
 };
-exports.TextFieldColors = TextFieldColors;
+exports.textFieldColors = textFieldColors;

dist/cjs/text-field.js

@@ -26,3 +26,3 @@ "use strict";
 
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+var _components = require("@atlaskit/theme/components");
 
@@ -42,6 +42,5 @@ var _styles = require("./styles");
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.0.5"
+  packageVersion: "5.1.0"
 };
-var TextfieldWithMode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var input = (0, _react.useRef)(null);
+var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,
@@ -62,3 +61,2 @@ appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
       width = props.width,
-      mode = props.mode,
       elemAfterInput = props.elemAfterInput,
@@ -71,3 +69,8 @@ elemBeforeInput = props.elemBeforeInput,
       className = props.className,
-      otherProps = (0, _objectWithoutProperties2.default)(props, ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "mode", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"]);
+      spreadProps = (0, _objectWithoutProperties2.default)(props, ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"]);
+  var inputRef = (0, _react.useRef)(null);
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
   var handleOnFocus = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
@@ -86,3 +89,3 @@ fn: function fn(event) {
   var handleOnMouseDown = (0, _react.useCallback)(function (event) {
-    /** Running e.preventDefault() on the INPUT prevents double click behaviour */
+    // Running e.preventDefault() on the INPUT prevents double click behaviour
     // Sadly we needed this cast as the target type is being correctly set
@@ -95,38 +98,27 @@ var target = event.target;
 
-    if (input && input.current && !isDisabled && document.activeElement !== input.current) {
-      input.current.focus();
+    if (inputRef && inputRef.current && !isDisabled && document.activeElement !== inputRef.current) {
+      inputRef.current.focus();
     }
 
     onMouseDown && onMouseDown(event);
-  }, [onMouseDown, input, isDisabled]); // we want to keep a copy of the ref as well as pass it along
-
+  }, [onMouseDown, isDisabled]);
   var setInputRef = (0, _react.useCallback)(function (inputElement) {
-    input.current = inputElement;
-    var forwardedRef = ref;
+    inputRef.current = inputElement;
 
-    if (!forwardedRef) {
+    if (!ref) {
       return;
     }
 
-    if ((0, _typeof2.default)(forwardedRef) === 'object') {
+    if ((0, _typeof2.default)(ref) === 'object') {
       // This is a blunder on the part of @types/react
       // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
       // .current should be assignable
-      // @ts-ignore
-      forwardedRef.current = inputElement;
+      // @ts-expect-error
+      ref.current = inputElement;
     }
 
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(inputElement);
+    if (typeof ref === 'function') {
+      ref(inputElement);
     }
   }, [ref]);
-  var inputControlProps = {
-    'data-compact': isCompact ? isCompact : undefined,
-    'data-monospaced': isMonospaced ? isMonospaced : undefined,
-    'aria-invalid': isInvalid ? isInvalid : undefined
-  };
-  var containerControlProps = {
-    'data-disabled': isDisabled ? isDisabled : undefined,
-    'data-invalid': isInvalid ? isInvalid : undefined
-  };
   var containerStyles = (0, _react.useMemo)(function () {
@@ -138,11 +130,20 @@ return (0, _styles.containerStyles)(appearance, mode, width);
   }, [mode]);
-  return (// https://product-fabric.atlassian.net/browse/DST-1970
+  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
-    (0, _core.jsx)("div", (0, _extends2.default)({}, containerControlProps, {
-      onMouseDown: handleOnMouseDown,
+    (0, _core.jsx)("div", {
+      "data-disabled": isDisabled ? isDisabled : undefined,
+      "data-invalid": isInvalid ? isInvalid : undefined,
       "data-ds--text-field--container": true,
       "data-testid": testId && "".concat(testId, "-container"),
+      onMouseDown: handleOnMouseDown // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: containerStyles,
       className: className
-    }), elemBeforeInput, (0, _core.jsx)("input", (0, _extends2.default)({}, otherProps, inputControlProps, {
+    }, elemBeforeInput, (0, _core.jsx)("input", (0, _extends2.default)({}, spreadProps, {
+      "data-compact": isCompact ? isCompact : undefined,
+      "data-monospaced": isMonospaced ? isMonospaced : undefined,
+      "data-ds--text-field--input": true,
+      "data-testid": testId,
+      "aria-invalid": isInvalid ? isInvalid : undefined,
       disabled: isDisabled,
@@ -153,5 +154,5 @@ readOnly: isReadOnly,
       onFocus: handleOnFocus,
-      ref: setInputRef,
-      "data-ds--text-field--input": true,
-      "data-testid": testId,
+      ref: setInputRef // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: inputStyle
@@ -161,15 +162,17 @@ })), elemAfterInput)
 });
-var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function Textfield(props, ref) {
-  return (0, _core.jsx)(_components.default.Consumer, null, function (_ref) {
-    var mode = _ref.mode;
-    return (0, _core.jsx)(TextfieldWithMode, (0, _extends2.default)({}, props, {
-      mode: mode,
-      ref: ref
-    }));
-  });
-});
 Textfield.displayName = 'Textfield';
+/**
+ * __Textfield__
+ *
+ * A text field is an input that allows a user to write or edit text.
+ *
+ * - [Examples](https://atlassian.design/components/textfield/examples)
+ * - [Code](https://atlassian.design/components/textfield/code)
+ * - [Usage](https://atlassian.design/components/textfield/usage)
+ */
 
-var _default = /*#__PURE__*/(0, _react.memo)(Textfield);
+var _default = /*#__PURE__*/(0, _react.memo)(Textfield); // The above generic is used to let ERTC know what props to extract.
+// See: https://github.com/atlassian/extract-react-types/issues/201
 
+
 exports.default = _default;

dist/cjs/version.json

 {
 	"name": "@atlaskit/textfield",
-	"version": "5.0.5",
+	"version": "5.1.0",
 	"sideEffects": false
 }

dist/es2019/component-tokens.js

@@ -1,33 +0,30 @@
-import { B100, B75, DN10, DN20, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors'; // The following are the name for color mappings in @atlaskit/themes
-// The exports are the functions, not the objects, so could not be used here
-
+import { B100, B75, DN10, DN30, DN40, DN600, DN90, N0, N10, N100, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const disabledBackgroundColor = {
-  light: N20,
-  dark: DN20
-}; // For validation red is the new 'yellow' which was { light: Y300, dark: Y300 }
-
-export const invalidBorderColor = {
-  light: R400,
-  dark: R400
-}; // The following do not yet have a darkmode 'map': N20A, N10
-
+  light: token('color.background.disabled', N10),
+  dark: token('color.background.disabled', DN10)
+};
 export const defaultBackgroundColor = {
-  light: N10,
-  dark: DN10
+  light: token('color.background.subtleBorderedNeutral.resting', N10),
+  dark: token('color.background.subtleBorderedNeutral.resting', DN10)
 };
 export const defaultBackgroundColorFocus = {
-  light: N0,
-  dark: DN10
+  light: token('color.background.default', N0),
+  dark: token('color.background.default', DN10)
 };
 export const defaultBackgroundColorHover = {
-  light: N30,
-  dark: DN30
+  light: token('color.background.default', N30),
+  dark: token('color.background.default', DN30)
 };
+export const subtleBackgroundColorHover = {
+  light: token('color.background.transparentNeutral.hover', N30),
+  dark: token('color.background.transparentNeutral.hover', DN30)
+};
 export const defaultBorderColor = {
-  light: N40,
-  dark: DN40
+  light: token('color.border.neutral', N40),
+  dark: token('color.border.neutral', DN40)
 };
 export const defaultBorderColorFocus = {
-  light: B100,
-  dark: B75
+  light: token('color.border.focus', B100),
+  dark: token('color.border.focus', B75)
 };
@@ -39,12 +36,12 @@ export const transparent = {
 export const textColor = {
-  light: N900,
-  dark: DN600
+  light: token('color.text.highEmphasis', N900),
+  dark: token('color.text.highEmphasis', DN600)
 };
 export const disabledTextColor = {
-  light: N70,
-  dark: DN90
+  light: token('color.text.disabled', N70),
+  dark: token('color.text.disabled', DN90)
 };
 export const placeholderTextColor = {
-  light: N100,
-  dark: DN90
+  light: token('color.text.lowEmphasis', N100),
+  dark: token('color.text.lowEmphasis', DN90)
 };

dist/es2019/index.js

 export { default } from './text-field';
-export { TextFieldColors } from './styles';
+export { textFieldColors as TextFieldColors } from './styles';

dist/es2019/styles.js

@@ -0,2 +1,4 @@
+import { R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import * as componentTokens from './component-tokens';
@@ -7,17 +9,11 @@ const fontSize = getFontSize();
   light: {
-    backgroundColor: componentTokens.defaultBackgroundColor.light,
-    backgroundColorFocus: componentTokens.disabledBackgroundColor.light,
+    backgroundColor: componentTokens.disabledBackgroundColor.light,
     backgroundColorHover: componentTokens.disabledBackgroundColor.light,
-    // same as bg, appears as no border
-    borderColor: componentTokens.defaultBackgroundColor.light,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.light,
+    borderColor: componentTokens.disabledBackgroundColor.light,
     textColor: componentTokens.disabledTextColor.light
   },
   dark: {
-    backgroundColor: componentTokens.defaultBackgroundColor.dark,
-    backgroundColorFocus: componentTokens.disabledBackgroundColor.dark,
+    backgroundColor: componentTokens.disabledBackgroundColor.dark,
     backgroundColorHover: componentTokens.disabledBackgroundColor.dark,
-    // same as bg, appears as no border
-    borderColor: componentTokens.defaultBackgroundColor.dark,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.dark,
+    borderColor: componentTokens.disabledBackgroundColor.dark,
     textColor: componentTokens.disabledTextColor.dark
@@ -28,13 +24,17 @@ }
   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,
-    backgroundColorHover: componentTokens.defaultBackgroundColorHover.light,
-    borderColor: componentTokens.invalidBorderColor.light,
+    borderColor: token('color.iconBorder.danger', 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,
-    backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark,
-    borderColor: componentTokens.invalidBorderColor.dark,
+    borderColor: token('color.iconBorder.danger', R400),
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark
@@ -55,3 +55,3 @@ }
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.subtleBackgroundColorHover,
   none: componentTokens.transparent
@@ -88,11 +88,3 @@ };
   },
-  '&[data-disabled]:focus-within': {
-    backgroundColor: disabledRules[mode].backgroundColorFocus,
-    borderColor: disabledRules[mode].borderColorFocus
-  },
-  '&[data-disabled]:hover': {
-    backgroundColor: disabledRules[mode].backgroundColorHover
-  },
   '&[data-invalid]': {
-    backgroundColor: invalidRules[mode].backgroundColor,
     borderColor: invalidRules[mode].borderColor
@@ -104,5 +96,2 @@ },
   },
-  '&[data-invalid]:hover': {
-    backgroundColor: invalidRules[mode].backgroundColorHover
-  },
   '@media screen and (-ms-high-contrast: active)': {
@@ -196,4 +185,5 @@ '&[data-invalid]:focus-within': {
   }
-});
-export const TextFieldColors = {
+}); // TODO: Remove when removing legacy theming.
+
+export const textFieldColors = {
   backgroundColor,
@@ -200,0 +190,0 @@ backgroundColorFocus,

dist/es2019/text-field.js

@@ -7,3 +7,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
@@ -13,6 +13,5 @@ const analyticsParams = {
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.0.5"
+  packageVersion: "5.1.0"
 };
-const TextfieldWithMode = /*#__PURE__*/forwardRef((props, ref) => {
-  const input = useRef(null);
+const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -27,3 +26,2 @@ appearance = 'standard',
     width,
-    mode,
     elemAfterInput,
@@ -36,4 +34,8 @@ elemBeforeInput,
     className,
-    ...otherProps
+    ...spreadProps
   } = props;
+  const inputRef = useRef(null);
+  const {
+    mode
+  } = useGlobalTheme();
   const handleOnFocus = usePlatformLeafEventHandler({
@@ -54,3 +56,3 @@ fn: event => {
   const handleOnMouseDown = useCallback(event => {
-    /** Running e.preventDefault() on the INPUT prevents double click behaviour */
+    // Running e.preventDefault() on the INPUT prevents double click behaviour
     // Sadly we needed this cast as the target type is being correctly set
@@ -63,49 +65,47 @@ const target = event.target;
 
-    if (input && input.current && !isDisabled && document.activeElement !== input.current) {
-      input.current.focus();
+    if (inputRef && inputRef.current && !isDisabled && document.activeElement !== inputRef.current) {
+      inputRef.current.focus();
     }
 
     onMouseDown && onMouseDown(event);
-  }, [onMouseDown, input, isDisabled]); // we want to keep a copy of the ref as well as pass it along
-
+  }, [onMouseDown, isDisabled]);
   const setInputRef = useCallback(inputElement => {
-    input.current = inputElement;
-    const forwardedRef = ref;
+    inputRef.current = inputElement;
 
-    if (!forwardedRef) {
+    if (!ref) {
       return;
     }
 
-    if (typeof forwardedRef === 'object') {
+    if (typeof ref === 'object') {
       // This is a blunder on the part of @types/react
       // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
       // .current should be assignable
-      // @ts-ignore
-      forwardedRef.current = inputElement;
+      // @ts-expect-error
+      ref.current = inputElement;
     }
 
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(inputElement);
+    if (typeof ref === 'function') {
+      ref(inputElement);
     }
   }, [ref]);
-  const inputControlProps = {
-    'data-compact': isCompact ? isCompact : undefined,
-    'data-monospaced': isMonospaced ? isMonospaced : undefined,
-    'aria-invalid': isInvalid ? isInvalid : undefined
-  };
-  const containerControlProps = {
-    'data-disabled': isDisabled ? isDisabled : undefined,
-    'data-invalid': isInvalid ? isInvalid : undefined
-  };
   const containerStyles = useMemo(() => getContainerStyles(appearance, mode, width), [appearance, mode, width]);
   const inputStyle = useMemo(() => getInputStyles(mode), [mode]);
-  return (// https://product-fabric.atlassian.net/browse/DST-1970
+  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
-    jsx("div", _extends({}, containerControlProps, {
-      onMouseDown: handleOnMouseDown,
+    jsx("div", {
+      "data-disabled": isDisabled ? isDisabled : undefined,
+      "data-invalid": isInvalid ? isInvalid : undefined,
       "data-ds--text-field--container": true,
       "data-testid": testId && `${testId}-container`,
+      onMouseDown: handleOnMouseDown // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: containerStyles,
       className: className
-    }), elemBeforeInput, jsx("input", _extends({}, otherProps, inputControlProps, {
+    }, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
+      "data-compact": isCompact ? isCompact : undefined,
+      "data-monospaced": isMonospaced ? isMonospaced : undefined,
+      "data-ds--text-field--input": true,
+      "data-testid": testId,
+      "aria-invalid": isInvalid ? isInvalid : undefined,
       disabled: isDisabled,
@@ -116,5 +116,5 @@ readOnly: isReadOnly,
       onFocus: handleOnFocus,
-      ref: setInputRef,
-      "data-ds--text-field--input": true,
-      "data-testid": testId,
+      ref: setInputRef // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: inputStyle
@@ -124,11 +124,14 @@ })), elemAfterInput)
 });
-const Textfield = /*#__PURE__*/forwardRef(function Textfield(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, ({
-    mode
-  }) => jsx(TextfieldWithMode, _extends({}, props, {
-    mode: mode,
-    ref: ref
-  })));
-});
 Textfield.displayName = 'Textfield';
-export default /*#__PURE__*/memo(Textfield);
+/**
+ * __Textfield__
+ *
+ * A text field is an input that allows a user to write or edit text.
+ *
+ * - [Examples](https://atlassian.design/components/textfield/examples)
+ * - [Code](https://atlassian.design/components/textfield/code)
+ * - [Usage](https://atlassian.design/components/textfield/usage)
+ */
+
+export default /*#__PURE__*/memo(Textfield); // The above generic is used to let ERTC know what props to extract.
+// See: https://github.com/atlassian/extract-react-types/issues/201

dist/es2019/version.json

 {
 	"name": "@atlaskit/textfield",
-	"version": "5.0.5",
+	"version": "5.1.0",
 	"sideEffects": false
 }

dist/esm/component-tokens.js

@@ -1,33 +0,30 @@
-import { B100, B75, DN10, DN20, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors'; // The following are the name for color mappings in @atlaskit/themes
-// The exports are the functions, not the objects, so could not be used here
-
+import { B100, B75, DN10, DN30, DN40, DN600, DN90, N0, N10, N100, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var disabledBackgroundColor = {
-  light: N20,
-  dark: DN20
-}; // For validation red is the new 'yellow' which was { light: Y300, dark: Y300 }
-
-export var invalidBorderColor = {
-  light: R400,
-  dark: R400
-}; // The following do not yet have a darkmode 'map': N20A, N10
-
+  light: token('color.background.disabled', N10),
+  dark: token('color.background.disabled', DN10)
+};
 export var defaultBackgroundColor = {
-  light: N10,
-  dark: DN10
+  light: token('color.background.subtleBorderedNeutral.resting', N10),
+  dark: token('color.background.subtleBorderedNeutral.resting', DN10)
 };
 export var defaultBackgroundColorFocus = {
-  light: N0,
-  dark: DN10
+  light: token('color.background.default', N0),
+  dark: token('color.background.default', DN10)
 };
 export var defaultBackgroundColorHover = {
-  light: N30,
-  dark: DN30
+  light: token('color.background.default', N30),
+  dark: token('color.background.default', DN30)
 };
+export var subtleBackgroundColorHover = {
+  light: token('color.background.transparentNeutral.hover', N30),
+  dark: token('color.background.transparentNeutral.hover', DN30)
+};
 export var defaultBorderColor = {
-  light: N40,
-  dark: DN40
+  light: token('color.border.neutral', N40),
+  dark: token('color.border.neutral', DN40)
 };
 export var defaultBorderColorFocus = {
-  light: B100,
-  dark: B75
+  light: token('color.border.focus', B100),
+  dark: token('color.border.focus', B75)
 };
@@ -39,12 +36,12 @@ export var transparent = {
 export var textColor = {
-  light: N900,
-  dark: DN600
+  light: token('color.text.highEmphasis', N900),
+  dark: token('color.text.highEmphasis', DN600)
 };
 export var disabledTextColor = {
-  light: N70,
-  dark: DN90
+  light: token('color.text.disabled', N70),
+  dark: token('color.text.disabled', DN90)
 };
 export var placeholderTextColor = {
-  light: N100,
-  dark: DN90
+  light: token('color.text.lowEmphasis', N100),
+  dark: token('color.text.lowEmphasis', DN90)
 };

dist/esm/index.js

 export { default } from './text-field';
-export { TextFieldColors } from './styles';
+export { textFieldColors as TextFieldColors } from './styles';

dist/esm/styles.js

@@ -7,3 +7,5 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+import { R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import * as componentTokens from './component-tokens';
@@ -14,17 +16,11 @@ var fontSize = getFontSize();
   light: {
-    backgroundColor: componentTokens.defaultBackgroundColor.light,
-    backgroundColorFocus: componentTokens.disabledBackgroundColor.light,
+    backgroundColor: componentTokens.disabledBackgroundColor.light,
     backgroundColorHover: componentTokens.disabledBackgroundColor.light,
-    // same as bg, appears as no border
-    borderColor: componentTokens.defaultBackgroundColor.light,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.light,
+    borderColor: componentTokens.disabledBackgroundColor.light,
     textColor: componentTokens.disabledTextColor.light
   },
   dark: {
-    backgroundColor: componentTokens.defaultBackgroundColor.dark,
-    backgroundColorFocus: componentTokens.disabledBackgroundColor.dark,
+    backgroundColor: componentTokens.disabledBackgroundColor.dark,
     backgroundColorHover: componentTokens.disabledBackgroundColor.dark,
-    // same as bg, appears as no border
-    borderColor: componentTokens.defaultBackgroundColor.dark,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.dark,
+    borderColor: componentTokens.disabledBackgroundColor.dark,
     textColor: componentTokens.disabledTextColor.dark
@@ -35,13 +31,17 @@ }
   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,
-    backgroundColorHover: componentTokens.defaultBackgroundColorHover.light,
-    borderColor: componentTokens.invalidBorderColor.light,
+    borderColor: token('color.iconBorder.danger', 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,
-    backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark,
-    borderColor: componentTokens.invalidBorderColor.dark,
+    borderColor: token('color.iconBorder.danger', R400),
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark
@@ -62,3 +62,3 @@ }
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.subtleBackgroundColorHover,
   none: componentTokens.transparent
@@ -96,11 +96,3 @@ };
     },
-    '&[data-disabled]:focus-within': {
-      backgroundColor: disabledRules[mode].backgroundColorFocus,
-      borderColor: disabledRules[mode].borderColorFocus
-    },
-    '&[data-disabled]:hover': {
-      backgroundColor: disabledRules[mode].backgroundColorHover
-    },
     '&[data-invalid]': {
-      backgroundColor: invalidRules[mode].backgroundColor,
       borderColor: invalidRules[mode].borderColor
@@ -112,5 +104,2 @@ },
     },
-    '&[data-invalid]:hover': {
-      backgroundColor: invalidRules[mode].backgroundColorHover
-    },
     '@media screen and (-ms-high-contrast: active)': {
@@ -211,4 +200,5 @@ '&[data-invalid]:focus-within': {
   };
-};
-export var TextFieldColors = {
+}; // TODO: Remove when removing legacy theming.
+
+export var textFieldColors = {
   backgroundColor: backgroundColor,
@@ -215,0 +205,0 @@ backgroundColorFocus: backgroundColorFocus,

dist/esm/text-field.js

@@ -14,3 +14,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
@@ -20,7 +20,5 @@ var analyticsParams = {
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.0.5"
+  packageVersion: "5.1.0"
 };
-var TextfieldWithMode = /*#__PURE__*/forwardRef(function (props, ref) {
-  var input = useRef(null);
-
+var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
@@ -41,3 +39,2 @@ appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
       width = props.width,
-      mode = props.mode,
       elemAfterInput = props.elemAfterInput,
@@ -50,4 +47,9 @@ elemBeforeInput = props.elemBeforeInput,
       className = props.className,
-      otherProps = _objectWithoutProperties(props, ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "mode", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"]);
+      spreadProps = _objectWithoutProperties(props, ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"]);
 
+  var inputRef = useRef(null);
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
   var handleOnFocus = usePlatformLeafEventHandler(_objectSpread({
@@ -66,3 +68,3 @@ fn: function fn(event) {
   var handleOnMouseDown = useCallback(function (event) {
-    /** Running e.preventDefault() on the INPUT prevents double click behaviour */
+    // Running e.preventDefault() on the INPUT prevents double click behaviour
     // Sadly we needed this cast as the target type is being correctly set
@@ -75,38 +77,27 @@ var target = event.target;
 
-    if (input && input.current && !isDisabled && document.activeElement !== input.current) {
-      input.current.focus();
+    if (inputRef && inputRef.current && !isDisabled && document.activeElement !== inputRef.current) {
+      inputRef.current.focus();
     }
 
     onMouseDown && onMouseDown(event);
-  }, [onMouseDown, input, isDisabled]); // we want to keep a copy of the ref as well as pass it along
-
+  }, [onMouseDown, isDisabled]);
   var setInputRef = useCallback(function (inputElement) {
-    input.current = inputElement;
-    var forwardedRef = ref;
+    inputRef.current = inputElement;
 
-    if (!forwardedRef) {
+    if (!ref) {
       return;
     }
 
-    if (_typeof(forwardedRef) === 'object') {
+    if (_typeof(ref) === 'object') {
       // This is a blunder on the part of @types/react
       // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
       // .current should be assignable
-      // @ts-ignore
-      forwardedRef.current = inputElement;
+      // @ts-expect-error
+      ref.current = inputElement;
     }
 
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(inputElement);
+    if (typeof ref === 'function') {
+      ref(inputElement);
     }
   }, [ref]);
-  var inputControlProps = {
-    'data-compact': isCompact ? isCompact : undefined,
-    'data-monospaced': isMonospaced ? isMonospaced : undefined,
-    'aria-invalid': isInvalid ? isInvalid : undefined
-  };
-  var containerControlProps = {
-    'data-disabled': isDisabled ? isDisabled : undefined,
-    'data-invalid': isInvalid ? isInvalid : undefined
-  };
   var containerStyles = useMemo(function () {
@@ -118,11 +109,20 @@ return getContainerStyles(appearance, mode, width);
   }, [mode]);
-  return (// https://product-fabric.atlassian.net/browse/DST-1970
+  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
-    jsx("div", _extends({}, containerControlProps, {
-      onMouseDown: handleOnMouseDown,
+    jsx("div", {
+      "data-disabled": isDisabled ? isDisabled : undefined,
+      "data-invalid": isInvalid ? isInvalid : undefined,
       "data-ds--text-field--container": true,
       "data-testid": testId && "".concat(testId, "-container"),
+      onMouseDown: handleOnMouseDown // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: containerStyles,
       className: className
-    }), elemBeforeInput, jsx("input", _extends({}, otherProps, inputControlProps, {
+    }, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
+      "data-compact": isCompact ? isCompact : undefined,
+      "data-monospaced": isMonospaced ? isMonospaced : undefined,
+      "data-ds--text-field--input": true,
+      "data-testid": testId,
+      "aria-invalid": isInvalid ? isInvalid : undefined,
       disabled: isDisabled,
@@ -133,5 +133,5 @@ readOnly: isReadOnly,
       onFocus: handleOnFocus,
-      ref: setInputRef,
-      "data-ds--text-field--input": true,
-      "data-testid": testId,
+      ref: setInputRef // TODO: When removing legacy theming fix this.
+      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: inputStyle
@@ -141,12 +141,14 @@ })), elemAfterInput)
 });
-var Textfield = /*#__PURE__*/forwardRef(function Textfield(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, function (_ref) {
-    var mode = _ref.mode;
-    return jsx(TextfieldWithMode, _extends({}, props, {
-      mode: mode,
-      ref: ref
-    }));
-  });
-});
 Textfield.displayName = 'Textfield';
-export default /*#__PURE__*/memo(Textfield);
+/**
+ * __Textfield__
+ *
+ * A text field is an input that allows a user to write or edit text.
+ *
+ * - [Examples](https://atlassian.design/components/textfield/examples)
+ * - [Code](https://atlassian.design/components/textfield/code)
+ * - [Usage](https://atlassian.design/components/textfield/usage)
+ */
+
+export default /*#__PURE__*/memo(Textfield); // The above generic is used to let ERTC know what props to extract.
+// See: https://github.com/atlassian/extract-react-types/issues/201

dist/esm/version.json

 {
 	"name": "@atlaskit/textfield",
-	"version": "5.0.5",
+	"version": "5.1.0",
 	"sideEffects": false
 }

dist/types/component-tokens.d.ts

 export declare const disabledBackgroundColor: {
-    light: string;
-    dark: string;
+    light: "var(--background-disabled)";
+    dark: "var(--background-disabled)";
 };
-export declare const invalidBorderColor: {
-    light: string;
-    dark: string;
-};
 export declare const defaultBackgroundColor: {
-    light: string;
-    dark: string;
+    light: "var(--background-subtleBorderedNeutral-resting)";
+    dark: "var(--background-subtleBorderedNeutral-resting)";
 };
 export declare const defaultBackgroundColorFocus: {
-    light: string;
-    dark: string;
+    light: "var(--background-default)";
+    dark: "var(--background-default)";
 };
 export declare const defaultBackgroundColorHover: {
-    light: string;
-    dark: string;
+    light: "var(--background-default)";
+    dark: "var(--background-default)";
 };
+export declare const subtleBackgroundColorHover: {
+    light: "var(--background-transparentNeutral-hover)";
+    dark: "var(--background-transparentNeutral-hover)";
+};
 export declare const defaultBorderColor: {
-    light: string;
-    dark: string;
+    light: "var(--border-neutral)";
+    dark: "var(--border-neutral)";
 };
 export declare const defaultBorderColorFocus: {
-    light: string;
-    dark: string;
+    light: "var(--border-focus)";
+    dark: "var(--border-focus)";
 };
@@ -34,12 +34,12 @@ export declare const transparent: {
 export declare const textColor: {
-    light: string;
-    dark: string;
+    light: "var(--text-highEmphasis)";
+    dark: "var(--text-highEmphasis)";
 };
 export declare const disabledTextColor: {
-    light: string;
-    dark: string;
+    light: "var(--text-disabled)";
+    dark: "var(--text-disabled)";
 };
 export declare const placeholderTextColor: {
-    light: string;
-    dark: string;
+    light: "var(--text-lowEmphasis)";
+    dark: "var(--text-lowEmphasis)";
 };

dist/types/index.d.ts

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

dist/types/styles.d.ts

@@ -1,11 +0,104 @@
-import { CSSObject } from '@emotion/core';
 import { ThemeModes } from '@atlaskit/theme/types';
 import { Appearance } from './types';
-export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number | undefined) => CSSObject;
-export declare const inputStyles: (mode: ThemeModes) => CSSObject;
-export declare const TextFieldColors: {
+export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number | undefined) => {
+    readonly borderRadius: 3;
+    readonly borderWidth: 2;
+    readonly borderStyle: "none" | "solid";
+    readonly boxSizing: "border-box";
+    readonly display: "flex";
+    readonly flex: "1 1 100%";
+    readonly fontSize: number;
+    readonly justifyContent: "space-between";
+    readonly maxWidth: string | number;
+    readonly overflow: "hidden";
+    readonly transition: "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out";
+    readonly wordWrap: "break-word";
+    readonly verticalAlign: "top";
+    readonly pointerEvents: "auto";
+    readonly backgroundColor: string;
+    readonly borderColor: string;
+    readonly color: "var(--text-highEmphasis)";
+    readonly cursor: string;
+    readonly '&:hover': {
+        backgroundColor: string;
+    };
+    readonly '&:focus-within': {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    readonly '&[data-disabled]': {
+        backgroundColor: "var(--background-disabled)";
+        borderColor: "var(--background-disabled)";
+        color: "var(--text-disabled)";
+        cursor: string;
+    };
+    readonly '&[data-invalid]': {
+        borderColor: "var(--iconBorder-danger)";
+    };
+    readonly '&[data-invalid]:focus-within': {
+        backgroundColor: "var(--background-default)";
+        borderColor: "var(--border-focus)";
+    };
+    readonly '@media screen and (-ms-high-contrast: active)': {
+        '&[data-invalid]:focus-within': {
+            borderColor: string;
+        };
+        '&:focus-within': {
+            borderColor: string;
+        };
+        '&[data-disabled]': {
+            borderColor: string;
+        };
+    };
+    readonly alignItems: "center";
+};
+export declare const inputStyles: (mode: ThemeModes) => {
+    readonly backgroundColor: "transparent";
+    readonly border: 0;
+    readonly boxSizing: "border-box";
+    readonly color: "inherit";
+    readonly cursor: "inherit";
+    readonly fontSize: number;
+    readonly minWidth: "0";
+    readonly outline: "none";
+    readonly width: "100%";
+    readonly lineHeight: number;
+    readonly fontFamily: string;
+    readonly '&[data-monospaced]': {
+        readonly fontFamily: string;
+    };
+    readonly '&[data-compact]': {
+        readonly padding: string;
+        readonly height: string;
+    };
+    readonly '&:not([data-compact])': {
+        readonly padding: string;
+        readonly height: string;
+    };
+    readonly '&[disabled]': {
+        readonly WebkitTextFillColor: "var(--text-disabled)";
+    };
+    readonly '&::-ms-clear': {
+        readonly display: "none";
+    };
+    readonly '&:invalid': {
+        readonly boxShadow: "none";
+    };
+    readonly '&::placeholder': {
+        readonly color: "var(--text-lowEmphasis)";
+        readonly '&:disabled': {
+            readonly color: "var(--text-disabled)";
+        };
+    };
+    readonly '@media screen and (-ms-high-contrast: active)': {
+        readonly '&[disabled]': {
+            readonly color: "GrayText";
+        };
+    };
+};
+export declare const textFieldColors: {
     backgroundColor: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--background-subtleBorderedNeutral-resting)";
+            dark: "var(--background-subtleBorderedNeutral-resting)";
         };
@@ -23,8 +116,8 @@ subtle: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--background-default)";
+            dark: "var(--background-default)";
         };
         subtle: {
-            light: string;
-            dark: string;
+            light: "var(--background-default)";
+            dark: "var(--background-default)";
         };
@@ -38,8 +131,8 @@ none: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--background-default)";
+            dark: "var(--background-default)";
         };
         subtle: {
-            light: string;
-            dark: string;
+            light: "var(--background-transparentNeutral-hover)";
+            dark: "var(--background-transparentNeutral-hover)";
         };
@@ -53,4 +146,4 @@ none: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--border-neutral)";
+            dark: "var(--border-neutral)";
         };
@@ -68,8 +161,8 @@ subtle: {
         standard: {
-            light: string;
-            dark: string;
+            light: "var(--border-focus)";
+            dark: "var(--border-focus)";
         };
         subtle: {
-            light: string;
-            dark: string;
+            light: "var(--border-focus)";
+            dark: "var(--border-focus)";
         };
@@ -82,23 +175,23 @@ none: {
     placeholderTextColor: {
-        light: string;
-        dark: string;
+        light: "var(--text-lowEmphasis)";
+        dark: "var(--text-lowEmphasis)";
     };
     textColor: {
-        light: string;
-        dark: string;
+        light: "var(--text-highEmphasis)";
+        dark: "var(--text-highEmphasis)";
     };
     invalidRules: {
         light: {
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
-            borderColor: string;
-            borderColorFocus: string;
+            backgroundColor: "var(--background-subtleBorderedNeutral-resting)";
+            backgroundColorHover: "var(--background-default)";
+            backgroundColorFocus: "var(--background-default)";
+            borderColor: "var(--iconBorder-danger)";
+            borderColorFocus: "var(--border-focus)";
         };
         dark: {
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
-            borderColor: string;
-            borderColorFocus: string;
+            backgroundColor: "var(--background-subtleBorderedNeutral-resting)";
+            backgroundColorHover: "var(--background-default)";
+            backgroundColorFocus: "var(--background-default)";
+            borderColor: "var(--iconBorder-danger)";
+            borderColorFocus: "var(--border-focus)";
         };
@@ -108,18 +201,14 @@ };
         light: {
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
-            borderColor: string;
-            borderColorFocus: string;
-            textColor: string;
+            backgroundColor: "var(--background-disabled)";
+            backgroundColorHover: "var(--background-disabled)";
+            borderColor: "var(--background-disabled)";
+            textColor: "var(--text-disabled)";
         };
         dark: {
-            backgroundColor: string;
-            backgroundColorFocus: string;
-            backgroundColorHover: string;
-            borderColor: string;
-            borderColorFocus: string;
-            textColor: string;
+            backgroundColor: "var(--background-disabled)";
+            backgroundColorHover: "var(--background-disabled)";
+            borderColor: "var(--background-disabled)";
+            textColor: "var(--text-disabled)";
         };
     };
 };

dist/types/text-field.d.ts

 /** @jsx jsx */
 import React from 'react';
-import { PublicProps } from './types';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<PublicProps, "appearance" | "color" | "content" | "height" | "width" | "start" | "hidden" | "default" | "isCompact" | "isDisabled" | "isInvalid" | "isMonospaced" | "isReadOnly" | "isRequired" | "elemAfterInput" | "elemBeforeInput" | "onMouseDown" | "testId" | "name" | "className" | "placeholder" | "onChange" | "createAnalyticsEvent" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & React.RefAttributes<any>>>;
+import { TextfieldProps } from './types';
+declare const _default: React.NamedExoticComponent<TextfieldProps & React.RefAttributes<unknown>>;
+/**
+ * __Textfield__
+ *
+ * A text field is an input that allows a user to write or edit text.
+ *
+ * - [Examples](https://atlassian.design/components/textfield/examples)
+ * - [Code](https://atlassian.design/components/textfield/code)
+ * - [Usage](https://atlassian.design/components/textfield/usage)
+ */
 export default _default;

dist/types/types.d.ts

 import React, { AllHTMLAttributes, FormEventHandler } from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { ThemeModes } from '@atlaskit/theme/types';
-export interface PublicProps extends WithAnalyticsEventsProps, AllHTMLAttributes<HTMLInputElement> {
+export interface TextfieldProps extends AllHTMLAttributes<HTMLInputElement> {
     /**
@@ -73,5 +71,2 @@ * Affects the visual style of the text field.
 }
-export interface InternalProps extends PublicProps {
-    mode: ThemeModes;
-}
 export declare type Appearance = 'subtle' | 'standard' | 'none';

package.json

 {
   "name": "@atlaskit/textfield",
-  "version": "5.0.5",
+  "version": "5.1.0",
   "description": "A text field is an input that allows a user to write or edit text.",
@@ -16,3 +16,3 @@ "publishConfig": {
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -27,7 +27,8 @@ "team": "Design System Team",
   "af:exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.tsx"
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/theme": "^11.3.0",
+    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/tokens": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -40,8 +41,9 @@ "@emotion/core": "^10.0.9"
   "devDependencies": {
-    "@atlaskit/avatar": "^20.1.0",
+    "@atlaskit/avatar": "^20.4.0",
     "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^15.1.0",
+    "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/form": "^8.1.0",
+    "@atlaskit/form": "^8.3.0",
     "@atlaskit/icon": "^21.7.0",
+    "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
@@ -70,14 +72,8 @@ "@atlaskit/toggle": "^12.0.0",
     "@repo/internal": {
-      "ui-components": [
-        "lite-mode"
-      ],
-      "analytics": [
-        "analytics-next"
-      ],
-      "theming": [
-        "new-theming-api"
-      ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ]
+      "ui-components": "lite-mode",
+      "styling": "emotion",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "design-system": "v1",
+      "deprecation": "no-deprecated-imports"
     }
@@ -84,0 +80,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

109950

increased by0.38%

Lines of code

2307

increased by1.72%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

19

increased by5.56%

Number of package files

38

decreased by-2.56%

Dependency changes

• + Added@atlaskit/tokens@^0.1.0

• + Added@atlaskit/tokens@0.1.1(transitive)

• Updated@atlaskit/theme@^11.4.0