@atlaskit/side-navigation 1.0.1 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @atlaskit/side-navigation
 
+## 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
+
+- Updated dependencies
+
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.1.0
+
+### Minor Changes
+
+- [`0e1894c8eb0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0e1894c8eb0) - Instrumented side navigation with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.0.1
 
 ### Patch Changes

package/build/tsconfig.json

@@ -9,5 +9,9 @@
     "../src/**/*.ts",
     "../src/**/*.tsx"
   ],
-  "exclude": ["../src/**/__tests__/*"]
-}
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ]
+}

package/dist/cjs/common/constants.js

@@ -3,22 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VAR_SCROLL_INDICATOR_COLOR = exports.VAR_SEPARATOR_COLOR = exports.separatorColor = exports.itemTextSelectedColor = exports.itemTextColor = exports.itemActiveBackgroundColor = exports.itemHoverBackgroundColor = exports.navigationBackgroundColor = void 0;
-
-var _colors = require("@atlaskit/theme/colors");
-
-var navigationBackgroundColor = _colors.N10;
-exports.navigationBackgroundColor = navigationBackgroundColor;
-var itemHoverBackgroundColor = _colors.N30;
-exports.itemHoverBackgroundColor = itemHoverBackgroundColor;
-var itemActiveBackgroundColor = _colors.B50;
-exports.itemActiveBackgroundColor = itemActiveBackgroundColor;
-var itemTextColor = _colors.N500;
-exports.itemTextColor = itemTextColor;
-var itemTextSelectedColor = _colors.B400;
-exports.itemTextSelectedColor = itemTextSelectedColor;
-var separatorColor = _colors.N30;
-exports.separatorColor = separatorColor;
+exports.VAR_SCROLL_INDICATOR_COLOR = exports.VAR_SEPARATOR_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,13 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sectionHeaderStyle = exports.backItemStyle = exports.baseSideNavItemStyle = exports.overrideStyleFunction = exports.ITEM_SIDE_PADDING = void 0;
+exports.sectionHeaderStyle = exports.baseSideNavItemStyle = exports.overrideStyleFunction = exports.ITEM_SIDE_PADDING = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _constants = require("@atlaskit/theme/constants");
 
-var _constants2 = require("./constants");
+var _tokens = require("@atlaskit/tokens");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -40,36 +42,46 @@ 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)
+  },
+  '&:active': {
+    color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B400),
+    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.B50)
+  }
+};
+var selectedStyles = {
+  backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.N30),
+  color: (0, _tokens.token)('color.text.selected', _colors.B400),
+  ':visited': {
+    color: (0, _tokens.token)('color.text.selected', _colors.B400)
+  },
+  '&:hover': {
+    backgroundColor: (0, _tokens.token)('color.background.selected.hover', _colors.N30),
+    color: (0, _tokens.token)('color.text.selected', _colors.N500)
+  },
+  '&:active': {
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B50),
+    color: (0, _tokens.token)('color.text.selected', _colors.B400)
+  }
+};
 
 var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
   var isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled;
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread({
     // This padding is set to ensure that the center of the left icon
     // is approximately center aligned with the horizontal app switcher.
     padding: "".concat(gridSize, "px ").concat(ITEM_SIDE_PADDING, "px"),
     borderRadius: borderRadius,
-    backgroundColor: _constants2.navigationBackgroundColor,
-    color: _constants2.itemTextColor
-  }, !isDisabled && {
-    '&:hover': {
-      backgroundColor: _constants2.itemHoverBackgroundColor,
-      textDecoration: 'none',
-      color: _constants2.itemTextColor
-    },
-    '&:active': {
-      color: _constants2.itemTextSelectedColor,
-      backgroundColor: _constants2.itemActiveBackgroundColor,
-      boxShadow: 'none'
-    }
-  }), isDisabled && {
-    backgroundColor: "".concat(_constants2.navigationBackgroundColor, " !important")
-  }), isSelected && {
-    backgroundColor: _constants2.itemHoverBackgroundColor,
-    '&, &:visited': {
-      color: _constants2.itemTextSelectedColor
-    }
-  }), {}, (0, _defineProperty2.default)({}, '& [data-item-elem-before]', {
+    // -- 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)
+  }, !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
     display: 'flex',
     height: itemIconSize,
@@ -82,16 +94,6 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
 
 exports.baseSideNavItemStyle = baseSideNavItemStyle;
 
-var backItemStyle = function backItemStyle() {
-  return {
-    '&:hover': {
-      backgroundColor: _constants2.itemHoverBackgroundColor
-    }
-  };
-};
-
-exports.backItemStyle = backItemStyle;
-
 var sectionHeaderStyle = function sectionHeaderStyle() {
   return {
     paddingLeft: "".concat(ITEM_SIDE_PADDING, "px"),

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

@@ -9,11 +9,11 @@ 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 _constants = require("../../common/constants");
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
 
 var _styles = require("../../common/styles");
 
@@ -25,35 +25,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: (0, _tokens.token)('color.text.mediumEmphasis', _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: _constants.itemTextColor
-    }), _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

@@ -17,9 +17,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _typography = require("@atlaskit/theme/typography");
 
-var _constants = require("../../common/constants");
+var _tokens = require("@atlaskit/tokens");
 
 var _styles = require("../../common/styles");
 
@@ -43,13 +45,13 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fontSize: _typography.headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
-      color: _constants.itemTextColor
+      color: (0, _tokens.token)('color.text.highEmphasis', _colors.N500)
     }), (0, _defineProperty2.default)(_ref, 'div&:hover', {
       backgroundColor: 'transparent',
       cursor: 'default'
     }), (0, _defineProperty2.default)(_ref, 'div&:active', {
       backgroundColor: 'transparent',
-      color: _constants.itemTextColor
+      color: (0, _tokens.token)('color.text.highEmphasis', _colors.N500)
     }), _ref;
   }, props.cssFn);
   return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {

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

@@ -19,9 +19,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _arrowLeftCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left-circle"));
 
-var _constants = require("../../common/constants");
+var _colors = require("@atlaskit/theme/colors");
 
-var _styles = require("../../common/styles");
+var _tokens = require("@atlaskit/tokens");
 
 var _buttonItem = _interopRequireDefault(require("./button-item"));
 
@@ -33,7 +33,7 @@ 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: _constants.navigationBackgroundColor,
+    secondaryColor: (0, _tokens.token)('color.background.default', _colors.N10),
     label: ""
   }) : _ref$iconBefore,
       onClick = _ref.onClick,
@@ -45,7 +45,6 @@ var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       isInteracted = _useState2[0],
       setIsInteracted = _useState2[1];
 
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.backItemStyle, cssFn);
   var onClickHandler = (0, _react.useCallback)(function (e) {
     if (isInteracted) {
       return;
@@ -56,7 +55,7 @@ var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, [onClick, isInteracted]);
   return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
     isSelected: isSelected || isInteracted,
-    cssFn: cssOverride,
+    cssFn: cssFn,
     iconBefore: iconBefore,
     onClick: onClickHandler,
     ref: ref

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

@@ -9,10 +9,14 @@ exports.containerCSS = exports.innerContainerCSS = exports.outerContainerCSS = v
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _colors = require("@atlaskit/theme/colors");
+
 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; }
@@ -56,7 +60,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       height: scrollIndicatorHeight,
       borderRadius: scrollIndicatorBorderRadius,
-      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat(_constants2.separatorColor, ")"),
+      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30), ")"),
       position: 'absolute',
       zIndex: scrollIndicatorZIndex
     },
@@ -71,7 +75,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       bottom: 0,
       zIndex: scrollIndicatorZIndex,
-      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat(_constants2.separatorColor, ")")
+      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30), ")")
     }
   };
 };
@@ -99,7 +103,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat(_constants2.navigationBackgroundColor, ")"),
+      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat((0, _tokens.token)('color.background.default', _colors.N10), ")"),
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -117,7 +121,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
       marginTop: 'auto',
       position: 'relative',
       zIndex: scrollIndicatorMaskZIndex,
-      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat(_constants2.navigationBackgroundColor, ")")
+      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat((0, _tokens.token)('color.background.default', _colors.N10), ")")
     }
   });
 };

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

@@ -25,9 +25,11 @@ var _core = require("@emotion/core");
 
 var _arrowRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right-circle"));
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _constants = require("@atlaskit/theme/constants");
 
-var _constants2 = require("../../common/constants");
+var _tokens = require("@atlaskit/tokens");
 
 var _styles = require("../../common/styles");
 
@@ -146,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: _constants2.navigationBackgroundColor,
+      secondaryColor: (0, _tokens.token)('color.background.default', _colors.N10),
       label: ""
     }))),
     onClick: onClickHandler,

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

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

package/dist/cjs/version.json

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

package/dist/es2019/common/constants.js

@@ -1,9 +1,2 @@
-import { B400, B50, N10, N30, N500 } from '@atlaskit/theme/colors';
-export const navigationBackgroundColor = N10;
-export const itemHoverBackgroundColor = N30;
-export const itemActiveBackgroundColor = B50;
-export const itemTextColor = N500;
-export const itemTextSelectedColor = B400;
-export const separatorColor = N30;
 export const VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
 export const VAR_SCROLL_INDICATOR_COLOR = '--ds-menu-scroll-indicator-color';

package/dist/es2019/common/styles.js

@@ -1,5 +1,6 @@
+import { B400, B50, N10, N30, N500 } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-import { itemActiveBackgroundColor, itemHoverBackgroundColor, itemTextColor, itemTextSelectedColor, navigationBackgroundColor } from './constants';
+import { token } from '@atlaskit/tokens';
 const gridSize = gridSizeFn();
 const borderRadius = borderRadiusFn();
 const itemIconSize = gridSize * 3;
@@ -16,6 +17,31 @@ export const overrideStyleFunction = (baseStyle, newStyle = () => ({})) => {
     return [baseStyle(state), newStyle(state)];
   };
 };
+const defaultStyles = {
+  '&:hover': {
+    color: token('color.text.mediumEmphasis', N500),
+    backgroundColor: token('color.background.transparentNeutral.hover', N30)
+  },
+  '&:active': {
+    color: token('color.text.mediumEmphasis', B400),
+    backgroundColor: token('color.background.transparentNeutral.pressed', B50)
+  }
+};
+const selectedStyles = {
+  backgroundColor: token('color.background.selected.resting', N30),
+  color: token('color.text.selected', B400),
+  ':visited': {
+    color: token('color.text.selected', B400)
+  },
+  '&:hover': {
+    backgroundColor: token('color.background.selected.hover', N30),
+    color: token('color.text.selected', N500)
+  },
+  '&:active': {
+    backgroundColor: token('color.background.selected.pressed', B50),
+    color: token('color.text.selected', B400)
+  }
+};
 export const baseSideNavItemStyle = ({
   isSelected,
   isDisabled
@@ -25,30 +51,15 @@ export const baseSideNavItemStyle = ({
     // is approximately center aligned with the horizontal app switcher.
     padding: `${gridSize}px ${ITEM_SIDE_PADDING}px`,
     borderRadius,
-    backgroundColor: navigationBackgroundColor,
-    color: itemTextColor,
-    ...(!isDisabled && {
-      '&:hover': {
-        backgroundColor: itemHoverBackgroundColor,
-        textDecoration: 'none',
-        color: itemTextColor
-      },
-      '&:active': {
-        color: itemTextSelectedColor,
-        backgroundColor: itemActiveBackgroundColor,
-        boxShadow: 'none'
-      }
-    }),
-    ...(isDisabled && {
-      backgroundColor: `${navigationBackgroundColor} !important`
-    }),
-    ...(isSelected && {
-      backgroundColor: itemHoverBackgroundColor,
-      '&, &:visited': {
-        color: itemTextSelectedColor
-      }
-    }),
+    // -- 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),
+    ...(!isDisabled && !isSelected && defaultStyles),
+    ...(!isDisabled && isSelected && selectedStyles),
+    // -- END TODO --------------------------------------------------------------
     ['& [data-item-elem-before]']: {
+      // TODO: Can this be moved into menu?
       // center align icons with app-switcher regardless of size
       display: 'flex',
       height: itemIconSize,
@@ -59,13 +70,6 @@ export const baseSideNavItemStyle = ({
     }
   };
 };
-export const backItemStyle = () => {
-  return {
-    '&:hover': {
-      backgroundColor: itemHoverBackgroundColor
-    }
-  };
-};
 export const sectionHeaderStyle = () => {
   return {
     paddingLeft: `${ITEM_SIDE_PADDING}px`,

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { itemTextColor } from '../../common/constants';
+import { N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
@@ -11,23 +12,21 @@ const Container = props => {
 const Footer = props => {
   const cssFn = overrideStyleFunction(() => ({
     userSelect: 'auto',
-    div: {
-      display: 'block',
-      textAlign: 'center',
-      minHeight: '24px',
-      alignItems: 'center',
-      width: '100%'
-    },
-    ['[data-item-elem-before]']: {
+    display: 'block',
+    textAlign: 'center',
+    minHeight: '24px',
+    alignItems: 'center',
+    width: '100%',
+    '[data-item-elem-before]': {
       marginRight: 0,
       marginBottom: '8px',
       display: 'inline-block'
     },
-    ['[data-item-title]']: {
+    '[data-item-title]': {
       textAlign: 'center',
       fontSize: 12
     },
-    ['[data-item-description]']: {
+    '[data-item-description]': {
       textAlign: 'center',
       display: 'inline-block',
       margin: '6px'
@@ -39,7 +38,7 @@ const Footer = props => {
     },
     'div&:active': {
       backgroundColor: 'transparent',
-      color: itemTextColor
+      color: token('color.text.mediumEmphasis', N500)
     }
   }), props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
+import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { itemTextColor } from '../../common/constants';
+import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
@@ -16,7 +17,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
       fontSize: headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
-      color: itemTextColor
+      color: token('color.text.highEmphasis', N500)
     },
     // Will look interactive if the `component` is anything other than a div.
     'div&:hover': {
@@ -25,7 +26,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
     },
     'div&:active': {
       backgroundColor: 'transparent',
-      color: itemTextColor
+      color: token('color.text.highEmphasis', N500)
     }
   }), props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {

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

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useState } from 'react';
 import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
-import { navigationBackgroundColor } from '../../common/constants';
-import { backItemStyle, overrideStyleFunction } from '../../common/styles';
+import { N10 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import ButtonItem from './button-item';
 const GoBackItem = /*#__PURE__*/forwardRef(({
   cssFn,
   iconBefore = /*#__PURE__*/React.createElement(LeftArrow, {
-    secondaryColor: navigationBackgroundColor,
+    secondaryColor: token('color.background.default', N10),
     label: ""
   }),
   onClick,
@@ -15,7 +15,6 @@ const GoBackItem = /*#__PURE__*/forwardRef(({
   ...rest
 }, ref) => {
   const [isInteracted, setIsInteracted] = useState(false);
-  const cssOverride = overrideStyleFunction(backItemStyle, cssFn);
   const onClickHandler = useCallback(e => {
     if (isInteracted) {
       return;
@@ -26,7 +25,7 @@ const GoBackItem = /*#__PURE__*/forwardRef(({
   }, [onClick, isInteracted]);
   return /*#__PURE__*/React.createElement(ButtonItem, _extends({
     isSelected: isSelected || isInteracted,
-    cssFn: cssOverride,
+    cssFn: cssFn,
     iconBefore: iconBefore,
     onClick: onClickHandler,
     ref: ref

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

@@ -1,6 +1,8 @@
+import { N10, N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { navigationBackgroundColor, separatorColor, VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
+import { token } from '@atlaskit/tokens';
+import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
 const scrollIndicatorMaskZIndex = 2;
 const scrollIndicatorZIndex = 1;
 const scrollIndicatorHeight = 2;
@@ -37,7 +39,7 @@ export const outerContainerCSS = opts => ({
     right: containerPadding + opts.scrollbarWidth,
     height: scrollIndicatorHeight,
     borderRadius: scrollIndicatorBorderRadius,
-    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${separatorColor})`,
+    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${token('color.border.neutral', N30)})`,
     position: 'absolute',
     zIndex: scrollIndicatorZIndex
   },
@@ -52,7 +54,7 @@ export const outerContainerCSS = opts => ({
     right: containerPadding + opts.scrollbarWidth,
     bottom: 0,
     zIndex: scrollIndicatorZIndex,
-    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${separatorColor})`
+    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${token('color.border.neutral', N30)})`
   }
 });
 /**
@@ -77,7 +79,7 @@ export const innerContainerCSS = opts => ({
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${navigationBackgroundColor})`,
+      backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${token('color.background.default', N10)})`,
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -95,7 +97,7 @@ export const innerContainerCSS = opts => ({
     marginTop: 'auto',
     position: 'relative',
     zIndex: scrollIndicatorMaskZIndex,
-    backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${navigationBackgroundColor})`
+    backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${token('color.background.default', N10)})`
   }
 });
 export const containerCSS = opts => ({

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

@@ -4,8 +4,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 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 { navigationBackgroundColor } from '../../common/constants';
+import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
@@ -103,7 +104,7 @@ const NestingItem = props => {
       "data-right-arrow": true
     }, jsx(RightArrow, {
       testId: testId && `${testId}--item--right-arrow`,
-      secondaryColor: navigationBackgroundColor,
+      secondaryColor: token('color.background.default', N10),
       label: ""
     }))),
     onClick: onClickHandler,

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

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { jsx } from '@emotion/core';
+import { N10, N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { navigationBackgroundColor } from '../../common/constants';
+import { token } from '@atlaskit/tokens';
 const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
@@ -16,8 +17,9 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
     css: {
       width: '100%',
       height: '100%',
+      color: token('color.text.mediumEmphasis', N500),
       minWidth: gridSize() * 30,
-      backgroundColor: navigationBackgroundColor,
+      backgroundColor: token('color.background.default', N10),
       position: 'relative',
       display: 'flex',
       flexDirection: 'column',

package/dist/es2019/version.json

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

package/dist/esm/common/constants.js

@@ -1,9 +1,2 @@
-import { B400, B50, N10, N30, N500 } from '@atlaskit/theme/colors';
-export var navigationBackgroundColor = N10;
-export var itemHoverBackgroundColor = N30;
-export var itemActiveBackgroundColor = B50;
-export var itemTextColor = N500;
-export var itemTextSelectedColor = B400;
-export var separatorColor = N30;
 export var VAR_SEPARATOR_COLOR = '--ds-menu-seperator-color';
 export var VAR_SCROLL_INDICATOR_COLOR = '--ds-menu-scroll-indicator-color';

package/dist/esm/common/styles.js

@@ -4,8 +4,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
+import { B400, B50, N10, N30, N500 } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-import { itemActiveBackgroundColor, itemHoverBackgroundColor, itemTextColor, itemTextSelectedColor, navigationBackgroundColor } from './constants';
+import { token } from '@atlaskit/tokens';
 var gridSize = gridSizeFn();
 var borderRadius = borderRadiusFn();
 var itemIconSize = gridSize * 3;
@@ -25,35 +26,45 @@ export var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
     return [baseStyle(state), newStyle(state)];
   };
 };
+var defaultStyles = {
+  '&:hover': {
+    color: token('color.text.mediumEmphasis', N500),
+    backgroundColor: token('color.background.transparentNeutral.hover', N30)
+  },
+  '&:active': {
+    color: token('color.text.mediumEmphasis', B400),
+    backgroundColor: token('color.background.transparentNeutral.pressed', B50)
+  }
+};
+var selectedStyles = {
+  backgroundColor: token('color.background.selected.resting', N30),
+  color: token('color.text.selected', B400),
+  ':visited': {
+    color: token('color.text.selected', B400)
+  },
+  '&:hover': {
+    backgroundColor: token('color.background.selected.hover', N30),
+    color: token('color.text.selected', N500)
+  },
+  '&:active': {
+    backgroundColor: token('color.background.selected.pressed', B50),
+    color: token('color.text.selected', B400)
+  }
+};
 export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
   var isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled;
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread({
     // This padding is set to ensure that the center of the left icon
     // is approximately center aligned with the horizontal app switcher.
     padding: "".concat(gridSize, "px ").concat(ITEM_SIDE_PADDING, "px"),
     borderRadius: borderRadius,
-    backgroundColor: navigationBackgroundColor,
-    color: itemTextColor
-  }, !isDisabled && {
-    '&:hover': {
-      backgroundColor: itemHoverBackgroundColor,
-      textDecoration: 'none',
-      color: itemTextColor
-    },
-    '&:active': {
-      color: itemTextSelectedColor,
-      backgroundColor: itemActiveBackgroundColor,
-      boxShadow: 'none'
-    }
-  }), isDisabled && {
-    backgroundColor: "".concat(navigationBackgroundColor, " !important")
-  }), isSelected && {
-    backgroundColor: itemHoverBackgroundColor,
-    '&, &:visited': {
-      color: itemTextSelectedColor
-    }
-  }), {}, _defineProperty({}, '& [data-item-elem-before]', {
+    // -- 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)
+  }, !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
     display: 'flex',
     height: itemIconSize,
@@ -63,13 +74,6 @@ export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
     marginRight: leftIconRightSpacing
   }));
 };
-export var backItemStyle = function backItemStyle() {
-  return {
-    '&:hover': {
-      backgroundColor: itemHoverBackgroundColor
-    }
-  };
-};
 export var sectionHeaderStyle = function sectionHeaderStyle() {
   return {
     paddingLeft: "".concat(ITEM_SIDE_PADDING, "px"),

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { itemTextColor } from '../../common/constants';
+import { N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
@@ -11,35 +11,37 @@ var Container = function Container(props) {
 
 var Footer = function Footer(props) {
   var cssFn = 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',
+        fontSize: 12
+      },
+      '[data-item-description]': {
         textAlign: 'center',
-        minHeight: '24px',
-        alignItems: 'center',
-        width: '100%'
+        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: token('color.text.mediumEmphasis', N500)
       }
-    }, _defineProperty(_ref, '[data-item-elem-before]', {
-      marginRight: 0,
-      marginBottom: '8px',
-      display: 'inline-block'
-    }), _defineProperty(_ref, '[data-item-title]', {
-      textAlign: 'center',
-      fontSize: 12
-    }), _defineProperty(_ref, '[data-item-description]', {
-      textAlign: 'center',
-      display: 'inline-block',
-      margin: '6px'
-    }), _defineProperty(_ref, 'div&:hover', {
-      backgroundColor: 'transparent',
-      cursor: 'default'
-    }), _defineProperty(_ref, 'div&:active', {
-      backgroundColor: 'transparent',
-      color: itemTextColor
-    }), _ref;
+    };
   }, props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
     component: props.component || Container,

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

@@ -2,8 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { forwardRef } from 'react';
+import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { itemTextColor } from '../../common/constants';
+import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
@@ -21,13 +22,13 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
       fontSize: headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
-      color: itemTextColor
+      color: token('color.text.highEmphasis', N500)
     }), _defineProperty(_ref, 'div&:hover', {
       backgroundColor: 'transparent',
       cursor: 'default'
     }), _defineProperty(_ref, 'div&:active', {
       backgroundColor: 'transparent',
-      color: itemTextColor
+      color: token('color.text.highEmphasis', N500)
     }), _ref;
   }, props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {

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

@@ -3,14 +3,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React, { forwardRef, useCallback, useState } from 'react';
 import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
-import { navigationBackgroundColor } from '../../common/constants';
-import { backItemStyle, overrideStyleFunction } from '../../common/styles';
+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: navigationBackgroundColor,
+    secondaryColor: token('color.background.default', N10),
     label: ""
   }) : _ref$iconBefore,
       onClick = _ref.onClick,
@@ -22,7 +22,6 @@ var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isInteracted = _useState2[0],
       setIsInteracted = _useState2[1];
 
-  var cssOverride = overrideStyleFunction(backItemStyle, cssFn);
   var onClickHandler = useCallback(function (e) {
     if (isInteracted) {
       return;
@@ -33,7 +32,7 @@ var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [onClick, isInteracted]);
   return /*#__PURE__*/React.createElement(ButtonItem, _extends({
     isSelected: isSelected || isInteracted,
-    cssFn: cssOverride,
+    cssFn: cssFn,
     iconBefore: iconBefore,
     onClick: onClickHandler,
     ref: ref

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

@@ -4,9 +4,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
+import { N10, N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { navigationBackgroundColor, separatorColor, VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
+import { token } from '@atlaskit/tokens';
+import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
 var scrollIndicatorMaskZIndex = 2;
 var scrollIndicatorZIndex = 1;
 var scrollIndicatorHeight = 2;
@@ -44,7 +46,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       height: scrollIndicatorHeight,
       borderRadius: scrollIndicatorBorderRadius,
-      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(separatorColor, ")"),
+      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30), ")"),
       position: 'absolute',
       zIndex: scrollIndicatorZIndex
     },
@@ -59,7 +61,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       bottom: 0,
       zIndex: scrollIndicatorZIndex,
-      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(separatorColor, ")")
+      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30), ")")
     }
   };
 };
@@ -84,7 +86,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(navigationBackgroundColor, ")"),
+      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(token('color.background.default', N10), ")"),
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -102,7 +104,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
       marginTop: 'auto',
       position: 'relative',
       zIndex: scrollIndicatorMaskZIndex,
-      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(navigationBackgroundColor, ")")
+      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(token('color.background.default', N10), ")")
     }
   });
 };

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

@@ -12,8 +12,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 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 { navigationBackgroundColor } from '../../common/constants';
+import { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
@@ -119,7 +120,7 @@ var NestingItem = function NestingItem(props) {
       "data-right-arrow": true
     }, jsx(RightArrow, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
-      secondaryColor: navigationBackgroundColor,
+      secondaryColor: token('color.background.default', N10),
       label: ""
     }))),
     onClick: onClickHandler,

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

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

package/dist/esm/version.json

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

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

@@ -1,8 +1,2 @@
-export declare const navigationBackgroundColor = "#FAFBFC";
-export declare const itemHoverBackgroundColor = "#EBECF0";
-export declare const itemActiveBackgroundColor = "#DEEBFF";
-export declare const itemTextColor = "#42526E";
-export declare const itemTextSelectedColor = "#0052CC";
-export declare const separatorColor = "#EBECF0";
 export declare const VAR_SEPARATOR_COLOR = "--ds-menu-seperator-color";
 export declare const VAR_SCROLL_INDICATOR_COLOR = "--ds-menu-scroll-indicator-color";

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

@@ -7,5 +7,4 @@ export declare const ITEM_SIDE_PADDING: number;
  */
 export declare const overrideStyleFunction: <TState>(baseStyle: CSSFn<TState>, newStyle?: CSSFn<TState> | undefined) => CSSFn<TState>;
 export declare const baseSideNavItemStyle: CSSFn;
-export declare const backItemStyle: CSSFn;
 export declare const sectionHeaderStyle: StatelessCSSFn;

package/dist/types/components/Item/go-back-item.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonItemProps } from '@atlaskit/menu';
+import type { ButtonItemProps } from '@atlaskit/menu';
 export type { ButtonItemProps as GoBackItemProps } from '@atlaskit/menu';
 declare const GoBackItem: React.ForwardRefExoticComponent<ButtonItemProps & React.RefAttributes<HTMLElement>>;
 export default GoBackItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,10 +24,11 @@
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^1.1.0",
-    "@atlaskit/icon": "^21.6.0",
-    "@atlaskit/menu": "^1.0.0",
+    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/menu": "^1.2.0",
     "@atlaskit/motion": "^1.0.0",
-    "@atlaskit/theme": "^11.1.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -35,13 +36,13 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^1.0.0",
-    "@atlaskit/button": "^15.1.0",
+    "@atlaskit/atlassian-navigation": "^1.2.0",
+    "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/logo": "^13.3.0",
-    "@atlaskit/onboarding": "^10.1.0",
+    "@atlaskit/logo": "^13.5.0",
+    "@atlaskit/onboarding": "^10.3.0",
     "@atlaskit/section-message": "^6.0.0",
-    "@atlaskit/select": "^14.0.0",
+    "@atlaskit/select": "^15.2.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -50,7 +51,7 @@
     "ast-types": "^0.13.3",
     "jest-axe": "^4.0.0",
     "jest-emotion": "^10.0.32",
-    "jscodeshift": "^0.11.0",
+    "jscodeshift": "^0.13.0",
     "raf-stub": "^2.0.1",
     "react-beautiful-dnd": "^12.1.1",
     "typescript": "3.9.6"
@@ -60,18 +61,10 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "ui-components": [
-        "lite-mode"
-      ],
-      "analytics": [
-        "analytics-next"
-      ],
-      "theming": [
-        "new-theming-api"
-      ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ]
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"