@atlaskit/textfield 5.6.8 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/textfield
 
+## 6.0.0
+
+### Major Changes
+
+- [#42569](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42569) [`df6d526f3c8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df6d526f3c8) - Removed all remaining legacy theming logic from the TextField component.
+
 ## 5.6.8
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -4,17 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "TextFieldColors", {
-  enumerable: true,
-  get: function get() {
-    return _styles.textFieldColors;
-  }
-});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _textField.default;
   }
 });
-var _textField = _interopRequireDefault(require("./text-field"));
-var _styles = require("./styles");
+var _textField = _interopRequireDefault(require("./text-field"));

package/dist/cjs/styles.js

@@ -1,116 +1,78 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.textFieldColors = exports.inputStyles = exports.containerStyles = void 0;
+exports.inputStyles = exports.containerStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
-var componentTokens = _interopRequireWildcard(require("./component-tokens"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var fontSize = (0, _constants.fontSize)();
 var gridSize = (0, _constants.gridSize)();
-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(_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,
-    borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")"),
-    borderColorFocus: componentTokens.defaultBorderColorFocus.dark
-  }
-};
 var backgroundColor = {
-  standard: componentTokens.defaultBackgroundColor,
-  subtle: componentTokens.transparent,
-  none: componentTokens.transparent
+  standard: "var(--ds-background-input, ".concat(_colors.N10, ")"),
+  subtle: 'transparent',
+  none: 'transparent'
 };
 var backgroundColorFocus = {
-  standard: componentTokens.defaultBackgroundColorFocus,
-  subtle: componentTokens.defaultBackgroundColorFocus,
-  none: componentTokens.transparent
+  standard: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
+  subtle: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
+  none: 'transparent'
 };
 var backgroundColorHover = {
-  standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
-  none: componentTokens.transparent
+  standard: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
+  subtle: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
+  none: 'transparent'
 };
 var borderColor = {
-  standard: componentTokens.defaultBorderColor,
-  subtle: componentTokens.transparent,
-  none: componentTokens.transparent
+  standard: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
+  subtle: 'transparent',
+  none: 'transparent'
 };
 var borderColorFocus = {
-  standard: componentTokens.defaultBorderColorFocus,
-  subtle: componentTokens.defaultBorderColorFocus,
-  none: componentTokens.transparent
+  standard: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
+  subtle: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
+  none: 'transparent'
 };
 var borderColorHover = {
-  standard: componentTokens.defaultBorderColor,
-  subtle: componentTokens.subtleBorderColorHover,
-  none: componentTokens.transparent
+  standard: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.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(_colors.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: (0, _platformFeatureFlags.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: (0, _platformFeatureFlags.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(_colors.N70, ")"),
       cursor: 'not-allowed'
     }, appearance === 'standard' && {
-      backgroundColor: disabledRules[mode].backgroundColor,
-      borderColor: disabledRules[mode].borderColor
+      backgroundColor: "var(--ds-background-disabled, ".concat(_colors.N10, ")"),
+      borderColor: "var(--ds-background-disabled, ".concat(_colors.N10, ")")
     }),
     '&[data-invalid], &[data-invalid]:hover': {
-      borderColor: invalidRules[mode].borderColor,
-      boxShadow: (0, _platformFeatureFlags.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(_colors.R400, ")"),
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")")) : undefined
     },
     '&[data-invalid]:focus-within': {
-      backgroundColor: invalidRules[mode].backgroundColorFocus,
-      borderColor: invalidRules[mode].borderColorFocus,
-      boxShadow: (0, _platformFeatureFlags.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(_colors.N0, ")"),
+      borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")")) : undefined
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -135,10 +97,10 @@ var widthMap = {
 var getMaxWidth = function getMaxWidth(width) {
   return !width ? "100%" : width in widthMap ? widthMap[width] : +width;
 };
-var containerStyles = function containerStyles(appearance, mode, width) {
+var containerStyles = exports.containerStyles = function containerStyles(appearance, width) {
   return _objectSpread(_objectSpread(_objectSpread({
     alignItems: 'center'
-  }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
+  }, getContainerTextBgAndBorderColor(appearance)), {}, {
     borderRadius: 3,
     borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? {
@@ -158,8 +120,7 @@ var containerStyles = function containerStyles(appearance, mode, width) {
     pointerEvents: 'auto'
   });
 };
-exports.containerStyles = containerStyles;
-var inputStyles = function inputStyles(mode) {
+var inputStyles = exports.inputStyles = function inputStyles() {
   return {
     backgroundColor: 'transparent',
     border: 0,
@@ -187,7 +148,7 @@ 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(_colors.N70, ")")
     },
     // Hide the clear indicator on Edge (Windows only)
     '&::-ms-clear': {
@@ -200,9 +161,9 @@ var inputStyles = function inputStyles(mode) {
       textOverflow: 'ellipsis'
     },
     '&::placeholder': {
-      color: componentTokens.placeholderTextColor[mode],
+      color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
       '&:disabled': {
-        color: disabledRules[mode].textColor
+        color: "var(--ds-text-disabled, ".concat(_colors.N70, ")")
       }
     },
     '@media screen and (-ms-high-contrast: active)': {
@@ -211,20 +172,4 @@ var inputStyles = function inputStyles(mode) {
       }
     }
   };
-};
-
-// TODO: Remove when removing legacy theming.
-exports.inputStyles = inputStyles;
-var textFieldColors = {
-  backgroundColor: backgroundColor,
-  backgroundColorFocus: backgroundColorFocus,
-  backgroundColorHover: backgroundColorHover,
-  borderColor: borderColor,
-  borderColorFocus: borderColorFocus,
-  borderColorHover: borderColorHover,
-  placeholderTextColor: componentTokens.placeholderTextColor,
-  textColor: componentTokens.textColor,
-  invalidRules: invalidRules,
-  disabledRules: disabledRules
-};
-exports.textFieldColors = textFieldColors;
+};

package/dist/cjs/text-field.js

@@ -13,7 +13,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _components = require("@atlaskit/theme/components");
 var _styles = require("./styles");
 var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
 /** @jsx jsx */
@@ -24,7 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.8"
+  packageVersion: "6.0.0"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,
@@ -54,8 +53,6 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     width = props.width,
     spreadProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var inputRef = (0, _react.useRef)(null);
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   var handleOnFocus = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
     fn: function fn(event) {
       onFocus && onFocus(event);
@@ -93,11 +90,9 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, [ref]);
   var containerStyles = (0, _react.useMemo)(function () {
-    return (0, _styles.containerStyles)(appearance, mode, width);
-  }, [appearance, mode, width]);
-  var inputStyle = (0, _react.useMemo)(function () {
-    return (0, _styles.inputStyles)(mode);
-  }, [mode]);
+    return (0, _styles.containerStyles)(appearance, width);
+  }, [appearance, width]);
+  var inputStyle = (0, _styles.inputStyles)();
   return (
     /**
      * It is not normally acceptable to add click and key handlers to
@@ -151,6 +146,5 @@ Textfield.displayName = 'Textfield';
  * - [Code](https://atlassian.design/components/textfield/code)
  * - [Usage](https://atlassian.design/components/textfield/usage)
  */
-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;
+var _default = exports.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

package/dist/es2019/index.js

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

package/dist/es2019/styles.js

@@ -1,107 +1,72 @@
 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';
 const fontSize = getFontSize();
 const gridSize = getGridSize();
-const 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
-  }
-};
-const 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, ${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, ${R400})`,
-    borderColorFocus: componentTokens.defaultBorderColorFocus.dark
-  }
-};
 const backgroundColor = {
-  standard: componentTokens.defaultBackgroundColor,
-  subtle: componentTokens.transparent,
-  none: componentTokens.transparent
+  standard: `var(--ds-background-input, ${N10})`,
+  subtle: 'transparent',
+  none: 'transparent'
 };
 const backgroundColorFocus = {
-  standard: componentTokens.defaultBackgroundColorFocus,
-  subtle: componentTokens.defaultBackgroundColorFocus,
-  none: componentTokens.transparent
+  standard: `var(--ds-background-input-pressed, ${N0})`,
+  subtle: `var(--ds-background-input-pressed, ${N0})`,
+  none: 'transparent'
 };
 const backgroundColorHover = {
-  standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
-  none: componentTokens.transparent
+  standard: `var(--ds-background-input-hovered, ${N30})`,
+  subtle: `var(--ds-background-input-hovered, ${N30})`,
+  none: 'transparent'
 };
 const borderColor = {
-  standard: componentTokens.defaultBorderColor,
-  subtle: componentTokens.transparent,
-  none: componentTokens.transparent
+  standard: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
+  subtle: 'transparent',
+  none: 'transparent'
 };
 const borderColorFocus = {
-  standard: componentTokens.defaultBorderColorFocus,
-  subtle: componentTokens.defaultBorderColorFocus,
-  none: componentTokens.transparent
+  standard: `var(--ds-border-focused, ${B200})`,
+  subtle: `var(--ds-border-focused, ${B200})`,
+  none: 'transparent'
 };
 const borderColorHover = {
-  standard: componentTokens.defaultBorderColor,
-  subtle: componentTokens.subtleBorderColorHover,
-  none: componentTokens.transparent
+  standard: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
+  subtle: "var(--ds-border-input, transparent)",
+  none: 'transparent'
 };
-const getContainerTextBgAndBorderColor = (appearance, mode) => ({
-  backgroundColor: backgroundColor[appearance][mode],
-  borderColor: borderColor[appearance][mode],
-  color: componentTokens.textColor[mode],
+const getContainerTextBgAndBorderColor = appearance => ({
+  backgroundColor: backgroundColor[appearance],
+  borderColor: borderColor[appearance],
+  color: `var(--ds-text, ${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 ${"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 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}` : undefined
   },
   '&[data-disabled]': {
-    color: disabledRules[mode].textColor,
+    color: `var(--ds-text-disabled, ${N70})`,
     cursor: 'not-allowed',
     // Disabled background and border styles should not be applied to components that
     // have either no background or transparent background to begin with
     ...(appearance === 'standard' && {
-      backgroundColor: disabledRules[mode].backgroundColor,
-      borderColor: disabledRules[mode].borderColor
+      backgroundColor: `var(--ds-background-disabled, ${N10})`,
+      borderColor: `var(--ds-background-disabled, ${N10})`
     })
   },
   '&[data-invalid], &[data-invalid]:hover': {
-    borderColor: invalidRules[mode].borderColor,
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules[mode].borderColor}` : undefined
+    borderColor: `var(--ds-border-danger, ${R400})`,
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${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 ${"var(--ds-border-width, 1px)"} ${invalidRules[mode].borderColorFocus}` : undefined
+    backgroundColor: `var(--ds-background-input-pressed, ${N0})`,
+    borderColor: `var(--ds-border-focused, ${B200})`,
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}` : undefined
   },
   '@media screen and (-ms-high-contrast: active)': {
     '&[data-invalid]:focus-within': {
@@ -123,9 +88,9 @@ const widthMap = {
   xlarge: 480
 };
 const getMaxWidth = width => !width ? `100%` : width in widthMap ? widthMap[width] : +width;
-export const containerStyles = (appearance, mode, width) => ({
+export const containerStyles = (appearance, width) => ({
   alignItems: 'center',
-  ...getContainerTextBgAndBorderColor(appearance, mode),
+  ...getContainerTextBgAndBorderColor(appearance),
   borderRadius: 3,
   borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
   // add 1px padding on both top and bottom to keep the same overall height after border reduced from 2px to 1px under feature flag
@@ -145,7 +110,7 @@ export const containerStyles = (appearance, mode, width) => ({
   verticalAlign: 'top',
   pointerEvents: 'auto'
 });
-export const inputStyles = mode => ({
+export const inputStyles = () => ({
   backgroundColor: 'transparent',
   border: 0,
   boxSizing: 'border-box',
@@ -172,7 +137,7 @@ export const 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, ${N70})`
   },
   // Hide the clear indicator on Edge (Windows only)
   '&::-ms-clear': {
@@ -185,9 +150,9 @@ export const inputStyles = mode => ({
     textOverflow: 'ellipsis'
   },
   '&::placeholder': {
-    color: componentTokens.placeholderTextColor[mode],
+    color: `var(--ds-text-subtlest, ${N200})`,
     '&:disabled': {
-      color: disabledRules[mode].textColor
+      color: `var(--ds-text-disabled, ${N70})`
     }
   },
   '@media screen and (-ms-high-contrast: active)': {
@@ -195,18 +160,4 @@ export const inputStyles = mode => ({
       color: 'GrayText'
     }
   }
-});
-
-// TODO: Remove when removing legacy theming.
-export const textFieldColors = {
-  backgroundColor,
-  backgroundColorFocus,
-  backgroundColorHover,
-  borderColor,
-  borderColorFocus,
-  borderColorHover,
-  placeholderTextColor: componentTokens.placeholderTextColor,
-  textColor: componentTokens.textColor,
-  invalidRules,
-  disabledRules
-};
+});

package/dist/es2019/text-field.js

@@ -3,12 +3,11 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.8"
+  packageVersion: "6.0.0"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -33,9 +32,6 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
     ...spreadProps
   } = props;
   const inputRef = useRef(null);
-  const {
-    mode
-  } = useGlobalTheme();
   const handleOnFocus = usePlatformLeafEventHandler({
     fn: event => {
       onFocus && onFocus(event);
@@ -74,8 +70,8 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
       ref(inputElement);
     }
   }, [ref]);
-  const containerStyles = useMemo(() => getContainerStyles(appearance, mode, width), [appearance, mode, width]);
-  const inputStyle = useMemo(() => getInputStyles(mode), [mode]);
+  const containerStyles = useMemo(() => getContainerStyles(appearance, width), [appearance, width]);
+  const inputStyle = getInputStyles();
   return (
     /**
      * It is not normally acceptable to add click and key handlers to

package/dist/esm/index.js

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