@atlaskit/textfield 5.1.3 → 5.1.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/textfield
 
+## 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

package/dist/cjs/component-tokens.js

@@ -7,41 +7,39 @@ exports.placeholderTextColor = exports.disabledTextColor = exports.textColor = e
 
 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-subtleBorderedNeutral-resting, ".concat(_colors.N10, ")"),
+  dark: "var(--ds-background-subtleBorderedNeutral-resting, ".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-background-default, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-background-default, ".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-background-default, ".concat(_colors.N30, ")"),
+  dark: "var(--ds-background-default, ".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-transparentNeutral-hover, ".concat(_colors.N30, ")"),
+  dark: "var(--ds-background-transparentNeutral-hover, ".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-neutral, ".concat(_colors.N40, ")"),
+  dark: "var(--ds-border-neutral, ".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-focus, ".concat(_colors.B100, ")"),
+  dark: "var(--ds-border-focus, ".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-highEmphasis, ".concat(_colors.N900, ")"),
+  dark: "var(--ds-text-highEmphasis, ".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-lowEmphasis, ".concat(_colors.N100, ")"),
+  dark: "var(--ds-text-lowEmphasis, ".concat(_colors.DN90, ")")
 };
 exports.placeholderTextColor = placeholderTextColor;

package/dist/cjs/styles.js

@@ -15,8 +15,6 @@ 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); }
@@ -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-iconBorder-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-iconBorder-danger, ".concat(_colors.R400, ")"),
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark
   }
 };

package/dist/cjs/text-field.js

@@ -38,7 +38,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.3"
+  packageVersion: "5.1.4"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.1.3",
+	"version": "5.1.4",
 	"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-subtleBorderedNeutral-resting, ${N10})`,
+  dark: `var(--ds-background-subtleBorderedNeutral-resting, ${DN10})`
 };
 export const defaultBackgroundColorFocus = {
-  light: token('color.background.default', N0),
-  dark: token('color.background.default', DN10)
+  light: `var(--ds-background-default, ${N0})`,
+  dark: `var(--ds-background-default, ${DN10})`
 };
 export const defaultBackgroundColorHover = {
-  light: token('color.background.default', N30),
-  dark: token('color.background.default', DN30)
+  light: `var(--ds-background-default, ${N30})`,
+  dark: `var(--ds-background-default, ${DN30})`
 };
 export const subtleBackgroundColorHover = {
-  light: token('color.background.transparentNeutral.hover', N30),
-  dark: token('color.background.transparentNeutral.hover', DN30)
+  light: `var(--ds-background-transparentNeutral-hover, ${N30})`,
+  dark: `var(--ds-background-transparentNeutral-hover, ${DN30})`
 };
 export const defaultBorderColor = {
-  light: token('color.border.neutral', N40),
-  dark: token('color.border.neutral', DN40)
+  light: `var(--ds-border-neutral, ${N40})`,
+  dark: `var(--ds-border-neutral, ${DN40})`
 };
 export const defaultBorderColorFocus = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: `var(--ds-border-focus, ${B100})`,
+  dark: `var(--ds-border-focus, ${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-highEmphasis, ${N900})`,
+  dark: `var(--ds-text-highEmphasis, ${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-lowEmphasis, ${N100})`,
+  dark: `var(--ds-text-lowEmphasis, ${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-iconBorder-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-iconBorder-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.3"
+  packageVersion: "5.1.4"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.1.3",
+	"version": "5.1.4",
 	"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-subtleBorderedNeutral-resting, ".concat(N10, ")"),
+  dark: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(DN10, ")")
 };
 export var defaultBackgroundColorFocus = {
-  light: token('color.background.default', N0),
-  dark: token('color.background.default', DN10)
+  light: "var(--ds-background-default, ".concat(N0, ")"),
+  dark: "var(--ds-background-default, ".concat(DN10, ")")
 };
 export var defaultBackgroundColorHover = {
-  light: token('color.background.default', N30),
-  dark: token('color.background.default', DN30)
+  light: "var(--ds-background-default, ".concat(N30, ")"),
+  dark: "var(--ds-background-default, ".concat(DN30, ")")
 };
 export var subtleBackgroundColorHover = {
-  light: token('color.background.transparentNeutral.hover', N30),
-  dark: token('color.background.transparentNeutral.hover', DN30)
+  light: "var(--ds-background-transparentNeutral-hover, ".concat(N30, ")"),
+  dark: "var(--ds-background-transparentNeutral-hover, ".concat(DN30, ")")
 };
 export var defaultBorderColor = {
-  light: token('color.border.neutral', N40),
-  dark: token('color.border.neutral', DN40)
+  light: "var(--ds-border-neutral, ".concat(N40, ")"),
+  dark: "var(--ds-border-neutral, ".concat(DN40, ")")
 };
 export var defaultBorderColorFocus = {
-  light: token('color.border.focus', B100),
-  dark: token('color.border.focus', B75)
+  light: "var(--ds-border-focus, ".concat(B100, ")"),
+  dark: "var(--ds-border-focus, ".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-highEmphasis, ".concat(N900, ")"),
+  dark: "var(--ds-text-highEmphasis, ".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-lowEmphasis, ".concat(N100, ")"),
+  dark: "var(--ds-text-lowEmphasis, ".concat(DN90, ")")
 };

package/dist/esm/styles.js

@@ -6,7 +6,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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-iconBorder-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-iconBorder-danger, ".concat(R400, ")"),
     borderColorFocus: componentTokens.defaultBorderColorFocus.dark
   }
 };

package/dist/esm/text-field.js

@@ -16,7 +16,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.3"
+  packageVersion: "5.1.4"
 };
 var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.1.3",
+  "version": "5.1.4",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -67,7 +67,10 @@
     },
     "@repo/internal": {
       "ui-components": "lite-mode",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "analytics": "analytics-next",
       "theming": "tokens",
       "design-system": "v1",