@atlaskit/smart-card 18.0.15 → 18.0.16

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

@@ -13,6 +13,8 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _core = require("@emotion/core");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var placeholderShimmer = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-position: -20px 0;\n  }\n\n  100% {\n    background-position: 20px 0;\n  }\n"]))); // TODO: Figure out a more scalable/responsive solution
@@ -32,6 +34,6 @@ var AKIconWrapper = _styled.default.span(_templateObject3 || (_templateObject3 =
 
 exports.AKIconWrapper = AKIconWrapper;
 
-var Shimmer = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  background: #f6f7f8;\n  background-image: linear-gradient(\n    to right,\n    #f6f7f8 0%,\n    #edeef1 20%,\n    #f6f7f8 40%,\n    #f6f7f8 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 40px 14px;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), placeholderShimmer);
+var Shimmer = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 40px 14px;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), placeholderShimmer);
 
 exports.Shimmer = Shimmer;

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

@@ -27,6 +27,8 @@ var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-fill
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -48,7 +50,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var FallbackUnauthorizedIcon = /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
   label: "error",
   size: "small",
-  primaryColor: _colors.R400
+  primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R400)
 }));
 
 var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
@@ -108,7 +110,7 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         icon: icon ? icon : FallbackUnauthorizedIcon,
         title: this.renderMessage(),
-        titleColor: _colors.N500
+        titleColor: (0, _tokens.token)('color.text.subtle', _colors.N500)
       }));
     }
   }]);

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

@@ -15,6 +15,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var LINK_COLOR_DARK = '#4794FF'; // By default buttons will hide overflow and ellipsis content instead of wrapping.
@@ -25,8 +27,8 @@ var IconStyledButton = _styled.default.span(_templateObject || (_templateObject
 exports.IconStyledButton = IconStyledButton;
 
 var NoLinkAppearance = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _components.themed)({
-  light: _colors.N200,
-  dark: LINK_COLOR_DARK
+  light: (0, _tokens.token)('color.text.subtlest', _colors.N200),
+  dark: (0, _tokens.token)('color.text.subtlest', LINK_COLOR_DARK)
 }));
 
 exports.NoLinkAppearance = NoLinkAppearance;
@@ -36,8 +38,8 @@ var LowercaseAppearance = _styled.default.span(_templateObject3 || (_templateObj
 exports.LowercaseAppearance = LowercaseAppearance;
 
 var LinkAppearance = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _components.themed)({
-  light: _colors.B400,
-  dark: LINK_COLOR_DARK
+  light: (0, _tokens.token)('color.link', _colors.B400),
+  dark: (0, _tokens.token)('color.link', LINK_COLOR_DARK)
 }));
 
 exports.LinkAppearance = LinkAppearance;

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

@@ -9,6 +9,8 @@ var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _utils = require("./utils");
 
 /** @jsx jsx */
@@ -21,7 +23,7 @@ var Byline = function Byline(_ref) {
     css: (0, _utils.mq)({
       fontSize: (0, _utils.gs)(1.5),
       lineHeight: (0, _utils.gs)(2.5),
-      color: "".concat(_colors.N300),
+      color: "".concat((0, _tokens.token)('color.text.subtlest', _colors.N300)),
       fontWeight: 'normal',
       marginTop: (0, _utils.gs)(0.5),
       // Spec: only allow two lines MAX to be shown.

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

@@ -15,6 +15,8 @@ var _utils = require("./utils");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 /** @jsx jsx */
 var Metadata = function Metadata(_ref) {
   var text = _ref.text,
@@ -42,7 +44,7 @@ var Metadata = function Metadata(_ref) {
   }, metadataIcon, (0, _core.jsx)("span", {
     css: {
       fontSize: (0, _utils.gs)(1.5),
-      color: "".concat(_colors.N300),
+      color: "".concat((0, _tokens.token)('color.text.subtlest', _colors.N300)),
       marginRight: (0, _utils.gs)(0.5),
       marginLeft: '2px'
     }

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

@@ -21,6 +21,8 @@ var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _utils = require("./utils");
@@ -64,7 +66,7 @@ var Header = function Header(_ref) {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'baseline',
-      borderBottom: "1px solid ".concat(_colors.N30A)
+      borderBottom: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N30A))
     }
   }, (0, _core.jsx)("div", {
     css: {
@@ -81,7 +83,7 @@ var Header = function Header(_ref) {
     }
   }, (0, _core.jsx)("h3", null, title), (0, _core.jsx)("div", {
     css: {
-      color: _colors.N100
+      color: (0, _tokens.token)('color.text.subtlest', _colors.N100)
     }
   }, metadata.items.length && (0, _core.jsx)(_MetadataList.MetadataList, {
     items: metadata.items

package/dist/es2019/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 @@ const 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/es2019/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 const extractCommentCount = jsonLd => {
   const commentCount = jsonLd['schema:commentCount'];
@@ -11,7 +12,7 @@ export const extractCommentCount = jsonLd => {
         label: "comment-count",
         key: "comments-count-icon",
         size: "small",
-        primaryColor: N600
+        primaryColor: token('color.icon.subtle', N600)
       })
     };
   }

package/dist/es2019/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 const extractProgrammingLanguage = jsonLd => {
   const programmingLanguage = jsonLd['schema:programmingLanguage'];
 
@@ -10,7 +11,7 @@ export const extractProgrammingLanguage = jsonLd => {
       icon: /*#__PURE__*/React.createElement(CodeIcon, {
         size: "small",
         label: "code",
-        primaryColor: N600
+        primaryColor: token('color.icon.subtle', N600)
       })
     };
   }

package/dist/es2019/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 const extractSubscriberCount = jsonLd => {
   const subscriberCount = jsonLd['atlassian:subscriberCount'];
 
@@ -10,7 +11,7 @@ export const extractSubscriberCount = jsonLd => {
       icon: /*#__PURE__*/React.createElement(PeopleIcon, {
         size: "small",
         label: "subscribers",
-        primaryColor: N600
+        primaryColor: token('color.icon.subtle', N600)
       })
     };
   }

package/dist/es2019/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 const extractTitleTextColor = jsonLd => {
   const type = jsonLd['@type'];
 
@@ -8,7 +9,7 @@ export const extractTitleTextColor = jsonLd => {
 
     switch (highestPriorityType) {
       case 'atlassian:UndefinedLink':
-        return R500;
+        return token('color.text.danger', R500);
 
       default:
         return undefined;

package/dist/es2019/version.json

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

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

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/core';
 import React from 'react';
 import { N20A, N30A, B200, N40A, N50A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { gs, br, mq } from '../../common/utils';
 export const Frame = (props = {
   isSelected: false,
@@ -12,7 +13,7 @@ const sharedFrameStyles = {
   maxWidth: gs(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: 'white'
+  backgroundColor: token('elevation.surface', 'white')
 };
 export const ExpandedFrame = ({
   children,
@@ -25,15 +26,16 @@ export const ExpandedFrame = ({
   return jsx("div", {
     css: mq({ ...sharedFrameStyles,
       '&:hover': isHoverable ? {
-        backgroundColor: N20A,
+        // TODO: https://product-fabric.atlassian.net/browse/DSP-4064
+        backgroundColor: token('color.background.neutral.subtle.hovered', N20A),
         cursor: 'pointer'
       } : undefined,
       minHeight: isFluidHeight ? 0 : [gs(21), gs(15)],
       borderRadius: isSelected ? br() : br(0.5),
-      border: `2px solid ${isSelected ? B200 : 'transparent'}`,
+      border: `2px solid ${isSelected ? token('color.border.selected', B200) : 'transparent'}`,
       justifyContent: 'space-between',
       overflow: 'hidden',
-      boxShadow: `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A};`
+      boxShadow: token('elevation.shadow.raised', `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`)
     }),
     "data-testid": testId,
     className: className,
@@ -51,14 +53,14 @@ export const CompactFrame = ({
   return jsx("div", {
     css: mq({ ...sharedFrameStyles,
       '&:hover': isHoverable ? {
-        backgroundColor: N30A
+        backgroundColor: token('color.background.neutral.hovered', N30A)
       } : undefined,
       borderRadius: isSelected ? br() : br(0.5),
-      border: isSelected ? `2px solid ${B200}` : '',
+      border: isSelected ? `2px solid ${token('color.border.selected', B200)}` : '',
       justifyContent: 'center',
       alignItems: 'center',
       height: inheritDimensions ? '100%' : gs(5),
-      backgroundColor: N20A,
+      backgroundColor: token('color.background.neutral', N20A),
       width: ['calc(100% - 16px)', '100%'],
       padding: [`0px ${gs(1)}`, '0']
     }),

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

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

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

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

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

@@ -15,6 +15,7 @@ import { handleClickCommon } from '../utils/handlers';
 import { Link } from '../components/Link';
 import { UnresolvedText } from '../components/UnresolvedText';
 import { RetryAction } from '../actions/RetryAction';
+import { token } from '@atlaskit/tokens';
 const textDescriptionProps = { ...messages.could_not_load_link
 };
 export const blockCardErroredViewClassName = 'block-card-errored-view';
@@ -47,7 +48,7 @@ export const ErroredView = ({
     icon: jsx(WarningIcon, {
       label: "errored-warning-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.warning', R300),
       testId: `${testId}-warning-icon`
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

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

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/core';
 import { FormattedMessage } from 'react-intl-next';
 import { R300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import { Frame } from '../components/Frame';
 import { Provider } from '../components/Provider';
@@ -55,7 +56,7 @@ export const ForbiddenView = ({
     icon: jsx(LockIcon, {
       label: "forbidden-lock-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.danger', R300),
       testId: `${testId}-lock-icon`
     }),
     text: jsx(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {

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

@@ -14,6 +14,7 @@ import { ContentHeader } from '../components/ContentHeader';
 import { Link } from '../components/Link';
 import { UnresolvedText } from '../components/UnresolvedText';
 import { handleClickCommon } from '../utils/handlers';
+import { token } from '@atlaskit/tokens';
 const textDescriptionProps = { ...messages.not_found_description
 };
 export const blockCardNotFoundViewClassName = 'block-card-not-found-view';
@@ -45,7 +46,7 @@ export const NotFoundView = ({
     icon: jsx(WarningIcon, {
       label: "not-found-warning-icon",
       size: "small",
-      primaryColor: R300,
+      primaryColor: token('color.icon.warning', R300),
       testId: `${testId}-warning-icon`
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/core';
 import ImageLoader from 'react-render-image';
+import { token } from '@atlaskit/tokens';
 const placeholderShimmer = keyframes`
   0% { background-position: -20px 0; }
   100% { background-position: 20px 0; }
@@ -9,14 +10,14 @@ const placeholderShimmer = keyframes`
 const shimmer = css`
   border-radius: 2px;
   user-select: none;
-
-  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: 280% 100%;

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

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

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { R300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import Button from '@atlaskit/button/custom-theme-button';
 import { Frame } from '../Frame';
@@ -61,7 +62,7 @@ export class InlineCardErroredView extends React.Component {
       icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
         label: "error",
         size: "small",
-        primaryColor: R300
+        primaryColor: token('color.icon.danger', R300)
       })),
       title: this.renderMessage()
     }));