@atlaskit/reactions 22.0.3 → 22.0.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/reactions
 
+## 22.0.4
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
 ## 22.0.3
 
 ### Patch Changes

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

@@ -9,12 +9,10 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var countStyle = (0, _react.css)({
   fontSize: 11,
-  color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
+  color: "var(--ds-text-subtlest, ".concat(_colors.N90, ")"),
   overflow: 'hidden',
   position: 'relative',
   padding: '4px 8px 4px 0',
@@ -22,7 +20,7 @@ var countStyle = (0, _react.css)({
 });
 exports.countStyle = countStyle;
 var highlightStyle = (0, _react.css)({
-  color: (0, _tokens.token)('color.text.selected', _colors.B400),
+  color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;

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

@@ -9,8 +9,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var flashTime = 700;
 var flashAnimation = (0, _react.keyframes)({
@@ -18,16 +16,16 @@ var flashAnimation = (0, _react.keyframes)({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")")
   },
   '75%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")")
   },
   '100%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")")
   }
 });
 exports.flashAnimation = flashAnimation;

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

@@ -9,8 +9,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 
 /**
@@ -36,19 +34,19 @@ var reactionStyle = (0, _react.css)({
   minWidth: '36px',
   height: "".concat(akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N40)),
+  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat((0, _tokens.token)('color.text.subtle', _colors.N400)),
+  color: "".concat("var(--ds-text-subtle, ".concat(_colors.N400, ")")),
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {
-    background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
+    background: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"))
   },
   '&:focus': {
-    boxShadow: "0 0 0 2px ".concat((0, _tokens.token)('color.border.focused', _colors.B100)),
+    boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
     // background, box-shadow
     transitionDuration: '0s, 0.2s',
     // disabling browser focus outline
@@ -57,10 +55,10 @@ var reactionStyle = (0, _react.css)({
 });
 exports.reactionStyle = reactionStyle;
 var reactedStyle = (0, _react.css)({
-  backgroundColor: (0, _tokens.token)('color.background.selected', _colors.B50),
-  borderColor: (0, _tokens.token)('color.border.selected', _colors.B300),
+  backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
+  borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")"),
   '&:hover': {
-    background: "".concat((0, _tokens.token)('color.background.selected.hovered', _colors.B75))
+    background: "".concat("var(--ds-background-selected-hovered, ".concat(_colors.B75, ")"))
   }
 });
 exports.reactedStyle = reactedStyle;

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

@@ -9,8 +9,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _shared = require("../../shared");
 
 /** @jsx jsx */
@@ -48,7 +46,7 @@ exports.containerStyle = containerStyle;
 var titleStyle = (0, _react.css)({
   '& > h1': {
     fontSize: '24px!important',
-    color: "".concat((0, _tokens.token)('color.text', _colors.N800))
+    color: "".concat("var(--ds-text, ".concat(_colors.N800, ")"))
   }
 });
 exports.titleStyle = titleStyle;
@@ -70,7 +68,7 @@ var counterStyle = function counterStyle(isSelected) {
       width: '100%',
       padding: '0px!important',
       //Counter component has its own styles overriding them to match designs
-      color: isSelected ? "".concat((0, _tokens.token)('color.text', _colors.B400), "!important") : "2px solid ".concat((0, _tokens.token)('color.text', _colors.N500), "!important")
+      color: isSelected ? "".concat("var(--ds-text, ".concat(_colors.B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(_colors.N500, ")"), "!important")
     }
   });
 };
@@ -118,7 +116,7 @@ var customTabWrapper = function customTabWrapper(isSelected, selectedEmojiId, th
     '&.disabled + &.disabled:after': fadedCss('leftEdge', theme),
     '&:after': isSelected ? {
       content: '""',
-      borderBottom: "2px solid ".concat((0, _tokens.token)('color.text', _colors.B400)),
+      borderBottom: "2px solid ".concat("var(--ds-text, ".concat(_colors.B400, ")")),
       width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
       bottom: '0px',
       display: 'block',
@@ -152,7 +150,7 @@ var reactionViewStyle = (0, _react.css)({
   flexDirection: 'column',
   p: {
     margin: 0,
-    color: "".concat((0, _tokens.token)('color.text', _colors.N800)),
+    color: "".concat("var(--ds-text, ".concat(_colors.N800, ")")),
     textTransform: 'capitalize',
     fontWeight: 600,
     fontSize: 16,
@@ -169,7 +167,7 @@ var userListStyle = (0, _react.css)({
   padding: 0,
   textAlign: 'left',
   li: {
-    color: "".concat((0, _tokens.token)('color.text', _colors.N500)),
+    color: "".concat("var(--ds-text, ".concat(_colors.N500, ")")),
     fontSize: 14
   }
 });

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

@@ -11,8 +11,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var pickerStyle = (0, _react.css)({
   verticalAlign: 'middle',
@@ -27,9 +25,9 @@ var contentStyle = (0, _react.css)({
 });
 exports.contentStyle = contentStyle;
 var popupStyle = (0, _react.css)({
-  background: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
+  background: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  boxShadow: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
   '&> div': {
     boxShadow: undefined,
     marginTop: '4px',

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

@@ -7,8 +7,6 @@ exports.verticalMargin = exports.underlineStyle = exports.tooltipStyle = exports
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 /** @jsx jsx */
@@ -35,12 +33,12 @@ var tooltipStyle = (0, _react.css)({
 exports.tooltipStyle = tooltipStyle;
 var emojiNameStyle = (0, _react.css)({
   textTransform: 'capitalize',
-  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
+  color: "var(--ds-text-inverse, ".concat(_colors.N90, ")"),
   fontWeight: 600
 });
 exports.emojiNameStyle = emojiNameStyle;
 var footerStyle = (0, _react.css)({
-  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
+  color: "var(--ds-text-inverse, ".concat(_colors.N90, ")"),
   fontWeight: 300
 });
 exports.footerStyle = footerStyle;
@@ -48,8 +46,8 @@ var underlineStyle = (0, _react.css)({
   cursor: 'pointer',
   textDecoration: 'underline',
   ':hover': {
-    backgroundColor: (0, _tokens.token)('color.background.neutral.bold', _colors.N800),
-    color: (0, _tokens.token)('color.text.inverse', _colors.N0)
+    backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),
+    color: "var(--ds-text-inverse, ".concat(_colors.N0, ")")
   }
 });
 exports.underlineStyle = underlineStyle;

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

@@ -11,8 +11,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var moreEmojiContainerStyle = (0, _react.css)({
   display: 'flex'
@@ -30,12 +28,12 @@ var moreButtonStyle = (0, _react.css)({
   width: '38px',
   verticalAlign: 'top',
   '&:hover': {
-    backgroundColor: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30A)
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
   }
 });
 exports.moreButtonStyle = moreButtonStyle;
 var separatorStyle = (0, _react.css)({
-  backgroundColor: (0, _tokens.token)('color.border', _colors.N30A),
+  backgroundColor: "var(--ds-border, ".concat(_colors.N30A, ")"),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

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

@@ -11,15 +11,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var DISABLED_BUTTON_COLOR = "".concat((0, _tokens.token)('color.text.disabled', _colors.N70), " !important");
+var DISABLED_BUTTON_COLOR = "".concat("var(--ds-text-disabled, ".concat(_colors.N70, ")"), " !important");
 exports.DISABLED_BUTTON_COLOR = DISABLED_BUTTON_COLOR;
 
 var triggerStyle = function triggerStyle(_ref) {
@@ -37,14 +35,14 @@ var triggerStyle = function triggerStyle(_ref) {
   }, miniMode && {
     height: '24px',
     padding: 0,
-    border: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N40)),
+    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
     borderRadius: '20px'
   }), disabled && {
     color: DISABLED_BUTTON_COLOR,
     cursor: 'not-allowed'
   }), {}, {
     '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
+      background: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"))
     }
   }));
 };

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.0.3"
+	"version": "22.0.4"
 }

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

@@ -1,17 +1,16 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const countStyle = css({
   fontSize: 11,
-  color: token('color.text.subtlest', N90),
+  color: `var(--ds-text-subtlest, ${N90})`,
   overflow: 'hidden',
   position: 'relative',
   padding: '4px 8px 4px 0',
   lineHeight: '14px'
 });
 export const highlightStyle = css({
-  color: token('color.text.selected', B400),
+  color: `var(--ds-text-selected, ${B400})`,
   fontWeight: 600
 });
 export const containerStyle = css({

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

@@ -1,23 +1,22 @@
 /** @jsx jsx */
 import { css, keyframes } from '@emotion/react';
 import { B75, B300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const flashTime = 700;
 export const flashAnimation = keyframes({
   '0%': {
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: `var(--ds-background-selected-pressed, ${B75})`,
+    borderColor: `var(--ds-border-selected, ${B300})`
   },
   '75%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: `var(--ds-background-selected-pressed, ${B75})`,
+    borderColor: `var(--ds-border-selected, ${B300})`
   },
   '100%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: `var(--ds-background-selected-pressed, ${B75})`,
+    borderColor: `var(--ds-border-selected, ${B300})`
   }
 });
 export const containerStyle = css({

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

@@ -1,11 +1,10 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { B50, B75, B300, N20, N40, N400, B100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
+
 /**
  * Default styling px height for an emoji reaction
  */
-
 const akHeight = 24;
 /**
  * Styling Note:
@@ -25,19 +24,19 @@ export const reactionStyle = css({
   minWidth: '36px',
   height: `${akHeight}px`,
   background: 'transparent',
-  border: `1px solid ${token('color.border', N40)}`,
+  border: `1px solid ${`var(--ds-border, ${N40})`}`,
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: `${token('color.text.subtle', N400)}`,
+  color: `${`var(--ds-text-subtle, ${N400})`}`,
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {
-    background: `${token('color.background.neutral.subtle.hovered', N20)}`
+    background: `${`var(--ds-background-neutral-subtle-hovered, ${N20})`}`
   },
   '&:focus': {
-    boxShadow: `0 0 0 2px ${token('color.border.focused', B100)}`,
+    boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B100})`}`,
     // background, box-shadow
     transitionDuration: '0s, 0.2s',
     // disabling browser focus outline
@@ -45,10 +44,10 @@ export const reactionStyle = css({
   }
 });
 export const reactedStyle = css({
-  backgroundColor: token('color.background.selected', B50),
-  borderColor: token('color.border.selected', B300),
+  backgroundColor: `var(--ds-background-selected, ${B50})`,
+  borderColor: `var(--ds-border-selected, ${B300})`,
   '&:hover': {
-    background: `${token('color.background.selected.hovered', B75)}`
+    background: `${`var(--ds-background-selected-hovered, ${B75})`}`
   }
 });
 export const flashHeight = akHeight - 2; // height without the 1px border

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { B400, N500, N800 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { constants } from '../../shared';
 const REACTIONS_CONTAINER_WIDTH = 48;
 const REACTION_RIGHT_MARGIN = 8;
@@ -33,7 +32,7 @@ export const containerStyle = reactionsBorderWidth => css({
 export const titleStyle = css({
   '& > h1': {
     fontSize: '24px!important',
-    color: `${token('color.text', N800)}`
+    color: `${`var(--ds-text, ${N800})`}`
   }
 });
 const containerEdgeAngle = {
@@ -52,7 +51,7 @@ export const counterStyle = isSelected => css({
     width: '100%',
     padding: '0px!important',
     //Counter component has its own styles overriding them to match designs
-    color: isSelected ? `${token('color.text', B400)}!important` : `2px solid ${token('color.text', N500)}!important`
+    color: isSelected ? `${`var(--ds-text, ${B400})`}!important` : `2px solid ${`var(--ds-text, ${N500})`}!important`
   }
 });
 
@@ -94,7 +93,7 @@ export const customTabWrapper = (isSelected, selectedEmojiId, theme) => css({
   '&.disabled + &.disabled:after': fadedCss('leftEdge', theme),
   '&:after': isSelected ? {
     content: '""',
-    borderBottom: `2px solid ${token('color.text', B400)}`,
+    borderBottom: `2px solid ${`var(--ds-text, ${B400})`}`,
     width: `${REACTIONS_CONTAINER_WIDTH}px`,
     bottom: '0px',
     display: 'block',
@@ -124,7 +123,7 @@ export const reactionViewStyle = css({
   flexDirection: 'column',
   p: {
     margin: 0,
-    color: `${token('color.text', N800)}`,
+    color: `${`var(--ds-text, ${N800})`}`,
     textTransform: 'capitalize',
     fontWeight: 600,
     fontSize: 16,
@@ -140,7 +139,7 @@ export const userListStyle = css({
   padding: 0,
   textAlign: 'left',
   li: {
-    color: `${token('color.text', N500)}`,
+    color: `${`var(--ds-text, ${N500})`}`,
     fontSize: 14
   }
 });

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

@@ -2,7 +2,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const pickerStyle = css({
   verticalAlign: 'middle',
   '&.miniMode': {
@@ -14,9 +13,9 @@ export const contentStyle = css({
   display: 'flex'
 });
 export const popupStyle = css({
-  background: token('elevation.surface.overlay', N0),
+  background: `var(--ds-surface-overlay, ${N0})`,
   borderRadius: `${borderRadius()}px`,
-  boxShadow: token('elevation.shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
+  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
   '&> div': {
     boxShadow: undefined,
     marginTop: '4px',

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

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { N90, N800, N0 } from '@atlaskit/theme/colors';
 export const verticalMargin = 5;
 export const tooltipStyle = css({
@@ -23,18 +22,18 @@ export const tooltipStyle = css({
 });
 export const emojiNameStyle = css({
   textTransform: 'capitalize',
-  color: token('color.text.inverse', N90),
+  color: `var(--ds-text-inverse, ${N90})`,
   fontWeight: 600
 });
 export const footerStyle = css({
-  color: token('color.text.inverse', N90),
+  color: `var(--ds-text-inverse, ${N90})`,
   fontWeight: 300
 });
 export const underlineStyle = css({
   cursor: 'pointer',
   textDecoration: 'underline',
   ':hover': {
-    backgroundColor: token('color.background.neutral.bold', N800),
-    color: token('color.text.inverse', N0)
+    backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
+    color: `var(--ds-text-inverse, ${N0})`
   }
 });

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

@@ -2,7 +2,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const moreEmojiContainerStyle = css({
   display: 'flex'
 });
@@ -18,11 +17,11 @@ export const moreButtonStyle = css({
   width: '38px',
   verticalAlign: 'top',
   '&:hover': {
-    backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
   }
 });
 export const separatorStyle = css({
-  backgroundColor: token('color.border', N30A),
+  backgroundColor: `var(--ds-border, ${N30A})`,
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

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

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { N70, N20, N40 } from '@atlaskit/theme/colors';
-export const DISABLED_BUTTON_COLOR = `${token('color.text.disabled', N70)} !important`;
+export const DISABLED_BUTTON_COLOR = `${`var(--ds-text-disabled, ${N70})`} !important`;
 export const triggerStyle = ({
   miniMode = false,
   disabled = false
@@ -16,7 +15,7 @@ export const triggerStyle = ({
   ...(miniMode && {
     height: '24px',
     padding: 0,
-    border: `1px solid ${token('color.border', N40)}`,
+    border: `1px solid ${`var(--ds-border, ${N40})`}`,
     borderRadius: '20px'
   }),
   ...(disabled && {
@@ -24,6 +23,6 @@ export const triggerStyle = ({
     cursor: 'not-allowed'
   }),
   '&:hover': {
-    background: `${token('color.background.neutral.subtle.hovered', N20)}`
+    background: `${`var(--ds-background-neutral-subtle-hovered, ${N20})`}`
   }
 });

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.0.3"
+	"version": "22.0.4"
 }

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

@@ -1,17 +1,16 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var countStyle = css({
   fontSize: 11,
-  color: token('color.text.subtlest', N90),
+  color: "var(--ds-text-subtlest, ".concat(N90, ")"),
   overflow: 'hidden',
   position: 'relative',
   padding: '4px 8px 4px 0',
   lineHeight: '14px'
 });
 export var highlightStyle = css({
-  color: token('color.text.selected', B400),
+  color: "var(--ds-text-selected, ".concat(B400, ")"),
   fontWeight: 600
 });
 export var containerStyle = css({

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

@@ -1,23 +1,22 @@
 /** @jsx jsx */
 import { css, keyframes } from '@emotion/react';
 import { B75, B300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 var flashTime = 700;
 export var flashAnimation = keyframes({
   '0%': {
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(B300, ")")
   },
   '75%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(B300, ")")
   },
   '100%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.border.selected', B300)
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(B75, ")"),
+    borderColor: "var(--ds-border-selected, ".concat(B300, ")")
   }
 });
 export var containerStyle = css({

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

@@ -1,11 +1,10 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { B50, B75, B300, N20, N40, N400, B100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
+
 /**
  * Default styling px height for an emoji reaction
  */
-
 var akHeight = 24;
 /**
  * Styling Note:
@@ -25,19 +24,19 @@ export var reactionStyle = css({
   minWidth: '36px',
   height: "".concat(akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat(token('color.border', N40)),
+  border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat(token('color.text.subtle', N400)),
+  color: "".concat("var(--ds-text-subtle, ".concat(N400, ")")),
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {
-    background: "".concat(token('color.background.neutral.subtle.hovered', N20))
+    background: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"))
   },
   '&:focus': {
-    boxShadow: "0 0 0 2px ".concat(token('color.border.focused', B100)),
+    boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
     // background, box-shadow
     transitionDuration: '0s, 0.2s',
     // disabling browser focus outline
@@ -45,10 +44,10 @@ export var reactionStyle = css({
   }
 });
 export var reactedStyle = css({
-  backgroundColor: token('color.background.selected', B50),
-  borderColor: token('color.border.selected', B300),
+  backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
+  borderColor: "var(--ds-border-selected, ".concat(B300, ")"),
   '&:hover': {
-    background: "".concat(token('color.background.selected.hovered', B75))
+    background: "".concat("var(--ds-background-selected-hovered, ".concat(B75, ")"))
   }
 });
 export var flashHeight = akHeight - 2; // height without the 1px border

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { B400, N500, N800 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { constants } from '../../shared';
 var REACTIONS_CONTAINER_WIDTH = 48;
 var REACTION_RIGHT_MARGIN = 8;
@@ -35,7 +34,7 @@ export var containerStyle = function containerStyle(reactionsBorderWidth) {
 export var titleStyle = css({
   '& > h1': {
     fontSize: '24px!important',
-    color: "".concat(token('color.text', N800))
+    color: "".concat("var(--ds-text, ".concat(N800, ")"))
   }
 });
 var containerEdgeAngle = {
@@ -55,7 +54,7 @@ export var counterStyle = function counterStyle(isSelected) {
       width: '100%',
       padding: '0px!important',
       //Counter component has its own styles overriding them to match designs
-      color: isSelected ? "".concat(token('color.text', B400), "!important") : "2px solid ".concat(token('color.text', N500), "!important")
+      color: isSelected ? "".concat("var(--ds-text, ".concat(B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(N500, ")"), "!important")
     }
   });
 };
@@ -101,7 +100,7 @@ export var customTabWrapper = function customTabWrapper(isSelected, selectedEmoj
     '&.disabled + &.disabled:after': fadedCss('leftEdge', theme),
     '&:after': isSelected ? {
       content: '""',
-      borderBottom: "2px solid ".concat(token('color.text', B400)),
+      borderBottom: "2px solid ".concat("var(--ds-text, ".concat(B400, ")")),
       width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
       bottom: '0px',
       display: 'block',
@@ -132,7 +131,7 @@ export var reactionViewStyle = css({
   flexDirection: 'column',
   p: {
     margin: 0,
-    color: "".concat(token('color.text', N800)),
+    color: "".concat("var(--ds-text, ".concat(N800, ")")),
     textTransform: 'capitalize',
     fontWeight: 600,
     fontSize: 16,
@@ -148,7 +147,7 @@ export var userListStyle = css({
   padding: 0,
   textAlign: 'left',
   li: {
-    color: "".concat(token('color.text', N500)),
+    color: "".concat("var(--ds-text, ".concat(N500, ")")),
     fontSize: 14
   }
 });

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

@@ -2,7 +2,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var pickerStyle = css({
   verticalAlign: 'middle',
   '&.miniMode': {
@@ -14,9 +13,9 @@ export var contentStyle = css({
   display: 'flex'
 });
 export var popupStyle = css({
-  background: token('elevation.surface.overlay', N0),
+  background: "var(--ds-surface-overlay, ".concat(N0, ")"),
   borderRadius: "".concat(borderRadius(), "px"),
-  boxShadow: token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
   '&> div': {
     boxShadow: undefined,
     marginTop: '4px',

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

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { N90, N800, N0 } from '@atlaskit/theme/colors';
 export var verticalMargin = 5;
 export var tooltipStyle = css({
@@ -23,18 +22,18 @@ export var tooltipStyle = css({
 });
 export var emojiNameStyle = css({
   textTransform: 'capitalize',
-  color: token('color.text.inverse', N90),
+  color: "var(--ds-text-inverse, ".concat(N90, ")"),
   fontWeight: 600
 });
 export var footerStyle = css({
-  color: token('color.text.inverse', N90),
+  color: "var(--ds-text-inverse, ".concat(N90, ")"),
   fontWeight: 300
 });
 export var underlineStyle = css({
   cursor: 'pointer',
   textDecoration: 'underline',
   ':hover': {
-    backgroundColor: token('color.background.neutral.bold', N800),
-    color: token('color.text.inverse', N0)
+    backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),
+    color: "var(--ds-text-inverse, ".concat(N0, ")")
   }
 });

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

@@ -2,7 +2,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var moreEmojiContainerStyle = css({
   display: 'flex'
 });
@@ -18,11 +17,11 @@ export var moreButtonStyle = css({
   width: '38px',
   verticalAlign: 'top',
   '&:hover': {
-    backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
   }
 });
 export var separatorStyle = css({
-  backgroundColor: token('color.border', N30A),
+  backgroundColor: "var(--ds-border, ".concat(N30A, ")"),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

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

@@ -6,9 +6,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { N70, N20, N40 } from '@atlaskit/theme/colors';
-export var DISABLED_BUTTON_COLOR = "".concat(token('color.text.disabled', N70), " !important");
+export var DISABLED_BUTTON_COLOR = "".concat("var(--ds-text-disabled, ".concat(N70, ")"), " !important");
 export var triggerStyle = function triggerStyle(_ref) {
   var _ref$miniMode = _ref.miniMode,
       miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
@@ -24,14 +23,14 @@ export var triggerStyle = function triggerStyle(_ref) {
   }, miniMode && {
     height: '24px',
     padding: 0,
-    border: "1px solid ".concat(token('color.border', N40)),
+    border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
     borderRadius: '20px'
   }), disabled && {
     color: DISABLED_BUTTON_COLOR,
     cursor: 'not-allowed'
   }), {}, {
     '&:hover': {
-      background: "".concat(token('color.background.neutral.subtle.hovered', N20))
+      background: "".concat("var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"))
     }
   }));
 };

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.0.3"
+	"version": "22.0.4"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "22.0.3",
+  "version": "22.0.4",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"