@atlaskit/textfield 5.0.5 → 5.1.3

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/textfield
 
+## 5.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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
 
 ### Patch Changes

package/codemods/{5.0.0-lite-mode.ts → 5.0.0-lite-mode.tsx}

@@ -4,7 +4,7 @@ import {
   renameThemeAppearanceImport,
   renamethemeTokensImport,
 } from './migrations/rename-imports';
-import { createTransformer } from './utils';
+import { createTransformer } from './migrations/utils';
 
 const transformer = createTransformer('@atlaskit/textfield', [
   removeThemeProp,

package/codemods/__tests__/remove-imports.tsx

@@ -1,7 +1,7 @@
 jest.autoMockOff();
 
 import { removeThemeImports } from '../migrations/remove-imports';
-import { createTransformer } from '../utils';
+import { createTransformer } from '../migrations/utils';
 
 const transformer = createTransformer('@atlaskit/textfield', [
   removeThemeImports,

package/codemods/__tests__/remove-prop.tsx

@@ -1,7 +1,7 @@
 jest.autoMockOff();
 
 import { removeThemeProp } from '../migrations/remove-props';
-import { createTransformer } from '../utils';
+import { createTransformer } from '../migrations/utils';
 
 const transformer = createTransformer('@atlaskit/textfield', [removeThemeProp]);
 

package/codemods/__tests__/rename-imports.tsx

@@ -4,7 +4,7 @@ import {
   renameThemeAppearanceImport,
   renamethemeTokensImport,
 } from '../migrations/rename-imports';
-import { createTransformer } from '../utils';
+import { createTransformer } from '../migrations/utils';
 
 const transformer = createTransformer('@atlaskit/textfield', [
   renamethemeTokensImport,

package/codemods/migrations/{remove-imports.ts → remove-imports.tsx}

@@ -1,4 +1,4 @@
-import { createRemoveImportsFor } from '../utils';
+import { createRemoveImportsFor } from './utils';
 
 export const removeThemeImports = createRemoveImportsFor({
   importsToRemove: ['ThemeProps', 'ThemeTokens', 'Theme'],

package/codemods/migrations/{remove-props.ts → remove-props.tsx}

@@ -1,4 +1,4 @@
-import { createRemoveFuncFor } from '../utils';
+import { createRemoveFuncFor } from './utils';
 
 const component = '@atlaskit/textfield';
 const prop = 'theme';

package/codemods/migrations/{rename-imports.ts → rename-imports.tsx}

@@ -1,4 +1,4 @@
-import { createRenameJSXFunc } from '../utils';
+import { createRenameJSXFunc } from './utils';
 
 export const renamethemeTokensImport = createRenameJSXFunc(
   '@atlaskit/textfield',

package/dist/cjs/component-tokens.js

@@ -3,47 +3,45 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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 disabledBackgroundColor = {
-  light: _colors.N20,
-  dark: _colors.DN20
-}; // For validation red is the new 'yellow' which was { light: Y300, dark: Y300 }
+var _tokens = require("@atlaskit/tokens");
 
+var disabledBackgroundColor = {
+  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)
 };
 exports.defaultBorderColorFocus = defaultBorderColorFocus;
 var transparent = {
@@ -52,17 +50,17 @@ var transparent = {
 };
 exports.transparent = transparent;
 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;

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "default", {
 Object.defineProperty(exports, "TextFieldColors", {
   enumerable: true,
   get: function get() {
-    return _styles.TextFieldColors;
+    return _styles.textFieldColors;
   }
 });
 

package/dist/cjs/styles.js

@@ -7,12 +7,16 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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"));
 
 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); }
@@ -27,37 +31,35 @@ var fontSize = (0, _constants.fontSize)();
 var gridSize = (0, _constants.gridSize)();
 var disabledRules = {
   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
   }
 };
 var invalidRules = {
   light: {
+    // ----
     backgroundColor: componentTokens.defaultBackgroundColor.light,
-    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.light,
     backgroundColorHover: componentTokens.defaultBackgroundColorHover.light,
-    borderColor: componentTokens.invalidBorderColor.light,
+    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
+    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.light,
+    borderColor: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
     borderColorFocus: componentTokens.defaultBorderColorFocus.light
   },
   dark: {
+    // ----
     backgroundColor: componentTokens.defaultBackgroundColor.dark,
-    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
     backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark,
-    borderColor: componentTokens.invalidBorderColor.dark,
+    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
+    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
+    borderColor: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark
   }
 };
@@ -73,7 +75,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
+  subtle: componentTokens.subtleBackgroundColorHover,
   none: componentTokens.transparent
 };
 var borderColor = {
@@ -106,24 +108,13 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
       color: disabledRules[mode].textColor,
       cursor: 'not-allowed'
     },
-    '&[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
     },
     '&[data-invalid]:focus-within': {
       backgroundColor: invalidRules[mode].backgroundColorFocus,
       borderColor: invalidRules[mode].borderColorFocus
     },
-    '&[data-invalid]:hover': {
-      backgroundColor: invalidRules[mode].backgroundColorHover
-    },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
         borderColor: 'Highlight'
@@ -222,10 +213,11 @@ var inputStyles = function inputStyles(mode) {
       }
     }
   };
-};
+}; // TODO: Remove when removing legacy theming.
+
 
 exports.inputStyles = inputStyles;
-var TextFieldColors = {
+var textFieldColors = {
   backgroundColor: backgroundColor,
   backgroundColorFocus: backgroundColorFocus,
   backgroundColorHover: backgroundColorHover,
@@ -236,4 +228,4 @@ var TextFieldColors = {
   invalidRules: invalidRules,
   disabledRules: disabledRules
 };
-exports.TextFieldColors = TextFieldColors;
+exports.textFieldColors = textFieldColors;

package/dist/cjs/text-field.js

@@ -23,7 +23,7 @@ var _core = require("@emotion/core");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+var _components = require("@atlaskit/theme/components");
 
 var _styles = require("./styles");
 
@@ -38,10 +38,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.0.5"
+  packageVersion: "5.1.3"
 };
-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,
       appearance = _props$appearance === void 0 ? 'standard' : _props$appearance,
       _props$isCompact = props.isCompact,
@@ -57,7 +56,6 @@ var TextfieldWithMode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
       _props$isMonospaced = props.isMonospaced,
       isMonospaced = _props$isMonospaced === void 0 ? false : _props$isMonospaced,
       width = props.width,
-      mode = props.mode,
       elemAfterInput = props.elemAfterInput,
       elemBeforeInput = props.elemBeforeInput,
       testId = props.testId,
@@ -65,7 +63,12 @@ var TextfieldWithMode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
       onBlur = props.onBlur,
       onMouseDown = props.onMouseDown,
       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({
     fn: function fn(event) {
       onFocus && onFocus(event);
@@ -79,7 +82,7 @@ var TextfieldWithMode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
     action: 'blurred'
   }, analyticsParams));
   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
     var target = event.target;
 
@@ -87,80 +90,80 @@ var TextfieldWithMode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
       event.preventDefault();
     }
 
-    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 () {
     return (0, _styles.containerStyles)(appearance, mode, width);
   }, [appearance, mode, width]);
   var inputStyle = (0, _react.useMemo)(function () {
     return (0, _styles.inputStyles)(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
-    (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,
       readOnly: isReadOnly,
       required: isRequired,
       onBlur: handleOnBlur,
       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
     })), 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); // The above generic is used to let ERTC know what props to extract.
+// See: https://github.com/atlassian/extract-react-types/issues/201
 
-var _default = /*#__PURE__*/(0, _react.memo)(Textfield);
 
 exports.default = _default;

package/dist/cjs/version.json

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

package/dist/es2019/component-tokens.js

@@ -1,49 +1,46 @@
-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)
 };
 export const transparent = {
   light: 'transparent',
   dark: '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)
 };

package/dist/es2019/index.js

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