@atlaskit/smart-card 18.0.15 → 18.0.18

package/dist/cjs/i18n/zh_TW.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Chinese (Traditional)
+var _default = {
+  'fabric.linking.cannot_connect': '無法連結，請再試一次',
+  'fabric.linking.cannot_find_link': '找不到連結',
+  'fabric.linking.click_to_join': '加入 {context} 以查看此議題',
+  'fabric.linking.connect_link_account': '連線以預覽',
+  'fabric.linking.create_on': '建立時間：{context}',
+  'fabric.linking.created_by': '建立者：{context}',
+  'fabric.linking.delete': '刪除',
+  'fabric.linking.edit': '編輯',
+  'fabric.linking.forbidden_access': '您的存取遭拒',
+  'fabric.linking.invalid_permissions': '連結受到限制，請嘗試其他帳戶',
+  'fabric.linking.modified_on': '更新時間：{context}',
+  'fabric.linking.pending_request': '您的存取要求擱置中',
+  'fabric.linking.priority_blocker': '封鎖程式',
+  'fabric.linking.priority_critical': '重要',
+  'fabric.linking.priority_high': '高',
+  'fabric.linking.priority_highest': '最高',
+  'fabric.linking.priority_low': '低',
+  'fabric.linking.priority_lowest': '最低',
+  'fabric.linking.priority_major': '主要',
+  'fabric.linking.priority_medium': '中',
+  'fabric.linking.priority_minor': '次要',
+  'fabric.linking.priority_trivial': '不太重要',
+  'fabric.linking.priority_undefined': '未定義',
+  'fabric.linking.request_access': '要求存取 {context} 以檢視此議題',
+  'fabric.linking.request_denied': '您的存取要求遭拒',
+  'fabric.linking.updated_by': '修改者：{context}'
+};
+exports.default = _default;

package/dist/cjs/state/actions/index.js

@@ -98,7 +98,7 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
     var nextStatus = response ? (0, _helpers2.getStatus)(response) : 'fatal'; // If we require authorization & do not have an authFlow available,
     // throw an error and render as a normal blue link.
 
-    if (nextStatus === 'unauthorized' && !hasAuthFlowSupported) {
+    if ((nextStatus === 'unauthorized' || nextStatus === 'forbidden') && !hasAuthFlowSupported) {
       handleResolvedLinkError(resourceUrl, new _errors.APIError('fallback', hostname, _constants.ERROR_MESSAGE_OAUTH));
       return;
     } // Handle any other errors

package/dist/cjs/version.json

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

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

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

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

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

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

@@ -11,6 +11,8 @@ 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,
@@ -36,7 +38,7 @@ var Provider = function Provider(_ref) {
   }, iconToRender, (0, _core.jsx)("span", {
     css: {
       fontSize: (0, _utils.gs)(1.5),
-      color: _colors.N300,
+      color: (0, _tokens.token)('color.text.subtlest', _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,6 +41,8 @@ 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; }
@@ -88,7 +90,7 @@ var ErroredView = function ErroredView(_ref) {
     icon: (0, _core.jsx)(_warning.default, {
       label: "errored-warning-icon",
       size: "small",
-      primaryColor: _colors.R300,
+      primaryColor: (0, _tokens.token)('color.icon.warning', _colors.R300),
       testId: "".concat(testId, "-warning-icon")
     }),
     text: (0, _core.jsx)(_reactIntlNext.FormattedMessage, textDescriptionProps)

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

@@ -17,6 +17,8 @@ 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");
@@ -93,7 +95,7 @@ var ForbiddenView = function ForbiddenView(_ref) {
     icon: (0, _core.jsx)(_lockFilled.default, {
       label: "forbidden-lock-icon",
       size: "small",
-      primaryColor: _colors.R300,
+      primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300),
       testId: "".concat(testId, "-lock-icon")
     }),
     text: (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[descriptiveMessageKey], {

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

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

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

@@ -15,6 +15,8 @@ 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");
@@ -41,12 +43,12 @@ var ResolvingView = function ResolvingView(_ref) {
     className: blockCardResolvingViewClassName
   }, (0, _core.jsx)(_documentFilled.default, {
     size: "small",
-    primaryColor: _colors.N50,
+    primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N50),
     label: "document-icon"
   }), (0, _core.jsx)("span", {
     css: {
       fontSize: "".concat((0, _constants.fontSize)(), "px"),
-      color: _colors.N90,
+      color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
       marginLeft: (0, _utils.gs)(0.5)
     }
   }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.loading)));

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

@@ -19,6 +19,8 @@ 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;
@@ -56,13 +58,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(colors.B50, ";\n  }\n") : '';
+  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") : '';
   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(colors.B100, ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(_mediaUi.borderRadius, "\n    }\n    ") : '';
+  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(_mediaUi.borderRadius, "\n    }\n    ") : '';
 }
 
 var height = function height(_ref5) {
@@ -74,7 +76,7 @@ var wrapperStyles = function wrapperStyles(props) {
   return "\n  ".concat(_mediaUi.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(_mediaUi.borderRadius, "\n  }\n");
 };
 
-var visibleStyles = "\n  background-color: ".concat(colors.N30, ";\n\n  &:after {\n    background: ").concat(colors.N30, " !important;\n  }\n  .embed-header {\n    opacity: 1;\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  }");
 
 function visible(_ref6) {
   var isVisible = _ref6.isVisible;
@@ -95,7 +97,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, 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, (0, _tokens.token)('color.icon', colors.N300));
 
 exports.Header = Header;
 
@@ -103,7 +105,7 @@ var IconWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0
   var isPlaceholder = _ref7.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n      background-color: ".concat(colors.N30, ";\n    ");
+    return "\n      background-color: ".concat((0, _tokens.token)('color.skeleton', colors.N30), ";\n    ");
   } else {
     return '';
   }
@@ -115,22 +117,22 @@ var TextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0
   var isPlaceholder = _ref8.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n        ".concat(_mediaUi.borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat(colors.N30, ";\n      ");
+    return "\n        ".concat(_mediaUi.borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat((0, _tokens.token)('color.skeleton', colors.N30), ";\n      ");
   } else {
     return '';
   }
-}, colors.N300, (0, _mediaUi.ellipsis)('none'));
+}, (0, _tokens.token)('color.text.subtlest', colors.N300), (0, _mediaUi.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: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\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"])), _mediaUi.borderRadius, cardShadow, (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  overflow: hidden;\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"])), _mediaUi.borderRadius, cardShadow, (0, _tokens.token)('elevation.surface', '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: 0 4px 8px -2px rgba(23, 43, 77, 0.32),\n              0 0 1px rgba(23, 43, 77, 0.25);\n          }\n        ");
+    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        ");
   } else {
     return '';
   }
@@ -151,15 +153,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"])), 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"])), (0, _tokens.token)('color.text', 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"])), colors.N300, 16 / 12, (0, _mediaUi.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"])), (0, _tokens.token)('color.text.subtlest', colors.N300), 16 / 12, (0, _mediaUi.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"])), 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"])), (0, _tokens.token)('color.text', colors.N800), 18 / 12, 18 * 3);
 
 exports.Description = Description;
 
@@ -167,7 +169,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"])), _mediaUi.borderRadius, (0, _mediaUi.size)(48), colors.N30, function (_ref11) {
+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"])), _mediaUi.borderRadius, (0, _mediaUi.size)(48), (0, _tokens.token)('color.skeleton', colors.N30), function (_ref11) {
   var src = _ref11.src;
   return src;
 });

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

@@ -17,6 +17,8 @@ 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");
@@ -40,7 +42,7 @@ var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
     testId: testId
   }, (0, _core.jsx)(_error.default, {
     size: "small",
-    primaryColor: _colors.R300,
+    primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300),
     label: "error-icon"
   }), (0, _core.jsx)("span", {
     css: {

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -15,40 +15,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@emotion/core");
 
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-
 var _block = _interopRequireDefault(require("../../block"));
 
 var _constants = require("../../../../../../constants");
 
-var _excluded = ["actionGroup", "testId", "title"];
-
-var getSpinnerSize = function getSpinnerSize(size) {
-  // Spinner sizes should be equivalent or smaller than Icon size
-  // to avoid the jumping.
-  switch (size) {
-    case _constants.SmartLinkSize.XLarge:
-      return 28;
+var _loadingSkeleton = _interopRequireDefault(require("../../../common/loading-skeleton"));
 
-    case _constants.SmartLinkSize.Large:
-      return 24;
+var _utils = require("../../../utils");
 
-    case _constants.SmartLinkSize.Medium:
-      return 16;
+var _excluded = ["actionGroup", "testId", "title"];
 
-    case _constants.SmartLinkSize.Small:
-    default:
-      return 12;
-  }
-};
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting
  * for a request to finish.
  * This should render when a Smart Link has sent a request.
  * @see TitleBlock
  */
-
-
 var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
   var actionGroup = _ref.actionGroup,
       testId = _ref.testId,
@@ -56,12 +38,16 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
       blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  var iconWidth = (0, _utils.getIconWidth)(size);
+  var iconStyles = (0, _utils.getIconSizeStyles)(iconWidth);
   return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
-  }), (0, _core.jsx)(_spinner.default, {
-    size: getSpinnerSize(size),
-    testId: "".concat(testId, "-resolving-spinner")
-  }), title, actionGroup);
+  }), (0, _core.jsx)("span", {
+    css: iconStyles,
+    "data-testid": "".concat(testId, "-icon")
+  }, (0, _core.jsx)(_loadingSkeleton.default, {
+    testId: "".concat(testId, "-icon-loading")
+  })), title, actionGroup);
 };
 
 var _default = TitleBlockResolvingView;

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

@@ -19,6 +19,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 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); }
@@ -314,10 +316,14 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         "data-testid": testId // Confluence and Jira imports don't have native testId prop
         ,
-        textColor: _colors.N700,
+        textColor: (0, _tokens.token)('color.text.subtle', _colors.N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         iconColor: _colors.B200,
         iconGradientStart: _colors.B400,
         iconGradientStop: _colors.B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
       });
 
     case _constants.IconType.Error:
@@ -325,7 +331,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        primaryColor: _colors.R400
+        primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R400)
       });
 
     default:

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

@@ -7,28 +7,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@emotion/core");
 
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 
-var _templateObject, _templateObject2;
-
-var placeholderShimmer = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var shimmer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  user-select: none;\n\n  background: #f6f7f8;\n  background-image: linear-gradient(\n    to right,\n    #f6f7f8 0%,\n    #edeef1 20%,\n    #f6f7f8 40%,\n    #f6f7f8 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"])), placeholderShimmer);
+var _loadingSkeleton = _interopRequireDefault(require("../loading-skeleton"));
 
+/** @jsx jsx */
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
       testId = _ref.testId,
       url = _ref.url;
   return (0, _core.jsx)(_reactRenderImage.default, {
     src: url,
-    loading: (0, _core.jsx)("span", {
-      css: shimmer,
-      "data-testid": "".concat(testId, "-loading")
+    loading: (0, _core.jsx)(_loadingSkeleton.default, {
+      testId: "".concat(testId, "-loading")
     }),
     loaded: (0, _core.jsx)("img", {
       src: url,

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _templateObject, _templateObject2;
+
+var animationNameStyles = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
+var styles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "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"])), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
+
+var LoadingSkeleton = function LoadingSkeleton(_ref) {
+  var testId = _ref.testId;
+  return (0, _core.jsx)("span", {
+    css: styles,
+    "data-testid": testId
+  });
+};
+
+var _default = LoadingSkeleton;
+exports.default = _default;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/elements/icon/index.js

@@ -42,23 +42,6 @@ var getPositionStyles = function getPositionStyles(size, position) {
   }
 };
 
-var getWidth = function getWidth(size) {
-  switch (size) {
-    case _constants.SmartLinkSize.XLarge:
-      return '2rem';
-
-    case _constants.SmartLinkSize.Large:
-      return '1.5rem';
-
-    case _constants.SmartLinkSize.Medium:
-      return '1rem';
-
-    case _constants.SmartLinkSize.Small:
-    default:
-      return '.75rem';
-  }
-};
-
 var getIconStyles = function getIconStyles(size, position, width) {
   return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), getPositionStyles(size, position), (0, _utils.getIconSizeStyles)(width));
 };
@@ -118,7 +101,7 @@ var Icon = function Icon(_ref) {
     var defaultIcon = renderDefaultIcon(label, testId);
     return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
   }, [icon, label, render, testId, url]);
-  var width = getWidth(size);
+  var width = (0, _utils.getIconWidth)(size);
   var styles = getIconStyles(size, position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return (0, _core.jsx)("div", {

package/dist/cjs/view/FlexibleCard/components/elements/link/index.js

@@ -30,6 +30,7 @@ var containerStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _
 
 var getThemeStyles = function getThemeStyles(theme) {
   switch (theme) {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case _constants.SmartLinkTheme.Black:
       return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blackLink, _token.tokens.blackLinkPressed, _token.tokens.blackLink);
 

package/dist/cjs/view/FlexibleCard/components/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTruncateStyles = exports.getMaxLines = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+exports.getTruncateStyles = exports.getMaxLines = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -44,6 +44,25 @@ var getIconSizeStyles = function getIconSizeStyles(width) {
 
 exports.getIconSizeStyles = getIconSizeStyles;
 
+var getIconWidth = function getIconWidth(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return '2rem';
+
+    case _constants.SmartLinkSize.Large:
+      return '1.5rem';
+
+    case _constants.SmartLinkSize.Medium:
+      return '1rem';
+
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '.75rem';
+  }
+};
+
+exports.getIconWidth = getIconWidth;
+
 var getLinkLineHeight = function getLinkLineHeight(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:

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

@@ -25,6 +25,8 @@ 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"));
@@ -110,7 +112,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: _colors.R300
+          primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300)
         })),
         title: this.renderMessage()
       }));