@atlaskit/textfield - npm Package Compare versions

Comparing version 5.6.8 to 6.0.0

CHANGELOG.md

 # @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
@@ -4,0 +10,0 @@

dist/cjs/index.js

@@ -7,8 +7,2 @@ "use strict";
 });
-Object.defineProperty(exports, "TextFieldColors", {
-  enumerable: true,
-  get: function get() {
-    return _styles.textFieldColors;
-  }
-});
 Object.defineProperty(exports, "default", {
@@ -20,3 +14,2 @@ enumerable: true,
 });
-var _textField = _interopRequireDefault(require("./text-field"));
-var _styles = require("./styles");
+var _textField = _interopRequireDefault(require("./text-field"));

dist/cjs/styles.js

 "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"));
@@ -13,5 +12,2 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
@@ -21,96 +17,62 @@ 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 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
     },
@@ -140,6 +102,6 @@ '@media screen and (-ms-high-contrast: active)': {
 };
-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,
@@ -164,4 +126,3 @@ borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2
 };
-exports.containerStyles = containerStyles;
-var inputStyles = function inputStyles(mode) {
+var inputStyles = exports.inputStyles = function inputStyles() {
   return {
@@ -194,3 +155,3 @@ backgroundColor: 'transparent',
       // override it with the color we want.
-      WebkitTextFillColor: disabledRules[mode].textColor
+      WebkitTextFillColor: "var(--ds-text-disabled, ".concat(_colors.N70, ")")
     },
@@ -208,5 +169,5 @@ // Hide the clear indicator on Edge (Windows only)
     '&::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, ")")
       }
@@ -220,18 +181,2 @@ },
   };
-};
-
-// 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;
+};

dist/cjs/text-field.js

@@ -16,3 +16,2 @@ "use strict";
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _components = require("@atlaskit/theme/components");
 var _styles = require("./styles");
@@ -28,3 +27,3 @@ var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.8"
+  packageVersion: "6.0.0"
 };
@@ -59,4 +58,2 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var inputRef = (0, _react.useRef)(null);
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   var handleOnFocus = (0, _analyticsNext.usePlatformLeafEventHandler)(_objectSpread({
@@ -99,7 +96,5 @@ fn: function fn(event) {
   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 (
@@ -158,4 +153,3 @@ /**
  */
-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

dist/es2019/index.js

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

dist/es2019/styles.js

 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',
@@ -93,14 +58,14 @@ // Disabled background and border styles should not be applied to components that
     ...(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
   },
@@ -127,5 +92,5 @@ '@media screen and (-ms-high-contrast: active)': {
 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,
@@ -150,3 +115,3 @@ borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
 });
-export const inputStyles = mode => ({
+export const inputStyles = () => ({
   backgroundColor: 'transparent',
@@ -178,3 +143,3 @@ border: 0,
     // override it with the color we want.
-    WebkitTextFillColor: disabledRules[mode].textColor
+    WebkitTextFillColor: `var(--ds-text-disabled, ${N70})`
   },
@@ -192,5 +157,5 @@ // Hide the clear indicator on Edge (Windows only)
   '&::placeholder': {
-    color: componentTokens.placeholderTextColor[mode],
+    color: `var(--ds-text-subtlest, ${N200})`,
     '&:disabled': {
-      color: disabledRules[mode].textColor
+      color: `var(--ds-text-disabled, ${N70})`
     }
@@ -203,16 +168,2 @@ },
   }
-});
-
-// TODO: Remove when removing legacy theming.
-export const textFieldColors = {
-  backgroundColor,
-  backgroundColorFocus,
-  backgroundColorHover,
-  borderColor,
-  borderColorFocus,
-  borderColorHover,
-  placeholderTextColor: componentTokens.placeholderTextColor,
-  textColor: componentTokens.textColor,
-  invalidRules,
-  disabledRules
-};
+});

dist/es2019/text-field.js

@@ -6,3 +6,2 @@ import _extends from "@babel/runtime/helpers/extends";
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
@@ -12,3 +11,3 @@ const analyticsParams = {
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.8"
+  packageVersion: "6.0.0"
 };
@@ -38,5 +37,2 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const inputRef = useRef(null);
-  const {
-    mode
-  } = useGlobalTheme();
   const handleOnFocus = usePlatformLeafEventHandler({
@@ -80,4 +76,4 @@ fn: event => {
   }, [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 (
@@ -84,0 +80,0 @@ /**

dist/esm/index.js

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

dist/esm/styles.js

@@ -5,103 +5,68 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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
     },
@@ -131,6 +96,6 @@ '@media screen and (-ms-high-contrast: active)': {
 };
-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,
@@ -155,3 +120,3 @@ borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2
 };
-export var inputStyles = function inputStyles(mode) {
+export var inputStyles = function inputStyles() {
   return {
@@ -184,3 +149,3 @@ backgroundColor: 'transparent',
       // override it with the color we want.
-      WebkitTextFillColor: disabledRules[mode].textColor
+      WebkitTextFillColor: "var(--ds-text-disabled, ".concat(N70, ")")
     },
@@ -198,5 +163,5 @@ // Hide the clear indicator on Edge (Windows only)
     '&::placeholder': {
-      color: componentTokens.placeholderTextColor[mode],
+      color: "var(--ds-text-subtlest, ".concat(N200, ")"),
       '&:disabled': {
-        color: disabledRules[mode].textColor
+        color: "var(--ds-text-disabled, ".concat(N70, ")")
       }
@@ -210,16 +175,2 @@ },
   };
-};
-
-// 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
 };

dist/esm/text-field.js

@@ -12,3 +12,2 @@ import _extends from "@babel/runtime/helpers/extends";
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
@@ -18,3 +17,3 @@ var analyticsParams = {
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.8"
+  packageVersion: "6.0.0"
 };
@@ -49,4 +48,2 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var inputRef = useRef(null);
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   var handleOnFocus = usePlatformLeafEventHandler(_objectSpread({
@@ -89,7 +86,5 @@ fn: function fn(event) {
   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 (
@@ -96,0 +91,0 @@ /**

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

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

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

@@ -1,4 +0,3 @@
-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";
@@ -60,3 +59,3 @@ readonly boxSizing: "border-box";
 };
-export declare const inputStyles: (mode: ThemeModes) => {
+export declare const inputStyles: () => {
     readonly backgroundColor: "transparent";
@@ -108,125 +107,1 @@ readonly border: 0;
 };
-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)";
-        };
-    };
-};

dist/types/index.d.ts

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

dist/types/styles.d.ts

@@ -1,4 +0,3 @@
-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";
@@ -60,3 +59,3 @@ readonly boxSizing: "border-box";
 };
-export declare const inputStyles: (mode: ThemeModes) => {
+export declare const inputStyles: () => {
     readonly backgroundColor: "transparent";
@@ -108,125 +107,1 @@ readonly border: 0;
 };
-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.json

 {
   "name": "@atlaskit/textfield",
-  "version": "5.6.8",
+  "version": "6.0.0",
   "description": "A text field is an input that allows a user to write or edit text.",
@@ -32,3 +32,3 @@ "publishConfig": {
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
@@ -42,2 +42,3 @@ "@emotion/react": "^11.7.1"
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
@@ -102,2 +103,2 @@ "@atlaskit/codemod-utils": "^4.2.3",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

report.api.md

@@ -32,128 +32,2 @@ <!-- API Report Version: 2.3 -->
 // @public (undocumented)
-export 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)';
-    };
-  };
-};
-
-// @public (undocumented)
 export interface TextFieldProps
@@ -160,0 +34,0 @@ extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {

tmp/api-report-tmp.d.ts

@@ -19,128 +19,2 @@ ## API Report File for "@atlaskit/textfield"
 // @public (undocumented)
-export 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)";
-        };
-    };
-};
-
-// @public (undocumented)
 export interface TextFieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
@@ -147,0 +21,0 @@ appearance?: Appearance;

No alert changes

Worsened metrics

Total package byte prevSize

120293

decreased by-20.64%

Dev dependency count

17

increased by6.25%

Number of package files

40

decreased by-11.11%

Lines of code

2272

decreased by-25.9%

Dependency changes

• Updated@atlaskit/tokens@^1.28.0