@atlaskit/avatar 21.3.2 → 21.3.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/avatar
 
+## 21.3.4
+
+### Patch Changes
+
+- [`abf69e9a4f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/abf69e9a4f6) - Removes usage of deprecated theme mixins in favor of static token / color usage.
+
+## 21.3.3
+
+### Patch Changes
+
+- [`e2d375fa634`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e2d375fa634) - Refactor how some internal styles are applied; no functional changes.
+
 ## 21.3.2
 
 ### Patch Changes

package/dist/cjs/Avatar.js

@@ -22,7 +22,7 @@ var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.3.2";
+var packageVersion = "21.3.4";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/cjs/AvatarImage.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ICON_COLOR = exports.ICON_BACKGROUND = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -12,10 +13,9 @@ var _person = _interopRequireDefault(require("@atlaskit/icon/glyph/person"));
 var _ship = _interopRequireDefault(require("@atlaskit/icon/glyph/ship"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("./constants");
-/** @jsx jsx */
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-
-var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat((0, _colors.background)(), ")");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
 exports.ICON_BACKGROUND = ICON_BACKGROUND;
 var ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
 exports.ICON_COLOR = ICON_COLOR;
@@ -25,24 +25,37 @@ var avatarDefaultIconStyles = (0, _react2.css)({
   height: '100%',
   backgroundColor: ICON_COLOR
 });
+var nestedAvatarStyles = Object.entries(_constants.AVATAR_SIZES).reduce(function (styles, _ref) {
+  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    key = _ref2[0],
+    size = _ref2[1];
+  return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react2.css)({
+    // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+    '& svg': {
+      width: "".concat(size, "px"),
+      height: "".concat(size, "px")
+    }
+  })));
+}, {});
 var avatarImageStyles = (0, _react2.css)({
   display: 'flex',
   width: '100%',
   height: '100%',
   flex: '1 1 100%'
 });
+
 /**
  * __Avatar image__
  *
  * An avatar image is an internal component used to control the rendering phases of an image.
  */
-var AvatarImage = function AvatarImage(_ref) {
-  var _ref$alt = _ref.alt,
-    alt = _ref$alt === void 0 ? '' : _ref$alt,
-    src = _ref.src,
-    appearance = _ref.appearance,
-    size = _ref.size,
-    testId = _ref.testId;
+var AvatarImage = function AvatarImage(_ref3) {
+  var _ref3$alt = _ref3.alt,
+    alt = _ref3$alt === void 0 ? '' : _ref3$alt,
+    src = _ref3.src,
+    appearance = _ref3.appearance,
+    size = _ref3.size,
+    testId = _ref3.testId;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasImageErrored = _useState2[0],
@@ -55,15 +68,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }, [src]);
   if (!src || hasImageErrored) {
     return (0, _react2.jsx)("span", {
-      css: [avatarDefaultIconStyles,
-      // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      {
-        '& svg': {
-          width: "".concat(_constants.AVATAR_SIZES[size], "px"),
-          height: "".concat(_constants.AVATAR_SIZES[size], "px")
-        }
-      }]
+      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
     }, appearance === 'circle' ? (0, _react2.jsx)(_person.default, {
       label: alt,
       primaryColor: ICON_BACKGROUND,

package/dist/cjs/AvatarItem.js

@@ -32,7 +32,7 @@ var getStyles = function getStyles(css, _ref) {
     isInteractive = _ref.isInteractive,
     isDisabled = _ref.isDisabled;
   return (// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing, @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat((0, _colors.backgroundHover)(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat((0, _colors.backgroundActive)(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: ", ";\n    padding: ", ";\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, "var(--ds-space-0, 0px)", "var(--ds-space-050, 4px)", isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };
 

package/dist/cjs/IconWrapper.js

@@ -28,7 +28,7 @@ var iconWrapperStyles = (0, _react.css)({
  */
 var IconWrapper = function IconWrapper(_ref) {
   var _ref$bgColor = _ref.bgColor,
-    bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref$bgColor,
+    bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat(_colors.N0, ")") : _ref$bgColor,
     children = _ref.children,
     label = _ref.label;
   return (0, _react.jsx)("span", {

package/dist/cjs/Presence.js

@@ -22,11 +22,11 @@ var BusyIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, n
   cy: "4",
   r: "4"
 }), /*#__PURE__*/_react.default.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
 }));
 var FocusIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("path", {
-  fill: "var(--ds-icon-discovery, ".concat((0, _colors.purple)(), ")"),
+  fill: "var(--ds-icon-discovery, ".concat(_colors.P300, ")"),
   d: "M4,8 C1.790861,8 0,6.209139 0,4 C0,1.790861 1.790861,0 4,0 C6.209139,0 8,1.790861 8,4 C8,6.209139 6.209139,8 4,8 Z M4,6.66666667 C5.47275933,6.66666667 6.66666667,5.47275933 6.66666667,4 C6.66666667,2.52724067 5.47275933,1.33333333 4,1.33333333 C2.52724067,1.33333333 1.33333333,2.52724067 1.33333333,4 C1.33333333,5.47275933 2.52724067,6.66666667 4,6.66666667 Z M4,5.33333333 C3.26362033,5.33333333 2.66666667,4.73637967 2.66666667,4 C2.66666667,3.26362033 3.26362033,2.66666667 4,2.66666667 C4.73637967,2.66666667 5.33333333,3.26362033 5.33333333,4 C5.33333333,4.73637967 4.73637967,5.33333333 4,5.33333333 Z"
 }));
 var OfflineIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("path", {

package/dist/cjs/Skeleton.js

@@ -1,33 +1,49 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _constants = require("./constants");
-/** @jsx jsx */
-// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+var skeletonStyles = (0, _react.css)({
+  display: 'inline-block',
+  backgroundColor: "var(".concat(_constants.CSS_VAR_AVATAR_BGCOLOR, ")"),
+  border: "".concat(_constants.BORDER_WIDTH, "px solid transparent")
+});
+var sizeStyles = Object.entries(_constants.AVATAR_SIZES).reduce(function (styles, _ref) {
+  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    key = _ref2[0],
+    size = _ref2[1];
+  return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react.css)({
+    width: "".concat(size, "px"),
+    height: "".concat(size, "px")
+  })));
+}, {});
 
-var getStyles = function getStyles(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'circle' : _ref$appearance,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-    _ref$weight = _ref.weight,
-    weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
-  return (0, _react.css)({
-    display: 'inline-block',
-    width: "".concat(_constants.AVATAR_SIZES[size], "px"),
-    height: "".concat(_constants.AVATAR_SIZES[size], "px"),
-    backgroundColor: color,
-    border: "".concat(_constants.BORDER_WIDTH, "px solid transparent"),
-    borderRadius: "".concat(appearance === 'square' ? "".concat(_constants.AVATAR_RADIUS[size], "px") : '50%'),
-    opacity: "".concat(weight === 'strong' ? 0.3 : 0.15)
-  });
-};
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var radiusStyles = Object.entries(_constants.AVATAR_RADIUS).reduce(function (styles, _ref3) {
+  var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+    key = _ref4[0],
+    size = _ref4[1];
+  return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react.css)({
+    borderRadius: "".concat(size, "px")
+  })));
+}, {});
+var defaultRadiusStyles = (0, _react.css)({
+  borderRadius: '50%'
+});
+var strongOpacityStyles = (0, _react.css)({
+  opacity: 0.3
+});
+var defaultOpacityStyles = (0, _react.css)({
+  opacity: 0.15
+});
 
 /**
  * __Skeleton__
@@ -37,20 +53,14 @@ var getStyles = function getStyles(_ref) {
  * - [Examples](https://atlassian.design/components/avatar/avatar-skeleton/examples)
  * - [Code](https://atlassian.design/components/avatar/avatar-skeleton/code)
  */
-var Skeleton = function Skeleton(_ref2) {
-  var size = _ref2.size,
-    appearance = _ref2.appearance,
-    color = _ref2.color,
-    weight = _ref2.weight;
+var Skeleton = function Skeleton(_ref5) {
+  var size = _ref5.size,
+    appearance = _ref5.appearance,
+    color = _ref5.color,
+    weight = _ref5.weight;
   return (0, _react.jsx)("div", {
-    // TODO: Refactor styles to follow css prop rules
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    css: getStyles({
-      size: size,
-      appearance: appearance,
-      color: color,
-      weight: weight
-    })
+    css: [skeletonStyles, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' ? radiusStyles[size !== null && size !== void 0 ? size : 'medium'] : defaultRadiusStyles, weight === 'strong' ? strongOpacityStyles : defaultOpacityStyles],
+    style: (0, _defineProperty2.default)({}, _constants.CSS_VAR_AVATAR_BGCOLOR, color !== null && color !== void 0 ? color : 'currentColor')
   });
 };
 var _default = Skeleton;

package/dist/cjs/Status.js

@@ -22,7 +22,7 @@ var ApprovedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragmen
   cy: "4",
   r: "4"
 }), /*#__PURE__*/_react.default.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   d: "M2.47140452,3.52859548 C2.21105499,3.26824595 1.78894501,3.26824595 1.52859548,3.52859548 C1.26824595,3.78894501 1.26824595,4.21105499 1.52859548,4.47140452 L2.86192881,5.80473785 C3.12227834,6.06508738 3.54438833,6.06508738 3.80473785,5.80473785 L6.47140452,3.13807119 C6.73175405,2.87772166 6.73175405,2.45561167 6.47140452,2.19526215 C6.21105499,1.93491262 5.78894501,1.93491262 5.52859548,2.19526215 L3.33333333,4.39052429 L2.47140452,3.52859548 Z"
 }));
 var DeclinedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
@@ -31,7 +31,7 @@ var DeclinedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragmen
   cy: "4",
   r: "4"
 }), /*#__PURE__*/_react.default.createElement("path", {
-  fill: "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")"),
+  fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   d: "M4.890661,4.0088336 L5.81806461,3.07802178 C6.06167933,2.83351177 6.06048933,2.43826992 5.81540668,2.19522442 C5.57032402,1.95217891 5.17415651,1.95336612 4.93054179,2.19787613 L4.00765946,3.12415007 L3.06906871,2.18377143 C2.82523777,1.93947602 2.42906937,1.93863765 2.18420182,2.18189887 C1.93933427,2.42516008 1.93849394,2.82040282 2.18232488,3.06469822 L3.12544091,4.00961077 L2.20275024,4.93569234 C1.95913552,5.18020236 1.96032551,5.5754442 2.20540817,5.81848971 C2.45049083,6.06153521 2.84665833,6.060348 3.09027306,5.81583799 L4.00844245,4.89429431 L4.9092123,5.79678001 C5.15304324,6.04107541 5.54921164,6.04191379 5.79407919,5.79865257 C6.03894674,5.55539135 6.03978708,5.16014862 5.79595614,4.91585321 L4.890661,4.0088336 Z"
 }));
 var LockedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {

package/dist/cjs/Text.js

@@ -1,29 +1,28 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-var getStyles = function getStyles(isSecondary, shouldTruncate) {
-  return (0, _react.css)(_objectSpread(_objectSpread({
-    display: 'block',
-    margin: "var(--ds-space-0, 0px)",
-    color: "var(--ds-text, ".concat(_colors.N900, ")")
-  }, shouldTruncate && {
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }), isSecondary && {
-    color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-    fontSize: '0.85em'
-  }));
-};
+/** @jsx jsx */
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+
+var baseStyles = (0, _react.css)({
+  display: 'block',
+  margin: "var(--ds-space-0, 0px)",
+  color: "var(--ds-text, ".concat(_colors.N900, ")")
+});
+var truncateStyles = (0, _react.css)({
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var secondaryStyles = (0, _react.css)({
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  fontSize: '0.85em'
+});
 
 /**
  * __Text__
@@ -34,13 +33,9 @@ var Text = function Text(_ref) {
   var isSecondary = _ref.isSecondary,
     children = _ref.children,
     shouldTruncate = _ref.shouldTruncate;
-  return (
-    // TODO: Refactor styles to follow css prop rules
-    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _react.jsx)("span", {
-      css: getStyles(isSecondary, shouldTruncate)
-    }, children)
-  );
+  return (0, _react.jsx)("span", {
+    css: [baseStyles, isSecondary && secondaryStyles, shouldTruncate && truncateStyles]
+  }, children);
 };
 var _default = Text;
 exports.default = _default;

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ICON_SIZES = exports.ICON_OFFSET = exports.BORDER_WIDTH = exports.AVATAR_SIZES = exports.AVATAR_RADIUS = exports.ACTIVE_SCALE_FACTOR = void 0;
+exports.ICON_SIZES = exports.ICON_OFFSET = exports.CSS_VAR_AVATAR_BGCOLOR = exports.BORDER_WIDTH = exports.AVATAR_SIZES = exports.AVATAR_RADIUS = exports.ACTIVE_SCALE_FACTOR = void 0;
 var _constants = require("@atlaskit/theme/constants");
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match, @atlaskit/design-system/no-deprecated-imports
 
@@ -31,6 +31,8 @@ var BORDER_WIDTH = 2;
 exports.BORDER_WIDTH = BORDER_WIDTH;
 var ACTIVE_SCALE_FACTOR = 0.9;
 exports.ACTIVE_SCALE_FACTOR = ACTIVE_SCALE_FACTOR;
+var CSS_VAR_AVATAR_BGCOLOR = '--avatar-background-color';
+exports.CSS_VAR_AVATAR_BGCOLOR = CSS_VAR_AVATAR_BGCOLOR;
 var ICON_SIZES = {
   small: 12,
   medium: 14,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.3.2",
+	"version": "21.3.4",
 	"sideEffects": false
 }

package/dist/es2019/Avatar.js

@@ -10,7 +10,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.3.2";
+const packageVersion = "21.3.4";
 
 // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
 

package/dist/es2019/AvatarImage.js

@@ -4,9 +4,9 @@ import { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import PersonIcon from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
-import { background, N90 } from '@atlaskit/theme/colors';
+import { N0, N90 } from '@atlaskit/theme/colors';
 import { AVATAR_RADIUS, AVATAR_SIZES } from './constants';
-export const ICON_BACKGROUND = `var(--ds-icon-inverse, ${background()})`;
+export const ICON_BACKGROUND = `var(--ds-icon-inverse, ${N0})`;
 export const ICON_COLOR = `var(--ds-icon-subtle, ${N90})`;
 const avatarDefaultIconStyles = css({
   display: 'block',
@@ -14,12 +14,25 @@ const avatarDefaultIconStyles = css({
   height: '100%',
   backgroundColor: ICON_COLOR
 });
+const nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce((styles, [key, size]) => {
+  return {
+    ...styles,
+    [key]: css({
+      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+      '& svg': {
+        width: `${size}px`,
+        height: `${size}px`
+      }
+    })
+  };
+}, {});
 const avatarImageStyles = css({
   display: 'flex',
   width: '100%',
   height: '100%',
   flex: '1 1 100%'
 });
+
 /**
  * __Avatar image__
  *
@@ -41,15 +54,7 @@ const AvatarImage = ({
   }, [src]);
   if (!src || hasImageErrored) {
     return jsx("span", {
-      css: [avatarDefaultIconStyles,
-      // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      {
-        '& svg': {
-          width: `${AVATAR_SIZES[size]}px`,
-          height: `${AVATAR_SIZES[size]}px`
-        }
-      }]
+      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
     }, appearance === 'circle' ? jsx(PersonIcon, {
       label: alt,
       primaryColor: ICON_BACKGROUND,

package/dist/es2019/AvatarItem.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { createElement, forwardRef, Fragment } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
-import { B200, backgroundActive, backgroundHover } from '@atlaskit/theme/colors';
+import { B200, B50, N30 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { BORDER_WIDTH } from './constants';
 import Text from './Text';
@@ -42,7 +42,7 @@ css`
 
     ${isInteractive && `
         :hover {
-          background-color: ${`var(--ds-background-neutral-subtle-hovered, ${backgroundHover()})`};
+          background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
           cursor: pointer;
           text-decoration: none;
         }
@@ -53,7 +53,7 @@ css`
         }
 
         :active {
-          background-color: ${`var(--ds-background-neutral-subtle-pressed, ${backgroundActive()})`};
+          background-color: ${`var(--ds-background-neutral-subtle-pressed, ${B50})`};
         }
       `}
 

package/dist/es2019/IconWrapper.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
 import { css, jsx } from '@emotion/react';
-import { background } from '@atlaskit/theme/colors';
+import { N0 } from '@atlaskit/theme/colors';
 import { BORDER_WIDTH } from './constants';
 const iconWrapperStyles = css({
   display: 'flex',
@@ -21,7 +21,7 @@ const iconWrapperStyles = css({
  * An icon wrapper is used internally only.
  */
 const IconWrapper = ({
-  bgColor = `var(--ds-surface-overlay, ${background()})`,
+  bgColor = `var(--ds-surface-overlay, ${N0})`,
   children,
   label
 }) => jsx("span", {

package/dist/es2019/Presence.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { Fragment } from 'react';
-import { background, G300, N200, N40, purple, R300 } from '@atlaskit/theme/colors';
+import { G300, N0, N200, N40, P300, R300 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 
@@ -12,11 +12,11 @@ const BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: `var(--ds-surface-overlay, ${background()})`,
+  fill: `var(--ds-surface-overlay, ${N0})`,
   d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
 }));
 const FocusIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {
-  fill: `var(--ds-icon-discovery, ${purple()})`,
+  fill: `var(--ds-icon-discovery, ${P300})`,
   d: "M4,8 C1.790861,8 0,6.209139 0,4 C0,1.790861 1.790861,0 4,0 C6.209139,0 8,1.790861 8,4 C8,6.209139 6.209139,8 4,8 Z M4,6.66666667 C5.47275933,6.66666667 6.66666667,5.47275933 6.66666667,4 C6.66666667,2.52724067 5.47275933,1.33333333 4,1.33333333 C2.52724067,1.33333333 1.33333333,2.52724067 1.33333333,4 C1.33333333,5.47275933 2.52724067,6.66666667 4,6.66666667 Z M4,5.33333333 C3.26362033,5.33333333 2.66666667,4.73637967 2.66666667,4 C2.66666667,3.26362033 3.26362033,2.66666667 4,2.66666667 C4.73637967,2.66666667 5.33333333,3.26362033 5.33333333,4 C5.33333333,4.73637967 4.73637967,5.33333333 4,5.33333333 Z"
 }));
 const OfflineIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {

package/dist/es2019/Skeleton.js

@@ -2,20 +2,39 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 
 import { css, jsx } from '@emotion/react';
-import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
-const getStyles = ({
-  size = 'medium',
-  appearance = 'circle',
-  color = 'currentColor',
-  weight = 'normal'
-}) => css({
+import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH, CSS_VAR_AVATAR_BGCOLOR } from './constants';
+const skeletonStyles = css({
   display: 'inline-block',
-  width: `${AVATAR_SIZES[size]}px`,
-  height: `${AVATAR_SIZES[size]}px`,
-  backgroundColor: color,
-  border: `${BORDER_WIDTH}px solid transparent`,
-  borderRadius: `${appearance === 'square' ? `${AVATAR_RADIUS[size]}px` : '50%'}`,
-  opacity: `${weight === 'strong' ? 0.3 : 0.15}`
+  backgroundColor: `var(${CSS_VAR_AVATAR_BGCOLOR})`,
+  border: `${BORDER_WIDTH}px solid transparent`
+});
+const sizeStyles = Object.entries(AVATAR_SIZES).reduce((styles, [key, size]) => {
+  return {
+    ...styles,
+    [key]: css({
+      width: `${size}px`,
+      height: `${size}px`
+    })
+  };
+}, {});
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const radiusStyles = Object.entries(AVATAR_RADIUS).reduce((styles, [key, size]) => {
+  return {
+    ...styles,
+    [key]: css({
+      borderRadius: `${size}px`
+    })
+  };
+}, {});
+const defaultRadiusStyles = css({
+  borderRadius: '50%'
+});
+const strongOpacityStyles = css({
+  opacity: 0.3
+});
+const defaultOpacityStyles = css({
+  opacity: 0.15
 });
 
 /**
@@ -32,13 +51,9 @@ const Skeleton = ({
   color,
   weight
 }) => jsx("div", {
-  // TODO: Refactor styles to follow css prop rules
-  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-  css: getStyles({
-    size,
-    appearance,
-    color,
-    weight
-  })
+  css: [skeletonStyles, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' ? radiusStyles[size !== null && size !== void 0 ? size : 'medium'] : defaultRadiusStyles, weight === 'strong' ? strongOpacityStyles : defaultOpacityStyles],
+  style: {
+    [CSS_VAR_AVATAR_BGCOLOR]: color !== null && color !== void 0 ? color : 'currentColor'
+  }
 });
 export default Skeleton;

package/dist/es2019/Status.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { Fragment } from 'react';
-import { background, G400, N40, N500, R400 } from '@atlaskit/theme/colors';
+import { G400, N0, N40, N500, R400 } from '@atlaskit/theme/colors';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 
@@ -12,7 +12,7 @@ const ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: `var(--ds-surface-overlay, ${background()})`,
+  fill: `var(--ds-surface-overlay, ${N0})`,
   d: "M2.47140452,3.52859548 C2.21105499,3.26824595 1.78894501,3.26824595 1.52859548,3.52859548 C1.26824595,3.78894501 1.26824595,4.21105499 1.52859548,4.47140452 L2.86192881,5.80473785 C3.12227834,6.06508738 3.54438833,6.06508738 3.80473785,5.80473785 L6.47140452,3.13807119 C6.73175405,2.87772166 6.73175405,2.45561167 6.47140452,2.19526215 C6.21105499,1.93491262 5.78894501,1.93491262 5.52859548,2.19526215 L3.33333333,4.39052429 L2.47140452,3.52859548 Z"
 }));
 const DeclinedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
@@ -21,7 +21,7 @@ const DeclinedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: `var(--ds-surface-overlay, ${background()})`,
+  fill: `var(--ds-surface-overlay, ${N0})`,
   d: "M4.890661,4.0088336 L5.81806461,3.07802178 C6.06167933,2.83351177 6.06048933,2.43826992 5.81540668,2.19522442 C5.57032402,1.95217891 5.17415651,1.95336612 4.93054179,2.19787613 L4.00765946,3.12415007 L3.06906871,2.18377143 C2.82523777,1.93947602 2.42906937,1.93863765 2.18420182,2.18189887 C1.93933427,2.42516008 1.93849394,2.82040282 2.18232488,3.06469822 L3.12544091,4.00961077 L2.20275024,4.93569234 C1.95913552,5.18020236 1.96032551,5.5754442 2.20540817,5.81848971 C2.45049083,6.06153521 2.84665833,6.060348 3.09027306,5.81583799 L4.00844245,4.89429431 L4.9092123,5.79678001 C5.15304324,6.04107541 5.54921164,6.04191379 5.79407919,5.79865257 C6.03894674,5.55539135 6.03978708,5.16014862 5.79595614,4.91585321 L4.890661,4.0088336 Z"
 }));
 const LockedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {