@atlaskit/smart-card 18.0.13 → 18.0.16

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

@@ -1,13 +1,13 @@
 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';
 const BACKGROUND_COLOR_DARK = '#262B31';
 const selected = `
   cursor: pointer;
-  box-shadow: 0 0 0 2px ${B100};
+  box-shadow: 0 0 0 2px ${token('color.border.selected', B100)};
   outline: none;
   user-select: none;
   &, :hover, :focus, :active {
@@ -23,15 +23,15 @@ const isInteractive = ({
       cursor: pointer;
       :hover {
         background-color: ${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)
     })};
         text-decoration: none;
       }
       :active {
         background-color: ${themed({
-      light: B50,
-      dark: BACKGROUND_COLOR_DARK
+      light: token('color.background.selected', B50),
+      dark: token('color.background.selected', BACKGROUND_COLOR_DARK)
     })};
         text-decoration: none;
       }
@@ -86,14 +86,17 @@ export const Wrapper = styled.a`
   box-decoration-break: clone;
   border-radius: ${akBorderRadius()}px;
   color: ${themed({
-  light: B400,
-  dark: '#4794FF'
+  light: token('color.link', B400),
+  dark: token('color.link', '#4794FF')
 })};
   background-color: ${props => props.withoutBackground ? '' : themed({
-  light: 'white',
-  dark: BACKGROUND_COLOR_DARK
+  light: token('elevation.surface.raised', 'white'),
+  dark: token('elevation.surface.raised', 'BACKGROUND_COLOR_DARK')
 })};
-  ${props => props.withoutBackground ? '' : e100()};
+  ${props => props.withoutBackground ? '' : themed({
+  light: `box-shadow: ${token('elevation.shadow.raised', `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`)};`,
+  dark: `box-shadow: ${token('elevation.shadow.raised', `0 1px 1px ${DN50A}, 0 0 1px 1px ${DN40A}`)};`
+})}
   ${props => isInteractive(props)}
   ${props => isSelected(props)};
   ${props => withoutHover(props)}

package/dist/es2019/view/InlineCard/Icon.js

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
 const placeholderShimmer = keyframes`
   0% {
     background-position: -20px 0;
@@ -41,14 +42,14 @@ export const Shimmer = styled.span`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-
-  background: #f6f7f8;
+  background: ${token('color.skeleton.subtle', '#f6f7f8')};
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
   background-image: linear-gradient(
     to right,
-    #f6f7f8 0%,
-    #edeef1 20%,
-    #f6f7f8 40%,
-    #f6f7f8 100%
+    ${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: 40px 14px;

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

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import Button from '@atlaskit/button/custom-theme-button';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import { N500, R400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui/messages';
@@ -12,7 +13,7 @@ import { IconStyledButton, LinkAppearance } from '../styled';
 const FallbackUnauthorizedIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
-  primaryColor: R400
+  primaryColor: token('color.icon.danger', R400)
 }));
 export class InlineCardUnauthorizedView extends React.Component {
   constructor(...args) {
@@ -59,7 +60,7 @@ export class InlineCardUnauthorizedView extends React.Component {
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
       icon: icon ? icon : FallbackUnauthorizedIcon,
       title: this.renderMessage(),
-      titleColor: N500
+      titleColor: token('color.text.subtle', N500)
     }));
   }
 

package/dist/es2019/view/InlineCard/styled.js

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 const LINK_COLOR_DARK = '#4794FF'; // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 
@@ -24,8 +25,8 @@ export const IconStyledButton = styled.span`
 `;
 export const NoLinkAppearance = styled.span`
   color: ${themed({
-  light: N200,
-  dark: LINK_COLOR_DARK
+  light: token('color.text.subtlest', N200),
+  dark: token('color.text.subtlest', LINK_COLOR_DARK)
 })};
 `;
 export const LowercaseAppearance = styled.span`
@@ -33,7 +34,7 @@ export const LowercaseAppearance = styled.span`
 `;
 export const LinkAppearance = styled.span`
   color: ${themed({
-  light: B400,
-  dark: LINK_COLOR_DARK
+  light: token('color.link', B400),
+  dark: token('color.link', LINK_COLOR_DARK)
 })};
 `;

package/dist/es2019/view/common/Byline.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { N300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { gs, mq } from './utils';
 export const Byline = ({
   text,
@@ -11,7 +12,7 @@ export const Byline = ({
   css: mq({
     fontSize: gs(1.5),
     lineHeight: gs(2.5),
-    color: `${N300}`,
+    color: `${token('color.text.subtlest', N300)}`,
     fontWeight: 'normal',
     marginTop: gs(0.5),
     // Spec: only allow two lines MAX to be shown.

package/dist/es2019/view/common/Metadata.js

@@ -3,6 +3,7 @@ import { jsx } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
 import { gs } from './utils';
 import { N300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const Metadata = ({
   text,
   icon,
@@ -30,7 +31,7 @@ export const Metadata = ({
   }, metadataIcon, jsx("span", {
     css: {
       fontSize: gs(1.5),
-      color: `${N300}`,
+      color: `${token('color.text.subtlest', N300)}`,
       marginRight: gs(0.5),
       marginLeft: '2px'
     }

package/dist/es2019/view/common/ModalHeader.js

@@ -6,6 +6,7 @@ import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N100, N30A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { FormattedMessage } from 'react-intl-next';
 import { gs } from './utils';
 import { Icon } from './Icon';
@@ -41,7 +42,7 @@ export const Header = ({
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'baseline',
-      borderBottom: `1px solid ${N30A}`
+      borderBottom: `1px solid ${token('color.border', N30A)}`
     }
   }, jsx("div", {
     css: {
@@ -58,7 +59,7 @@ export const Header = ({
     }
   }, jsx("h3", null, title), jsx("div", {
     css: {
-      color: N100
+      color: token('color.text.subtlest', N100)
     }
   }, metadata.items.length && jsx(MetadataList, {
     items: metadata.items

package/dist/esm/extractors/common/context/extractProvider.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { N700, B200, B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { ConfluenceIcon } from '@atlaskit/logo/confluence-icon';
 import { JiraIcon } from '@atlaskit/logo/jira-icon';
 import { extractUrlFromIconJsonLd } from '../utils';
@@ -33,18 +34,26 @@ var extractProviderIcon = function extractProviderIcon(icon, id) {
   if (id) {
     if (id === CONFLUENCE_GENERATOR_ID) {
       return /*#__PURE__*/React.createElement(ConfluenceIcon, {
-        textColor: N700,
+        textColor: token('color.text.subtle', N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         iconColor: B200,
         iconGradientStart: B400,
-        iconGradientStop: B200,
+        iconGradientStop: B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         size: "xsmall"
       });
     } else if (id === JIRA_GENERATOR_ID) {
       return /*#__PURE__*/React.createElement(JiraIcon, {
-        textColor: N700,
+        textColor: token('color.text.subtle', N700)
+        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         iconColor: B200,
         iconGradientStart: B400,
-        iconGradientStop: B200,
+        iconGradientStop: B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         size: "xsmall"
       });
     }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { N600 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import ChatIcon from '@atlaskit/icon/glyph/comment';
 export var extractCommentCount = function extractCommentCount(jsonLd) {
   var commentCount = jsonLd['schema:commentCount'];
@@ -11,7 +12,7 @@ export var extractCommentCount = function extractCommentCount(jsonLd) {
         label: "comment-count",
         key: "comments-count-icon",
         size: "small",
-        primaryColor: N600
+        primaryColor: token('color.icon.subtle', N600)
       })
     };
   }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { N600 } from '@atlaskit/theme/colors';
 import CodeIcon from '@atlaskit/icon/glyph/code';
+import { token } from '@atlaskit/tokens';
 export var extractProgrammingLanguage = function extractProgrammingLanguage(jsonLd) {
   var programmingLanguage = jsonLd['schema:programmingLanguage'];
 
@@ -10,7 +11,7 @@ export var extractProgrammingLanguage = function extractProgrammingLanguage(json
       icon: /*#__PURE__*/React.createElement(CodeIcon, {
         size: "small",
         label: "code",
-        primaryColor: N600
+        primaryColor: token('color.icon.subtle', N600)
       })
     };
   }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { N600 } from '@atlaskit/theme/colors';
 import PeopleIcon from '@atlaskit/icon/glyph/people';
+import { token } from '@atlaskit/tokens';
 export var extractSubscriberCount = function extractSubscriberCount(jsonLd) {
   var subscriberCount = jsonLd['atlassian:subscriberCount'];
 
@@ -10,7 +11,7 @@ export var extractSubscriberCount = function extractSubscriberCount(jsonLd) {
       icon: /*#__PURE__*/React.createElement(PeopleIcon, {
         size: "small",
         label: "subscribers",
-        primaryColor: N600
+        primaryColor: token('color.icon.subtle', N600)
       })
     };
   }

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

@@ -1,5 +1,6 @@
 import { extractorPriorityMap } from '../icon/priority';
 import { R500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var extractTitleTextColor = function extractTitleTextColor(jsonLd) {
   var type = jsonLd['@type'];
 
@@ -10,7 +11,7 @@ export var extractTitleTextColor = function extractTitleTextColor(jsonLd) {
 
     switch (highestPriorityType) {
       case 'atlassian:UndefinedLink':
-        return R500;
+        return token('color.text.danger', R500);
 
       default:
         return undefined;

package/dist/esm/state/analytics/useSmartLinkAnalytics.js

@@ -1,4 +1,4 @@
-import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, resolvedEvent as _resolvedEvent, unresolvedEvent as _unresolvedEvent, invokeSucceededEvent as _invokeSucceededEvent, invokeFailedEvent as _invokeFailedEvent, connectSucceededEvent as _connectSucceededEvent, connectFailedEvent as _connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
+import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, resolvedEvent as _resolvedEvent, unresolvedEvent as _unresolvedEvent, invokeSucceededEvent as _invokeSucceededEvent, invokeFailedEvent as _invokeFailedEvent, connectSucceededEvent as _connectSucceededEvent, connectFailedEvent as _connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { useMemo } from 'react';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
 export var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
@@ -22,6 +22,9 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalyt
         });
         dispatchAnalytics(uiActionClickedEvent(extensionKey, actionType, display));
       },
+      hoverCardOpenLinkClickedEvent: function hoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
+        dispatchAnalytics(uiHoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
+      },
       closedAuthEvent: function closedAuthEvent(display, definitionId, extensionKey) {
         return dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey));
       },
@@ -35,6 +38,12 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalyt
           display: display
         });
         dispatchAnalytics(uiRenderSuccessEvent(display, definitionId, extensionKey));
+      },
+      hoverCardViewedEvent: function hoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod) {
+        return dispatchAnalytics(uiHoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod));
+      },
+      hoverCardDismissedEvent: function hoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) {
+        return dispatchAnalytics(uiHoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
       }
     };
   }, [dispatchAnalytics]);

package/dist/esm/state/flexible-ui-context/index.js

@@ -1,4 +1,9 @@
 import { useContext, createContext } from 'react';
+
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
 export var FlexibleUiContext = /*#__PURE__*/createContext(undefined);
 export var useFlexibleUiContext = function useFlexibleUiContext() {
   return useContext(FlexibleUiContext);

package/dist/esm/utils/analytics/analytics.js

@@ -252,4 +252,45 @@ export var uiRenderFailedEvent = function uiRenderFailedEvent(display, error, er
       display: display
     }
   };
+};
+export var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod) {
+  return {
+    action: 'viewed',
+    actionSubject: 'hoverCard',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      definitionId: definitionId || '',
+      extensionKey: extensionKey || '',
+      hoverDisplay: hoverDisplay,
+      previewInvokeMethod: previewInvokeMethod
+    })
+  };
+};
+export var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) {
+  return {
+    action: 'dismissed',
+    actionSubject: 'hoverCard',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      definitionId: definitionId || '',
+      extensionKey: extensionKey || '',
+      hoverTime: hoverTime,
+      hoverDisplay: hoverDisplay,
+      previewInvokeMethod: previewInvokeMethod
+    })
+  };
+};
+export var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
+  return {
+    action: 'clicked',
+    actionSubject: 'button',
+    actionSubjectId: 'shortcutGoToLink',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      definitionId: definitionId || '',
+      extensionKey: extensionKey || '',
+      previewDisplay: previewDisplay,
+      previewInvokeMethod: previewInvokeMethod
+    })
+  };
 };

package/dist/esm/utils/analytics/index.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { resolvedEvent, unresolvedEvent } from './analytics';
 import { getMeasure } from '../performance';
-export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent } from './analytics';
+export { ANALYTICS_CHANNEL, context, fireSmartLinkEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, screenAuthPopupEvent, uiRenderSuccessEvent, uiRenderFailedEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent } from './analytics';
 export var instrumentEvent = function instrumentEvent(id, status, definitionId, extensionKey, resourceType, error) {
   var measure = getMeasure(id, status) || {
     duration: undefined

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "18.0.13",
+	"version": "18.0.16",
 	"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/CardWithUrl/component.js

@@ -25,7 +25,8 @@ export function CardWithUrlContent(_ref) {
       embedIframeRef = _ref.embedIframeRef,
       inlinePreloaderStyle = _ref.inlinePreloaderStyle,
       ui = _ref.ui,
-      children = _ref.children;
+      children = _ref.children,
+      showHoverPreview = _ref.showHoverPreview;
 
   // Get state, actions for this card.
   var _useSmartLink = useSmartLink(id, url, dispatchAnalytics),
@@ -129,7 +130,8 @@ export function CardWithUrlContent(_ref) {
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,
-        inlinePreloaderStyle: inlinePreloaderStyle
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        showHoverPreview: showHoverPreview
       });
 
     case 'block':

package/dist/esm/view/CardWithUrl/loader.js

@@ -45,7 +45,8 @@ export function CardWithURLRenderer(props) {
       inlinePreloaderStyle = props.inlinePreloaderStyle,
       createAnalyticsEvent = props.createAnalyticsEvent,
       children = props.children,
-      ui = props.ui; // Wrapper around analytics.
+      ui = props.ui,
+      showHoverPreview = props.showHoverPreview; // Wrapper around analytics.
 
   var dispatchAnalytics = useCallback(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
@@ -98,7 +99,8 @@ export function CardWithURLRenderer(props) {
     platform: platform,
     embedIframeRef: embedIframeRef,
     inlinePreloaderStyle: inlinePreloaderStyle,
-    ui: ui
+    ui: ui,
+    showHoverPreview: showHoverPreview
   };
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: ErrorFallback,