@atlaskit/smart-card 23.11.0 → 23.11.2

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

@@ -1,7 +1,6 @@
 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 const className = 'media-card-frame';
 export const cardShadow = ``;
@@ -55,7 +54,7 @@ function getinteractiveStyles({
     ${visibleStyles}
   }
   &:active {
-    background-color: ${token('color.background.selected', colors.B50)};
+    background-color: ${`var(--ds-background-selected, ${colors.B50})`};
   }
 ` : '';
   return `${visibleFrameStyles}${interactiveFrameStyles}`;
@@ -68,7 +67,7 @@ function selected({
     ${visibleStyles}
     &::after {
       cursor: pointer;
-      box-shadow: 0 0 0 3px ${token('color.border.selected', colors.B100)};
+      box-shadow: 0 0 0 3px ${`var(--ds-border-selected, ${colors.B100})`};
       content: '';
       outline: none;
       position: absolute;
@@ -115,10 +114,10 @@ const wrapperStyles = props => `
 `;
 
 const visibleStyles = `
-  background-color: ${token('color.background.neutral.subtle', colors.N30)};
+  background-color: ${`var(--ds-background-neutral-subtle, ${colors.N30})`};
 
   &:after {
-    background: ${token('color.background.neutral', colors.N30)} !important;
+    background: ${`var(--ds-background-neutral, ${colors.N30})`} !important;
   }
   .embed-header {
     opacity: 1;
@@ -147,7 +146,7 @@ export const Header = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  color: ${token('color.icon', colors.N300)};
+  color: ${`var(--ds-icon, ${colors.N300})`};
   opacity: 0;
   transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);
 `;
@@ -159,7 +158,7 @@ export const IconWrapper = styled.div`
 }) => {
   if (isPlaceholder) {
     return `
-      background-color: ${token('color.skeleton', colors.N30)};
+      background-color: ${`var(--ds-skeleton, ${colors.N30})`};
     `;
   } else {
     return '';
@@ -175,12 +174,12 @@ export const TextWrapper = styled.div`
         ${borderRadius}
         width: 125px;
         height: 12px;
-        background-color: ${token('color.skeleton', colors.N30)};
+        background-color: ${`var(--ds-skeleton, ${colors.N30})`};
       `;
   } else {
     return '';
   }
-}} color: ${token('color.text.subtlest', colors.N300)};
+}} color: ${`var(--ds-text-subtlest, ${colors.N300})`};
   font-size: 12px;
   line-height: 16px;
   ${ellipsis('none')};
@@ -191,7 +190,7 @@ export const TextWrapper = styled.div`
 export const Content = styled.div`
   ${borderRadius}
   ${cardShadow}
-  background-color: ${token('elevation.surface.raised', 'white')};
+  background-color: ${"var(--ds-surface-raised, white)"};
   position: absolute;
   z-index: 1;
   width: 100%;
@@ -216,7 +215,7 @@ export const Content = styled.div`
   if (isInteractive) {
     return `
           .${className}:hover & {
-            box-shadow: ${token('elevation.shadow.overlay', '0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25)')};
+            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))"};
           }
         `;
   } else {
@@ -245,7 +244,7 @@ export const ContentWrapper = styled.div`
   padding: 8px 12px 12px 12px;
 `;
 export const Title = styled.div`
-  color: ${token('color.text', colors.N900)};
+  color: ${`var(--ds-text, ${colors.N900})`};
   font-size: 16px;
   font-weight: 500;
   line-height: ${20 / 16};
@@ -254,7 +253,7 @@ export const Title = styled.div`
 `;
 export const Byline = styled.div`
   margin-top: 4px;
-  color: ${token('color.text.subtlest', colors.N300)};
+  color: ${`var(--ds-text-subtlest, ${colors.N300})`};
   font-size: 12px;
   font-weight: normal;
   line-height: ${16 / 12};
@@ -262,7 +261,7 @@ export const Byline = styled.div`
 `;
 export const Description = styled.div`
   margin-top: 7px;
-  color: ${token('color.text', colors.N800)};
+  color: ${`var(--ds-text, ${colors.N800})`};
   font-size: 12px;
   font-weight: normal;
   line-height: ${18 / 12};
@@ -277,7 +276,7 @@ export const Thumbnail = styled.div`
   ${csssize(48)}
   float: right;
   margin: 4px 0 12px 12px;
-  background-color: ${token('color.skeleton', colors.N30)};
+  background-color: ${`var(--ds-skeleton, ${colors.N30})`};
   background-image: url(${({
   src
 }) => src});

package/dist/es2019/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';
@@ -21,7 +20,7 @@ export const EmbedCardErroredView = ({
   testId: testId
 }, jsx(ErrorIcon, {
   size: "small",
-  primaryColor: token('color.icon.danger', R300),
+  primaryColor: `var(--ds-icon-danger, ${R300})`,
   label: "error-icon"
 }), jsx("span", {
   css: {

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

@@ -4,8 +4,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
 const importIconMapper = {
   [IconType.Archive]: () => import(
   /* webpackChunkName: "glyphArchive" */
@@ -243,7 +242,7 @@ const AtlaskitIcon = ({
     case IconType.Confluence:
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         testId: testId,
-        textColor: token('color.text.subtle', N700)
+        textColor: `var(--ds-text-subtle, ${N700})`
         /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
         ,
         iconColor: B200,
@@ -257,7 +256,7 @@ const AtlaskitIcon = ({
       // 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, ${N700})`
         /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
         ,
         iconColor: B200,
@@ -272,7 +271,7 @@ const AtlaskitIcon = ({
       return /*#__PURE__*/React.createElement(ImportedIcon, {
         label: label,
         testId: testId,
-        primaryColor: token('color.icon.danger', R400)
+        primaryColor: `var(--ds-icon-danger, ${R400})`
       });
 
     default:

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 
 const LoadingSkeleton = ({
   testId,
@@ -17,11 +16,11 @@ const LoadingSkeleton = ({
     height: ${height}rem;
     border-radius: 2px;
     user-select: none;
-    background: ${token('color.skeleton.subtle', '#f6f7f8')};
+    background: ${"var(--ds-skeleton-subtle, #f6f7f8)"};
     background-image: linear-gradient(
       to right,
       transparent 0%,
-      ${token('color.skeleton', '#edeef1')} 20%,
+      ${"var(--ds-skeleton, #edeef1)"} 20%,
       transparent 40%,
       transparent 100%
     );

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

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { R300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import Button from '@atlaskit/button/custom-theme-button';
 import { Frame } from '../Frame';
@@ -57,7 +56,7 @@ export class InlineCardErroredView extends 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, ${R300})`
       })),
       link: url,
       title: url,

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

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { R400, N500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import Button from '@atlaskit/button/custom-theme-button';
 import { Frame } from '../Frame';
@@ -16,7 +15,7 @@ import { LozengeWrapper, LozengeBlockWrapper } from '../IconAndTitleLayout/style
 const 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, ${R400})`
 }));
 export class InlineCardForbiddenView extends React.Component {
   constructor(...args) {
@@ -110,7 +109,7 @@ export class InlineCardForbiddenView extends React.Component {
       link: url,
       title: url,
       onClick: onClick,
-      titleColor: token('color.text.subtle', N500),
+      titleColor: `var(--ds-text-subtle, ${N500})`,
       rightSide: this.renderRightSide(),
       rightSideSpacer: this.state.hasRequestAccessContextMessage
     }));

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

@@ -2,11 +2,10 @@ 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';
 const BACKGROUND_COLOR_DARK = '#262B31';
 const selected = `
   cursor: pointer;
-  box-shadow: 0 0 0 2px ${token('color.border.selected', B100)};
+  box-shadow: 0 0 0 2px ${`var(--ds-border-selected, ${B100})`};
   outline: none;
   user-select: none;
   &, :hover, :focus, :active {
@@ -21,14 +20,14 @@ const isInteractive = ({
     return `
       :hover {
         background-color: ${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, ${N20})`,
+      dark: `var(--ds-background-neutral-subtle-hovered, ${BACKGROUND_COLOR_DARK})`
     })};
       }
       :active {
         background-color: ${themed({
-      light: token('color.background.selected', B50),
-      dark: token('color.background.selected', BACKGROUND_COLOR_DARK)
+      light: `var(--ds-background-selected, ${B50})`,
+      dark: `var(--ds-background-selected, ${BACKGROUND_COLOR_DARK})`
     })};
       }
       :focus {
@@ -71,16 +70,16 @@ const baseWrapperStyle = props => `
   box-decoration-break: clone;
   border-radius: ${akBorderRadius()}px;
   color: ${themed({
-  light: token('color.link', B400),
-  dark: token('color.link', '#4794FF')
+  light: `var(--ds-link, ${B400})`,
+  dark: "var(--ds-link, #4794FF)"
 })(props)};
   background-color: ${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, ${BACKGROUND_COLOR_DARK})`
 })(props)};
   ${props.withoutBackground ? '' : themed({
-  light: `box-shadow: ${token('elevation.shadow.raised', `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`)};`,
-  dark: `box-shadow: ${token('elevation.shadow.raised', `0 1px 1px ${DN50A}, 0 0 1px 1px ${DN40A}`)};`
+  light: `box-shadow: ${`var(--ds-shadow-raised, ${`0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`})`};`,
+  dark: `box-shadow: ${`var(--ds-shadow-raised, ${`0 1px 1px ${DN50A}, 0 0 1px 1px ${DN40A}`})`};`
 })(props)}
   ${isSelected(props)};
   transition: 0.1s all ease-in-out;

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

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 const placeholderShimmer = keyframes`
   0% {
     background-position: -20px 0;
@@ -42,11 +41,11 @@ export const Shimmer = styled.span`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: ${token('color.skeleton.subtle', '#f6f7f8')};
+  background: ${"var(--ds-skeleton-subtle, #f6f7f8)"};
   background-image: linear-gradient(
     to right,
     transparent 0%,
-    ${token('color.skeleton', '#edeef1')} 20%,
+    ${"var(--ds-skeleton, #edeef1)"} 20%,
     transparent 40%,
     transparent 100%
   );

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

@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import Button from '@atlaskit/button/custom-theme-button';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import { N500, R400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
@@ -15,7 +14,7 @@ import { HoverCard } from '../../HoverCard';
 const 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, ${R400})`
 }));
 export class InlineCardUnauthorizedView extends React.Component {
   constructor(...args) {
@@ -67,7 +66,7 @@ export class InlineCardUnauthorizedView extends React.Component {
       link: url,
       rightSide: this.renderRightSide(),
       onClick: onClick,
-      titleColor: token('color.text.subtle', N500)
+      titleColor: `var(--ds-text-subtle, ${N500})`
     }));
 
     if (showAuthTooltip) {

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

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { B400, N200 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 const LINK_COLOR_DARK = '#4794FF'; // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 
@@ -20,8 +19,8 @@ export const IconStyledButton = styled.span`
 `;
 export const NoLinkAppearance = styled.span`
   color: ${themed({
-  light: token('color.text.subtlest', N200),
-  dark: token('color.text.subtlest', LINK_COLOR_DARK)
+  light: `var(--ds-text-subtlest, ${N200})`,
+  dark: `var(--ds-text-subtlest, ${LINK_COLOR_DARK})`
 })};
 `;
 export const LowercaseAppearance = styled.span`
@@ -29,7 +28,7 @@ export const LowercaseAppearance = styled.span`
 `;
 export const LinkAppearance = styled.a`
   color: ${themed({
-  light: token('color.link', B400),
-  dark: token('color.link', LINK_COLOR_DARK)
+  light: `var(--ds-link, ${B400})`,
+  dark: `var(--ds-link, ${LINK_COLOR_DARK})`
 })};
 `;

package/dist/es2019/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 const Byline = ({
   text,
@@ -12,7 +11,7 @@ export const Byline = ({
   css: mq({
     fontSize: gs(1.5),
     lineHeight: gs(2.5),
-    color: `${token('color.text.subtlest', N300)}`,
+    color: `${`var(--ds-text-subtlest, ${N300})`}`,
     fontWeight: 'normal',
     marginTop: gs(0.5),
     // Spec: only allow two lines MAX to be shown.

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

@@ -3,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 const Metadata = ({
   text,
   icon,
@@ -31,7 +30,7 @@ export const Metadata = ({
   }, metadataIcon, jsx("span", {
     css: {
       fontSize: gs(1.5),
-      color: `${token('color.text.subtlest', N300)}`,
+      color: `${`var(--ds-text-subtlest, ${N300})`}`,
       marginRight: gs(0.5),
       marginLeft: '2px'
     }

package/dist/esm/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 var extractAttachmentCount = function extractAttachmentCount(jsonLd) {
   var attachmentCount = jsonLd['atlassian:attachmentCount'];
 
@@ -11,7 +10,7 @@ export var extractAttachmentCount = function extractAttachmentCount(jsonLd) {
       icon: /*#__PURE__*/React.createElement(AttachmentIcon, {
         size: "small",
         label: "attachments",
-        primaryColor: token('color.icon.subtle', N600)
+        primaryColor: "var(--ds-icon-subtle, ".concat(N600, ")")
       })
     };
   }

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

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

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

package/dist/esm/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 var extractTitleTextColor = function extractTitleTextColor(jsonLd) {
   var type = jsonLd['@type'];
 
@@ -11,7 +10,7 @@ export var extractTitleTextColor = function extractTitleTextColor(jsonLd) {
 
     switch (highestPriorityType) {
       case 'atlassian:UndefinedLink':
-        return token('color.text.danger', R500);
+        return "var(--ds-text-danger, ".concat(R500, ")");
 
       default:
         return undefined;

package/dist/esm/utils/token.js

@@ -1,17 +1,16 @@
-import { token } from '@atlaskit/tokens';
 export var 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/esm/version.json

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

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

@@ -8,7 +8,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 var Frame = function Frame() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
@@ -22,7 +21,7 @@ var sharedFrameStyles = {
   maxWidth: gs(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: token('elevation.surface.raised', 'white')
+  backgroundColor: "var(--ds-surface-raised, white)"
 };
 export var ExpandedFrame = function ExpandedFrame(_ref) {
   var children = _ref.children,
@@ -35,15 +34,15 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     css: mq(_objectSpread(_objectSpread({}, 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, ".concat(N20A, ")"),
         cursor: 'pointer'
       } : undefined,
       minHeight: isFluidHeight ? 0 : [gs(21), gs(15)],
       borderRadius: isSelected ? br() : br(0.5),
-      border: "2px solid ".concat(isSelected ? token('color.border.selected', B200) : 'transparent'),
+      border: "2px solid ".concat(isSelected ? "var(--ds-border-selected, ".concat(B200, ")") : 'transparent'),
       justifyContent: 'space-between',
       overflow: 'hidden',
-      boxShadow: token('elevation.shadow.raised', "0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A))
+      boxShadow: "var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(N50A, ", 0 0 1px 1px ").concat(N40A), ")")
     })),
     "data-testid": testId,
     className: className,
@@ -60,14 +59,14 @@ export var CompactFrame = function CompactFrame(_ref2) {
   return jsx("div", {
     css: mq(_objectSpread(_objectSpread({}, sharedFrameStyles), {}, {
       '&:hover': isHoverable ? {
-        backgroundColor: token('color.background.neutral.hovered', N30A)
+        backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30A, ")")
       } : undefined,
       borderRadius: isSelected ? br() : br(0.5),
-      border: isSelected ? "2px solid ".concat(token('color.border.selected', B200)) : '',
+      border: isSelected ? "2px solid ".concat("var(--ds-border-selected, ".concat(B200, ")")) : '',
       justifyContent: 'center',
       alignItems: 'center',
       height: inheritDimensions ? '100%' : gs(5),
-      backgroundColor: token('color.background.neutral', N20A),
+      backgroundColor: "var(--ds-background-neutral, ".concat(N20A, ")"),
       width: ['calc(100% - 16px)', '100%'],
       padding: ["0px ".concat(gs(1)), '0']
     })),

package/dist/esm/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 var Link = function Link(_ref) {
   var url = _ref.url,
       _ref$testId = _ref.testId,
@@ -11,7 +10,7 @@ export var Link = function Link(_ref) {
     "data-testid": "".concat(testId, "-link"),
     className: className,
     css: {
-      color: token('color.link', B400),
+      color: "var(--ds-link, ".concat(B400, ")"),
       wordBreak: 'break-all'
     }
   }, url);

package/dist/esm/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 var Provider = function Provider(_ref) {
   var name = _ref.name,
       icon = _ref.icon;
@@ -28,7 +27,7 @@ export var Provider = function Provider(_ref) {
     }
   }, iconToRender, jsx("span", {
     css: {
-      color: token('color.text.subtlest', N300),
+      color: "var(--ds-text-subtlest, ".concat(N300, ")"),
       margin: 0,
       marginLeft: gs(0.5),
       // EDM-713: fixes copy-paste from renderer to editor for Firefox