@atlaskit/profilecard 15.7.1 → 15.8.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/profilecard
 
+## 15.8.0
+
+### Minor Changes
+
+- [`1b9bc1e4b9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b9bc1e4b9a) - [ux] Instrumented profilecard with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
 ## 15.7.1
 
 ### Patch Changes

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

@@ -9,6 +9,9 @@ exports.ErrorIllustration = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _tokens = require("@atlaskit/tokens");
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var ErrorIllustration = function ErrorIllustration() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: "42",
@@ -20,7 +23,7 @@ var ErrorIllustration = function ErrorIllustration() {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: "white",
+    fill: (0, _tokens.token)('color.background.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

@@ -39,6 +39,8 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _analytics = require("../../internal/analytics");
 
 var _relativeDate = _interopRequireDefault(require("../../internal/relative-date"));
@@ -304,7 +306,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: _colors.N0
+          borderColor: (0, _tokens.token)('color.background.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/i18n/index.js

@@ -5,46 +5,34 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "en_ZZ", {
-  enumerable: true,
-  get: function get() {
-    return _en_ZZ.default;
-  }
-});
-Object.defineProperty(exports, "cs", {
-  enumerable: true,
-  get: function get() {
-    return _cs.default;
-  }
-});
-Object.defineProperty(exports, "da", {
+Object.defineProperty(exports, "zh", {
   enumerable: true,
   get: function get() {
-    return _da.default;
+    return _zh.default;
   }
 });
-Object.defineProperty(exports, "de", {
+Object.defineProperty(exports, "zh_TW", {
   enumerable: true,
   get: function get() {
-    return _de.default;
+    return _zh_TW.default;
   }
 });
-Object.defineProperty(exports, "en", {
+Object.defineProperty(exports, "cs", {
   enumerable: true,
   get: function get() {
-    return _en.default;
+    return _cs.default;
   }
 });
-Object.defineProperty(exports, "en_GB", {
+Object.defineProperty(exports, "da", {
   enumerable: true,
   get: function get() {
-    return _en_GB.default;
+    return _da.default;
   }
 });
-Object.defineProperty(exports, "es", {
+Object.defineProperty(exports, "nl", {
   enumerable: true,
   get: function get() {
-    return _es.default;
+    return _nl.default;
   }
 });
 Object.defineProperty(exports, "et", {
@@ -65,16 +53,16 @@ Object.defineProperty(exports, "fr", {
     return _fr.default;
   }
 });
-Object.defineProperty(exports, "hu", {
+Object.defineProperty(exports, "de", {
   enumerable: true,
   get: function get() {
-    return _hu.default;
+    return _de.default;
   }
 });
-Object.defineProperty(exports, "is", {
+Object.defineProperty(exports, "hu", {
   enumerable: true,
   get: function get() {
-    return _is.default;
+    return _hu.default;
   }
 });
 Object.defineProperty(exports, "it", {
@@ -101,12 +89,6 @@ Object.defineProperty(exports, "nb", {
     return _nb.default;
   }
 });
-Object.defineProperty(exports, "nl", {
-  enumerable: true,
-  get: function get() {
-    return _nl.default;
-  }
-});
 Object.defineProperty(exports, "pl", {
   enumerable: true,
   get: function get() {
@@ -125,12 +107,6 @@ Object.defineProperty(exports, "pt_PT", {
     return _pt_PT.default;
   }
 });
-Object.defineProperty(exports, "ro", {
-  enumerable: true,
-  get: function get() {
-    return _ro.default;
-  }
-});
 Object.defineProperty(exports, "ru", {
   enumerable: true,
   get: function get() {
@@ -143,6 +119,12 @@ Object.defineProperty(exports, "sk", {
     return _sk.default;
   }
 });
+Object.defineProperty(exports, "es", {
+  enumerable: true,
+  get: function get() {
+    return _es.default;
+  }
+});
 Object.defineProperty(exports, "sv", {
   enumerable: true,
   get: function get() {
@@ -173,32 +155,46 @@ Object.defineProperty(exports, "vi", {
     return _vi.default;
   }
 });
-Object.defineProperty(exports, "zh", {
+Object.defineProperty(exports, "en_ZZ", {
   enumerable: true,
   get: function get() {
-    return _zh.default;
+    return _en_ZZ.default;
   }
 });
-Object.defineProperty(exports, "zh_TW", {
+Object.defineProperty(exports, "en", {
   enumerable: true,
   get: function get() {
-    return _zh_TW.default;
+    return _en.default;
+  }
+});
+Object.defineProperty(exports, "en_GB", {
+  enumerable: true,
+  get: function get() {
+    return _en_GB.default;
+  }
+});
+Object.defineProperty(exports, "is", {
+  enumerable: true,
+  get: function get() {
+    return _is.default;
+  }
+});
+Object.defineProperty(exports, "ro", {
+  enumerable: true,
+  get: function get() {
+    return _ro.default;
   }
 });
 
-var _en_ZZ = _interopRequireDefault(require("./en_ZZ"));
+var _zh = _interopRequireDefault(require("./zh"));
+
+var _zh_TW = _interopRequireDefault(require("./zh_TW"));
 
 var _cs = _interopRequireDefault(require("./cs"));
 
 var _da = _interopRequireDefault(require("./da"));
 
-var _de = _interopRequireDefault(require("./de"));
-
-var _en = _interopRequireDefault(require("./en"));
-
-var _en_GB = _interopRequireDefault(require("./en_GB"));
-
-var _es = _interopRequireDefault(require("./es"));
+var _nl = _interopRequireDefault(require("./nl"));
 
 var _et = _interopRequireDefault(require("./et"));
 
@@ -206,9 +202,9 @@ var _fi = _interopRequireDefault(require("./fi"));
 
 var _fr = _interopRequireDefault(require("./fr"));
 
-var _hu = _interopRequireDefault(require("./hu"));
+var _de = _interopRequireDefault(require("./de"));
 
-var _is = _interopRequireDefault(require("./is"));
+var _hu = _interopRequireDefault(require("./hu"));
 
 var _it = _interopRequireDefault(require("./it"));
 
@@ -218,20 +214,18 @@ var _ko = _interopRequireDefault(require("./ko"));
 
 var _nb = _interopRequireDefault(require("./nb"));
 
-var _nl = _interopRequireDefault(require("./nl"));
-
 var _pl = _interopRequireDefault(require("./pl"));
 
 var _pt_BR = _interopRequireDefault(require("./pt_BR"));
 
 var _pt_PT = _interopRequireDefault(require("./pt_PT"));
 
-var _ro = _interopRequireDefault(require("./ro"));
-
 var _ru = _interopRequireDefault(require("./ru"));
 
 var _sk = _interopRequireDefault(require("./sk"));
 
+var _es = _interopRequireDefault(require("./es"));
+
 var _sv = _interopRequireDefault(require("./sv"));
 
 var _th = _interopRequireDefault(require("./th"));
@@ -242,6 +236,12 @@ var _uk = _interopRequireDefault(require("./uk"));
 
 var _vi = _interopRequireDefault(require("./vi"));
 
-var _zh = _interopRequireDefault(require("./zh"));
+var _en_ZZ = _interopRequireDefault(require("./en_ZZ"));
+
+var _en = _interopRequireDefault(require("./en"));
+
+var _en_GB = _interopRequireDefault(require("./en_GB"));
+
+var _is = _interopRequireDefault(require("./is"));
 
-var _zh_TW = _interopRequireDefault(require("./zh_TW"));
+var _ro = _interopRequireDefault(require("./ro"));

package/dist/cjs/styled/Card.js

@@ -15,8 +15,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _elevation = require("@atlaskit/theme/elevation");
-
 var _constants2 = require("../styled/constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
@@ -96,7 +94,7 @@ var CardContainer = _styledComponents.default.div(_templateObject15 || (_templat
     return '';
   }
 
-  return (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n      ", "\n      border-radius: ", "px;\n    "])), _elevation.e200, _constants.borderRadius);
+  return (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), _constants2.boxShadow, _constants.borderRadius);
 });
 
 exports.CardContainer = CardContainer;

package/dist/cjs/styled/Error.js

@@ -17,6 +17,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants2 = require("../styled/constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
@@ -37,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"])), _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.lowEmphasis', _colors.N200), (0, _constants.gridSize)() * 1);
 
 exports.TeamErrorText = TeamErrorText;

package/dist/cjs/styled/TeamCard.js

@@ -19,6 +19,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants2 = require("../styled/constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
@@ -34,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"])), _colors.N20);
+var loadingImage = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.subtleNeutral.resting', _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) {
@@ -59,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"])), _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.lowEmphasis', _colors.N200), (0, _constants.gridSize)() * 0.5);
 
 exports.MemberCount = MemberCount;
 
@@ -75,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: hsla(0, 100%, 100%, 0.2);\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)());
+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)'));
 
 exports.ActionButtons = ActionButtons;
 

package/dist/cjs/styled/constants.js

@@ -5,78 +5,85 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.errorTextColor = exports.errorTitleColor = exports.errorIconColor = exports.labelIconColor = exports.labelTextColor = exports.appLabelTextColor = exports.appLabelBgColor = exports.headerTextColorInactive = exports.headerTextColor = exports.headerBgColorDisabledUser = exports.teamHeaderBgColor = exports.headerBgColor = exports.bgColor = void 0;
+exports.boxShadow = exports.errorTextColor = exports.errorTitleColor = exports.errorIconColor = exports.labelIconColor = exports.labelTextColor = exports.appLabelTextColor = exports.appLabelBgColor = exports.headerTextColorInactive = exports.headerTextColor = exports.headerBgColorDisabledUser = exports.teamHeaderBgColor = exports.headerBgColor = exports.bgColor = void 0;
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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: colors.N0,
-  dark: colors.DN50
+  light: (0, _tokens.token)('color.background.overlay', colors.N0),
+  dark: (0, _tokens.token)('color.background.overlay', colors.DN50)
 });
 exports.bgColor = bgColor;
 var headerBgColor = (0, _components.themed)({
-  light: colors.B500,
-  dark: colors.B100
+  light: (0, _tokens.token)('color.background.boldBrand.resting', colors.B500),
+  dark: (0, _tokens.token)('color.background.boldBrand.resting', colors.B100)
 });
 exports.headerBgColor = headerBgColor;
 var teamHeaderBgColor = (0, _components.themed)({
-  light: colors.N50,
-  dark: colors.N50
+  light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N50),
+  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N50)
 });
 exports.teamHeaderBgColor = teamHeaderBgColor;
 var headerBgColorDisabledUser = (0, _components.themed)({
-  light: colors.N30,
-  dark: colors.B100
+  light: (0, _tokens.token)('color.background.disabled', colors.N30),
+  dark: (0, _tokens.token)('color.background.disabled', colors.B100)
 });
 exports.headerBgColorDisabledUser = headerBgColorDisabledUser;
 var headerTextColor = (0, _components.themed)({
-  light: colors.N0,
-  dark: colors.N0
+  light: (0, _tokens.token)('color.text.onBold', colors.N0),
+  dark: (0, _tokens.token)('color.text.onBold', colors.N0)
 });
 exports.headerTextColor = headerTextColor;
 var headerTextColorInactive = (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.N0
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.N0)
 });
 exports.headerTextColorInactive = headerTextColorInactive;
 var appLabelBgColor = (0, _components.themed)({
-  light: colors.N20,
-  dark: colors.N20
+  light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20),
+  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20)
 });
 exports.appLabelBgColor = appLabelBgColor;
 var appLabelTextColor = (0, _components.themed)({
-  light: colors.N500,
-  dark: colors.N500
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N500),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.N500)
 });
 exports.appLabelTextColor = appLabelTextColor;
 var labelTextColor = (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.DN900
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN900)
 });
 exports.labelTextColor = labelTextColor;
 var labelIconColor = (0, _components.themed)({
-  light: colors.N60,
-  dark: colors.DN100
+  light: (0, _tokens.token)('color.text.lowEmphasis', colors.N60),
+  dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN100)
 });
 exports.labelIconColor = labelIconColor;
 var errorIconColor = (0, _components.themed)({
-  light: colors.N90,
-  dark: colors.DN90
+  light: (0, _tokens.token)('color.text.disabled', colors.N90),
+  dark: (0, _tokens.token)('color.text.disabled', colors.DN90)
 });
 exports.errorIconColor = errorIconColor;
 var errorTitleColor = (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.DN800
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN800)
 });
 exports.errorTitleColor = errorTitleColor;
 var errorTextColor = (0, _components.themed)({
-  light: colors.N90,
-  dark: colors.DN90
+  light: (0, _tokens.token)('color.text.lowEmphasis', colors.N90),
+  dark: (0, _tokens.token)('color.text.lowEmphasis', 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))
 });
-exports.errorTextColor = errorTextColor;
+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: "15.7.1"
+      packageVersion: "15.8.0"
     }, attributes), {}, {
       firedAt: (0, _performance.getPageTime)()
     })

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "15.7.1"
+	"version": "15.8.0"
 }

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

@@ -1,4 +1,6 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 export const ErrorIllustration = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "42",
@@ -10,7 +12,7 @@ export const ErrorIllustration = () => {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: "white",
+    fill: token('color.background.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

@@ -7,6 +7,7 @@ import Button from '@atlaskit/button/custom-theme-button';
 import Lozenge from '@atlaskit/lozenge';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { AnalyticsName } from '../../internal/analytics';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
@@ -234,7 +235,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: N0
+        borderColor: token('color.background.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/i18n/index.js

@@ -4,33 +4,33 @@
  * This file is automatically generated by i18n-tools.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-export { default as en_ZZ } from './en_ZZ';
+export { default as zh } from './zh';
+export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
-export { default as de } from './de';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
-export { default as es } from './es';
+export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
+export { default as de } from './de';
 export { default as hu } from './hu';
-export { default as is } from './is';
 export { default as it } from './it';
 export { default as ja } from './ja';
 export { default as ko } from './ko';
 export { default as nb } from './nb';
-export { default as nl } from './nl';
 export { default as pl } from './pl';
 export { default as pt_BR } from './pt_BR';
 export { default as pt_PT } from './pt_PT';
-export { default as ro } from './ro';
 export { default as ru } from './ru';
 export { default as sk } from './sk';
+export { default as es } from './es';
 export { default as sv } from './sv';
 export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as zh } from './zh';
-export { default as zh_TW } from './zh_TW';
+export { default as en_ZZ } from './en_ZZ';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
+export { default as is } from './is';
+export { default as ro } from './ro';

package/dist/es2019/styled/Card.js

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
-import { e200 } from '@atlaskit/theme/elevation';
-import { appLabelBgColor, appLabelTextColor, bgColor, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from '../styled/constants';
+import { appLabelBgColor, appLabelTextColor, bgColor, boxShadow, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from '../styled/constants';
 
 const getFullNameMargin = props => props.noMeta ? `${gridSize() * 4.5}px 0 ${gridSize() * 1.5}px 0` : `${gridSize() * 1.5}px 0 0 0`;
 
@@ -128,7 +127,7 @@ export const CardContainer = styled.div`
   }
 
   return css`
-      ${e200}
+      box-shadow: ${boxShadow};
       border-radius: ${borderRadius}px;
     `;
 }}

package/dist/es2019/styled/Error.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h400 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import { errorIconColor, errorTextColor, errorTitleColor } from '../styled/constants';
 export const ErrorWrapper = styled.div`
   text-align: center;
@@ -20,6 +21,6 @@ export const TeamErrorTitle = styled.p`
   ${h400};
 `;
 export const TeamErrorText = styled.p`
-  color: ${N200};
+  color: ${token('color.text.lowEmphasis', N200)};
   margin-top: ${gridSize() * 1}px;
 `;

package/dist/es2019/styled/TeamCard.js

@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
 import { N20, N200 } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import { bgColor, teamHeaderBgColor } from '../styled/constants';
 export const CardTriggerWrapper = styled.div`
   display: inherit;
@@ -15,7 +16,7 @@ export const CardWrapper = styled.div`
   -moz-osx-font-smoothing: grayscale;
 `;
 const loadingImage = css`
-  background-color: ${N20};
+  background-color: ${token('color.background.subtleNeutral.resting', N20)};
 `;
 const defaultImage = css`
   background-color: ${teamHeaderBgColor};
@@ -57,7 +58,7 @@ export const TeamName = styled.h6`
   -webkit-box-orient: vertical;
 `;
 export const MemberCount = styled.div`
-  color: ${N200};
+  color: ${token('color.text.lowEmphasis', N200)};
   margin-top: ${gridSize() * 0.5}px;
 `;
 export const AvatarSection = styled.div`
@@ -81,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: hsla(0, 100%, 100%, 0.2);
+  background-color: ${token('color.background.overlay', 'hsla(0, 100%, 100%, 0.2)')};
 `;
 export const WrappedButton = styled.div`
   flex-basis: 0;

package/dist/es2019/styled/constants.js

@@ -1,54 +1,59 @@
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 export const bgColor = themed({
-  light: colors.N0,
-  dark: colors.DN50
+  light: token('color.background.overlay', colors.N0),
+  dark: token('color.background.overlay', colors.DN50)
 });
 export const headerBgColor = themed({
-  light: colors.B500,
-  dark: colors.B100
+  light: token('color.background.boldBrand.resting', colors.B500),
+  dark: token('color.background.boldBrand.resting', colors.B100)
 });
 export const teamHeaderBgColor = themed({
-  light: colors.N50,
-  dark: colors.N50
+  light: token('color.background.subtleNeutral.resting', colors.N50),
+  dark: token('color.background.subtleNeutral.resting', colors.N50)
 });
 export const headerBgColorDisabledUser = themed({
-  light: colors.N30,
-  dark: colors.B100
+  light: token('color.background.disabled', colors.N30),
+  dark: token('color.background.disabled', colors.B100)
 });
 export const headerTextColor = themed({
-  light: colors.N0,
-  dark: colors.N0
+  light: token('color.text.onBold', colors.N0),
+  dark: token('color.text.onBold', colors.N0)
 });
 export const headerTextColorInactive = themed({
-  light: colors.N800,
-  dark: colors.N0
+  light: token('color.text.highEmphasis', colors.N800),
+  dark: token('color.text.highEmphasis', colors.N0)
 });
 export const appLabelBgColor = themed({
-  light: colors.N20,
-  dark: colors.N20
+  light: token('color.background.subtleNeutral.resting', colors.N20),
+  dark: token('color.background.subtleNeutral.resting', colors.N20)
 });
 export const appLabelTextColor = themed({
-  light: colors.N500,
-  dark: colors.N500
+  light: token('color.text.highEmphasis', colors.N500),
+  dark: token('color.text.highEmphasis', colors.N500)
 });
 export const labelTextColor = themed({
-  light: colors.N800,
-  dark: colors.DN900
+  light: token('color.text.highEmphasis', colors.N800),
+  dark: token('color.text.highEmphasis', colors.DN900)
 });
 export const labelIconColor = themed({
-  light: colors.N60,
-  dark: colors.DN100
+  light: token('color.text.lowEmphasis', colors.N60),
+  dark: token('color.text.lowEmphasis', colors.DN100)
 });
 export const errorIconColor = themed({
-  light: colors.N90,
-  dark: colors.DN90
+  light: token('color.text.disabled', colors.N90),
+  dark: token('color.text.disabled', colors.DN90)
 });
 export const errorTitleColor = themed({
-  light: colors.N800,
-  dark: colors.DN800
+  light: token('color.text.highEmphasis', colors.N800),
+  dark: token('color.text.highEmphasis', colors.DN800)
 });
 export const errorTextColor = themed({
-  light: colors.N90,
-  dark: colors.DN90
+  light: token('color.text.lowEmphasis', colors.N90),
+  dark: token('color.text.lowEmphasis', 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}`)
 });

package/dist/es2019/util/analytics.js

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

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "15.7.1"
+	"version": "15.8.0"
 }

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

@@ -1,4 +1,6 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 export var ErrorIllustration = function ErrorIllustration() {
   return /*#__PURE__*/React.createElement("svg", {
     width: "42",
@@ -10,7 +12,7 @@ export var ErrorIllustration = function ErrorIllustration() {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: "white",
+    fill: token('color.background.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

@@ -19,6 +19,7 @@ import Button from '@atlaskit/button/custom-theme-button';
 import Lozenge from '@atlaskit/lozenge';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { AnalyticsName } from '../../internal/analytics';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
@@ -280,7 +281,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: N0
+          borderColor: token('color.background.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/i18n/index.js

@@ -4,33 +4,33 @@
  * This file is automatically generated by i18n-tools.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-export { default as en_ZZ } from './en_ZZ';
+export { default as zh } from './zh';
+export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
-export { default as de } from './de';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
-export { default as es } from './es';
+export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
+export { default as de } from './de';
 export { default as hu } from './hu';
-export { default as is } from './is';
 export { default as it } from './it';
 export { default as ja } from './ja';
 export { default as ko } from './ko';
 export { default as nb } from './nb';
-export { default as nl } from './nl';
 export { default as pl } from './pl';
 export { default as pt_BR } from './pt_BR';
 export { default as pt_PT } from './pt_PT';
-export { default as ro } from './ro';
 export { default as ru } from './ru';
 export { default as sk } from './sk';
+export { default as es } from './es';
 export { default as sv } from './sv';
 export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as zh } from './zh';
-export { default as zh_TW } from './zh_TW';
+export { default as en_ZZ } from './en_ZZ';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
+export { default as is } from './is';
+export { default as ro } from './ro';

package/dist/esm/styled/Card.js

@@ -4,8 +4,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import styled, { css } from 'styled-components';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
-import { e200 } from '@atlaskit/theme/elevation';
-import { appLabelBgColor, appLabelTextColor, bgColor, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from '../styled/constants';
+import { appLabelBgColor, appLabelTextColor, bgColor, boxShadow, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from '../styled/constants';
 
 var getFullNameMargin = function getFullNameMargin(props) {
   return props.noMeta ? "".concat(gridSize() * 4.5, "px 0 ").concat(gridSize() * 1.5, "px 0") : "".concat(gridSize() * 1.5, "px 0 0 0");
@@ -38,7 +37,7 @@ export var CardContainer = styled.div(_templateObject15 || (_templateObject15 =
     return '';
   }
 
-  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      ", "\n      border-radius: ", "px;\n    "])), e200, borderRadius);
+  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), boxShadow, borderRadius);
 });
 export var DetailsLabel = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  line-height: ", "px;\n  font-size: ", "px;\n  margin: ", "px 0 0 0;\n  white-space: nowrap;\n\n  & + & {\n    margin-top: ", "px;\n  }\n"])), gridSize() * 3, gridSize() * 1.5, gridSize() * 2, gridSize() / 4);
 export var DetailsLabelIcon = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-shrink: 0;\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  padding: ", "px;\n  vertical-align: top;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])), labelIconColor, gridSize() * 2, gridSize() * 2, gridSize() / 2);

package/dist/esm/styled/Error.js

@@ -6,9 +6,10 @@ import styled from 'styled-components';
 import { N200 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h400 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import { errorIconColor, errorTextColor, errorTitleColor } from '../styled/constants';
 export var ErrorWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n  padding: ", "px;\n  color: ", ";\n"])), gridSize() * 3, errorIconColor);
 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"])), N200, gridSize() * 1);
+export var TeamErrorText = styled.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: ", "px;\n"])), token('color.text.lowEmphasis', N200), gridSize() * 1);

package/dist/esm/styled/TeamCard.js

@@ -6,10 +6,11 @@ import styled, { css } from 'styled-components';
 import { N20, N200 } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
+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"])), N20);
+var loadingImage = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.subtleNeutral.resting', 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) {
@@ -24,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"])), N200, gridSize() * 0.5);
+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 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: hsla(0, 100%, 100%, 0.2);\n"])), gridSize() * 3, gridSize() * 3, gridSize());
+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 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

@@ -1,54 +1,59 @@
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 export var bgColor = themed({
-  light: colors.N0,
-  dark: colors.DN50
+  light: token('color.background.overlay', colors.N0),
+  dark: token('color.background.overlay', colors.DN50)
 });
 export var headerBgColor = themed({
-  light: colors.B500,
-  dark: colors.B100
+  light: token('color.background.boldBrand.resting', colors.B500),
+  dark: token('color.background.boldBrand.resting', colors.B100)
 });
 export var teamHeaderBgColor = themed({
-  light: colors.N50,
-  dark: colors.N50
+  light: token('color.background.subtleNeutral.resting', colors.N50),
+  dark: token('color.background.subtleNeutral.resting', colors.N50)
 });
 export var headerBgColorDisabledUser = themed({
-  light: colors.N30,
-  dark: colors.B100
+  light: token('color.background.disabled', colors.N30),
+  dark: token('color.background.disabled', colors.B100)
 });
 export var headerTextColor = themed({
-  light: colors.N0,
-  dark: colors.N0
+  light: token('color.text.onBold', colors.N0),
+  dark: token('color.text.onBold', colors.N0)
 });
 export var headerTextColorInactive = themed({
-  light: colors.N800,
-  dark: colors.N0
+  light: token('color.text.highEmphasis', colors.N800),
+  dark: token('color.text.highEmphasis', colors.N0)
 });
 export var appLabelBgColor = themed({
-  light: colors.N20,
-  dark: colors.N20
+  light: token('color.background.subtleNeutral.resting', colors.N20),
+  dark: token('color.background.subtleNeutral.resting', colors.N20)
 });
 export var appLabelTextColor = themed({
-  light: colors.N500,
-  dark: colors.N500
+  light: token('color.text.highEmphasis', colors.N500),
+  dark: token('color.text.highEmphasis', colors.N500)
 });
 export var labelTextColor = themed({
-  light: colors.N800,
-  dark: colors.DN900
+  light: token('color.text.highEmphasis', colors.N800),
+  dark: token('color.text.highEmphasis', colors.DN900)
 });
 export var labelIconColor = themed({
-  light: colors.N60,
-  dark: colors.DN100
+  light: token('color.text.lowEmphasis', colors.N60),
+  dark: token('color.text.lowEmphasis', colors.DN100)
 });
 export var errorIconColor = themed({
-  light: colors.N90,
-  dark: colors.DN90
+  light: token('color.text.disabled', colors.N90),
+  dark: token('color.text.disabled', colors.DN90)
 });
 export var errorTitleColor = themed({
-  light: colors.N800,
-  dark: colors.DN800
+  light: token('color.text.highEmphasis', colors.N800),
+  dark: token('color.text.highEmphasis', colors.DN800)
 });
 export var errorTextColor = themed({
-  light: colors.N90,
-  dark: colors.DN90
+  light: token('color.text.lowEmphasis', colors.N90),
+  dark: token('color.text.lowEmphasis', 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))
 });

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: "15.7.1"
+      packageVersion: "15.8.0"
     }, attributes), {}, {
       firedAt: getPageTime()
     })

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "15.7.1"
+	"version": "15.8.0"
 }

package/dist/types/i18n/index.d.ts

@@ -4,33 +4,33 @@
  * This file is automatically generated by i18n-tools.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-export { default as en_ZZ } from './en_ZZ';
+export { default as zh } from './zh';
+export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
-export { default as de } from './de';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
-export { default as es } from './es';
+export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
+export { default as de } from './de';
 export { default as hu } from './hu';
-export { default as is } from './is';
 export { default as it } from './it';
 export { default as ja } from './ja';
 export { default as ko } from './ko';
 export { default as nb } from './nb';
-export { default as nl } from './nl';
 export { default as pl } from './pl';
 export { default as pt_BR } from './pt_BR';
 export { default as pt_PT } from './pt_PT';
-export { default as ro } from './ro';
 export { default as ru } from './ru';
 export { default as sk } from './sk';
+export { default as es } from './es';
 export { default as sv } from './sv';
 export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as zh } from './zh';
-export { default as zh_TW } from './zh_TW';
+export { default as en_ZZ } from './en_ZZ';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
+export { default as is } from './is';
+export { default as ro } from './ro';

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "15.7.1",
+  "version": "15.8.0",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,6 +48,7 @@
     "@atlaskit/popup": "^1.1.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "date-fns": "^2.17.0",
     "lodash": "^4.17.15",
@@ -83,6 +84,9 @@
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "theming": "tokens"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"