@atlaskit/smart-card 18.0.15 → 18.0.16

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

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

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

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

@@ -19,6 +19,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("../../../../../constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _importIconMapper;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -314,10 +316,14 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         "data-testid": testId // Confluence and Jira imports don't have native testId prop
         ,
-        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
+        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
       });
 
     case _constants.IconType.Error:
@@ -325,7 +331,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        primaryColor: _colors.R400
+        primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R400)
       });
 
     default:

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

@@ -15,10 +15,12 @@ var _core = require("@emotion/core");
 
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2;
 
 var placeholderShimmer = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var shimmer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  user-select: none;\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: 280% 100%;\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 = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  user-select: none;\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: 280% 100%;\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);
 
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,

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

@@ -30,6 +30,7 @@ var containerStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _
 
 var getThemeStyles = function getThemeStyles(theme) {
   switch (theme) {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case _constants.SmartLinkTheme.Black:
       return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blackLink, _token.tokens.blackLinkPressed, _token.tokens.blackLink);
 

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

@@ -25,6 +25,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -110,7 +112,7 @@ var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         icon: icon || /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
           label: "error",
           size: "small",
-          primaryColor: _colors.R300
+          primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R300)
         })),
         title: this.renderMessage()
       }));

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

@@ -27,6 +27,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -50,7 +52,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var FallbackForbiddenIcon = /*#__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 InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
@@ -138,7 +140,7 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
         icon: icon ? icon : FallbackForbiddenIcon,
         title: this.renderMessage(),
-        titleColor: _colors.N500
+        titleColor: (0, _tokens.token)('color.text.subtle', _colors.N500)
       }));
     }
   }]);

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

@@ -15,27 +15,27 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _elevation = require("@atlaskit/theme/elevation");
-
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _styled2 = require("../IconAndTitleLayout/styled");
 
 var _templateObject;
 
 var BACKGROUND_COLOR_DARK = '#262B31';
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat(_colors.B100, ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat((0, _tokens.token)('color.border.selected', _colors.B100), ";\n  outline: none;\n  user-select: none;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
 
 var isInteractive = function isInteractive(_ref) {
   var isInteractive = _ref.isInteractive;
 
   if (isInteractive) {
     return "\n      cursor: pointer;\n      :hover {\n        background-color: ".concat((0, _components.themed)({
-      light: _colors.N20,
-      dark: BACKGROUND_COLOR_DARK
+      light: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20),
+      dark: (0, _tokens.token)('color.background.neutral.subtle.hovered', BACKGROUND_COLOR_DARK)
     }), ";\n        text-decoration: none;\n      }\n      :active {\n        background-color: ").concat((0, _components.themed)({
-      light: _colors.B50,
-      dark: BACKGROUND_COLOR_DARK
+      light: (0, _tokens.token)('color.background.selected', _colors.B50),
+      dark: (0, _tokens.token)('color.background.selected', BACKGROUND_COLOR_DARK)
     }), ";\n        text-decoration: none;\n      }\n      :focus {\n        ").concat(selected, "\n        text-decoration: none;\n      }\n    ");
   } else {
     return '';
@@ -70,18 +70,21 @@ var withoutHover = function withoutHover(_ref3) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 
 
-var Wrapper = _styled.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
+var Wrapper = _styled.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", "\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
   return props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '';
 }, (0, _constants.borderRadius)(), (0, _components.themed)({
-  light: _colors.B400,
-  dark: '#4794FF'
+  light: (0, _tokens.token)('color.link', _colors.B400),
+  dark: (0, _tokens.token)('color.link', '#4794FF')
 }), function (props) {
   return props.withoutBackground ? '' : (0, _components.themed)({
-    light: 'white',
-    dark: BACKGROUND_COLOR_DARK
+    light: (0, _tokens.token)('elevation.surface.raised', 'white'),
+    dark: (0, _tokens.token)('elevation.surface.raised', 'BACKGROUND_COLOR_DARK')
   });
 }, function (props) {
-  return props.withoutBackground ? '' : (0, _elevation.e100)();
+  return props.withoutBackground ? '' : (0, _components.themed)({
+    light: "box-shadow: ".concat((0, _tokens.token)('elevation.shadow.raised', "0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A)), ";"),
+    dark: "box-shadow: ".concat((0, _tokens.token)('elevation.shadow.raised', "0 1px 1px ".concat(_colors.DN50A, ", 0 0 1px 1px ").concat(_colors.DN40A)), ";")
+  });
 }, function (props) {
   return isInteractive(props);
 }, function (props) {