@atlaskit/smart-card 23.11.1 → 23.11.2

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

@@ -27,8 +27,6 @@ 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"));
@@ -56,7 +54,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: (0, _tokens.token)('color.icon.danger', _colors.R400)
+  primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
 }));
 
 var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
@@ -156,7 +154,7 @@ var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
         link: url,
         title: url,
         onClick: onClick,
-        titleColor: (0, _tokens.token)('color.text.subtle', _colors.N500),
+        titleColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
         rightSide: this.renderRightSide(),
         rightSideSpacer: this.state.hasRequestAccessContextMessage
       }));

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

@@ -17,23 +17,21 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _components = require("@atlaskit/theme/components");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 var BACKGROUND_COLOR_DARK = '#262B31';
-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 selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat("var(--ds-border-selected, ".concat(_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      :hover {\n        background-color: ".concat((0, _components.themed)({
-      light: (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20),
-      dark: (0, _tokens.token)('color.background.neutral.subtle.hovered', BACKGROUND_COLOR_DARK)
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(BACKGROUND_COLOR_DARK, ")")
     }), ";\n      }\n      :active {\n        background-color: ").concat((0, _components.themed)({
-      light: (0, _tokens.token)('color.background.selected', _colors.B50),
-      dark: (0, _tokens.token)('color.background.selected', BACKGROUND_COLOR_DARK)
+      light: "var(--ds-background-selected, ".concat(_colors.B50, ")"),
+      dark: "var(--ds-background-selected, ".concat(BACKGROUND_COLOR_DARK, ")")
     }), ";\n      }\n      :focus {\n        ").concat(selected, "\n      }\n    ");
   } else {
     return '';
@@ -65,14 +63,14 @@ var isSelected = function isSelected(_ref2) {
 
 var baseWrapperStyle = function baseWrapperStyle(props) {
   return "\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ".concat(props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '', "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ").concat((0, _constants.borderRadius)(), "px;\n  color: ").concat((0, _components.themed)({
-    light: (0, _tokens.token)('color.link', _colors.B400),
-    dark: (0, _tokens.token)('color.link', '#4794FF')
+    light: "var(--ds-link, ".concat(_colors.B400, ")"),
+    dark: "var(--ds-link, #4794FF)"
   })(props), ";\n  background-color: ").concat(props.withoutBackground ? '' : (0, _components.themed)({
-    light: (0, _tokens.token)('elevation.surface.raised', 'white'),
-    dark: (0, _tokens.token)('elevation.surface.raised', BACKGROUND_COLOR_DARK)
+    light: "var(--ds-surface-raised, white)",
+    dark: "var(--ds-surface-raised, ".concat(BACKGROUND_COLOR_DARK, ")")
   })(props), ";\n  ").concat(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)), ";")
+    light: "box-shadow: ".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A), ")"), ";"),
+    dark: "box-shadow: ".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(_colors.DN50A, ", 0 0 1px 1px ").concat(_colors.DN40A), ")"), ";")
   })(props), "\n  ").concat(isSelected(props), ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n");
 };
 

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

@@ -13,8 +13,6 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var placeholderShimmer = (0, _react.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
@@ -34,6 +32,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  background: ", ";\n  background-image: linear-gradient(\n    to right,\n    transparent 0%,\n    ", " 20%,\n    transparent 40%,\n    transparent 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', '#edeef1'), 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  background-image: linear-gradient(\n    to right,\n    transparent 0%,\n    ", " 20%,\n    transparent 40%,\n    transparent 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"])), "var(--ds-skeleton-subtle, #f6f7f8)", "var(--ds-skeleton, #edeef1)", placeholderShimmer);
 
 exports.Shimmer = Shimmer;

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

@@ -29,8 +29,6 @@ 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");
@@ -54,7 +52,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: (0, _tokens.token)('color.icon.danger', _colors.R400)
+  primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
 }));
 
 var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
@@ -119,7 +117,7 @@ var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
         link: url,
         rightSide: this.renderRightSide(),
         onClick: onClick,
-        titleColor: (0, _tokens.token)('color.text.subtle', _colors.N500)
+        titleColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
       }));
 
       if (showAuthTooltip) {

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

@@ -15,8 +15,6 @@ 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.
@@ -27,8 +25,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: (0, _tokens.token)('color.text.subtlest', _colors.N200),
-  dark: (0, _tokens.token)('color.text.subtlest', LINK_COLOR_DARK)
+  light: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(LINK_COLOR_DARK, ")")
 }));
 
 exports.NoLinkAppearance = NoLinkAppearance;
@@ -38,8 +36,8 @@ var LowercaseAppearance = _styled.default.span(_templateObject3 || (_templateObj
 exports.LowercaseAppearance = LowercaseAppearance;
 
 var LinkAppearance = _styled.default.a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _components.themed)({
-  light: (0, _tokens.token)('color.link', _colors.B400),
-  dark: (0, _tokens.token)('color.link', LINK_COLOR_DARK)
+  light: "var(--ds-link, ".concat(_colors.B400, ")"),
+  dark: "var(--ds-link, ".concat(LINK_COLOR_DARK, ")")
 }));
 
 exports.LinkAppearance = LinkAppearance;

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

@@ -9,8 +9,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _utils = require("./utils");
 
 /** @jsx jsx */
@@ -23,7 +21,7 @@ var Byline = function Byline(_ref) {
     css: (0, _utils.mq)({
       fontSize: (0, _utils.gs)(1.5),
       lineHeight: (0, _utils.gs)(2.5),
-      color: "".concat((0, _tokens.token)('color.text.subtlest', _colors.N300)),
+      color: "".concat("var(--ds-text-subtlest, ".concat(_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,8 +15,6 @@ 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,
@@ -44,7 +42,7 @@ var Metadata = function Metadata(_ref) {
   }, metadataIcon, (0, _react.jsx)("span", {
     css: {
       fontSize: (0, _utils.gs)(1.5),
-      color: "".concat((0, _tokens.token)('color.text.subtlest', _colors.N300)),
+      color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
       marginRight: (0, _utils.gs)(0.5),
       marginLeft: '2px'
     }

package/dist/es2019/extractors/common/detail/extractAttachmentCount.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { N600 } from '@atlaskit/theme/colors';
 import AttachmentIcon from '@atlaskit/icon/glyph/attachment';
-import { token } from '@atlaskit/tokens';
 export const extractAttachmentCount = jsonLd => {
   const attachmentCount = jsonLd['atlassian:attachmentCount'];
 
@@ -11,7 +10,7 @@ export const extractAttachmentCount = jsonLd => {
       icon: /*#__PURE__*/React.createElement(AttachmentIcon, {
         size: "small",
         label: "attachments",
-        primaryColor: token('color.icon.subtle', N600)
+        primaryColor: `var(--ds-icon-subtle, ${N600})`
       })
     };
   }

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

@@ -1,6 +1,5 @@
 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'];
@@ -12,7 +11,7 @@ export const extractCommentCount = jsonLd => {
         label: "comment-count",
         key: "comments-count-icon",
         size: "small",
-        primaryColor: token('color.icon.subtle', N600)
+        primaryColor: `var(--ds-icon-subtle, ${N600})`
       })
     };
   }

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

@@ -1,7 +1,6 @@
 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'];
 
@@ -11,7 +10,7 @@ export const extractProgrammingLanguage = jsonLd => {
       icon: /*#__PURE__*/React.createElement(CodeIcon, {
         size: "small",
         label: "code",
-        primaryColor: token('color.icon.subtle', N600)
+        primaryColor: `var(--ds-icon-subtle, ${N600})`
       })
     };
   }

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

@@ -1,7 +1,6 @@
 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'];
 
@@ -11,7 +10,7 @@ export const extractSubscriberCount = jsonLd => {
       icon: /*#__PURE__*/React.createElement(PeopleIcon, {
         size: "small",
         label: "subscribers",
-        primaryColor: token('color.icon.subtle', N600)
+        primaryColor: `var(--ds-icon-subtle, ${N600})`
       })
     };
   }

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

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

package/dist/es2019/utils/token.js

@@ -1,17 +1,16 @@
-import { token } from '@atlaskit/tokens';
 export const tokens = {
-  actionIcon: token('color.icon', '#44546F'),
-  background: token('elevation.surface.raised', '#FFFFFF'),
-  badgeIcon: token('color.icon.subtle', '#626F86'),
-  badgeText: token('color.text.subtlest', '#626F86'),
-  blackLink: token('color.text.subtle', '#44546F'),
-  blackLinkPressed: token('color.text', '#172B4D'),
-  blueLink: token('color.link', '#0C66E4'),
-  blueLinkPressed: token('color.link.pressed', '#0055CC'),
-  elevation: token('elevation.shadow.raised', '0px 1px 1px #091E4240, 0px 0px 1px #091E424F'),
-  errorMessage: token('color.text.disabled', '#6B778C'),
-  errorMessageHover: token('color.text.subtle', '#8993A4'),
-  focus: token('color.border.focused', '#388BFF'),
-  snippet: token('color.text', '#172B4D'),
-  text: token('color.text.subtlest', '#626F86')
+  actionIcon: "var(--ds-icon, #44546F)",
+  background: "var(--ds-surface-raised, #FFFFFF)",
+  badgeIcon: "var(--ds-icon-subtle, #626F86)",
+  badgeText: "var(--ds-text-subtlest, #626F86)",
+  blackLink: "var(--ds-text-subtle, #44546F)",
+  blackLinkPressed: "var(--ds-text, #172B4D)",
+  blueLink: "var(--ds-link, #0C66E4)",
+  blueLinkPressed: "var(--ds-link-pressed, #0055CC)",
+  elevation: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424F)",
+  errorMessage: "var(--ds-text-disabled, #6B778C)",
+  errorMessageHover: "var(--ds-text-subtle, #8993A4)",
+  focus: "var(--ds-border-focused, #388BFF)",
+  snippet: "var(--ds-text, #172B4D)",
+  text: "var(--ds-text-subtlest, #626F86)"
 };

package/dist/es2019/version.json

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

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

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/react';
 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,
@@ -13,7 +12,7 @@ const sharedFrameStyles = {
   maxWidth: gs(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: token('elevation.surface.raised', 'white')
+  backgroundColor: "var(--ds-surface-raised, white)"
 };
 export const ExpandedFrame = ({
   children,
@@ -27,15 +26,15 @@ export const ExpandedFrame = ({
     css: mq({ ...sharedFrameStyles,
       '&:hover': isHoverable ? {
         // TODO: https://product-fabric.atlassian.net/browse/DSP-4064
-        backgroundColor: token('color.background.neutral.subtle.hovered', N20A),
+        backgroundColor: `var(--ds-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 ? token('color.border.selected', B200) : 'transparent'}`,
+      border: `2px solid ${isSelected ? `var(--ds-border-selected, ${B200})` : 'transparent'}`,
       justifyContent: 'space-between',
       overflow: 'hidden',
-      boxShadow: token('elevation.shadow.raised', `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`)
+      boxShadow: `var(--ds-shadow-raised, ${`0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`})`
     }),
     "data-testid": testId,
     className: className,
@@ -53,14 +52,14 @@ export const CompactFrame = ({
   return jsx("div", {
     css: mq({ ...sharedFrameStyles,
       '&:hover': isHoverable ? {
-        backgroundColor: token('color.background.neutral.hovered', N30A)
+        backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`
       } : undefined,
       borderRadius: isSelected ? br() : br(0.5),
-      border: isSelected ? `2px solid ${token('color.border.selected', B200)}` : '',
+      border: isSelected ? `2px solid ${`var(--ds-border-selected, ${B200})`}` : '',
       justifyContent: 'center',
       alignItems: 'center',
       height: inheritDimensions ? '100%' : gs(5),
-      backgroundColor: token('color.background.neutral', N20A),
+      backgroundColor: `var(--ds-background-neutral, ${N20A})`,
       width: ['calc(100% - 16px)', '100%'],
       padding: [`0px ${gs(1)}`, '0']
     }),

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

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

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

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { gs } from '../../common/utils';
-import { token } from '@atlaskit/tokens';
 export const Provider = ({
   name,
   icon
@@ -29,7 +28,7 @@ export const Provider = ({
     }
   }, iconToRender, jsx("span", {
     css: {
-      color: token('color.text.subtlest', N300),
+      color: `var(--ds-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,7 +15,6 @@ 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';
@@ -48,7 +47,7 @@ export const ErroredView = ({
     icon: jsx(WarningIcon, {
       label: "errored-warning-icon",
       size: "small",
-      primaryColor: token('color.icon.warning', R300),
+      primaryColor: `var(--ds-icon-warning, ${R300})`,
       testId: `${testId}-warning-icon`
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

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

@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 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';
@@ -56,7 +55,7 @@ export const ForbiddenView = ({
     icon: jsx(LockIcon, {
       label: "forbidden-lock-icon",
       size: "small",
-      primaryColor: token('color.icon.danger', R300),
+      primaryColor: `var(--ds-icon-danger, ${R300})`,
       testId: `${testId}-lock-icon`
     }),
     text: jsx(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {

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

@@ -14,7 +14,6 @@ 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';
@@ -46,7 +45,7 @@ export const NotFoundView = ({
     icon: jsx(WarningIcon, {
       label: "not-found-warning-icon",
       size: "small",
-      primaryColor: token('color.icon.warning', R300),
+      primaryColor: `var(--ds-icon-warning, ${R300})`,
       testId: `${testId}-warning-icon`
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

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

@@ -3,7 +3,6 @@ import { jsx } from '@emotion/react';
 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';
@@ -21,12 +20,12 @@ export const ResolvingView = ({
   className: blockCardResolvingViewClassName
 }, jsx(DocumentFilledIcon, {
   size: "small",
-  primaryColor: token('color.icon.subtle', N50),
+  primaryColor: `var(--ds-icon-subtle, ${N50})`,
   label: "document-icon"
 }), jsx("span", {
   css: {
     fontSize: `${fontSize()}px`,
-    color: token('color.text.subtlest', N90),
+    color: `var(--ds-text-subtlest, ${N90})`,
     marginLeft: gs(0.5)
   }
 }, jsx(FormattedMessage, messages.loading)));

package/dist/es2019/view/BlockCard/views/flexible/FlexibleErroredView.js

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { messages } from '../../../../messages';
-import { token } from '@atlaskit/tokens';
 import { R300 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import BlockCardFooter from '../../components/flexible/footer';
@@ -40,7 +39,7 @@ const FlexibleErroredView = ({
   }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
     label: "errored-warning-icon",
     size: "small",
-    primaryColor: token('color.icon.warning', R300),
+    primaryColor: `var(--ds-icon-warning, ${R300})`,
     testId: `${testId}-warning-icon`
   }), /*#__PURE__*/React.createElement(Text, {
     message: {

package/dist/es2019/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { CustomBlock } from '../../../FlexibleCard/components/blocks';
-import { token } from '@atlaskit/tokens';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../../messages';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
@@ -70,7 +69,7 @@ const FlexibleForbiddenView = ({
   }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
     label: "forbidden-lock-icon",
     size: "small",
-    primaryColor: token('color.icon.danger', R300),
+    primaryColor: `var(--ds-icon-danger, ${R300})`,
     testId: `${testId}-lock-icon`
   }), /*#__PURE__*/React.createElement(Text, {
     message: {

package/dist/es2019/view/BlockCard/views/flexible/FlexibleNotFoundView.js

@@ -3,7 +3,6 @@ import FlexibleCard from '../../../FlexibleCard';
 import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
 import { messages } from '../../../../messages';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
-import { token } from '@atlaskit/tokens';
 import { R300 } from '@atlaskit/theme/colors';
 import BlockCardFooter from '../../components/flexible/footer';
 import Text from '../../../FlexibleCard/components/elements/text';
@@ -39,7 +38,7 @@ const FlexibleNotFoundView = ({
   }), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
     label: "not-found-warning-icon",
     size: "small",
-    primaryColor: token('color.icon.warning', R300),
+    primaryColor: `var(--ds-icon-warning, ${R300})`,
     testId: `${testId}-warning-icon`
   }), /*#__PURE__*/React.createElement(Text, {
     message: {