@atlaskit/side-navigation 1.2.2 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/common/styles.js +12 -12
  3. package/dist/cjs/components/Footer/index.js +1 -1
  4. package/dist/cjs/components/Header/index.js +2 -2
  5. package/dist/cjs/components/Item/go-back-item.js +1 -1
  6. package/dist/cjs/components/NavigationContent/styles.js +4 -4
  7. package/dist/cjs/components/NestingItem/index.js +1 -1
  8. package/dist/cjs/components/SideNavigation/index.js +2 -2
  9. package/dist/cjs/version.json +1 -1
  10. package/dist/es2019/common/styles.js +12 -12
  11. package/dist/es2019/components/Footer/index.js +1 -1
  12. package/dist/es2019/components/Header/index.js +2 -2
  13. package/dist/es2019/components/Item/go-back-item.js +1 -1
  14. package/dist/es2019/components/NavigationContent/styles.js +4 -4
  15. package/dist/es2019/components/NestingItem/index.js +1 -1
  16. package/dist/es2019/components/SideNavigation/index.js +2 -2
  17. package/dist/es2019/version.json +1 -1
  18. package/dist/esm/common/styles.js +12 -12
  19. package/dist/esm/components/Footer/index.js +1 -1
  20. package/dist/esm/components/Header/index.js +2 -2
  21. package/dist/esm/components/Item/go-back-item.js +1 -1
  22. package/dist/esm/components/NavigationContent/styles.js +4 -4
  23. package/dist/esm/components/NestingItem/index.js +1 -1
  24. package/dist/esm/components/SideNavigation/index.js +2 -2
  25. package/dist/esm/version.json +1 -1
  26. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/side-navigation
2
2
 
3
+ ## 1.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`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.
8
+ - Updated dependencies
9
+
3
10
  ## 1.2.2
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/common/styles.js CHANGED
@@ -42,27 +42,27 @@ var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
42
42
  exports.overrideStyleFunction = overrideStyleFunction;
43
43
  var defaultStyles = {
44
44
  '&:hover': {
45
- color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")"),
46
- backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N30, ")")
45
+ color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
46
+ backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
47
47
  },
48
48
  '&:active': {
49
- color: "var(--ds-text-mediumEmphasis, ".concat(_colors.B400, ")"),
50
- backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.B50, ")")
49
+ color: "var(--ds-text-subtle, ".concat(_colors.B400, ")"),
50
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")")
51
51
  }
52
52
  };
53
53
  var selectedStyles = {
54
- backgroundColor: "var(--ds-background-selected-resting, ".concat(_colors.N30, ")"),
55
- color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
54
+ backgroundColor: "var(--ds-background-brand, ".concat(_colors.N30, ")"),
55
+ color: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
56
56
  ':visited': {
57
- color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
57
+ color: "var(--ds-text-brand, ".concat(_colors.B400, ")")
58
58
  },
59
59
  '&:hover': {
60
- backgroundColor: "var(--ds-background-selected-hover, ".concat(_colors.N30, ")"),
61
- color: "var(--ds-text-selected, ".concat(_colors.N500, ")")
60
+ backgroundColor: "var(--ds-background-brand-hovered, ".concat(_colors.N30, ")"),
61
+ color: "var(--ds-text-brand, ".concat(_colors.N500, ")")
62
62
  },
63
63
  '&:active': {
64
- backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B50, ")"),
65
- color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
64
+ backgroundColor: "var(--ds-background-brand-pressed, ".concat(_colors.B50, ")"),
65
+ color: "var(--ds-text-brand, ".concat(_colors.B400, ")")
66
66
  }
67
67
  };
68
68
 
@@ -77,7 +77,7 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
77
77
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
78
78
  // Menu and side navigation are now color aligned so they do not need this!
79
79
  // See: https://product-fabric.atlassian.net/browse/DSP-1684
80
- backgroundColor: "var(--ds-background-default, ".concat(_colors.N10, ")")
80
+ backgroundColor: "var(--ds-surface, ".concat(_colors.N10, ")")
81
81
  }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, (0, _defineProperty2.default)({}, '& [data-item-elem-before]', {
82
82
  // TODO: Can this be moved into menu?
83
83
  // center align icons with app-switcher regardless of size
package/dist/cjs/components/Footer/index.js CHANGED
@@ -51,7 +51,7 @@ var Footer = function Footer(props) {
51
51
  },
52
52
  'div&:active': {
53
53
  backgroundColor: 'transparent',
54
- color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")")
54
+ color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
55
55
  }
56
56
  };
57
57
  }, props.cssFn);
package/dist/cjs/components/Header/index.js CHANGED
@@ -45,13 +45,13 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
45
45
  fontSize: _typography.headingSizes.h400.size,
46
46
  letterSpacing: '-0.003em',
47
47
  fontWeight: 600,
48
- color: "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")")
48
+ color: "var(--ds-text, ".concat(_colors.N500, ")")
49
49
  }), (0, _defineProperty2.default)(_ref, 'div&:hover', {
50
50
  backgroundColor: 'transparent',
51
51
  cursor: 'default'
52
52
  }), (0, _defineProperty2.default)(_ref, 'div&:active', {
53
53
  backgroundColor: 'transparent',
54
- color: "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")")
54
+ color: "var(--ds-text, ".concat(_colors.N500, ")")
55
55
  }), _ref;
56
56
  }, props.cssFn);
57
57
  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
package/dist/cjs/components/Item/go-back-item.js CHANGED
@@ -33,7 +33,7 @@ var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
33
33
  var cssFn = _ref.cssFn,
34
34
  _ref$iconBefore = _ref.iconBefore,
35
35
  iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/_react.default.createElement(_arrowLeftCircle.default, {
36
- secondaryColor: "var(--ds-background-default, ".concat(_colors.N10, ")"),
36
+ secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
37
37
  label: ""
38
38
  }) : _ref$iconBefore,
39
39
  onClick = _ref.onClick,
package/dist/cjs/components/NavigationContent/styles.js CHANGED
@@ -58,7 +58,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
58
58
  right: containerPadding + opts.scrollbarWidth,
59
59
  height: scrollIndicatorHeight,
60
60
  borderRadius: scrollIndicatorBorderRadius,
61
- backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(_colors.N30, ")"), ")"),
61
+ backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(_colors.N30, ")"), ")"),
62
62
  position: 'absolute',
63
63
  zIndex: scrollIndicatorZIndex
64
64
  },
@@ -73,7 +73,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
73
73
  right: containerPadding + opts.scrollbarWidth,
74
74
  bottom: 0,
75
75
  zIndex: scrollIndicatorZIndex,
76
- backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(_colors.N30, ")"), ")")
76
+ backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(_colors.N30, ")"), ")")
77
77
  }
78
78
  };
79
79
  };
@@ -101,7 +101,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
101
101
  left: 0,
102
102
  right: 0,
103
103
  height: scrollIndicatorHeight,
104
- backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(_colors.N10, ")"), ")"),
104
+ backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(_colors.N10, ")"), ")"),
105
105
  position: 'absolute',
106
106
  display: 'block',
107
107
  zIndex: scrollIndicatorMaskZIndex
@@ -119,7 +119,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
119
119
  marginTop: 'auto',
120
120
  position: 'relative',
121
121
  zIndex: scrollIndicatorMaskZIndex,
122
- backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(_colors.N10, ")"), ")")
122
+ backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(_colors.N10, ")"), ")")
123
123
  }
124
124
  });
125
125
  };
package/dist/cjs/components/NestingItem/index.js CHANGED
@@ -148,7 +148,7 @@ var NestingItem = function NestingItem(props) {
148
148
  "data-right-arrow": true
149
149
  }, (0, _core.jsx)(_arrowRightCircle.default, {
150
150
  testId: testId && "".concat(testId, "--item--right-arrow"),
151
- secondaryColor: "var(--ds-background-default, ".concat(_colors.N10, ")"),
151
+ secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
152
152
  label: ""
153
153
  }))),
154
154
  onClick: onClickHandler,
package/dist/cjs/components/SideNavigation/index.js CHANGED
@@ -25,9 +25,9 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
25
25
  css: {
26
26
  width: '100%',
27
27
  height: '100%',
28
- color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")"),
28
+ color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
29
29
  minWidth: (0, _constants.gridSize)() * 30,
30
- backgroundColor: "var(--ds-background-default, ".concat(_colors.N10, ")"),
30
+ backgroundColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
31
31
  position: 'relative',
32
32
  display: 'flex',
33
33
  flexDirection: 'column',
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/common/styles.js CHANGED
@@ -18,27 +18,27 @@ export const overrideStyleFunction = (baseStyle, newStyle = () => ({})) => {
18
18
  };
19
19
  const defaultStyles = {
20
20
  '&:hover': {
21
- color: `var(--ds-text-mediumEmphasis, ${N500})`,
22
- backgroundColor: `var(--ds-background-transparentNeutral-hover, ${N30})`
21
+ color: `var(--ds-text-subtle, ${N500})`,
22
+ backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`
23
23
  },
24
24
  '&:active': {
25
- color: `var(--ds-text-mediumEmphasis, ${B400})`,
26
- backgroundColor: `var(--ds-background-transparentNeutral-pressed, ${B50})`
25
+ color: `var(--ds-text-subtle, ${B400})`,
26
+ backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${B50})`
27
27
  }
28
28
  };
29
29
  const selectedStyles = {
30
- backgroundColor: `var(--ds-background-selected-resting, ${N30})`,
31
- color: `var(--ds-text-selected, ${B400})`,
30
+ backgroundColor: `var(--ds-background-brand, ${N30})`,
31
+ color: `var(--ds-text-brand, ${B400})`,
32
32
  ':visited': {
33
- color: `var(--ds-text-selected, ${B400})`
33
+ color: `var(--ds-text-brand, ${B400})`
34
34
  },
35
35
  '&:hover': {
36
- backgroundColor: `var(--ds-background-selected-hover, ${N30})`,
37
- color: `var(--ds-text-selected, ${N500})`
36
+ backgroundColor: `var(--ds-background-brand-hovered, ${N30})`,
37
+ color: `var(--ds-text-brand, ${N500})`
38
38
  },
39
39
  '&:active': {
40
- backgroundColor: `var(--ds-background-selected-pressed, ${B50})`,
41
- color: `var(--ds-text-selected, ${B400})`
40
+ backgroundColor: `var(--ds-background-brand-pressed, ${B50})`,
41
+ color: `var(--ds-text-brand, ${B400})`
42
42
  }
43
43
  };
44
44
  export const baseSideNavItemStyle = ({
@@ -53,7 +53,7 @@ export const baseSideNavItemStyle = ({
53
53
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
54
54
  // Menu and side navigation are now color aligned so they do not need this!
55
55
  // See: https://product-fabric.atlassian.net/browse/DSP-1684
56
- backgroundColor: `var(--ds-background-default, ${N10})`,
56
+ backgroundColor: `var(--ds-surface, ${N10})`,
57
57
  ...(!isDisabled && !isSelected && defaultStyles),
58
58
  ...(!isDisabled && isSelected && selectedStyles),
59
59
  // -- END TODO --------------------------------------------------------------
package/dist/es2019/components/Footer/index.js CHANGED
@@ -37,7 +37,7 @@ const Footer = props => {
37
37
  },
38
38
  'div&:active': {
39
39
  backgroundColor: 'transparent',
40
- color: `var(--ds-text-mediumEmphasis, ${N500})`
40
+ color: `var(--ds-text-subtle, ${N500})`
41
41
  }
42
42
  }), props.cssFn);
43
43
  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
package/dist/es2019/components/Header/index.js CHANGED
@@ -16,7 +16,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
16
16
  fontSize: headingSizes.h400.size,
17
17
  letterSpacing: '-0.003em',
18
18
  fontWeight: 600,
19
- color: `var(--ds-text-highEmphasis, ${N500})`
19
+ color: `var(--ds-text, ${N500})`
20
20
  },
21
21
  // Will look interactive if the `component` is anything other than a div.
22
22
  'div&:hover': {
@@ -25,7 +25,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
25
25
  },
26
26
  'div&:active': {
27
27
  backgroundColor: 'transparent',
28
- color: `var(--ds-text-highEmphasis, ${N500})`
28
+ color: `var(--ds-text, ${N500})`
29
29
  }
30
30
  }), props.cssFn);
31
31
  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
package/dist/es2019/components/Item/go-back-item.js CHANGED
@@ -6,7 +6,7 @@ import ButtonItem from './button-item';
6
6
  const GoBackItem = /*#__PURE__*/forwardRef(({
7
7
  cssFn,
8
8
  iconBefore = /*#__PURE__*/React.createElement(LeftArrow, {
9
- secondaryColor: `var(--ds-background-default, ${N10})`,
9
+ secondaryColor: `var(--ds-surface, ${N10})`,
10
10
  label: ""
11
11
  }),
12
12
  onClick,
package/dist/es2019/components/NavigationContent/styles.js CHANGED
@@ -38,7 +38,7 @@ export const outerContainerCSS = opts => ({
38
38
  right: containerPadding + opts.scrollbarWidth,
39
39
  height: scrollIndicatorHeight,
40
40
  borderRadius: scrollIndicatorBorderRadius,
41
- backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border-neutral, ${N30})`})`,
41
+ backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30})`})`,
42
42
  position: 'absolute',
43
43
  zIndex: scrollIndicatorZIndex
44
44
  },
@@ -53,7 +53,7 @@ export const outerContainerCSS = opts => ({
53
53
  right: containerPadding + opts.scrollbarWidth,
54
54
  bottom: 0,
55
55
  zIndex: scrollIndicatorZIndex,
56
- backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border-neutral, ${N30})`})`
56
+ backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30})`})`
57
57
  }
58
58
  });
59
59
  /**
@@ -78,7 +78,7 @@ export const innerContainerCSS = opts => ({
78
78
  left: 0,
79
79
  right: 0,
80
80
  height: scrollIndicatorHeight,
81
- backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-background-default, ${N10})`})`,
81
+ backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-surface, ${N10})`})`,
82
82
  position: 'absolute',
83
83
  display: 'block',
84
84
  zIndex: scrollIndicatorMaskZIndex
@@ -96,7 +96,7 @@ export const innerContainerCSS = opts => ({
96
96
  marginTop: 'auto',
97
97
  position: 'relative',
98
98
  zIndex: scrollIndicatorMaskZIndex,
99
- backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-background-default, ${N10})`})`
99
+ backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-surface, ${N10})`})`
100
100
  }
101
101
  });
102
102
  export const containerCSS = opts => ({
package/dist/es2019/components/NestingItem/index.js CHANGED
@@ -103,7 +103,7 @@ const NestingItem = props => {
103
103
  "data-right-arrow": true
104
104
  }, jsx(RightArrow, {
105
105
  testId: testId && `${testId}--item--right-arrow`,
106
- secondaryColor: `var(--ds-background-default, ${N10})`,
106
+ secondaryColor: `var(--ds-surface, ${N10})`,
107
107
  label: ""
108
108
  }))),
109
109
  onClick: onClickHandler,
package/dist/es2019/components/SideNavigation/index.js CHANGED
@@ -16,9 +16,9 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
16
16
  css: {
17
17
  width: '100%',
18
18
  height: '100%',
19
- color: `var(--ds-text-mediumEmphasis, ${N500})`,
19
+ color: `var(--ds-text-subtle, ${N500})`,
20
20
  minWidth: gridSize() * 30,
21
- backgroundColor: `var(--ds-background-default, ${N10})`,
21
+ backgroundColor: `var(--ds-surface, ${N10})`,
22
22
  position: 'relative',
23
23
  display: 'flex',
24
24
  flexDirection: 'column',
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/common/styles.js CHANGED
@@ -27,27 +27,27 @@ export var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
27
27
  };
28
28
  var defaultStyles = {
29
29
  '&:hover': {
30
- color: "var(--ds-text-mediumEmphasis, ".concat(N500, ")"),
31
- backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(N30, ")")
30
+ color: "var(--ds-text-subtle, ".concat(N500, ")"),
31
+ backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")
32
32
  },
33
33
  '&:active': {
34
- color: "var(--ds-text-mediumEmphasis, ".concat(B400, ")"),
35
- backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(B50, ")")
34
+ color: "var(--ds-text-subtle, ".concat(B400, ")"),
35
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")")
36
36
  }
37
37
  };
38
38
  var selectedStyles = {
39
- backgroundColor: "var(--ds-background-selected-resting, ".concat(N30, ")"),
40
- color: "var(--ds-text-selected, ".concat(B400, ")"),
39
+ backgroundColor: "var(--ds-background-brand, ".concat(N30, ")"),
40
+ color: "var(--ds-text-brand, ".concat(B400, ")"),
41
41
  ':visited': {
42
- color: "var(--ds-text-selected, ".concat(B400, ")")
42
+ color: "var(--ds-text-brand, ".concat(B400, ")")
43
43
  },
44
44
  '&:hover': {
45
- backgroundColor: "var(--ds-background-selected-hover, ".concat(N30, ")"),
46
- color: "var(--ds-text-selected, ".concat(N500, ")")
45
+ backgroundColor: "var(--ds-background-brand-hovered, ".concat(N30, ")"),
46
+ color: "var(--ds-text-brand, ".concat(N500, ")")
47
47
  },
48
48
  '&:active': {
49
- backgroundColor: "var(--ds-background-selected-pressed, ".concat(B50, ")"),
50
- color: "var(--ds-text-selected, ".concat(B400, ")")
49
+ backgroundColor: "var(--ds-background-brand-pressed, ".concat(B50, ")"),
50
+ color: "var(--ds-text-brand, ".concat(B400, ")")
51
51
  }
52
52
  };
53
53
  export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
@@ -61,7 +61,7 @@ export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
61
61
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
62
62
  // Menu and side navigation are now color aligned so they do not need this!
63
63
  // See: https://product-fabric.atlassian.net/browse/DSP-1684
64
- backgroundColor: "var(--ds-background-default, ".concat(N10, ")")
64
+ backgroundColor: "var(--ds-surface, ".concat(N10, ")")
65
65
  }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, _defineProperty({}, '& [data-item-elem-before]', {
66
66
  // TODO: Can this be moved into menu?
67
67
  // center align icons with app-switcher regardless of size
package/dist/esm/components/Footer/index.js CHANGED
@@ -38,7 +38,7 @@ var Footer = function Footer(props) {
38
38
  },
39
39
  'div&:active': {
40
40
  backgroundColor: 'transparent',
41
- color: "var(--ds-text-mediumEmphasis, ".concat(N500, ")")
41
+ color: "var(--ds-text-subtle, ".concat(N500, ")")
42
42
  }
43
43
  };
44
44
  }, props.cssFn);
package/dist/esm/components/Header/index.js CHANGED
@@ -22,13 +22,13 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
22
22
  fontSize: headingSizes.h400.size,
23
23
  letterSpacing: '-0.003em',
24
24
  fontWeight: 600,
25
- color: "var(--ds-text-highEmphasis, ".concat(N500, ")")
25
+ color: "var(--ds-text, ".concat(N500, ")")
26
26
  }), _defineProperty(_ref, 'div&:hover', {
27
27
  backgroundColor: 'transparent',
28
28
  cursor: 'default'
29
29
  }), _defineProperty(_ref, 'div&:active', {
30
30
  backgroundColor: 'transparent',
31
- color: "var(--ds-text-highEmphasis, ".concat(N500, ")")
31
+ color: "var(--ds-text, ".concat(N500, ")")
32
32
  }), _ref;
33
33
  }, props.cssFn);
34
34
  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
package/dist/esm/components/Item/go-back-item.js CHANGED
@@ -10,7 +10,7 @@ var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
10
10
  var cssFn = _ref.cssFn,
11
11
  _ref$iconBefore = _ref.iconBefore,
12
12
  iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/React.createElement(LeftArrow, {
13
- secondaryColor: "var(--ds-background-default, ".concat(N10, ")"),
13
+ secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
14
14
  label: ""
15
15
  }) : _ref$iconBefore,
16
16
  onClick = _ref.onClick,
package/dist/esm/components/NavigationContent/styles.js CHANGED
@@ -45,7 +45,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
45
45
  right: containerPadding + opts.scrollbarWidth,
46
46
  height: scrollIndicatorHeight,
47
47
  borderRadius: scrollIndicatorBorderRadius,
48
- backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(N30, ")"), ")"),
48
+ backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(N30, ")"), ")"),
49
49
  position: 'absolute',
50
50
  zIndex: scrollIndicatorZIndex
51
51
  },
@@ -60,7 +60,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
60
60
  right: containerPadding + opts.scrollbarWidth,
61
61
  bottom: 0,
62
62
  zIndex: scrollIndicatorZIndex,
63
- backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(N30, ")"), ")")
63
+ backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(N30, ")"), ")")
64
64
  }
65
65
  };
66
66
  };
@@ -85,7 +85,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
85
85
  left: 0,
86
86
  right: 0,
87
87
  height: scrollIndicatorHeight,
88
- backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(N10, ")"), ")"),
88
+ backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(N10, ")"), ")"),
89
89
  position: 'absolute',
90
90
  display: 'block',
91
91
  zIndex: scrollIndicatorMaskZIndex
@@ -103,7 +103,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
103
103
  marginTop: 'auto',
104
104
  position: 'relative',
105
105
  zIndex: scrollIndicatorMaskZIndex,
106
- backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(N10, ")"), ")")
106
+ backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-surface, ".concat(N10, ")"), ")")
107
107
  }
108
108
  });
109
109
  };
package/dist/esm/components/NestingItem/index.js CHANGED
@@ -120,7 +120,7 @@ var NestingItem = function NestingItem(props) {
120
120
  "data-right-arrow": true
121
121
  }, jsx(RightArrow, {
122
122
  testId: testId && "".concat(testId, "--item--right-arrow"),
123
- secondaryColor: "var(--ds-background-default, ".concat(N10, ")"),
123
+ secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
124
124
  label: ""
125
125
  }))),
126
126
  onClick: onClickHandler,
package/dist/esm/components/SideNavigation/index.js CHANGED
@@ -14,9 +14,9 @@ var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
14
14
  css: {
15
15
  width: '100%',
16
16
  height: '100%',
17
- color: "var(--ds-text-mediumEmphasis, ".concat(N500, ")"),
17
+ color: "var(--ds-text-subtle, ".concat(N500, ")"),
18
18
  minWidth: gridSize() * 30,
19
- backgroundColor: "var(--ds-background-default, ".concat(N10, ")"),
19
+ backgroundColor: "var(--ds-surface, ".concat(N10, ")"),
20
20
  position: 'relative',
21
21
  display: 'flex',
22
22
  flexDirection: 'column',
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.2.2",
3
+ "version": "1.2.3",
4
4
  "description": "A highly composable side navigation component that supports nested views.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
28
28
  "@atlaskit/menu": "^1.2.0",
29
29
  "@atlaskit/motion": "^1.0.0",
30
30
  "@atlaskit/theme": "^12.1.0",
31
- "@atlaskit/tokens": "^0.5.0",
31
+ "@atlaskit/tokens": "^0.6.0",
32
32
  "@babel/runtime": "^7.0.0",
33
33
  "@emotion/core": "^10.0.9"
34
34
  },