@atlaskit/reactions 22.15.0 → 22.16.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/reactions
 
+## 22.16.0
+
+### Minor Changes
+
+- [#165604](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165604)
+  [`ad82b7ebbed5f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ad82b7ebbed5f) -
+  Update font size to use tokens
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.15.0
 
 ### Minor Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "22.15.0";
+var packageVersion = "22.16.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -14,7 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var countStyle = exports.countStyle = (0, _react.css)({
-  fontSize: 11,
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: "var(--ds-text-subtlest, ".concat(_colors.N90, ")"),
   overflow: 'hidden',
   position: 'relative',

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

@@ -66,9 +66,7 @@ var counterStyle = exports.counterStyle = function counterStyle(isSelected) {
     display: 'flex',
     alignSelf: 'center',
     lineHeight: '14px',
-    fontSize: '11px',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    fontWeight: isSelected ? 700 : 400,
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     paddingRight: '0px',
     marginTop: "var(--ds-space-075, 6px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -78,7 +76,9 @@ var counterStyle = exports.counterStyle = function counterStyle(isSelected) {
       padding: "var(--ds-space-0, 0px)".concat("!important"),
       //Counter component has its own styles overriding them to match designs
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      color: isSelected ? "".concat("var(--ds-text, ".concat(_colors.B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(_colors.N500, ")"), "!important")
+      color: isSelected ? "".concat("var(--ds-text, ".concat(_colors.B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(_colors.N500, ")"), "!important"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      fontWeight: isSelected ? 700 : 400
     }
   });
 };
@@ -170,8 +170,8 @@ var reactionViewStyle = exports.reactionViewStyle = (0, _react.css)({
     margin: 0,
     color: "".concat("var(--ds-text, ".concat(_colors.N800, ")")),
     textTransform: 'capitalize',
+    font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     fontWeight: 600,
-    fontSize: 16,
     lineHeight: '20px',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> span': {
@@ -189,7 +189,7 @@ var userListStyle = exports.userListStyle = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     color: "".concat("var(--ds-text, ".concat(_colors.N500, ")")),
-    fontSize: 14
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }
 });
 

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

@@ -85,7 +85,7 @@ var miniModeStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius'
 });
 var addReactionMessageStyles = (0, _primitives.xcss)({
-  fontSize: '12px',
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: 'color.text.subtle',
   marginLeft: 'space.050'
 });

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "22.15.0";
+const packageVersion = "22.16.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const countStyle = css({
-  fontSize: 11,
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: `var(--ds-text-subtlest, ${N90})`,
   overflow: 'hidden',
   position: 'relative',

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

@@ -56,9 +56,7 @@ export const counterStyle = isSelected => css({
   display: 'flex',
   alignSelf: 'center',
   lineHeight: '14px',
-  fontSize: '11px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontWeight: isSelected ? 700 : 400,
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   paddingRight: '0px',
   marginTop: "var(--ds-space-075, 6px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -68,7 +66,9 @@ export const counterStyle = isSelected => css({
     padding: `${"var(--ds-space-0, 0px)"}!important`,
     //Counter component has its own styles overriding them to match designs
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    color: isSelected ? `${`var(--ds-text, ${B400})`}!important` : `2px solid ${`var(--ds-text, ${N500})`}!important`
+    color: isSelected ? `${`var(--ds-text, ${B400})`}!important` : `2px solid ${`var(--ds-text, ${N500})`}!important`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    fontWeight: isSelected ? 700 : 400
   }
 });
 const fadedCss = (edge, theme) => css({
@@ -155,8 +155,8 @@ export const reactionViewStyle = css({
     margin: 0,
     color: `${`var(--ds-text, ${N800})`}`,
     textTransform: 'capitalize',
+    font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     fontWeight: 600,
-    fontSize: 16,
     lineHeight: '20px',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> span': {
@@ -174,7 +174,7 @@ export const userListStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     color: `${`var(--ds-text, ${N500})`}`,
-    fontSize: 14
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }
 });
 

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

@@ -77,7 +77,7 @@ const miniModeStyles = xcss({
   borderRadius: 'border.radius'
 });
 const addReactionMessageStyles = xcss({
-  fontSize: '12px',
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: 'color.text.subtle',
   marginLeft: 'space.050'
 });

package/dist/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "22.15.0";
+var packageVersion = "22.16.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var countStyle = css({
-  fontSize: 11,
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: "var(--ds-text-subtlest, ".concat(N90, ")"),
   overflow: 'hidden',
   position: 'relative',

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

@@ -59,9 +59,7 @@ export var counterStyle = function counterStyle(isSelected) {
     display: 'flex',
     alignSelf: 'center',
     lineHeight: '14px',
-    fontSize: '11px',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    fontWeight: isSelected ? 700 : 400,
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     paddingRight: '0px',
     marginTop: "var(--ds-space-075, 6px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -71,7 +69,9 @@ export var counterStyle = function counterStyle(isSelected) {
       padding: "var(--ds-space-0, 0px)".concat("!important"),
       //Counter component has its own styles overriding them to match designs
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      color: isSelected ? "".concat("var(--ds-text, ".concat(B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(N500, ")"), "!important")
+      color: isSelected ? "".concat("var(--ds-text, ".concat(B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(N500, ")"), "!important"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      fontWeight: isSelected ? 700 : 400
     }
   });
 };
@@ -163,8 +163,8 @@ export var reactionViewStyle = css({
     margin: 0,
     color: "".concat("var(--ds-text, ".concat(N800, ")")),
     textTransform: 'capitalize',
+    font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     fontWeight: 600,
-    fontSize: 16,
     lineHeight: '20px',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> span': {
@@ -182,7 +182,7 @@ export var userListStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     color: "".concat("var(--ds-text, ".concat(N500, ")")),
-    fontSize: 14
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }
 });
 

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

@@ -77,7 +77,7 @@ var miniModeStyles = xcss({
   borderRadius: 'border.radius'
 });
 var addReactionMessageStyles = xcss({
-  fontSize: '12px',
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: 'color.text.subtle',
   marginLeft: 'space.050'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.15.0",
+	"version": "22.16.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/avatar": "^21.17.0",
 		"@atlaskit/button": "^20.3.0",
-		"@atlaskit/emoji": "^67.10.0",
+		"@atlaskit/emoji": "^67.11.0",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/modal-dialog": "^12.17.0",
 		"@atlaskit/motion": "^1.9.0",