@atlaskit/side-navigation 1.2.2 → 1.2.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/side-navigation
 
+## 1.2.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.4
+
+### Patch Changes
+
+- [`0f8fe0b80aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0f8fe0b80aa) - Adds deprecated status to `cssFn` prop. Please avoid using this prop as we intend to remove the prop completely in a future release.
+- Updated dependencies
+
+## 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

package/dist/cjs/common/styles.js

@@ -26,6 +26,8 @@ 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.
  */
 
 exports.ITEM_SIDE_PADDING = ITEM_SIDE_PADDING;
@@ -42,27 +44,27 @@ var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
 exports.overrideStyleFunction = overrideStyleFunction;
 var defaultStyles = {
   '&:hover': {
-    color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")"),
-    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N30, ")")
+    color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
   },
   '&:active': {
-    color: "var(--ds-text-mediumEmphasis, ".concat(_colors.B400, ")"),
-    backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.B50, ")")
+    color: "var(--ds-text-subtle, ".concat(_colors.B400, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")")
   }
 };
 var selectedStyles = {
-  backgroundColor: "var(--ds-background-selected-resting, ".concat(_colors.N30, ")"),
-  color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
+  backgroundColor: "var(--ds-background-brand, ".concat(_colors.N30, ")"),
+  color: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
   ':visited': {
-    color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
+    color: "var(--ds-text-brand, ".concat(_colors.B400, ")")
   },
   '&:hover': {
-    backgroundColor: "var(--ds-background-selected-hover, ".concat(_colors.N30, ")"),
-    color: "var(--ds-text-selected, ".concat(_colors.N500, ")")
+    backgroundColor: "var(--ds-background-brand-hovered, ".concat(_colors.N30, ")"),
+    color: "var(--ds-text-brand, ".concat(_colors.N500, ")")
   },
   '&:active': {
-    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B50, ")"),
-    color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
+    backgroundColor: "var(--ds-background-brand-pressed, ".concat(_colors.B50, ")"),
+    color: "var(--ds-text-brand, ".concat(_colors.B400, ")")
   }
 };
 
@@ -77,7 +79,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: "var(--ds-background-default, ".concat(_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

@@ -51,7 +51,7 @@ var Footer = function Footer(props) {
       },
       'div&:active': {
         backgroundColor: 'transparent',
-        color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")")
+        color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
       }
     };
   }, props.cssFn);

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

@@ -45,13 +45,13 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       fontSize: _typography.headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
-      color: "var(--ds-text-highEmphasis, ".concat(_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: "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")")
+      color: "var(--ds-text, ".concat(_colors.N500, ")")
     }), _ref;
   }, props.cssFn);
   return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {

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

@@ -39,7 +39,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn);
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, (0, _extends2.default)({
     ref: ref,
     cssFn: cssOverride

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

@@ -43,7 +43,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn);
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/_react.default.createElement(_menu.CustomItem, (0, _extends2.default)({
     ref: ref,
     cssFn: cssOverride

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

@@ -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: "var(--ds-background-default, ".concat(_colors.N10, ")"),
+    secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
     label: ""
   }) : _ref$iconBefore,
       onClick = _ref.onClick,

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

@@ -39,7 +39,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn);
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, (0, _extends2.default)({
     ref: ref,
     cssFn: cssOverride

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

@@ -25,7 +25,8 @@ var SkeletonItem = function SkeletonItem(props) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonItem, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , (0, _extends2.default)({
     cssFn: function cssFn() {
       return {
         paddingLeft: _styles.ITEM_SIDE_PADDING,

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

@@ -58,7 +58,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       height: scrollIndicatorHeight,
       borderRadius: scrollIndicatorBorderRadius,
-      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(_colors.N30, ")"), ")"),
+      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(_colors.N30, ")"), ")"),
       position: 'absolute',
       zIndex: scrollIndicatorZIndex
     },
@@ -73,7 +73,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       bottom: 0,
       zIndex: scrollIndicatorZIndex,
-      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(_colors.N30, ")"), ")")
+      backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(_colors.N30, ")"), ")")
     }
   };
 };
@@ -101,7 +101,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(_colors.N10, ")"), ")"),
+      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(_colors.N10, ")"), ")"),
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -119,7 +119,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
       marginTop: 'auto',
       position: 'relative',
       zIndex: scrollIndicatorMaskZIndex,
-      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(_colors.N10, ")"), ")")
+      backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(_colors.N10, ")"), ")")
     }
   });
 };

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

@@ -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: "var(--ds-background-default, ".concat(_colors.N10, ")"),
+      secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
       label: ""
     }))),
     onClick: onClickHandler,

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

@@ -25,7 +25,8 @@ var HeadingItem = function HeadingItem(props) {
     return null;
   }
 
-  var cssFn = (0, _styles.overrideStyleFunction)(_styles.sectionHeaderStyle, props.cssFn);
+  var cssFn = (0, _styles.overrideStyleFunction)(_styles.sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/_react.default.createElement(_menu.HeadingItem, (0, _extends2.default)({}, props, {
     cssFn: cssFn
   }));

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

@@ -33,7 +33,8 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_menu.Section, (0, _extends2.default)({}, props, {
-    ref: ref,
+    ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+    ,
     overrides: {
       HeadingItem: {
         cssFn: _styles.sectionHeaderStyle

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

@@ -25,7 +25,8 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonHeadingItem, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , (0, _extends2.default)({
     cssFn: function cssFn() {
       return {
         paddingLeft: _styles.ITEM_SIDE_PADDING,

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

@@ -25,9 +25,9 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     css: {
       width: '100%',
       height: '100%',
-      color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")"),
+      color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
       minWidth: (0, _constants.gridSize)() * 30,
-      backgroundColor: "var(--ds-background-default, ".concat(_colors.N10, ")"),
+      backgroundColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
       position: 'relative',
       display: 'flex',
       flexDirection: 'column',

package/dist/cjs/version.json

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

package/dist/es2019/common/styles.js

@@ -9,6 +9,8 @@ export const 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 const overrideStyleFunction = (baseStyle, newStyle = () => ({})) => {
@@ -18,27 +20,27 @@ export const overrideStyleFunction = (baseStyle, newStyle = () => ({})) => {
 };
 const defaultStyles = {
   '&:hover': {
-    color: `var(--ds-text-mediumEmphasis, ${N500})`,
-    backgroundColor: `var(--ds-background-transparentNeutral-hover, ${N30})`
+    color: `var(--ds-text-subtle, ${N500})`,
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`
   },
   '&:active': {
-    color: `var(--ds-text-mediumEmphasis, ${B400})`,
-    backgroundColor: `var(--ds-background-transparentNeutral-pressed, ${B50})`
+    color: `var(--ds-text-subtle, ${B400})`,
+    backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${B50})`
   }
 };
 const selectedStyles = {
-  backgroundColor: `var(--ds-background-selected-resting, ${N30})`,
-  color: `var(--ds-text-selected, ${B400})`,
+  backgroundColor: `var(--ds-background-brand, ${N30})`,
+  color: `var(--ds-text-brand, ${B400})`,
   ':visited': {
-    color: `var(--ds-text-selected, ${B400})`
+    color: `var(--ds-text-brand, ${B400})`
   },
   '&:hover': {
-    backgroundColor: `var(--ds-background-selected-hover, ${N30})`,
-    color: `var(--ds-text-selected, ${N500})`
+    backgroundColor: `var(--ds-background-brand-hovered, ${N30})`,
+    color: `var(--ds-text-brand, ${N500})`
   },
   '&:active': {
-    backgroundColor: `var(--ds-background-selected-pressed, ${B50})`,
-    color: `var(--ds-text-selected, ${B400})`
+    backgroundColor: `var(--ds-background-brand-pressed, ${B50})`,
+    color: `var(--ds-text-brand, ${B400})`
   }
 };
 export const baseSideNavItemStyle = ({
@@ -53,7 +55,7 @@ export const baseSideNavItemStyle = ({
     // -- 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: `var(--ds-background-default, ${N10})`,
+    backgroundColor: `var(--ds-surface, ${N10})`,
     ...(!isDisabled && !isSelected && defaultStyles),
     ...(!isDisabled && isSelected && selectedStyles),
     // -- END TODO --------------------------------------------------------------

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

@@ -37,7 +37,7 @@ const Footer = props => {
     },
     'div&:active': {
       backgroundColor: 'transparent',
-      color: `var(--ds-text-mediumEmphasis, ${N500})`
+      color: `var(--ds-text-subtle, ${N500})`
     }
   }), props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {

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

@@ -16,7 +16,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
       fontSize: headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
-      color: `var(--ds-text-highEmphasis, ${N500})`
+      color: `var(--ds-text, ${N500})`
     },
     // Will look interactive if the `component` is anything other than a div.
     'div&:hover': {
@@ -25,7 +25,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
     },
     'div&:active': {
       backgroundColor: 'transparent',
-      color: `var(--ds-text-highEmphasis, ${N500})`
+      color: `var(--ds-text, ${N500})`
     }
   }), props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {

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

@@ -16,7 +16,8 @@ const ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract t
     return null;
   }
 
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  const 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/es2019/components/Item/custom-item.js

@@ -21,7 +21,8 @@ const CustomItem = /*#__PURE__*/forwardRef( // Type needed on props to extract t
     return null;
   }
 
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  const 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/es2019/components/Item/go-back-item.js

@@ -6,7 +6,7 @@ import ButtonItem from './button-item';
 const GoBackItem = /*#__PURE__*/forwardRef(({
   cssFn,
   iconBefore = /*#__PURE__*/React.createElement(LeftArrow, {
-    secondaryColor: `var(--ds-background-default, ${N10})`,
+    secondaryColor: `var(--ds-surface, ${N10})`,
     label: ""
   }),
   onClick,

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

@@ -16,7 +16,8 @@ const LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract typ
     return null;
   }
 
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  const 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/es2019/components/Item/skeleton-item.js

@@ -13,7 +13,8 @@ const 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: () => ({
       paddingLeft: ITEM_SIDE_PADDING,
       paddingRight: ITEM_SIDE_PADDING,

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

@@ -38,7 +38,7 @@ export const outerContainerCSS = opts => ({
     right: containerPadding + opts.scrollbarWidth,
     height: scrollIndicatorHeight,
     borderRadius: scrollIndicatorBorderRadius,
-    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border-neutral, ${N30})`})`,
+    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30})`})`,
     position: 'absolute',
     zIndex: scrollIndicatorZIndex
   },
@@ -53,7 +53,7 @@ export const outerContainerCSS = opts => ({
     right: containerPadding + opts.scrollbarWidth,
     bottom: 0,
     zIndex: scrollIndicatorZIndex,
-    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border-neutral, ${N30})`})`
+    backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30})`})`
   }
 });
 /**
@@ -78,7 +78,7 @@ export const innerContainerCSS = opts => ({
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-background-default, ${N10})`})`,
+      backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-surface, ${N10})`})`,
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -96,7 +96,7 @@ export const innerContainerCSS = opts => ({
     marginTop: 'auto',
     position: 'relative',
     zIndex: scrollIndicatorMaskZIndex,
-    backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-background-default, ${N10})`})`
+    backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-surface, ${N10})`})`
   }
 });
 export const containerCSS = opts => ({

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

@@ -103,7 +103,7 @@ const NestingItem = props => {
       "data-right-arrow": true
     }, jsx(RightArrow, {
       testId: testId && `${testId}--item--right-arrow`,
-      secondaryColor: `var(--ds-background-default, ${N10})`,
+      secondaryColor: `var(--ds-surface, ${N10})`,
       label: ""
     }))),
     onClick: onClickHandler,

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

@@ -13,7 +13,8 @@ const HeadingItem = props => {
     return null;
   }
 
-  const cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn);
+  const 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/es2019/components/Section/section.js

@@ -14,7 +14,8 @@ const Section = /*#__PURE__*/forwardRef((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/es2019/components/Section/skeleton-heading-item.js

@@ -13,7 +13,8 @@ const 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: () => ({
       paddingLeft: ITEM_SIDE_PADDING,
       paddingRight: ITEM_SIDE_PADDING

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

@@ -16,9 +16,9 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
     css: {
       width: '100%',
       height: '100%',
-      color: `var(--ds-text-mediumEmphasis, ${N500})`,
+      color: `var(--ds-text-subtle, ${N500})`,
       minWidth: gridSize() * 30,
-      backgroundColor: `var(--ds-background-default, ${N10})`,
+      backgroundColor: `var(--ds-surface, ${N10})`,
       position: 'relative',
       display: 'flex',
       flexDirection: 'column',

package/dist/es2019/version.json

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

package/dist/esm/common/styles.js

@@ -15,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) {
@@ -27,27 +29,27 @@ export var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
 };
 var defaultStyles = {
   '&:hover': {
-    color: "var(--ds-text-mediumEmphasis, ".concat(N500, ")"),
-    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(N30, ")")
+    color: "var(--ds-text-subtle, ".concat(N500, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")
   },
   '&:active': {
-    color: "var(--ds-text-mediumEmphasis, ".concat(B400, ")"),
-    backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(B50, ")")
+    color: "var(--ds-text-subtle, ".concat(B400, ")"),
+    backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")")
   }
 };
 var selectedStyles = {
-  backgroundColor: "var(--ds-background-selected-resting, ".concat(N30, ")"),
-  color: "var(--ds-text-selected, ".concat(B400, ")"),
+  backgroundColor: "var(--ds-background-brand, ".concat(N30, ")"),
+  color: "var(--ds-text-brand, ".concat(B400, ")"),
   ':visited': {
-    color: "var(--ds-text-selected, ".concat(B400, ")")
+    color: "var(--ds-text-brand, ".concat(B400, ")")
   },
   '&:hover': {
-    backgroundColor: "var(--ds-background-selected-hover, ".concat(N30, ")"),
-    color: "var(--ds-text-selected, ".concat(N500, ")")
+    backgroundColor: "var(--ds-background-brand-hovered, ".concat(N30, ")"),
+    color: "var(--ds-text-brand, ".concat(N500, ")")
   },
   '&:active': {
-    backgroundColor: "var(--ds-background-selected-pressed, ".concat(B50, ")"),
-    color: "var(--ds-text-selected, ".concat(B400, ")")
+    backgroundColor: "var(--ds-background-brand-pressed, ".concat(B50, ")"),
+    color: "var(--ds-text-brand, ".concat(B400, ")")
   }
 };
 export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
@@ -61,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: "var(--ds-background-default, ".concat(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

@@ -38,7 +38,7 @@ var Footer = function Footer(props) {
       },
       'div&:active': {
         backgroundColor: 'transparent',
-        color: "var(--ds-text-mediumEmphasis, ".concat(N500, ")")
+        color: "var(--ds-text-subtle, ".concat(N500, ")")
       }
     };
   }, props.cssFn);

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

@@ -22,13 +22,13 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
       fontSize: headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
-      color: "var(--ds-text-highEmphasis, ".concat(N500, ")")
+      color: "var(--ds-text, ".concat(N500, ")")
     }), _defineProperty(_ref, 'div&:hover', {
       backgroundColor: 'transparent',
       cursor: 'default'
     }), _defineProperty(_ref, 'div&:active', {
       backgroundColor: 'transparent',
-      color: "var(--ds-text-highEmphasis, ".concat(N500, ")")
+      color: "var(--ds-text, ".concat(N500, ")")
     }), _ref;
   }, props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {

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

@@ -17,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

@@ -22,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

@@ -10,7 +10,7 @@ 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: "var(--ds-background-default, ".concat(N10, ")"),
+    secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
     label: ""
   }) : _ref$iconBefore,
       onClick = _ref.onClick,

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

@@ -17,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

@@ -45,7 +45,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       height: scrollIndicatorHeight,
       borderRadius: scrollIndicatorBorderRadius,
-      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(N30, ")"), ")"),
+      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(N30, ")"), ")"),
       position: 'absolute',
       zIndex: scrollIndicatorZIndex
     },
@@ -60,7 +60,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
       right: containerPadding + opts.scrollbarWidth,
       bottom: 0,
       zIndex: scrollIndicatorZIndex,
-      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(N30, ")"), ")")
+      backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(N30, ")"), ")")
     }
   };
 };
@@ -85,7 +85,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
       left: 0,
       right: 0,
       height: scrollIndicatorHeight,
-      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(N10, ")"), ")"),
+      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(N10, ")"), ")"),
       position: 'absolute',
       display: 'block',
       zIndex: scrollIndicatorMaskZIndex
@@ -103,7 +103,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
       marginTop: 'auto',
       position: 'relative',
       zIndex: scrollIndicatorMaskZIndex,
-      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(N10, ")"), ")")
+      backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(N10, ")"), ")")
     }
   });
 };

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

@@ -120,7 +120,7 @@ var NestingItem = function NestingItem(props) {
       "data-right-arrow": true
     }, jsx(RightArrow, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
-      secondaryColor: "var(--ds-background-default, ".concat(N10, ")"),
+      secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
       label: ""
     }))),
     onClick: onClickHandler,

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

@@ -14,9 +14,9 @@ var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
     css: {
       width: '100%',
       height: '100%',
-      color: "var(--ds-text-mediumEmphasis, ".concat(N500, ")"),
+      color: "var(--ds-text-subtle, ".concat(N500, ")"),
       minWidth: gridSize() * 30,
-      backgroundColor: "var(--ds-background-default, ".concat(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.2",
+	"version": "1.2.5",
 	"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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.2.2",
+  "version": "1.2.5",
   "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/ds-lib": "^1.4.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/menu": "^1.2.0",
+    "@atlaskit/menu": "^1.3.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.5.0",
+    "@atlaskit/tokens": "^0.7.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -36,8 +36,8 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^2.0.0",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/atlassian-navigation": "^2.1.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
     "@atlaskit/logo": "^13.5.0",
     "@atlaskit/onboarding": "^10.3.0",