@atlaskit/smart-card 18.0.13 → 18.0.16

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/smart-card
 
+## 18.0.16
+
+### Patch Changes
+
+- [`63d05619104`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63d05619104) - [ux] Instrumented `@atlaskit/smart-card` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+## 18.0.15
+
+### Patch Changes
+
+- [`c2a240de738`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2a240de738) - Add inline documentation for Flexible UI
+- [`6976489a51a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6976489a51a) - Flexible UI: Enable css override for actions
+- [`7d4e18ffddb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d4e18ffddb) - instrument analytics events for hover card
+- [`a123e96fc62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a123e96fc62) - expose prop on smart card
+- [`5af3b7aba2a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5af3b7aba2a) - Flexible UI: Fix icon-only action padding
+- [`3e19e206713`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3e19e206713) - Flexible UI: Enable css override on elements
+- [`750cb867124`](https://bitbucket.org/atlassian/atlassian-frontend/commits/750cb867124) - Flexible UI: Enable css override on blocks
+
+## 18.0.14
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- Updated dependencies
+
 ## 18.0.13
 
 ### Patch Changes

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

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _confluenceIcon = require("@atlaskit/logo/confluence-icon");
 
 var _jiraIcon = require("@atlaskit/logo/jira-icon");
@@ -50,18 +52,26 @@ var extractProviderIcon = function extractProviderIcon(icon, id) {
   if (id) {
     if (id === _constants.CONFLUENCE_GENERATOR_ID) {
       return /*#__PURE__*/_react.default.createElement(_confluenceIcon.ConfluenceIcon, {
-        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,
+        iconGradientStop: _colors.B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         size: "xsmall"
       });
     } else if (id === _constants.JIRA_GENERATOR_ID) {
       return /*#__PURE__*/_react.default.createElement(_jiraIcon.JiraIcon, {
-        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,
+        iconGradientStop: _colors.B200
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+        ,
         size: "xsmall"
       });
     }

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

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

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

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

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

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

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

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

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

@@ -32,6 +32,9 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
         });
         dispatchAnalytics((0, _analytics.uiActionClickedEvent)(extensionKey, actionType, display));
       },
+      hoverCardOpenLinkClickedEvent: function hoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod) {
+        dispatchAnalytics((0, _analytics.uiHoverCardOpenLinkClickedEvent)(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
+      },
       closedAuthEvent: function closedAuthEvent(display, definitionId, extensionKey) {
         return dispatchAnalytics((0, _analytics.uiClosedAuthEvent)(display, definitionId, extensionKey));
       },
@@ -45,6 +48,12 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
           display: display
         });
         dispatchAnalytics((0, _analytics.uiRenderSuccessEvent)(display, definitionId, extensionKey));
+      },
+      hoverCardViewedEvent: function hoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod) {
+        return dispatchAnalytics((0, _analytics.uiHoverCardViewedEvent)(hoverDisplay, definitionId, extensionKey, previewInvokeMethod));
+      },
+      hoverCardDismissedEvent: function hoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) {
+        return dispatchAnalytics((0, _analytics.uiHoverCardDismissedEvent)(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
       }
     };
   }, [dispatchAnalytics]);

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

@@ -7,6 +7,10 @@ exports.useFlexibleUiContext = exports.FlexibleUiContext = void 0;
 
 var _react = require("react");
 
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
 var FlexibleUiContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 exports.FlexibleUiContext = FlexibleUiContext;
 

package/dist/cjs/utils/analytics/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unresolvedEvent = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = exports.trackAppAccountConnected = exports.screenAuthPopupEvent = exports.resolvedEvent = exports.invokeSucceededEvent = exports.invokeFailedEvent = exports.fireSmartLinkEvent = exports.context = exports.connectSucceededEvent = exports.connectFailedEvent = exports.SmartLinkEvents = exports.ANALYTICS_CHANNEL = void 0;
+exports.unresolvedEvent = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiHoverCardViewedEvent = exports.uiHoverCardOpenLinkClickedEvent = exports.uiHoverCardDismissedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = exports.trackAppAccountConnected = exports.screenAuthPopupEvent = exports.resolvedEvent = exports.invokeSucceededEvent = exports.invokeFailedEvent = exports.fireSmartLinkEvent = exports.context = exports.connectSucceededEvent = exports.connectFailedEvent = exports.SmartLinkEvents = exports.ANALYTICS_CHANNEL = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -317,4 +317,54 @@ var uiRenderFailedEvent = function uiRenderFailedEvent(display, error, errorInfo
   };
 };
 
-exports.uiRenderFailedEvent = uiRenderFailedEvent;
+exports.uiRenderFailedEvent = uiRenderFailedEvent;
+
+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
+    })
+  };
+};
+
+exports.uiHoverCardViewedEvent = uiHoverCardViewedEvent;
+
+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
+    })
+  };
+};
+
+exports.uiHoverCardDismissedEvent = uiHoverCardDismissedEvent;
+
+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
+    })
+  };
+};
+
+exports.uiHoverCardOpenLinkClickedEvent = uiHoverCardOpenLinkClickedEvent;

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

@@ -96,6 +96,24 @@ Object.defineProperty(exports, "uiClosedAuthEvent", {
     return _analytics.uiClosedAuthEvent;
   }
 });
+Object.defineProperty(exports, "uiHoverCardDismissedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.uiHoverCardDismissedEvent;
+  }
+});
+Object.defineProperty(exports, "uiHoverCardOpenLinkClickedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.uiHoverCardOpenLinkClickedEvent;
+  }
+});
+Object.defineProperty(exports, "uiHoverCardViewedEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.uiHoverCardViewedEvent;
+  }
+});
 Object.defineProperty(exports, "uiRenderFailedEvent", {
   enumerable: true,
   get: function get() {

package/dist/cjs/version.json

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

@@ -51,7 +51,8 @@ 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 = (0, _state.useSmartLink)(id, url, dispatchAnalytics),
@@ -155,7 +156,8 @@ function CardWithUrlContent(_ref) {
         isSelected: isSelected,
         onResolve: onResolve,
         testId: testId,
-        inlinePreloaderStyle: inlinePreloaderStyle
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        showHoverPreview: showHoverPreview
       });
 
     case 'block':

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

@@ -69,7 +69,8 @@ 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 = (0, _react.useCallback)(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
@@ -122,7 +123,8 @@ function CardWithURLRenderer(props) {
     platform: platform,
     embedIframeRef: embedIframeRef,
     inlinePreloaderStyle: inlinePreloaderStyle,
-    ui: ui
+    ui: ui,
+    showHoverPreview: showHoverPreview
   };
   return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
     FallbackComponent: ErrorFallback,

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: {