@atlaskit/emoji 63.1.10 → 63.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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,23 +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("input", {
+        return /*#__PURE__*/_react.default.createElement(_textfield.default, {
           placeholder: message,
           "aria-label": message,
           maxLength: maxNameLength,
           onChange: onNameChange,
           onKeyDown: _this2.onKeyDown,
           value: name,
-          ref: "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"));
 

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,17 +95,17 @@ 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.B200
+    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)
     })
   }), _$nest4)
 }); /// EmojiPickerList
@@ -138,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'
@@ -176,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',
@@ -248,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", {