@atlaskit/side-navigation 11.1.8 → 11.1.10

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 (45) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/afm-cc/tsconfig.json +0 -3
  3. package/afm-jira/tsconfig.json +0 -3
  4. package/afm-products/tsconfig.json +0 -3
  5. package/dist/cjs/components/Footer/index.compiled.css +9 -9
  6. package/dist/cjs/components/Footer/index.js +1 -2
  7. package/dist/cjs/components/Header/index.compiled.css +2 -2
  8. package/dist/cjs/components/Header/index.js +1 -2
  9. package/dist/cjs/components/Item/button-item.compiled.css +10 -10
  10. package/dist/cjs/components/Item/button-item.js +2 -3
  11. package/dist/cjs/components/Item/custom-item.compiled.css +10 -10
  12. package/dist/cjs/components/Item/custom-item.js +2 -3
  13. package/dist/cjs/components/Item/link-item.compiled.css +11 -11
  14. package/dist/cjs/components/Item/link-item.js +2 -3
  15. package/dist/cjs/components/NavigationContent/styles.js +4 -5
  16. package/dist/cjs/components/SideNavigation/index.compiled.css +2 -2
  17. package/dist/cjs/components/SideNavigation/index.js +1 -6
  18. package/dist/es2019/components/Footer/index.compiled.css +9 -9
  19. package/dist/es2019/components/Footer/index.js +1 -2
  20. package/dist/es2019/components/Header/index.compiled.css +2 -2
  21. package/dist/es2019/components/Header/index.js +1 -2
  22. package/dist/es2019/components/Item/button-item.compiled.css +10 -10
  23. package/dist/es2019/components/Item/button-item.js +2 -3
  24. package/dist/es2019/components/Item/custom-item.compiled.css +10 -10
  25. package/dist/es2019/components/Item/custom-item.js +2 -3
  26. package/dist/es2019/components/Item/link-item.compiled.css +11 -11
  27. package/dist/es2019/components/Item/link-item.js +2 -3
  28. package/dist/es2019/components/NavigationContent/styles.js +4 -5
  29. package/dist/es2019/components/SideNavigation/index.compiled.css +2 -2
  30. package/dist/es2019/components/SideNavigation/index.js +1 -2
  31. package/dist/esm/components/Footer/index.compiled.css +9 -9
  32. package/dist/esm/components/Footer/index.js +1 -2
  33. package/dist/esm/components/Header/index.compiled.css +2 -2
  34. package/dist/esm/components/Header/index.js +1 -2
  35. package/dist/esm/components/Item/button-item.compiled.css +10 -10
  36. package/dist/esm/components/Item/button-item.js +2 -3
  37. package/dist/esm/components/Item/custom-item.compiled.css +10 -10
  38. package/dist/esm/components/Item/custom-item.js +2 -3
  39. package/dist/esm/components/Item/link-item.compiled.css +11 -11
  40. package/dist/esm/components/Item/link-item.js +2 -3
  41. package/dist/esm/components/NavigationContent/styles.js +4 -5
  42. package/dist/esm/components/SideNavigation/index.compiled.css +2 -2
  43. package/dist/esm/components/SideNavigation/index.js +1 -6
  44. package/docs/00-intro.tsx +2 -1
  45. package/package.json +8 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/side-navigation
2
2
 
3
+ ## 11.1.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
8
+ Removes redundant fallback color values via @atlaskit/theme
9
+ - Updated dependencies
10
+
11
+ ## 11.1.9
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 11.1.8
4
18
 
5
19
  ### Patch Changes
package/afm-cc/tsconfig.json CHANGED
@@ -44,9 +44,6 @@
44
44
  {
45
45
  "path": "../../primitives/afm-cc/tsconfig.json"
46
46
  },
47
- {
48
- "path": "../../theme/afm-cc/tsconfig.json"
49
- },
50
47
  {
51
48
  "path": "../../tokens/afm-cc/tsconfig.json"
52
49
  }
package/afm-jira/tsconfig.json CHANGED
@@ -44,9 +44,6 @@
44
44
  {
45
45
  "path": "../../primitives/afm-jira/tsconfig.json"
46
46
  },
47
- {
48
- "path": "../../theme/afm-jira/tsconfig.json"
49
- },
50
47
  {
51
48
  "path": "../../tokens/afm-jira/tsconfig.json"
52
49
  }
package/afm-products/tsconfig.json CHANGED
@@ -44,9 +44,6 @@
44
44
  {
45
45
  "path": "../../primitives/afm-products/tsconfig.json"
46
46
  },
47
- {
48
- "path": "../../theme/afm-products/tsconfig.json"
49
- },
50
47
  {
51
48
  "path": "../../tokens/afm-products/tsconfig.json"
52
49
  }
package/dist/cjs/components/Footer/index.compiled.css CHANGED
@@ -1,24 +1,24 @@
1
1
 
2
2
  ._vrjtwadc [data-item-title]{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._13e21h6o [data-item-description]{text-align:center}
3
3
  ._14bw1o8l [data-item-description]{display:inline-block}
4
- ._159iu2gc [data-item-elem-before]{margin-bottom:var(--ds-space-100,8px)}
5
4
  ._16vx1h6o [data-item-title]{text-align:center}
6
5
  ._1bsb1k8s{width:1.5rem}
7
6
  ._1bsb1osq{width:100%}
8
7
  ._1e0c1o8l{display:inline-block}
9
8
  ._1e0c1ule{display:block}
10
- ._1jkv12x7 [data-item-description]{margin-right:var(--ds-space-075,6px)}
11
- ._1mt2ze3t [data-item-elem-before]{margin-right:var(--ds-space-0,0)}
12
- ._1rla12x7 [data-item-description]{margin-bottom:var(--ds-space-075,6px)}
9
+ ._1jo512x7 [data-item-description]{margin-inline-start:var(--ds-space-075,6px)}
13
10
  ._1tke1tcg{min-height:24px}
14
11
  ._4cvr1h6o{align-items:center}
15
12
  ._4t3i1k8s{height:1.5rem}
16
13
  ._76zj1o8l [data-item-elem-before]{display:inline-block}
17
- ._eq7s12x7 [data-item-description]{margin-top:var(--ds-space-075,6px)}
14
+ ._bek6ze3t [data-item-elem-before]{margin-inline-end:var(--ds-space-0,0)}
15
+ ._ou5312x7 [data-item-description]{margin-block-end:var(--ds-space-075,6px)}
16
+ ._rh04u2gc [data-item-elem-before]{margin-block-end:var(--ds-space-100,8px)}
18
17
  ._uizt1wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
18
+ ._wte412x7 [data-item-description]{margin-inline-end:var(--ds-space-075,6px)}
19
+ ._xosk12x7 [data-item-description]{margin-block-start:var(--ds-space-075,6px)}
19
20
  ._y3gn1h6o{text-align:center}
20
- ._z2a212x7 [data-item-description]{margin-left:var(--ds-space-075,6px)}
21
- div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
21
+ div._11kjsm61:hover{background-color:var(--ds-background-neutral-subtle,#00000000)}
22
22
  div._jl2n73ad:hover{cursor:default}
23
- div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
24
- div._1v6jjjyb:active{color:var(--ds-text-subtle,#42526e)}
23
+ div._1et6sm61:active{background-color:var(--ds-background-neutral-subtle,#00000000)}
24
+ div._1v6jazsu:active{color:var(--ds-text-subtle,#505258)}
package/dist/cjs/components/Footer/index.js CHANGED
@@ -13,14 +13,13 @@ var _runtime = require("@compiled/react/runtime");
13
13
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
14
14
  var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
15
15
  var _compiled = require("@atlaskit/primitives/compiled");
16
- var _colors = require("@atlaskit/theme/colors");
17
16
  var _Header = require("../Header");
18
17
  var _Item = require("../Item");
19
18
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
20
19
  /* eslint-disable @repo/internal/react/consistent-props-definitions */
21
20
  var styles = {
22
21
  iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s",
23
- oldFooter: "_uizt1wug _1e0c1ule _y3gn1h6o _1tke1tcg _4cvr1h6o _1bsb1osq _vrjtwadc _16vx1h6o _1mt2ze3t _159iu2gc _76zj1o8l _13e21h6o _14bw1o8l _eq7s12x7 _1jkv12x7 _1rla12x7 _z2a212x7 _11kjqtfy _jl2n73ad _1et6qtfy _1v6jjjyb"
22
+ oldFooter: "_uizt1wug _1e0c1ule _y3gn1h6o _1tke1tcg _4cvr1h6o _1bsb1osq _vrjtwadc _16vx1h6o _bek6ze3t _rh04u2gc _76zj1o8l _13e21h6o _14bw1o8l _xosk12x7 _wte412x7 _ou5312x7 _1jo512x7 _11kjsm61 _jl2n73ad _1et6sm61 _1v6jazsu"
24
23
  };
25
24
  /**
26
25
  * __Footer__
package/dist/cjs/components/Header/index.compiled.css CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
- ._vrjt1qyo [data-item-title]{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._1cmd10s3 [data-item-title]{color:var(--ds-text,#42526e)}
2
+ ._vrjt1qyo [data-item-title]{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._1cmdi7uo [data-item-title]{color:var(--ds-text,#292a2e)}
3
3
  ._uizt1wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
4
4
  div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
5
5
  div._jl2n73ad:hover{cursor:default}
6
6
  div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
7
- div._1v6j10s3:active{color:var(--ds-text,#42526e)}
7
+ div._1v6ji7uo:active{color:var(--ds-text,#292a2e)}
package/dist/cjs/components/Header/index.js CHANGED
@@ -12,12 +12,11 @@ var _runtime = require("@compiled/react/runtime");
12
12
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
13
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
14
14
  var _react = _interopRequireWildcard(require("react"));
15
- var _colors = require("@atlaskit/theme/colors");
16
15
  var _Item = require("../Item");
17
16
  var _excluded = ["children", "data-testid"];
18
17
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
19
18
  var styles = {
20
- header: "_uizt1wug _vrjt1qyo _1cmd10s3 _11kjqtfy _jl2n73ad _1et6qtfy _1v6j10s3"
19
+ header: "_uizt1wug _vrjt1qyo _1cmdi7uo _11kjqtfy _jl2n73ad _1et6qtfy _1v6ji7uo"
21
20
  };
22
21
 
23
22
  /**
package/dist/cjs/components/Item/button-item.compiled.css CHANGED
@@ -3,15 +3,15 @@
3
3
  ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
4
4
  ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
5
5
  ._1a391k8s [data-item-elem-before]{height:1.5rem}
6
- ._bfhkbal5{background-color:var(--ds-background-selected,#ebecf0)}
6
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
7
7
  ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
8
8
  ._racp1k8s [data-item-elem-before]{width:1.5rem}
9
- ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
10
- ._30l31pwi:hover{color:var(--ds-text-selected,#42526e)}
11
- ._30l3jjyb:hover{color:var(--ds-text-subtle,#42526e)}
12
- ._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
13
- ._irr31gf2:hover{background-color:var(--ds-background-selected-hovered,#ebecf0)}
14
- ._183j1l7b:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#deebff)}
15
- ._1di61elt:active{background-color:var(--ds-background-selected-pressed,#deebff)}
16
- ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
17
- ._ppn2dud1:active:active{color:var(--ds-text-subtle,#0052cc)}
9
+ ._syaz6x5g{color:var(--ds-text-selected,#1868db)}._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
10
+ ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
11
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
12
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
13
+ ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
14
+ ._183jfcek:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
15
+ ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
16
+ ._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
17
+ ._ppn2azsu:active:active{color:var(--ds-text-subtle,#505258)}
package/dist/cjs/components/Item/button-item.js CHANGED
@@ -14,13 +14,12 @@ var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
16
16
  var _menu = require("@atlaskit/menu");
17
- var _colors = require("@atlaskit/theme/colors");
18
17
  var _context = require("../NestableNavigationContent/context");
19
18
  var _excluded = ["className"];
20
19
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
21
20
  var styles = {
22
- root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3jjyb _irr314ae _ppn2dud1 _183j1l7b",
23
- selectedStyles: "_bfhkbal5 _syaz1ldt _10531ldt _irr31gf2 _30l31pwi _1di61elt _9h8h1ldt"
21
+ root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
22
+ selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"
24
23
  };
25
24
 
26
25
  /**
package/dist/cjs/components/Item/custom-item.compiled.css CHANGED
@@ -3,15 +3,15 @@
3
3
  ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
4
4
  ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
5
5
  ._1a391k8s [data-item-elem-before]{height:1.5rem}
6
- ._bfhkbal5{background-color:var(--ds-background-selected,#ebecf0)}
6
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
7
7
  ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
8
8
  ._racp1k8s [data-item-elem-before]{width:1.5rem}
9
- ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
10
- ._30l31pwi:hover{color:var(--ds-text-selected,#42526e)}
11
- ._30l3jjyb:hover{color:var(--ds-text-subtle,#42526e)}
12
- ._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
13
- ._irr31gf2:hover{background-color:var(--ds-background-selected-hovered,#ebecf0)}
14
- ._183j1l7b:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#deebff)}
15
- ._1di61elt:active{background-color:var(--ds-background-selected-pressed,#deebff)}
16
- ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
17
- ._ppn2dud1:active:active{color:var(--ds-text-subtle,#0052cc)}
9
+ ._syaz6x5g{color:var(--ds-text-selected,#1868db)}._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
10
+ ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
11
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
12
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
13
+ ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
14
+ ._183jfcek:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
15
+ ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
16
+ ._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
17
+ ._ppn2azsu:active:active{color:var(--ds-text-subtle,#505258)}
package/dist/cjs/components/Item/custom-item.js CHANGED
@@ -14,13 +14,12 @@ var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
16
16
  var _menu = require("@atlaskit/menu");
17
- var _colors = require("@atlaskit/theme/colors");
18
17
  var _context = require("../NestableNavigationContent/context");
19
18
  var _excluded = ["className"];
20
19
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
21
20
  var styles = {
22
- root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3jjyb _irr314ae _ppn2dud1 _183j1l7b",
23
- selectedStyles: "_bfhkbal5 _syaz1ldt _10531ldt _irr31gf2 _30l31pwi _1di61elt _9h8h1ldt"
21
+ root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
22
+ selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"
24
23
  };
25
24
 
26
25
  // Dirty hack to get generics working with forward ref [1/2]
package/dist/cjs/components/Item/link-item.compiled.css CHANGED
@@ -3,15 +3,15 @@
3
3
  ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
4
4
  ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
5
5
  ._1a391k8s [data-item-elem-before]{height:1.5rem}
6
- ._bfhkbal5{background-color:var(--ds-background-selected,#ebecf0)}
7
- ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
6
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
7
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
8
8
  ._racp1k8s [data-item-elem-before]{width:1.5rem}
9
- ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
10
- ._30l31pwi:hover{color:var(--ds-text-selected,#42526e)}
11
- ._30l3jjyb:hover{color:var(--ds-text-subtle,#42526e)}
12
- ._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
13
- ._irr31gf2:hover{background-color:var(--ds-background-selected-hovered,#ebecf0)}
14
- ._183j1l7b:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#deebff)}
15
- ._1di61elt:active{background-color:var(--ds-background-selected-pressed,#deebff)}
16
- ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
17
- ._ppn2dud1:active:active{color:var(--ds-text-subtle,#0052cc)}
9
+ ._syaz6x5g{color:var(--ds-text-selected,#1868db)}._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
10
+ ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
11
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
12
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
13
+ ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
14
+ ._183jfcek:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
15
+ ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
16
+ ._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
17
+ ._ppn2azsu:active:active{color:var(--ds-text-subtle,#505258)}
package/dist/cjs/components/Item/link-item.js CHANGED
@@ -14,13 +14,12 @@ var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
16
16
  var _menu = require("@atlaskit/menu");
17
- var _colors = require("@atlaskit/theme/colors");
18
17
  var _context = require("../NestableNavigationContent/context");
19
18
  var _excluded = ["href", "children", "className"];
20
19
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
21
20
  var styles = {
22
- root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3jjyb _irr314ae _ppn2dud1 _183j1l7b",
23
- selectedStyles: "_bfhkbal5 _syaz1ldt _10531ldt _irr31gf2 _30l31pwi _1di61elt _9h8h1ldt"
21
+ root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhksm61 _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
22
+ selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"
24
23
  };
25
24
 
26
25
  /**
package/dist/cjs/components/NavigationContent/styles.js CHANGED
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.outerContainerCSS = exports.innerContainerCSS = exports.containerCSS = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _colors = require("@atlaskit/theme/colors");
10
9
  var _constants = require("../../common/constants");
11
10
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
12
11
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -44,7 +43,7 @@ var outerContainerCSS = exports.outerContainerCSS = function outerContainerCSS(o
44
43
  right: containerPadding + opts.scrollbarWidth,
45
44
  height: scrollIndicatorHeight,
46
45
  borderRadius: "var(--ds-radius-xsmall, ".concat(scrollIndicatorBorderRadius, ")"),
47
- backgroundColor: "var(".concat(_constants.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30, ")"), ")"),
46
+ backgroundColor: "var(".concat(_constants.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, #0B120E24)", ")"),
48
47
  position: 'absolute',
49
48
  zIndex: scrollIndicatorZIndex
50
49
  },
@@ -59,7 +58,7 @@ var outerContainerCSS = exports.outerContainerCSS = function outerContainerCSS(o
59
58
  right: containerPadding + opts.scrollbarWidth,
60
59
  bottom: 0,
61
60
  zIndex: scrollIndicatorZIndex,
62
- backgroundColor: "var(".concat(_constants.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30, ")"), ")")
61
+ backgroundColor: "var(".concat(_constants.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, #0B120E24)", ")")
63
62
  }
64
63
  };
65
64
  };
@@ -84,7 +83,7 @@ var innerContainerCSS = exports.innerContainerCSS = function innerContainerCSS(o
84
83
  left: 0,
85
84
  right: 0,
86
85
  height: scrollIndicatorHeight,
87
- backgroundColor: "var(".concat(_constants.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, ".concat(_colors.N10, ")"), ")"),
86
+ backgroundColor: "var(".concat(_constants.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, #FFFFFF)", ")"),
88
87
  position: 'absolute',
89
88
  display: 'block',
90
89
  zIndex: scrollIndicatorMaskZIndex
@@ -102,7 +101,7 @@ var innerContainerCSS = exports.innerContainerCSS = function innerContainerCSS(o
102
101
  marginTop: 'auto',
103
102
  position: 'relative',
104
103
  zIndex: scrollIndicatorMaskZIndex,
105
- backgroundColor: "var(".concat(_constants.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, ".concat(_colors.N10, ")"), ")")
104
+ backgroundColor: "var(".concat(_constants.VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, #FFFFFF)", ")")
106
105
  }
107
106
  });
108
107
  };
package/dist/cjs/components/SideNavigation/index.compiled.css CHANGED
@@ -5,6 +5,6 @@
5
5
  ._1ul9p3fh{min-width:15pc}
6
6
  ._2lx21bp4{flex-direction:column}
7
7
  ._4t3i1osq{height:100%}
8
- ._bfhkxkvu{background-color:var(--_4p0s90)}
8
+ ._bfhkvuon{background-color:var(--ds-surface,#fff)}
9
9
  ._kqswh2mm{position:relative}
10
- ._syaz1425{color:var(--_13a5t4u)}
10
+ ._syazazsu{color:var(--ds-text-subtle,#505258)}
package/dist/cjs/components/SideNavigation/index.js CHANGED
@@ -13,7 +13,6 @@ var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
15
  var _menu = require("@atlaskit/menu");
16
- var _colors = require("@atlaskit/theme/colors");
17
16
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
18
17
  var sidebarMinWidth = '240px';
19
18
  var sideNavStyles = null;
@@ -45,11 +44,7 @@ var SideNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
45
44
  }, !isServer && isSSRPlaceholderEnabled && {
46
45
  'data-ssr-placeholder-replace': 'side-navigation-placeholder'
47
46
  }, {
48
- className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _1ul9p3fh _4t3i1osq _kqswh2mm _2lx21bp4 _bfhkxkvu _syaz1425"]),
49
- style: {
50
- "--_4p0s90": (0, _runtime.ix)("var(--ds-surface, ".concat(_colors.N10, ")")),
51
- "--_13a5t4u": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N500, ")"))
52
- }
47
+ className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _1ul9p3fh _4t3i1osq _kqswh2mm _2lx21bp4 _bfhkvuon _syazazsu"])
53
48
  }), /*#__PURE__*/React.createElement(_menu.SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
54
49
  value: "notch"
55
50
  }, children));
package/dist/es2019/components/Footer/index.compiled.css CHANGED
@@ -1,24 +1,24 @@
1
1
 
2
2
  ._vrjtwadc [data-item-title]{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._13e21h6o [data-item-description]{text-align:center}
3
3
  ._14bw1o8l [data-item-description]{display:inline-block}
4
- ._159iu2gc [data-item-elem-before]{margin-bottom:var(--ds-space-100,8px)}
5
4
  ._16vx1h6o [data-item-title]{text-align:center}
6
5
  ._1bsb1k8s{width:1.5rem}
7
6
  ._1bsb1osq{width:100%}
8
7
  ._1e0c1o8l{display:inline-block}
9
8
  ._1e0c1ule{display:block}
10
- ._1jkv12x7 [data-item-description]{margin-right:var(--ds-space-075,6px)}
11
- ._1mt2ze3t [data-item-elem-before]{margin-right:var(--ds-space-0,0)}
12
- ._1rla12x7 [data-item-description]{margin-bottom:var(--ds-space-075,6px)}
9
+ ._1jo512x7 [data-item-description]{margin-inline-start:var(--ds-space-075,6px)}
13
10
  ._1tke1tcg{min-height:24px}
14
11
  ._4cvr1h6o{align-items:center}
15
12
  ._4t3i1k8s{height:1.5rem}
16
13
  ._76zj1o8l [data-item-elem-before]{display:inline-block}
17
- ._eq7s12x7 [data-item-description]{margin-top:var(--ds-space-075,6px)}
14
+ ._bek6ze3t [data-item-elem-before]{margin-inline-end:var(--ds-space-0,0)}
15
+ ._ou5312x7 [data-item-description]{margin-block-end:var(--ds-space-075,6px)}
16
+ ._rh04u2gc [data-item-elem-before]{margin-block-end:var(--ds-space-100,8px)}
18
17
  ._uizt1wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
18
+ ._wte412x7 [data-item-description]{margin-inline-end:var(--ds-space-075,6px)}
19
+ ._xosk12x7 [data-item-description]{margin-block-start:var(--ds-space-075,6px)}
19
20
  ._y3gn1h6o{text-align:center}
20
- ._z2a212x7 [data-item-description]{margin-left:var(--ds-space-075,6px)}
21
- div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
21
+ div._11kjsm61:hover{background-color:var(--ds-background-neutral-subtle,#00000000)}
22
22
  div._jl2n73ad:hover{cursor:default}
23
- div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
24
- div._1v6jjjyb:active{color:var(--ds-text-subtle,#42526e)}
23
+ div._1et6sm61:active{background-color:var(--ds-background-neutral-subtle,#00000000)}
24
+ div._1v6jazsu:active{color:var(--ds-text-subtle,#505258)}
package/dist/es2019/components/Footer/index.js CHANGED
@@ -7,12 +7,11 @@ import { ax, ix } from "@compiled/react/runtime";
7
7
 
8
8
  import warnOnce from '@atlaskit/ds-lib/warn-once';
9
9
  import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
10
- import { N500 } from '@atlaskit/theme/colors';
11
10
  import { Container } from '../Header';
12
11
  import { CustomItem } from '../Item';
13
12
  const styles = {
14
13
  iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s",
15
- oldFooter: "_uizt1wug _1e0c1ule _y3gn1h6o _1tke1tcg _4cvr1h6o _1bsb1osq _vrjtwadc _16vx1h6o _1mt2ze3t _159iu2gc _76zj1o8l _13e21h6o _14bw1o8l _eq7s12x7 _1jkv12x7 _1rla12x7 _z2a212x7 _11kjqtfy _jl2n73ad _1et6qtfy _1v6jjjyb"
14
+ oldFooter: "_uizt1wug _1e0c1ule _y3gn1h6o _1tke1tcg _4cvr1h6o _1bsb1osq _vrjtwadc _16vx1h6o _bek6ze3t _rh04u2gc _76zj1o8l _13e21h6o _14bw1o8l _xosk12x7 _wte412x7 _ou5312x7 _1jo512x7 _11kjsm61 _jl2n73ad _1et6sm61 _1v6jazsu"
16
15
  };
17
16
  /**
18
17
  * __Footer__
package/dist/es2019/components/Header/index.compiled.css CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
- ._vrjt1qyo [data-item-title]{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._1cmd10s3 [data-item-title]{color:var(--ds-text,#42526e)}
2
+ ._vrjt1qyo [data-item-title]{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._1cmdi7uo [data-item-title]{color:var(--ds-text,#292a2e)}
3
3
  ._uizt1wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
4
4
  div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
5
5
  div._jl2n73ad:hover{cursor:default}
6
6
  div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
7
- div._1v6j10s3:active{color:var(--ds-text,#42526e)}
7
+ div._1v6ji7uo:active{color:var(--ds-text,#292a2e)}
package/dist/es2019/components/Header/index.js CHANGED
@@ -3,10 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  import "./index.compiled.css";
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import React, { forwardRef } from 'react';
6
- import { N500 } from '@atlaskit/theme/colors';
7
6
  import { CustomItem } from '../Item';
8
7
  const styles = {
9
- header: "_uizt1wug _vrjt1qyo _1cmd10s3 _11kjqtfy _jl2n73ad _1et6qtfy _1v6j10s3"
8
+ header: "_uizt1wug _vrjt1qyo _1cmdi7uo _11kjqtfy _jl2n73ad _1et6qtfy _1v6ji7uo"
10
9
  };
11
10
 
12
11
  /**
package/dist/es2019/components/Item/button-item.compiled.css CHANGED
@@ -3,15 +3,15 @@
3
3
  ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
4
4
  ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
5
5
  ._1a391k8s [data-item-elem-before]{height:1.5rem}
6
- ._bfhkbal5{background-color:var(--ds-background-selected,#ebecf0)}
6
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
7
7
  ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
8
8
  ._racp1k8s [data-item-elem-before]{width:1.5rem}
9
- ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
10
- ._30l31pwi:hover{color:var(--ds-text-selected,#42526e)}
11
- ._30l3jjyb:hover{color:var(--ds-text-subtle,#42526e)}
12
- ._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
13
- ._irr31gf2:hover{background-color:var(--ds-background-selected-hovered,#ebecf0)}
14
- ._183j1l7b:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#deebff)}
15
- ._1di61elt:active{background-color:var(--ds-background-selected-pressed,#deebff)}
16
- ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
17
- ._ppn2dud1:active:active{color:var(--ds-text-subtle,#0052cc)}
9
+ ._syaz6x5g{color:var(--ds-text-selected,#1868db)}._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
10
+ ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
11
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
12
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
13
+ ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
14
+ ._183jfcek:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
15
+ ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
16
+ ._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
17
+ ._ppn2azsu:active:active{color:var(--ds-text-subtle,#505258)}
package/dist/es2019/components/Item/button-item.js CHANGED
@@ -5,11 +5,10 @@ import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef } from 'react';
7
7
  import { ButtonItem as Button } from '@atlaskit/menu';
8
- import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
9
8
  import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
10
9
  const styles = {
11
- root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3jjyb _irr314ae _ppn2dud1 _183j1l7b",
12
- selectedStyles: "_bfhkbal5 _syaz1ldt _10531ldt _irr31gf2 _30l31pwi _1di61elt _9h8h1ldt"
10
+ root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
11
+ selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"
13
12
  };
14
13
 
15
14
  /**
package/dist/es2019/components/Item/custom-item.compiled.css CHANGED
@@ -3,15 +3,15 @@
3
3
  ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
4
4
  ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
5
5
  ._1a391k8s [data-item-elem-before]{height:1.5rem}
6
- ._bfhkbal5{background-color:var(--ds-background-selected,#ebecf0)}
6
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
7
7
  ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
8
8
  ._racp1k8s [data-item-elem-before]{width:1.5rem}
9
- ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
10
- ._30l31pwi:hover{color:var(--ds-text-selected,#42526e)}
11
- ._30l3jjyb:hover{color:var(--ds-text-subtle,#42526e)}
12
- ._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
13
- ._irr31gf2:hover{background-color:var(--ds-background-selected-hovered,#ebecf0)}
14
- ._183j1l7b:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#deebff)}
15
- ._1di61elt:active{background-color:var(--ds-background-selected-pressed,#deebff)}
16
- ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
17
- ._ppn2dud1:active:active{color:var(--ds-text-subtle,#0052cc)}
9
+ ._syaz6x5g{color:var(--ds-text-selected,#1868db)}._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
10
+ ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
11
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
12
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
13
+ ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
14
+ ._183jfcek:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
15
+ ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
16
+ ._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
17
+ ._ppn2azsu:active:active{color:var(--ds-text-subtle,#505258)}
package/dist/es2019/components/Item/custom-item.js CHANGED
@@ -5,11 +5,10 @@ import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef } from 'react';
7
7
  import { CustomItem as Custom } from '@atlaskit/menu';
8
- import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
9
8
  import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
10
9
  const styles = {
11
- root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3jjyb _irr314ae _ppn2dud1 _183j1l7b",
12
- selectedStyles: "_bfhkbal5 _syaz1ldt _10531ldt _irr31gf2 _30l31pwi _1di61elt _9h8h1ldt"
10
+ root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
11
+ selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"
13
12
  };
14
13
 
15
14
  // Dirty hack to get generics working with forward ref [1/2]
package/dist/es2019/components/Item/link-item.compiled.css CHANGED
@@ -3,15 +3,15 @@
3
3
  ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
4
4
  ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
5
5
  ._1a391k8s [data-item-elem-before]{height:1.5rem}
6
- ._bfhkbal5{background-color:var(--ds-background-selected,#ebecf0)}
7
- ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
6
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
7
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
8
8
  ._racp1k8s [data-item-elem-before]{width:1.5rem}
9
- ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
10
- ._30l31pwi:hover{color:var(--ds-text-selected,#42526e)}
11
- ._30l3jjyb:hover{color:var(--ds-text-subtle,#42526e)}
12
- ._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
13
- ._irr31gf2:hover{background-color:var(--ds-background-selected-hovered,#ebecf0)}
14
- ._183j1l7b:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#deebff)}
15
- ._1di61elt:active{background-color:var(--ds-background-selected-pressed,#deebff)}
16
- ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
17
- ._ppn2dud1:active:active{color:var(--ds-text-subtle,#0052cc)}
9
+ ._syaz6x5g{color:var(--ds-text-selected,#1868db)}._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
10
+ ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
11
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
12
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
13
+ ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
14
+ ._183jfcek:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
15
+ ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
16
+ ._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
17
+ ._ppn2azsu:active:active{color:var(--ds-text-subtle,#505258)}
package/dist/es2019/components/Item/link-item.js CHANGED
@@ -5,11 +5,10 @@ import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef } from 'react';
7
7
  import { LinkItem as Link } from '@atlaskit/menu';
8
- import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
9
8
  import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
10
9
  const styles = {
11
- root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3jjyb _irr314ae _ppn2dud1 _183j1l7b",
12
- selectedStyles: "_bfhkbal5 _syaz1ldt _10531ldt _irr31gf2 _30l31pwi _1di61elt _9h8h1ldt"
10
+ root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhksm61 _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
11
+ selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"
13
12
  };
14
13
 
15
14
  /**
package/dist/es2019/components/NavigationContent/styles.js CHANGED
@@ -1,4 +1,3 @@
1
- import { N10, N30 } from '@atlaskit/theme/colors';
2
1
  import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
3
2
  const scrollIndicatorMaskZIndex = 2;
4
3
  const scrollIndicatorZIndex = 1;
@@ -33,7 +32,7 @@ export const outerContainerCSS = opts => ({
33
32
  right: containerPadding + opts.scrollbarWidth,
34
33
  height: scrollIndicatorHeight,
35
34
  borderRadius: `var(--ds-radius-xsmall, ${scrollIndicatorBorderRadius})`,
36
- backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30})`})`,
35
+ backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${"var(--ds-border, #0B120E24)"})`,
37
36
  position: 'absolute',
38
37
  zIndex: scrollIndicatorZIndex
39
38
  },
@@ -48,7 +47,7 @@ export const outerContainerCSS = opts => ({
48
47
  right: containerPadding + opts.scrollbarWidth,
49
48
  bottom: 0,
50
49
  zIndex: scrollIndicatorZIndex,
51
- backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30})`})`
50
+ backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${"var(--ds-border, #0B120E24)"})`
52
51
  }
53
52
  });
54
53
 
@@ -73,7 +72,7 @@ export const innerContainerCSS = opts => ({
73
72
  left: 0,
74
73
  right: 0,
75
74
  height: scrollIndicatorHeight,
76
- backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-surface, ${N10})`})`,
75
+ backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${"var(--ds-surface, #FFFFFF)"})`,
77
76
  position: 'absolute',
78
77
  display: 'block',
79
78
  zIndex: scrollIndicatorMaskZIndex
@@ -91,7 +90,7 @@ export const innerContainerCSS = opts => ({
91
90
  marginTop: 'auto',
92
91
  position: 'relative',
93
92
  zIndex: scrollIndicatorMaskZIndex,
94
- backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${`var(--ds-surface, ${N10})`})`
93
+ backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${"var(--ds-surface, #FFFFFF)"})`
95
94
  }
96
95
  });
97
96
  export const containerCSS = opts => ({
package/dist/es2019/components/SideNavigation/index.compiled.css CHANGED
@@ -5,6 +5,6 @@
5
5
  ._1ul9p3fh{min-width:15pc}
6
6
  ._2lx21bp4{flex-direction:column}
7
7
  ._4t3i1osq{height:100%}
8
- ._bfhkw70a{background-color:var(--ds-surface,#fafbfc)}
8
+ ._bfhkvuon{background-color:var(--ds-surface,#fff)}
9
9
  ._kqswh2mm{position:relative}
10
- ._syazjjyb{color:var(--ds-text-subtle,#42526e)}
10
+ ._syazazsu{color:var(--ds-text-subtle,#505258)}
package/dist/es2019/components/SideNavigation/index.js CHANGED
@@ -5,7 +5,6 @@ import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef } from 'react';
7
7
  import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
8
- import { N10, N500 } from '@atlaskit/theme/colors';
9
8
  const sidebarMinWidth = '240px';
10
9
  const sideNavStyles = null;
11
10
 
@@ -36,7 +35,7 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
36
35
  }, !isServer && isSSRPlaceholderEnabled && {
37
36
  'data-ssr-placeholder-replace': 'side-navigation-placeholder'
38
37
  }, {
39
- className: ax(["_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _1ul9p3fh _4t3i1osq _kqswh2mm _2lx21bp4 _bfhkw70a _syazjjyb"])
38
+ className: ax(["_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _1ul9p3fh _4t3i1osq _kqswh2mm _2lx21bp4 _bfhkvuon _syazazsu"])
40
39
  }), /*#__PURE__*/React.createElement(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
41
40
  value: "notch"
42
41
  }, children));
package/dist/esm/components/Footer/index.compiled.css CHANGED
@@ -1,24 +1,24 @@
1
1
 
2
2
  ._vrjtwadc [data-item-title]{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._13e21h6o [data-item-description]{text-align:center}
3
3
  ._14bw1o8l [data-item-description]{display:inline-block}
4
- ._159iu2gc [data-item-elem-before]{margin-bottom:var(--ds-space-100,8px)}
5
4
  ._16vx1h6o [data-item-title]{text-align:center}
6
5
  ._1bsb1k8s{width:1.5rem}
7
6
  ._1bsb1osq{width:100%}
8
7
  ._1e0c1o8l{display:inline-block}
9
8
  ._1e0c1ule{display:block}
10
- ._1jkv12x7 [data-item-description]{margin-right:var(--ds-space-075,6px)}
11
- ._1mt2ze3t [data-item-elem-before]{margin-right:var(--ds-space-0,0)}
12
- ._1rla12x7 [data-item-description]{margin-bottom:var(--ds-space-075,6px)}
9
+ ._1jo512x7 [data-item-description]{margin-inline-start:var(--ds-space-075,6px)}
13
10
  ._1tke1tcg{min-height:24px}
14
11
  ._4cvr1h6o{align-items:center}
15
12
  ._4t3i1k8s{height:1.5rem}
16
13
  ._76zj1o8l [data-item-elem-before]{display:inline-block}
17
- ._eq7s12x7 [data-item-description]{margin-top:var(--ds-space-075,6px)}
14
+ ._bek6ze3t [data-item-elem-before]{margin-inline-end:var(--ds-space-0,0)}
15
+ ._ou5312x7 [data-item-description]{margin-block-end:var(--ds-space-075,6px)}
16
+ ._rh04u2gc [data-item-elem-before]{margin-block-end:var(--ds-space-100,8px)}
18
17
  ._uizt1wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
18
+ ._wte412x7 [data-item-description]{margin-inline-end:var(--ds-space-075,6px)}
19
+ ._xosk12x7 [data-item-description]{margin-block-start:var(--ds-space-075,6px)}
19
20
  ._y3gn1h6o{text-align:center}
20
- ._z2a212x7 [data-item-description]{margin-left:var(--ds-space-075,6px)}
21
- div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
21
+ div._11kjsm61:hover{background-color:var(--ds-background-neutral-subtle,#00000000)}
22
22
  div._jl2n73ad:hover{cursor:default}
23
- div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
24
- div._1v6jjjyb:active{color:var(--ds-text-subtle,#42526e)}
23
+ div._1et6sm61:active{background-color:var(--ds-background-neutral-subtle,#00000000)}
24
+ div._1v6jazsu:active{color:var(--ds-text-subtle,#505258)}
package/dist/esm/components/Footer/index.js CHANGED
@@ -7,12 +7,11 @@ import { ax, ix } from "@compiled/react/runtime";
7
7
 
8
8
  import warnOnce from '@atlaskit/ds-lib/warn-once';
9
9
  import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
10
- import { N500 } from '@atlaskit/theme/colors';
11
10
  import { Container } from '../Header';
12
11
  import { CustomItem } from '../Item';
13
12
  var styles = {
14
13
  iconContainer: "_1e0c1o8l _1bsb1k8s _4t3i1k8s",
15
- oldFooter: "_uizt1wug _1e0c1ule _y3gn1h6o _1tke1tcg _4cvr1h6o _1bsb1osq _vrjtwadc _16vx1h6o _1mt2ze3t _159iu2gc _76zj1o8l _13e21h6o _14bw1o8l _eq7s12x7 _1jkv12x7 _1rla12x7 _z2a212x7 _11kjqtfy _jl2n73ad _1et6qtfy _1v6jjjyb"
14
+ oldFooter: "_uizt1wug _1e0c1ule _y3gn1h6o _1tke1tcg _4cvr1h6o _1bsb1osq _vrjtwadc _16vx1h6o _bek6ze3t _rh04u2gc _76zj1o8l _13e21h6o _14bw1o8l _xosk12x7 _wte412x7 _ou5312x7 _1jo512x7 _11kjsm61 _jl2n73ad _1et6sm61 _1v6jazsu"
16
15
  };
17
16
  /**
18
17
  * __Footer__
package/dist/esm/components/Header/index.compiled.css CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
- ._vrjt1qyo [data-item-title]{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._1cmd10s3 [data-item-title]{color:var(--ds-text,#42526e)}
2
+ ._vrjt1qyo [data-item-title]{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._1cmdi7uo [data-item-title]{color:var(--ds-text,#292a2e)}
3
3
  ._uizt1wug{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
4
4
  div._11kjqtfy:hover{background-color:var(--ds-background-neutral-subtle,transparent)}
5
5
  div._jl2n73ad:hover{cursor:default}
6
6
  div._1et6qtfy:active{background-color:var(--ds-background-neutral-subtle,transparent)}
7
- div._1v6j10s3:active{color:var(--ds-text,#42526e)}
7
+ div._1v6ji7uo:active{color:var(--ds-text,#292a2e)}
package/dist/esm/components/Header/index.js CHANGED
@@ -5,10 +5,9 @@ var _excluded = ["children", "data-testid"];
5
5
  import "./index.compiled.css";
6
6
  import { ax, ix } from "@compiled/react/runtime";
7
7
  import React, { forwardRef } from 'react';
8
- import { N500 } from '@atlaskit/theme/colors';
9
8
  import { CustomItem } from '../Item';
10
9
  var styles = {
11
- header: "_uizt1wug _vrjt1qyo _1cmd10s3 _11kjqtfy _jl2n73ad _1et6qtfy _1v6j10s3"
10
+ header: "_uizt1wug _vrjt1qyo _1cmdi7uo _11kjqtfy _jl2n73ad _1et6qtfy _1v6ji7uo"
12
11
  };
13
12
 
14
13
  /**
package/dist/esm/components/Item/button-item.compiled.css CHANGED
@@ -3,15 +3,15 @@
3
3
  ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
4
4
  ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
5
5
  ._1a391k8s [data-item-elem-before]{height:1.5rem}
6
- ._bfhkbal5{background-color:var(--ds-background-selected,#ebecf0)}
6
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
7
7
  ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
8
8
  ._racp1k8s [data-item-elem-before]{width:1.5rem}
9
- ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
10
- ._30l31pwi:hover{color:var(--ds-text-selected,#42526e)}
11
- ._30l3jjyb:hover{color:var(--ds-text-subtle,#42526e)}
12
- ._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
13
- ._irr31gf2:hover{background-color:var(--ds-background-selected-hovered,#ebecf0)}
14
- ._183j1l7b:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#deebff)}
15
- ._1di61elt:active{background-color:var(--ds-background-selected-pressed,#deebff)}
16
- ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
17
- ._ppn2dud1:active:active{color:var(--ds-text-subtle,#0052cc)}
9
+ ._syaz6x5g{color:var(--ds-text-selected,#1868db)}._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
10
+ ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
11
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
12
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
13
+ ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
14
+ ._183jfcek:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
15
+ ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
16
+ ._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
17
+ ._ppn2azsu:active:active{color:var(--ds-text-subtle,#505258)}
package/dist/esm/components/Item/button-item.js CHANGED
@@ -7,11 +7,10 @@ import * as React from 'react';
7
7
  import { ax, ix } from "@compiled/react/runtime";
8
8
  import { forwardRef } from 'react';
9
9
  import { ButtonItem as Button } from '@atlaskit/menu';
10
- import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
11
10
  import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
12
11
  var styles = {
13
- root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3jjyb _irr314ae _ppn2dud1 _183j1l7b",
14
- selectedStyles: "_bfhkbal5 _syaz1ldt _10531ldt _irr31gf2 _30l31pwi _1di61elt _9h8h1ldt"
12
+ root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
13
+ selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"
15
14
  };
16
15
 
17
16
  /**
package/dist/esm/components/Item/custom-item.compiled.css CHANGED
@@ -3,15 +3,15 @@
3
3
  ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
4
4
  ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
5
5
  ._1a391k8s [data-item-elem-before]{height:1.5rem}
6
- ._bfhkbal5{background-color:var(--ds-background-selected,#ebecf0)}
6
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
7
7
  ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
8
8
  ._racp1k8s [data-item-elem-before]{width:1.5rem}
9
- ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
10
- ._30l31pwi:hover{color:var(--ds-text-selected,#42526e)}
11
- ._30l3jjyb:hover{color:var(--ds-text-subtle,#42526e)}
12
- ._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
13
- ._irr31gf2:hover{background-color:var(--ds-background-selected-hovered,#ebecf0)}
14
- ._183j1l7b:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#deebff)}
15
- ._1di61elt:active{background-color:var(--ds-background-selected-pressed,#deebff)}
16
- ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
17
- ._ppn2dud1:active:active{color:var(--ds-text-subtle,#0052cc)}
9
+ ._syaz6x5g{color:var(--ds-text-selected,#1868db)}._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
10
+ ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
11
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
12
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
13
+ ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
14
+ ._183jfcek:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
15
+ ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
16
+ ._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
17
+ ._ppn2azsu:active:active{color:var(--ds-text-subtle,#505258)}
package/dist/esm/components/Item/custom-item.js CHANGED
@@ -7,11 +7,10 @@ import * as React from 'react';
7
7
  import { ax, ix } from "@compiled/react/runtime";
8
8
  import { forwardRef } from 'react';
9
9
  import { CustomItem as Custom } from '@atlaskit/menu';
10
- import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
11
10
  import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
12
11
  var styles = {
13
- root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3jjyb _irr314ae _ppn2dud1 _183j1l7b",
14
- selectedStyles: "_bfhkbal5 _syaz1ldt _10531ldt _irr31gf2 _30l31pwi _1di61elt _9h8h1ldt"
12
+ root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
13
+ selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"
15
14
  };
16
15
 
17
16
  // Dirty hack to get generics working with forward ref [1/2]
package/dist/esm/components/Item/link-item.compiled.css CHANGED
@@ -3,15 +3,15 @@
3
3
  ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
4
4
  ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
5
5
  ._1a391k8s [data-item-elem-before]{height:1.5rem}
6
- ._bfhkbal5{background-color:var(--ds-background-selected,#ebecf0)}
7
- ._bfhkqtfy{background-color:var(--ds-background-neutral-subtle,transparent)}
6
+ ._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
7
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
8
8
  ._racp1k8s [data-item-elem-before]{width:1.5rem}
9
- ._syaz1ldt{color:var(--ds-text-selected,#0052cc)}._10531ldt:visited{color:var(--ds-text-selected,#0052cc)}
10
- ._30l31pwi:hover{color:var(--ds-text-selected,#42526e)}
11
- ._30l3jjyb:hover{color:var(--ds-text-subtle,#42526e)}
12
- ._irr314ae:hover{background-color:var(--ds-background-neutral-subtle-hovered,#ebecf0)}
13
- ._irr31gf2:hover{background-color:var(--ds-background-selected-hovered,#ebecf0)}
14
- ._183j1l7b:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#deebff)}
15
- ._1di61elt:active{background-color:var(--ds-background-selected-pressed,#deebff)}
16
- ._9h8h1ldt:active{color:var(--ds-text-selected,#0052cc)}
17
- ._ppn2dud1:active:active{color:var(--ds-text-subtle,#0052cc)}
9
+ ._syaz6x5g{color:var(--ds-text-selected,#1868db)}._10536x5g:visited{color:var(--ds-text-selected,#1868db)}
10
+ ._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
11
+ ._30l3azsu:hover{color:var(--ds-text-subtle,#505258)}
12
+ ._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
13
+ ._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
14
+ ._183jfcek:active:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
15
+ ._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
16
+ ._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
17
+ ._ppn2azsu:active:active{color:var(--ds-text-subtle,#505258)}
package/dist/esm/components/Item/link-item.js CHANGED
@@ -7,11 +7,10 @@ import * as React from 'react';
7
7
  import { ax, ix } from "@compiled/react/runtime";
8
8
  import { forwardRef } from 'react';
9
9
  import { LinkItem as Link } from '@atlaskit/menu';
10
- import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
11
10
  import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
12
11
  var styles = {
13
- root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhkqtfy _1a391k8s _racp1k8s _30l3jjyb _irr314ae _ppn2dud1 _183j1l7b",
14
- selectedStyles: "_bfhkbal5 _syaz1ldt _10531ldt _irr31gf2 _30l31pwi _1di61elt _9h8h1ldt"
12
+ root: "_2rkofajl _1rjcu2gc _18zru2gc _bfhksm61 _1a391k8s _racp1k8s _30l3azsu _irr31dpa _ppn2azsu _183jfcek",
13
+ selectedStyles: "_bfhk15s3 _syaz6x5g _10536x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g"
15
14
  };
16
15
 
17
16
  /**
package/dist/esm/components/NavigationContent/styles.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
- import { N10, N30 } from '@atlaskit/theme/colors';
5
4
  import { VAR_SCROLL_INDICATOR_COLOR, VAR_SEPARATOR_COLOR } from '../../common/constants';
6
5
  var scrollIndicatorMaskZIndex = 2;
7
6
  var scrollIndicatorZIndex = 1;
@@ -37,7 +36,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
37
36
  right: containerPadding + opts.scrollbarWidth,
38
37
  height: scrollIndicatorHeight,
39
38
  borderRadius: "var(--ds-radius-xsmall, ".concat(scrollIndicatorBorderRadius, ")"),
40
- backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30, ")"), ")"),
39
+ backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, #0B120E24)", ")"),
41
40
  position: 'absolute',
42
41
  zIndex: scrollIndicatorZIndex
43
42
  },
@@ -52,7 +51,7 @@ export var outerContainerCSS = function outerContainerCSS(opts) {
52
51
  right: containerPadding + opts.scrollbarWidth,
53
52
  bottom: 0,
54
53
  zIndex: scrollIndicatorZIndex,
55
- backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30, ")"), ")")
54
+ backgroundColor: "var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, #0B120E24)", ")")
56
55
  }
57
56
  };
58
57
  };
@@ -77,7 +76,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
77
76
  left: 0,
78
77
  right: 0,
79
78
  height: scrollIndicatorHeight,
80
- backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, ".concat(N10, ")"), ")"),
79
+ backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, #FFFFFF)", ")"),
81
80
  position: 'absolute',
82
81
  display: 'block',
83
82
  zIndex: scrollIndicatorMaskZIndex
@@ -95,7 +94,7 @@ export var innerContainerCSS = function innerContainerCSS(opts) {
95
94
  marginTop: 'auto',
96
95
  position: 'relative',
97
96
  zIndex: scrollIndicatorMaskZIndex,
98
- backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, ".concat(N10, ")"), ")")
97
+ backgroundColor: "var(".concat(VAR_SCROLL_INDICATOR_COLOR, ", ", "var(--ds-surface, #FFFFFF)", ")")
99
98
  }
100
99
  });
101
100
  };
package/dist/esm/components/SideNavigation/index.compiled.css CHANGED
@@ -5,6 +5,6 @@
5
5
  ._1ul9p3fh{min-width:15pc}
6
6
  ._2lx21bp4{flex-direction:column}
7
7
  ._4t3i1osq{height:100%}
8
- ._bfhkxkvu{background-color:var(--_4p0s90)}
8
+ ._bfhkvuon{background-color:var(--ds-surface,#fff)}
9
9
  ._kqswh2mm{position:relative}
10
- ._syaz1425{color:var(--_13a5t4u)}
10
+ ._syazazsu{color:var(--ds-text-subtle,#505258)}
package/dist/esm/components/SideNavigation/index.js CHANGED
@@ -5,7 +5,6 @@ import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef } from 'react';
7
7
  import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
8
- import { N10, N500 } from '@atlaskit/theme/colors';
9
8
  var sidebarMinWidth = '240px';
10
9
  var sideNavStyles = null;
11
10
 
@@ -36,11 +35,7 @@ var SideNavigation = /*#__PURE__*/forwardRef(function (props, ref) {
36
35
  }, !isServer && isSSRPlaceholderEnabled && {
37
36
  'data-ssr-placeholder-replace': 'side-navigation-placeholder'
38
37
  }, {
39
- className: ax(["_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _1ul9p3fh _4t3i1osq _kqswh2mm _2lx21bp4 _bfhkxkvu _syaz1425"]),
40
- style: {
41
- "--_4p0s90": ix("var(--ds-surface, ".concat(N10, ")")),
42
- "--_13a5t4u": ix("var(--ds-text-subtle, ".concat(N500, ")"))
43
- }
38
+ className: ax(["_1reo15vq _18m915vq _1e0c1txw _1bsb1osq _1ul9p3fh _4t3i1osq _kqswh2mm _2lx21bp4 _bfhkvuon _syazazsu"])
44
39
  }), /*#__PURE__*/React.createElement(SELECTION_STYLE_CONTEXT_DO_NOT_USE.Provider, {
45
40
  value: "notch"
46
41
  }, children));
package/docs/00-intro.tsx CHANGED
@@ -4,7 +4,7 @@ import { md } from '@atlaskit/docs';
4
4
  import Link from '@atlaskit/link';
5
5
  import SectionMessage from '@atlaskit/section-message';
6
6
 
7
- export default md`
7
+ const _default_1: any = md`
8
8
  ${(
9
9
  <SectionMessage appearance="information">
10
10
  This component is now documented on{' '}
@@ -12,3 +12,4 @@ ${(
12
12
  </SectionMessage>
13
13
  )}
14
14
  `;
15
+ export default _default_1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/side-navigation",
3
- "version": "11.1.8",
3
+ "version": "11.1.10",
4
4
  "description": "A highly composable side navigation component that supports nested views.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -30,13 +30,12 @@
30
30
  "dependencies": {
31
31
  "@atlaskit/css": "^0.19.0",
32
32
  "@atlaskit/ds-lib": "^6.0.0",
33
- "@atlaskit/icon": "^32.0.0",
33
+ "@atlaskit/icon": "^33.1.0",
34
34
  "@atlaskit/menu": "^8.4.0",
35
- "@atlaskit/motion": "^5.4.0",
35
+ "@atlaskit/motion": "^5.5.0",
36
36
  "@atlaskit/platform-feature-flags": "^1.1.0",
37
- "@atlaskit/primitives": "^18.0.0",
38
- "@atlaskit/theme": "^22.0.0",
39
- "@atlaskit/tokens": "^11.1.0",
37
+ "@atlaskit/primitives": "^18.1.0",
38
+ "@atlaskit/tokens": "^11.4.0",
40
39
  "@babel/runtime": "^7.0.0",
41
40
  "@compiled/react": "^0.20.0"
42
41
  },
@@ -49,9 +48,9 @@
49
48
  "@af/visual-regression": "workspace:^",
50
49
  "@atlaskit/atlassian-navigation": "^5.6.0",
51
50
  "@atlaskit/button": "^23.10.0",
52
- "@atlaskit/docs": "^11.6.0",
53
- "@atlaskit/dropdown-menu": "^16.6.0",
54
- "@atlaskit/form": "^15.4.0",
51
+ "@atlaskit/docs": "^11.7.0",
52
+ "@atlaskit/dropdown-menu": "^16.8.0",
53
+ "@atlaskit/form": "^15.5.0",
55
54
  "@atlaskit/image": "^3.0.0",
56
55
  "@atlaskit/link": "^3.3.0",
57
56
  "@atlaskit/logo": "^19.10.0",