@atlaskit/emoji 63.1.7 → 63.2.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/emoji
 
+## 63.2.0
+
+### Minor Changes
+
+- [`4f221a2664a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f221a2664a) - Instrumented `@atlaskit/emoji` with the new theming package, `@atlaskit/tokens`. New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+## 63.1.10
+
+### Patch Changes
+
+- [`5ee9d374461`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5ee9d374461) - [ux] AK-218: Emoji CategorySelector add outline to the category buttons on focus, add aria-label
+- [`022437d88d0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/022437d88d0) - [ux] AK-812 Emoji toolbar button hover state meet minimum contrast requirements
+- [`1f5f0470fdd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1f5f0470fdd) - New emoji link label with input
+
+## 63.1.9
+
+### Patch Changes
+
+- Updated dependencies
+
+## 63.1.8
+
+### Patch Changes
+
+- [`12ab65f8153`](https://bitbucket.org/atlassian/atlassian-frontend/commits/12ab65f8153) - Disabling flaky test
+- Updated dependencies
+
 ## 63.1.7
 
 ### Patch Changes

package/dist/cjs/api/EmojiRepository.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.getEmojiVariation = void 0;
+exports.getEmojiVariation = exports.default = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 

package/dist/cjs/api/EmojiResource.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.EmojiResource = exports.supportsUploadFeature = void 0;
+exports.supportsUploadFeature = exports.default = exports.EmojiResource = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/api/EmojiUtils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldUseAltRepresentation = exports.denormaliseEmojiServiceResponse = exports.denormaliseSkinEmoji = exports.denormaliseServiceAltRepresentation = exports.denormaliseServiceRepresentation = exports.isMediaApiUrl = exports.getAltRepresentation = exports.getPixelRatio = exports.emojiRequest = void 0;
+exports.shouldUseAltRepresentation = exports.isMediaApiUrl = exports.getPixelRatio = exports.getAltRepresentation = exports.emojiRequest = exports.denormaliseSkinEmoji = exports.denormaliseServiceRepresentation = exports.denormaliseServiceAltRepresentation = exports.denormaliseEmojiServiceResponse = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/api/internal/Comparators.js

@@ -5,9 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.UsageFrequencyComparator = exports.QueryStringPositionMatchComparator = exports.OrderComparator = exports.ExactShortNameMatchComparator = exports.EmojiTypeComparator = exports.ChainedEmojiComparator = exports.AsciiMatchComparator = exports.AlphabeticalShortnameComparator = void 0;
 exports.createSearchEmojiComparator = createSearchEmojiComparator;
 exports.createUsageOnlyEmojiComparator = createUsageOnlyEmojiComparator;
-exports.AlphabeticalShortnameComparator = exports.OrderComparator = exports.QueryStringPositionMatchComparator = exports.UsageFrequencyComparator = exports.EmojiTypeComparator = exports.ExactShortNameMatchComparator = exports.AsciiMatchComparator = exports.ChainedEmojiComparator = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/api/internal/UsageFrequencyTracker.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Gateway = exports.UsageFrequencyTracker = void 0;
+exports.UsageFrequencyTracker = exports.Gateway = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/api/media/SiteEmojiResource.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.mediaProportionOfProgress = void 0;
+exports.mediaProportionOfProgress = exports.default = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 

package/dist/cjs/api/media/TokenManager.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.expireAdjustment = void 0;
+exports.expireAdjustment = exports.default = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

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

@@ -15,6 +15,8 @@ var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-ci
 
 var _react = _interopRequireDefault(require("react"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("../../util/constants");
@@ -31,7 +33,7 @@ var DeleteButton = function DeleteButton(props) {
   }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
     iconBefore: /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,
-      primaryColor: _colors.N500,
+      primaryColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
       size: "small"
     }),
     onClick: props.onClick,

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

@@ -23,12 +23,12 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _fieldBase = _interopRequireDefault(require("@atlaskit/field-base"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactIntl = require("react-intl");
 
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+
 var ImageUtil = _interopRequireWildcard(require("../../util/image"));
 
 var _logger = _interopRequireDefault(require("../../util/logger"));
@@ -118,25 +118,18 @@ var ChooseEmojiFile = /*#__PURE__*/function (_PureComponent) {
         className: styles.uploadChooseFileRow
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: styles.uploadChooseFileEmojiName
-      }, /*#__PURE__*/_react.default.createElement(_fieldBase.default, {
-        appearance: "standard",
-        isCompact: true,
-        defaultIsFocused: true,
-        isFitContainerWidthEnabled: true
       }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiPlaceholder, function (message) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiNameAriaLabel, function (ariaLabel) {
-          return /*#__PURE__*/_react.default.createElement("input", {
-            placeholder: message,
-            "aria-label": ariaLabel,
-            maxLength: maxNameLength,
-            onChange: onNameChange,
-            onKeyDown: _this2.onKeyDown,
-            value: name,
-            ref: "name",
-            autoFocus: true
-          });
+        return /*#__PURE__*/_react.default.createElement(_textfield.default, {
+          placeholder: message,
+          "aria-label": message,
+          maxLength: maxNameLength,
+          onChange: onNameChange,
+          onKeyDown: _this2.onKeyDown,
+          value: name,
+          isCompact: true,
+          autoFocus: true
         });
-      }))), /*#__PURE__*/_react.default.createElement("span", {
+      })), /*#__PURE__*/_react.default.createElement("span", {
         className: styles.uploadChooseFileBrowse
       }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiChooseFileTitle, function (message) {
         return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buttonSpinner = exports.cancelButton = exports.uploadEmojiButton = exports.uploadRetryButton = exports.addCustomEmojiButton = exports.emojiPreviewErrorMessage = exports.emojiChooseFileErrorMessage = exports.emojiDeleteErrorMessage = exports.deleteFooter = exports.deleteText = exports.deletePreview = exports.previewButtonGroup = exports.submitDelete = exports.AddCustomEmoji = exports.uploadAddRow = exports.bigEmojiPreview = exports.uploadPreviewText = exports.uploadPreview = exports.uploadPreviewFooter = exports.uploadChooseFileBrowse = exports.uploadChooseFileEmojiName = exports.uploadChooseFileRow = exports.emojiUploadBottom = exports.uploadChooseFileMessage = exports.emojiUpload = exports.emojiScrollable = exports.emojiPreview = exports.emojiPreviewSection = exports.withToneSelector = exports.toneSelectorContainer = exports.previewSingleLine = exports.shortName = exports.name = exports.previewText = exports.previewImg = exports.preview = exports.buttons = exports.hiddenToneButton = exports.emojiButton = exports.placeholderEmoji = exports.placeholderContainer = exports.placeholder = exports.emojiContainer = exports.emoji = exports.deleteButton = exports.emojiImage = exports.emojiNode = exports.emojiSprite = exports.selectOnHover = exports.selected = void 0;
+exports.withToneSelector = exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.toneSelectorContainer = exports.submitDelete = exports.shortName = exports.selected = exports.selectOnHover = exports.previewText = exports.previewSingleLine = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderEmoji = exports.placeholderContainer = exports.placeholder = exports.name = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiSprite = exports.emojiScrollable = exports.emojiPreviewSection = exports.emojiPreviewErrorMessage = exports.emojiPreview = exports.emojiNode = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emoji = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.cancelButton = exports.buttons = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.AddCustomEmoji = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -15,6 +15,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants2 = require("../../util/constants");
 
 var _sharedStyles = require("../../util/shared-styles");
@@ -202,7 +204,7 @@ var emojiPreview = (0, _typestyle.style)({
       flexShrink: 1,
       $nest: (_$nest6 = {}, (0, _defineProperty2.default)(_$nest6, ".".concat(name), {
         display: 'block',
-        color: colors.N900,
+        color: (0, _tokens.token)('color.text.highEmphasis', colors.N900),
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -211,7 +213,7 @@ var emojiPreview = (0, _typestyle.style)({
         })
       }), (0, _defineProperty2.default)(_$nest6, ".".concat(shortName), {
         display: 'block',
-        color: colors.N200,
+        color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N200),
         fontSize: '12px',
         lineHeight: 1,
         marginBottom: '-2px',
@@ -225,7 +227,7 @@ var emojiPreview = (0, _typestyle.style)({
       $nest: (_$nest7 = {}, (0, _defineProperty2.default)(_$nest7, ".".concat(name), {
         display: 'none'
       }), (0, _defineProperty2.default)(_$nest7, ".".concat(shortName), {
-        color: colors.N900,
+        color: (0, _tokens.token)('color.text.highEmphasis', colors.N900),
         fontSize: '14px'
       }), _$nest7)
     }), _$nest8)
@@ -248,7 +250,7 @@ var emojiPreview = (0, _typestyle.style)({
 
 exports.emojiPreview = emojiPreview;
 var emojiScrollable = (0, _typestyle.style)({
-  border: '1px solid #fff',
+  border: "1px solid ".concat((0, _tokens.token)('color.border.neutral', '#fff')),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   display: 'block',
   margin: '0',
@@ -267,7 +269,7 @@ var emojiUpload = (0, _typestyle.style)({
 });
 exports.emojiUpload = emojiUpload;
 var uploadChooseFileMessage = (0, _typestyle.style)({
-  color: colors.N300,
+  color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
   fontSize: '12px',
   paddingBottom: '7px'
 });
@@ -288,11 +290,7 @@ var uploadChooseFileEmojiName = (0, _typestyle.style)({
     input: {
       background: 'transparent',
       border: 0,
-      fontSize: '12px',
       outline: 'none',
-      width: '100%',
-      height: '22px',
-      // fixed height is required to work in IE11 and other browsers in Windows
       $nest: (_$nest10 = {}, (0, _defineProperty2.default)(_$nest10, '&:invalid', {
         boxShadow: 'none'
       }), (0, _defineProperty2.default)(_$nest10, '&::-ms-clear', {
@@ -317,7 +315,7 @@ var uploadPreview = (0, _typestyle.style)({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: colors.N20,
+  background: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   padding: '10px'
 });
@@ -325,7 +323,7 @@ exports.uploadPreview = uploadPreview;
 var uploadPreviewText = (0, _typestyle.style)({
   $nest: {
     h5: {
-      color: colors.N300,
+      color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
       paddingBottom: '4px',
       fontSize: '12px'
     },
@@ -376,7 +374,7 @@ var deleteText = (0, _typestyle.style)({
   height: '64px',
   $nest: {
     ':first-child': {
-      color: colors.N300,
+      color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
       lineHeight: '16px'
     }
   }
@@ -412,7 +410,7 @@ var deleteFooter = (0, _typestyle.style)({
 exports.deleteFooter = deleteFooter;
 var emojiDeleteErrorMessage = (0, _typestyle.style)({
   display: 'flex',
-  color: colors.R400,
+  color: (0, _tokens.token)('color.text.danger', colors.R400),
   alignItems: 'center',
   justifyContent: 'flex-end',
   paddingRight: '4px'
@@ -420,14 +418,14 @@ var emojiDeleteErrorMessage = (0, _typestyle.style)({
 exports.emojiDeleteErrorMessage = emojiDeleteErrorMessage;
 var emojiChooseFileErrorMessage = (0, _typestyle.style)({
   display: 'flex',
-  color: colors.R300,
+  color: (0, _tokens.token)('color.text.danger', colors.R300),
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 exports.emojiChooseFileErrorMessage = emojiChooseFileErrorMessage;
 var emojiPreviewErrorMessage = (0, _typestyle.style)({
   display: 'inline-flex',
-  color: colors.R400,
+  color: (0, _tokens.token)('color.text.danger', colors.R400),
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.sortCategories = void 0;
+exports.sortCategories = exports.default = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -136,6 +136,7 @@ var CategorySelector = /*#__PURE__*/function (_PureComponent) {
             key: category.id
           }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages[category.name], function (categoryName) {
             return /*#__PURE__*/_react.default.createElement("button", {
+              "aria-label": categoryName,
               "data-category-id": category.id,
               className: (0, _classnames.default)(categoryClasses),
               onClick: _this2.onClick,

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

@@ -23,11 +23,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _fieldBase = _interopRequireDefault(require("@atlaskit/field-base"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
 
 var _reactIntl = require("react-intl");
 
@@ -133,29 +133,25 @@ var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
         className: styles.pickerSearch,
         style: style
       }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.searchPlaceholder, function (searchPlaceholder) {
-        return /*#__PURE__*/_react.default.createElement(_fieldBase.default, {
-          appearance: "standard",
-          isCompact: true,
-          isFitContainerWidthEnabled: true
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: styles.searchIcon
-        }, /*#__PURE__*/_react.default.createElement(_search.default, {
-          label: ""
-        })), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.searchLabel, function (searchLabel) {
-          return /*#__PURE__*/_react.default.createElement("input", {
+        return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.searchLabel, function (searchLabel) {
+          return /*#__PURE__*/_react.default.createElement(_textfield.default, {
             "aria-label": searchLabel,
             className: styles.input,
             autoComplete: "off",
-            disabled: false,
             name: "search",
             placeholder: "".concat(searchPlaceholder, "..."),
-            required: false,
             onChange: _this2.onChange,
             value: query || '',
             ref: _this2.handleInputRef,
-            onBlur: _this2.onBlur
+            isCompact: true,
+            onBlur: _this2.onBlur,
+            elemBeforeInput: /*#__PURE__*/_react.default.createElement("span", {
+              className: styles.searchIcon
+            }, /*#__PURE__*/_react.default.createElement(_search.default, {
+              label: ""
+            }))
           });
-        }));
+        });
       }));
     }
   }]);

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.virtualItemRenderer = exports.CategoryHeadingItem = exports.LoadingItem = exports.EmojisRowItem = exports.AbstractItem = void 0;
+exports.virtualItemRenderer = exports.LoadingItem = exports.EmojisRowItem = exports.CategoryHeadingItem = exports.AbstractItem = void 0;
 
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 

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

@@ -7,12 +7,14 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiPickerFooterWithTopShadow = exports.emojiPickerFooter = exports.addEmoji = exports.emojiItem = exports.emojiCategoryTitle = exports.emojiPickerRow = exports.emojiPickerSpinner = exports.pickerSearch = exports.input = exports.searchIcon = exports.virtualList = exports.emojiPickerList = exports.category = exports.categorySelector = exports.addButton = exports.emojiPicker = exports.disable = exports.active = void 0;
+exports.virtualList = exports.searchIcon = exports.pickerSearch = exports.input = exports.emojiPickerSpinner = exports.emojiPickerRow = exports.emojiPickerList = exports.emojiPickerFooterWithTopShadow = exports.emojiPickerFooter = exports.emojiPicker = exports.emojiItem = exports.emojiCategoryTitle = exports.disable = exports.categorySelector = exports.category = exports.addEmoji = exports.addButton = exports.active = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _typestyle = require("typestyle");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
@@ -38,7 +40,7 @@ var emojiPicker = (0, _typestyle.style)({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
-  background: 'white',
+  background: (0, _tokens.token)('color.background.overlay', 'white'),
   border: "".concat(_sharedStyles.emojiPickerBorderColor, " 1px solid"),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   boxShadow: _sharedStyles.emojiPickerBoxShadow,
@@ -54,7 +56,7 @@ var addButton = 'emoji-picker-add-button';
 exports.addButton = addButton;
 var categorySelector = (0, _typestyle.style)({
   flex: '0 0 auto',
-  backgroundColor: colors.N30,
+  backgroundColor: (0, _tokens.token)('color.background.sunken', colors.N30),
   $nest: (0, _defineProperty2.default)({
     ul: {
       listStyle: 'none',
@@ -75,7 +77,7 @@ var categorySelector = (0, _typestyle.style)({
       }
     }
   }, ".".concat(addButton), {
-    color: colors.N200,
+    color: (0, _tokens.token)('color.text.lowEmphasis', colors.N200),
     margin: '0 0 0 5px',
     verticalAlign: 'middle'
   })
@@ -84,7 +86,7 @@ exports.categorySelector = categorySelector;
 var category = (0, _typestyle.style)({
   backgroundColor: 'transparent',
   border: 0,
-  color: colors.N100A,
+  color: (0, _tokens.token)('color.text.lowEmphasis', colors.N100A),
   cursor: 'pointer',
   margin: '2px 0',
   padding: 0,
@@ -93,20 +95,18 @@ var category = (0, _typestyle.style)({
     border: '0 none',
     padding: 0
   }), (0, _defineProperty2.default)(_$nest4, "&.".concat(active), {
-    color: colors.B300,
+    color: (0, _tokens.token)('color.text.selected', colors.B300),
     $nest: (0, _defineProperty2.default)({}, '&:hover', {
-      color: colors.B300
+      color: (0, _tokens.token)('color.text.selected', colors.B300)
     })
   }), (0, _defineProperty2.default)(_$nest4, '&:hover', {
-    color: colors.B100
+    color: (0, _tokens.token)('color.text.selected', colors.B200)
   }), (0, _defineProperty2.default)(_$nest4, "&.".concat(disable), {
-    color: colors.N50,
+    color: (0, _tokens.token)('color.text.lowEmphasis', colors.N50),
     cursor: 'default',
     $nest: (0, _defineProperty2.default)({}, '&:hover', {
-      color: colors.N50
+      color: (0, _tokens.token)('color.text.lowEmphasis', colors.N50)
     })
-  }), (0, _defineProperty2.default)(_$nest4, '&:focus', {
-    outline: '0'
   }), _$nest4)
 }); /// EmojiPickerList
 
@@ -140,14 +140,12 @@ var pickerSearch = (0, _typestyle.style)({
   $nest: (_$nest6 = {}, (0, _defineProperty2.default)(_$nest6, ".".concat(searchIcon), {
     opacity: 0.5
   }), (0, _defineProperty2.default)(_$nest6, ".".concat(input), {
-    background: 'transparent',
-    border: 0,
     boxSizing: 'border-box',
     color: 'inherit',
     cursor: 'inherit',
     fontSize: '14px',
     outline: 'none',
-    padding: '1px 0 2px 10px',
+    padding: '1px 0 2px 6px',
     width: '100%',
     $nest: (_$nest5 = {}, (0, _defineProperty2.default)(_$nest5, '&:invalid', {
       boxShadow: 'none'
@@ -178,7 +176,7 @@ var emojiPickerRow = (0, _typestyle.style)({
 exports.emojiPickerRow = emojiPickerRow;
 var emojiCategoryTitle = (0, _typestyle.style)({
   boxSizing: 'border-box',
-  color: colors.N900,
+  color: (0, _tokens.token)('color.text.highEmphasis', colors.N900),
   fontSize: '14px',
   padding: '5px 8px',
   textTransform: 'lowercase',
@@ -250,7 +248,7 @@ var emojiPickerFooter = (0, _typestyle.style)({
 });
 exports.emojiPickerFooter = emojiPickerFooter;
 var emojiPickerFooterWithTopShadow = (0, _typestyle.style)({
-  borderTop: "2px solid ".concat(colors.N30A),
-  boxShadow: _sharedStyles.emojiFooterBoxShadow
+  borderTop: (0, _tokens.token)('color.border.neutral', "2px solid ".concat(colors.N30A)),
+  boxShadow: "0px -1px 1px 0px ".concat((0, _tokens.token)('color.border.neutral', 'rgba(0, 0, 0, 0.1)'))
 });
 exports.emojiPickerFooterWithTopShadow = emojiPickerFooterWithTopShadow;

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

@@ -5,12 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiTypeAheadSpinner = exports.emojiTypeAheadSpinnerContainer = exports.typeAheadItemRow = exports.typeAheadItem = exports.typeAheadEmpty = exports.typeAheadList = exports.typeAheadListContainer = exports.emojiTypeAhead = exports.selected = void 0;
+exports.typeAheadListContainer = exports.typeAheadList = exports.typeAheadItemRow = exports.typeAheadItem = exports.typeAheadEmpty = exports.selected = exports.emojiTypeAheadSpinnerContainer = exports.emojiTypeAheadSpinner = exports.emojiTypeAhead = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _typestyle = require("typestyle");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _sharedStyles = require("../../util/shared-styles");
 
 var selected = 'emoji-typeahead-selected';
@@ -20,11 +22,11 @@ exports.emojiTypeAhead = emojiTypeAhead;
 var typeAheadListContainer = 'emoji-typeahead-list-container';
 exports.typeAheadListContainer = typeAheadListContainer;
 var typeAheadList = (0, _typestyle.style)({
-  background: 'white',
+  background: (0, _tokens.token)('color.background.overlay', 'white'),
   border: "1px solid ".concat(_sharedStyles.noDialogContainerBorderColor),
   borderRadius: _sharedStyles.noDialogContainerBorderRadius,
   boxShadow: _sharedStyles.noDialogContainerBoxShadow,
-  color: '#333',
+  color: (0, _tokens.token)('color.text.mediumEmphasis', '#333'),
   width: _sharedStyles.emojiTypeAheadWidth
 });
 exports.typeAheadList = typeAheadList;

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

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiUploadFooter = exports.emojiUploadWidget = void 0;
+exports.emojiUploadWidget = exports.emojiUploadFooter = void 0;
 
 var _typestyle = require("typestyle");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants = require("../../util/constants");
 
 // Uploader
@@ -15,7 +17,7 @@ var emojiUploadWidget = (0, _typestyle.style)({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'stretch',
-  background: 'white',
+  background: (0, _tokens.token)('color.background.overlay', 'white'),
   height: "120px",
   width: "".concat(_constants.emojiPickerWidth, "px"),
   marginBottom: '8px',

package/dist/cjs/element.js

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EmojiPlaceholder", {
+Object.defineProperty(exports, "Emoji", {
   enumerable: true,
   get: function get() {
-    return _EmojiPlaceholder.default;
+    return _Emoji.default;
   }
 });
-Object.defineProperty(exports, "Emoji", {
+Object.defineProperty(exports, "EmojiPlaceholder", {
   enumerable: true,
   get: function get() {
-    return _Emoji.default;
+    return _EmojiPlaceholder.default;
   }
 });
 Object.defineProperty(exports, "ResourcedEmoji", {

package/dist/cjs/i18n/cs.js

@@ -29,7 +29,7 @@ var _default = {
   'fabric.emoji.category.productivity': 'Produktivita',
   'fabric.emoji.category.symbols': 'Symboly',
   'fabric.emoji.category.user.uploads': 'Vaše nahrané položky',
-  'fabric.emoji.choose.file.ariaLabel': 'Vyberte soubor emotikonu. JPG, PNG nebo GIF. Maximální velikost je 1 MB.',
+  'fabric.emoji.choose.file.screenReaderDescription': 'Vyberte soubor smajlíku. JPG, PNG nebo GIF. Maximální velikost je 1 MB.',
   'fabric.emoji.choose.file.title': 'Vybrat soubor',
   'fabric.emoji.delete.description': 'Veškeré existující výskyty tohoto emoji budou nahrazeny {emojiShortName}',
   'fabric.emoji.delete.label': 'Odstranit',
@@ -44,6 +44,8 @@ var _default = {
   'fabric.emoji.preview': 'Vaše nové emoji {emoji} vypadá skvěle!',
   'fabric.emoji.preview.title': 'Náhled',
   'fabric.emoji.retry.label': 'Zkusit znovu',
-  'fabric.emoji.search.label': 'Vyhledat'
+  'fabric.emoji.search.label': 'Vyhledat smajlík',
+  'fabric.emoji.search.placeholder': 'Vyhledat',
+  'fabric.emoji.select.skin.tone.ariaLabel': 'Výběr odstínu pleti – {selectedTone}'
 };
 exports.default = _default;

package/dist/cjs/i18n/da.js

@@ -29,7 +29,7 @@ var _default = {
   'fabric.emoji.category.productivity': 'Produktivitet',
   'fabric.emoji.category.symbols': 'Symboler',
   'fabric.emoji.category.user.uploads': 'Dine uploads',
-  'fabric.emoji.choose.file.ariaLabel': 'Vælg en fil til emojien. JPG, PNG eller GIF. Maks. størrelse 1 MB.',
+  'fabric.emoji.choose.file.screenReaderDescription': 'Vælg en fil til emojien. JPG, PNG eller GIF. Maks. størrelse 1 MB.',
   'fabric.emoji.choose.file.title': 'Vælg fil',
   'fabric.emoji.delete.description': 'Alle eksisterende forekomster af denne emoji erstattes med  {emojiShortName}',
   'fabric.emoji.delete.label': 'Fjern',
@@ -44,6 +44,8 @@ var _default = {
   'fabric.emoji.preview': 'Din nye emoji {emoji} ser flot ud',
   'fabric.emoji.preview.title': 'Vis',
   'fabric.emoji.retry.label': 'Prøv igen',
-  'fabric.emoji.search.label': 'Søg'
+  'fabric.emoji.search.label': 'Søg efter emoji',
+  'fabric.emoji.search.placeholder': 'Søg',
+  'fabric.emoji.select.skin.tone.ariaLabel': 'Vælg hudfarve, {selectedTone}'
 };
 exports.default = _default;

package/dist/cjs/i18n/de.js

@@ -29,7 +29,7 @@ var _default = {
   'fabric.emoji.category.productivity': 'Produktivität',
   'fabric.emoji.category.symbols': 'Symbole',
   'fabric.emoji.category.user.uploads': 'Ihre Uploads',
-  'fabric.emoji.choose.file.ariaLabel': 'Wählen Sie eine Datei für das Emoji. JPG, PNG oder GIF. Max. Größe: 1 MB.',
+  'fabric.emoji.choose.file.screenReaderDescription': 'Wählen Sie eine Datei für das Emoji. JPG, PNG oder GIF. Max. Größe: 1 MB.',
   'fabric.emoji.choose.file.title': 'Datei auswählen',
   'fabric.emoji.delete.description': 'Alle existierenden Instanzen dieses Emojis werden durch {emojiShortName} ersetzt',
   'fabric.emoji.delete.label': 'Entfernen',
@@ -44,6 +44,8 @@ var _default = {
   'fabric.emoji.preview': 'Ihr neues Emoji {emoji} sieht toll aus',
   'fabric.emoji.preview.title': 'Vorschau',
   'fabric.emoji.retry.label': 'Wiederholen',
-  'fabric.emoji.search.label': 'Suchen'
+  'fabric.emoji.search.label': 'Emoji suchen',
+  'fabric.emoji.search.placeholder': 'Suchen',
+  'fabric.emoji.select.skin.tone.ariaLabel': 'Hautfarbe auswählen: {selectedTone}'
 };
 exports.default = _default;