@atlaskit/avatar 20.4.1 → 20.5.2

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/avatar
 
+## 20.5.2
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 20.5.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 20.5.0
+
+### Minor Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] Fix avatar focus ring in windows high contrast mode
+
+### Patch Changes
+
+- Updated dependencies
+
+## 20.4.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 20.4.1
 
 ### Patch Changes

package/dist/cjs/Avatar.js

@@ -21,8 +21,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _AvatarImage = _interopRequireDefault(require("./AvatarImage"));
 
 var _constants = require("./constants");
@@ -40,19 +38,19 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var packageName = "@atlaskit/avatar";
-var packageVersion = "20.4.1";
+var packageVersion = "20.5.2";
 
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,
       radius = _ref.radius,
       appearance = _ref.appearance,
       _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? (0, _tokens.token)('color.background.overlay', _colors.N0) : _ref$borderColor,
+      borderColor = _ref$borderColor === void 0 ? "var(--ds-background-overlay, ".concat(_colors.N0, ")") : _ref$borderColor,
       stackIndex = _ref.stackIndex,
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ").concat((0, _tokens.token)('color.border.focus', _colors.B300), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ").concat((0, _tokens.token)('color.overlay.hover', _colors.N70A), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ").concat((0, _tokens.token)('color.overlay.pressed', _colors.N70A), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: 0.7;\n          pointer-events: none;\n          background-color: ".concat((0, _tokens.token)('color.background.default', _colors.N0), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ").concat("var(--ds-border-focus, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ").concat("var(--ds-overlay-hover, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ").concat("var(--ds-overlay-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: 0.7;\n          pointer-events: none;\n          background-color: ".concat("var(--ds-background-default, ".concat(_colors.N0, ")"), ";\n        }\n      "))
   );
 };
 /**

package/dist/cjs/AvatarImage.js

@@ -19,15 +19,13 @@ var _ship = _interopRequireDefault(require("@atlaskit/icon/glyph/ship"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("./constants");
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-var ICON_BACKGROUND = (0, _tokens.token)('color.text.onBold', (0, _colors.background)());
+var ICON_BACKGROUND = "var(--ds-text-onBold, ".concat((0, _colors.background)(), ")");
 exports.ICON_BACKGROUND = ICON_BACKGROUND;
-var ICON_COLOR = (0, _tokens.token)('color.text.lowEmphasis', _colors.N90);
+var ICON_COLOR = "var(--ds-text-lowEmphasis, ".concat(_colors.N90, ")");
 exports.ICON_COLOR = ICON_COLOR;
 var avatarImageStyles = (0, _core.css)({
   display: 'block',

package/dist/cjs/AvatarItem.js

@@ -19,8 +19,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants2 = require("./constants");
 
 var _Text = _interopRequireDefault(require("./Text"));
@@ -46,7 +44,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @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: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, (0, _constants.gridSize)() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat((0, _tokens.token)('color.background.transparentNeutral.hover', (0, _colors.backgroundHover)()), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ").concat((0, _tokens.token)('color.border.focus', _colors.B200), ";\n        }\n\n        :active {\n          background-color: ").concat((0, _tokens.token)('color.background.transparentNeutral.pressed', (0, _colors.backgroundActive)()), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: 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: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, (0, _constants.gridSize)() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-transparentNeutral-hover, ".concat((0, _colors.backgroundHover)(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ").concat("var(--ds-border-focus, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ").concat("var(--ds-background-transparentNeutral-pressed, ".concat((0, _colors.backgroundActive)(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: 0.5;\n        pointer-events: none;\n      ")
   );
 };
 /**

package/dist/cjs/IconWrapper.js

@@ -9,8 +9,6 @@ var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("./constants");
 
 /** @jsx jsx */
@@ -33,7 +31,7 @@ var iconWrapperStyles = (0, _core.css)({
 
 var IconWrapper = function IconWrapper(_ref) {
   var _ref$bgColor = _ref.bgColor,
-      bgColor = _ref$bgColor === void 0 ? (0, _tokens.token)('color.background.overlay', (0, _colors.background)()) : _ref$bgColor,
+      bgColor = _ref$bgColor === void 0 ? "var(--ds-background-overlay, ".concat((0, _colors.background)(), ")") : _ref$bgColor,
       children = _ref.children;
   return (0, _core.jsx)("span", {
     css: iconWrapperStyles,

package/dist/cjs/Presence.js

@@ -13,8 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("./constants");
 
 var _IconWrapper = _interopRequireDefault(require("./IconWrapper"));
@@ -25,30 +23,30 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 var BusyIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
-  fill: (0, _tokens.token)('color.iconBorder.danger', _colors.R300),
+  fill: "var(--ds-iconBorder-danger, ".concat(_colors.R300, ")"),
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/_react.default.createElement("path", {
-  fill: (0, _tokens.token)('color.background.overlay', (0, _colors.background)()),
+  fill: "var(--ds-background-overlay, ".concat((0, _colors.background)(), ")"),
   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: (0, _tokens.token)('color.iconBorder.discovery', (0, _colors.purple)()),
+  fill: "var(--ds-iconBorder-discovery, ".concat((0, _colors.purple)(), ")"),
   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", {
-  fill: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+  fill: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")"),
   d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
 }), /*#__PURE__*/_react.default.createElement("path", {
-  fill: (0, _tokens.token)('color.background.overlay', _colors.N40),
+  fill: "var(--ds-background-overlay, ".concat(_colors.N40, ")"),
   d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
 }));
 
 var OnlineIndicator = /*#__PURE__*/_react.default.createElement("circle", {
-  fill: (0, _tokens.token)('color.iconBorder.success', _colors.G300),
+  fill: "var(--ds-iconBorder-success, ".concat(_colors.G300, ")"),
   cx: "4",
   cy: "4",
   r: "4"

package/dist/cjs/Status.js

@@ -13,8 +13,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("./constants");
 
 var _IconWrapper = _interopRequireDefault(require("./IconWrapper"));
@@ -25,32 +23,32 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 var ApprovedIndicator = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("circle", {
-  fill: (0, _tokens.token)('color.iconBorder.success', _colors.G400),
+  fill: "var(--ds-iconBorder-success, ".concat(_colors.G400, ")"),
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/_react.default.createElement("path", {
-  fill: (0, _tokens.token)('color.background.overlay', (0, _colors.background)()),
+  fill: "var(--ds-background-overlay, ".concat((0, _colors.background)(), ")"),
   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", {
-  fill: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
+  fill: "var(--ds-iconBorder-danger, ".concat(_colors.R400, ")"),
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/_react.default.createElement("path", {
-  fill: (0, _tokens.token)('color.background.overlay', (0, _colors.background)()),
+  fill: "var(--ds-background-overlay, ".concat((0, _colors.background)(), ")"),
   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", {
-  fill: (0, _tokens.token)('color.text.lowEmphasis', _colors.N40),
+  fill: "var(--ds-text-lowEmphasis, ".concat(_colors.N40, ")"),
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/_react.default.createElement("path", {
-  fill: (0, _tokens.token)('color.background.overlay', _colors.N500),
+  fill: "var(--ds-background-overlay, ".concat(_colors.N500, ")"),
   d: "M4.13074827,1.21766493 L4.10368158,1.21766493 C3.36340745,1.21766493 2.76388015,1.80793503 2.76388015,2.5367787 L2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,2.54344089 C3.44054754,2.17901906 3.74031119,1.88388401 4.11044825,1.88388401 L4.1239816,1.88388401 C4.49411866,1.88388401 4.79388232,2.17901906 4.79388232,2.54344089 L4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,2.5367787 C5.47054971,1.80793503 4.8710224,1.21766493 4.13074827,1.21766493 M2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,3.88254123 L2.76388015,3.88254123 L2.76388015,3.21632216 Z M4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,3.88254123 L4.79388232,3.88254123 L4.79388232,3.21632216 Z M4.79401765,3.88254123 L3.44068287,3.88254123 L2.76401548,3.88254123 C2.39049508,3.88254123 2.08734809,4.18100738 2.08734809,4.54876031 L2.08734809,5.54808892 C2.08734809,6.10000287 2.53735205,6.54741753 3.09094491,6.54741753 L5.14375561,6.54741753 C5.69802683,6.54741753 6.14735243,6.10385072 6.14735243,5.54808892 L6.14735243,4.54876031 C6.14735243,4.18100738 5.84420544,3.88254123 5.47068504,3.88254123 L4.79401765,3.88254123 Z"
 }));
 

package/dist/cjs/Text.js

@@ -13,8 +13,6 @@ var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -23,13 +21,13 @@ var getStyles = function getStyles(isSecondary, shouldTruncate) {
   return _objectSpread(_objectSpread({
     display: 'block',
     margin: 0,
-    color: (0, _tokens.token)('color.text.highEmphasis', _colors.N900)
+    color: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")")
   }, shouldTruncate && {
     overflowX: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
   }), isSecondary && {
-    color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+    color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")"),
     fontSize: '0.85em'
   });
 };

package/dist/cjs/version.json

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

package/dist/es2019/Avatar.js

@@ -4,20 +4,19 @@ import { createElement, forwardRef, useCallback, useEffect, useRef } from 'react
 import { ClassNames, jsx } from '@emotion/core';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import AvatarImage from './AvatarImage';
 import { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
 import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "20.4.1";
+const packageVersion = "20.5.2";
 
 const getStyles = (css, {
   size,
   radius,
   appearance,
-  borderColor = token('color.background.overlay', N0),
+  borderColor = `var(--ds-background-overlay, ${N0})`,
   stackIndex,
   isInteractive,
   isDisabled
@@ -77,19 +76,19 @@ css`
 
       :focus {
         outline: none;
-        box-shadow: 0 0 0 ${BORDER_WIDTH}px ${token('color.border.focus', B300)}
+        box-shadow: 0 0 0 ${BORDER_WIDTH}px ${`var(--ds-border-focus, ${B300})`}
       }
 
       :hover {
         &::after {
-          background-color: ${token('color.overlay.hover', N70A)};
+          background-color: ${`var(--ds-overlay-hover, ${N70A})`};
           opacity: 1;
         }
       }
 
       :active {
         &::after {
-          background-color: ${token('color.overlay.pressed', N70A)};
+          background-color: ${`var(--ds-overlay-pressed, ${N70A})`};
           opacity: 1;
         }
       }
@@ -97,6 +96,12 @@ css`
       :active {
         transform: scale(${ACTIVE_SCALE_FACTOR});
       }
+
+      @media screen and (forced-colors: active) {
+        &:focus-visible {
+          outline: 1px solid
+        }
+      }
     `}
 
     ${isDisabled && `
@@ -105,7 +110,7 @@ css`
         &::after {
           opacity: 0.7;
           pointer-events: none;
-          background-color: ${token('color.background.default', N0)};
+          background-color: ${`var(--ds-background-default, ${N0})`};
         }
       `}
   `;

package/dist/es2019/AvatarImage.js

@@ -5,10 +5,9 @@ import { css, jsx } from '@emotion/core';
 import PersonIcon from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
 import { background, N90 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { AVATAR_RADIUS, AVATAR_SIZES } from './constants';
-export const ICON_BACKGROUND = token('color.text.onBold', background());
-export const ICON_COLOR = token('color.text.lowEmphasis', N90);
+export const ICON_BACKGROUND = `var(--ds-text-onBold, ${background()})`;
+export const ICON_COLOR = `var(--ds-text-lowEmphasis, ${N90})`;
 const avatarImageStyles = css({
   display: 'block',
   width: '100%',

package/dist/es2019/AvatarItem.js

@@ -4,7 +4,6 @@ import { createElement, forwardRef, Fragment } from 'react';
 import { ClassNames, css, jsx } from '@emotion/core';
 import { B200, backgroundActive, backgroundHover } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { BORDER_WIDTH } from './constants';
 import Text from './Text';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
@@ -42,18 +41,18 @@ css`
 
     ${isInteractive && `
         :hover {
-          background-color: ${token('color.background.transparentNeutral.hover', backgroundHover())};
+          background-color: ${`var(--ds-background-transparentNeutral-hover, ${backgroundHover()})`};
           cursor: pointer;
           text-decoration: none;
         }
 
         :focus {
           outline: none;
-          border-color: ${token('color.border.focus', B200)};
+          border-color: ${`var(--ds-border-focus, ${B200})`};
         }
 
         :active {
-          background-color: ${token('color.background.transparentNeutral.pressed', backgroundActive())};
+          background-color: ${`var(--ds-background-transparentNeutral-pressed, ${backgroundActive()})`};
         }
       `}
 

package/dist/es2019/IconWrapper.js

@@ -2,7 +2,6 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { css, jsx } from '@emotion/core';
 import { background } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { BORDER_WIDTH } from './constants';
 const iconWrapperStyles = css({
   display: 'flex',
@@ -21,7 +20,7 @@ const iconWrapperStyles = css({
  */
 
 const IconWrapper = ({
-  bgColor = token('color.background.overlay', background()),
+  bgColor = `var(--ds-background-overlay, ${background()})`,
   children
 }) => jsx("span", {
   css: iconWrapperStyles,

package/dist/es2019/Presence.js

@@ -1,31 +1,30 @@
 // 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 { token } from '@atlaskit/tokens';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 const BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
-  fill: token('color.iconBorder.danger', R300),
+  fill: `var(--ds-iconBorder-danger, ${R300})`,
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: token('color.background.overlay', background()),
+  fill: `var(--ds-background-overlay, ${background()})`,
   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: token('color.iconBorder.discovery', purple()),
+  fill: `var(--ds-iconBorder-discovery, ${purple()})`,
   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", {
-  fill: token('color.text.lowEmphasis', N200),
+  fill: `var(--ds-text-lowEmphasis, ${N200})`,
   d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: token('color.background.overlay', N40),
+  fill: `var(--ds-background-overlay, ${N40})`,
   d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
 }));
 const OnlineIndicator = /*#__PURE__*/React.createElement("circle", {
-  fill: token('color.iconBorder.success', G300),
+  fill: `var(--ds-iconBorder-success, ${G300})`,
   cx: "4",
   cy: "4",
   r: "4"

package/dist/es2019/Status.js

@@ -1,34 +1,33 @@
 // 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 { token } from '@atlaskit/tokens';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 const ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
-  fill: token('color.iconBorder.success', G400),
+  fill: `var(--ds-iconBorder-success, ${G400})`,
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: token('color.background.overlay', background()),
+  fill: `var(--ds-background-overlay, ${background()})`,
   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", {
-  fill: token('color.iconBorder.danger', R400),
+  fill: `var(--ds-iconBorder-danger, ${R400})`,
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: token('color.background.overlay', background()),
+  fill: `var(--ds-background-overlay, ${background()})`,
   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", {
-  fill: token('color.text.lowEmphasis', N40),
+  fill: `var(--ds-text-lowEmphasis, ${N40})`,
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: token('color.background.overlay', N500),
+  fill: `var(--ds-background-overlay, ${N500})`,
   d: "M4.13074827,1.21766493 L4.10368158,1.21766493 C3.36340745,1.21766493 2.76388015,1.80793503 2.76388015,2.5367787 L2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,2.54344089 C3.44054754,2.17901906 3.74031119,1.88388401 4.11044825,1.88388401 L4.1239816,1.88388401 C4.49411866,1.88388401 4.79388232,2.17901906 4.79388232,2.54344089 L4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,2.5367787 C5.47054971,1.80793503 4.8710224,1.21766493 4.13074827,1.21766493 M2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,3.88254123 L2.76388015,3.88254123 L2.76388015,3.21632216 Z M4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,3.88254123 L4.79388232,3.88254123 L4.79388232,3.21632216 Z M4.79401765,3.88254123 L3.44068287,3.88254123 L2.76401548,3.88254123 C2.39049508,3.88254123 2.08734809,4.18100738 2.08734809,4.54876031 L2.08734809,5.54808892 C2.08734809,6.10000287 2.53735205,6.54741753 3.09094491,6.54741753 L5.14375561,6.54741753 C5.69802683,6.54741753 6.14735243,6.10385072 6.14735243,5.54808892 L6.14735243,4.54876031 C6.14735243,4.18100738 5.84420544,3.88254123 5.47068504,3.88254123 L4.79401765,3.88254123 Z"
 }));
 

package/dist/es2019/Text.js

@@ -2,19 +2,18 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { jsx } from '@emotion/core';
 import { N200, N900 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 
 const getStyles = (isSecondary, shouldTruncate) => ({
   display: 'block',
   margin: 0,
-  color: token('color.text.highEmphasis', N900),
+  color: `var(--ds-text-highEmphasis, ${N900})`,
   ...(shouldTruncate && {
     overflowX: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
   }),
   ...(isSecondary && {
-    color: token('color.text.lowEmphasis', N200),
+    color: `var(--ds-text-lowEmphasis, ${N200})`,
     fontSize: '0.85em'
   })
 });

package/dist/es2019/version.json

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

package/dist/esm/Avatar.js

@@ -14,26 +14,25 @@ import { createElement, forwardRef, useCallback, useEffect, useRef } from 'react
 import { ClassNames, jsx } from '@emotion/core';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import AvatarImage from './AvatarImage';
 import { ACTIVE_SCALE_FACTOR, AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
 import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "20.4.1";
+var packageVersion = "20.5.2";
 
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,
       radius = _ref.radius,
       appearance = _ref.appearance,
       _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? token('color.background.overlay', N0) : _ref$borderColor,
+      borderColor = _ref$borderColor === void 0 ? "var(--ds-background-overlay, ".concat(N0, ")") : _ref$borderColor,
       stackIndex = _ref.stackIndex,
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ").concat(token('color.border.focus', B300), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ").concat(token('color.overlay.hover', N70A), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ").concat(token('color.overlay.pressed', N70A), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: 0.7;\n          pointer-events: none;\n          background-color: ".concat(token('color.background.default', N0), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ").concat("var(--ds-border-focus, ".concat(B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ").concat("var(--ds-overlay-hover, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ").concat("var(--ds-overlay-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: 0.7;\n          pointer-events: none;\n          background-color: ".concat("var(--ds-background-default, ".concat(N0, ")"), ";\n        }\n      "))
   );
 };
 /**

package/dist/esm/AvatarImage.js

@@ -7,10 +7,9 @@ import { css, jsx } from '@emotion/core';
 import PersonIcon from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
 import { background, N90 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { AVATAR_RADIUS, AVATAR_SIZES } from './constants';
-export var ICON_BACKGROUND = token('color.text.onBold', background());
-export var ICON_COLOR = token('color.text.lowEmphasis', N90);
+export var ICON_BACKGROUND = "var(--ds-text-onBold, ".concat(background(), ")");
+export var ICON_COLOR = "var(--ds-text-lowEmphasis, ".concat(N90, ")");
 var avatarImageStyles = css({
   display: 'block',
   width: '100%',

package/dist/esm/AvatarItem.js

@@ -13,7 +13,6 @@ import { createElement, forwardRef, Fragment } from 'react';
 import { ClassNames, css, jsx } from '@emotion/core';
 import { B200, backgroundActive, backgroundHover } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import { BORDER_WIDTH } from './constants';
 import Text from './Text';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
@@ -30,7 +29,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, gridSize() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat(token('color.background.transparentNeutral.hover', backgroundHover()), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ").concat(token('color.border.focus', B200), ";\n        }\n\n        :active {\n          background-color: ").concat(token('color.background.transparentNeutral.pressed', backgroundActive()), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: 0.5;\n        pointer-events: none;\n      ")
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, gridSize() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-transparentNeutral-hover, ".concat(backgroundHover(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ").concat("var(--ds-border-focus, ".concat(B200, ")"), ";\n        }\n\n        :active {\n          background-color: ").concat("var(--ds-background-transparentNeutral-pressed, ".concat(backgroundActive(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: 0.5;\n        pointer-events: none;\n      ")
   );
 };
 /**

package/dist/esm/IconWrapper.js

@@ -2,7 +2,6 @@
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { css, jsx } from '@emotion/core';
 import { background } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { BORDER_WIDTH } from './constants';
 var iconWrapperStyles = css({
   display: 'flex',
@@ -22,7 +21,7 @@ var iconWrapperStyles = css({
 
 var IconWrapper = function IconWrapper(_ref) {
   var _ref$bgColor = _ref.bgColor,
-      bgColor = _ref$bgColor === void 0 ? token('color.background.overlay', background()) : _ref$bgColor,
+      bgColor = _ref$bgColor === void 0 ? "var(--ds-background-overlay, ".concat(background(), ")") : _ref$bgColor,
       children = _ref.children;
   return jsx("span", {
     css: iconWrapperStyles,

package/dist/esm/Presence.js

@@ -1,31 +1,30 @@
 // 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 { token } from '@atlaskit/tokens';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 var BusyIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
-  fill: token('color.iconBorder.danger', R300),
+  fill: "var(--ds-iconBorder-danger, ".concat(R300, ")"),
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: token('color.background.overlay', background()),
+  fill: "var(--ds-background-overlay, ".concat(background(), ")"),
   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.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {
-  fill: token('color.iconBorder.discovery', purple()),
+  fill: "var(--ds-iconBorder-discovery, ".concat(purple(), ")"),
   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.createElement(Fragment, null, /*#__PURE__*/React.createElement("path", {
-  fill: token('color.text.lowEmphasis', N200),
+  fill: "var(--ds-text-lowEmphasis, ".concat(N200, ")"),
   d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: token('color.background.overlay', N40),
+  fill: "var(--ds-background-overlay, ".concat(N40, ")"),
   d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
 }));
 var OnlineIndicator = /*#__PURE__*/React.createElement("circle", {
-  fill: token('color.iconBorder.success', G300),
+  fill: "var(--ds-iconBorder-success, ".concat(G300, ")"),
   cx: "4",
   cy: "4",
   r: "4"

package/dist/esm/Status.js

@@ -1,34 +1,33 @@
 // 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 { token } from '@atlaskit/tokens';
 import { ICON_OFFSET, ICON_SIZES } from './constants';
 import IconWrapper from './IconWrapper';
 var ApprovedIndicator = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
-  fill: token('color.iconBorder.success', G400),
+  fill: "var(--ds-iconBorder-success, ".concat(G400, ")"),
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: token('color.background.overlay', background()),
+  fill: "var(--ds-background-overlay, ".concat(background(), ")"),
   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.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
-  fill: token('color.iconBorder.danger', R400),
+  fill: "var(--ds-iconBorder-danger, ".concat(R400, ")"),
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: token('color.background.overlay', background()),
+  fill: "var(--ds-background-overlay, ".concat(background(), ")"),
   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.createElement(Fragment, null, /*#__PURE__*/React.createElement("circle", {
-  fill: token('color.text.lowEmphasis', N40),
+  fill: "var(--ds-text-lowEmphasis, ".concat(N40, ")"),
   cx: "4",
   cy: "4",
   r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  fill: token('color.background.overlay', N500),
+  fill: "var(--ds-background-overlay, ".concat(N500, ")"),
   d: "M4.13074827,1.21766493 L4.10368158,1.21766493 C3.36340745,1.21766493 2.76388015,1.80793503 2.76388015,2.5367787 L2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,2.54344089 C3.44054754,2.17901906 3.74031119,1.88388401 4.11044825,1.88388401 L4.1239816,1.88388401 C4.49411866,1.88388401 4.79388232,2.17901906 4.79388232,2.54344089 L4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,2.5367787 C5.47054971,1.80793503 4.8710224,1.21766493 4.13074827,1.21766493 M2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,3.88254123 L2.76388015,3.88254123 L2.76388015,3.21632216 Z M4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,3.88254123 L4.79388232,3.88254123 L4.79388232,3.21632216 Z M4.79401765,3.88254123 L3.44068287,3.88254123 L2.76401548,3.88254123 C2.39049508,3.88254123 2.08734809,4.18100738 2.08734809,4.54876031 L2.08734809,5.54808892 C2.08734809,6.10000287 2.53735205,6.54741753 3.09094491,6.54741753 L5.14375561,6.54741753 C5.69802683,6.54741753 6.14735243,6.10385072 6.14735243,5.54808892 L6.14735243,4.54876031 C6.14735243,4.18100738 5.84420544,3.88254123 5.47068504,3.88254123 L4.79401765,3.88254123 Z"
 }));
 

package/dist/esm/Text.js

@@ -8,19 +8,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { jsx } from '@emotion/core';
 import { N200, N900 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 
 var getStyles = function getStyles(isSecondary, shouldTruncate) {
   return _objectSpread(_objectSpread({
     display: 'block',
     margin: 0,
-    color: token('color.text.highEmphasis', N900)
+    color: "var(--ds-text-highEmphasis, ".concat(N900, ")")
   }, shouldTruncate && {
     overflowX: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
   }), isSecondary && {
-    color: token('color.text.lowEmphasis', N200),
+    color: "var(--ds-text-lowEmphasis, ".concat(N200, ")"),
     fontSize: '0.85em'
   });
 };

package/dist/esm/version.json

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

package/dist/types/AvatarImage.d.ts

@@ -8,8 +8,8 @@ interface AvatarImageProps {
     src?: string;
     testId?: string;
 }
-export declare const ICON_BACKGROUND: "var(--text-onBold)";
-export declare const ICON_COLOR: "var(--text-lowEmphasis)";
+export declare const ICON_BACKGROUND: "var(--ds-text-onBold)";
+export declare const ICON_COLOR: "var(--ds-text-lowEmphasis)";
 /**
  * __Avatar image__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "20.4.1",
+  "version": "20.5.2",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,9 +33,9 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/icon": "^21.8.0",
-    "@atlaskit/theme": "^11.5.0",
-    "@atlaskit/tokens": "^0.1.0",
+    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -47,11 +47,11 @@
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
     "@atlaskit/field-base": "^15.0.0",
-    "@atlaskit/icon": "^21.8.0",
+    "@atlaskit/icon": "^21.9.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.2.0",
-    "@atlaskit/tooltip": "^17.4.0",
+    "@atlaskit/toggle": "^12.3.0",
+    "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -78,7 +78,10 @@
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "deprecation": "no-deprecated-imports"
     }
   },