@atlaskit/reactions 21.0.2 → 21.0.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/reactions
 
+## 21.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.0.2
 
 ### Patch Changes

package/dist/cjs/components/Counter.js

@@ -42,14 +42,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var animationTime = 300;
 var countStyle = (0, _typestyle.style)({
   fontSize: '11px',
-  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N90),
+  color: (0, _tokens.token)('color.text.subtlest', _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: (0, _tokens.token)('color.text.selected', _colors.B400),
+  color: (0, _tokens.token)('color.text.brand', _colors.B400),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;

package/dist/cjs/components/FlashAnimation.js

@@ -29,16 +29,16 @@ var flashAnimation = (0, _typestyle.keyframes)({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
   },
   '75%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
   },
   '100%': {
-    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
   }
 });
 var flashStyle = (0, _typestyle.style)({

package/dist/cjs/components/Reaction.js

@@ -73,26 +73,26 @@ var reactionStyle = (0, _typestyle.style)({
   minWidth: '36px',
   height: "".concat(_utils.akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat((0, _tokens.token)('color.border.neutral', _colors.N40)),
+  border: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N40)),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat((0, _tokens.token)('color.text.mediumEmphasis', _colors.N400)),
+  color: "".concat((0, _tokens.token)('color.text.subtle', _colors.N400)),
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20))
+      background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
     }
   }
 });
 var reactedStyle = (0, _typestyle.style)({
-  backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.B50),
-  borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300),
+  backgroundColor: (0, _tokens.token)('color.background.brand', _colors.B50),
+  borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300),
   $nest: {
     '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.selected.hover', _colors.B75))
+      background: "".concat((0, _tokens.token)('color.background.brand.hovered', _colors.B75))
     }
   }
 });

package/dist/cjs/components/ReactionPicker.js

@@ -70,9 +70,9 @@ var contentStyle = (0, _typestyle.style)({
   display: 'flex'
 });
 var popupStyle = (0, _typestyle.style)({
-  background: (0, _tokens.token)('color.background.overlay', _colors.N0),
+  background: (0, _tokens.token)('elevation.surface.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)),
+  boxShadow: (0, _tokens.token)('elevation.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

@@ -46,11 +46,11 @@ var tooltipStyle = (0, _typestyle.style)({
 });
 var emojiNameStyle = (0, _typestyle.style)({
   textTransform: 'capitalize',
-  color: (0, _tokens.token)('color.text.onBold', _colors.N90),
+  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
   fontWeight: 600
 });
 var footerStyle = (0, _typestyle.style)({
-  color: (0, _tokens.token)('color.text.onBold', _colors.N90),
+  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
   fontWeight: 300
 });
 var TOOLTIP_USERS_LIMIT = 5;

package/dist/cjs/components/ShowMore.js

@@ -59,12 +59,12 @@ var moreButtonStyle = (0, _typestyle.style)({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30A)
+      backgroundColor: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30A)
     }
   }
 });
 var separatorStyle = (0, _typestyle.style)({
-  backgroundColor: (0, _tokens.token)('color.border.neutral', _colors.N30A),
+  backgroundColor: (0, _tokens.token)('color.border', _colors.N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.0.2"
+	"version": "21.0.3"
 }

package/dist/es2019/components/Counter.js

@@ -9,13 +9,13 @@ import { akHeight } from './utils';
 const animationTime = 300;
 export const countStyle = style({
   fontSize: '11px',
-  color: token('color.text.lowEmphasis', N90),
+  color: token('color.text.subtlest', N90),
   overflow: 'hidden',
   height: `${akHeight}px`,
   transition: `width ${animationTime}ms ease-in-out`
 });
 export const highlightStyle = style({
-  color: token('color.text.selected', B400),
+  color: token('color.text.brand', B400),
   fontWeight: 600
 });
 export const containerStyle = style({

package/dist/es2019/components/FlashAnimation.js

@@ -13,16 +13,16 @@ const flashAnimation = keyframes({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   },
   '75%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   },
   '100%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   }
 });
 export const flashStyle = style({

package/dist/es2019/components/Reaction.js

@@ -31,26 +31,26 @@ const reactionStyle = style({
   minWidth: '36px',
   height: `${akHeight}px`,
   background: 'transparent',
-  border: `1px solid ${token('color.border.neutral', N40)}`,
+  border: `1px solid ${token('color.border', N40)}`,
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: `${token('color.text.mediumEmphasis', N400)}`,
+  color: `${token('color.text.subtle', N400)}`,
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: `${token('color.background.transparentNeutral.hover', N20)}`
+      background: `${token('color.background.neutral.subtle.hovered', N20)}`
     }
   }
 });
 const reactedStyle = style({
-  backgroundColor: token('color.background.selected.resting', B50),
-  borderColor: token('color.iconBorder.brand', B300),
+  backgroundColor: token('color.background.brand', B50),
+  borderColor: token('color.icon.brand', B300),
   $nest: {
     '&:hover': {
-      background: `${token('color.background.selected.hover', B75)}`
+      background: `${token('color.background.brand.hovered', B75)}`
     }
   }
 });

package/dist/es2019/components/ReactionPicker.js

@@ -25,9 +25,9 @@ const contentStyle = style({
   display: 'flex'
 });
 const popupStyle = style({
-  background: token('color.background.overlay', N0),
+  background: token('elevation.surface.overlay', N0),
   borderRadius: `${borderRadius()}px`,
-  boxShadow: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
+  boxShadow: token('elevation.shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/es2019/components/ReactionTooltip.js

@@ -29,11 +29,11 @@ const tooltipStyle = style({
 });
 const emojiNameStyle = style({
   textTransform: 'capitalize',
-  color: token('color.text.onBold', N90),
+  color: token('color.text.inverse', N90),
   fontWeight: 600
 });
 const footerStyle = style({
-  color: token('color.text.onBold', N90),
+  color: token('color.text.inverse', N90),
   fontWeight: 300
 });
 const TOOLTIP_USERS_LIMIT = 5;

package/dist/es2019/components/ShowMore.js

@@ -25,12 +25,12 @@ const moreButtonStyle = style({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: token('color.background.transparentNeutral.hover', N30A)
+      backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
     }
   }
 });
 const separatorStyle = style({
-  backgroundColor: token('color.border.neutral', N30A),
+  backgroundColor: token('color.border', N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.0.2"
+	"version": "21.0.3"
 }

package/dist/esm/components/Counter.js

@@ -20,13 +20,13 @@ import { akHeight } from './utils';
 var animationTime = 300;
 export var countStyle = style({
   fontSize: '11px',
-  color: token('color.text.lowEmphasis', N90),
+  color: token('color.text.subtlest', N90),
   overflow: 'hidden',
   height: "".concat(akHeight, "px"),
   transition: "width ".concat(animationTime, "ms ease-in-out")
 });
 export var highlightStyle = style({
-  color: token('color.text.selected', B400),
+  color: token('color.text.brand', B400),
   fontWeight: 600
 });
 export var containerStyle = style({

package/dist/esm/components/FlashAnimation.js

@@ -14,16 +14,16 @@ var flashAnimation = keyframes({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   },
   '75%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   },
   '100%': {
-    backgroundColor: token('color.background.selected.pressed', B75),
-    borderColor: token('color.iconBorder.brand', B300)
+    backgroundColor: token('color.background.brand.pressed', B75),
+    borderColor: token('color.icon.brand', B300)
   }
 });
 export var flashStyle = style({

package/dist/esm/components/Reaction.js

@@ -42,26 +42,26 @@ var reactionStyle = style({
   minWidth: '36px',
   height: "".concat(akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat(token('color.border.neutral', N40)),
+  border: "1px solid ".concat(token('color.border', N40)),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat(token('color.text.mediumEmphasis', N400)),
+  color: "".concat(token('color.text.subtle', N400)),
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: "".concat(token('color.background.transparentNeutral.hover', N20))
+      background: "".concat(token('color.background.neutral.subtle.hovered', N20))
     }
   }
 });
 var reactedStyle = style({
-  backgroundColor: token('color.background.selected.resting', B50),
-  borderColor: token('color.iconBorder.brand', B300),
+  backgroundColor: token('color.background.brand', B50),
+  borderColor: token('color.icon.brand', B300),
   $nest: {
     '&:hover': {
-      background: "".concat(token('color.background.selected.hover', B75))
+      background: "".concat(token('color.background.brand.hovered', B75))
     }
   }
 });

package/dist/esm/components/ReactionPicker.js

@@ -40,9 +40,9 @@ var contentStyle = style({
   display: 'flex'
 });
 var popupStyle = style({
-  background: token('color.background.overlay', N0),
+  background: token('elevation.surface.overlay', N0),
   borderRadius: "".concat(borderRadius(), "px"),
-  boxShadow: token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
+  boxShadow: token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/esm/components/ReactionTooltip.js

@@ -29,11 +29,11 @@ var tooltipStyle = style({
 });
 var emojiNameStyle = style({
   textTransform: 'capitalize',
-  color: token('color.text.onBold', N90),
+  color: token('color.text.inverse', N90),
   fontWeight: 600
 });
 var footerStyle = style({
-  color: token('color.text.onBold', N90),
+  color: token('color.text.inverse', N90),
   fontWeight: 300
 });
 var TOOLTIP_USERS_LIMIT = 5;

package/dist/esm/components/ShowMore.js

@@ -35,12 +35,12 @@ var moreButtonStyle = style({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: token('color.background.transparentNeutral.hover', N30A)
+      backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
     }
   }
 });
 var separatorStyle = style({
-  backgroundColor: token('color.border.neutral', N30A),
+  backgroundColor: token('color.border', N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.0.2"
+	"version": "21.0.3"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "21.0.2",
+  "version": "21.0.3",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,13 +29,13 @@
     "@atlaskit/analytics-namespaced-context": "^6.3.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.0.0",
-    "@atlaskit/emoji": "^64.0.0",
+    "@atlaskit/emoji": "^64.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.5.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@atlaskit/tooltip": "^17.5.0",
-    "@atlaskit/util-service-support": "^6.0.0",
+    "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",
     "react-transition-group": "^4.4.1",
@@ -52,7 +52,7 @@
     "@atlaskit/editor-test-helpers": "^16.0.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/tooltip": "^17.5.0",
-    "@atlaskit/util-data-test": "^17.1.0",
+    "@atlaskit/util-data-test": "^17.2.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",