@atlaskit/menu 1.2.2 → 1.2.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/menu
 
+## 1.2.3
+
+### Patch Changes
+
+- [`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.
+- Updated dependencies
+
 ## 1.2.2
 
 ### Patch Changes

package/dist/cjs/internal/components/menu-item-primitive.js

@@ -19,8 +19,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var defaultRender = function defaultRender(Component, props) {
   return (0, _core.jsx)(Component, props);
@@ -67,7 +65,7 @@ var wordBreakStyles = (0, _core.css)({
 });
 var descriptionStyles = (0, _core.css)({
   marginTop: itemDescriptionSpacing,
-  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+  color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")"),
   fontSize: _typography.headingSizes.h200.size
 });
 var primitiveStyles = (0, _core.css)({
@@ -100,11 +98,11 @@ var unselectedStyles = (0, _core.css)({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20),
+    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N20, ")"),
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.N30),
+    backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -113,28 +111,23 @@ var disabledStyles = (0, _core.css)({
   cursor: 'not-allowed',
   '&, :hover, :active': {
     backgroundColor: 'transparent',
-    color: (0, _tokens.token)('color.text.disabled', _colors.N200)
+    color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
   }
 });
 var selectedStyles = (0, _core.css)({
-  backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.N20),
-  // Suppress the need for a fallback as selected color isn't used in the non-tokens world.
-  // When removing fallbacks make sure to remove this supression.
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  color: (0, _tokens.token)('color.text.selected'),
+  backgroundColor: "var(--ds-background-selected-resting, ".concat(_colors.N20, ")"),
+  // Fallback set as babel plugin inserts one otherwise
+  color: "var(--ds-text-selected, currentColor)",
   ':visited': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: (0, _tokens.token)('color.text.selected')
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':hover': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.hover', _colors.N20),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: (0, _tokens.token)('color.text.selected')
+    backgroundColor: "var(--ds-background-selected-hover, ".concat(_colors.N20, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':active': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.N30),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: (0, _tokens.token)('color.text.selected')
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.N30, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   }
 });
 /**

package/dist/cjs/menu-item/heading-item.js

@@ -23,8 +23,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
 var itemSidePadding = gridSize * 2.5;
@@ -32,7 +30,7 @@ var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
 var headingStyles = (0, _core.css)({
   padding: "0 ".concat(itemSidePadding, "px"),
-  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+  color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

package/dist/cjs/menu-item/skeleton-heading-item.js

@@ -15,8 +15,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var skeletonStyles = (0, _core.css)({
   padding: "0 ".concat((0, _constants.gridSize)() * 2.5, "px"),
@@ -24,7 +22,7 @@ var skeletonStyles = (0, _core.css)({
     display: 'block',
     width: '30%',
     height: (0, _constants.gridSize)(),
-    backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.resting', (0, _colors.skeleton)()),
+    backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat((0, _colors.skeleton)(), ")"),
     borderRadius: 100,
     content: '""'
   }

package/dist/cjs/menu-item/skeleton-item.js

@@ -15,8 +15,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
 var borderRadius = (0, _constants.borderRadius)();
@@ -28,7 +26,7 @@ var skeletonItemElemSize = gridSize * 2.5;
 var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 var skeletonTextBorderRadius = 100;
 var skeletonContentHeight = 9;
-var skeletonColor = (0, _tokens.token)('color.background.subtleNeutral.resting', (0, _colors.skeleton)());
+var skeletonColor = "var(--ds-background-subtleNeutral-resting, ".concat((0, _colors.skeleton)(), ")");
 var skeletonStyles = (0, _core.css)({
   display: 'flex',
   minHeight: itemMinHeight,

package/dist/cjs/menu-section/section.js

@@ -21,8 +21,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _headingItem = _interopRequireDefault(require("../menu-item/heading-item"));
 
 /** @jsx jsx */
@@ -78,7 +76,7 @@ var unscrollableStyles = (0, _core.css)({
   flexShrink: 0
 });
 var separatorStyles = (0, _core.css)({
-  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat((0, _tokens.token)('color.border.neutral', _colors.N30A), ")")
+  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(_colors.N30A, ")"), ")")
 });
 var noSeparatorStyles = (0, _core.css)({
   // this is to ensure that adjacent sections without separators don't get additional margins.

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.2",
+	"version": "1.2.3",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/menu-item-primitive.js

@@ -5,7 +5,6 @@ import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 
 const defaultRender = (Component, props) => jsx(Component, props);
 
@@ -50,7 +49,7 @@ const wordBreakStyles = css({
 });
 const descriptionStyles = css({
   marginTop: itemDescriptionSpacing,
-  color: token('color.text.lowEmphasis', N200),
+  color: `var(--ds-text-lowEmphasis, ${N200})`,
   fontSize: headingSizes.h200.size
 });
 const primitiveStyles = css({
@@ -83,11 +82,11 @@ const unselectedStyles = css({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: token('color.background.transparentNeutral.hover', N20),
+    backgroundColor: `var(--ds-background-transparentNeutral-hover, ${N20})`,
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: token('color.background.transparentNeutral.pressed', N30),
+    backgroundColor: `var(--ds-background-transparentNeutral-pressed, ${N30})`,
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -96,28 +95,23 @@ const disabledStyles = css({
   cursor: 'not-allowed',
   '&, :hover, :active': {
     backgroundColor: 'transparent',
-    color: token('color.text.disabled', N200)
+    color: `var(--ds-text-disabled, ${N200})`
   }
 });
 const selectedStyles = css({
-  backgroundColor: token('color.background.selected.resting', N20),
-  // Suppress the need for a fallback as selected color isn't used in the non-tokens world.
-  // When removing fallbacks make sure to remove this supression.
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  color: token('color.text.selected'),
+  backgroundColor: `var(--ds-background-selected-resting, ${N20})`,
+  // Fallback set as babel plugin inserts one otherwise
+  color: "var(--ds-text-selected, currentColor)",
   ':visited': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':hover': {
-    backgroundColor: token('color.background.selected.hover', N20),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    backgroundColor: `var(--ds-background-selected-hover, ${N20})`,
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':active': {
-    backgroundColor: token('color.background.selected.pressed', N30),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    backgroundColor: `var(--ds-background-selected-pressed, ${N30})`,
+    color: "var(--ds-text-selected, currentColor)"
   }
 });
 /**

package/dist/es2019/menu-item/heading-item.js

@@ -7,14 +7,13 @@ import noop from '@atlaskit/ds-lib/noop';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 const gridSize = gridSizeFn();
 const itemSidePadding = gridSize * 2.5;
 const itemHeadingContentHeight = headingSizes.h100.lineHeight;
 const itemHeadingFontSize = headingSizes.h100.size;
 const headingStyles = css({
   padding: `0 ${itemSidePadding}px`,
-  color: token('color.text.lowEmphasis', N200),
+  color: `var(--ds-text-lowEmphasis, ${N200})`,
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

package/dist/es2019/menu-item/skeleton-heading-item.js

@@ -3,14 +3,13 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const skeletonStyles = css({
   padding: `0 ${gridSize() * 2.5}px`,
   '::after': {
     display: 'block',
     width: '30%',
     height: gridSize(),
-    backgroundColor: token('color.background.subtleNeutral.resting', skeletonColorFn()),
+    backgroundColor: `var(--ds-background-subtleNeutral-resting, ${skeletonColorFn()})`,
     borderRadius: 100,
     content: '""'
   }

package/dist/es2019/menu-item/skeleton-item.js

@@ -3,7 +3,6 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const gridSize = gridSizeFn();
 const borderRadius = borderRadiusFn();
 const itemElemSpacing = gridSize * 1.5;
@@ -14,7 +13,7 @@ const skeletonItemElemSize = gridSize * 2.5;
 const itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 const skeletonTextBorderRadius = 100;
 const skeletonContentHeight = 9;
-const skeletonColor = token('color.background.subtleNeutral.resting', skeletonColorFn());
+const skeletonColor = `var(--ds-background-subtleNeutral-resting, ${skeletonColorFn()})`;
 const skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,

package/dist/es2019/menu-section/section.js

@@ -6,7 +6,6 @@ import { css, jsx } from '@emotion/core';
 import { N30A } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import HeadingItem from '../menu-item/heading-item';
 const gridSize = gridSizeFn();
 const itemHeadingTopMargin = gridSize * 2.5;
@@ -60,7 +59,7 @@ const unscrollableStyles = css({
   flexShrink: 0
 });
 const separatorStyles = css({
-  borderTop: `2px solid var(${VAR_SEPARATOR_COLOR}, ${token('color.border.neutral', N30A)})`
+  borderTop: `2px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border-neutral, ${N30A})`})`
 });
 const noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.2",
+	"version": "1.2.3",
 	"sideEffects": false
 }

package/dist/esm/internal/components/menu-item-primitive.js

@@ -5,7 +5,6 @@ import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 
 var defaultRender = function defaultRender(Component, props) {
   return jsx(Component, props);
@@ -52,7 +51,7 @@ var wordBreakStyles = css({
 });
 var descriptionStyles = css({
   marginTop: itemDescriptionSpacing,
-  color: token('color.text.lowEmphasis', N200),
+  color: "var(--ds-text-lowEmphasis, ".concat(N200, ")"),
   fontSize: headingSizes.h200.size
 });
 var primitiveStyles = css({
@@ -85,11 +84,11 @@ var unselectedStyles = css({
     color: 'currentColor'
   },
   ':hover': {
-    backgroundColor: token('color.background.transparentNeutral.hover', N20),
+    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(N20, ")"),
     color: 'currentColor'
   },
   ':active': {
-    backgroundColor: token('color.background.transparentNeutral.pressed', N30),
+    backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(N30, ")"),
     boxShadow: 'none',
     color: 'currentColor'
   }
@@ -98,28 +97,23 @@ var disabledStyles = css({
   cursor: 'not-allowed',
   '&, :hover, :active': {
     backgroundColor: 'transparent',
-    color: token('color.text.disabled', N200)
+    color: "var(--ds-text-disabled, ".concat(N200, ")")
   }
 });
 var selectedStyles = css({
-  backgroundColor: token('color.background.selected.resting', N20),
-  // Suppress the need for a fallback as selected color isn't used in the non-tokens world.
-  // When removing fallbacks make sure to remove this supression.
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  color: token('color.text.selected'),
+  backgroundColor: "var(--ds-background-selected-resting, ".concat(N20, ")"),
+  // Fallback set as babel plugin inserts one otherwise
+  color: "var(--ds-text-selected, currentColor)",
   ':visited': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':hover': {
-    backgroundColor: token('color.background.selected.hover', N20),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    backgroundColor: "var(--ds-background-selected-hover, ".concat(N20, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   },
   ':active': {
-    backgroundColor: token('color.background.selected.pressed', N30),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    color: token('color.text.selected')
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(N30, ")"),
+    color: "var(--ds-text-selected, currentColor)"
   }
 });
 /**

package/dist/esm/menu-item/heading-item.js

@@ -8,14 +8,13 @@ import noop from '@atlaskit/ds-lib/noop';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 var gridSize = gridSizeFn();
 var itemSidePadding = gridSize * 2.5;
 var itemHeadingContentHeight = headingSizes.h100.lineHeight;
 var itemHeadingFontSize = headingSizes.h100.size;
 var headingStyles = css({
   padding: "0 ".concat(itemSidePadding, "px"),
-  color: token('color.text.lowEmphasis', N200),
+  color: "var(--ds-text-lowEmphasis, ".concat(N200, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

package/dist/esm/menu-item/skeleton-heading-item.js

@@ -3,14 +3,13 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var skeletonStyles = css({
   padding: "0 ".concat(gridSize() * 2.5, "px"),
   '::after': {
     display: 'block',
     width: '30%',
     height: gridSize(),
-    backgroundColor: token('color.background.subtleNeutral.resting', skeletonColorFn()),
+    backgroundColor: "var(--ds-background-subtleNeutral-resting, ".concat(skeletonColorFn(), ")"),
     borderRadius: 100,
     content: '""'
   }

package/dist/esm/menu-item/skeleton-item.js

@@ -3,7 +3,6 @@ import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var gridSize = gridSizeFn();
 var borderRadius = borderRadiusFn();
 var itemElemSpacing = gridSize * 1.5;
@@ -14,7 +13,7 @@ var skeletonItemElemSize = gridSize * 2.5;
 var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 var skeletonTextBorderRadius = 100;
 var skeletonContentHeight = 9;
-var skeletonColor = token('color.background.subtleNeutral.resting', skeletonColorFn());
+var skeletonColor = "var(--ds-background-subtleNeutral-resting, ".concat(skeletonColorFn(), ")");
 var skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,

package/dist/esm/menu-section/section.js

@@ -7,7 +7,6 @@ import { css, jsx } from '@emotion/core';
 import { N30A } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 import HeadingItem from '../menu-item/heading-item';
 var gridSize = gridSizeFn();
 var itemHeadingTopMargin = gridSize * 2.5;
@@ -61,7 +60,7 @@ var unscrollableStyles = css({
   flexShrink: 0
 });
 var separatorStyles = css({
-  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat(token('color.border.neutral', N30A), ")")
+  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border-neutral, ".concat(N30A, ")"), ")")
 });
 var noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.2.2",
+	"version": "1.2.3",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
     "@atlaskit/ds-lib": "^1.2.0",
     "@atlaskit/focus-ring": "^0.2.4",
     "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -81,7 +81,10 @@
     "@repo/internal": {
       "ui-components": "lite-mode",
       "design-system": "v1",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "analytics": "analytics-next",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"