@atlaskit/textfield 5.1.2 → 5.1.6

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/textfield
 
+## 5.1.6
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
+## 5.1.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.1.4
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 5.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.1.2
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -3,45 +3,43 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placeholderTextColor = exports.disabledTextColor = exports.textColor = exports.transparent = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.subtleBackgroundColorHover = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = exports.disabledBackgroundColor = void 0;
+exports.transparent = exports.textColor = exports.subtleBackgroundColorHover = exports.placeholderTextColor = exports.disabledTextColor = exports.disabledBackgroundColor = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
-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)
+  light: "var(--ds-background-disabled, ".concat(_colors.N10, ")"),
+  dark: "var(--ds-background-disabled, ".concat(_colors.DN10, ")")
 };
 exports.disabledBackgroundColor = disabledBackgroundColor;
 var defaultBackgroundColor = {
-  light: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.N10),
-  dark: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.DN10)
+  light: "var(--ds-background-input, ".concat(_colors.N10, ")"),
+  dark: "var(--ds-background-input, ".concat(_colors.DN10, ")")
 };
 exports.defaultBackgroundColor = defaultBackgroundColor;
 var defaultBackgroundColorFocus = {
-  light: (0, _tokens.token)('color.background.default', _colors.N0),
-  dark: (0, _tokens.token)('color.background.default', _colors.DN10)
+  light: "var(--ds-surface, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
 };
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
 var defaultBackgroundColorHover = {
-  light: (0, _tokens.token)('color.background.default', _colors.N30),
-  dark: (0, _tokens.token)('color.background.default', _colors.DN30)
+  light: "var(--ds-surface, ".concat(_colors.N30, ")"),
+  dark: "var(--ds-surface, ".concat(_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)
+  light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
+  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.DN30, ")")
 };
 exports.subtleBackgroundColorHover = subtleBackgroundColorHover;
 var defaultBorderColor = {
-  light: (0, _tokens.token)('color.border.neutral', _colors.N40),
-  dark: (0, _tokens.token)('color.border.neutral', _colors.DN40)
+  light: "var(--ds-border, ".concat(_colors.N40, ")"),
+  dark: "var(--ds-border, ".concat(_colors.DN40, ")")
 };
 exports.defaultBorderColor = defaultBorderColor;
 var defaultBorderColorFocus = {
-  light: (0, _tokens.token)('color.border.focus', _colors.B100),
-  dark: (0, _tokens.token)('color.border.focus', _colors.B75)
+  light: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+  dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
 };
 exports.defaultBorderColorFocus = defaultBorderColorFocus;
 var transparent = {
@@ -50,17 +48,17 @@ var transparent = {
 };
 exports.transparent = transparent;
 var textColor = {
-  light: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
-  dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
+  light: "var(--ds-text, ".concat(_colors.N900, ")"),
+  dark: "var(--ds-text, ".concat(_colors.DN600, ")")
 };
 exports.textColor = textColor;
 var disabledTextColor = {
-  light: (0, _tokens.token)('color.text.disabled', _colors.N70),
-  dark: (0, _tokens.token)('color.text.disabled', _colors.DN90)
+  light: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
+  dark: "var(--ds-text-disabled, ".concat(_colors.DN90, ")")
 };
 exports.disabledTextColor = disabledTextColor;
 var placeholderTextColor = {
-  light: (0, _tokens.token)('color.text.lowEmphasis', _colors.N100),
-  dark: (0, _tokens.token)('color.text.lowEmphasis', _colors.DN90)
+  light: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(_colors.DN90, ")")
 };
 exports.placeholderTextColor = placeholderTextColor;

package/dist/cjs/index.js

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

package/dist/cjs/styles.js

@@ -15,17 +15,15 @@ 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); }
 
 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var fontSize = (0, _constants.fontSize)();
 var gridSize = (0, _constants.gridSize)();
@@ -50,7 +48,7 @@ var invalidRules = {
     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: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
+    borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")"),
     borderColorFocus: componentTokens.defaultBorderColorFocus.light
   },
   dark: {
@@ -59,7 +57,7 @@ var invalidRules = {
     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: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
+    borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")"),
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark
   }
 };

package/dist/cjs/text-field.js

@@ -27,18 +27,20 @@ var _components = require("@atlaskit/theme/components");
 
 var _styles = require("./styles");
 
+var _excluded = ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"];
+
 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 || _typeof3(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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.2"
+  packageVersion: "5.1.6"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,
@@ -63,7 +65,7 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onBlur = props.onBlur,
       onMouseDown = props.onMouseDown,
       className = props.className,
-      spreadProps = (0, _objectWithoutProperties2.default)(props, ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"]);
+      spreadProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var inputRef = (0, _react.useRef)(null);
 
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),

package/dist/cjs/version.json

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

package/dist/es2019/component-tokens.js

@@ -1,46 +1,45 @@
 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: token('color.background.disabled', N10),
-  dark: token('color.background.disabled', DN10)
+  light: `var(--ds-background-disabled, ${N10})`,
+  dark: `var(--ds-background-disabled, ${DN10})`
 };
 export const defaultBackgroundColor = {
-  light: token('color.background.subtleBorderedNeutral.resting', N10),
-  dark: token('color.background.subtleBorderedNeutral.resting', DN10)
+  light: `var(--ds-background-input, ${N10})`,
+  dark: `var(--ds-background-input, ${DN10})`
 };
 export const defaultBackgroundColorFocus = {
-  light: token('color.background.default', N0),
-  dark: token('color.background.default', DN10)
+  light: `var(--ds-surface, ${N0})`,
+  dark: `var(--ds-surface, ${DN10})`
 };
 export const defaultBackgroundColorHover = {
-  light: token('color.background.default', N30),
-  dark: token('color.background.default', DN30)
+  light: `var(--ds-surface, ${N30})`,
+  dark: `var(--ds-surface, ${DN30})`
 };
 export const subtleBackgroundColorHover = {
-  light: token('color.background.transparentNeutral.hover', N30),
-  dark: token('color.background.transparentNeutral.hover', DN30)
+  light: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
+  dark: `var(--ds-background-neutral-subtle-hovered, ${DN30})`
 };
 export const defaultBorderColor = {
-  light: token('color.border.neutral', N40),
-  dark: token('color.border.neutral', DN40)
+  light: `var(--ds-border, ${N40})`,
+  dark: `var(--ds-border, ${DN40})`
 };
 export const defaultBorderColorFocus = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: `var(--ds-border-focused, ${B100})`,
+  dark: `var(--ds-border-focused, ${B75})`
 };
 export const transparent = {
   light: 'transparent',
   dark: 'transparent'
 };
 export const textColor = {
-  light: token('color.text.highEmphasis', N900),
-  dark: token('color.text.highEmphasis', DN600)
+  light: `var(--ds-text, ${N900})`,
+  dark: `var(--ds-text, ${DN600})`
 };
 export const disabledTextColor = {
-  light: token('color.text.disabled', N70),
-  dark: token('color.text.disabled', DN90)
+  light: `var(--ds-text-disabled, ${N70})`,
+  dark: `var(--ds-text-disabled, ${DN90})`
 };
 export const placeholderTextColor = {
-  light: token('color.text.lowEmphasis', N100),
-  dark: token('color.text.lowEmphasis', DN90)
+  light: `var(--ds-text-subtlest, ${N100})`,
+  dark: `var(--ds-text-subtlest, ${DN90})`
 };

package/dist/es2019/styles.js

@@ -1,6 +1,5 @@
 import { R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import * as componentTokens from './component-tokens';
 const fontSize = getFontSize();
 const gridSize = getGridSize();
@@ -25,7 +24,7 @@ const invalidRules = {
     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: token('color.iconBorder.danger', R400),
+    borderColor: `var(--ds-border-danger, ${R400})`,
     borderColorFocus: componentTokens.defaultBorderColorFocus.light
   },
   dark: {
@@ -34,7 +33,7 @@ const invalidRules = {
     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: token('color.iconBorder.danger', R400),
+    borderColor: `var(--ds-border-danger, ${R400})`,
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark
   }
 };

package/dist/es2019/text-field.js

@@ -9,7 +9,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.2"
+  packageVersion: "5.1.6"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

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

package/dist/esm/component-tokens.js

@@ -1,46 +1,45 @@
 import { B100, B75, DN10, DN30, DN40, DN600, DN90, N0, N10, N100, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var disabledBackgroundColor = {
-  light: token('color.background.disabled', N10),
-  dark: token('color.background.disabled', DN10)
+  light: "var(--ds-background-disabled, ".concat(N10, ")"),
+  dark: "var(--ds-background-disabled, ".concat(DN10, ")")
 };
 export var defaultBackgroundColor = {
-  light: token('color.background.subtleBorderedNeutral.resting', N10),
-  dark: token('color.background.subtleBorderedNeutral.resting', DN10)
+  light: "var(--ds-background-input, ".concat(N10, ")"),
+  dark: "var(--ds-background-input, ".concat(DN10, ")")
 };
 export var defaultBackgroundColorFocus = {
-  light: token('color.background.default', N0),
-  dark: token('color.background.default', DN10)
+  light: "var(--ds-surface, ".concat(N0, ")"),
+  dark: "var(--ds-surface, ".concat(DN10, ")")
 };
 export var defaultBackgroundColorHover = {
-  light: token('color.background.default', N30),
-  dark: token('color.background.default', DN30)
+  light: "var(--ds-surface, ".concat(N30, ")"),
+  dark: "var(--ds-surface, ".concat(DN30, ")")
 };
 export var subtleBackgroundColorHover = {
-  light: token('color.background.transparentNeutral.hover', N30),
-  dark: token('color.background.transparentNeutral.hover', DN30)
+  light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
+  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(DN30, ")")
 };
 export var defaultBorderColor = {
-  light: token('color.border.neutral', N40),
-  dark: token('color.border.neutral', DN40)
+  light: "var(--ds-border, ".concat(N40, ")"),
+  dark: "var(--ds-border, ".concat(DN40, ")")
 };
 export var defaultBorderColorFocus = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: "var(--ds-border-focused, ".concat(B100, ")"),
+  dark: "var(--ds-border-focused, ".concat(B75, ")")
 };
 export var transparent = {
   light: 'transparent',
   dark: 'transparent'
 };
 export var textColor = {
-  light: token('color.text.highEmphasis', N900),
-  dark: token('color.text.highEmphasis', DN600)
+  light: "var(--ds-text, ".concat(N900, ")"),
+  dark: "var(--ds-text, ".concat(DN600, ")")
 };
 export var disabledTextColor = {
-  light: token('color.text.disabled', N70),
-  dark: token('color.text.disabled', DN90)
+  light: "var(--ds-text-disabled, ".concat(N70, ")"),
+  dark: "var(--ds-text-disabled, ".concat(DN90, ")")
 };
 export var placeholderTextColor = {
-  light: token('color.text.lowEmphasis', N100),
-  dark: token('color.text.lowEmphasis', DN90)
+  light: "var(--ds-text-subtlest, ".concat(N100, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(DN90, ")")
 };

package/dist/esm/styles.js

@@ -1,12 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import * as componentTokens from './component-tokens';
 var fontSize = getFontSize();
 var gridSize = getGridSize();
@@ -31,7 +30,7 @@ var invalidRules = {
     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: token('color.iconBorder.danger', R400),
+    borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
     borderColorFocus: componentTokens.defaultBorderColorFocus.light
   },
   dark: {
@@ -40,7 +39,7 @@ var invalidRules = {
     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: token('color.iconBorder.danger', R400),
+    borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark
   }
 };

package/dist/esm/text-field.js

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
@@ -16,7 +17,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.2"
+  packageVersion: "5.1.6"
 };
 var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
@@ -41,7 +42,7 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
       onBlur = props.onBlur,
       onMouseDown = props.onMouseDown,
       className = props.className,
-      spreadProps = _objectWithoutProperties(props, ["appearance", "isCompact", "isDisabled", "isInvalid", "isRequired", "isReadOnly", "isMonospaced", "width", "elemAfterInput", "elemBeforeInput", "testId", "onFocus", "onBlur", "onMouseDown", "className"]);
+      spreadProps = _objectWithoutProperties(props, _excluded);
 
   var inputRef = useRef(null);
 

package/dist/esm/version.json

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

package/dist/types/component-tokens.d.ts

@@ -1,44 +1,44 @@
 export declare const disabledBackgroundColor: {
-    light: "var(--background-disabled)";
-    dark: "var(--background-disabled)";
+    light: "var(--ds-background-disabled)";
+    dark: "var(--ds-background-disabled)";
 };
 export declare const defaultBackgroundColor: {
-    light: "var(--background-subtleBorderedNeutral-resting)";
-    dark: "var(--background-subtleBorderedNeutral-resting)";
+    light: "var(--ds-background-input)";
+    dark: "var(--ds-background-input)";
 };
 export declare const defaultBackgroundColorFocus: {
-    light: "var(--background-default)";
-    dark: "var(--background-default)";
+    light: "var(--ds-surface)";
+    dark: "var(--ds-surface)";
 };
 export declare const defaultBackgroundColorHover: {
-    light: "var(--background-default)";
-    dark: "var(--background-default)";
+    light: "var(--ds-surface)";
+    dark: "var(--ds-surface)";
 };
 export declare const subtleBackgroundColorHover: {
-    light: "var(--background-transparentNeutral-hover)";
-    dark: "var(--background-transparentNeutral-hover)";
+    light: "var(--ds-background-neutral-subtle-hovered)";
+    dark: "var(--ds-background-neutral-subtle-hovered)";
 };
 export declare const defaultBorderColor: {
-    light: "var(--border-neutral)";
-    dark: "var(--border-neutral)";
+    light: "var(--ds-border)";
+    dark: "var(--ds-border)";
 };
 export declare const defaultBorderColorFocus: {
-    light: "var(--border-focus)";
-    dark: "var(--border-focus)";
+    light: "var(--ds-border-focused)";
+    dark: "var(--ds-border-focused)";
 };
 export declare const transparent: {
     light: string;
     dark: string;
 };
 export declare const textColor: {
-    light: "var(--text-highEmphasis)";
-    dark: "var(--text-highEmphasis)";
+    light: "var(--ds-text)";
+    dark: "var(--ds-text)";
 };
 export declare const disabledTextColor: {
-    light: "var(--text-disabled)";
-    dark: "var(--text-disabled)";
+    light: "var(--ds-text-disabled)";
+    dark: "var(--ds-text-disabled)";
 };
 export declare const placeholderTextColor: {
-    light: "var(--text-lowEmphasis)";
-    dark: "var(--text-lowEmphasis)";
+    light: "var(--ds-text-subtlest)";
+    dark: "var(--ds-text-subtlest)";
 };

package/dist/types/styles.d.ts

@@ -17,7 +17,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     readonly pointerEvents: "auto";
     readonly backgroundColor: string;
     readonly borderColor: string;
-    readonly color: "var(--text-highEmphasis)";
+    readonly color: "var(--ds-text)";
     readonly cursor: string;
     readonly '&:hover': {
         backgroundColor: string;
@@ -27,17 +27,17 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
         borderColor: string;
     };
     readonly '&[data-disabled]': {
-        backgroundColor: "var(--background-disabled)";
-        borderColor: "var(--background-disabled)";
-        color: "var(--text-disabled)";
+        backgroundColor: "var(--ds-background-disabled)";
+        borderColor: "var(--ds-background-disabled)";
+        color: "var(--ds-text-disabled)";
         cursor: string;
     };
     readonly '&[data-invalid]': {
-        borderColor: "var(--iconBorder-danger)";
+        borderColor: "var(--ds-border-danger)";
     };
     readonly '&[data-invalid]:focus-within': {
-        backgroundColor: "var(--background-default)";
-        borderColor: "var(--border-focus)";
+        backgroundColor: "var(--ds-surface)";
+        borderColor: "var(--ds-border-focused)";
     };
     readonly '@media screen and (-ms-high-contrast: active)': {
         '&[data-invalid]:focus-within': {
@@ -76,7 +76,7 @@ export declare const inputStyles: (mode: ThemeModes) => {
         readonly height: string;
     };
     readonly '&[disabled]': {
-        readonly WebkitTextFillColor: "var(--text-disabled)";
+        readonly WebkitTextFillColor: "var(--ds-text-disabled)";
     };
     readonly '&::-ms-clear': {
         readonly display: "none";
@@ -85,9 +85,9 @@ export declare const inputStyles: (mode: ThemeModes) => {
         readonly boxShadow: "none";
     };
     readonly '&::placeholder': {
-        readonly color: "var(--text-lowEmphasis)";
+        readonly color: "var(--ds-text-subtlest)";
         readonly '&:disabled': {
-            readonly color: "var(--text-disabled)";
+            readonly color: "var(--ds-text-disabled)";
         };
     };
     readonly '@media screen and (-ms-high-contrast: active)': {
@@ -99,8 +99,8 @@ export declare const inputStyles: (mode: ThemeModes) => {
 export declare const textFieldColors: {
     backgroundColor: {
         standard: {
-            light: "var(--background-subtleBorderedNeutral-resting)";
-            dark: "var(--background-subtleBorderedNeutral-resting)";
+            light: "var(--ds-background-input)";
+            dark: "var(--ds-background-input)";
         };
         subtle: {
             light: string;
@@ -113,12 +113,12 @@ export declare const textFieldColors: {
     };
     backgroundColorFocus: {
         standard: {
-            light: "var(--background-default)";
-            dark: "var(--background-default)";
+            light: "var(--ds-surface)";
+            dark: "var(--ds-surface)";
         };
         subtle: {
-            light: "var(--background-default)";
-            dark: "var(--background-default)";
+            light: "var(--ds-surface)";
+            dark: "var(--ds-surface)";
         };
         none: {
             light: string;
@@ -127,12 +127,12 @@ export declare const textFieldColors: {
     };
     backgroundColorHover: {
         standard: {
-            light: "var(--background-default)";
-            dark: "var(--background-default)";
+            light: "var(--ds-surface)";
+            dark: "var(--ds-surface)";
         };
         subtle: {
-            light: "var(--background-transparentNeutral-hover)";
-            dark: "var(--background-transparentNeutral-hover)";
+            light: "var(--ds-background-neutral-subtle-hovered)";
+            dark: "var(--ds-background-neutral-subtle-hovered)";
         };
         none: {
             light: string;
@@ -141,8 +141,8 @@ export declare const textFieldColors: {
     };
     borderColor: {
         standard: {
-            light: "var(--border-neutral)";
-            dark: "var(--border-neutral)";
+            light: "var(--ds-border)";
+            dark: "var(--ds-border)";
         };
         subtle: {
             light: string;
@@ -155,12 +155,12 @@ export declare const textFieldColors: {
     };
     borderColorFocus: {
         standard: {
-            light: "var(--border-focus)";
-            dark: "var(--border-focus)";
+            light: "var(--ds-border-focused)";
+            dark: "var(--ds-border-focused)";
         };
         subtle: {
-            light: "var(--border-focus)";
-            dark: "var(--border-focus)";
+            light: "var(--ds-border-focused)";
+            dark: "var(--ds-border-focused)";
         };
         none: {
             light: string;
@@ -168,41 +168,41 @@ export declare const textFieldColors: {
         };
     };
     placeholderTextColor: {
-        light: "var(--text-lowEmphasis)";
-        dark: "var(--text-lowEmphasis)";
+        light: "var(--ds-text-subtlest)";
+        dark: "var(--ds-text-subtlest)";
     };
     textColor: {
-        light: "var(--text-highEmphasis)";
-        dark: "var(--text-highEmphasis)";
+        light: "var(--ds-text)";
+        dark: "var(--ds-text)";
     };
     invalidRules: {
         light: {
-            backgroundColor: "var(--background-subtleBorderedNeutral-resting)";
-            backgroundColorHover: "var(--background-default)";
-            backgroundColorFocus: "var(--background-default)";
-            borderColor: "var(--iconBorder-danger)";
-            borderColorFocus: "var(--border-focus)";
+            backgroundColor: "var(--ds-background-input)";
+            backgroundColorHover: "var(--ds-surface)";
+            backgroundColorFocus: "var(--ds-surface)";
+            borderColor: "var(--ds-border-danger)";
+            borderColorFocus: "var(--ds-border-focused)";
         };
         dark: {
-            backgroundColor: "var(--background-subtleBorderedNeutral-resting)";
-            backgroundColorHover: "var(--background-default)";
-            backgroundColorFocus: "var(--background-default)";
-            borderColor: "var(--iconBorder-danger)";
-            borderColorFocus: "var(--border-focus)";
+            backgroundColor: "var(--ds-background-input)";
+            backgroundColorHover: "var(--ds-surface)";
+            backgroundColorFocus: "var(--ds-surface)";
+            borderColor: "var(--ds-border-danger)";
+            borderColorFocus: "var(--ds-border-focused)";
         };
     };
     disabledRules: {
         light: {
-            backgroundColor: "var(--background-disabled)";
-            backgroundColorHover: "var(--background-disabled)";
-            borderColor: "var(--background-disabled)";
-            textColor: "var(--text-disabled)";
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-background-disabled)";
+            textColor: "var(--ds-text-disabled)";
         };
         dark: {
-            backgroundColor: "var(--background-disabled)";
-            backgroundColorHover: "var(--background-disabled)";
-            borderColor: "var(--background-disabled)";
-            textColor: "var(--text-disabled)";
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-background-disabled)";
+            textColor: "var(--ds-text-disabled)";
         };
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.1.2",
+  "version": "5.1.6",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,7 +16,6 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Text field"
@@ -27,8 +26,8 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.2.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -37,14 +36,13 @@
   },
   "devDependencies": {
     "@atlaskit/avatar": "^20.5.0",
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
     "@atlaskit/form": "^8.4.0",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.3.0",
+    "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -67,7 +65,10 @@
     },
     "@repo/internal": {
       "ui-components": "lite-mode",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "analytics": "analytics-next",
       "theming": "tokens",
       "design-system": "v1",