@atlaskit/reactions 20.0.0 → 20.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/reactions
 
+## 20.1.0
+
+### Minor Changes
+
+- [`e82f9588eff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e82f9588eff) - Instrumented `@atlaskit/reactions` 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.
+
 ## 20.0.0
 
 ### Major Changes

package/dist/cjs/analytics/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createReactionClickedEvent = exports.createReactionHoveredEvent = exports.createReactionSelectionEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createReactionsRenderedEvent = exports.createRestFailedEvent = exports.createRestSucceededEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
+exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/client/MockReactionsClient.js

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

package/dist/cjs/components/Counter.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Counter = exports.slideDownStyle = exports.slideUpStyle = exports.containerStyle = exports.highlightStyle = exports.countStyle = void 0;
+exports.slideUpStyle = exports.slideDownStyle = exports.highlightStyle = exports.countStyle = exports.containerStyle = exports.Counter = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -23,6 +23,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -40,14 +42,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var animationTime = 300;
 var countStyle = (0, _typestyle.style)({
   fontSize: '11px',
-  color: _colors.N90,
+  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N90),
   overflow: 'hidden',
   height: "".concat(_utils.akHeight, "px"),
   transition: "width ".concat(animationTime, "ms ease-in-out")
 });
 exports.countStyle = countStyle;
 var highlightStyle = (0, _typestyle.style)({
-  color: _colors.B400,
+  color: (0, _tokens.token)('color.text.selected', _colors.B400),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;

package/dist/cjs/components/FlashAnimation.js

@@ -5,12 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FlashAnimation = exports.flashStyle = void 0;
+exports.flashStyle = exports.FlashAnimation = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -27,16 +29,16 @@ var flashAnimation = (0, _typestyle.keyframes)({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: _colors.B75,
-    borderColor: _colors.B300
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
   },
   '75%': {
-    backgroundColor: _colors.B75,
-    borderColor: _colors.B300
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
   },
   '100%': {
-    backgroundColor: _colors.B75,
-    borderColor: _colors.B300
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
   }
 });
 var flashStyle = (0, _typestyle.style)({

package/dist/cjs/components/Reaction.js

@@ -29,6 +29,8 @@ var _element = require("@atlaskit/emoji/element");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -71,26 +73,26 @@ var reactionStyle = (0, _typestyle.style)({
   minWidth: '36px',
   height: "".concat(_utils.akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat(_colors.N40),
+  border: "1px solid ".concat((0, _tokens.token)('color.border.neutral', _colors.N40)),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat(_colors.N400),
+  color: "".concat((0, _tokens.token)('color.text.mediumEmphasis', _colors.N400)),
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: "".concat(_colors.N20)
+      background: "".concat((0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20))
     }
   }
 });
 var reactedStyle = (0, _typestyle.style)({
-  backgroundColor: _colors.B50,
-  borderColor: _colors.B300,
+  backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.B50),
+  borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300),
   $nest: {
     '&:hover': {
-      background: "".concat(_colors.B75)
+      background: "".concat((0, _tokens.token)('color.background.selected.hover', _colors.B75))
     }
   }
 });

package/dist/cjs/components/ReactionPicker.js

@@ -31,6 +31,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -55,10 +57,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var akBorderRadius = "".concat((0, _constants.borderRadius)(), "px");
-var akColorN0 = _colors.N0;
-var akColorN50A = _colors.N50A;
-var akColorN60A = _colors.N60A;
 var pickerStyle = (0, _typestyle.style)({
   verticalAlign: 'middle',
   $nest: {
@@ -72,9 +70,9 @@ var contentStyle = (0, _typestyle.style)({
   display: 'flex'
 });
 var popupStyle = (0, _typestyle.style)({
-  background: akColorN0,
-  borderRadius: akBorderRadius,
-  boxShadow: "0 4px 8px -2px ".concat(akColorN50A, ", 0 0 1px ").concat(akColorN60A),
+  background: (0, _tokens.token)('color.background.overlay', _colors.N0),
+  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  boxShadow: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/cjs/components/ReactionTooltip.js

@@ -17,6 +17,8 @@ var _reactIntl = require("react-intl");
 
 var _typestyle = require("typestyle");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _colors = require("@atlaskit/theme/colors");
 
 var _i18n = require("./i18n");
@@ -44,11 +46,11 @@ var tooltipStyle = (0, _typestyle.style)({
 });
 var emojiNameStyle = (0, _typestyle.style)({
   textTransform: 'capitalize',
-  color: _colors.N90,
+  color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N90),
   fontWeight: 600
 });
 var footerStyle = (0, _typestyle.style)({
-  color: _colors.N90,
+  color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N90),
   fontWeight: 300
 });
 var TOOLTIP_USERS_LIMIT = 5;

package/dist/cjs/components/Reactions.js

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

package/dist/cjs/components/Selector.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Selector = exports.isDefaultReaction = exports.defaultReactionsByShortName = exports.defaultReactions = exports.revealStyle = void 0;
+exports.revealStyle = exports.isDefaultReaction = exports.defaultReactionsByShortName = exports.defaultReactions = exports.Selector = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/components/ShowMore.js

@@ -25,6 +25,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -57,12 +59,12 @@ var moreButtonStyle = (0, _typestyle.style)({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: _colors.N30A
+      backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30A)
     }
   }
 });
 var separatorStyle = (0, _typestyle.style)({
-  backgroundColor: _colors.N30A,
+  backgroundColor: (0, _tokens.token)('color.border.neutral', _colors.N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

package/dist/cjs/components/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.equalEmojiId = exports.isLeftClick = exports.akHeight = void 0;
+exports.isLeftClick = exports.equalEmojiId = exports.akHeight = void 0;
 var akHeight = 24;
 exports.akHeight = akHeight;
 

package/dist/cjs/i18n/index.js

@@ -5,34 +5,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "zh", {
+Object.defineProperty(exports, "cs", {
   enumerable: true,
   get: function get() {
-    return _zh.default;
+    return _cs.default;
   }
 });
-Object.defineProperty(exports, "zh_TW", {
+Object.defineProperty(exports, "da", {
   enumerable: true,
   get: function get() {
-    return _zh_TW.default;
+    return _da.default;
   }
 });
-Object.defineProperty(exports, "cs", {
+Object.defineProperty(exports, "de", {
   enumerable: true,
   get: function get() {
-    return _cs.default;
+    return _de.default;
   }
 });
-Object.defineProperty(exports, "da", {
+Object.defineProperty(exports, "en", {
   enumerable: true,
   get: function get() {
-    return _da.default;
+    return _en.default;
   }
 });
-Object.defineProperty(exports, "nl", {
+Object.defineProperty(exports, "en_GB", {
   enumerable: true,
   get: function get() {
-    return _nl.default;
+    return _en_GB.default;
+  }
+});
+Object.defineProperty(exports, "es", {
+  enumerable: true,
+  get: function get() {
+    return _es.default;
   }
 });
 Object.defineProperty(exports, "et", {
@@ -53,16 +59,16 @@ Object.defineProperty(exports, "fr", {
     return _fr.default;
   }
 });
-Object.defineProperty(exports, "de", {
+Object.defineProperty(exports, "hu", {
   enumerable: true,
   get: function get() {
-    return _de.default;
+    return _hu.default;
   }
 });
-Object.defineProperty(exports, "hu", {
+Object.defineProperty(exports, "is", {
   enumerable: true,
   get: function get() {
-    return _hu.default;
+    return _is.default;
   }
 });
 Object.defineProperty(exports, "it", {
@@ -89,6 +95,12 @@ Object.defineProperty(exports, "nb", {
     return _nb.default;
   }
 });
+Object.defineProperty(exports, "nl", {
+  enumerable: true,
+  get: function get() {
+    return _nl.default;
+  }
+});
 Object.defineProperty(exports, "pl", {
   enumerable: true,
   get: function get() {
@@ -107,22 +119,22 @@ Object.defineProperty(exports, "pt_PT", {
     return _pt_PT.default;
   }
 });
-Object.defineProperty(exports, "ru", {
+Object.defineProperty(exports, "ro", {
   enumerable: true,
   get: function get() {
-    return _ru.default;
+    return _ro.default;
   }
 });
-Object.defineProperty(exports, "sk", {
+Object.defineProperty(exports, "ru", {
   enumerable: true,
   get: function get() {
-    return _sk.default;
+    return _ru.default;
   }
 });
-Object.defineProperty(exports, "es", {
+Object.defineProperty(exports, "sk", {
   enumerable: true,
   get: function get() {
-    return _es.default;
+    return _sk.default;
   }
 });
 Object.defineProperty(exports, "sv", {
@@ -155,28 +167,16 @@ Object.defineProperty(exports, "vi", {
     return _vi.default;
   }
 });
-Object.defineProperty(exports, "en", {
-  enumerable: true,
-  get: function get() {
-    return _en.default;
-  }
-});
-Object.defineProperty(exports, "en_GB", {
-  enumerable: true,
-  get: function get() {
-    return _en_GB.default;
-  }
-});
-Object.defineProperty(exports, "is", {
+Object.defineProperty(exports, "zh", {
   enumerable: true,
   get: function get() {
-    return _is.default;
+    return _zh.default;
   }
 });
-Object.defineProperty(exports, "ro", {
+Object.defineProperty(exports, "zh_TW", {
   enumerable: true,
   get: function get() {
-    return _ro.default;
+    return _zh_TW.default;
   }
 });
 

package/dist/cjs/index.js

@@ -3,52 +3,52 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ReactionServiceClient", {
+Object.defineProperty(exports, "ConnectedReactionPicker", {
   enumerable: true,
   get: function get() {
-    return _client.ReactionServiceClient;
+    return _containers.ConnectedReactionPicker;
   }
 });
-Object.defineProperty(exports, "Reaction", {
+Object.defineProperty(exports, "ConnectedReactionsView", {
   enumerable: true,
   get: function get() {
-    return _components.Reaction;
+    return _containers.ConnectedReactionsView;
   }
 });
-Object.defineProperty(exports, "ReactionPicker", {
+Object.defineProperty(exports, "MemoryReactionsStore", {
   enumerable: true,
   get: function get() {
-    return _components.ReactionPicker;
+    return _reactionStore.MemoryReactionsStore;
   }
 });
-Object.defineProperty(exports, "Reactions", {
+Object.defineProperty(exports, "Reaction", {
   enumerable: true,
   get: function get() {
-    return _components.Reactions;
+    return _components.Reaction;
   }
 });
-Object.defineProperty(exports, "ConnectedReactionPicker", {
+Object.defineProperty(exports, "ReactionConsumer", {
   enumerable: true,
   get: function get() {
-    return _containers.ConnectedReactionPicker;
+    return _reactionStore.ReactionConsumer;
   }
 });
-Object.defineProperty(exports, "ConnectedReactionsView", {
+Object.defineProperty(exports, "ReactionPicker", {
   enumerable: true,
   get: function get() {
-    return _containers.ConnectedReactionsView;
+    return _components.ReactionPicker;
   }
 });
-Object.defineProperty(exports, "MemoryReactionsStore", {
+Object.defineProperty(exports, "ReactionServiceClient", {
   enumerable: true,
   get: function get() {
-    return _reactionStore.MemoryReactionsStore;
+    return _client.ReactionServiceClient;
   }
 });
-Object.defineProperty(exports, "ReactionConsumer", {
+Object.defineProperty(exports, "Reactions", {
   enumerable: true,
   get: function get() {
-    return _reactionStore.ReactionConsumer;
+    return _components.Reactions;
   }
 });
 

package/dist/cjs/reaction-store/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ReactionConsumer", {
+Object.defineProperty(exports, "MemoryReactionsStore", {
   enumerable: true,
   get: function get() {
-    return _ReactionConsumer.ReactionConsumer;
+    return _ReactionsStore.MemoryReactionsStore;
   }
 });
-Object.defineProperty(exports, "MemoryReactionsStore", {
+Object.defineProperty(exports, "ReactionConsumer", {
   enumerable: true,
   get: function get() {
-    return _ReactionsStore.MemoryReactionsStore;
+    return _ReactionConsumer.ReactionConsumer;
   }
 });
 

package/dist/cjs/reaction-store/utils.js

@@ -5,8 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getReactionsSortFunction = exports.flattenAris = exports.compareEmojiId = exports.byEmojiId = exports.addOne = void 0;
 exports.isRealErrorFromService = isRealErrorFromService;
-exports.flattenAris = exports.getReactionsSortFunction = exports.updateByEmojiId = exports.removeOne = exports.addOne = exports.byEmojiId = exports.readyState = exports.sortByPreviousPosition = exports.sortByRelevance = exports.compareEmojiId = void 0;
+exports.updateByEmojiId = exports.sortByRelevance = exports.sortByPreviousPosition = exports.removeOne = exports.readyState = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "20.0.0"
+	"version": "20.1.0"
 }

package/dist/es2019/components/Counter.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { N90, B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -8,13 +9,13 @@ import { akHeight } from './utils';
 const animationTime = 300;
 export const countStyle = style({
   fontSize: '11px',
-  color: N90,
+  color: token('color.text.lowEmphasis', N90),
   overflow: 'hidden',
   height: `${akHeight}px`,
   transition: `width ${animationTime}ms ease-in-out`
 });
 export const highlightStyle = style({
-  color: B400,
+  color: token('color.text.selected', B400),
   fontWeight: 600
 });
 export const containerStyle = style({

package/dist/es2019/components/FlashAnimation.js

@@ -1,4 +1,5 @@
 import { B75, B300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { keyframes, style } from 'typestyle';
@@ -12,16 +13,16 @@ const flashAnimation = keyframes({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: B75,
-    borderColor: B300
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   },
   '75%': {
-    backgroundColor: B75,
-    borderColor: B300
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   },
   '100%': {
-    backgroundColor: B75,
-    borderColor: B300
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   }
 });
 export const flashStyle = style({

package/dist/es2019/components/Reaction.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
@@ -30,26 +31,26 @@ const reactionStyle = style({
   minWidth: '36px',
   height: `${akHeight}px`,
   background: 'transparent',
-  border: `1px solid ${N40}`,
+  border: `1px solid ${token('color.border.neutral', N40)}`,
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: `${N400}`,
+  color: `${token('color.text.mediumEmphasis', N400)}`,
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: `${N20}`
+      background: `${token('color.background.transparentNeutral.hover', N20)}`
     }
   }
 });
 const reactedStyle = style({
-  backgroundColor: B50,
-  borderColor: B300,
+  backgroundColor: token('color.background.selected.resting', B50),
+  borderColor: token('color.iconBorder.brand', B300),
   $nest: {
     '&:hover': {
-      background: `${B75}`
+      background: `${token('color.background.selected.hover', B75)}`
     }
   }
 });

package/dist/es2019/components/ReactionPicker.js

@@ -3,6 +3,7 @@ import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
@@ -11,10 +12,6 @@ import { style } from 'typestyle';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
 import { layers } from '@atlaskit/theme/constants';
-const akBorderRadius = `${borderRadius()}px`;
-const akColorN0 = N0;
-const akColorN50A = N50A;
-const akColorN60A = N60A;
 const pickerStyle = style({
   verticalAlign: 'middle',
   $nest: {
@@ -28,9 +25,9 @@ const contentStyle = style({
   display: 'flex'
 });
 const popupStyle = style({
-  background: akColorN0,
-  borderRadius: akBorderRadius,
-  boxShadow: `0 4px 8px -2px ${akColorN50A}, 0 0 1px ${akColorN60A}`,
+  background: token('color.background.overlay', N0),
+  borderRadius: `${borderRadius()}px`,
+  boxShadow: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/es2019/components/ReactionTooltip.js

@@ -3,6 +3,7 @@ import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { style } from 'typestyle';
+import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
 import { messages } from './i18n';
 const verticalMargin = 5;
@@ -28,11 +29,11 @@ const tooltipStyle = style({
 });
 const emojiNameStyle = style({
   textTransform: 'capitalize',
-  color: N90,
+  color: token('color.text.mediumEmphasis', N90),
   fontWeight: 600
 });
 const footerStyle = style({
-  color: N90,
+  color: token('color.text.mediumEmphasis', N90),
   fontWeight: 300
 });
 const TOOLTIP_USERS_LIMIT = 5;

package/dist/es2019/components/ShowMore.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import cx from 'classnames';
 import React from 'react';
@@ -24,12 +25,12 @@ const moreButtonStyle = style({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: N30A
+      backgroundColor: token('color.background.transparentNeutral.hover', N30A)
     }
   }
 });
 const separatorStyle = style({
-  backgroundColor: N30A,
+  backgroundColor: token('color.border.neutral', N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "20.0.0"
+	"version": "20.1.0"
 }

package/dist/esm/components/Counter.js

@@ -11,6 +11,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import { N90, B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -19,13 +20,13 @@ import { akHeight } from './utils';
 var animationTime = 300;
 export var countStyle = style({
   fontSize: '11px',
-  color: N90,
+  color: token('color.text.lowEmphasis', N90),
   overflow: 'hidden',
   height: "".concat(akHeight, "px"),
   transition: "width ".concat(animationTime, "ms ease-in-out")
 });
 export var highlightStyle = style({
-  color: B400,
+  color: token('color.text.selected', B400),
   fontWeight: 600
 });
 export var containerStyle = style({

package/dist/esm/components/FlashAnimation.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { B75, B300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { keyframes, style } from 'typestyle';
@@ -13,16 +14,16 @@ var flashAnimation = keyframes({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: B75,
-    borderColor: B300
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   },
   '75%': {
-    backgroundColor: B75,
-    borderColor: B300
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   },
   '100%': {
-    backgroundColor: B75,
-    borderColor: B300
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   }
 });
 export var flashStyle = style({

package/dist/esm/components/Reaction.js

@@ -13,6 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
@@ -41,26 +42,26 @@ var reactionStyle = style({
   minWidth: '36px',
   height: "".concat(akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat(N40),
+  border: "1px solid ".concat(token('color.border.neutral', N40)),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat(N400),
+  color: "".concat(token('color.text.mediumEmphasis', N400)),
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: "".concat(N20)
+      background: "".concat(token('color.background.transparentNeutral.hover', N20))
     }
   }
 });
 var reactedStyle = style({
-  backgroundColor: B50,
-  borderColor: B300,
+  backgroundColor: token('color.background.selected.resting', B50),
+  borderColor: token('color.iconBorder.brand', B300),
   $nest: {
     '&:hover': {
-      background: "".concat(B75)
+      background: "".concat(token('color.background.selected.hover', B75))
     }
   }
 });

package/dist/esm/components/ReactionPicker.js

@@ -18,6 +18,7 @@ import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
@@ -26,10 +27,6 @@ import { style } from 'typestyle';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
 import { layers } from '@atlaskit/theme/constants';
-var akBorderRadius = "".concat(borderRadius(), "px");
-var akColorN0 = N0;
-var akColorN50A = N50A;
-var akColorN60A = N60A;
 var pickerStyle = style({
   verticalAlign: 'middle',
   $nest: {
@@ -43,9 +40,9 @@ var contentStyle = style({
   display: 'flex'
 });
 var popupStyle = style({
-  background: akColorN0,
-  borderRadius: akBorderRadius,
-  boxShadow: "0 4px 8px -2px ".concat(akColorN50A, ", 0 0 1px ").concat(akColorN60A),
+  background: token('color.background.overlay', N0),
+  borderRadius: "".concat(borderRadius(), "px"),
+  boxShadow: token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/esm/components/ReactionTooltip.js

@@ -3,6 +3,7 @@ import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { style } from 'typestyle';
+import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
 import { messages } from './i18n';
 var verticalMargin = 5;
@@ -28,11 +29,11 @@ var tooltipStyle = style({
 });
 var emojiNameStyle = style({
   textTransform: 'capitalize',
-  color: N90,
+  color: token('color.text.mediumEmphasis', N90),
   fontWeight: 600
 });
 var footerStyle = style({
-  color: N90,
+  color: token('color.text.mediumEmphasis', N90),
   fontWeight: 300
 });
 var TOOLTIP_USERS_LIMIT = 5;

package/dist/esm/components/ShowMore.js

@@ -12,6 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import cx from 'classnames';
 import React from 'react';
@@ -34,12 +35,12 @@ var moreButtonStyle = style({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: N30A
+      backgroundColor: token('color.background.transparentNeutral.hover', N30A)
     }
   }
 });
 var separatorStyle = style({
-  backgroundColor: N30A,
+  backgroundColor: token('color.border.neutral', N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "20.0.0"
+	"version": "20.1.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "20.0.0",
+  "version": "20.1.0",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,6 +33,7 @@
     "@atlaskit/icon": "^21.9.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/util-service-support": "^6.0.0",
     "@babel/runtime": "^7.0.0",
@@ -68,6 +69,9 @@
     "ui"
   ],
   "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    },
     "@atlassian/frontend": {
       "tree-shaking": []
     }