@atlaskit/select 15.2.4 → 15.2.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/select
 
+## 15.2.5
+
+### 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
+
 ## 15.2.4
 
 ### Patch Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -45,8 +45,6 @@ var _objects = _interopRequireDefault(require("shallow-equal/objects"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _components = require("./components");
 
 var _styles = _interopRequireDefault(require("../styles"));
@@ -119,7 +117,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState, _this.props.spacing === 'compact'), {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
-          color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N80)
+          color: "var(--ds-text-lowEmphasis, ".concat(_colors.N80, ")")
         });
       }
     }));

package/dist/cjs/PopupSelect/components.js

@@ -21,8 +21,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var MenuDialog = function MenuDialog(_ref) {
   var maxWidth = _ref.maxWidth,
@@ -32,9 +30,9 @@ var MenuDialog = function MenuDialog(_ref) {
       style = _ref.style;
   return (0, _core.jsx)("div", {
     css: {
-      backgroundColor: (0, _tokens.token)('color.background.overlay', 'white'),
+      backgroundColor: "var(--ds-background-overlay, white)",
       borderRadius: 4,
-      boxShadow: (0, _tokens.token)('shadow.overlay', "0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A)),
+      boxShadow: "var(--ds-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")"),
       maxWidth: maxWidth,
       minWidth: minWidth,
       zIndex: _constants.layers.modal()

package/dist/cjs/Select.js

@@ -14,7 +14,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 
 var packageName = "@atlaskit/select";
-var packageVersion = "15.2.4";
+var packageVersion = "15.2.5";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/components/input-options.js

@@ -41,8 +41,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -60,15 +58,15 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
       isSelected = props.isSelected;
   var styles = {
     alignItems: 'center',
-    backgroundColor: isFocused ? (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20) : 'transparent',
-    color: isDisabled ? (0, _tokens.token)('color.text.disabled', 'inherit') : 'inherit',
+    backgroundColor: isFocused ? "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N20, ")") : 'transparent',
+    color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
     display: 'flex ',
     paddingBottom: 4,
     paddingLeft: "".concat((0, _constants.gridSize)() * 2, "px"),
     paddingTop: 4,
-    boxShadow: isFocused ? "inset 2px 0px 0px ".concat((0, _tokens.token)('color.text.selected', _colors.B400), ";") : '',
+    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-text-selected, ".concat(_colors.B400, ")"), ";") : '',
     ':active': {
-      backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.N30)
+      backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.N30, ")")
     },
     '@media screen and (-ms-high-contrast: active)': {
       borderLeft: isFocused ? '2px solid transparent' : ''
@@ -89,8 +87,8 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
 
 
 var backgroundColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N0),
-  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.DN10)
+  light: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-background-subtleNeutral-resting, ".concat(_colors.DN10, ")")
 });
 var transparent = (0, _components.themed)({
   light: 'transparent',
@@ -108,38 +106,38 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
 
   if (isDisabled && isSelected) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.disabled', _colors.B75),
-      dark: (0, _tokens.token)('color.background.disabled', _colors.DN200)
+      light: "var(--ds-background-disabled, ".concat(_colors.B75, ")"),
+      dark: "var(--ds-background-disabled, ".concat(_colors.DN200, ")")
     });
   } else if (isDisabled) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.disabled', _colors.N20A),
-      dark: (0, _tokens.token)('color.background.disabled', _colors.DN10)
+      light: "var(--ds-background-disabled, ".concat(_colors.N20A, ")"),
+      dark: "var(--ds-background-disabled, ".concat(_colors.DN10, ")")
     });
   } else if (isSelected && isActive) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.boldBrand.pressed', _colors.B75),
-      dark: (0, _tokens.token)('color.background.boldBrand.pressed', _colors.B200)
+      light: "var(--ds-background-boldBrand-pressed, ".concat(_colors.B75, ")"),
+      dark: "var(--ds-background-boldBrand-pressed, ".concat(_colors.B200, ")")
     });
   } else if (isActive) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.subtleBrand.pressed', _colors.B75),
-      dark: (0, _tokens.token)('color.background.subtleBrand.pressed', _colors.B200)
+      light: "var(--ds-background-subtleBrand-pressed, ".concat(_colors.B75, ")"),
+      dark: "var(--ds-background-subtleBrand-pressed, ".concat(_colors.B200, ")")
     });
   } else if (isFocused && isSelected) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B300),
-      dark: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B75)
+      light: "var(--ds-background-boldBrand-hover, ".concat(_colors.B300, ")"),
+      dark: "var(--ds-background-boldBrand-hover, ".concat(_colors.B75, ")")
     });
   } else if (isFocused) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.default', _colors.N0),
-      dark: (0, _tokens.token)('color.background.default', _colors.DN30)
+      light: "var(--ds-background-default, ".concat(_colors.N0, ")"),
+      dark: "var(--ds-background-default, ".concat(_colors.DN30, ")")
     });
   } else if (isSelected) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
-      dark: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B100)
+      light: "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")"),
+      dark: "var(--ds-background-boldBrand-resting, ".concat(_colors.B100, ")")
     });
   }
 
@@ -153,19 +151,19 @@ var getSecondaryColor = function getSecondaryColor(_ref2) {
       isSelected = _ref2.isSelected,
       rest = (0, _objectWithoutProperties2.default)(_ref2, ["isActive", "isDisabled", "isSelected"]);
   var color = (0, _components.themed)({
-    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, ")")
   });
 
   if (isDisabled && isSelected) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.text.disabled', _colors.N70),
-      dark: (0, _tokens.token)('color.text.disabled', _colors.DN10)
+      light: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
+      dark: "var(--ds-text-disabled, ".concat(_colors.DN10, ")")
     });
   } else if (isActive && isSelected && !isDisabled) {
     color = (0, _components.themed)({
-      light: (0, _tokens.token)('color.background.default', _colors.B400),
-      dark: (0, _tokens.token)('color.background.default', _colors.DN10)
+      light: "var(--ds-background-default, ".concat(_colors.B400, ")"),
+      dark: "var(--ds-background-default, ".concat(_colors.DN10, ")")
     });
   } else if (!isSelected) {
     color = transparent;
@@ -183,22 +181,22 @@ var getBorderColor = function getBorderColor(_ref3) {
       rest = (0, _objectWithoutProperties2.default)(_ref3, ["isActive", "isDisabled", "isFocused", "isSelected"]);
 
   if (isDisabled && isSelected) {
-    return (0, _tokens.token)('color.background.disabled', _colors.B400);
+    return "var(--ds-background-disabled, ".concat(_colors.B400, ")");
   } else if (isDisabled) {
-    return (0, _tokens.token)('color.background.disabled', _colors.N100);
+    return "var(--ds-background-disabled, ".concat(_colors.N100, ")");
   } else if (isSelected && isActive) {
-    return (0, _tokens.token)('color.background.boldBrand.pressed', _colors.B400);
+    return "var(--ds-background-boldBrand-pressed, ".concat(_colors.B400, ")");
   } else if (isActive) {
-    return (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400);
+    return "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")");
   } else if (isFocused && isSelected) {
-    return (0, _tokens.token)('color.background.boldBrand.hover', _colors.B400);
+    return "var(--ds-background-boldBrand-hover, ".concat(_colors.B400, ")");
   } else if (isFocused) {
-    return (0, _tokens.token)('color.border.neutral', _colors.N100);
+    return "var(--ds-border-neutral, ".concat(_colors.N100, ")");
   } else if (isSelected) {
-    return (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400);
+    return "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")");
   }
 
-  return (0, _tokens.token)('color.border.neutral', _colors.N100);
+  return "var(--ds-border-neutral, ".concat(_colors.N100, ")");
 };
 
 var ControlOption = /*#__PURE__*/function (_Component) {

package/dist/cjs/styles.js

@@ -13,8 +13,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 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 _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; }
@@ -37,37 +35,37 @@ function baseStyles(validationState, isCompact) {
     },
     input: function input(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        color: (0, _tokens.token)('color.text.highEmphasis', 'hsl(0, 0%, 20%)')
+        color: "var(--ds-text-highEmphasis, hsl(0, 0%, 20%))"
       });
     },
     control: function control(css, _ref2) {
       var isFocused = _ref2.isFocused,
           isDisabled = _ref2.isDisabled;
-      var borderColor = isFocused ? (0, _tokens.token)('color.border.focus', _colors.B100) : (0, _tokens.token)('color.border.neutral', _colors.N20);
-      var backgroundColor = isFocused ? (0, _tokens.token)('color.background.default', _colors.N0) : (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20);
-      var backgroundColorHover = isFocused ? (0, _tokens.token)('color.background.default', _colors.N0) : (0, _tokens.token)('color.background.default', _colors.N30);
+      var borderColor = isFocused ? "var(--ds-border-focus, ".concat(_colors.B100, ")") : "var(--ds-border-neutral, ".concat(_colors.N20, ")");
+      var backgroundColor = isFocused ? "var(--ds-background-default, ".concat(_colors.N0, ")") : "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N20, ")");
+      var backgroundColorHover = isFocused ? "var(--ds-background-default, ".concat(_colors.N0, ")") : "var(--ds-background-default, ".concat(_colors.N30, ")");
 
       if (isDisabled) {
-        backgroundColor = (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20);
-        borderColor = (0, _tokens.token)('color.background.disabled', _colors.N20);
+        backgroundColor = "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N20, ")");
+        borderColor = "var(--ds-background-disabled, ".concat(_colors.N20, ")");
       }
 
       if (validationState === 'error') {
-        borderColor = (0, _tokens.token)('color.iconBorder.danger', _colors.R400);
+        borderColor = "var(--ds-iconBorder-danger, ".concat(_colors.R400, ")");
       }
 
       if (validationState === 'success') {
-        borderColor = (0, _tokens.token)('color.iconBorder.success', _colors.G400);
+        borderColor = "var(--ds-iconBorder-success, ".concat(_colors.G400, ")");
       }
 
-      var borderColorHover = isFocused ? (0, _tokens.token)('color.border.focus', _colors.B100) : (0, _tokens.token)('color.border.neutral', _colors.N30);
+      var borderColorHover = isFocused ? "var(--ds-border-focus, ".concat(_colors.B100, ")") : "var(--ds-border-neutral, ".concat(_colors.N30, ")");
 
       if (validationState === 'error') {
-        borderColorHover = (0, _tokens.token)('color.iconBorder.danger', _colors.R400);
+        borderColorHover = "var(--ds-iconBorder-danger, ".concat(_colors.R400, ")");
       }
 
       if (validationState === 'success') {
-        borderColorHover = (0, _tokens.token)('color.iconBorder.success', _colors.G400);
+        borderColorHover = "var(--ds-iconBorder-success, ".concat(_colors.G400, ")");
       }
 
       var transitionDuration = '200ms';
@@ -116,13 +114,13 @@ function baseStyles(validationState, isCompact) {
     },
     clearIndicator: function clearIndicator(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N70),
+        color: "var(--ds-text-lowEmphasis, ".concat(_colors.N70, ")"),
         paddingLeft: ICON_PADDING,
         paddingRight: ICON_PADDING,
         paddingBottom: isCompact ? 0 : 6,
         paddingTop: isCompact ? 0 : 6,
         ':hover': {
-          color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500)
+          color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")")
         }
       });
     },
@@ -134,10 +132,10 @@ function baseStyles(validationState, isCompact) {
     },
     dropdownIndicator: function dropdownIndicator(css, _ref3) {
       var isDisabled = _ref3.isDisabled;
-      var color = (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500);
+      var color = "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")");
 
       if (isDisabled) {
-        color = (0, _tokens.token)('color.text.disabled', _colors.N70);
+        color = "var(--ds-text-disabled, ".concat(_colors.N70, ")");
       }
 
       return _objectSpread(_objectSpread({}, css), {}, {
@@ -147,7 +145,7 @@ function baseStyles(validationState, isCompact) {
         paddingBottom: isCompact ? 0 : 6,
         paddingTop: isCompact ? 0 : 6,
         ':hover': {
-          color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N200)
+          color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N200, ")")
         }
       });
     },
@@ -160,12 +158,12 @@ function baseStyles(validationState, isCompact) {
       var isFocused = _ref4.isFocused,
           isSelected = _ref4.isSelected,
           isDisabled = _ref4.isDisabled;
-      var color = (0, _tokens.token)('color.text.highEmphasis', _colors.N800);
+      var color = "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")");
 
       if (isDisabled) {
-        color = (0, _tokens.token)('color.text.disabled', _colors.N70);
+        color = "var(--ds-text-disabled, ".concat(_colors.N70, ")");
       } else if (isSelected) {
-        color = (0, _tokens.token)('color.text.selected', _colors.B400);
+        color = "var(--ds-text-selected, ".concat(_colors.B400, ")");
       }
 
       var boxShadow;
@@ -174,15 +172,15 @@ function baseStyles(validationState, isCompact) {
       if (isDisabled) {
         backgroundColor = undefined;
       } else if (isSelected && isFocused) {
-        backgroundColor = (0, _tokens.token)('color.background.selected.hover', _colors.B50);
+        backgroundColor = "var(--ds-background-selected-hover, ".concat(_colors.B50, ")");
       } else if (isSelected) {
-        backgroundColor = (0, _tokens.token)('color.background.selected.resting', _colors.B50);
+        backgroundColor = "var(--ds-background-selected-resting, ".concat(_colors.B50, ")");
       } else if (isFocused) {
-        backgroundColor = (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20);
+        backgroundColor = "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N20, ")");
       }
 
       if (!isDisabled && (isFocused || isSelected)) {
-        boxShadow = "inset 2px 0px 0px ".concat((0, _tokens.token)('color.text.selected', _colors.B400));
+        boxShadow = "inset 2px 0px 0px ".concat("var(--ds-text-selected, ".concat(_colors.B400, ")"));
       }
 
       var cursor = isDisabled ? 'not-allowed' : undefined;
@@ -193,7 +191,7 @@ function baseStyles(validationState, isCompact) {
         cursor: cursor,
         boxShadow: boxShadow,
         ':active': {
-          backgroundColor: !isDisabled ? isSelected ? (0, _tokens.token)('color.background.selected.pressed', _colors.N20) : (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.N30) : undefined
+          backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, ".concat(_colors.N20, ")") : "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.N30, ")") : undefined
         },
         '@media screen and (-ms-high-contrast: active)': {
           borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
@@ -203,21 +201,21 @@ function baseStyles(validationState, isCompact) {
     placeholder: function placeholder(css, _ref5) {
       var isDisabled = _ref5.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
-        color: isDisabled ? (0, _tokens.token)('color.text.disabled', _colors.N300) : (0, _tokens.token)('color.text.lowEmphasis', _colors.N300)
+        color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N300, ")") : "var(--ds-text-lowEmphasis, ".concat(_colors.N300, ")")
       });
     },
     singleValue: function singleValue(css, _ref6) {
       var isDisabled = _ref6.isDisabled;
       return _objectSpread(_objectSpread({}, css), {}, {
-        color: isDisabled ? (0, _tokens.token)('color.text.disabled', _colors.N70) : (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
+        color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
         lineHeight: "".concat((0, _constants.gridSize)() * 2, "px") // 16px
 
       });
     },
     menu: function menu(css) {
       return _objectSpread(_objectSpread({}, css), {}, {
-        backgroundColor: (0, _tokens.token)('color.background.overlay', 'white'),
-        boxShadow: (0, _tokens.token)('shadow.overlay', '0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%)')
+        backgroundColor: "var(--ds-background-overlay, white)",
+        boxShadow: "var(--ds-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
       });
     },
     menuList: function menuList(css) {
@@ -230,8 +228,8 @@ function baseStyles(validationState, isCompact) {
       var isFocused = _ref7.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: '2px',
-        backgroundColor: isFocused ? (0, _tokens.token)('color.background.selected.resting', _colors.N40) : (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N40),
-        boxShadow: isFocused ? "0 0 0 2px ".concat((0, _tokens.token)('color.background.default', 'transparent'), ", 0 0 0 4px ").concat((0, _tokens.token)('color.border.focus', 'transparent')) : 'none',
+        backgroundColor: isFocused ? "var(--ds-background-selected-resting, ".concat(_colors.N40, ")") : "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N40, ")"),
+        boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-background-default, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focus, transparent)") : 'none',
         maxWidth: '100%',
         '@media screen and (-ms-high-contrast: active)': {
           border: isFocused ? '1px solid transparent' : 'none'
@@ -242,25 +240,25 @@ function baseStyles(validationState, isCompact) {
       var isFocused = _ref8.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         padding: '2px',
-        color: isFocused ? (0, _tokens.token)('color.text.selected', 'hsl(0, 0%, 20%)') : (0, _tokens.token)('color.text.highEmphasis', 'hsl(0, 0%, 20%)'),
+        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text-highEmphasis, hsl(0, 0%, 20%))",
         paddingRight: '2px'
       });
     },
     multiValueRemove: function multiValueRemove(css, _ref9) {
       var isFocused = _ref9.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        backgroundColor: isFocused && (0, _tokens.token)('color.background.selected.resting', _colors.R75),
-        fill: isFocused ? (0, _tokens.token)('color.text.selected', '#000') : (0, _tokens.token)('color.text.highEmphasis', '#000'),
+        backgroundColor: isFocused && "var(--ds-background-selected-resting, ".concat(_colors.R75, ")"),
+        fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text-highEmphasis, #000)",
         paddingLeft: '2px',
         paddingRight: '2px',
         borderRadius: '0px 2px 2px 0px',
         ':hover': {
-          backgroundColor: (0, _tokens.token)('color.background.subtleDanger.hover', _colors.R75),
-          fill: (0, _tokens.token)('color.text.danger', '#000')
+          backgroundColor: "var(--ds-background-subtleDanger-hover, ".concat(_colors.R75, ")"),
+          fill: "var(--ds-text-danger, #000)"
         },
         ':active': {
-          backgroundColor: (0, _tokens.token)('color.background.subtleDanger.pressed', _colors.R75),
-          fill: (0, _tokens.token)('color.text.danger', '#000')
+          backgroundColor: "var(--ds-background-subtleDanger-pressed, ".concat(_colors.R75, ")"),
+          fill: "var(--ds-text-danger, #000)"
         }
       });
     }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.2.4",
+	"version": "15.2.5",
 	"sideEffects": false
 }

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -9,7 +9,6 @@ import { Manager, Reference, Popper } from 'react-popper';
 import NodeResolver from 'react-node-resolver';
 import shallowEqualObjects from 'shallow-equal/objects';
 import { N80 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { MenuDialog, DummyControl, defaultComponents } from './components';
 import baseStyles from '../styles';
 
@@ -57,7 +56,7 @@ export default class PopupSelect extends PureComponent {
 
     _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState, this.props.spacing === 'compact'), {
       groupHeading: provided => ({ ...provided,
-        color: token('color.text.lowEmphasis', N80)
+        color: `var(--ds-text-lowEmphasis, ${N80})`
       })
     }));
 

package/dist/es2019/PopupSelect/components.js

@@ -6,7 +6,6 @@ import { jsx } from '@emotion/core';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { layers } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const MenuDialog = ({
   maxWidth,
   minWidth,
@@ -15,9 +14,9 @@ export const MenuDialog = ({
   style
 }) => jsx("div", {
   css: {
-    backgroundColor: token('color.background.overlay', 'white'),
+    backgroundColor: "var(--ds-background-overlay, white)",
     borderRadius: 4,
-    boxShadow: token('shadow.overlay', `0 0 0 1px ${N40A}, 0 4px 11px ${N40A}`),
+    boxShadow: `var(--ds-overlay, ${`0 0 0 1px ${N40A}, 0 4px 11px ${N40A}`})`,
     maxWidth,
     minWidth,
     zIndex: layers.modal()

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "15.2.4";
+const packageVersion = "15.2.5";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({