@atlaskit/smart-card 18.0.15 → 18.0.18

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

@@ -71,7 +71,7 @@ export var useSmartCardActions = function useSmartCardActions(id, url, analytics
     var nextStatus = response ? 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 APIError('fallback', hostname, ERROR_MESSAGE_OAUTH));
       return;
     } // Handle any other errors

package/dist/esm/version.json

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

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

@@ -8,6 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { jsx } from '@emotion/core';
 import React from 'react';
 import { N20A, N30A, B200, N40A, N50A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { gs, br, mq } from '../../common/utils';
 export var Frame = function Frame() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
@@ -21,7 +22,7 @@ var sharedFrameStyles = {
   maxWidth: gs(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: 'white'
+  backgroundColor: token('elevation.surface', 'white')
 };
 export var ExpandedFrame = function ExpandedFrame(_ref) {
   var children = _ref.children,
@@ -33,15 +34,16 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
   return jsx("div", {
     css: mq(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
       '&:hover': isHoverable ? {
-        backgroundColor: N20A,
+        // TODO: https://product-fabric.atlassian.net/browse/DSP-4064
+        backgroundColor: token('color.background.neutral.subtle.hovered', N20A),
         cursor: 'pointer'
       } : undefined,
       minHeight: isFluidHeight ? 0 : [gs(21), gs(15)],
       borderRadius: isSelected ? br() : br(0.5),
-      border: "2px solid ".concat(isSelected ? B200 : 'transparent'),
+      border: "2px solid ".concat(isSelected ? token('color.border.selected', B200) : 'transparent'),
       justifyContent: 'space-between',
       overflow: 'hidden',
-      boxShadow: "0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A, ";")
+      boxShadow: token('elevation.shadow.raised', "0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A))
     })),
     "data-testid": testId,
     className: className,
@@ -58,14 +60,14 @@ export var CompactFrame = function CompactFrame(_ref2) {
   return jsx("div", {
     css: mq(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
       '&:hover': isHoverable ? {
-        backgroundColor: N30A
+        backgroundColor: token('color.background.neutral.hovered', N30A)
       } : undefined,
       borderRadius: isSelected ? br() : br(0.5),
-      border: isSelected ? "2px solid ".concat(B200) : '',
+      border: isSelected ? "2px solid ".concat(token('color.border.selected', B200)) : '',
       justifyContent: 'center',
       alignItems: 'center',
       height: inheritDimensions ? '100%' : gs(5),
-      backgroundColor: N20A,
+      backgroundColor: token('color.background.neutral', N20A),
       width: ['calc(100% - 16px)', '100%'],
       padding: ["0px ".concat(gs(1)), '0']
     })),

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var Link = function Link(_ref) {
   var url = _ref.url,
       _ref$testId = _ref.testId,
@@ -10,7 +11,7 @@ export var Link = function Link(_ref) {
     "data-testid": "".concat(testId, "-link"),
     className: className,
     css: {
-      color: B400,
+      color: token('color.link', B400),
       wordBreak: 'break-all'
     }
   }, url);

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

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/core';
 import { N300 } from '@atlaskit/theme/colors';
 import { gs } from '../../common/utils';
+import { token } from '@atlaskit/tokens';
 export var Provider = function Provider(_ref) {
   var name = _ref.name,
       icon = _ref.icon;
@@ -26,7 +27,7 @@ export var Provider = function Provider(_ref) {
   }, iconToRender, jsx("span", {
     css: {
       fontSize: gs(1.5),
-      color: N300,
+      color: token('color.text.subtlest', N300),
       margin: 0,
       marginLeft: gs(0.5),
       // EDM-713: fixes copy-paste from renderer to editor for Firefox

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

@@ -21,6 +21,7 @@ import { handleClickCommon } from '../utils/handlers';
 import { Link } from '../components/Link';
 import { UnresolvedText } from '../components/UnresolvedText';
 import { RetryAction } from '../actions/RetryAction';
+import { token } from '@atlaskit/tokens';
 
 var textDescriptionProps = _objectSpread({}, messages.could_not_load_link);
 
@@ -63,7 +64,7 @@ export var ErroredView = function ErroredView(_ref) {
     icon: jsx(WarningIcon, {
       label: "errored-warning-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.warning', R300),
       testId: "".concat(testId, "-warning-icon")
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

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

@@ -5,6 +5,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { jsx } from '@emotion/core';
 import { FormattedMessage } from 'react-intl-next';
 import { R300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import { Frame } from '../components/Frame';
 import { Provider } from '../components/Provider';
@@ -65,7 +66,7 @@ export var ForbiddenView = function ForbiddenView(_ref) {
     icon: jsx(LockIcon, {
       label: "forbidden-lock-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.danger', R300),
       testId: "".concat(testId, "-lock-icon")
     }),
     text: jsx(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {

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

@@ -20,6 +20,7 @@ import { ContentHeader } from '../components/ContentHeader';
 import { Link } from '../components/Link';
 import { UnresolvedText } from '../components/UnresolvedText';
 import { handleClickCommon } from '../utils/handlers';
+import { token } from '@atlaskit/tokens';
 
 var textDescriptionProps = _objectSpread({}, messages.not_found_description);
 
@@ -59,7 +60,7 @@ export var NotFoundView = function NotFoundView(_ref) {
     icon: jsx(WarningIcon, {
       label: "not-found-warning-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.warning', R300),
       testId: "".concat(testId, "-warning-icon")
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

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

@@ -3,6 +3,7 @@ import { jsx } from '@emotion/core';
 import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import { Frame } from '../components/Frame';
 import { gs } from '../../common/utils';
 import { FormattedMessage } from 'react-intl-next';
@@ -22,12 +23,12 @@ export var ResolvingView = function ResolvingView(_ref) {
     className: blockCardResolvingViewClassName
   }, jsx(DocumentFilledIcon, {
     size: "small",
-    primaryColor: N50,
+    primaryColor: token('color.icon.subtle', N50),
     label: "document-icon"
   }), jsx("span", {
     css: {
       fontSize: "".concat(fontSize(), "px"),
-      color: N90,
+      color: token('color.text.subtlest', N90),
       marginLeft: gs(0.5)
     }
   }, jsx(FormattedMessage, messages.loading)));

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

@@ -6,6 +6,7 @@ import styled from '@emotion/styled';
 import { size as csssize, borderRadius, size, ellipsis } from '@atlaskit/media-ui';
 import { fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { gs as gridSize } from '../../common/utils';
 export var className = 'media-card-frame';
 export var cardShadow = "";
@@ -34,13 +35,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(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(borderRadius, "\n    }\n    ") : '';
+  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat(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    ") : '';
 }
 
 var height = function height(_ref5) {
@@ -52,7 +53,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(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(gridSize(2), ");\n    height: calc(100% + ").concat(gridSize(1), ");\n    left: -").concat(gridSize(1), ";\n    ").concat(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(token('color.background.neutral.subtle', colors.N30), ";\n\n  &:after {\n    background: ").concat(token('color.background.neutral', colors.N30), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 
 function visible(_ref6) {
   var isVisible = _ref6.isVisible;
@@ -66,12 +67,12 @@ export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedT
   return wrapperStyles(props);
 });
 export var embedHeaderHeight = 32;
-export var Header = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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);
+export var Header = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, token('color.icon', colors.N300));
 export var IconWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), borderRadius, size(16), function (_ref7) {
   var isPlaceholder = _ref7.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n      background-color: ".concat(colors.N30, ";\n    ");
+    return "\n      background-color: ".concat(token('color.skeleton', colors.N30), ";\n    ");
   } else {
     return '';
   }
@@ -80,19 +81,19 @@ export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _tag
   var isPlaceholder = _ref8.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat(colors.N30, ";\n      ");
+    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat(token('color.skeleton', colors.N30), ";\n      ");
   } else {
     return '';
   }
-}, colors.N300, ellipsis('none'));
+}, token('color.text.subtlest', colors.N300), ellipsis('none'));
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])), borderRadius, cardShadow, gridSize(4), gridSize(4), function (_ref9) {
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])), borderRadius, cardShadow, token('elevation.surface', 'white'), gridSize(4), gridSize(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(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 '';
   }
@@ -103,11 +104,11 @@ export var Image = styled.img(_templateObject7 || (_templateObject7 = _taggedTem
 }, borderRadius);
 export var maxAvatarCount = 6;
 export var ContentWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
-export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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);
-export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), colors.N300, 16 / 12, ellipsis('100%'));
-export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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);
+export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), token('color.text', colors.N900), 20 / 16, 20 * 4);
+export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), token('color.text.subtlest', colors.N300), 16 / 12, ellipsis('100%'));
+export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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"])), token('color.text', colors.N800), 18 / 12, 18 * 3);
 export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n"])));
-export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, size(48), colors.N30, function (_ref11) {
+export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, size(48), token('color.skeleton', colors.N30), function (_ref11) {
   var src = _ref11.src;
   return src;
 });

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

@@ -4,6 +4,7 @@ import Button from '@atlaskit/button/custom-theme-button';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { fontSize } from '@atlaskit/theme/constants';
 import { R300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { Frame } from '../../BlockCard/components/Frame';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui/messages';
@@ -22,7 +23,7 @@ export var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
     testId: testId
   }, jsx(ErrorIcon, {
     size: "small",
-    primaryColor: R300,
+    primaryColor: token('color.icon.danger', R300),
     label: "error-icon"
   }), jsx("span", {
     css: {

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

@@ -5,28 +5,10 @@ var _excluded = ["actionGroup", "testId", "title"];
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/core';
-import Spinner from '@atlaskit/spinner';
 import Block from '../../block';
 import { SmartLinkSize } from '../../../../../../constants';
-
-var getSpinnerSize = function getSpinnerSize(size) {
-  // Spinner sizes should be equivalent or smaller than Icon size
-  // to avoid the jumping.
-  switch (size) {
-    case SmartLinkSize.XLarge:
-      return 28;
-
-    case SmartLinkSize.Large:
-      return 24;
-
-    case SmartLinkSize.Medium:
-      return 16;
-
-    case SmartLinkSize.Small:
-    default:
-      return 12;
-  }
-};
+import LoadingSkeleton from '../../../common/loading-skeleton';
+import { getIconSizeStyles, getIconWidth } from '../../../utils';
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting
  * for a request to finish.
@@ -34,7 +16,6 @@ var getSpinnerSize = function getSpinnerSize(size) {
  * @see TitleBlock
  */
 
-
 var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
   var actionGroup = _ref.actionGroup,
       testId = _ref.testId,
@@ -43,12 +24,16 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
 
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  var iconWidth = getIconWidth(size);
+  var iconStyles = getIconSizeStyles(iconWidth);
   return jsx(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
-  }), jsx(Spinner, {
-    size: getSpinnerSize(size),
-    testId: "".concat(testId, "-resolving-spinner")
-  }), title, actionGroup);
+  }), jsx("span", {
+    css: iconStyles,
+    "data-testid": "".concat(testId, "-icon")
+  }, jsx(LoadingSkeleton, {
+    testId: "".concat(testId, "-icon-loading")
+  })), title, actionGroup);
 };
 
 export default TitleBlockResolvingView;

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

@@ -6,7 +6,8 @@ import React from 'react';
 import Loadable from 'react-loadable';
 import { B200, B400, N700, R400 } from '@atlaskit/theme/colors';
 import { IconType } from '../../../../../constants';
-// prettier-ignore
+import { token } from '@atlaskit/tokens'; // prettier-ignore
+
 var importIconMapper = (_importIconMapper = {}, _defineProperty(_importIconMapper, IconType.Archive, function () {
   return import(
   /* webpackChunkName: "glyphArchive" */
@@ -295,10 +296,14 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         "data-testid": testId // Confluence and Jira imports don't have native testId prop
         ,
-        textColor: N700,
+        textColor: token('color.text.subtle', N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         iconColor: B200,
         iconGradientStart: B400,
         iconGradientStop: B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
       });
 
     case IconType.Error:
@@ -306,7 +311,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        primaryColor: R400
+        primaryColor: token('color.icon.danger', R400)
       });
 
     default:

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

@@ -1,13 +1,8 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx, keyframes } from '@emotion/core';
+import { jsx } from '@emotion/core';
 import ImageLoader from 'react-render-image';
-var placeholderShimmer = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var shimmer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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);
+import LoadingSkeleton from '../loading-skeleton';
 
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
@@ -15,9 +10,8 @@ var ImageIcon = function ImageIcon(_ref) {
       url = _ref.url;
   return jsx(ImageLoader, {
     src: url,
-    loading: jsx("span", {
-      css: shimmer,
-      "data-testid": "".concat(testId, "-loading")
+    loading: jsx(LoadingSkeleton, {
+      testId: "".concat(testId, "-loading")
     }),
     loaded: jsx("img", {
       src: url,

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

@@ -0,0 +1,20 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx, keyframes } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
+var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
+var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
+
+var LoadingSkeleton = function LoadingSkeleton(_ref) {
+  var testId = _ref.testId;
+  return jsx("span", {
+    css: styles,
+    "data-testid": testId
+  });
+};
+
+export default LoadingSkeleton;

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

@@ -0,0 +1 @@
+export {};

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

@@ -9,7 +9,7 @@ import { css, jsx } from '@emotion/core';
 import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
-import { getIconSizeStyles, getTruncateStyles } from '../../utils';
+import { getIconSizeStyles, getIconWidth, getTruncateStyles } from '../../utils';
 
 var getPositionStyles = function getPositionStyles(size, position) {
   switch (position) {
@@ -22,23 +22,6 @@ var getPositionStyles = function getPositionStyles(size, position) {
   }
 };
 
-var getWidth = function getWidth(size) {
-  switch (size) {
-    case SmartLinkSize.XLarge:
-      return '2rem';
-
-    case SmartLinkSize.Large:
-      return '1.5rem';
-
-    case SmartLinkSize.Medium:
-      return '1rem';
-
-    case SmartLinkSize.Small:
-    default:
-      return '.75rem';
-  }
-};
-
 var getIconStyles = function getIconStyles(size, position, width) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getPositionStyles(size, position), getIconSizeStyles(width));
 };
@@ -98,7 +81,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 = getIconWidth(size);
   var styles = getIconStyles(size, position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {

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

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

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

@@ -25,6 +25,22 @@ export var getIconSizeStyles = function getIconSizeStyles(width) {
   var sizeStyles = getIconDimensionStyles(width);
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    ", "\n    span,\n    svg,\n    img {\n      ", "\n    }\n    svg {\n      padding: 0;\n    }\n  "])), sizeStyles, sizeStyles);
 };
+export var getIconWidth = function getIconWidth(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return '2rem';
+
+    case SmartLinkSize.Large:
+      return '1.5rem';
+
+    case SmartLinkSize.Medium:
+      return '1rem';
+
+    case SmartLinkSize.Small:
+    default:
+      return '.75rem';
+  }
+};
 export var getLinkLineHeight = function getLinkLineHeight(size) {
   switch (size) {
     case SmartLinkSize.XLarge:

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

@@ -12,6 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { R300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import Button from '@atlaskit/button/custom-theme-button';
 import { Frame } from '../Frame';
@@ -85,7 +86,7 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
           label: "error",
           size: "small",
-          primaryColor: R300
+          primaryColor: token('color.icon.danger', R300)
         })),
         title: this.renderMessage()
       }));

package/dist/esm/view/InlineCard/ForbiddenView/index.js

@@ -13,6 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { R400, N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import Button from '@atlaskit/button/custom-theme-button';
 import { Frame } from '../Frame';
@@ -24,7 +25,7 @@ import { IconStyledButton, LowercaseAppearance, LinkAppearance } from '../styled
 var FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
-  primaryColor: R400
+  primaryColor: token('color.icon.danger', R400)
 }));
 export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardForbiddenView, _React$Component);
@@ -113,7 +114,7 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         icon: icon ? icon : FallbackForbiddenIcon,
         title: this.renderMessage(),
-        titleColor: N500
+        titleColor: token('color.text.subtle', N500)
       }));
     }
   }]);

package/dist/esm/view/InlineCard/Frame/styled.js

@@ -3,24 +3,24 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import styled from '@emotion/styled';
-import { B100, B400, B50, N20 } from '@atlaskit/theme/colors';
+import { B100, B400, B50, DN40A, DN50A, N20, N40A, N50A } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
-import { e100 } from '@atlaskit/theme/elevation';
 import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 import { TitleWrapperClassName } from '../IconAndTitleLayout/styled';
 var BACKGROUND_COLOR_DARK = '#262B31';
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat(B100, ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat(token('color.border.selected', B100), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
 
 var isInteractive = function isInteractive(_ref) {
   var isInteractive = _ref.isInteractive;
 
   if (isInteractive) {
     return "\n      cursor: pointer;\n      :hover {\n        background-color: ".concat(themed({
-      light: N20,
-      dark: BACKGROUND_COLOR_DARK
+      light: token('color.background.neutral.subtle.hovered', N20),
+      dark: token('color.background.neutral.subtle.hovered', BACKGROUND_COLOR_DARK)
     }), ";\n        text-decoration: none;\n      }\n      :active {\n        background-color: ").concat(themed({
-      light: B50,
-      dark: BACKGROUND_COLOR_DARK
+      light: token('color.background.selected', B50),
+      dark: token('color.background.selected', BACKGROUND_COLOR_DARK)
     }), ";\n        text-decoration: none;\n      }\n      :focus {\n        ").concat(selected, "\n        text-decoration: none;\n      }\n    ");
   } else {
     return '';
@@ -55,18 +55,21 @@ var withoutHover = function withoutHover(_ref3) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 
 
-export var Wrapper = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
+export var Wrapper = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", "\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
   return props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '';
 }, akBorderRadius(), themed({
-  light: B400,
-  dark: '#4794FF'
+  light: token('color.link', B400),
+  dark: token('color.link', '#4794FF')
 }), function (props) {
   return props.withoutBackground ? '' : themed({
-    light: 'white',
-    dark: BACKGROUND_COLOR_DARK
+    light: token('elevation.surface.raised', 'white'),
+    dark: token('elevation.surface.raised', 'BACKGROUND_COLOR_DARK')
   });
 }, function (props) {
-  return props.withoutBackground ? '' : e100();
+  return props.withoutBackground ? '' : themed({
+    light: "box-shadow: ".concat(token('elevation.shadow.raised', "0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A)), ";"),
+    dark: "box-shadow: ".concat(token('elevation.shadow.raised', "0 1px 1px ".concat(DN50A, ", 0 0 1px 1px ").concat(DN40A)), ";")
+  });
 }, function (props) {
   return isInteractive(props);
 }, function (props) {