@atlaskit/side-navigation 1.1.2 → 1.2.3

package/dist/cjs/components/index.js

@@ -5,106 +5,106 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SideNavigation", {
+Object.defineProperty(exports, "ButtonItem", {
   enumerable: true,
   get: function get() {
-    return _SideNavigation.default;
+    return _Item.ButtonItem;
   }
 });
-Object.defineProperty(exports, "Section", {
+Object.defineProperty(exports, "CustomItem", {
   enumerable: true,
   get: function get() {
-    return _Section.Section;
+    return _Item.CustomItem;
   }
 });
-Object.defineProperty(exports, "HeadingItem", {
+Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
-    return _Section.HeadingItem;
+    return _Footer.default;
   }
 });
-Object.defineProperty(exports, "SkeletonHeadingItem", {
+Object.defineProperty(exports, "GoBackItem", {
   enumerable: true,
   get: function get() {
-    return _Section.SkeletonHeadingItem;
+    return _Item.GoBackItem;
   }
 });
-Object.defineProperty(exports, "NestingItem", {
+Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function get() {
-    return _NestingItem.default;
+    return _Header.default;
   }
 });
-Object.defineProperty(exports, "NavigationContent", {
+Object.defineProperty(exports, "HeadingItem", {
   enumerable: true,
   get: function get() {
-    return _NavigationContent.default;
+    return _Section.HeadingItem;
   }
 });
-Object.defineProperty(exports, "ButtonItem", {
+Object.defineProperty(exports, "LinkItem", {
   enumerable: true,
   get: function get() {
-    return _Item.ButtonItem;
+    return _Item.LinkItem;
   }
 });
-Object.defineProperty(exports, "GoBackItem", {
+Object.defineProperty(exports, "LoadingItems", {
   enumerable: true,
   get: function get() {
-    return _Item.GoBackItem;
+    return _LoadingItems.default;
   }
 });
-Object.defineProperty(exports, "LinkItem", {
+Object.defineProperty(exports, "NavigationContent", {
   enumerable: true,
   get: function get() {
-    return _Item.LinkItem;
+    return _NavigationContent.default;
   }
 });
-Object.defineProperty(exports, "CustomItem", {
+Object.defineProperty(exports, "NavigationFooter", {
   enumerable: true,
   get: function get() {
-    return _Item.CustomItem;
+    return _NavigationFooter.default;
   }
 });
-Object.defineProperty(exports, "SkeletonItem", {
+Object.defineProperty(exports, "NavigationHeader", {
   enumerable: true,
   get: function get() {
-    return _Item.SkeletonItem;
+    return _NavigationHeader.default;
   }
 });
-Object.defineProperty(exports, "Footer", {
+Object.defineProperty(exports, "NestableNavigationContent", {
   enumerable: true,
   get: function get() {
-    return _Footer.default;
+    return _NestableNavigationContent.default;
   }
 });
-Object.defineProperty(exports, "Header", {
+Object.defineProperty(exports, "NestingItem", {
   enumerable: true,
   get: function get() {
-    return _Header.default;
+    return _NestingItem.default;
   }
 });
-Object.defineProperty(exports, "NavigationHeader", {
+Object.defineProperty(exports, "Section", {
   enumerable: true,
   get: function get() {
-    return _NavigationHeader.default;
+    return _Section.Section;
   }
 });
-Object.defineProperty(exports, "NavigationFooter", {
+Object.defineProperty(exports, "SideNavigation", {
   enumerable: true,
   get: function get() {
-    return _NavigationFooter.default;
+    return _SideNavigation.default;
   }
 });
-Object.defineProperty(exports, "LoadingItems", {
+Object.defineProperty(exports, "SkeletonHeadingItem", {
   enumerable: true,
   get: function get() {
-    return _LoadingItems.default;
+    return _Section.SkeletonHeadingItem;
   }
 });
-Object.defineProperty(exports, "NestableNavigationContent", {
+Object.defineProperty(exports, "SkeletonItem", {
   enumerable: true,
   get: function get() {
-    return _NestableNavigationContent.default;
+    return _Item.SkeletonItem;
   }
 });
 

package/dist/cjs/index.js

@@ -3,34 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SideNavigation", {
+Object.defineProperty(exports, "ButtonItem", {
   enumerable: true,
   get: function get() {
-    return _components.SideNavigation;
+    return _components.ButtonItem;
   }
 });
-Object.defineProperty(exports, "Header", {
+Object.defineProperty(exports, "CustomItem", {
   enumerable: true,
   get: function get() {
-    return _components.Header;
+    return _components.CustomItem;
   }
 });
-Object.defineProperty(exports, "NavigationHeader", {
+Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
-    return _components.NavigationHeader;
+    return _components.Footer;
   }
 });
-Object.defineProperty(exports, "NavigationContent", {
+Object.defineProperty(exports, "GoBackItem", {
   enumerable: true,
   get: function get() {
-    return _components.NavigationContent;
+    return _components.GoBackItem;
   }
 });
-Object.defineProperty(exports, "Section", {
+Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function get() {
-    return _components.Section;
+    return _components.Header;
   }
 });
 Object.defineProperty(exports, "HeadingItem", {
@@ -39,76 +39,70 @@ Object.defineProperty(exports, "HeadingItem", {
     return _components.HeadingItem;
   }
 });
-Object.defineProperty(exports, "SkeletonHeadingItem", {
-  enumerable: true,
-  get: function get() {
-    return _components.SkeletonHeadingItem;
-  }
-});
-Object.defineProperty(exports, "NestableNavigationContent", {
+Object.defineProperty(exports, "LinkItem", {
   enumerable: true,
   get: function get() {
-    return _components.NestableNavigationContent;
+    return _components.LinkItem;
   }
 });
-Object.defineProperty(exports, "NestingItem", {
+Object.defineProperty(exports, "LoadingItems", {
   enumerable: true,
   get: function get() {
-    return _components.NestingItem;
+    return _components.LoadingItems;
   }
 });
-Object.defineProperty(exports, "ButtonItem", {
+Object.defineProperty(exports, "NavigationContent", {
   enumerable: true,
   get: function get() {
-    return _components.ButtonItem;
+    return _components.NavigationContent;
   }
 });
-Object.defineProperty(exports, "LinkItem", {
+Object.defineProperty(exports, "NavigationFooter", {
   enumerable: true,
   get: function get() {
-    return _components.LinkItem;
+    return _components.NavigationFooter;
   }
 });
-Object.defineProperty(exports, "GoBackItem", {
+Object.defineProperty(exports, "NavigationHeader", {
   enumerable: true,
   get: function get() {
-    return _components.GoBackItem;
+    return _components.NavigationHeader;
   }
 });
-Object.defineProperty(exports, "CustomItem", {
+Object.defineProperty(exports, "NestableNavigationContent", {
   enumerable: true,
   get: function get() {
-    return _components.CustomItem;
+    return _components.NestableNavigationContent;
   }
 });
-Object.defineProperty(exports, "SkeletonItem", {
+Object.defineProperty(exports, "NestingItem", {
   enumerable: true,
   get: function get() {
-    return _components.SkeletonItem;
+    return _components.NestingItem;
   }
 });
-Object.defineProperty(exports, "Footer", {
+Object.defineProperty(exports, "Section", {
   enumerable: true,
   get: function get() {
-    return _components.Footer;
+    return _components.Section;
   }
 });
-Object.defineProperty(exports, "NavigationFooter", {
+Object.defineProperty(exports, "SideNavigation", {
   enumerable: true,
   get: function get() {
-    return _components.NavigationFooter;
+    return _components.SideNavigation;
   }
 });
-Object.defineProperty(exports, "LoadingItems", {
+Object.defineProperty(exports, "SkeletonHeadingItem", {
   enumerable: true,
   get: function get() {
-    return _components.LoadingItems;
+    return _components.SkeletonHeadingItem;
   }
 });
-Object.defineProperty(exports, "useShouldNestedElementRender", {
+Object.defineProperty(exports, "SkeletonItem", {
   enumerable: true,
   get: function get() {
-    return _context.useShouldNestedElementRender;
+    return _components.SkeletonItem;
   }
 });
 Object.defineProperty(exports, "VAR_SCROLL_INDICATOR_COLOR", {
@@ -123,6 +117,12 @@ Object.defineProperty(exports, "VAR_SEPARATOR_COLOR", {
     return _constants.VAR_SEPARATOR_COLOR;
   }
 });
+Object.defineProperty(exports, "useShouldNestedElementRender", {
+  enumerable: true,
+  get: function get() {
+    return _context.useShouldNestedElementRender;
+  }
+});
 
 var _components = require("./components");
 

package/dist/cjs/version.json

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

package/dist/es2019/common/styles.js

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

package/dist/es2019/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';
 
@@ -12,23 +11,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'
@@ -40,7 +37,7 @@ const Footer = props => {
     },
     'div&:active': {
       backgroundColor: 'transparent',
-      color: token('color.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

@@ -2,7 +2,6 @@ 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 { token } from '@atlaskit/tokens';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 
@@ -17,7 +16,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
       fontSize: headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
-      color: token('color.text.highEmphasis', N500)
+      color: `var(--ds-text, ${N500})`
     },
     // Will look interactive if the `component` is anything other than a div.
     'div&:hover': {
@@ -26,7 +25,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
     },
     'div&:active': {
       backgroundColor: 'transparent',
-      color: token('color.text.highEmphasis', N500)
+      color: `var(--ds-text, ${N500})`
     }
   }), props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {

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

@@ -2,12 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
 const GoBackItem = /*#__PURE__*/forwardRef(({
   cssFn,
   iconBefore = /*#__PURE__*/React.createElement(LeftArrow, {
-    secondaryColor: token('color.background.default', N10),
+    secondaryColor: `var(--ds-surface, ${N10})`,
     label: ""
   }),
   onClick,

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

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

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

@@ -6,7 +6,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';
@@ -104,7 +103,7 @@ const NestingItem = props => {
       "data-right-arrow": true
     }, jsx(RightArrow, {
       testId: testId && `${testId}--item--right-arrow`,
-      secondaryColor: token('color.background.default', N10),
+      secondaryColor: `var(--ds-surface, ${N10})`,
       label: ""
     }))),
     onClick: onClickHandler,

package/dist/es2019/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';
 const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
@@ -17,9 +16,9 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
     css: {
       width: '100%',
       height: '100%',
-      color: token('color.text.mediumEmphasis', N500),
+      color: `var(--ds-text-subtle, ${N500})`,
       minWidth: gridSize() * 30,
-      backgroundColor: token('color.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.1.2",
+	"version": "1.2.3",
 	"sideEffects": false
 }

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;
@@ -28,27 +27,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 +61,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