@atlaskit/emoji 67.0.0 → 67.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/emoji
 
+## 67.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 67.0.1
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
 ## 67.0.0
 
 ### Major Changes

package/dist/cjs/components/common/DeleteButton.js

@@ -13,8 +13,6 @@ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom
 
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("../../util/constants");
@@ -37,7 +35,7 @@ var DeleteButton = function DeleteButton(props) {
   }, (0, _react.jsx)(_customThemeButton.default, {
     iconBefore: (0, _react.jsx)(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,
-      primaryColor: (0, _tokens.token)('color.text.subtle', _colors.N500),
+      primaryColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
       size: "small"
     }),
     onClick: props.onClick,

package/dist/cjs/components/common/styles.js

@@ -15,8 +15,6 @@ var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants2 = require("../../util/constants");
 
 var _sharedStyles = require("../../util/shared-styles");
@@ -98,7 +96,7 @@ var placeholderContainer = (0, _react.css)({
   position: 'relative',
   margin: '-1px 0',
   display: 'inline-block',
-  background: (0, _tokens.token)('color.border', '#f7f7f7'),
+  background: "var(--ds-border, #f7f7f7)",
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   overflow: 'hidden',
   verticalAlign: 'middle',
@@ -112,7 +110,7 @@ var placeholderContainerAnimated = (0, _react.css)({
     content: '""',
     display: 'block',
     position: 'absolute',
-    background: (0, _tokens.token)('color.background.neutral', _colors.N20A),
+    background: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
     height: '100%',
     width: '100%',
     animation: "".concat(easeSweep, " 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite")
@@ -162,7 +160,7 @@ var previewText = (0, _react.css)({
 exports.previewText = previewText;
 var emojiName = (0, _react.css)((0, _defineProperty2.default)({
   display: 'block',
-  color: (0, _tokens.token)('color.text', _colors.N900),
+  color: "var(--ds-text, ".concat(_colors.N900, ")"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
@@ -172,7 +170,7 @@ var emojiName = (0, _react.css)((0, _defineProperty2.default)({
 exports.emojiName = emojiName;
 var emojiShortName = (0, _react.css)((0, _defineProperty2.default)({
   display: 'block',
-  color: (0, _tokens.token)('color.text.subtle', _colors.N200),
+  color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
   fontSize: '12px',
   lineHeight: 1,
   marginBottom: '-2px',
@@ -181,7 +179,7 @@ var emojiShortName = (0, _react.css)((0, _defineProperty2.default)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 }, '&:first-of-type', {
-  color: (0, _tokens.token)('color.text', _colors.N900),
+  color: "var(--ds-text, ".concat(_colors.N900, ")"),
   fontSize: '14px'
 }));
 exports.emojiShortName = emojiShortName;
@@ -216,7 +214,7 @@ var previewImg = (0, _react.css)((_css6 = {
 
 exports.previewImg = previewImg;
 var emojiScrollable = (0, _react.css)({
-  border: "1px solid ".concat((0, _tokens.token)('color.border', '#fff')),
+  border: "1px solid ".concat("var(--ds-border, #fff)"),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   display: 'block',
   margin: '0',
@@ -243,7 +241,7 @@ var emojiUploadTop = (0, _react.css)({
 });
 exports.emojiUploadTop = emojiUploadTop;
 var uploadChooseFileMessage = (0, _react.css)({
-  color: (0, _tokens.token)('color.text.subtle', _colors.N300)
+  color: "var(--ds-text-subtle, ".concat(_colors.N300, ")")
 });
 exports.uploadChooseFileMessage = uploadChooseFileMessage;
 var closeEmojiUploadButton = (0, _react.css)({
@@ -289,14 +287,14 @@ var uploadPreview = (0, _react.css)({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: (0, _tokens.token)('color.background.neutral', _colors.N20),
+  background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   padding: '10px'
 });
 exports.uploadPreview = uploadPreview;
 var uploadPreviewText = (0, _react.css)({
   h5: {
-    color: (0, _tokens.token)('color.text.subtle', _colors.N300),
+    color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
     paddingBottom: '4px',
     fontSize: '12px'
   },
@@ -342,7 +340,7 @@ var deleteText = (0, _react.css)({
   height: '64px',
   fontSize: '12px',
   '&:first-of-type': {
-    color: (0, _tokens.token)('color.text.subtle', _colors.N300),
+    color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
     lineHeight: '16px'
   }
 });
@@ -375,7 +373,7 @@ var deleteFooter = (0, _react.css)((_css7 = {
 exports.deleteFooter = deleteFooter;
 var emojiDeleteErrorMessage = (0, _react.css)({
   display: 'flex',
-  color: (0, _tokens.token)('color.text.danger', _colors.R400),
+  color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
   alignItems: 'center',
   justifyContent: 'flex-end',
   paddingRight: '4px'
@@ -383,14 +381,14 @@ var emojiDeleteErrorMessage = (0, _react.css)({
 exports.emojiDeleteErrorMessage = emojiDeleteErrorMessage;
 var emojiChooseFileErrorMessage = (0, _react.css)({
   display: 'flex',
-  color: (0, _tokens.token)('color.text.danger', _colors.R300),
+  color: "var(--ds-text-danger, ".concat(_colors.R300, ")"),
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 exports.emojiChooseFileErrorMessage = emojiChooseFileErrorMessage;
 var emojiPreviewErrorMessage = (0, _react.css)({
   display: 'inline-flex',
-  color: (0, _tokens.token)('color.text.danger', _colors.R400),
+  color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'

package/dist/cjs/components/picker/styles.js

@@ -11,8 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _sharedStyles = require("../../util/shared-styles");
@@ -35,7 +33,7 @@ var emojiPicker = function emojiPicker(hasPreview) {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'space-between',
-    background: (0, _tokens.token)('elevation.surface.overlay', 'white'),
+    background: "var(--ds-surface-overlay, white)",
     border: "".concat(_sharedStyles.emojiPickerBorderColor, " 1px solid"),
     borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
     boxShadow: _sharedStyles.emojiPickerBoxShadow,
@@ -56,7 +54,7 @@ var addButton = 'emoji-picker-add-button';
 exports.addButton = addButton;
 var categorySelector = (0, _react.css)((0, _defineProperty2.default)({
   flex: '0 0 auto',
-  backgroundColor: (0, _tokens.token)('elevation.surface.sunken', _colors.N30),
+  backgroundColor: "var(--ds-surface-sunken, ".concat(_colors.N30, ")"),
   ul: {
     listStyle: 'none',
     margin: '0 4px',
@@ -74,28 +72,28 @@ var categorySelector = (0, _react.css)((0, _defineProperty2.default)({
     }
   }
 }, ".".concat(addButton), {
-  color: (0, _tokens.token)('color.text.subtlest', _colors.N200),
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
   margin: '0 0 0 5px',
   verticalAlign: 'middle'
 }));
 exports.categorySelector = categorySelector;
 var active = (0, _react.css)((0, _defineProperty2.default)({
-  color: (0, _tokens.token)('color.text.selected', _colors.B300)
+  color: "var(--ds-text-selected, ".concat(_colors.B300, ")")
 }, '&:hover', {
-  color: (0, _tokens.token)('color.text.selected', _colors.B300)
+  color: "var(--ds-text-selected, ".concat(_colors.B300, ")")
 }));
 exports.active = active;
 var disable = (0, _react.css)((0, _defineProperty2.default)({
-  color: (0, _tokens.token)('color.text.subtlest', _colors.N50),
+  color: "var(--ds-text-subtlest, ".concat(_colors.N50, ")"),
   cursor: 'default'
 }, '&:hover', {
-  color: (0, _tokens.token)('color.text.subtlest', _colors.N50)
+  color: "var(--ds-text-subtlest, ".concat(_colors.N50, ")")
 }));
 exports.disable = disable;
 var categoryStyles = (0, _react.css)((_css4 = {
   backgroundColor: 'transparent',
   border: 0,
-  color: (0, _tokens.token)('color.text.subtlest', _colors.N100A),
+  color: "var(--ds-text-subtlest, ".concat(_colors.N100A, ")"),
   cursor: 'pointer',
   margin: '2px 0',
   padding: 0,
@@ -104,7 +102,7 @@ var categoryStyles = (0, _react.css)((_css4 = {
   border: '0 none',
   padding: 0
 }), (0, _defineProperty2.default)(_css4, '&:hover', {
-  color: (0, _tokens.token)('color.text.selected', _colors.B200)
+  color: "var(--ds-text-selected, ".concat(_colors.B200, ")")
 }), _css4)); /// EmojiPickerList
 
 exports.categoryStyles = categoryStyles;
@@ -167,7 +165,7 @@ var emojiPickerRow = (0, _react.css)({
 exports.emojiPickerRow = emojiPickerRow;
 var emojiCategoryTitle = (0, _react.css)({
   boxSizing: 'border-box',
-  color: (0, _tokens.token)('color.text', _colors.N900),
+  color: "var(--ds-text, ".concat(_colors.N900, ")"),
   fontSize: '14px',
   padding: '5px 8px',
   textTransform: 'lowercase',
@@ -212,12 +210,12 @@ var emojiPickerFooter = (0, _react.css)({
 });
 exports.emojiPickerFooter = emojiPickerFooter;
 var emojiPickerFooterWithTopShadow = (0, _react.css)({
-  borderTop: "2px solid ".concat((0, _tokens.token)('color.border', _colors.N30A)),
-  boxShadow: "0px -1px 1px 0px ".concat((0, _tokens.token)('color.border', 'rgba(0, 0, 0, 0.1)'))
+  borderTop: "2px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")")),
+  boxShadow: "0px -1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))")
 });
 exports.emojiPickerFooterWithTopShadow = emojiPickerFooterWithTopShadow;
 var emojiActionsContainerWithBottomShadow = (0, _react.css)({
-  borderBottom: "2px solid ".concat((0, _tokens.token)('color.border', _colors.N30A)),
-  boxShadow: "0px 1px 1px 0px ".concat((0, _tokens.token)('color.border', 'rgba(0, 0, 0, 0.1)'))
+  borderBottom: "2px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")")),
+  boxShadow: "0px 1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))")
 });
 exports.emojiActionsContainerWithBottomShadow = emojiActionsContainerWithBottomShadow;

package/dist/cjs/components/typeahead/styles.js

@@ -7,8 +7,6 @@ exports.typeaheadSelected = exports.typeAheadListContainer = exports.typeAheadLi
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _sharedStyles = require("../../util/shared-styles");
 
 var emojiTypeAhead = 'emoji-typeahead-element';
@@ -19,11 +17,11 @@ exports.typeAheadListContainer = typeAheadListContainer;
 var typeaheadSelected = 'emoji-typeahead-selected';
 exports.typeaheadSelected = typeaheadSelected;
 var typeAheadList = (0, _react.css)({
-  background: (0, _tokens.token)('elevation.surface.overlay', 'white'),
+  background: "var(--ds-surface-overlay, white)",
   border: "1px solid ".concat(_sharedStyles.noDialogContainerBorderColor),
   borderRadius: _sharedStyles.noDialogContainerBorderRadius,
   boxShadow: _sharedStyles.noDialogContainerBoxShadow,
-  color: (0, _tokens.token)('color.text.subtle', '#333'),
+  color: "var(--ds-text-subtle, #333)",
   width: _sharedStyles.emojiTypeAheadWidth
 });
 exports.typeAheadList = typeAheadList;

package/dist/cjs/components/uploader/styles.js

@@ -7,8 +7,6 @@ exports.emojiUploadWidget = exports.emojiUploadFooter = void 0;
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("../../util/constants");
 
 // Uploader
@@ -17,7 +15,7 @@ var emojiUploadWidget = (0, _react.css)({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'stretch',
-  background: (0, _tokens.token)('elevation.surface.overlay', 'white'),
+  background: "var(--ds-surface-overlay, white)",
   height: "120px",
   width: "".concat(_constants.emojiPickerWidth, "px"),
   marginBottom: '8px',

package/dist/cjs/util/shared-styles.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.noDialogContainerBoxShadow = exports.noDialogContainerBorderRadius = exports.noDialogContainerBorderColor = exports.emojiTypeAheadWidth = exports.emojiTypeAheadMaxHeight = exports.emojiPreviewSelectedColor = exports.emojiPickerListWidth = exports.emojiPickerListHeight = exports.emojiPickerBoxShadow = exports.emojiPickerBorderColor = exports.akEmojiSelectedBackgroundColor = void 0;
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
@@ -17,19 +15,19 @@ var emojiPickerListWidth = _constants2.emojiPickerWidth;
 exports.emojiPickerListWidth = emojiPickerListWidth;
 var emojiPickerListHeight = 205;
 exports.emojiPickerListHeight = emojiPickerListHeight;
-var emojiPickerBorderColor = (0, _tokens.token)('color.border', _colors.N40);
+var emojiPickerBorderColor = "var(--ds-border, ".concat(_colors.N40, ")");
 exports.emojiPickerBorderColor = emojiPickerBorderColor;
-var emojiPickerBoxShadow = (0, _tokens.token)('elevation.shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
+var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
 exports.emojiPickerBoxShadow = emojiPickerBoxShadow;
-var noDialogContainerBorderColor = (0, _tokens.token)('color.border', _colors.N40);
+var noDialogContainerBorderColor = "var(--ds-border, ".concat(_colors.N40, ")");
 exports.noDialogContainerBorderColor = noDialogContainerBorderColor;
 var noDialogContainerBorderRadius = "".concat((0, _constants.borderRadius)(), "px");
 exports.noDialogContainerBorderRadius = noDialogContainerBorderRadius;
-var noDialogContainerBoxShadow = (0, _tokens.token)('elevation.shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
+var noDialogContainerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
 exports.noDialogContainerBoxShadow = noDialogContainerBoxShadow;
-var akEmojiSelectedBackgroundColor = (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30);
+var akEmojiSelectedBackgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")");
 exports.akEmojiSelectedBackgroundColor = akEmojiSelectedBackgroundColor;
-var emojiPreviewSelectedColor = (0, _tokens.token)('color.background.neutral', _colors.N30);
+var emojiPreviewSelectedColor = "var(--ds-background-neutral, ".concat(_colors.N30, ")");
 exports.emojiPreviewSelectedColor = emojiPreviewSelectedColor;
 var emojiTypeAheadMaxHeight = 350;
 exports.emojiTypeAheadMaxHeight = emojiTypeAheadMaxHeight;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "67.0.0",
+	"version": "67.0.2",
 	"sideEffects": false
 }

package/dist/es2019/components/common/DeleteButton.js

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import { token } from '@atlaskit/tokens';
 import { N500 } from '@atlaskit/theme/colors';
 import { deleteEmojiLabel } from '../../util/constants';
 import { emojiDeleteButton, deleteButton } from './styles';
@@ -19,7 +18,7 @@ const DeleteButton = props => jsx("span", {
 }, jsx(Button, {
   iconBefore: jsx(CrossCircleIcon, {
     label: deleteEmojiLabel,
-    primaryColor: token('color.text.subtle', N500),
+    primaryColor: `var(--ds-text-subtle, ${N500})`,
     size: "small"
   }),
   onClick: props.onClick,

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

@@ -1,6 +1,5 @@
 import { css, keyframes } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
 import { N20, N200, N20A, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
@@ -70,7 +69,7 @@ export const placeholderContainer = css({
   position: 'relative',
   margin: '-1px 0',
   display: 'inline-block',
-  background: token('color.border', '#f7f7f7'),
+  background: "var(--ds-border, #f7f7f7)",
   borderRadius: `${borderRadius()}px`,
   overflow: 'hidden',
   verticalAlign: 'middle',
@@ -90,7 +89,7 @@ export const placeholderContainerAnimated = css({
     content: '""',
     display: 'block',
     position: 'absolute',
-    background: token('color.background.neutral', N20A),
+    background: `var(--ds-background-neutral, ${N20A})`,
     height: '100%',
     width: '100%',
     animation: `${easeSweep} 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite`
@@ -143,7 +142,7 @@ export const previewText = css({
 });
 export const emojiName = css({
   display: 'block',
-  color: token('color.text', N900),
+  color: `var(--ds-text, ${N900})`,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
@@ -153,7 +152,7 @@ export const emojiName = css({
 });
 export const emojiShortName = css({
   display: 'block',
-  color: token('color.text.subtle', N200),
+  color: `var(--ds-text-subtle, ${N200})`,
   fontSize: '12px',
   lineHeight: 1,
   marginBottom: '-2px',
@@ -162,7 +161,7 @@ export const emojiShortName = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   ['&:first-of-type']: {
-    color: token('color.text', N900),
+    color: `var(--ds-text, ${N900})`,
     fontSize: '14px'
   }
 });
@@ -197,7 +196,7 @@ export const previewImg = css({
 }); // Scrollable
 
 export const emojiScrollable = css({
-  border: `1px solid ${token('color.border', '#fff')}`,
+  border: `1px solid ${"var(--ds-border, #fff)"}`,
   borderRadius: `${borderRadius()}px`,
   display: 'block',
   margin: '0',
@@ -221,7 +220,7 @@ export const emojiUploadTop = css({
   fontSize: '12px'
 });
 export const uploadChooseFileMessage = css({
-  color: token('color.text.subtle', N300)
+  color: `var(--ds-text-subtle, ${N300})`
 });
 export const closeEmojiUploadButton = css({
   display: 'flex'
@@ -262,13 +261,13 @@ export const uploadPreview = css({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: token('color.background.neutral', N20),
+  background: `var(--ds-background-neutral, ${N20})`,
   borderRadius: `${borderRadius()}px`,
   padding: '10px'
 });
 export const uploadPreviewText = css({
   h5: {
-    color: token('color.text.subtle', N300),
+    color: `var(--ds-text-subtle, ${N300})`,
     paddingBottom: '4px',
     fontSize: '12px'
   },
@@ -308,7 +307,7 @@ export const deleteText = css({
   height: '64px',
   fontSize: '12px',
   '&:first-of-type': {
-    color: token('color.text.subtle', N300),
+    color: `var(--ds-text-subtle, ${N300})`,
     lineHeight: '16px'
   }
 });
@@ -340,20 +339,20 @@ export const deleteFooter = css({
 });
 export const emojiDeleteErrorMessage = css({
   display: 'flex',
-  color: token('color.text.danger', R400),
+  color: `var(--ds-text-danger, ${R400})`,
   alignItems: 'center',
   justifyContent: 'flex-end',
   paddingRight: '4px'
 });
 export const emojiChooseFileErrorMessage = css({
   display: 'flex',
-  color: token('color.text.danger', R300),
+  color: `var(--ds-text-danger, ${R300})`,
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 export const emojiPreviewErrorMessage = css({
   display: 'inline-flex',
-  color: token('color.text.danger', R400),
+  color: `var(--ds-text-danger, ${R400})`,
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'

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

@@ -1,5 +1,4 @@
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
 import { emojiSprite, placeholder, emojiNodeStyles } from '../common/styles';
@@ -13,7 +12,7 @@ export const emojiPicker = (hasPreview, size = defaultEmojiPickerSize) => {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'space-between',
-    background: token('elevation.surface.overlay', 'white'),
+    background: "var(--ds-surface-overlay, white)",
     border: `${emojiPickerBorderColor} 1px solid`,
     borderRadius: `${borderRadius()}px`,
     boxShadow: emojiPickerBoxShadow,
@@ -31,7 +30,7 @@ export const emojiPicker = (hasPreview, size = defaultEmojiPickerSize) => {
 export const addButton = 'emoji-picker-add-button';
 export const categorySelector = css({
   flex: '0 0 auto',
-  backgroundColor: token('elevation.surface.sunken', N30),
+  backgroundColor: `var(--ds-surface-sunken, ${N30})`,
   ul: {
     listStyle: 'none',
     margin: '0 4px',
@@ -49,28 +48,28 @@ export const categorySelector = css({
     }
   },
   [`.${addButton}`]: {
-    color: token('color.text.subtlest', N200),
+    color: `var(--ds-text-subtlest, ${N200})`,
     margin: '0 0 0 5px',
     verticalAlign: 'middle'
   }
 });
 export const active = css({
-  color: token('color.text.selected', B300),
+  color: `var(--ds-text-selected, ${B300})`,
   ['&:hover']: {
-    color: token('color.text.selected', B300)
+    color: `var(--ds-text-selected, ${B300})`
   }
 });
 export const disable = css({
-  color: token('color.text.subtlest', N50),
+  color: `var(--ds-text-subtlest, ${N50})`,
   cursor: 'default',
   ['&:hover']: {
-    color: token('color.text.subtlest', N50)
+    color: `var(--ds-text-subtlest, ${N50})`
   }
 });
 export const categoryStyles = css({
   backgroundColor: 'transparent',
   border: 0,
-  color: token('color.text.subtlest', N100A),
+  color: `var(--ds-text-subtlest, ${N100A})`,
   cursor: 'pointer',
   margin: '2px 0',
   padding: 0,
@@ -82,7 +81,7 @@ export const categoryStyles = css({
     padding: 0
   },
   ['&:hover']: {
-    color: token('color.text.selected', B200)
+    color: `var(--ds-text-selected, ${B200})`
   }
 }); /// EmojiPickerList
 
@@ -140,7 +139,7 @@ export const emojiPickerRow = css({
 });
 export const emojiCategoryTitle = css({
   boxSizing: 'border-box',
-  color: token('color.text', N900),
+  color: `var(--ds-text, ${N900})`,
   fontSize: '14px',
   padding: '5px 8px',
   textTransform: 'lowercase',
@@ -189,10 +188,10 @@ export const emojiPickerFooter = css({
   flex: '0 0 auto'
 });
 export const emojiPickerFooterWithTopShadow = css({
-  borderTop: `2px solid ${token('color.border', N30A)}`,
-  boxShadow: `0px -1px 1px 0px ${token('color.border', 'rgba(0, 0, 0, 0.1)')}`
+  borderTop: `2px solid ${`var(--ds-border, ${N30A})`}`,
+  boxShadow: `0px -1px 1px 0px ${"var(--ds-border, rgba(0, 0, 0, 0.1))"}`
 });
 export const emojiActionsContainerWithBottomShadow = css({
-  borderBottom: `2px solid ${token('color.border', N30A)}`,
-  boxShadow: `0px 1px 1px 0px ${token('color.border', 'rgba(0, 0, 0, 0.1)')}`
+  borderBottom: `2px solid ${`var(--ds-border, ${N30A})`}`,
+  boxShadow: `0px 1px 1px 0px ${"var(--ds-border, rgba(0, 0, 0, 0.1))"}`
 });

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

@@ -1,16 +1,15 @@
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { emojiPreviewSelectedColor, emojiTypeAheadMaxHeight, emojiTypeAheadWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../util/shared-styles';
 export const emojiTypeAhead = 'emoji-typeahead-element';
 export const typeAheadListContainer = 'emoji-typeahead-list-container'; // editor-core is using this static class name for testing
 
 export const typeaheadSelected = 'emoji-typeahead-selected';
 export const typeAheadList = css({
-  background: token('elevation.surface.overlay', 'white'),
+  background: "var(--ds-surface-overlay, white)",
   border: `1px solid ${noDialogContainerBorderColor}`,
   borderRadius: noDialogContainerBorderRadius,
   boxShadow: noDialogContainerBoxShadow,
-  color: token('color.text.subtle', '#333'),
+  color: "var(--ds-text-subtle, #333)",
   width: emojiTypeAheadWidth
 });
 export const typeAheadEmpty = css({

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

@@ -1,5 +1,4 @@
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { emojiPickerWidth } from '../../util/constants'; // Uploader
 
 export const emojiUploadWidget = css({
@@ -7,7 +6,7 @@ export const emojiUploadWidget = css({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'stretch',
-  background: token('elevation.surface.overlay', 'white'),
+  background: "var(--ds-surface-overlay, white)",
   height: `120px`,
   width: `${emojiPickerWidth}px`,
   marginBottom: '8px',

package/dist/es2019/util/shared-styles.js

@@ -1,15 +1,14 @@
-import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N40, N30 } from '@atlaskit/theme/colors';
 import { emojiPickerWidth } from './constants';
 export const emojiPickerListWidth = emojiPickerWidth;
 export const emojiPickerListHeight = 205;
-export const emojiPickerBorderColor = token('color.border', N40);
-export const emojiPickerBoxShadow = token('elevation.shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
-export const noDialogContainerBorderColor = token('color.border', N40);
+export const emojiPickerBorderColor = `var(--ds-border, ${N40})`;
+export const emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
+export const noDialogContainerBorderColor = `var(--ds-border, ${N40})`;
 export const noDialogContainerBorderRadius = `${borderRadius()}px`;
-export const noDialogContainerBoxShadow = token('elevation.shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
-export const akEmojiSelectedBackgroundColor = token('color.background.neutral.subtle.hovered', N30);
-export const emojiPreviewSelectedColor = token('color.background.neutral', N30);
+export const noDialogContainerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
+export const akEmojiSelectedBackgroundColor = `var(--ds-background-neutral-subtle-hovered, ${N30})`;
+export const emojiPreviewSelectedColor = `var(--ds-background-neutral, ${N30})`;
 export const emojiTypeAheadMaxHeight = 350;
 export const emojiTypeAheadWidth = 350;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "67.0.0",
+	"version": "67.0.2",
 	"sideEffects": false
 }

package/dist/esm/components/common/DeleteButton.js

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import { token } from '@atlaskit/tokens';
 import { N500 } from '@atlaskit/theme/colors';
 import { deleteEmojiLabel } from '../../util/constants';
 import { emojiDeleteButton, deleteButton } from './styles';
@@ -20,7 +19,7 @@ var DeleteButton = function DeleteButton(props) {
   }, jsx(Button, {
     iconBefore: jsx(CrossCircleIcon, {
       label: deleteEmojiLabel,
-      primaryColor: token('color.text.subtle', N500),
+      primaryColor: "var(--ds-text-subtle, ".concat(N500, ")"),
       size: "small"
     }),
     onClick: props.onClick,

package/dist/esm/components/common/styles.js

@@ -5,7 +5,6 @@ var _css, _css2, _templateObject, _span, _css3, _css6, _input, _css7;
 
 import { css, keyframes } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
 import { N20, N200, N20A, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
@@ -70,7 +69,7 @@ export var placeholderContainer = css({
   position: 'relative',
   margin: '-1px 0',
   display: 'inline-block',
-  background: token('color.border', '#f7f7f7'),
+  background: "var(--ds-border, #f7f7f7)",
   borderRadius: "".concat(borderRadius(), "px"),
   overflow: 'hidden',
   verticalAlign: 'middle',
@@ -83,7 +82,7 @@ export var placeholderContainerAnimated = css({
     content: '""',
     display: 'block',
     position: 'absolute',
-    background: token('color.background.neutral', N20A),
+    background: "var(--ds-background-neutral, ".concat(N20A, ")"),
     height: '100%',
     width: '100%',
     animation: "".concat(easeSweep, " 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite")
@@ -128,7 +127,7 @@ export var previewText = css({
 });
 export var emojiName = css(_defineProperty({
   display: 'block',
-  color: token('color.text', N900),
+  color: "var(--ds-text, ".concat(N900, ")"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
@@ -137,7 +136,7 @@ export var emojiName = css(_defineProperty({
 }));
 export var emojiShortName = css(_defineProperty({
   display: 'block',
-  color: token('color.text.subtle', N200),
+  color: "var(--ds-text-subtle, ".concat(N200, ")"),
   fontSize: '12px',
   lineHeight: 1,
   marginBottom: '-2px',
@@ -146,7 +145,7 @@ export var emojiShortName = css(_defineProperty({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 }, '&:first-of-type', {
-  color: token('color.text', N900),
+  color: "var(--ds-text, ".concat(N900, ")"),
   fontSize: '14px'
 }));
 export var preview = css({
@@ -178,7 +177,7 @@ export var previewImg = css((_css6 = {
 }), _css6)); // Scrollable
 
 export var emojiScrollable = css({
-  border: "1px solid ".concat(token('color.border', '#fff')),
+  border: "1px solid ".concat("var(--ds-border, #fff)"),
   borderRadius: "".concat(borderRadius(), "px"),
   display: 'block',
   margin: '0',
@@ -202,7 +201,7 @@ export var emojiUploadTop = css({
   fontSize: '12px'
 });
 export var uploadChooseFileMessage = css({
-  color: token('color.text.subtle', N300)
+  color: "var(--ds-text-subtle, ".concat(N300, ")")
 });
 export var closeEmojiUploadButton = css({
   display: 'flex'
@@ -241,13 +240,13 @@ export var uploadPreview = css({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: token('color.background.neutral', N20),
+  background: "var(--ds-background-neutral, ".concat(N20, ")"),
   borderRadius: "".concat(borderRadius(), "px"),
   padding: '10px'
 });
 export var uploadPreviewText = css({
   h5: {
-    color: token('color.text.subtle', N300),
+    color: "var(--ds-text-subtle, ".concat(N300, ")"),
     paddingBottom: '4px',
     fontSize: '12px'
   },
@@ -287,7 +286,7 @@ export var deleteText = css({
   height: '64px',
   fontSize: '12px',
   '&:first-of-type': {
-    color: token('color.text.subtle', N300),
+    color: "var(--ds-text-subtle, ".concat(N300, ")"),
     lineHeight: '16px'
   }
 });
@@ -317,20 +316,20 @@ export var deleteFooter = css((_css7 = {
 }), _css7));
 export var emojiDeleteErrorMessage = css({
   display: 'flex',
-  color: token('color.text.danger', R400),
+  color: "var(--ds-text-danger, ".concat(R400, ")"),
   alignItems: 'center',
   justifyContent: 'flex-end',
   paddingRight: '4px'
 });
 export var emojiChooseFileErrorMessage = css({
   display: 'flex',
-  color: token('color.text.danger', R300),
+  color: "var(--ds-text-danger, ".concat(R300, ")"),
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 export var emojiPreviewErrorMessage = css({
   display: 'inline-flex',
-  color: token('color.text.danger', R400),
+  color: "var(--ds-text-danger, ".concat(R400, ")"),
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'

package/dist/esm/components/picker/styles.js

@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _css4, _css5, _css6;
 
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
 import { emojiSprite, placeholder, emojiNodeStyles } from '../common/styles';
@@ -18,7 +17,7 @@ export var emojiPicker = function emojiPicker(hasPreview) {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'space-between',
-    background: token('elevation.surface.overlay', 'white'),
+    background: "var(--ds-surface-overlay, white)",
     border: "".concat(emojiPickerBorderColor, " 1px solid"),
     borderRadius: "".concat(borderRadius(), "px"),
     boxShadow: emojiPickerBoxShadow,
@@ -36,7 +35,7 @@ export var emojiPicker = function emojiPicker(hasPreview) {
 export var addButton = 'emoji-picker-add-button';
 export var categorySelector = css(_defineProperty({
   flex: '0 0 auto',
-  backgroundColor: token('elevation.surface.sunken', N30),
+  backgroundColor: "var(--ds-surface-sunken, ".concat(N30, ")"),
   ul: {
     listStyle: 'none',
     margin: '0 4px',
@@ -54,25 +53,25 @@ export var categorySelector = css(_defineProperty({
     }
   }
 }, ".".concat(addButton), {
-  color: token('color.text.subtlest', N200),
+  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
   margin: '0 0 0 5px',
   verticalAlign: 'middle'
 }));
 export var active = css(_defineProperty({
-  color: token('color.text.selected', B300)
+  color: "var(--ds-text-selected, ".concat(B300, ")")
 }, '&:hover', {
-  color: token('color.text.selected', B300)
+  color: "var(--ds-text-selected, ".concat(B300, ")")
 }));
 export var disable = css(_defineProperty({
-  color: token('color.text.subtlest', N50),
+  color: "var(--ds-text-subtlest, ".concat(N50, ")"),
   cursor: 'default'
 }, '&:hover', {
-  color: token('color.text.subtlest', N50)
+  color: "var(--ds-text-subtlest, ".concat(N50, ")")
 }));
 export var categoryStyles = css((_css4 = {
   backgroundColor: 'transparent',
   border: 0,
-  color: token('color.text.subtlest', N100A),
+  color: "var(--ds-text-subtlest, ".concat(N100A, ")"),
   cursor: 'pointer',
   margin: '2px 0',
   padding: 0,
@@ -81,7 +80,7 @@ export var categoryStyles = css((_css4 = {
   border: '0 none',
   padding: 0
 }), _defineProperty(_css4, '&:hover', {
-  color: token('color.text.selected', B200)
+  color: "var(--ds-text-selected, ".concat(B200, ")")
 }), _css4)); /// EmojiPickerList
 
 export var emojiPickerList = css({
@@ -136,7 +135,7 @@ export var emojiPickerRow = css({
 });
 export var emojiCategoryTitle = css({
   boxSizing: 'border-box',
-  color: token('color.text', N900),
+  color: "var(--ds-text, ".concat(N900, ")"),
   fontSize: '14px',
   padding: '5px 8px',
   textTransform: 'lowercase',
@@ -178,10 +177,10 @@ export var emojiPickerFooter = css({
   flex: '0 0 auto'
 });
 export var emojiPickerFooterWithTopShadow = css({
-  borderTop: "2px solid ".concat(token('color.border', N30A)),
-  boxShadow: "0px -1px 1px 0px ".concat(token('color.border', 'rgba(0, 0, 0, 0.1)'))
+  borderTop: "2px solid ".concat("var(--ds-border, ".concat(N30A, ")")),
+  boxShadow: "0px -1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))")
 });
 export var emojiActionsContainerWithBottomShadow = css({
-  borderBottom: "2px solid ".concat(token('color.border', N30A)),
-  boxShadow: "0px 1px 1px 0px ".concat(token('color.border', 'rgba(0, 0, 0, 0.1)'))
+  borderBottom: "2px solid ".concat("var(--ds-border, ".concat(N30A, ")")),
+  boxShadow: "0px 1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))")
 });

package/dist/esm/components/typeahead/styles.js

@@ -1,16 +1,15 @@
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { emojiPreviewSelectedColor, emojiTypeAheadMaxHeight, emojiTypeAheadWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../util/shared-styles';
 export var emojiTypeAhead = 'emoji-typeahead-element';
 export var typeAheadListContainer = 'emoji-typeahead-list-container'; // editor-core is using this static class name for testing
 
 export var typeaheadSelected = 'emoji-typeahead-selected';
 export var typeAheadList = css({
-  background: token('elevation.surface.overlay', 'white'),
+  background: "var(--ds-surface-overlay, white)",
   border: "1px solid ".concat(noDialogContainerBorderColor),
   borderRadius: noDialogContainerBorderRadius,
   boxShadow: noDialogContainerBoxShadow,
-  color: token('color.text.subtle', '#333'),
+  color: "var(--ds-text-subtle, #333)",
   width: emojiTypeAheadWidth
 });
 export var typeAheadEmpty = css({

package/dist/esm/components/uploader/styles.js

@@ -1,5 +1,4 @@
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { emojiPickerWidth } from '../../util/constants'; // Uploader
 
 export var emojiUploadWidget = css({
@@ -7,7 +6,7 @@ export var emojiUploadWidget = css({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'stretch',
-  background: token('elevation.surface.overlay', 'white'),
+  background: "var(--ds-surface-overlay, white)",
   height: "120px",
   width: "".concat(emojiPickerWidth, "px"),
   marginBottom: '8px',

package/dist/esm/util/shared-styles.js

@@ -1,15 +1,14 @@
-import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N40, N30 } from '@atlaskit/theme/colors';
 import { emojiPickerWidth } from './constants';
 export var emojiPickerListWidth = emojiPickerWidth;
 export var emojiPickerListHeight = 205;
-export var emojiPickerBorderColor = token('color.border', N40);
-export var emojiPickerBoxShadow = token('elevation.shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
-export var noDialogContainerBorderColor = token('color.border', N40);
+export var emojiPickerBorderColor = "var(--ds-border, ".concat(N40, ")");
+export var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
+export var noDialogContainerBorderColor = "var(--ds-border, ".concat(N40, ")");
 export var noDialogContainerBorderRadius = "".concat(borderRadius(), "px");
-export var noDialogContainerBoxShadow = token('elevation.shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
-export var akEmojiSelectedBackgroundColor = token('color.background.neutral.subtle.hovered', N30);
-export var emojiPreviewSelectedColor = token('color.background.neutral', N30);
+export var noDialogContainerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
+export var akEmojiSelectedBackgroundColor = "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")");
+export var emojiPreviewSelectedColor = "var(--ds-background-neutral, ".concat(N30, ")");
 export var emojiTypeAheadMaxHeight = 350;
 export var emojiTypeAheadWidth = 350;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "67.0.0",
+	"version": "67.0.2",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "67.0.0",
+  "version": "67.0.2",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-client": "^19.1.0",
+    "@atlaskit/media-client": "^20.0.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/theme": "^12.2.0",

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -1319,3 +1320,17 @@ export interface WithSamplingUFOExperience
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0",
+  "react-dom": "^16.8.0",
+  "react-intl-next": "npm:react-intl@^5.18.1"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->