@atlaskit/smart-card 23.11.0 → 23.11.2

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

@@ -21,7 +21,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';
 
 var textDescriptionProps = _objectSpread({}, messages.could_not_load_link);
 
@@ -64,7 +63,7 @@ export var ErroredView = function ErroredView(_ref) {
     icon: jsx(WarningIcon, {
       label: "errored-warning-icon",
       size: "small",
-      primaryColor: token('color.icon.warning', R300),
+      primaryColor: "var(--ds-icon-warning, ".concat(R300, ")"),
       testId: "".concat(testId, "-warning-icon")
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

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

@@ -5,7 +5,6 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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';
@@ -66,7 +65,7 @@ export var ForbiddenView = function ForbiddenView(_ref) {
     icon: jsx(LockIcon, {
       label: "forbidden-lock-icon",
       size: "small",
-      primaryColor: token('color.icon.danger', R300),
+      primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
       testId: "".concat(testId, "-lock-icon")
     }),
     text: jsx(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {

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

@@ -20,7 +20,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';
 
 var textDescriptionProps = _objectSpread({}, messages.not_found_description);
 
@@ -60,7 +59,7 @@ export var NotFoundView = function NotFoundView(_ref) {
     icon: jsx(WarningIcon, {
       label: "not-found-warning-icon",
       size: "small",
-      primaryColor: token('color.icon.warning', R300),
+      primaryColor: "var(--ds-icon-warning, ".concat(R300, ")"),
       testId: "".concat(testId, "-warning-icon")
     }),
     text: jsx(FormattedMessage, textDescriptionProps)

package/dist/esm/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';
@@ -23,12 +22,12 @@ export var ResolvingView = function ResolvingView(_ref) {
     className: blockCardResolvingViewClassName
   }, jsx(DocumentFilledIcon, {
     size: "small",
-    primaryColor: token('color.icon.subtle', N50),
+    primaryColor: "var(--ds-icon-subtle, ".concat(N50, ")"),
     label: "document-icon"
   }), jsx("span", {
     css: {
       fontSize: "".concat(fontSize(), "px"),
-      color: token('color.text.subtlest', N90),
+      color: "var(--ds-text-subtlest, ".concat(N90, ")"),
       marginLeft: gs(0.5)
     }
   }, jsx(FormattedMessage, messages.loading)));

package/dist/esm/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';
@@ -42,7 +41,7 @@ var FlexibleErroredView = function FlexibleErroredView(_ref) {
   }), /*#__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, ".concat(R300, ")"),
     testId: "".concat(testId, "-warning-icon")
   }), /*#__PURE__*/React.createElement(Text, {
     message: {

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

@@ -3,7 +3,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';
@@ -69,7 +68,7 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
   }), /*#__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, ".concat(R300, ")"),
     testId: "".concat(testId, "-lock-icon")
   }), /*#__PURE__*/React.createElement(Text, {
     message: {

package/dist/esm/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 @@ var FlexibleNotFoundView = function FlexibleNotFoundView(_ref) {
   }), /*#__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, ".concat(R300, ")"),
     testId: "".concat(testId, "-warning-icon")
   }), /*#__PURE__*/React.createElement(Text, {
     message: {

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

@@ -5,7 +5,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import styled from '@emotion/styled';
 import { borderRadius as akBorderRadius, 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 = "";
@@ -45,13 +44,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(token('color.background.selected', colors.B50), ";\n  }\n") : '';
+  var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ", "var(--ds-background-selected, ".concat(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(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    ") : '';
+  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".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    ") : '';
 }
 
 var height = function height(_ref5) {
@@ -63,7 +62,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(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  }");
+var visibleStyles = "\n  background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";\n\n  &:after {\n    background: ", "var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 
 function visible(_ref6) {
   var isVisible = _ref6.isVisible;
@@ -77,12 +76,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, token('color.icon', 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, "var(--ds-icon, ".concat(colors.N300, ")"));
 export var IconWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), borderRadius, csssize(16), function (_ref7) {
   var isPlaceholder = _ref7.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n      background-color: ".concat(token('color.skeleton', colors.N30), ";\n    ");
+    return "\n      background-color: ".concat("var(--ds-skeleton, ".concat(colors.N30, ")"), ";\n    ");
   } else {
     return '';
   }
@@ -91,19 +90,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(token('color.skeleton', colors.N30), ";\n      ");
+    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ", "var(--ds-skeleton, ".concat(colors.N30, ")"), ";\n      ");
   } else {
     return '';
   }
-}, token('color.text.subtlest', colors.N300), ellipsis('none'));
+}, "var(--ds-text-subtlest, ".concat(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: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\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\n  ", "\n"])), borderRadius, cardShadow, token('elevation.surface.raised', 'white'), 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  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\n  ", "\n"])), borderRadius, cardShadow, "var(--ds-surface-raised, white)", gridSize(4), gridSize(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {
-    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        ");
+    return "\n          .".concat(className, ":hover & {\n            box-shadow: ", "var(--ds-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 '';
   }
@@ -117,11 +116,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"])), 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 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"])), "var(--ds-text, ".concat(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"])), "var(--ds-text-subtlest, ".concat(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"])), "var(--ds-text, ".concat(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, csssize(48), token('color.skeleton', colors.N30), function (_ref12) {
+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, csssize(48), "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref12) {
   var src = _ref12.src;
   return src;
 });

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

@@ -4,7 +4,6 @@ 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 '../../../messages';
@@ -23,7 +22,7 @@ export var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
     testId: testId
   }, jsx(ErrorIcon, {
     size: "small",
-    primaryColor: token('color.icon.danger', R300),
+    primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
     label: "error-icon"
   }), jsx("span", {
     css: {

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

@@ -8,8 +8,7 @@ import { B200, B400, N700, R400 } from '@atlaskit/theme/colors';
 import DocumentIcon from '@atlaskit/icon-file-type/glyph/document/16';
 import BlogIcon from '@atlaskit/icon-object/glyph/blog/16';
 import { IconType } from '../../../../../constants';
-import { token } from '@atlaskit/tokens'; // prettier-ignore
-
+// prettier-ignore
 var importIconMapper = (_importIconMapper = {}, _defineProperty(_importIconMapper, IconType.Archive, function () {
   return import(
   /* webpackChunkName: "glyphArchive" */
@@ -311,7 +310,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
     case IconType.Confluence:
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         testId: testId,
-        textColor: token('color.text.subtle', N700)
+        textColor: "var(--ds-text-subtle, ".concat(N700, ")")
         /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
         ,
         iconColor: B200,
@@ -325,7 +324,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         testId: testId,
-        textColor: token('color.text.subtle', N700)
+        textColor: "var(--ds-text-subtle, ".concat(N700, ")")
         /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
         ,
         iconColor: B200,
@@ -340,7 +339,7 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        primaryColor: token('color.icon.danger', R400)
+        primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
       });
 
     default:

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -5,14 +5,13 @@ var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
   var testId = _ref.testId,
       width = _ref.width,
       height = _ref.height;
   var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% { background-position: 50%  0; }\n    100% { background-position: -50% 0; }\n  "])));
-  var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\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: 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  "])), width, height, token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), animationNameStyles);
+  var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\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: 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  "])), width, height, "var(--ds-skeleton-subtle, #f6f7f8)", "var(--ds-skeleton, #edeef1)", animationNameStyles);
   return jsx("span", {
     css: styles,
     "data-testid": testId

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

@@ -12,7 +12,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 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';
@@ -81,7 +80,7 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
           label: "error",
           size: "small",
-          primaryColor: token('color.icon.danger', R300)
+          primaryColor: "var(--ds-icon-danger, ".concat(R300, ")")
         })),
         link: url,
         title: url,

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

@@ -13,7 +13,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 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';
@@ -27,7 +26,7 @@ import { LozengeWrapper, LozengeBlockWrapper } from '../IconAndTitleLayout/style
 var FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
-  primaryColor: token('color.icon.danger', R400)
+  primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
 }));
 export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardForbiddenView, _React$Component);
@@ -131,7 +130,7 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
         link: url,
         title: url,
         onClick: onClick,
-        titleColor: token('color.text.subtle', N500),
+        titleColor: "var(--ds-text-subtle, ".concat(N500, ")"),
         rightSide: this.renderRightSide(),
         rightSideSpacer: this.state.hasRequestAccessContextMessage
       }));

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

@@ -6,20 +6,19 @@ import styled from '@emotion/styled';
 import { B100, B400, B50, DN40A, DN50A, N20, N40A, N50A } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 var BACKGROUND_COLOR_DARK = '#262B31';
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 2px ".concat(token('color.border.selected', 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(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(themed({
-      light: token('color.background.neutral.subtle.hovered', N20),
-      dark: token('color.background.neutral.subtle.hovered', BACKGROUND_COLOR_DARK)
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(BACKGROUND_COLOR_DARK, ")")
     }), ";\n      }\n      :active {\n        background-color: ").concat(themed({
-      light: token('color.background.selected', B50),
-      dark: token('color.background.selected', BACKGROUND_COLOR_DARK)
+      light: "var(--ds-background-selected, ".concat(B50, ")"),
+      dark: "var(--ds-background-selected, ".concat(BACKGROUND_COLOR_DARK, ")")
     }), ";\n      }\n      :focus {\n        ").concat(selected, "\n      }\n    ");
   } else {
     return '';
@@ -51,14 +50,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(akBorderRadius(), "px;\n  color: ").concat(themed({
-    light: token('color.link', B400),
-    dark: token('color.link', '#4794FF')
+    light: "var(--ds-link, ".concat(B400, ")"),
+    dark: "var(--ds-link, #4794FF)"
   })(props), ";\n  background-color: ").concat(props.withoutBackground ? '' : themed({
-    light: token('elevation.surface.raised', 'white'),
-    dark: 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 ? '' : themed({
-    light: "box-shadow: ".concat(token('elevation.shadow.raised', "0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A)), ";"),
-    dark: "box-shadow: ".concat(token('elevation.shadow.raised', "0 1px 1px ".concat(DN50A, ", 0 0 1px 1px ").concat(DN40A)), ";")
+    light: "box-shadow: ".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A), ")"), ";"),
+    dark: "box-shadow: ".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(DN50A, ", 0 0 1px 1px ").concat(DN40A), ")"), ";")
   })(props), "\n  ").concat(isSelected(props), ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n");
 };
 

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

@@ -4,7 +4,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 var placeholderShimmer = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
@@ -16,4 +15,4 @@ export var Icon = styled.img(_templateObject2 || (_templateObject2 = _taggedTemp
 // TODO: Replace this override with proper AtlasKit solution.
 
 export var AKIconWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: -2px;\n"])));
-export var Shimmer = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), placeholderShimmer);
+export var Shimmer = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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);

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

@@ -14,7 +14,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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 '../../../messages';
@@ -26,7 +25,7 @@ import { HoverCard } from '../../HoverCard';
 var FallbackUnauthorizedIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
   label: "error",
   size: "small",
-  primaryColor: token('color.icon.danger', R400)
+  primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
 }));
 export var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component) {
   _inherits(InlineCardUnauthorizedView, _React$Component);
@@ -92,7 +91,7 @@ export var InlineCardUnauthorizedView = /*#__PURE__*/function (_React$Component)
         link: url,
         rightSide: this.renderRightSide(),
         onClick: onClick,
-        titleColor: token('color.text.subtle', N500)
+        titleColor: "var(--ds-text-subtle, ".concat(N500, ")")
       }));
 
       if (showAuthTooltip) {

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

@@ -5,17 +5,16 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import styled from '@emotion/styled';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 var 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
 
 export var IconStyledButton = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: initial !important;\n  display: inline !important;\n\n  > span {\n    display: inline;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])));
 export var NoLinkAppearance = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), themed({
-  light: token('color.text.subtlest', N200),
-  dark: token('color.text.subtlest', LINK_COLOR_DARK)
+  light: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(LINK_COLOR_DARK, ")")
 }));
 export var LowercaseAppearance = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-transform: lowercase;\n"])));
 export var LinkAppearance = styled.a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), themed({
-  light: token('color.link', B400),
-  dark: token('color.link', LINK_COLOR_DARK)
+  light: "var(--ds-link, ".concat(B400, ")"),
+  dark: "var(--ds-link, ".concat(LINK_COLOR_DARK, ")")
 }));

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { gs, mq } from './utils';
 export var Byline = function Byline(_ref) {
   var text = _ref.text,
@@ -12,7 +11,7 @@ export var Byline = function Byline(_ref) {
     css: mq({
       fontSize: gs(1.5),
       lineHeight: gs(2.5),
-      color: "".concat(token('color.text.subtlest', N300)),
+      color: "".concat("var(--ds-text-subtlest, ".concat(N300, ")")),
       fontWeight: 'normal',
       marginTop: gs(0.5),
       // Spec: only allow two lines MAX to be shown.

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

@@ -3,7 +3,6 @@ import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { gs } from './utils';
 import { N300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var Metadata = function Metadata(_ref) {
   var text = _ref.text,
       icon = _ref.icon,
@@ -30,7 +29,7 @@ export var Metadata = function Metadata(_ref) {
   }, metadataIcon, jsx("span", {
     css: {
       fontSize: gs(1.5),
-      color: "".concat(token('color.text.subtlest', N300)),
+      color: "".concat("var(--ds-text-subtlest, ".concat(N300, ")")),
       marginRight: gs(0.5),
       marginLeft: '2px'
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "23.11.0",
+  "version": "23.11.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"