@atlaskit/side-navigation 1.1.0 → 1.2.1

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 +54 -0
  2. package/dist/cjs/common/styles.js +12 -14
  3. package/dist/cjs/components/Footer/index.js +28 -30
  4. package/dist/cjs/components/Header/index.js +2 -4
  5. package/dist/cjs/components/Item/go-back-item.js +1 -3
  6. package/dist/cjs/components/NavigationContent/styles.js +4 -6
  7. package/dist/cjs/components/NestingItem/index.js +1 -3
  8. package/dist/cjs/components/SideNavigation/index.js +2 -4
  9. package/dist/cjs/version.json +1 -1
  10. package/dist/es2019/common/styles.js +12 -13
  11. package/dist/es2019/components/Footer/index.js +9 -12
  12. package/dist/es2019/components/Header/index.js +2 -3
  13. package/dist/es2019/components/Item/go-back-item.js +1 -2
  14. package/dist/es2019/components/NavigationContent/styles.js +4 -5
  15. package/dist/es2019/components/NestingItem/index.js +1 -2
  16. package/dist/es2019/components/SideNavigation/index.js +2 -3
  17. package/dist/es2019/version.json +1 -1
  18. package/dist/esm/common/styles.js +12 -13
  19. package/dist/esm/components/Footer/index.js +28 -28
  20. package/dist/esm/components/Header/index.js +2 -3
  21. package/dist/esm/components/Item/go-back-item.js +1 -2
  22. package/dist/esm/components/NavigationContent/styles.js +4 -5
  23. package/dist/esm/components/NestingItem/index.js +1 -2
  24. package/dist/esm/components/SideNavigation/index.js +2 -3
  25. package/dist/esm/version.json +1 -1
  26. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,59 @@
1
1
  # @atlaskit/side-navigation
2
2
 
3
+ ## 1.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
8
+ - Updated dependencies
9
+
10
+ ## 1.2.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`213bfd77e61`](https://bitbucket.org/atlassian/atlassian-frontend/commits/213bfd77e61) - The DOM structure of menu item components has been flattened.
15
+ If you used CSS hacks (via className or cssFn) that targetted specific DOM nodes you may be broken.
16
+
17
+ Previously the structure looked like:
18
+
19
+ ```jsx
20
+ <button>
21
+ <div> // <-- this intermediate div has been removed
22
+ <span>
23
+ <span />
24
+ </span>
25
+ </div>
26
+ </button>
27
+ ```
28
+
29
+ Now it looks like:
30
+
31
+ ```jsx
32
+ <button>
33
+ <span>
34
+ <span />
35
+ </span>
36
+ </button>
37
+ ```
38
+
39
+ - [`e4f332d8697`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4f332d8697) - Internal refactor to update style declarations to match menu changes.
40
+
41
+ ### Patch Changes
42
+
43
+ - Updated dependencies
44
+
45
+ ## 1.1.2
46
+
47
+ ### Patch Changes
48
+
49
+ - Updated dependencies
50
+
51
+ ## 1.1.1
52
+
53
+ ### Patch Changes
54
+
55
+ - Updated dependencies
56
+
3
57
  ## 1.1.0
4
58
 
5
59
  ### Minor Changes
package/dist/cjs/common/styles.js CHANGED
@@ -13,8 +13,6 @@ var _colors = require("@atlaskit/theme/colors");
13
13
 
14
14
  var _constants = require("@atlaskit/theme/constants");
15
15
 
16
- var _tokens = require("@atlaskit/tokens");
17
-
18
16
  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; }
19
17
 
20
18
  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) { (0, _defineProperty2.default)(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; }
@@ -44,27 +42,27 @@ var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
44
42
  exports.overrideStyleFunction = overrideStyleFunction;
45
43
  var defaultStyles = {
46
44
  '&:hover': {
47
- color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
48
- backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30)
45
+ color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")"),
46
+ backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N30, ")")
49
47
  },
50
48
  '&:active': {
51
- color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B400),
52
- backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.B50)
49
+ color: "var(--ds-text-mediumEmphasis, ".concat(_colors.B400, ")"),
50
+ backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.B50, ")")
53
51
  }
54
52
  };
55
53
  var selectedStyles = {
56
- backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.N30),
57
- color: (0, _tokens.token)('color.text.selected', _colors.B400),
54
+ backgroundColor: "var(--ds-background-selected-resting, ".concat(_colors.N30, ")"),
55
+ color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
58
56
  ':visited': {
59
- color: (0, _tokens.token)('color.text.selected', _colors.B400)
57
+ color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
60
58
  },
61
59
  '&:hover': {
62
- backgroundColor: (0, _tokens.token)('color.background.selected.hover', _colors.N30),
63
- color: (0, _tokens.token)('color.text.selected', _colors.N500)
60
+ backgroundColor: "var(--ds-background-selected-hover, ".concat(_colors.N30, ")"),
61
+ color: "var(--ds-text-selected, ".concat(_colors.N500, ")")
64
62
  },
65
63
  '&:active': {
66
- backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B50),
67
- color: (0, _tokens.token)('color.text.selected', _colors.B400)
64
+ backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B50, ")"),
65
+ color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
68
66
  }
69
67
  };
70
68
 
@@ -79,7 +77,7 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
79
77
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
80
78
  // Menu and side navigation are now color aligned so they do not need this!
81
79
  // See: https://product-fabric.atlassian.net/browse/DSP-1684
82
- backgroundColor: (0, _tokens.token)('color.background.default', _colors.N10)
80
+ backgroundColor: "var(--ds-background-default, ".concat(_colors.N10, ")")
83
81
  }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, (0, _defineProperty2.default)({}, '& [data-item-elem-before]', {
84
82
  // TODO: Can this be moved into menu?
85
83
  // center align icons with app-switcher regardless of size
package/dist/cjs/components/Footer/index.js CHANGED
@@ -9,14 +9,10 @@ exports.default = void 0;
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
12
  var _react = _interopRequireDefault(require("react"));
15
13
 
16
14
  var _colors = require("@atlaskit/theme/colors");
17
15
 
18
- var _tokens = require("@atlaskit/tokens");
19
-
20
16
  var _styles = require("../../common/styles");
21
17
 
22
18
  var _Item = require("../Item");
@@ -27,35 +23,37 @@ var Container = function Container(props) {
27
23
 
28
24
  var Footer = function Footer(props) {
29
25
  var cssFn = (0, _styles.overrideStyleFunction)(function () {
30
- var _ref;
31
-
32
- return _ref = {
26
+ return {
33
27
  userSelect: 'auto',
34
- div: {
35
- display: 'block',
28
+ display: 'block',
29
+ textAlign: 'center',
30
+ minHeight: '24px',
31
+ alignItems: 'center',
32
+ width: '100%',
33
+ '[data-item-elem-before]': {
34
+ marginRight: 0,
35
+ marginBottom: '8px',
36
+ display: 'inline-block'
37
+ },
38
+ '[data-item-title]': {
36
39
  textAlign: 'center',
37
- minHeight: '24px',
38
- alignItems: 'center',
39
- width: '100%'
40
+ fontSize: 12
41
+ },
42
+ '[data-item-description]': {
43
+ textAlign: 'center',
44
+ display: 'inline-block',
45
+ margin: '6px'
46
+ },
47
+ // Will look interactive if the `component` is anything other than a div.
48
+ 'div&:hover': {
49
+ backgroundColor: 'transparent',
50
+ cursor: 'default'
51
+ },
52
+ 'div&:active': {
53
+ backgroundColor: 'transparent',
54
+ color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")")
40
55
  }
41
- }, (0, _defineProperty2.default)(_ref, '[data-item-elem-before]', {
42
- marginRight: 0,
43
- marginBottom: '8px',
44
- display: 'inline-block'
45
- }), (0, _defineProperty2.default)(_ref, '[data-item-title]', {
46
- textAlign: 'center',
47
- fontSize: 12
48
- }), (0, _defineProperty2.default)(_ref, '[data-item-description]', {
49
- textAlign: 'center',
50
- display: 'inline-block',
51
- margin: '6px'
52
- }), (0, _defineProperty2.default)(_ref, 'div&:hover', {
53
- backgroundColor: 'transparent',
54
- cursor: 'default'
55
- }), (0, _defineProperty2.default)(_ref, 'div&:active', {
56
- backgroundColor: 'transparent',
57
- color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500)
58
- }), _ref;
56
+ };
59
57
  }, props.cssFn);
60
58
  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
61
59
  component: props.component || Container,
package/dist/cjs/components/Header/index.js CHANGED
@@ -21,8 +21,6 @@ var _colors = require("@atlaskit/theme/colors");
21
21
 
22
22
  var _typography = require("@atlaskit/theme/typography");
23
23
 
24
- var _tokens = require("@atlaskit/tokens");
25
-
26
24
  var _styles = require("../../common/styles");
27
25
 
28
26
  var _Item = require("../Item");
@@ -45,13 +43,13 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
45
43
  fontSize: _typography.headingSizes.h400.size,
46
44
  letterSpacing: '-0.003em',
47
45
  fontWeight: 600,
48
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N500)
46
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")")
49
47
  }), (0, _defineProperty2.default)(_ref, 'div&:hover', {
50
48
  backgroundColor: 'transparent',
51
49
  cursor: 'default'
52
50
  }), (0, _defineProperty2.default)(_ref, 'div&:active', {
53
51
  backgroundColor: 'transparent',
54
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N500)
52
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")")
55
53
  }), _ref;
56
54
  }, props.cssFn);
57
55
  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
package/dist/cjs/components/Item/go-back-item.js CHANGED
@@ -21,8 +21,6 @@ var _arrowLeftCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arro
21
21
 
22
22
  var _colors = require("@atlaskit/theme/colors");
23
23
 
24
- var _tokens = require("@atlaskit/tokens");
25
-
26
24
  var _buttonItem = _interopRequireDefault(require("./button-item"));
27
25
 
28
26
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,7 +31,7 @@ var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
33
31
  var cssFn = _ref.cssFn,
34
32
  _ref$iconBefore = _ref.iconBefore,
35
33
  iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/_react.default.createElement(_arrowLeftCircle.default, {
36
- secondaryColor: (0, _tokens.token)('color.background.default', _colors.N10),
34
+ secondaryColor: "var(--ds-background-default, ".concat(_colors.N10, ")"),
37
35
  label: ""
38
36
  }) : _ref$iconBefore,
39
37
  onClick = _ref.onClick,
package/dist/cjs/components/NavigationContent/styles.js CHANGED
@@ -15,8 +15,6 @@ var _constants = require("@atlaskit/theme/constants");
15
15
 
16
16
  var _typography = require("@atlaskit/theme/typography");
17
17
 
18
- var _tokens = require("@atlaskit/tokens");
19
-
20
18
  var _constants2 = require("../../common/constants");
21
19
 
22
20
  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; }
@@ -60,7 +58,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
60
58
  right: containerPadding + opts.scrollbarWidth,
61
59
  height: scrollIndicatorHeight,
62
60
  borderRadius: scrollIndicatorBorderRadius,
63
- backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30), ")"),
61
+ backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(_colors.N30, ")"), ")"),
64
62
  position: 'absolute',
65
63
  zIndex: scrollIndicatorZIndex
66
64
  },
@@ -75,7 +73,7 @@ var outerContainerCSS = function outerContainerCSS(opts) {
75
73
  right: containerPadding + opts.scrollbarWidth,
76
74
  bottom: 0,
77
75
  zIndex: scrollIndicatorZIndex,
78
- backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30), ")")
76
+ backgroundColor: "var(".concat(_constants2.VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(_colors.N30, ")"), ")")
79
77
  }
80
78
  };
81
79
  };
@@ -103,7 +101,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
103
101
  left: 0,
104
102
  right: 0,
105
103
  height: scrollIndicatorHeight,
106
- backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat((0, _tokens.token)('color.background.default', _colors.N10), ")"),
104
+ backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(_colors.N10, ")"), ")"),
107
105
  position: 'absolute',
108
106
  display: 'block',
109
107
  zIndex: scrollIndicatorMaskZIndex
@@ -121,7 +119,7 @@ var innerContainerCSS = function innerContainerCSS(opts) {
121
119
  marginTop: 'auto',
122
120
  position: 'relative',
123
121
  zIndex: scrollIndicatorMaskZIndex,
124
- backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat((0, _tokens.token)('color.background.default', _colors.N10), ")")
122
+ backgroundColor: "var(".concat(_constants2.VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(_colors.N10, ")"), ")")
125
123
  }
126
124
  });
127
125
  };
package/dist/cjs/components/NestingItem/index.js CHANGED
@@ -29,8 +29,6 @@ var _colors = require("@atlaskit/theme/colors");
29
29
 
30
30
  var _constants = require("@atlaskit/theme/constants");
31
31
 
32
- var _tokens = require("@atlaskit/tokens");
33
-
34
32
  var _styles = require("../../common/styles");
35
33
 
36
34
  var _index = require("../index");
@@ -148,7 +146,7 @@ var NestingItem = function NestingItem(props) {
148
146
  "data-right-arrow": true
149
147
  }, (0, _core.jsx)(_arrowRightCircle.default, {
150
148
  testId: testId && "".concat(testId, "--item--right-arrow"),
151
- secondaryColor: (0, _tokens.token)('color.background.default', _colors.N10),
149
+ secondaryColor: "var(--ds-background-default, ".concat(_colors.N10, ")"),
152
150
  label: ""
153
151
  }))),
154
152
  onClick: onClickHandler,
package/dist/cjs/components/SideNavigation/index.js CHANGED
@@ -13,8 +13,6 @@ var _colors = require("@atlaskit/theme/colors");
13
13
 
14
14
  var _constants = require("@atlaskit/theme/constants");
15
15
 
16
- var _tokens = require("@atlaskit/tokens");
17
-
18
16
  /** @jsx jsx */
19
17
  var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
20
18
  var children = props.children,
@@ -27,9 +25,9 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
27
25
  css: {
28
26
  width: '100%',
29
27
  height: '100%',
30
- color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
28
+ color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")"),
31
29
  minWidth: (0, _constants.gridSize)() * 30,
32
- backgroundColor: (0, _tokens.token)('color.background.default', _colors.N10),
30
+ backgroundColor: "var(--ds-background-default, ".concat(_colors.N10, ")"),
33
31
  position: 'relative',
34
32
  display: 'flex',
35
33
  flexDirection: 'column',
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.1.0",
3
+ "version": "1.2.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/common/styles.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { B400, B50, N10, N30, N500 } from '@atlaskit/theme/colors';
2
2
  import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
3
- import { token } from '@atlaskit/tokens';
4
3
  const gridSize = gridSizeFn();
5
4
  const borderRadius = borderRadiusFn();
6
5
  const itemIconSize = gridSize * 3;
@@ -19,27 +18,27 @@ export const overrideStyleFunction = (baseStyle, newStyle = () => ({})) => {
19
18
  };
20
19
  const defaultStyles = {
21
20
  '&:hover': {
22
- color: token('color.text.mediumEmphasis', N500),
23
- backgroundColor: token('color.background.transparentNeutral.hover', N30)
21
+ color: `var(--ds-text-mediumEmphasis, ${N500})`,
22
+ backgroundColor: `var(--ds-background-transparentNeutral-hover, ${N30})`
24
23
  },
25
24
  '&:active': {
26
- color: token('color.text.mediumEmphasis', B400),
27
- backgroundColor: token('color.background.transparentNeutral.pressed', B50)
25
+ color: `var(--ds-text-mediumEmphasis, ${B400})`,
26
+ backgroundColor: `var(--ds-background-transparentNeutral-pressed, ${B50})`
28
27
  }
29
28
  };
30
29
  const selectedStyles = {
31
- backgroundColor: token('color.background.selected.resting', N30),
32
- color: token('color.text.selected', B400),
30
+ backgroundColor: `var(--ds-background-selected-resting, ${N30})`,
31
+ color: `var(--ds-text-selected, ${B400})`,
33
32
  ':visited': {
34
- color: token('color.text.selected', B400)
33
+ color: `var(--ds-text-selected, ${B400})`
35
34
  },
36
35
  '&:hover': {
37
- backgroundColor: token('color.background.selected.hover', N30),
38
- color: token('color.text.selected', N500)
36
+ backgroundColor: `var(--ds-background-selected-hover, ${N30})`,
37
+ color: `var(--ds-text-selected, ${N500})`
39
38
  },
40
39
  '&:active': {
41
- backgroundColor: token('color.background.selected.pressed', B50),
42
- color: token('color.text.selected', B400)
40
+ backgroundColor: `var(--ds-background-selected-pressed, ${B50})`,
41
+ color: `var(--ds-text-selected, ${B400})`
43
42
  }
44
43
  };
45
44
  export const baseSideNavItemStyle = ({
@@ -54,7 +53,7 @@ export const baseSideNavItemStyle = ({
54
53
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
55
54
  // Menu and side navigation are now color aligned so they do not need this!
56
55
  // See: https://product-fabric.atlassian.net/browse/DSP-1684
57
- backgroundColor: token('color.background.default', N10),
56
+ backgroundColor: `var(--ds-background-default, ${N10})`,
58
57
  ...(!isDisabled && !isSelected && defaultStyles),
59
58
  ...(!isDisabled && isSelected && selectedStyles),
60
59
  // -- END TODO --------------------------------------------------------------
package/dist/es2019/components/Footer/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React from 'react';
3
3
  import { N500 } from '@atlaskit/theme/colors';
4
- import { token } from '@atlaskit/tokens';
5
4
  import { overrideStyleFunction } from '../../common/styles';
6
5
  import { CustomItem } from '../Item';
7
6
 
@@ -12,23 +11,21 @@ const Container = props => {
12
11
  const Footer = props => {
13
12
  const cssFn = overrideStyleFunction(() => ({
14
13
  userSelect: 'auto',
15
- div: {
16
- display: 'block',
17
- textAlign: 'center',
18
- minHeight: '24px',
19
- alignItems: 'center',
20
- width: '100%'
21
- },
22
- ['[data-item-elem-before]']: {
14
+ display: 'block',
15
+ textAlign: 'center',
16
+ minHeight: '24px',
17
+ alignItems: 'center',
18
+ width: '100%',
19
+ '[data-item-elem-before]': {
23
20
  marginRight: 0,
24
21
  marginBottom: '8px',
25
22
  display: 'inline-block'
26
23
  },
27
- ['[data-item-title]']: {
24
+ '[data-item-title]': {
28
25
  textAlign: 'center',
29
26
  fontSize: 12
30
27
  },
31
- ['[data-item-description]']: {
28
+ '[data-item-description]': {
32
29
  textAlign: 'center',
33
30
  display: 'inline-block',
34
31
  margin: '6px'
@@ -40,7 +37,7 @@ const Footer = props => {
40
37
  },
41
38
  'div&:active': {
42
39
  backgroundColor: 'transparent',
43
- color: token('color.text.mediumEmphasis', N500)
40
+ color: `var(--ds-text-mediumEmphasis, ${N500})`
44
41
  }
45
42
  }), props.cssFn);
46
43
  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
package/dist/es2019/components/Header/index.js CHANGED
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { forwardRef } from 'react';
3
3
  import { N500 } from '@atlaskit/theme/colors';
4
4
  import { headingSizes } from '@atlaskit/theme/typography';
5
- import { token } from '@atlaskit/tokens';
6
5
  import { overrideStyleFunction } from '../../common/styles';
7
6
  import { CustomItem } from '../Item';
8
7
 
@@ -17,7 +16,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
17
16
  fontSize: headingSizes.h400.size,
18
17
  letterSpacing: '-0.003em',
19
18
  fontWeight: 600,
20
- color: token('color.text.highEmphasis', N500)
19
+ color: `var(--ds-text-highEmphasis, ${N500})`
21
20
  },
22
21
  // Will look interactive if the `component` is anything other than a div.
23
22
  'div&:hover': {
@@ -26,7 +25,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
26
25
  },
27
26
  'div&:active': {
28
27
  backgroundColor: 'transparent',
29
- color: token('color.text.highEmphasis', N500)
28
+ color: `var(--ds-text-highEmphasis, ${N500})`
30
29
  }
31
30
  }), props.cssFn);
32
31
  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
package/dist/es2019/components/Item/go-back-item.js CHANGED
@@ -2,12 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { forwardRef, useCallback, useState } from 'react';
3
3
  import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
4
4
  import { N10 } from '@atlaskit/theme/colors';
5
- import { token } from '@atlaskit/tokens';
6
5
  import ButtonItem from './button-item';
7
6
  const GoBackItem = /*#__PURE__*/forwardRef(({
8
7
  cssFn,
9
8
  iconBefore = /*#__PURE__*/React.createElement(LeftArrow, {
10
- secondaryColor: token('color.background.default', N10),
9
+ secondaryColor: `var(--ds-background-default, ${N10})`,
11
10
  label: ""
12
11
  }),
13
12
  onClick,
package/dist/es2019/components/NavigationContent/styles.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { N10, N30 } from '@atlaskit/theme/colors';
2
2
  import { gridSize } from '@atlaskit/theme/constants';
3
3
  import { headingSizes } from '@atlaskit/theme/typography';
4
- import { token } from '@atlaskit/tokens';
5
4
  import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
6
5
  const scrollIndicatorMaskZIndex = 2;
7
6
  const scrollIndicatorZIndex = 1;
@@ -39,7 +38,7 @@ export const outerContainerCSS = opts => ({
39
38
  right: containerPadding + opts.scrollbarWidth,
40
39
  height: scrollIndicatorHeight,
41
40
  borderRadius: scrollIndicatorBorderRadius,
42
- backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${token('color.border.neutral', N30)})`,
41
+ backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border-neutral, ${N30})`})`,
43
42
  position: 'absolute',
44
43
  zIndex: scrollIndicatorZIndex
45
44
  },
@@ -54,7 +53,7 @@ export const outerContainerCSS = opts => ({
54
53
  right: containerPadding + opts.scrollbarWidth,
55
54
  bottom: 0,
56
55
  zIndex: scrollIndicatorZIndex,
57
- backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${token('color.border.neutral', N30)})`
56
+ backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border-neutral, ${N30})`})`
58
57
  }
59
58
  });
60
59
  /**
@@ -79,7 +78,7 @@ export const innerContainerCSS = opts => ({
79
78
  left: 0,
80
79
  right: 0,
81
80
  height: scrollIndicatorHeight,
82
- backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${token('color.background.default', N10)})`,
81
+ backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-background-default, ${N10})`})`,
83
82
  position: 'absolute',
84
83
  display: 'block',
85
84
  zIndex: scrollIndicatorMaskZIndex
@@ -97,7 +96,7 @@ export const innerContainerCSS = opts => ({
97
96
  marginTop: 'auto',
98
97
  position: 'relative',
99
98
  zIndex: scrollIndicatorMaskZIndex,
100
- backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${token('color.background.default', N10)})`
99
+ backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-background-default, ${N10})`})`
101
100
  }
102
101
  });
103
102
  export const containerCSS = opts => ({
package/dist/es2019/components/NestingItem/index.js CHANGED
@@ -6,7 +6,6 @@ import { jsx } from '@emotion/core';
6
6
  import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
7
7
  import { N10 } from '@atlaskit/theme/colors';
8
8
  import { gridSize } from '@atlaskit/theme/constants';
9
- import { token } from '@atlaskit/tokens';
10
9
  import { overrideStyleFunction } from '../../common/styles';
11
10
  import { ButtonItem, CustomItem, NavigationContent } from '../index';
12
11
  import { ROOT_ID } from '../NestableNavigationContent';
@@ -104,7 +103,7 @@ const NestingItem = props => {
104
103
  "data-right-arrow": true
105
104
  }, jsx(RightArrow, {
106
105
  testId: testId && `${testId}--item--right-arrow`,
107
- secondaryColor: token('color.background.default', N10),
106
+ secondaryColor: `var(--ds-background-default, ${N10})`,
108
107
  label: ""
109
108
  }))),
110
109
  onClick: onClickHandler,
package/dist/es2019/components/SideNavigation/index.js CHANGED
@@ -3,7 +3,6 @@ import { forwardRef } from 'react';
3
3
  import { jsx } from '@emotion/core';
4
4
  import { N10, N500 } from '@atlaskit/theme/colors';
5
5
  import { gridSize } from '@atlaskit/theme/constants';
6
- import { token } from '@atlaskit/tokens';
7
6
  const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
8
7
  const {
9
8
  children,
@@ -17,9 +16,9 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
17
16
  css: {
18
17
  width: '100%',
19
18
  height: '100%',
20
- color: token('color.text.mediumEmphasis', N500),
19
+ color: `var(--ds-text-mediumEmphasis, ${N500})`,
21
20
  minWidth: gridSize() * 30,
22
- backgroundColor: token('color.background.default', N10),
21
+ backgroundColor: `var(--ds-background-default, ${N10})`,
23
22
  position: 'relative',
24
23
  display: 'flex',
25
24
  flexDirection: 'column',
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.1.0",
3
+ "version": "1.2.1",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/common/styles.js CHANGED
@@ -6,7 +6,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
6
6
 
7
7
  import { B400, B50, N10, N30, N500 } from '@atlaskit/theme/colors';
8
8
  import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
9
- import { token } from '@atlaskit/tokens';
10
9
  var gridSize = gridSizeFn();
11
10
  var borderRadius = borderRadiusFn();
12
11
  var itemIconSize = gridSize * 3;
@@ -28,27 +27,27 @@ export var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
28
27
  };
29
28
  var defaultStyles = {
30
29
  '&:hover': {
31
- color: token('color.text.mediumEmphasis', N500),
32
- backgroundColor: token('color.background.transparentNeutral.hover', N30)
30
+ color: "var(--ds-text-mediumEmphasis, ".concat(N500, ")"),
31
+ backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(N30, ")")
33
32
  },
34
33
  '&:active': {
35
- color: token('color.text.mediumEmphasis', B400),
36
- backgroundColor: token('color.background.transparentNeutral.pressed', B50)
34
+ color: "var(--ds-text-mediumEmphasis, ".concat(B400, ")"),
35
+ backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(B50, ")")
37
36
  }
38
37
  };
39
38
  var selectedStyles = {
40
- backgroundColor: token('color.background.selected.resting', N30),
41
- color: token('color.text.selected', B400),
39
+ backgroundColor: "var(--ds-background-selected-resting, ".concat(N30, ")"),
40
+ color: "var(--ds-text-selected, ".concat(B400, ")"),
42
41
  ':visited': {
43
- color: token('color.text.selected', B400)
42
+ color: "var(--ds-text-selected, ".concat(B400, ")")
44
43
  },
45
44
  '&:hover': {
46
- backgroundColor: token('color.background.selected.hover', N30),
47
- color: token('color.text.selected', N500)
45
+ backgroundColor: "var(--ds-background-selected-hover, ".concat(N30, ")"),
46
+ color: "var(--ds-text-selected, ".concat(N500, ")")
48
47
  },
49
48
  '&:active': {
50
- backgroundColor: token('color.background.selected.pressed', B50),
51
- color: token('color.text.selected', B400)
49
+ backgroundColor: "var(--ds-background-selected-pressed, ".concat(B50, ")"),
50
+ color: "var(--ds-text-selected, ".concat(B400, ")")
52
51
  }
53
52
  };
54
53
  export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
@@ -62,7 +61,7 @@ export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
62
61
  // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
63
62
  // Menu and side navigation are now color aligned so they do not need this!
64
63
  // See: https://product-fabric.atlassian.net/browse/DSP-1684
65
- backgroundColor: token('color.background.default', N10)
64
+ backgroundColor: "var(--ds-background-default, ".concat(N10, ")")
66
65
  }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, _defineProperty({}, '& [data-item-elem-before]', {
67
66
  // TODO: Can this be moved into menu?
68
67
  // center align icons with app-switcher regardless of size
package/dist/esm/components/Footer/index.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
2
  import React from 'react';
4
3
  import { N500 } from '@atlaskit/theme/colors';
5
- import { token } from '@atlaskit/tokens';
6
4
  import { overrideStyleFunction } from '../../common/styles';
7
5
  import { CustomItem } from '../Item';
8
6
 
@@ -12,35 +10,37 @@ var Container = function Container(props) {
12
10
 
13
11
  var Footer = function Footer(props) {
14
12
  var cssFn = overrideStyleFunction(function () {
15
- var _ref;
16
-
17
- return _ref = {
13
+ return {
18
14
  userSelect: 'auto',
19
- div: {
20
- display: 'block',
15
+ display: 'block',
16
+ textAlign: 'center',
17
+ minHeight: '24px',
18
+ alignItems: 'center',
19
+ width: '100%',
20
+ '[data-item-elem-before]': {
21
+ marginRight: 0,
22
+ marginBottom: '8px',
23
+ display: 'inline-block'
24
+ },
25
+ '[data-item-title]': {
26
+ textAlign: 'center',
27
+ fontSize: 12
28
+ },
29
+ '[data-item-description]': {
21
30
  textAlign: 'center',
22
- minHeight: '24px',
23
- alignItems: 'center',
24
- width: '100%'
31
+ display: 'inline-block',
32
+ margin: '6px'
33
+ },
34
+ // Will look interactive if the `component` is anything other than a div.
35
+ 'div&:hover': {
36
+ backgroundColor: 'transparent',
37
+ cursor: 'default'
38
+ },
39
+ 'div&:active': {
40
+ backgroundColor: 'transparent',
41
+ color: "var(--ds-text-mediumEmphasis, ".concat(N500, ")")
25
42
  }
26
- }, _defineProperty(_ref, '[data-item-elem-before]', {
27
- marginRight: 0,
28
- marginBottom: '8px',
29
- display: 'inline-block'
30
- }), _defineProperty(_ref, '[data-item-title]', {
31
- textAlign: 'center',
32
- fontSize: 12
33
- }), _defineProperty(_ref, '[data-item-description]', {
34
- textAlign: 'center',
35
- display: 'inline-block',
36
- margin: '6px'
37
- }), _defineProperty(_ref, 'div&:hover', {
38
- backgroundColor: 'transparent',
39
- cursor: 'default'
40
- }), _defineProperty(_ref, 'div&:active', {
41
- backgroundColor: 'transparent',
42
- color: token('color.text.mediumEmphasis', N500)
43
- }), _ref;
43
+ };
44
44
  }, props.cssFn);
45
45
  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
46
46
  component: props.component || Container,
package/dist/esm/components/Header/index.js CHANGED
@@ -4,7 +4,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import React, { forwardRef } from 'react';
5
5
  import { N500 } from '@atlaskit/theme/colors';
6
6
  import { headingSizes } from '@atlaskit/theme/typography';
7
- import { token } from '@atlaskit/tokens';
8
7
  import { overrideStyleFunction } from '../../common/styles';
9
8
  import { CustomItem } from '../Item';
10
9
 
@@ -22,13 +21,13 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
22
21
  fontSize: headingSizes.h400.size,
23
22
  letterSpacing: '-0.003em',
24
23
  fontWeight: 600,
25
- color: token('color.text.highEmphasis', N500)
24
+ color: "var(--ds-text-highEmphasis, ".concat(N500, ")")
26
25
  }), _defineProperty(_ref, 'div&:hover', {
27
26
  backgroundColor: 'transparent',
28
27
  cursor: 'default'
29
28
  }), _defineProperty(_ref, 'div&:active', {
30
29
  backgroundColor: 'transparent',
31
- color: token('color.text.highEmphasis', N500)
30
+ color: "var(--ds-text-highEmphasis, ".concat(N500, ")")
32
31
  }), _ref;
33
32
  }, props.cssFn);
34
33
  return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
package/dist/esm/components/Item/go-back-item.js CHANGED
@@ -4,13 +4,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
4
4
  import React, { forwardRef, useCallback, useState } from 'react';
5
5
  import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
6
6
  import { N10 } from '@atlaskit/theme/colors';
7
- import { token } from '@atlaskit/tokens';
8
7
  import ButtonItem from './button-item';
9
8
  var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
10
9
  var cssFn = _ref.cssFn,
11
10
  _ref$iconBefore = _ref.iconBefore,
12
11
  iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/React.createElement(LeftArrow, {
13
- secondaryColor: token('color.background.default', N10),
12
+ secondaryColor: "var(--ds-background-default, ".concat(N10, ")"),
14
13
  label: ""
15
14
  }) : _ref$iconBefore,
16
15
  onClick = _ref.onClick,
package/dist/esm/components/NavigationContent/styles.js CHANGED
@@ -7,7 +7,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
7
7
  import { N10, N30 } from '@atlaskit/theme/colors';
8
8
  import { gridSize } from '@atlaskit/theme/constants';
9
9
  import { headingSizes } from '@atlaskit/theme/typography';
10
- import { token } from '@atlaskit/tokens';
11
10
  import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
12
11
  var scrollIndicatorMaskZIndex = 2;
13
12
  var scrollIndicatorZIndex = 1;
@@ -46,7 +45,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
46
45
  right: containerPadding + opts.scrollbarWidth,
47
46
  height: scrollIndicatorHeight,
48
47
  borderRadius: scrollIndicatorBorderRadius,
49
- backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30), ")"),
48
+ backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(N30, ")"), ")"),
50
49
  position: 'absolute',
51
50
  zIndex: scrollIndicatorZIndex
52
51
  },
@@ -61,7 +60,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
61
60
  right: containerPadding + opts.scrollbarWidth,
62
61
  bottom: 0,
63
62
  zIndex: scrollIndicatorZIndex,
64
- backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30), ")")
63
+ backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(N30, ")"), ")")
65
64
  }
66
65
  };
67
66
  };
@@ -86,7 +85,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
86
85
  left: 0,
87
86
  right: 0,
88
87
  height: scrollIndicatorHeight,
89
- backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(token('color.background.default', N10), ")"),
88
+ backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(N10, ")"), ")"),
90
89
  position: 'absolute',
91
90
  display: 'block',
92
91
  zIndex: scrollIndicatorMaskZIndex
@@ -104,7 +103,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
104
103
  marginTop: 'auto',
105
104
  position: 'relative',
106
105
  zIndex: scrollIndicatorMaskZIndex,
107
- backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat(token('color.background.default', N10), ")")
106
+ backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ").concat("var(--ds-background-default, ".concat(N10, ")"), ")")
108
107
  }
109
108
  });
110
109
  };
package/dist/esm/components/NestingItem/index.js CHANGED
@@ -14,7 +14,6 @@ import { jsx } from '@emotion/core';
14
14
  import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
15
15
  import { N10 } from '@atlaskit/theme/colors';
16
16
  import { gridSize } from '@atlaskit/theme/constants';
17
- import { token } from '@atlaskit/tokens';
18
17
  import { overrideStyleFunction } from '../../common/styles';
19
18
  import { ButtonItem, CustomItem, NavigationContent } from '../index';
20
19
  import { ROOT_ID } from '../NestableNavigationContent';
@@ -120,7 +119,7 @@ var NestingItem = function NestingItem(props) {
120
119
  "data-right-arrow": true
121
120
  }, jsx(RightArrow, {
122
121
  testId: testId && "".concat(testId, "--item--right-arrow"),
123
- secondaryColor: token('color.background.default', N10),
122
+ secondaryColor: "var(--ds-background-default, ".concat(N10, ")"),
124
123
  label: ""
125
124
  }))),
126
125
  onClick: onClickHandler,
package/dist/esm/components/SideNavigation/index.js CHANGED
@@ -3,7 +3,6 @@ import { forwardRef } from 'react';
3
3
  import { jsx } from '@emotion/core';
4
4
  import { N10, N500 } from '@atlaskit/theme/colors';
5
5
  import { gridSize } from '@atlaskit/theme/constants';
6
- import { token } from '@atlaskit/tokens';
7
6
  var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
8
7
  var children = props.children,
9
8
  testId = props.testId,
@@ -15,9 +14,9 @@ var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
15
14
  css: {
16
15
  width: '100%',
17
16
  height: '100%',
18
- color: token('color.text.mediumEmphasis', N500),
17
+ color: "var(--ds-text-mediumEmphasis, ".concat(N500, ")"),
19
18
  minWidth: gridSize() * 30,
20
- backgroundColor: token('color.background.default', N10),
19
+ backgroundColor: "var(--ds-background-default, ".concat(N10, ")"),
21
20
  position: 'relative',
22
21
  display: 'flex',
23
22
  flexDirection: 'column',
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "1.1.0",
3
+ "version": "1.2.1",
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.1.0",
3
+ "version": "1.2.1",
4
4
  "description": "A highly composable side navigation component that supports nested views.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,11 +24,11 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@atlaskit/ds-lib": "^1.1.0",
27
- "@atlaskit/icon": "^21.8.0",
28
- "@atlaskit/menu": "^1.1.0",
27
+ "@atlaskit/icon": "^21.9.0",
28
+ "@atlaskit/menu": "^1.2.0",
29
29
  "@atlaskit/motion": "^1.0.0",
30
- "@atlaskit/theme": "^11.5.0",
31
- "@atlaskit/tokens": "^0.1.0",
30
+ "@atlaskit/theme": "^12.0.0",
31
+ "@atlaskit/tokens": "^0.4.0",
32
32
  "@babel/runtime": "^7.0.0",
33
33
  "@emotion/core": "^10.0.9"
34
34
  },
@@ -36,11 +36,11 @@
36
36
  "react": "^16.8.0"
37
37
  },
38
38
  "devDependencies": {
39
- "@atlaskit/atlassian-navigation": "^1.1.0",
39
+ "@atlaskit/atlassian-navigation": "^1.2.0",
40
40
  "@atlaskit/button": "^16.0.0",
41
41
  "@atlaskit/docs": "*",
42
42
  "@atlaskit/logo": "^13.5.0",
43
- "@atlaskit/onboarding": "^10.1.0",
43
+ "@atlaskit/onboarding": "^10.3.0",
44
44
  "@atlaskit/section-message": "^6.0.0",
45
45
  "@atlaskit/select": "^15.2.0",
46
46
  "@atlaskit/visual-regression": "*",