@atlaskit/side-navigation 1.1.2 → 1.2.3

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @atlaskit/side-navigation
 
+## 1.2.3
+
+### 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
+
+## 1.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.1
+
+### 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
+
+## 1.2.0
+
+### Minor Changes
+
+- [`213bfd77e61`](https://bitbucket.org/atlassian/atlassian-frontend/commits/213bfd77e61) - The DOM structure of menu item components has been flattened.
+  If you used CSS hacks (via className or cssFn) that targetted specific DOM nodes you may be broken.
+
+  Previously the structure looked like:
+
+  ```jsx
+  <button>
+    <div> // <-- this intermediate div has been removed
+      <span>
+        <span />
+      </span>
+    </div>
+  </button>
+  ```
+
+  Now it looks like:
+
+  ```jsx
+  <button>
+    <span>
+      <span />
+    </span>
+  </button>
+  ```
+
+- [`e4f332d8697`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4f332d8697) - Internal refactor to update style declarations to match menu changes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.1.2
 
 ### Patch Changes

package/dist/cjs/common/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VAR_SCROLL_INDICATOR_COLOR = exports.VAR_SEPARATOR_COLOR = void 0;
+exports.VAR_SEPARATOR_COLOR = exports.VAR_SCROLL_INDICATOR_COLOR = void 0;
 var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
 exports.VAR_SEPARATOR_COLOR = VAR_SEPARATOR_COLOR;
 var VAR_SCROLL_INDICATOR_COLOR = '--ds-menu-scroll-indicator-color';

package/dist/cjs/common/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sectionHeaderStyle = exports.baseSideNavItemStyle = exports.overrideStyleFunction = exports.ITEM_SIDE_PADDING = void 0;
+exports.sectionHeaderStyle = exports.overrideStyleFunction = exports.baseSideNavItemStyle = exports.ITEM_SIDE_PADDING = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -13,11 +13,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
+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 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; }
+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 gridSize = (0, _constants.gridSize)();
 var borderRadius = (0, _constants.borderRadius)();
@@ -44,27 +42,27 @@ var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
 exports.overrideStyleFunction = overrideStyleFunction;
 var defaultStyles = {
   '&:hover': {
-    color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
-    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30)
+    color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
   },
   '&:active': {
-    color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B400),
-    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.B50)
+    color: "var(--ds-text-subtle, ".concat(_colors.B400, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")")
   }
 };
 var selectedStyles = {
-  backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.N30),
-  color: (0, _tokens.token)('color.text.selected', _colors.B400),
+  backgroundColor: "var(--ds-background-brand, ".concat(_colors.N30, ")"),
+  color: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
   ':visited': {
-    color: (0, _tokens.token)('color.text.selected', _colors.B400)
+    color: "var(--ds-text-brand, ".concat(_colors.B400, ")")
   },
   '&:hover': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.hover', _colors.N30),
-    color: (0, _tokens.token)('color.text.selected', _colors.N500)
+    backgroundColor: "var(--ds-background-brand-hovered, ".concat(_colors.N30, ")"),
+    color: "var(--ds-text-brand, ".concat(_colors.N500, ")")
   },
   '&:active': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B50),
-    color: (0, _tokens.token)('color.text.selected', _colors.B400)
+    backgroundColor: "var(--ds-background-brand-pressed, ".concat(_colors.B50, ")"),
+    color: "var(--ds-text-brand, ".concat(_colors.B400, ")")
   }
 };
 
@@ -79,7 +77,7 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
     // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
     // Menu and side navigation are now color aligned so they do not need this!
     // See: https://product-fabric.atlassian.net/browse/DSP-1684
-    backgroundColor: (0, _tokens.token)('color.background.default', _colors.N10)
+    backgroundColor: "var(--ds-surface, ".concat(_colors.N10, ")")
   }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, (0, _defineProperty2.default)({}, '& [data-item-elem-before]', {
     // TODO: Can this be moved into menu?
     // center align icons with app-switcher regardless of size

package/dist/cjs/components/Footer/index.js

@@ -9,14 +9,10 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _styles = require("../../common/styles");
 
 var _Item = require("../Item");
@@ -27,35 +23,37 @@ var Container = function Container(props) {
 
 var Footer = function Footer(props) {
   var cssFn = (0, _styles.overrideStyleFunction)(function () {
-    var _ref;
-
-    return _ref = {
+    return {
       userSelect: 'auto',
-      div: {
-        display: 'block',
+      display: 'block',
+      textAlign: 'center',
+      minHeight: '24px',
+      alignItems: 'center',
+      width: '100%',
+      '[data-item-elem-before]': {
+        marginRight: 0,
+        marginBottom: '8px',
+        display: 'inline-block'
+      },
+      '[data-item-title]': {
         textAlign: 'center',
-        minHeight: '24px',
-        alignItems: 'center',
-        width: '100%'
+        fontSize: 12
+      },
+      '[data-item-description]': {
+        textAlign: 'center',
+        display: 'inline-block',
+        margin: '6px'
+      },
+      // Will look interactive if the `component` is anything other than a div.
+      'div&:hover': {
+        backgroundColor: 'transparent',
+        cursor: 'default'
+      },
+      'div&:active': {
+        backgroundColor: 'transparent',
+        color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
       }
-    }, (0, _defineProperty2.default)(_ref, '[data-item-elem-before]', {
-      marginRight: 0,
-      marginBottom: '8px',
-      display: 'inline-block'
-    }), (0, _defineProperty2.default)(_ref, '[data-item-title]', {
-      textAlign: 'center',
-      fontSize: 12
-    }), (0, _defineProperty2.default)(_ref, '[data-item-description]', {
-      textAlign: 'center',
-      display: 'inline-block',
-      margin: '6px'
-    }), (0, _defineProperty2.default)(_ref, 'div&:hover', {
-      backgroundColor: 'transparent',
-      cursor: 'default'
-    }), (0, _defineProperty2.default)(_ref, 'div&:active', {
-      backgroundColor: 'transparent',
-      color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500)
-    }), _ref;
+    };
   }, props.cssFn);
   return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
     component: props.component || Container,

package/dist/cjs/components/Header/index.js

@@ -21,12 +21,12 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _styles = require("../../common/styles");
 
 var _Item = require("../Item");
 
+var _excluded = ["children"];
+
 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; }
@@ -45,13 +45,13 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fontSize: _typography.headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
-      color: (0, _tokens.token)('color.text.highEmphasis', _colors.N500)
+      color: "var(--ds-text, ".concat(_colors.N500, ")")
     }), (0, _defineProperty2.default)(_ref, 'div&:hover', {
       backgroundColor: 'transparent',
       cursor: 'default'
     }), (0, _defineProperty2.default)(_ref, 'div&:active', {
       backgroundColor: 'transparent',
-      color: (0, _tokens.token)('color.text.highEmphasis', _colors.N500)
+      color: "var(--ds-text, ".concat(_colors.N500, ")")
     }), _ref;
   }, props.cssFn);
   return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
@@ -62,7 +62,7 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       Title: {
         render: function render(_, _ref2) {
           var children = _ref2.children,
-              props = (0, _objectWithoutProperties2.default)(_ref2, ["children"]);
+              props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
           return /*#__PURE__*/_react.default.createElement("h2", props, children);
         }
       }

package/dist/cjs/components/Item/button-item.js

@@ -21,6 +21,8 @@ var _styles = require("../../common/styles");
 
 var _context = require("../NestableNavigationContent/context");
 
+var _excluded = ["cssFn"];
+
 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; }
@@ -28,7 +30,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var ButtonItem = /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["cssFn"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
       shouldRender = _useShouldNestedEleme.shouldRender;

package/dist/cjs/components/Item/custom-item.js

@@ -21,6 +21,8 @@ var _styles = require("../../common/styles");
 
 var _context = require("../NestableNavigationContent/context");
 
+var _excluded = ["cssFn"];
+
 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; }
@@ -32,7 +34,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CustomItem = /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["cssFn"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
       shouldRender = _useShouldNestedEleme.shouldRender;

package/dist/cjs/components/Item/go-back-item.js

@@ -21,10 +21,10 @@ var _arrowLeftCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arro
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _buttonItem = _interopRequireDefault(require("./button-item"));
 
+var _excluded = ["cssFn", "iconBefore", "onClick", "isSelected"];
+
 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; }
@@ -33,12 +33,12 @@ var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var cssFn = _ref.cssFn,
       _ref$iconBefore = _ref.iconBefore,
       iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/_react.default.createElement(_arrowLeftCircle.default, {
-    secondaryColor: (0, _tokens.token)('color.background.default', _colors.N10),
+    secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
     label: ""
   }) : _ref$iconBefore,
       onClick = _ref.onClick,
       isSelected = _ref.isSelected,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["cssFn", "iconBefore", "onClick", "isSelected"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/dist/cjs/components/Item/link-item.js

@@ -21,6 +21,8 @@ var _styles = require("../../common/styles");
 
 var _context = require("../NestableNavigationContent/context");
 
+var _excluded = ["cssFn"];
+
 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; }
@@ -28,7 +30,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var LinkItem = /*#__PURE__*/(0, _react.forwardRef)( // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["cssFn"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
       shouldRender = _useShouldNestedEleme.shouldRender;

package/dist/cjs/components/NavigationContent/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.containerCSS = exports.innerContainerCSS = exports.outerContainerCSS = void 0;
+exports.outerContainerCSS = exports.innerContainerCSS = exports.containerCSS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -15,13 +15,11 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants2 = require("../../common/constants");
 
-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 scrollIndicatorMaskZIndex = 2;
 var scrollIndicatorZIndex = 1;
@@ -60,7 +58,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       height: scrollIndicatorHeight,
       borderRadius: scrollIndicatorBorderRadius,
-      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30), ")"),
+      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(_colors.N30, ")"), ")"),
       position: 'absolute',
       zIndex: scrollIndicatorZIndex
     },
@@ -75,7 +73,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       bottom: 0,
       zIndex: scrollIndicatorZIndex,
-      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30), ")")
+      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(_colors.N30, ")"), ")")
     }
   };
 };
@@ -103,7 +101,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat((0, _tokens.token)('color.background.default', _colors.N10), ")"),
+      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(_colors.N10, ")"), ")"),
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -121,7 +119,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
       marginTop: 'auto',
       position: 'relative',
       zIndex: scrollIndicatorMaskZIndex,
-      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat((0, _tokens.token)('color.background.default', _colors.N10), ")")
+      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(_colors.N10, ")"), ")")
     }
   });
 };

package/dist/cjs/components/NestableNavigationContent/nesting-motion.js

@@ -13,9 +13,9 @@ var _core = require("@emotion/core");
 
 var _motion = require("@atlaskit/motion");
 
-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 NestingMotion = function NestingMotion(props) {
   var children = props.children,

package/dist/cjs/components/NestingItem/index.js

@@ -29,8 +29,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _styles = require("../../common/styles");
 
 var _index = require("../index");
@@ -41,13 +39,15 @@ var _context = require("../NestableNavigationContent/context");
 
 var _styles2 = require("./styles");
 
+var _excluded = ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"];
+
 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; }
 
 /**
  * NestingItem will render itself differently depending in what context it is rendered in.
@@ -64,7 +64,7 @@ var NestingItem = function NestingItem(props) {
       id = props.id,
       component = props.component,
       testId = props.testId,
-      rest = (0, _objectWithoutProperties2.default)(props, ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   var _useNestedContext = (0, _context.useNestedContext)(),
       currentStackId = _useNestedContext.currentStackId,
@@ -148,7 +148,7 @@ var NestingItem = function NestingItem(props) {
       "data-right-arrow": true
     }, (0, _core.jsx)(_arrowRightCircle.default, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
-      secondaryColor: (0, _tokens.token)('color.background.default', _colors.N10),
+      secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
       label: ""
     }))),
     onClick: onClickHandler,

package/dist/cjs/components/NestingItem/styles.js

@@ -11,9 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _enabledCSS, _disabledCSS;
 
-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; }
 
 // exposed for testing purposes
 var enabledCSS = (_enabledCSS = {}, (0, _defineProperty2.default)(_enabledCSS, '&:hover [data-custom-icon]', {

package/dist/cjs/components/SideNavigation/index.js

@@ -13,8 +13,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
@@ -27,9 +25,9 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     css: {
       width: '100%',
       height: '100%',
-      color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
+      color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
       minWidth: (0, _constants.gridSize)() * 30,
-      backgroundColor: (0, _tokens.token)('color.background.default', _colors.N10),
+      backgroundColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
       position: 'relative',
       display: 'flex',
       flexDirection: 'column',