@atlaskit/smart-card 23.11.0 → 23.11.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 23.11.2
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
+## 23.11.1
+
+### Patch Changes
+
+- [`44f83adace3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/44f83adace3) - Add documentation for the standalone hover cards on atlaskit.
+
 ## 23.11.0
 
 ### Minor Changes

package/dist/cjs/extractors/common/detail/extractAttachmentCount.js

@@ -13,8 +13,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _attachment = _interopRequireDefault(require("@atlaskit/icon/glyph/attachment"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var extractAttachmentCount = function extractAttachmentCount(jsonLd) {
   var attachmentCount = jsonLd['atlassian:attachmentCount'];
 
@@ -24,7 +22,7 @@ var extractAttachmentCount = function extractAttachmentCount(jsonLd) {
       icon: /*#__PURE__*/_react.default.createElement(_attachment.default, {
         size: "small",
         label: "attachments",
-        primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N600)
+        primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N600, ")")
       })
     };
   }

package/dist/cjs/extractors/common/detail/extractCommentCount.js

@@ -11,8 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _comment = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
 
 var extractCommentCount = function extractCommentCount(jsonLd) {
@@ -25,7 +23,7 @@ var extractCommentCount = function extractCommentCount(jsonLd) {
         label: "comment-count",
         key: "comments-count-icon",
         size: "small",
-        primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N600)
+        primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N600, ")")
       })
     };
   }

package/dist/cjs/extractors/common/detail/extractProgrammingLanguage.js

@@ -13,8 +13,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _code = _interopRequireDefault(require("@atlaskit/icon/glyph/code"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var extractProgrammingLanguage = function extractProgrammingLanguage(jsonLd) {
   var programmingLanguage = jsonLd['schema:programmingLanguage'];
 
@@ -24,7 +22,7 @@ var extractProgrammingLanguage = function extractProgrammingLanguage(jsonLd) {
       icon: /*#__PURE__*/_react.default.createElement(_code.default, {
         size: "small",
         label: "code",
-        primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N600)
+        primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N600, ")")
       })
     };
   }

package/dist/cjs/extractors/common/detail/extractSubscriberCount.js

@@ -13,8 +13,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var extractSubscriberCount = function extractSubscriberCount(jsonLd) {
   var subscriberCount = jsonLd['atlassian:subscriberCount'];
 
@@ -24,7 +22,7 @@ var extractSubscriberCount = function extractSubscriberCount(jsonLd) {
       icon: /*#__PURE__*/_react.default.createElement(_people.default, {
         size: "small",
         label: "subscribers",
-        primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N600)
+        primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N600, ")")
       })
     };
   }

package/dist/cjs/extractors/common/primitives/extractTitleTextColor.js

@@ -9,8 +9,6 @@ var _priority = require("../icon/priority");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var extractTitleTextColor = function extractTitleTextColor(jsonLd) {
   var type = jsonLd['@type'];
 
@@ -21,7 +19,7 @@ var extractTitleTextColor = function extractTitleTextColor(jsonLd) {
 
     switch (highestPriorityType) {
       case 'atlassian:UndefinedLink':
-        return (0, _tokens.token)('color.text.danger', _colors.R500);
+        return "var(--ds-text-danger, ".concat(_colors.R500, ")");
 
       default:
         return undefined;

package/dist/cjs/utils/token.js

@@ -4,23 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tokens = void 0;
-
-var _tokens = require("@atlaskit/tokens");
-
 var tokens = {
-  actionIcon: (0, _tokens.token)('color.icon', '#44546F'),
-  background: (0, _tokens.token)('elevation.surface.raised', '#FFFFFF'),
-  badgeIcon: (0, _tokens.token)('color.icon.subtle', '#626F86'),
-  badgeText: (0, _tokens.token)('color.text.subtlest', '#626F86'),
-  blackLink: (0, _tokens.token)('color.text.subtle', '#44546F'),
-  blackLinkPressed: (0, _tokens.token)('color.text', '#172B4D'),
-  blueLink: (0, _tokens.token)('color.link', '#0C66E4'),
-  blueLinkPressed: (0, _tokens.token)('color.link.pressed', '#0055CC'),
-  elevation: (0, _tokens.token)('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
-  errorMessage: (0, _tokens.token)('color.text.disabled', '#6B778C'),
-  errorMessageHover: (0, _tokens.token)('color.text.subtle', '#8993A4'),
-  focus: (0, _tokens.token)('color.border.focused', '#388BFF'),
-  snippet: (0, _tokens.token)('color.text', '#172B4D'),
-  text: (0, _tokens.token)('color.text.subtlest', '#626F86')
+  actionIcon: "var(--ds-icon, #44546F)",
+  background: "var(--ds-surface-raised, #FFFFFF)",
+  badgeIcon: "var(--ds-icon-subtle, #626F86)",
+  badgeText: "var(--ds-text-subtlest, #626F86)",
+  blackLink: "var(--ds-text-subtle, #44546F)",
+  blackLinkPressed: "var(--ds-text, #172B4D)",
+  blueLink: "var(--ds-link, #0C66E4)",
+  blueLinkPressed: "var(--ds-link-pressed, #0055CC)",
+  elevation: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424F)",
+  errorMessage: "var(--ds-text-disabled, #6B778C)",
+  errorMessageHover: "var(--ds-text-subtle, #8993A4)",
+  focus: "var(--ds-border-focused, #388BFF)",
+  snippet: "var(--ds-text, #172B4D)",
+  text: "var(--ds-text-subtlest, #626F86)"
 };
 exports.tokens = tokens;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.11.0",
+	"version": "23.11.2",
 	"sideEffects": false
 }

package/dist/cjs/view/BlockCard/components/Frame.js

@@ -15,8 +15,6 @@ var _react2 = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _utils = require("../../common/utils");
 
 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; }
@@ -37,7 +35,7 @@ var sharedFrameStyles = {
   maxWidth: (0, _utils.gs)(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: (0, _tokens.token)('elevation.surface.raised', 'white')
+  backgroundColor: "var(--ds-surface-raised, white)"
 };
 
 var ExpandedFrame = function ExpandedFrame(_ref) {
@@ -51,15 +49,15 @@ var ExpandedFrame = function ExpandedFrame(_ref) {
     css: (0, _utils.mq)(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
       '&:hover': isHoverable ? {
         // TODO: https://product-fabric.atlassian.net/browse/DSP-4064
-        backgroundColor: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20A),
+        backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20A, ")"),
         cursor: 'pointer'
       } : undefined,
       minHeight: isFluidHeight ? 0 : [(0, _utils.gs)(21), (0, _utils.gs)(15)],
       borderRadius: isSelected ? (0, _utils.br)() : (0, _utils.br)(0.5),
-      border: "2px solid ".concat(isSelected ? (0, _tokens.token)('color.border.selected', _colors.B200) : 'transparent'),
+      border: "2px solid ".concat(isSelected ? "var(--ds-border-selected, ".concat(_colors.B200, ")") : 'transparent'),
       justifyContent: 'space-between',
       overflow: 'hidden',
-      boxShadow: (0, _tokens.token)('elevation.shadow.raised', "0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A))
+      boxShadow: "var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A), ")")
     })),
     "data-testid": testId,
     className: className,
@@ -79,14 +77,14 @@ var CompactFrame = function CompactFrame(_ref2) {
   return (0, _react.jsx)("div", {
     css: (0, _utils.mq)(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
       '&:hover': isHoverable ? {
-        backgroundColor: (0, _tokens.token)('color.background.neutral.hovered', _colors.N30A)
+        backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")")
       } : undefined,
       borderRadius: isSelected ? (0, _utils.br)() : (0, _utils.br)(0.5),
-      border: isSelected ? "2px solid ".concat((0, _tokens.token)('color.border.selected', _colors.B200)) : '',
+      border: isSelected ? "2px solid ".concat("var(--ds-border-selected, ".concat(_colors.B200, ")")) : '',
       justifyContent: 'center',
       alignItems: 'center',
       height: inheritDimensions ? '100%' : (0, _utils.gs)(5),
-      backgroundColor: (0, _tokens.token)('color.background.neutral', _colors.N20A),
+      backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
       width: ['calc(100% - 16px)', '100%'],
       padding: ["0px ".concat((0, _utils.gs)(1)), '0']
     })),

package/dist/cjs/view/BlockCard/components/Link.js

@@ -9,8 +9,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var Link = function Link(_ref) {
   var url = _ref.url,
@@ -21,7 +19,7 @@ var Link = function Link(_ref) {
     "data-testid": "".concat(testId, "-link"),
     className: className,
     css: {
-      color: (0, _tokens.token)('color.link', _colors.B400),
+      color: "var(--ds-link, ".concat(_colors.B400, ")"),
       wordBreak: 'break-all'
     }
   }, url);

package/dist/cjs/view/BlockCard/components/Provider.js

@@ -11,8 +11,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _utils = require("../../common/utils");
 
-var _tokens = require("@atlaskit/tokens");
-
 /** @jsx jsx */
 var Provider = function Provider(_ref) {
   var name = _ref.name,
@@ -39,7 +37,7 @@ var Provider = function Provider(_ref) {
     }
   }, iconToRender, (0, _react.jsx)("span", {
     css: {
-      color: (0, _tokens.token)('color.text.subtlest', _colors.N300),
+      color: "var(--ds-text-subtlest, ".concat(_colors.N300, ")"),
       margin: 0,
       marginLeft: (0, _utils.gs)(0.5),
       // EDM-713: fixes copy-paste from renderer to editor for Firefox

package/dist/cjs/view/BlockCard/views/ErroredView.js

@@ -41,8 +41,6 @@ var _UnresolvedText = require("../components/UnresolvedText");
 
 var _RetryAction = require("../actions/RetryAction");
 
-var _tokens = require("@atlaskit/tokens");
-
 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; }
@@ -90,7 +88,7 @@ var ErroredView = function ErroredView(_ref) {
     icon: (0, _react.jsx)(_warning.default, {
       label: "errored-warning-icon",
       size: "small",
-      primaryColor: (0, _tokens.token)('color.icon.warning', _colors.R300),
+      primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),
       testId: "".concat(testId, "-warning-icon")
     }),
     text: (0, _react.jsx)(_reactIntlNext.FormattedMessage, textDescriptionProps)

package/dist/cjs/view/BlockCard/views/ForbiddenView.js

@@ -17,8 +17,6 @@ var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
 
 var _Frame = require("../components/Frame");
@@ -95,7 +93,7 @@ var ForbiddenView = function ForbiddenView(_ref) {
     icon: (0, _react.jsx)(_lockFilled.default, {
       label: "forbidden-lock-icon",
       size: "small",
-      primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300),
+      primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
       testId: "".concat(testId, "-lock-icon")
     }),
     text: (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[descriptiveMessageKey], {

package/dist/cjs/view/BlockCard/views/NotFoundView.js

@@ -39,8 +39,6 @@ var _UnresolvedText = require("../components/UnresolvedText");
 
 var _handlers = require("../utils/handlers");
 
-var _tokens = require("@atlaskit/tokens");
-
 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; }
@@ -85,7 +83,7 @@ var NotFoundView = function NotFoundView(_ref) {
     icon: (0, _react.jsx)(_warning.default, {
       label: "not-found-warning-icon",
       size: "small",
-      primaryColor: (0, _tokens.token)('color.icon.warning', _colors.R300),
+      primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),
       testId: "".concat(testId, "-warning-icon")
     }),
     text: (0, _react.jsx)(_reactIntlNext.FormattedMessage, textDescriptionProps)

package/dist/cjs/view/BlockCard/views/ResolvingView.js

@@ -15,8 +15,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _Frame = require("../components/Frame");
 
 var _utils = require("../../common/utils");
@@ -43,12 +41,12 @@ var ResolvingView = function ResolvingView(_ref) {
     className: blockCardResolvingViewClassName
   }, (0, _react.jsx)(_documentFilled.default, {
     size: "small",
-    primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N50),
+    primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N50, ")"),
     label: "document-icon"
   }), (0, _react.jsx)("span", {
     css: {
       fontSize: "".concat((0, _constants.fontSize)(), "px"),
-      color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
+      color: "var(--ds-text-subtlest, ".concat(_colors.N90, ")"),
       marginLeft: (0, _utils.gs)(0.5)
     }
   }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.loading)));

package/dist/cjs/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -17,8 +17,6 @@ var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/componen
 
 var _messages = require("../../../../messages");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
@@ -67,7 +65,7 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: "errored-warning-icon",
     size: "small",
-    primaryColor: (0, _tokens.token)('color.icon.warning', _colors.R300),
+    primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),
     testId: "".concat(testId, "-warning-icon")
   }), /*#__PURE__*/_react.default.createElement(_text.default, {
     message: {

package/dist/cjs/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -19,8 +19,6 @@ var _titleBlock = _interopRequireDefault(require("../../../FlexibleCard/componen
 
 var _blocks = require("../../../FlexibleCard/components/blocks");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _messages = require("../../../../messages");
@@ -98,7 +96,7 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
     label: "forbidden-lock-icon",
     size: "small",
-    primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300),
+    primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/_react.default.createElement(_text.default, {
     message: {

package/dist/cjs/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -17,8 +17,6 @@ var _messages = require("../../../../messages");
 
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _colors = require("@atlaskit/theme/colors");
 
 var _footer = _interopRequireDefault(require("../../components/flexible/footer"));
@@ -57,7 +55,7 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: "not-found-warning-icon",
     size: "small",
-    primaryColor: (0, _tokens.token)('color.icon.warning', _colors.R300),
+    primaryColor: "var(--ds-icon-warning, ".concat(_colors.R300, ")"),
     testId: "".concat(testId, "-warning-icon")
   }), /*#__PURE__*/_react.default.createElement(_text.default, {
     message: {

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _utils = require("../../common/utils");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
@@ -74,13 +72,13 @@ function getinteractiveStyles(_ref3) {
   var isInteractive = _ref3.isInteractive,
       isFrameVisible = _ref3.isFrameVisible;
   var visibleFrameStyles = isFrameVisible ? visibleStyles : '';
-  var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ").concat((0, _tokens.token)('color.background.selected', colors.B50), ";\n  }\n") : '';
+  var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n  }\n") : '';
   return "".concat(visibleFrameStyles).concat(interactiveFrameStyles);
 }
 
 function selected(_ref4) {
   var isSelected = _ref4.isSelected;
-  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat((0, _tokens.token)('color.border.selected', colors.B100), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : '';
+  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : '';
 }
 
 var height = function height(_ref5) {
@@ -92,7 +90,7 @@ var wrapperStyles = function wrapperStyles(props) {
   return "\n  ".concat(borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat((0, _utils.gs)(2), ");\n    height: calc(100% + ").concat((0, _utils.gs)(1), ");\n    left: -").concat((0, _utils.gs)(1), ";\n    ").concat(borderRadius, "\n  }\n");
 };
 
-var visibleStyles = "\n  background-color: ".concat((0, _tokens.token)('color.background.neutral.subtle', colors.N30), ";\n\n  &:after {\n    background: ").concat((0, _tokens.token)('color.background.neutral', colors.N30), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
+var visibleStyles = "\n  background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";\n\n  &:after {\n    background: ", "var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 
 function visible(_ref6) {
   var isVisible = _ref6.isVisible;
@@ -113,7 +111,7 @@ exports.Wrapper = Wrapper;
 var embedHeaderHeight = 32;
 exports.embedHeaderHeight = embedHeaderHeight;
 
-var Header = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, (0, _tokens.token)('color.icon', colors.N300));
+var Header = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, "var(--ds-icon, ".concat(colors.N300, ")"));
 
 exports.Header = Header;
 
@@ -121,7 +119,7 @@ var IconWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0
   var isPlaceholder = _ref7.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n      background-color: ".concat((0, _tokens.token)('color.skeleton', colors.N30), ";\n    ");
+    return "\n      background-color: ".concat("var(--ds-skeleton, ".concat(colors.N30, ")"), ";\n    ");
   } else {
     return '';
   }
@@ -133,22 +131,22 @@ var TextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0
   var isPlaceholder = _ref8.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat((0, _tokens.token)('color.skeleton', colors.N30), ";\n      ");
+    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ", "var(--ds-skeleton, ".concat(colors.N30, ")"), ";\n      ");
   } else {
     return '';
   }
-}, (0, _tokens.token)('color.text.subtlest', colors.N300), ellipsis('none'));
+}, "var(--ds-text-subtlest, ".concat(colors.N300, ")"), ellipsis('none'));
 
 exports.TextWrapper = TextWrapper;
 
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n"])), borderRadius, cardShadow, (0, _tokens.token)('elevation.surface.raised', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n"])), borderRadius, cardShadow, "var(--ds-surface-raised, white)", (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {
-    return "\n          .".concat(className, ":hover & {\n            box-shadow: ").concat((0, _tokens.token)('elevation.shadow.overlay', '0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25)'), ";\n          }\n        ");
+    return "\n          .".concat(className, ":hover & {\n            box-shadow: ", "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))", ";\n          }\n        ");
   } else {
     return '';
   }
@@ -172,15 +170,15 @@ var ContentWrapper = _styled.default.div(_templateObject8 || (_templateObject8 =
 
 exports.ContentWrapper = ContentWrapper;
 
-var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), (0, _tokens.token)('color.text', colors.N900), 20 / 16, 20 * 4);
+var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N900, ")"), 20 / 16, 20 * 4);
 
 exports.Title = Title;
 
-var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), (0, _tokens.token)('color.text.subtlest', colors.N300), 16 / 12, ellipsis('100%'));
+var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
 
 exports.Byline = Byline;
 
-var Description = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), (0, _tokens.token)('color.text', colors.N800), 18 / 12, 18 * 3);
+var Description = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), 18 / 12, 18 * 3);
 
 exports.Description = Description;
 
@@ -188,7 +186,7 @@ var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templat
 
 exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
 
-var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), (0, _tokens.token)('color.skeleton', colors.N30), function (_ref12) {
+var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref12) {
   var src = _ref12.src;
   return src;
 });

package/dist/cjs/view/EmbedCard/views/ErroredView.js

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _Frame = require("../../BlockCard/components/Frame");
 
 var _reactIntlNext = require("react-intl-next");
@@ -42,7 +40,7 @@ var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
     testId: testId
   }, (0, _react.jsx)(_error.default, {
     size: "small",
-    primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300),
+    primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
     label: "error-icon"
   }), (0, _react.jsx)("span", {
     css: {

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -23,8 +23,6 @@ var _2 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/blog/16"));
 
 var _constants = require("../../../../../constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _importIconMapper;
 
 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); }
@@ -333,7 +331,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
     case _constants.IconType.Confluence:
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         testId: testId,
-        textColor: (0, _tokens.token)('color.text.subtle', _colors.N700)
+        textColor: "var(--ds-text-subtle, ".concat(_colors.N700, ")")
         /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
         ,
         iconColor: _colors.B200,
@@ -347,7 +345,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         testId: testId,
-        textColor: (0, _tokens.token)('color.text.subtle', _colors.N700)
+        textColor: "var(--ds-text-subtle, ".concat(_colors.N700, ")")
         /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
         ,
         iconColor: _colors.B200,
@@ -362,7 +360,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R400)
+        primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
       });
 
     default:

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
@@ -22,7 +20,7 @@ var LoadingSkeleton = function LoadingSkeleton(_ref) {
       width = _ref.width,
       height = _ref.height;
   var animationNameStyles = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% { background-position: 50%  0; }\n    100% { background-position: -50% 0; }\n  "])));
-  var styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    background-image: linear-gradient(\n      to right,\n      transparent 0%,\n      ", " 20%,\n      transparent 40%,\n      transparent 100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), animationNameStyles);
+  var styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    background-image: linear-gradient(\n      to right,\n      transparent 0%,\n      ", " 20%,\n      transparent 40%,\n      transparent 100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, "var(--ds-skeleton-subtle, #f6f7f8)", "var(--ds-skeleton, #edeef1)", animationNameStyles);
   return (0, _react2.jsx)("span", {
     css: styles,
     "data-testid": testId

package/dist/cjs/view/InlineCard/ErroredView/index.js

@@ -25,8 +25,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -104,7 +102,7 @@ var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         icon: icon || /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
           label: "error",
           size: "small",
-          primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300)
+          primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")")
         })),
         link: url,
         title: url,