@atlaskit/select 15.2.8 → 15.2.11

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/select
 
+## 15.2.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.2.10
+
+### Patch Changes
+
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
+## 15.2.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.2.8
 
 ### Patch Changes

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.8";
+var packageVersion = "15.2.11";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

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

@@ -69,7 +69,7 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
     paddingBottom: 4,
     paddingLeft: "".concat((0, _constants.gridSize)() * 2, "px"),
     paddingTop: 4,
-    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-text-brand, ".concat(_colors.B400, ")"), ";") : '',
+    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(_colors.B400, ")"), ";") : '',
     ':active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")")
     },
@@ -121,18 +121,18 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
     });
   } else if (isSelected && isActive) {
     color = (0, _components.themed)({
-      light: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B75, ")"),
-      dark: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B200, ")")
+      light: "var(--ds-background-selected-bold-pressed, ".concat(_colors.B75, ")"),
+      dark: "var(--ds-background-selected-bold-pressed, ".concat(_colors.B200, ")")
     });
   } else if (isActive) {
     color = (0, _components.themed)({
-      light: "var(--ds-background-brand-pressed, ".concat(_colors.B75, ")"),
-      dark: "var(--ds-background-brand-pressed, ".concat(_colors.B200, ")")
+      light: "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")"),
+      dark: "var(--ds-background-selected-pressed, ".concat(_colors.B200, ")")
     });
   } else if (isFocused && isSelected) {
     color = (0, _components.themed)({
-      light: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B300, ")"),
-      dark: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")")
+      light: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
+      dark: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B75, ")")
     });
   } else if (isFocused) {
     color = (0, _components.themed)({
@@ -141,8 +141,8 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
     });
   } else if (isSelected) {
     color = (0, _components.themed)({
-      light: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
-      dark: "var(--ds-background-brand-bold, ".concat(_colors.B100, ")")
+      light: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
+      dark: "var(--ds-background-selected-bold, ".concat(_colors.B100, ")")
     });
   }
 
@@ -190,15 +190,15 @@ var getBorderColor = function getBorderColor(_ref3) {
   } else if (isDisabled) {
     return "var(--ds-background-disabled, ".concat(_colors.N100, ")");
   } else if (isSelected && isActive) {
-    return "var(--ds-background-brand-bold-pressed, ".concat(_colors.B400, ")");
+    return "var(--ds-background-selected-bold-pressed, ".concat(_colors.B400, ")");
   } else if (isActive) {
-    return "var(--ds-background-brand-bold, ".concat(_colors.B400, ")");
+    return "var(--ds-background-selected-bold, ".concat(_colors.B400, ")");
   } else if (isFocused && isSelected) {
-    return "var(--ds-background-brand-bold-hovered, ".concat(_colors.B400, ")");
+    return "var(--ds-background-selected-bold-hovered, ".concat(_colors.B400, ")");
   } else if (isFocused) {
     return "var(--ds-border, ".concat(_colors.N100, ")");
   } else if (isSelected) {
-    return "var(--ds-background-brand-bold, ".concat(_colors.B400, ")");
+    return "var(--ds-background-selected-bold, ".concat(_colors.B400, ")");
   }
 
   return "var(--ds-border, ".concat(_colors.N100, ")");

package/dist/cjs/createSelect.js

@@ -56,9 +56,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 function createSelect(WrappedComponent) {
-  var _class, _temp;
+  var _class;
 
-  return _temp = _class = /*#__PURE__*/function (_Component) {
+  return _class = /*#__PURE__*/function (_Component) {
     (0, _inherits2.default)(AtlaskitSelect, _Component);
 
     var _super = _createSuper(AtlaskitSelect);
@@ -140,5 +140,5 @@ function createSelect(WrappedComponent) {
     tabSelectsValue: false,
     components: {},
     styles: {}
-  }), _temp;
+  }), _class;
 }

package/dist/cjs/styles.js

@@ -163,7 +163,7 @@ function baseStyles(validationState, isCompact) {
       if (isDisabled) {
         color = "var(--ds-text-disabled, ".concat(_colors.N70, ")");
       } else if (isSelected) {
-        color = "var(--ds-text-brand, ".concat(_colors.B400, ")");
+        color = "var(--ds-text-selected, ".concat(_colors.B400, ")");
       }
 
       var boxShadow;
@@ -172,15 +172,15 @@ function baseStyles(validationState, isCompact) {
       if (isDisabled) {
         backgroundColor = undefined;
       } else if (isSelected && isFocused) {
-        backgroundColor = "var(--ds-background-brand-hovered, ".concat(_colors.B50, ")");
+        backgroundColor = "var(--ds-background-selected-hovered, ".concat(_colors.B50, ")");
       } else if (isSelected) {
-        backgroundColor = "var(--ds-background-brand, ".concat(_colors.B50, ")");
+        backgroundColor = "var(--ds-background-selected, ".concat(_colors.B50, ")");
       } else if (isFocused) {
         backgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")");
       }
 
       if (!isDisabled && (isFocused || isSelected)) {
-        boxShadow = "inset 2px 0px 0px ".concat("var(--ds-text-brand, ".concat(_colors.B400, ")"));
+        boxShadow = "inset 2px 0px 0px ".concat("var(--ds-border-selected, ".concat(_colors.B400, ")"));
       }
 
       var cursor = isDisabled ? 'not-allowed' : undefined;
@@ -191,7 +191,7 @@ function baseStyles(validationState, isCompact) {
         cursor: cursor,
         boxShadow: boxShadow,
         ':active': {
-          backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-brand-pressed, ".concat(_colors.N20, ")") : "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")") : undefined
+          backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, ".concat(_colors.N20, ")") : "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")") : undefined
         },
         '@media screen and (-ms-high-contrast: active)': {
           borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
@@ -228,7 +228,7 @@ function baseStyles(validationState, isCompact) {
       var isFocused = _ref7.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: '2px',
-        backgroundColor: isFocused ? "var(--ds-background-brand, ".concat(_colors.N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N40, ")"),
+        backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(_colors.N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N40, ")"),
         boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
         '@media screen and (-ms-high-contrast: active)': {
@@ -240,15 +240,15 @@ function baseStyles(validationState, isCompact) {
       var isFocused = _ref8.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         padding: '2px',
-        color: isFocused ? "var(--ds-text-brand, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
+        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
         paddingRight: '2px'
       });
     },
     multiValueRemove: function multiValueRemove(css, _ref9) {
       var isFocused = _ref9.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        backgroundColor: isFocused && "var(--ds-background-brand, ".concat(_colors.R75, ")"),
-        fill: isFocused ? "var(--ds-text-brand, #000)" : "var(--ds-text, #000)",
+        backgroundColor: isFocused && "var(--ds-background-selected, ".concat(_colors.R75, ")"),
+        fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
         paddingLeft: '2px',
         paddingRight: '2px',
         borderRadius: '0px 2px 2px 0px',

package/dist/cjs/version.json

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

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.8";
+const packageVersion = "15.2.11";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

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

@@ -27,7 +27,7 @@ const getPrimitiveStyles = props => {
     paddingBottom: 4,
     paddingLeft: `${gridSize() * 2}px`,
     paddingTop: 4,
-    boxShadow: isFocused ? `inset 2px 0px 0px ${`var(--ds-text-brand, ${B400})`};` : '',
+    boxShadow: isFocused ? `inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};` : '',
     ':active': {
       backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${N30})`
     },
@@ -80,18 +80,18 @@ const getPrimaryColor = ({
     });
   } else if (isSelected && isActive) {
     color = themed({
-      light: `var(--ds-background-brand-bold-pressed, ${B75})`,
-      dark: `var(--ds-background-brand-bold-pressed, ${B200})`
+      light: `var(--ds-background-selected-bold-pressed, ${B75})`,
+      dark: `var(--ds-background-selected-bold-pressed, ${B200})`
     });
   } else if (isActive) {
     color = themed({
-      light: `var(--ds-background-brand-pressed, ${B75})`,
-      dark: `var(--ds-background-brand-pressed, ${B200})`
+      light: `var(--ds-background-selected-pressed, ${B75})`,
+      dark: `var(--ds-background-selected-pressed, ${B200})`
     });
   } else if (isFocused && isSelected) {
     color = themed({
-      light: `var(--ds-background-brand-bold-hovered, ${B300})`,
-      dark: `var(--ds-background-brand-bold-hovered, ${B75})`
+      light: `var(--ds-background-selected-bold-hovered, ${B300})`,
+      dark: `var(--ds-background-selected-bold-hovered, ${B75})`
     });
   } else if (isFocused) {
     color = themed({
@@ -100,8 +100,8 @@ const getPrimaryColor = ({
     });
   } else if (isSelected) {
     color = themed({
-      light: `var(--ds-background-brand-bold, ${B400})`,
-      dark: `var(--ds-background-brand-bold, ${B100})`
+      light: `var(--ds-background-selected-bold, ${B400})`,
+      dark: `var(--ds-background-selected-bold, ${B100})`
     });
   }
 
@@ -150,15 +150,15 @@ const getBorderColor = ({
   } else if (isDisabled) {
     return `var(--ds-background-disabled, ${N100})`;
   } else if (isSelected && isActive) {
-    return `var(--ds-background-brand-bold-pressed, ${B400})`;
+    return `var(--ds-background-selected-bold-pressed, ${B400})`;
   } else if (isActive) {
-    return `var(--ds-background-brand-bold, ${B400})`;
+    return `var(--ds-background-selected-bold, ${B400})`;
   } else if (isFocused && isSelected) {
-    return `var(--ds-background-brand-bold-hovered, ${B400})`;
+    return `var(--ds-background-selected-bold-hovered, ${B400})`;
   } else if (isFocused) {
     return `var(--ds-border, ${N100})`;
   } else if (isSelected) {
-    return `var(--ds-background-brand-bold, ${B400})`;
+    return `var(--ds-background-selected-bold, ${B400})`;
   }
 
   return `var(--ds-border, ${N100})`;

package/dist/es2019/createSelect.js

@@ -7,9 +7,9 @@ import isEqual from 'react-fast-compare';
 import * as defaultComponents from './components';
 import baseStyles from './styles';
 export default function createSelect(WrappedComponent) {
-  var _class, _temp;
+  var _class;
 
-  return _temp = _class = class AtlaskitSelect extends Component {
+  return _class = class AtlaskitSelect extends Component {
     constructor(props) {
       super(props);
 
@@ -85,5 +85,5 @@ export default function createSelect(WrappedComponent) {
     tabSelectsValue: false,
     components: {},
     styles: {}
-  }), _temp;
+  }), _class;
 }

package/dist/es2019/styles.js

@@ -138,7 +138,7 @@ export default function baseStyles(validationState, isCompact) {
       if (isDisabled) {
         color = `var(--ds-text-disabled, ${N70})`;
       } else if (isSelected) {
-        color = `var(--ds-text-brand, ${B400})`;
+        color = `var(--ds-text-selected, ${B400})`;
       }
 
       let boxShadow;
@@ -147,15 +147,15 @@ export default function baseStyles(validationState, isCompact) {
       if (isDisabled) {
         backgroundColor = undefined;
       } else if (isSelected && isFocused) {
-        backgroundColor = `var(--ds-background-brand-hovered, ${B50})`;
+        backgroundColor = `var(--ds-background-selected-hovered, ${B50})`;
       } else if (isSelected) {
-        backgroundColor = `var(--ds-background-brand, ${B50})`;
+        backgroundColor = `var(--ds-background-selected, ${B50})`;
       } else if (isFocused) {
         backgroundColor = `var(--ds-background-neutral-subtle-hovered, ${N20})`;
       }
 
       if (!isDisabled && (isFocused || isSelected)) {
-        boxShadow = `inset 2px 0px 0px ${`var(--ds-text-brand, ${B400})`}`;
+        boxShadow = `inset 2px 0px 0px ${`var(--ds-border-selected, ${B400})`}`;
       }
 
       const cursor = isDisabled ? 'not-allowed' : undefined;
@@ -166,7 +166,7 @@ export default function baseStyles(validationState, isCompact) {
         cursor,
         boxShadow,
         ':active': {
-          backgroundColor: !isDisabled ? isSelected ? `var(--ds-background-brand-pressed, ${N20})` : `var(--ds-background-neutral-subtle-pressed, ${N30})` : undefined
+          backgroundColor: !isDisabled ? isSelected ? `var(--ds-background-selected-pressed, ${N20})` : `var(--ds-background-neutral-subtle-pressed, ${N30})` : undefined
         },
         '@media screen and (-ms-high-contrast: active)': {
           borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
@@ -197,7 +197,7 @@ export default function baseStyles(validationState, isCompact) {
       isFocused
     }) => ({ ...css,
       borderRadius: '2px',
-      backgroundColor: isFocused ? `var(--ds-background-brand, ${N40})` : `var(--ds-background-neutral-subtle-hovered, ${N40})`,
+      backgroundColor: isFocused ? `var(--ds-background-selected, ${N40})` : `var(--ds-background-neutral-subtle-hovered, ${N40})`,
       boxShadow: isFocused ? `0 0 0 2px ${"var(--ds-surface, transparent)"}, 0 0 0 4px ${"var(--ds-border-focused, transparent)"}` : 'none',
       maxWidth: '100%',
       '@media screen and (-ms-high-contrast: active)': {
@@ -208,15 +208,15 @@ export default function baseStyles(validationState, isCompact) {
       isFocused
     }) => ({ ...css,
       padding: '2px',
-      color: isFocused ? "var(--ds-text-brand, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
+      color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
       paddingRight: '2px'
     }),
     multiValueRemove: (css, {
       // @ts-ignore: missing in @types/react-select
       isFocused
     }) => ({ ...css,
-      backgroundColor: isFocused && `var(--ds-background-brand, ${R75})`,
-      fill: isFocused ? "var(--ds-text-brand, #000)" : "var(--ds-text, #000)",
+      backgroundColor: isFocused && `var(--ds-background-selected, ${R75})`,
+      fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
       paddingLeft: '2px',
       paddingRight: '2px',
       borderRadius: '0px 2px 2px 0px',

package/dist/es2019/version.json

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

package/dist/esm/Select.js

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

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

@@ -45,7 +45,7 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
     paddingBottom: 4,
     paddingLeft: "".concat(gridSize() * 2, "px"),
     paddingTop: 4,
-    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-text-brand, ".concat(B400, ")"), ";") : '',
+    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(B400, ")"), ";") : '',
     ':active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")")
     },
@@ -98,18 +98,18 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
     });
   } else if (isSelected && isActive) {
     color = themed({
-      light: "var(--ds-background-brand-bold-pressed, ".concat(B75, ")"),
-      dark: "var(--ds-background-brand-bold-pressed, ".concat(B200, ")")
+      light: "var(--ds-background-selected-bold-pressed, ".concat(B75, ")"),
+      dark: "var(--ds-background-selected-bold-pressed, ".concat(B200, ")")
     });
   } else if (isActive) {
     color = themed({
-      light: "var(--ds-background-brand-pressed, ".concat(B75, ")"),
-      dark: "var(--ds-background-brand-pressed, ".concat(B200, ")")
+      light: "var(--ds-background-selected-pressed, ".concat(B75, ")"),
+      dark: "var(--ds-background-selected-pressed, ".concat(B200, ")")
     });
   } else if (isFocused && isSelected) {
     color = themed({
-      light: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")"),
-      dark: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")")
+      light: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
+      dark: "var(--ds-background-selected-bold-hovered, ".concat(B75, ")")
     });
   } else if (isFocused) {
     color = themed({
@@ -118,8 +118,8 @@ var getPrimaryColor = function getPrimaryColor(_ref) {
     });
   } else if (isSelected) {
     color = themed({
-      light: "var(--ds-background-brand-bold, ".concat(B400, ")"),
-      dark: "var(--ds-background-brand-bold, ".concat(B100, ")")
+      light: "var(--ds-background-selected-bold, ".concat(B400, ")"),
+      dark: "var(--ds-background-selected-bold, ".concat(B100, ")")
     });
   }
 
@@ -168,15 +168,15 @@ var getBorderColor = function getBorderColor(_ref3) {
   } else if (isDisabled) {
     return "var(--ds-background-disabled, ".concat(N100, ")");
   } else if (isSelected && isActive) {
-    return "var(--ds-background-brand-bold-pressed, ".concat(B400, ")");
+    return "var(--ds-background-selected-bold-pressed, ".concat(B400, ")");
   } else if (isActive) {
-    return "var(--ds-background-brand-bold, ".concat(B400, ")");
+    return "var(--ds-background-selected-bold, ".concat(B400, ")");
   } else if (isFocused && isSelected) {
-    return "var(--ds-background-brand-bold-hovered, ".concat(B400, ")");
+    return "var(--ds-background-selected-bold-hovered, ".concat(B400, ")");
   } else if (isFocused) {
     return "var(--ds-border, ".concat(N100, ")");
   } else if (isSelected) {
-    return "var(--ds-background-brand-bold, ".concat(B400, ")");
+    return "var(--ds-background-selected-bold, ".concat(B400, ")");
   }
 
   return "var(--ds-border, ".concat(N100, ")");

package/dist/esm/createSelect.js

@@ -25,9 +25,9 @@ import isEqual from 'react-fast-compare';
 import * as defaultComponents from './components';
 import baseStyles from './styles';
 export default function createSelect(WrappedComponent) {
-  var _class, _temp;
+  var _class;
 
-  return _temp = _class = /*#__PURE__*/function (_Component) {
+  return _class = /*#__PURE__*/function (_Component) {
     _inherits(AtlaskitSelect, _Component);
 
     var _super = _createSuper(AtlaskitSelect);
@@ -117,5 +117,5 @@ export default function createSelect(WrappedComponent) {
     tabSelectsValue: false,
     components: {},
     styles: {}
-  }), _temp;
+  }), _class;
 }

package/dist/esm/styles.js

@@ -151,7 +151,7 @@ export default function baseStyles(validationState, isCompact) {
       if (isDisabled) {
         color = "var(--ds-text-disabled, ".concat(N70, ")");
       } else if (isSelected) {
-        color = "var(--ds-text-brand, ".concat(B400, ")");
+        color = "var(--ds-text-selected, ".concat(B400, ")");
       }
 
       var boxShadow;
@@ -160,15 +160,15 @@ export default function baseStyles(validationState, isCompact) {
       if (isDisabled) {
         backgroundColor = undefined;
       } else if (isSelected && isFocused) {
-        backgroundColor = "var(--ds-background-brand-hovered, ".concat(B50, ")");
+        backgroundColor = "var(--ds-background-selected-hovered, ".concat(B50, ")");
       } else if (isSelected) {
-        backgroundColor = "var(--ds-background-brand, ".concat(B50, ")");
+        backgroundColor = "var(--ds-background-selected, ".concat(B50, ")");
       } else if (isFocused) {
         backgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")");
       }
 
       if (!isDisabled && (isFocused || isSelected)) {
-        boxShadow = "inset 2px 0px 0px ".concat("var(--ds-text-brand, ".concat(B400, ")"));
+        boxShadow = "inset 2px 0px 0px ".concat("var(--ds-border-selected, ".concat(B400, ")"));
       }
 
       var cursor = isDisabled ? 'not-allowed' : undefined;
@@ -179,7 +179,7 @@ export default function baseStyles(validationState, isCompact) {
         cursor: cursor,
         boxShadow: boxShadow,
         ':active': {
-          backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-brand-pressed, ".concat(N20, ")") : "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")") : undefined
+          backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, ".concat(N20, ")") : "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")") : undefined
         },
         '@media screen and (-ms-high-contrast: active)': {
           borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
@@ -216,7 +216,7 @@ export default function baseStyles(validationState, isCompact) {
       var isFocused = _ref7.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         borderRadius: '2px',
-        backgroundColor: isFocused ? "var(--ds-background-brand, ".concat(N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(N40, ")"),
+        backgroundColor: isFocused ? "var(--ds-background-selected, ".concat(N40, ")") : "var(--ds-background-neutral-subtle-hovered, ".concat(N40, ")"),
         boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ").concat("var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',
         '@media screen and (-ms-high-contrast: active)': {
@@ -228,15 +228,15 @@ export default function baseStyles(validationState, isCompact) {
       var isFocused = _ref8.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
         padding: '2px',
-        color: isFocused ? "var(--ds-text-brand, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
+        color: isFocused ? "var(--ds-text-selected, hsl(0, 0%, 20%))" : "var(--ds-text, hsl(0, 0%, 20%))",
         paddingRight: '2px'
       });
     },
     multiValueRemove: function multiValueRemove(css, _ref9) {
       var isFocused = _ref9.isFocused;
       return _objectSpread(_objectSpread({}, css), {}, {
-        backgroundColor: isFocused && "var(--ds-background-brand, ".concat(R75, ")"),
-        fill: isFocused ? "var(--ds-text-brand, #000)" : "var(--ds-text, #000)",
+        backgroundColor: isFocused && "var(--ds-background-selected, ".concat(R75, ")"),
+        fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
         paddingLeft: '2px',
         paddingRight: '2px',
         borderRadius: '0px 2px 2px 0px',

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.2.8",
+  "version": "15.2.11",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.6.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@atlaskit/visually-hidden": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
@@ -47,7 +47,7 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/checkbox": "^12.2.0",
     "@atlaskit/docs": "*",
     "@atlaskit/drawer": "^7.1.0",
@@ -67,7 +67,7 @@
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "react-value": "^0.2.0",
-    "typescript": "3.9.6",
+    "typescript": "3.9.10",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {