@atlaskit/profilecard 16.2.1 → 16.2.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/profilecard
 
+## 16.2.2
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
 ## 16.2.1
 
 ### Patch Changes

package/dist/cjs/components/Error/ErrorIllustration.js

@@ -23,7 +23,7 @@ var ErrorIllustration = function ErrorIllustration() {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: (0, _tokens.token)('color.background.overlay', 'white'),
+    fill: (0, _tokens.token)('elevation.surface.overlay', 'white'),
     fillOpacity: "0.01"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M95.4299 74.1603L161.87 189.24C167.71 199.36 160.41 212 148.73 212H15.8499C4.16994 212 -3.13006 199.35 2.70994 189.24L69.1499 74.1603C74.9899 64.0403 89.5899 64.0403 95.4299 74.1603ZM87.8699 157.71L90.7499 113.36C91.0899 108.07 86.8899 103.58 81.5899 103.58C76.2799 103.58 72.0799 108.06 72.4299 113.36L75.3099 157.71C75.5299 161.02 78.2699 163.6 81.5899 163.6C84.8999 163.6 87.6499 161.02 87.8699 157.71ZM72.0299 181.25C72.0299 186.91 76.7899 191.35 82.4199 190.83C87.2699 190.38 91.1499 186.33 91.2499 181.46C91.3599 176.01 86.9399 171.52 81.5199 171.52C76.2899 171.51 72.0299 175.89 72.0299 181.25Z",

package/dist/cjs/components/User/ProfileCard.js

@@ -325,7 +325,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         }, /*#__PURE__*/_react.default.createElement(_Card.ProfileImage, null, /*#__PURE__*/_react.default.createElement(_avatar.default, {
           size: "xlarge",
           src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-          borderColor: (0, _tokens.token)('color.background.overlay', _colors.N0)
+          borderColor: (0, _tokens.token)('elevation.surface.overlay', _colors.N0)
         })), /*#__PURE__*/_react.default.createElement(_Card.CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Card.ActionsFlexSpacer, null), actions) : null));
       }
 

package/dist/cjs/styled/Error.js

@@ -39,6 +39,6 @@ var TeamErrorTitle = _styledComponents.default.p(_templateObject4 || (_templateO
 
 exports.TeamErrorTitle = TeamErrorTitle;
 
-var TeamErrorText = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.lowEmphasis', _colors.N200), (0, _constants.gridSize)() * 1);
+var TeamErrorText = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200), (0, _constants.gridSize)() * 1);
 
 exports.TeamErrorText = TeamErrorText;

package/dist/cjs/styled/TeamCard.js

@@ -36,7 +36,7 @@ exports.CardTriggerWrapper = CardTriggerWrapper;
 var CardWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n"])), _constants2.bgColor, _constants.borderRadius, (0, _constants.gridSize)() * 40);
 
 exports.CardWrapper = CardWrapper;
-var loadingImage = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20));
+var loadingImage = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.neutral', _colors.N20));
 var defaultImage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _constants2.teamHeaderBgColor);
 
 var CardHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  background-repeat: no-repeat;\n  background-size: cover;\n  box-sizing: content-box;\n  height: ", "px;\n"])), function (props) {
@@ -61,7 +61,7 @@ var TeamName = _styledComponents.default.h6(_templateObject8 || (_templateObject
 
 exports.TeamName = TeamName;
 
-var MemberCount = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.lowEmphasis', _colors.N200), (0, _constants.gridSize)() * 0.5);
+var MemberCount = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200), (0, _constants.gridSize)() * 0.5);
 
 exports.MemberCount = MemberCount;
 
@@ -77,7 +77,7 @@ var Description = _styledComponents.default.span(_templateObject12 || (_template
 
 exports.Description = Description;
 
-var ActionButtons = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: ", ";\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), (0, _tokens.token)('color.background.overlay', 'hsla(0, 100%, 100%, 0.2)'));
+var ActionButtons = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: ", ";\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), (0, _tokens.token)('elevation.surface.overlay', 'hsla(0, 100%, 100%, 0.2)'));
 
 exports.ActionButtons = ActionButtons;
 

package/dist/cjs/styled/constants.js

@@ -18,18 +18,18 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var bgColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.overlay', colors.N0),
-  dark: (0, _tokens.token)('color.background.overlay', colors.DN50)
+  light: (0, _tokens.token)('elevation.surface.overlay', colors.N0),
+  dark: (0, _tokens.token)('elevation.surface.overlay', colors.DN50)
 });
 exports.bgColor = bgColor;
 var headerBgColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.boldBrand.resting', colors.B500),
-  dark: (0, _tokens.token)('color.background.boldBrand.resting', colors.B100)
+  light: (0, _tokens.token)('color.background.brand.bold', colors.B500),
+  dark: (0, _tokens.token)('color.background.brand.bold', colors.B100)
 });
 exports.headerBgColor = headerBgColor;
 var teamHeaderBgColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N50),
-  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N50)
+  light: (0, _tokens.token)('color.background.neutral', colors.N50),
+  dark: (0, _tokens.token)('color.background.neutral', colors.N50)
 });
 exports.teamHeaderBgColor = teamHeaderBgColor;
 var headerBgColorDisabledUser = (0, _components.themed)({
@@ -38,33 +38,33 @@ var headerBgColorDisabledUser = (0, _components.themed)({
 });
 exports.headerBgColorDisabledUser = headerBgColorDisabledUser;
 var headerTextColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.onBold', colors.N0),
-  dark: (0, _tokens.token)('color.text.onBold', colors.N0)
+  light: (0, _tokens.token)('color.text.inverse', colors.N0),
+  dark: (0, _tokens.token)('color.text.inverse', colors.N0)
 });
 exports.headerTextColor = headerTextColor;
 var headerTextColorInactive = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
-  dark: (0, _tokens.token)('color.text.highEmphasis', colors.N0)
+  light: (0, _tokens.token)('color.text', colors.N800),
+  dark: (0, _tokens.token)('color.text', colors.N0)
 });
 exports.headerTextColorInactive = headerTextColorInactive;
 var appLabelBgColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20),
-  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20)
+  light: (0, _tokens.token)('color.background.neutral', colors.N20),
+  dark: (0, _tokens.token)('color.background.neutral', colors.N20)
 });
 exports.appLabelBgColor = appLabelBgColor;
 var appLabelTextColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.highEmphasis', colors.N500),
-  dark: (0, _tokens.token)('color.text.highEmphasis', colors.N500)
+  light: (0, _tokens.token)('color.text', colors.N500),
+  dark: (0, _tokens.token)('color.text', colors.N500)
 });
 exports.appLabelTextColor = appLabelTextColor;
 var labelTextColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
-  dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN900)
+  light: (0, _tokens.token)('color.text', colors.N800),
+  dark: (0, _tokens.token)('color.text', colors.DN900)
 });
 exports.labelTextColor = labelTextColor;
 var labelIconColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.lowEmphasis', colors.N60),
-  dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN100)
+  light: (0, _tokens.token)('color.text.subtlest', colors.N60),
+  dark: (0, _tokens.token)('color.text.subtlest', colors.DN100)
 });
 exports.labelIconColor = labelIconColor;
 var errorIconColor = (0, _components.themed)({
@@ -73,17 +73,17 @@ var errorIconColor = (0, _components.themed)({
 });
 exports.errorIconColor = errorIconColor;
 var errorTitleColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
-  dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN800)
+  light: (0, _tokens.token)('color.text', colors.N800),
+  dark: (0, _tokens.token)('color.text', colors.DN800)
 });
 exports.errorTitleColor = errorTitleColor;
 var errorTextColor = (0, _components.themed)({
-  light: (0, _tokens.token)('color.text.lowEmphasis', colors.N90),
-  dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN90)
+  light: (0, _tokens.token)('color.text.subtlest', colors.N90),
+  dark: (0, _tokens.token)('color.text.subtlest', colors.DN90)
 });
 exports.errorTextColor = errorTextColor;
 var boxShadow = (0, _components.themed)({
-  light: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A)),
-  dark: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(colors.DN50A, ", 0 0 1px ").concat(colors.DN60A))
+  light: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A)),
+  dark: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(colors.DN50A, ", 0 0 1px ").concat(colors.DN60A))
 });
 exports.boxShadow = boxShadow;

package/dist/cjs/util/analytics.js

@@ -31,7 +31,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "16.2.1"
+      packageVersion: "16.2.2"
     }, attributes), {}, {
       firedAt: (0, _performance.getPageTime)()
     })

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.2.1"
+	"version": "16.2.2"
 }

package/dist/es2019/components/Error/ErrorIllustration.js

@@ -12,7 +12,7 @@ export const ErrorIllustration = () => {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: token('color.background.overlay', 'white'),
+    fill: token('elevation.surface.overlay', 'white'),
     fillOpacity: "0.01"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M95.4299 74.1603L161.87 189.24C167.71 199.36 160.41 212 148.73 212H15.8499C4.16994 212 -3.13006 199.35 2.70994 189.24L69.1499 74.1603C74.9899 64.0403 89.5899 64.0403 95.4299 74.1603ZM87.8699 157.71L90.7499 113.36C91.0899 108.07 86.8899 103.58 81.5899 103.58C76.2799 103.58 72.0799 108.06 72.4299 113.36L75.3099 157.71C75.5299 161.02 78.2699 163.6 81.5899 163.6C84.8999 163.6 87.6499 161.02 87.8699 157.71ZM72.0299 181.25C72.0299 186.91 76.7899 191.35 82.4199 190.83C87.2699 190.38 91.1499 186.33 91.2499 181.46C91.3599 176.01 86.9399 171.52 81.5199 171.52C76.2899 171.51 72.0299 175.89 72.0299 181.25Z",

package/dist/es2019/components/User/ProfileCard.js

@@ -247,7 +247,7 @@ export default class Profilecard extends React.PureComponent {
       }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
         size: "xlarge",
         src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-        borderColor: token('color.background.overlay', N0)
+        borderColor: token('elevation.surface.overlay', N0)
       })), /*#__PURE__*/React.createElement(CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), actions) : null));
     }
 

package/dist/es2019/styled/Error.js

@@ -21,6 +21,6 @@ export const TeamErrorTitle = styled.p`
   ${h400};
 `;
 export const TeamErrorText = styled.p`
-  color: ${token('color.text.lowEmphasis', N200)};
+  color: ${token('color.text.subtlest', N200)};
   margin-top: ${gridSize() * 1}px;
 `;

package/dist/es2019/styled/TeamCard.js

@@ -16,7 +16,7 @@ export const CardWrapper = styled.div`
   -moz-osx-font-smoothing: grayscale;
 `;
 const loadingImage = css`
-  background-color: ${token('color.background.subtleNeutral.resting', N20)};
+  background-color: ${token('color.background.neutral', N20)};
 `;
 const defaultImage = css`
   background-color: ${teamHeaderBgColor};
@@ -58,7 +58,7 @@ export const TeamName = styled.h6`
   -webkit-box-orient: vertical;
 `;
 export const MemberCount = styled.div`
-  color: ${token('color.text.lowEmphasis', N200)};
+  color: ${token('color.text.subtlest', N200)};
   margin-top: ${gridSize() * 0.5}px;
 `;
 export const AvatarSection = styled.div`
@@ -82,7 +82,7 @@ export const ActionButtons = styled.div`
   display: flex;
   justify-content: space-between;
   margin: ${gridSize() * 3}px -${gridSize() * 3}px 0 -${gridSize()}px;
-  background-color: ${token('color.background.overlay', 'hsla(0, 100%, 100%, 0.2)')};
+  background-color: ${token('elevation.surface.overlay', 'hsla(0, 100%, 100%, 0.2)')};
 `;
 export const WrappedButton = styled.div`
   flex-basis: 0;

package/dist/es2019/styled/constants.js

@@ -2,58 +2,58 @@ import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
 export const bgColor = themed({
-  light: token('color.background.overlay', colors.N0),
-  dark: token('color.background.overlay', colors.DN50)
+  light: token('elevation.surface.overlay', colors.N0),
+  dark: token('elevation.surface.overlay', colors.DN50)
 });
 export const headerBgColor = themed({
-  light: token('color.background.boldBrand.resting', colors.B500),
-  dark: token('color.background.boldBrand.resting', colors.B100)
+  light: token('color.background.brand.bold', colors.B500),
+  dark: token('color.background.brand.bold', colors.B100)
 });
 export const teamHeaderBgColor = themed({
-  light: token('color.background.subtleNeutral.resting', colors.N50),
-  dark: token('color.background.subtleNeutral.resting', colors.N50)
+  light: token('color.background.neutral', colors.N50),
+  dark: token('color.background.neutral', colors.N50)
 });
 export const headerBgColorDisabledUser = themed({
   light: token('color.background.disabled', colors.N30),
   dark: token('color.background.disabled', colors.B100)
 });
 export const headerTextColor = themed({
-  light: token('color.text.onBold', colors.N0),
-  dark: token('color.text.onBold', colors.N0)
+  light: token('color.text.inverse', colors.N0),
+  dark: token('color.text.inverse', colors.N0)
 });
 export const headerTextColorInactive = themed({
-  light: token('color.text.highEmphasis', colors.N800),
-  dark: token('color.text.highEmphasis', colors.N0)
+  light: token('color.text', colors.N800),
+  dark: token('color.text', colors.N0)
 });
 export const appLabelBgColor = themed({
-  light: token('color.background.subtleNeutral.resting', colors.N20),
-  dark: token('color.background.subtleNeutral.resting', colors.N20)
+  light: token('color.background.neutral', colors.N20),
+  dark: token('color.background.neutral', colors.N20)
 });
 export const appLabelTextColor = themed({
-  light: token('color.text.highEmphasis', colors.N500),
-  dark: token('color.text.highEmphasis', colors.N500)
+  light: token('color.text', colors.N500),
+  dark: token('color.text', colors.N500)
 });
 export const labelTextColor = themed({
-  light: token('color.text.highEmphasis', colors.N800),
-  dark: token('color.text.highEmphasis', colors.DN900)
+  light: token('color.text', colors.N800),
+  dark: token('color.text', colors.DN900)
 });
 export const labelIconColor = themed({
-  light: token('color.text.lowEmphasis', colors.N60),
-  dark: token('color.text.lowEmphasis', colors.DN100)
+  light: token('color.text.subtlest', colors.N60),
+  dark: token('color.text.subtlest', colors.DN100)
 });
 export const errorIconColor = themed({
   light: token('color.text.disabled', colors.N90),
   dark: token('color.text.disabled', colors.DN90)
 });
 export const errorTitleColor = themed({
-  light: token('color.text.highEmphasis', colors.N800),
-  dark: token('color.text.highEmphasis', colors.DN800)
+  light: token('color.text', colors.N800),
+  dark: token('color.text', colors.DN800)
 });
 export const errorTextColor = themed({
-  light: token('color.text.lowEmphasis', colors.N90),
-  dark: token('color.text.lowEmphasis', colors.DN90)
+  light: token('color.text.subtlest', colors.N90),
+  dark: token('color.text.subtlest', colors.DN90)
 });
 export const boxShadow = themed({
-  light: token('shadow.overlay', `0 4px 8px -2px ${colors.N50A}, 0 0 1px ${colors.N60A}`),
-  dark: token('shadow.overlay', `0 4px 8px -2px ${colors.DN50A}, 0 0 1px ${colors.DN60A}`)
+  light: token('elevation.shadow.overlay', `0 4px 8px -2px ${colors.N50A}, 0 0 1px ${colors.N60A}`),
+  dark: token('elevation.shadow.overlay', `0 4px 8px -2px ${colors.DN50A}, 0 0 1px ${colors.DN60A}`)
 });

package/dist/es2019/util/analytics.js

@@ -11,7 +11,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "16.2.1",
+    packageVersion: "16.2.2",
     ...attributes,
     firedAt: getPageTime()
   }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.2.1"
+	"version": "16.2.2"
 }

package/dist/esm/components/Error/ErrorIllustration.js

@@ -12,7 +12,7 @@ export var ErrorIllustration = function ErrorIllustration() {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: token('color.background.overlay', 'white'),
+    fill: token('elevation.surface.overlay', 'white'),
     fillOpacity: "0.01"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M95.4299 74.1603L161.87 189.24C167.71 199.36 160.41 212 148.73 212H15.8499C4.16994 212 -3.13006 199.35 2.70994 189.24L69.1499 74.1603C74.9899 64.0403 89.5899 64.0403 95.4299 74.1603ZM87.8699 157.71L90.7499 113.36C91.0899 108.07 86.8899 103.58 81.5899 103.58C76.2799 103.58 72.0799 108.06 72.4299 113.36L75.3099 157.71C75.5299 161.02 78.2699 163.6 81.5899 163.6C84.8999 163.6 87.6499 161.02 87.8699 157.71ZM72.0299 181.25C72.0299 186.91 76.7899 191.35 82.4199 190.83C87.2699 190.38 91.1499 186.33 91.2499 181.46C91.3599 176.01 86.9399 171.52 81.5199 171.52C76.2899 171.51 72.0299 175.89 72.0299 181.25Z",

package/dist/esm/components/User/ProfileCard.js

@@ -298,7 +298,7 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
         }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
           size: "xlarge",
           src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-          borderColor: token('color.background.overlay', N0)
+          borderColor: token('elevation.surface.overlay', N0)
         })), /*#__PURE__*/React.createElement(CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), actions) : null));
       }
 

package/dist/esm/styled/Error.js

@@ -12,4 +12,4 @@ export var ErrorWrapper = styled.div(_templateObject || (_templateObject = _tagg
 export var ErrorTitle = styled.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: ", "px;\n  margin: ", "px 0;\n"])), errorTitleColor, gridSize() * 3, gridSize);
 export var ErrorText = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), errorTextColor);
 export var TeamErrorTitle = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n"])), h400);
-export var TeamErrorText = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), token('color.text.lowEmphasis', N200), gridSize() * 1);
+export var TeamErrorText = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), token('color.text.subtlest', N200), gridSize() * 1);

package/dist/esm/styled/TeamCard.js

@@ -10,7 +10,7 @@ import { token } from '@atlaskit/tokens';
 import { bgColor, teamHeaderBgColor } from '../styled/constants';
 export var CardTriggerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inherit;\n"])));
 export var CardWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n"])), bgColor, borderRadius, gridSize() * 40);
-var loadingImage = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.subtleNeutral.resting', N20));
+var loadingImage = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.neutral', N20));
 var defaultImage = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), teamHeaderBgColor);
 export var CardHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  background-repeat: no-repeat;\n  background-size: cover;\n  box-sizing: content-box;\n  height: ", "px;\n"])), function (props) {
   if (props.isLoading) {
@@ -25,11 +25,11 @@ export var CardHeader = styled.div(_templateObject5 || (_templateObject5 = _tagg
 }, gridSize() * 16);
 export var CardContent = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  min-height: ", "px;\n"])), gridSize() * 3, gridSize() * 13);
 export var TeamName = styled.h6(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", ";\n  text-transform: none;\n  overflow: hidden;\n  max-height: 48px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])), h600);
-export var MemberCount = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), token('color.text.lowEmphasis', N200), gridSize() * 0.5);
+export var MemberCount = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), token('color.text.subtlest', N200), gridSize() * 0.5);
 export var AvatarSection = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  margin-left: -2px;\n"])), gridSize() * 2);
 export var DescriptionWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  align-items: center;\n  display: flex;\n"])), gridSize() * 2);
 export var Description = styled.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  max-height: 60px;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"])));
-export var ActionButtons = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: ", ";\n"])), gridSize() * 3, gridSize() * 3, gridSize(), token('color.background.overlay', 'hsla(0, 100%, 100%, 0.2)'));
+export var ActionButtons = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: ", ";\n"])), gridSize() * 3, gridSize() * 3, gridSize(), token('elevation.surface.overlay', 'hsla(0, 100%, 100%, 0.2)'));
 export var WrappedButton = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  flex-basis: 0;\n  flex-grow: 1;\n  margin-left: 8px;\n"])));
 export var MoreButton = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n"])));
 export var LoadingWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin-top: ", "px;\n"])), gridSize() * 5); // export const LoadingTeamName = styled.div`

package/dist/esm/styled/constants.js

@@ -2,58 +2,58 @@ import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
 export var bgColor = themed({
-  light: token('color.background.overlay', colors.N0),
-  dark: token('color.background.overlay', colors.DN50)
+  light: token('elevation.surface.overlay', colors.N0),
+  dark: token('elevation.surface.overlay', colors.DN50)
 });
 export var headerBgColor = themed({
-  light: token('color.background.boldBrand.resting', colors.B500),
-  dark: token('color.background.boldBrand.resting', colors.B100)
+  light: token('color.background.brand.bold', colors.B500),
+  dark: token('color.background.brand.bold', colors.B100)
 });
 export var teamHeaderBgColor = themed({
-  light: token('color.background.subtleNeutral.resting', colors.N50),
-  dark: token('color.background.subtleNeutral.resting', colors.N50)
+  light: token('color.background.neutral', colors.N50),
+  dark: token('color.background.neutral', colors.N50)
 });
 export var headerBgColorDisabledUser = themed({
   light: token('color.background.disabled', colors.N30),
   dark: token('color.background.disabled', colors.B100)
 });
 export var headerTextColor = themed({
-  light: token('color.text.onBold', colors.N0),
-  dark: token('color.text.onBold', colors.N0)
+  light: token('color.text.inverse', colors.N0),
+  dark: token('color.text.inverse', colors.N0)
 });
 export var headerTextColorInactive = themed({
-  light: token('color.text.highEmphasis', colors.N800),
-  dark: token('color.text.highEmphasis', colors.N0)
+  light: token('color.text', colors.N800),
+  dark: token('color.text', colors.N0)
 });
 export var appLabelBgColor = themed({
-  light: token('color.background.subtleNeutral.resting', colors.N20),
-  dark: token('color.background.subtleNeutral.resting', colors.N20)
+  light: token('color.background.neutral', colors.N20),
+  dark: token('color.background.neutral', colors.N20)
 });
 export var appLabelTextColor = themed({
-  light: token('color.text.highEmphasis', colors.N500),
-  dark: token('color.text.highEmphasis', colors.N500)
+  light: token('color.text', colors.N500),
+  dark: token('color.text', colors.N500)
 });
 export var labelTextColor = themed({
-  light: token('color.text.highEmphasis', colors.N800),
-  dark: token('color.text.highEmphasis', colors.DN900)
+  light: token('color.text', colors.N800),
+  dark: token('color.text', colors.DN900)
 });
 export var labelIconColor = themed({
-  light: token('color.text.lowEmphasis', colors.N60),
-  dark: token('color.text.lowEmphasis', colors.DN100)
+  light: token('color.text.subtlest', colors.N60),
+  dark: token('color.text.subtlest', colors.DN100)
 });
 export var errorIconColor = themed({
   light: token('color.text.disabled', colors.N90),
   dark: token('color.text.disabled', colors.DN90)
 });
 export var errorTitleColor = themed({
-  light: token('color.text.highEmphasis', colors.N800),
-  dark: token('color.text.highEmphasis', colors.DN800)
+  light: token('color.text', colors.N800),
+  dark: token('color.text', colors.DN800)
 });
 export var errorTextColor = themed({
-  light: token('color.text.lowEmphasis', colors.N90),
-  dark: token('color.text.lowEmphasis', colors.DN90)
+  light: token('color.text.subtlest', colors.N90),
+  dark: token('color.text.subtlest', colors.DN90)
 });
 export var boxShadow = themed({
-  light: token('shadow.overlay', "0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A)),
-  dark: token('shadow.overlay', "0 4px 8px -2px ".concat(colors.DN50A, ", 0 0 1px ").concat(colors.DN60A))
+  light: token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A)),
+  dark: token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(colors.DN50A, ", 0 0 1px ").concat(colors.DN60A))
 });

package/dist/esm/util/analytics.js

@@ -19,7 +19,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "16.2.1"
+      packageVersion: "16.2.2"
     }, attributes), {}, {
       firedAt: getPageTime()
     })

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.2.1"
+	"version": "16.2.2"
 }

package/dist/types/styled/constants.d.ts

@@ -1,14 +1,14 @@
-export declare const bgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-overlay)">;
-export declare const headerBgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-boldBrand-resting)">;
-export declare const teamHeaderBgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-subtleNeutral-resting)">;
+export declare const bgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-surface-overlay)">;
+export declare const headerBgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-brand-bold)">;
+export declare const teamHeaderBgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)">;
 export declare const headerBgColorDisabledUser: import("@atlaskit/theme").ThemedValue<"var(--ds-background-disabled)">;
-export declare const headerTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-onBold)">;
-export declare const headerTextColorInactive: import("@atlaskit/theme").ThemedValue<"var(--ds-text-highEmphasis)">;
-export declare const appLabelBgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-subtleNeutral-resting)">;
-export declare const appLabelTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-highEmphasis)">;
-export declare const labelTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-highEmphasis)">;
-export declare const labelIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-lowEmphasis)">;
+export declare const headerTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-inverse)">;
+export declare const headerTextColorInactive: import("@atlaskit/theme").ThemedValue<"var(--ds-text)">;
+export declare const appLabelBgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)">;
+export declare const appLabelTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text)">;
+export declare const labelTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text)">;
+export declare const labelIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
 export declare const errorIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-disabled)">;
-export declare const errorTitleColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-highEmphasis)">;
-export declare const errorTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-lowEmphasis)">;
-export declare const boxShadow: import("@atlaskit/theme").ThemedValue<"var(--ds-overlay)">;
+export declare const errorTitleColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text)">;
+export declare const errorTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
+export declare const boxShadow: import("@atlaskit/theme").ThemedValue<"var(--ds-shadow-overlay)">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "16.2.1",
+  "version": "16.2.2",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "@atlaskit/popup": "^1.3.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.5.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "date-fns": "^2.17.0",
     "lodash": "^4.17.21",
@@ -62,10 +62,10 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/dynamic-table": "^14.4.0",
+    "@atlaskit/dynamic-table": "^14.5.0",
     "@atlaskit/inline-edit": "^12.0.0",
     "@atlaskit/select": "^15.0.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",
     "@testing-library/react": "^8.0.1",
     "enzyme": "^3.10.0",