@atlaskit/side-navigation 1.2.0 → 1.2.4

package/dist/esm/common/styles.js

@@ -1,12 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { B400, B50, N10, N30, N500 } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var gridSize = gridSizeFn();
 var borderRadius = borderRadiusFn();
 var itemIconSize = gridSize * 3;
@@ -16,6 +15,8 @@ export var ITEM_SIDE_PADDING = gridSize * 1.25;
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn
  * @param newStyle a new cssFn to be applied after the base style
+ *
+ * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
  */
 
 export var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
@@ -28,27 +29,27 @@ export var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
 };
 var defaultStyles = {
   '&:hover': {
-    color: token('color.text.mediumEmphasis', N500),
-    backgroundColor: token('color.background.transparentNeutral.hover', N30)
+    color: "var(--ds-text-subtle, ".concat(N500, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")
   },
   '&:active': {
-    color: token('color.text.mediumEmphasis', B400),
-    backgroundColor: token('color.background.transparentNeutral.pressed', B50)
+    color: "var(--ds-text-subtle, ".concat(B400, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")")
   }
 };
 var selectedStyles = {
-  backgroundColor: token('color.background.selected.resting', N30),
-  color: token('color.text.selected', B400),
+  backgroundColor: "var(--ds-background-brand, ".concat(N30, ")"),
+  color: "var(--ds-text-brand, ".concat(B400, ")"),
   ':visited': {
-    color: token('color.text.selected', B400)
+    color: "var(--ds-text-brand, ".concat(B400, ")")
   },
   '&:hover': {
-    backgroundColor: token('color.background.selected.hover', N30),
-    color: token('color.text.selected', N500)
+    backgroundColor: "var(--ds-background-brand-hovered, ".concat(N30, ")"),
+    color: "var(--ds-text-brand, ".concat(N500, ")")
   },
   '&:active': {
-    backgroundColor: token('color.background.selected.pressed', B50),
-    color: token('color.text.selected', B400)
+    backgroundColor: "var(--ds-background-brand-pressed, ".concat(B50, ")"),
+    color: "var(--ds-text-brand, ".concat(B400, ")")
   }
 };
 export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
@@ -62,7 +63,7 @@ export 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: token('color.background.default', N10)
+    backgroundColor: "var(--ds-surface, ".concat(N10, ")")
   }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, _defineProperty({}, '& [data-item-elem-before]', {
     // TODO: Can this be moved into menu?
     // center align icons with app-switcher regardless of size

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { N500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
@@ -39,7 +38,7 @@ var Footer = function Footer(props) {
       },
       'div&:active': {
         backgroundColor: 'transparent',
-        color: token('color.text.mediumEmphasis', N500)
+        color: "var(--ds-text-subtle, ".concat(N500, ")")
       }
     };
   }, props.cssFn);

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

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children"];
 import React, { forwardRef } from 'react';
 import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
@@ -22,13 +22,13 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
       fontSize: headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
-      color: token('color.text.highEmphasis', N500)
+      color: "var(--ds-text, ".concat(N500, ")")
     }), _defineProperty(_ref, 'div&:hover', {
       backgroundColor: 'transparent',
       cursor: 'default'
     }), _defineProperty(_ref, 'div&:active', {
       backgroundColor: 'transparent',
-      color: token('color.text.highEmphasis', N500)
+      color: "var(--ds-text, ".concat(N500, ")")
     }), _ref;
   }, props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
@@ -39,7 +39,7 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
       Title: {
         render: function render(_, _ref2) {
           var children = _ref2.children,
-              props = _objectWithoutProperties(_ref2, ["children"]);
+              props = _objectWithoutProperties(_ref2, _excluded);
 
           return /*#__PURE__*/React.createElement("h2", props, children);
         }

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cssFn"];
 import React, { forwardRef } from 'react';
 import { ButtonItem as Button } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
@@ -7,7 +8,7 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
 var ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = _objectWithoutProperties(_ref, ["cssFn"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useShouldNestedEleme = useShouldNestedElementRender(),
       shouldRender = _useShouldNestedEleme.shouldRender;
@@ -16,7 +17,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cssFn"];
 import React, { forwardRef } from 'react';
 import { CustomItem as Custom } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
@@ -12,7 +13,7 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
 var CustomItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = _objectWithoutProperties(_ref, ["cssFn"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useShouldNestedEleme = useShouldNestedElementRender(),
       shouldRender = _useShouldNestedEleme.shouldRender;
@@ -21,7 +22,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Custom, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -1,21 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cssFn", "iconBefore", "onClick", "isSelected"];
 import React, { forwardRef, useCallback, useState } from 'react';
 import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
 import { N10 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import ButtonItem from './button-item';
 var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cssFn = _ref.cssFn,
       _ref$iconBefore = _ref.iconBefore,
       iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/React.createElement(LeftArrow, {
-    secondaryColor: token('color.background.default', N10),
+    secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
     label: ""
   }) : _ref$iconBefore,
       onClick = _ref.onClick,
       isSelected = _ref.isSelected,
-      rest = _objectWithoutProperties(_ref, ["cssFn", "iconBefore", "onClick", "isSelected"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cssFn"];
 import React, { forwardRef } from 'react';
 import { LinkItem as Link } from '@atlaskit/menu';
 import { baseSideNavItemStyle, overrideStyleFunction } from '../../common/styles';
@@ -7,7 +8,7 @@ import { useShouldNestedElementRender } from '../NestableNavigationContent/conte
 var LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract types with extract react types.
 function (_ref, ref) {
   var cssFn = _ref.cssFn,
-      rest = _objectWithoutProperties(_ref, ["cssFn"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useShouldNestedEleme = useShouldNestedElementRender(),
       shouldRender = _useShouldNestedEleme.shouldRender;
@@ -16,7 +17,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Link, _extends({
     ref: ref,
     cssFn: cssOverride

package/dist/esm/components/Item/skeleton-item.js

@@ -12,7 +12,8 @@ var SkeletonItem = function SkeletonItem(props) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(SkelItem, _extends({
+  return /*#__PURE__*/React.createElement(SkelItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , _extends({
     cssFn: function cssFn() {
       return {
         paddingLeft: ITEM_SIDE_PADDING,

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

@@ -1,13 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { N10, N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
 var scrollIndicatorMaskZIndex = 2;
 var scrollIndicatorZIndex = 1;
@@ -46,7 +45,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       height: scrollIndicatorHeight,
       borderRadius: scrollIndicatorBorderRadius,
-      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30), ")"),
+      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(N30, ")"), ")"),
       position: 'absolute',
       zIndex: scrollIndicatorZIndex
     },
@@ -61,7 +60,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       bottom: 0,
       zIndex: scrollIndicatorZIndex,
-      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30), ")")
+      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(N30, ")"), ")")
     }
   };
 };
@@ -86,7 +85,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(token('color.background.default', N10), ")"),
+      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(N10, ")"), ")"),
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -104,7 +103,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
       marginTop: 'auto',
       position: 'relative',
       zIndex: scrollIndicatorMaskZIndex,
-      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(token('color.background.default', N10), ")")
+      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(N10, ")"), ")")
     }
   });
 };

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

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';

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

@@ -3,10 +3,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
@@ -14,7 +15,6 @@ import { jsx } from '@emotion/core';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
 import { N10 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
@@ -36,7 +36,7 @@ var NestingItem = function NestingItem(props) {
       id = props.id,
       component = props.component,
       testId = props.testId,
-      rest = _objectWithoutProperties(props, ["children", "iconAfter", "title", "onClick", "cssFn", "isSelected", "id", "component", "testId"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   var _useNestedContext = useNestedContext(),
       currentStackId = _useNestedContext.currentStackId,
@@ -120,7 +120,7 @@ var NestingItem = function NestingItem(props) {
       "data-right-arrow": true
     }, jsx(RightArrow, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
-      secondaryColor: token('color.background.default', N10),
+      secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
       label: ""
     }))),
     onClick: onClickHandler,

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

@@ -2,9 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 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) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 // exposed for testing purposes
 export var enabledCSS = (_enabledCSS = {}, _defineProperty(_enabledCSS, '&:hover [data-custom-icon]', {

package/dist/esm/components/Section/heading-item.js

@@ -12,7 +12,8 @@ var HeadingItem = function HeadingItem(props) {
     return null;
   }
 
-  var cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn);
+  var cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(MenuHeadingItem, _extends({}, props, {
     cssFn: cssFn
   }));

package/dist/esm/components/Section/section.js

@@ -13,7 +13,8 @@ var Section = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/React.createElement(MenuSection, _extends({}, props, {
-    ref: ref,
+    ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+    ,
     overrides: {
       HeadingItem: {
         cssFn: sectionHeaderStyle

package/dist/esm/components/Section/skeleton-heading-item.js

@@ -12,7 +12,8 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem, _extends({
+  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , _extends({
     cssFn: function cssFn() {
       return {
         paddingLeft: ITEM_SIDE_PADDING,

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

@@ -3,7 +3,6 @@ import { forwardRef } from 'react';
 import { jsx } from '@emotion/core';
 import { N10, N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       testId = props.testId,
@@ -15,9 +14,9 @@ var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
     css: {
       width: '100%',
       height: '100%',
-      color: token('color.text.mediumEmphasis', N500),
+      color: "var(--ds-text-subtle, ".concat(N500, ")"),
       minWidth: gridSize() * 30,
-      backgroundColor: token('color.background.default', N10),
+      backgroundColor: "var(--ds-surface, ".concat(N10, ")"),
       position: 'relative',
       display: 'flex',
       flexDirection: 'column',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "1.2.0",
+	"version": "1.2.4",
 	"sideEffects": false
 }

package/dist/types/common/styles.d.ts

@@ -4,6 +4,8 @@ export declare const ITEM_SIDE_PADDING: number;
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn
  * @param newStyle a new cssFn to be applied after the base style
+ *
+ * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
  */
 export declare const overrideStyleFunction: <TState>(baseStyle: CSSFn<TState>, newStyle?: CSSFn<TState> | undefined) => CSSFn<TState>;
 export declare const baseSideNavItemStyle: CSSFn;

package/dist/types/components/Footer/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HeaderProps } from '../Header';
 export type { HeaderProps as FooterProps } from '../Header';
 declare const Footer: (props: HeaderProps) => JSX.Element;

package/dist/types/components/Header/index.d.ts

@@ -4,6 +4,7 @@ export interface HeaderProps {
     /**
      * A function that can be used to override the styles of the component.
      * It receives the current styles and state and expects a styles object.
+     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
      */
     cssFn?: CSSFn;
     /**

package/dist/types/components/Item/custom-item.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
 export type { CustomItemComponentProps, CustomItemProps } from '@atlaskit/menu';
 interface CustomItemType {

package/dist/types/components/Item/skeleton-item.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SkeletonItemProps } from '@atlaskit/menu';
 export type { SkeletonItemProps } from '@atlaskit/menu';
 declare const SkeletonItem: (props: SkeletonItemProps) => JSX.Element | null;

package/dist/types/components/NavigationHeader/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface NavigationHeaderProps {
     children: JSX.Element | JSX.Element[];
 }

package/dist/types/components/NestableNavigationContent/index.d.ts

@@ -39,6 +39,8 @@ export interface NestableNavigationContentProps {
     onChange?: (stack: string[]) => void;
     /**
      * Custom overrides for the composed components.
+     *
+     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
      */
     overrides?: {
         /**

package/dist/types/components/Section/heading-item.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HeadingItemProps } from '@atlaskit/menu';
 export type { HeadingItemProps } from '@atlaskit/menu';
 declare const HeadingItem: (props: HeadingItemProps) => JSX.Element | null;

package/dist/types/components/Section/skeleton-heading-item.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SkeletonHeadingItemProps } from '@atlaskit/menu';
 export type { SkeletonHeadingItemProps } from '@atlaskit/menu';
 declare const SkeletonHeadingItem: (props: SkeletonHeadingItemProps) => JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.2.0",
+  "version": "1.2.4",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,12 +23,12 @@
     }
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^1.1.0",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/menu": "^1.2.0",
     "@atlaskit/motion": "^1.0.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -36,7 +36,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^1.2.0",
+    "@atlaskit/atlassian-navigation": "^2.1.0",
     "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
     "@atlaskit/logo": "^13.5.0",