@atlaskit/smart-card 18.0.15 → 18.0.16

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)
     }));
   }
 

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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "18.0.15",
+	"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/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: {