@atlaskit/smart-card 18.0.15 → 18.0.18

package/dist/es2019/i18n/zh_TW.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Chinese (Traditional)
+export 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}'
+};

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

@@ -70,7 +70,7 @@ export const useSmartCardActions = (id, url, analytics) => {
     const 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/es2019/version.json

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

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

@@ -2,6 +2,7 @@
 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 const Frame = (props = {
   isSelected: false,
@@ -12,7 +13,7 @@ const sharedFrameStyles = {
   maxWidth: gs(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: 'white'
+  backgroundColor: token('elevation.surface', 'white')
 };
 export const ExpandedFrame = ({
   children,
@@ -25,15 +26,16 @@ export const ExpandedFrame = ({
   return jsx("div", {
     css: mq({ ...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 ${isSelected ? B200 : 'transparent'}`,
+      border: `2px solid ${isSelected ? token('color.border.selected', B200) : 'transparent'}`,
       justifyContent: 'space-between',
       overflow: 'hidden',
-      boxShadow: `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A};`
+      boxShadow: token('elevation.shadow.raised', `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`)
     }),
     "data-testid": testId,
     className: className,
@@ -51,14 +53,14 @@ export const CompactFrame = ({
   return jsx("div", {
     css: mq({ ...sharedFrameStyles,
       '&:hover': isHoverable ? {
-        backgroundColor: N30A
+        backgroundColor: token('color.background.neutral.hovered', N30A)
       } : undefined,
       borderRadius: isSelected ? br() : br(0.5),
-      border: isSelected ? `2px solid ${B200}` : '',
+      border: isSelected ? `2px solid ${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 ${gs(1)}`, '0']
     }),

package/dist/es2019/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 const Link = ({
   url,
   testId = 'block-card',
@@ -10,7 +11,7 @@ export const Link = ({
     "data-testid": `${testId}-link`,
     className: className,
     css: {
-      color: B400,
+      color: token('color.link', B400),
       wordBreak: 'break-all'
     }
   }, url);

package/dist/es2019/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 const Provider = ({
   name,
   icon
@@ -27,7 +28,7 @@ export const Provider = ({
   }, 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/es2019/view/BlockCard/views/ErroredView.js

@@ -15,6 +15,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';
 const textDescriptionProps = { ...messages.could_not_load_link
 };
 export const blockCardErroredViewClassName = 'block-card-errored-view';
@@ -47,7 +48,7 @@ export const ErroredView = ({
     icon: jsx(WarningIcon, {
       label: "errored-warning-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.warning', R300),
       testId: `${testId}-warning-icon`
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

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

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
@@ -55,7 +56,7 @@ export const ForbiddenView = ({
     icon: jsx(LockIcon, {
       label: "forbidden-lock-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.danger', R300),
       testId: `${testId}-lock-icon`
     }),
     text: jsx(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {

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

@@ -14,6 +14,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';
 const textDescriptionProps = { ...messages.not_found_description
 };
 export const blockCardNotFoundViewClassName = 'block-card-not-found-view';
@@ -45,7 +46,7 @@ export const NotFoundView = ({
     icon: jsx(WarningIcon, {
       label: "not-found-warning-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.warning', R300),
       testId: `${testId}-warning-icon`
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

package/dist/es2019/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';
@@ -20,12 +21,12 @@ export const ResolvingView = ({
   className: blockCardResolvingViewClassName
 }, jsx(DocumentFilledIcon, {
   size: "small",
-  primaryColor: N50,
+  primaryColor: token('color.icon.subtle', N50),
   label: "document-icon"
 }), jsx("span", {
   css: {
     fontSize: `${fontSize()}px`,
-    color: N90,
+    color: token('color.text.subtlest', N90),
     marginLeft: gs(0.5)
   }
 }, jsx(FormattedMessage, messages.loading)));

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

@@ -2,6 +2,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 const className = 'media-card-frame';
 export const cardShadow = ``;
@@ -36,7 +37,7 @@ function getinteractiveStyles({
     ${visibleStyles}
   }
   &:active {
-    background-color: ${colors.B50};
+    background-color: ${token('color.background.selected', colors.B50)};
   }
 ` : '';
   return `${visibleFrameStyles}${interactiveFrameStyles}`;
@@ -49,7 +50,7 @@ function selected({
     ${visibleStyles}
     &::after {
       cursor: pointer;
-      box-shadow: 0 0 0 3px ${colors.B100};
+      box-shadow: 0 0 0 3px ${token('color.border.selected', colors.B100)};
       content: '';
       outline: none;
       position: absolute;
@@ -96,10 +97,10 @@ const wrapperStyles = props => `
 `;
 
 const visibleStyles = `
-  background-color: ${colors.N30};
+  background-color: ${token('color.background.neutral.subtle', colors.N30)};
 
   &:after {
-    background: ${colors.N30} !important;
+    background: ${token('color.background.neutral', colors.N30)} !important;
   }
   .embed-header {
     opacity: 1;
@@ -128,7 +129,7 @@ export const Header = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  color: ${colors.N300};
+  color: ${token('color.icon', colors.N300)};
   opacity: 0;
   transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);
 `;
@@ -140,7 +141,7 @@ export const IconWrapper = styled.div`
 }) => {
   if (isPlaceholder) {
     return `
-      background-color: ${colors.N30};
+      background-color: ${token('color.skeleton', colors.N30)};
     `;
   } else {
     return '';
@@ -156,12 +157,12 @@ export const TextWrapper = styled.div`
         ${borderRadius}
         width: 125px;
         height: 12px;
-        background-color: ${colors.N30};
+        background-color: ${token('color.skeleton', colors.N30)};
       `;
   } else {
     return '';
   }
-}} color: ${colors.N300};
+}} color: ${token('color.text.subtlest', colors.N300)};
   font-size: 12px;
   line-height: 16px;
   ${ellipsis('none')};
@@ -172,7 +173,7 @@ export const TextWrapper = styled.div`
 export const Content = styled.div`
   ${borderRadius}
   ${cardShadow}
-  background-color: white;
+  background-color: ${token('elevation.surface', 'white')};
   position: absolute;
   z-index: 1;
   width: 100%;
@@ -198,8 +199,7 @@ export const Content = styled.div`
   if (isInteractive) {
     return `
           .${className}:hover & {
-            box-shadow: 0 4px 8px -2px rgba(23, 43, 77, 0.32),
-              0 0 1px rgba(23, 43, 77, 0.25);
+            box-shadow: ${token('elevation.shadow.overlay', '0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25)')};
           }
         `;
   } else {
@@ -224,7 +224,7 @@ export const ContentWrapper = styled.div`
   padding: 8px 12px 12px 12px;
 `;
 export const Title = styled.div`
-  color: ${colors.N900};
+  color: ${token('color.text', colors.N900)};
   font-size: 16px;
   font-weight: 500;
   line-height: ${20 / 16};
@@ -233,7 +233,7 @@ export const Title = styled.div`
 `;
 export const Byline = styled.div`
   margin-top: 4px;
-  color: ${colors.N300};
+  color: ${token('color.text.subtlest', colors.N300)};
   font-size: 12px;
   font-weight: normal;
   line-height: ${16 / 12};
@@ -241,7 +241,7 @@ export const Byline = styled.div`
 `;
 export const Description = styled.div`
   margin-top: 7px;
-  color: ${colors.N800};
+  color: ${token('color.text', colors.N800)};
   font-size: 12px;
   font-weight: normal;
   line-height: ${18 / 12};
@@ -256,7 +256,7 @@ export const Thumbnail = styled.div`
   ${size(48)}
   float: right;
   margin: 4px 0 12px 12px;
-  background-color: ${colors.N30};
+  background-color: ${token('color.skeleton', colors.N30)};
   background-image: url(${({
   src
 }) => src});

package/dist/es2019/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';
@@ -20,7 +21,7 @@ export const EmbedCardErroredView = ({
   testId: testId
 }, jsx(ErrorIcon, {
   size: "small",
-  primaryColor: R300,
+  primaryColor: token('color.icon.danger', R300),
   label: "error-icon"
 }), jsx("span", {
   css: {

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

@@ -3,28 +3,10 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/core';
-import Spinner from '@atlaskit/spinner';
 import Block from '../../block';
 import { SmartLinkSize } from '../../../../../../constants';
-
-const 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.
@@ -32,7 +14,6 @@ const getSpinnerSize = size => {
  * @see TitleBlock
  */
 
-
 const TitleBlockResolvingView = ({
   actionGroup,
   testId,
@@ -42,12 +23,16 @@ const TitleBlockResolvingView = ({
   const {
     size = SmartLinkSize.Medium
   } = blockProps;
+  const iconWidth = getIconWidth(size);
+  const iconStyles = getIconSizeStyles(iconWidth);
   return jsx(Block, _extends({}, blockProps, {
     testId: `${testId}-resolving-view`
-  }), jsx(Spinner, {
-    size: getSpinnerSize(size),
-    testId: `${testId}-resolving-spinner`
-  }), title, actionGroup);
+  }), jsx("span", {
+    css: iconStyles,
+    "data-testid": `${testId}-icon`
+  }, jsx(LoadingSkeleton, {
+    testId: `${testId}-icon-loading`
+  })), title, actionGroup);
 };
 
 export default TitleBlockResolvingView;

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

@@ -2,7 +2,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
+
 const importIconMapper = {
   [IconType.Archive]: () => import(
   /* webpackChunkName: "glyphArchive" */
@@ -228,10 +229,14 @@ const AtlaskitIcon = ({
       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:
@@ -239,7 +244,7 @@ const AtlaskitIcon = ({
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        primaryColor: R400
+        primaryColor: token('color.icon.danger', R400)
       });
 
     default:

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

@@ -1,33 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx, keyframes } from '@emotion/core';
+import { jsx } from '@emotion/core';
 import ImageLoader from 'react-render-image';
-const placeholderShimmer = keyframes`
-  0% { background-position: -20px 0; }
-  100% { background-position: 20px 0; }
-`;
-const shimmer = css`
-  border-radius: 2px;
-  user-select: none;
-
-  background: #f6f7f8;
-  background-image: linear-gradient(
-    to right,
-    #f6f7f8 0%,
-    #edeef1 20%,
-    #f6f7f8 40%,
-    #f6f7f8 100%
-  );
-  background-repeat: no-repeat;
-  background-size: 280% 100%;
-  display: inline-block;
-
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: ${placeholderShimmer};
-  animation-timing-function: linear;
-`;
+import LoadingSkeleton from '../loading-skeleton';
 
 const ImageIcon = ({
   defaultIcon,
@@ -35,9 +10,8 @@ const ImageIcon = ({
   url
 }) => jsx(ImageLoader, {
   src: url,
-  loading: jsx("span", {
-    css: shimmer,
-    "data-testid": `${testId}-loading`
+  loading: jsx(LoadingSkeleton, {
+    testId: `${testId}-loading`
   }),
   loaded: jsx("img", {
     src: url,

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

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx, keyframes } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
+const animationNameStyles = keyframes`
+  0% { background-position: -20px 0; }
+  100% { background-position: 20px 0; }
+`;
+const styles = css`
+  border-radius: 2px;
+  user-select: none;
+  background: ${token('color.skeleton.subtle', '#f6f7f8')};
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
+  background-image: linear-gradient(
+    to right,
+    ${token('color.skeleton.subtle', '#f6f7f8')} 0%,
+    ${token('color.skeleton', '#edeef1')} 20%,
+    ${token('color.skeleton.subtle', '#f6f7f8')} 40%,
+    ${token('color.skeleton.subtle', '#f6f7f8')}100%
+  );
+  background-repeat: no-repeat;
+  background-size: 280% 100%;
+  display: inline-block;
+
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: ${animationNameStyles};
+  animation-timing-function: linear;
+`;
+
+const LoadingSkeleton = ({
+  testId
+}) => jsx("span", {
+  css: styles,
+  "data-testid": testId
+});
+
+export default LoadingSkeleton;

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

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

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

@@ -5,7 +5,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';
 
 const getPositionStyles = (size, position) => {
   switch (position) {
@@ -23,23 +23,6 @@ const getPositionStyles = (size, position) => {
   }
 };
 
-const 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';
-  }
-};
-
 const getIconStyles = (size, position, width) => css`
   ${getPositionStyles(size, position)}
   ${getIconSizeStyles(width)}
@@ -105,7 +88,7 @@ const Icon = ({
     const 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]);
-  const width = getWidth(size);
+  const width = getIconWidth(size);
   const styles = getIconStyles(size, position, width);
   const renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return jsx("div", {

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

@@ -14,6 +14,7 @@ const containerStyles = css`
 
 const getThemeStyles = theme => {
   switch (theme) {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case SmartLinkTheme.Black:
       return css`
         color: ${tokens.blackLink};

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

@@ -39,6 +39,22 @@ export const getIconSizeStyles = width => {
     }
   `;
 };
+export const 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 const getLinkLineHeight = size => {
   switch (size) {
     case SmartLinkSize.XLarge:

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -61,7 +62,7 @@ export class InlineCardErroredView extends 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/es2019/view/InlineCard/ForbiddenView/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -13,7 +14,7 @@ import { IconStyledButton, LowercaseAppearance, LinkAppearance } from '../styled
 const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
-  primaryColor: R400
+  primaryColor: token('color.icon.danger', R400)
 }));
 export class InlineCardForbiddenView extends React.Component {
   constructor(...args) {
@@ -91,7 +92,7 @@ export class InlineCardForbiddenView extends React.Component {
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
       icon: icon ? icon : FallbackForbiddenIcon,
       title: this.renderMessage(),
-      titleColor: N500
+      titleColor: token('color.text.subtle', N500)
     }));
   }