@atlaskit/media-card 74.4.0 → 74.5.0

package/dist/cjs/utils/analytics.js

@@ -30,7 +30,8 @@ var relevantFlags = {
   observedWidth: true,
   mediaInline: false,
   folderUploads: false,
-  memoryCacheLogging: true
+  memoryCacheLogging: true,
+  fetchFileStateAfterUpload: true
 };
 var LOGGED_FEATURE_FLAGS = (0, _mediaCommon.filterFeatureFlagNames)(relevantFlags);
 exports.LOGGED_FEATURE_FLAGS = LOGGED_FEATURE_FLAGS;

package/dist/cjs/utils/cardActions/styles.js

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _mediaUi = require("@atlaskit/media-ui");
 
 var _styles = require("../../card/styles");
@@ -34,12 +32,12 @@ exports.CardActionIconButtonVariant = CardActionIconButtonVariant;
 })(CardActionIconButtonVariant || (exports.CardActionIconButtonVariant = CardActionIconButtonVariant = {}));
 
 var getVariantStyles = function getVariantStyles(variant) {
-  return variant === 'filled' ? "\n    background-color: ".concat((0, _tokens.token)('elevation.surface.overlay', (0, _mixins.rgba)(_colors.N0, 0.8)), ";\n    margin-right: 8px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      background-color: ").concat((0, _tokens.token)('elevation.surface.overlay.hovered', (0, _mixins.rgba)(_colors.N0, 0.6)), "\n    }\n  ") : "\n    &:hover {\n      background-color: ".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', 'rgba(9, 30, 66, 0.06)'), ";\n    }\n  ");
+  return variant === 'filled' ? "\n    background-color: ".concat("var(--ds-surface-overlay, ".concat((0, _mixins.rgba)(_colors.N0, 0.8), ")"), ";\n    margin-right: 8px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      background-color: ", "var(--ds-surface-overlay-hovered, ".concat((0, _mixins.rgba)(_colors.N0, 0.6), ")"), "\n    }\n  ") : "\n    &:hover {\n      background-color: ".concat("var(--ds-background-neutral-subtle-hovered, rgba(9, 30, 66, 0.06))", ";\n    }\n  ");
 };
 
 var cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), _mediaUi.center, _mediaUi.borderRadius, (0, _mediaUi.size)(26), (0, _tokens.token)('color.icon', _colors.N500), getVariantStyles(variant));
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), _mediaUi.center, _mediaUi.borderRadius, (0, _mediaUi.size)(26), "var(--ds-icon, ".concat(_colors.N500, ")"), getVariantStyles(variant));
 };
 
 exports.cardActionButtonStyles = cardActionButtonStyles;

package/dist/cjs/utils/errorIcon/styles.js

@@ -9,11 +9,9 @@ exports.errorIconWrapperStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _react = require("@emotion/react");
 
 var _templateObject;
 
-var errorIconWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  color: ", ";\n"])), (0, _tokens.token)('color.icon.warning', '#ff991f'));
+var errorIconWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  color: ", ";\n"])), "var(--ds-icon-warning, #ff991f)");
 exports.errorIconWrapperStyles = errorIconWrapperStyles;

package/dist/cjs/utils/lightCards/styles.js

@@ -11,8 +11,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _mediaUi = require("@atlaskit/media-ui");
 
 var _components = require("@atlaskit/theme/components");
@@ -28,13 +26,13 @@ var wrapperStyles = function wrapperStyles(_ref) {
   var dimensions = _ref.dimensions,
       theme = _ref.theme;
   return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), _mediaUi.center, (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', _colors.N20),
-    dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
+    light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
   })({
     theme: theme
   }), (0, _components.themed)({
-    light: (0, _tokens.token)('color.icon', _colors.N50),
-    dark: (0, _tokens.token)('color.icon', _colors.DN100)
+    light: "var(--ds-icon, ".concat(_colors.N50, ")"),
+    dark: "var(--ds-icon, ".concat(_colors.DN100, ")")
   })({
     theme: theme
   }), _mediaUi.borderRadius, dimensions.width, dimensions.height);

package/dist/cjs/utils/ufoExperiences.js

@@ -22,7 +22,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.4.0";
+var packageVersion = "74.5.0";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {

package/dist/cjs/utils/viewportDetector.js

@@ -61,18 +61,10 @@ var ViewportObserver = function ViewportObserver(_ref) {
         rootMargin: "".concat(ABS_VIEWPORT_ANCHOR_OFFSET_TOP, "px")
       });
     } catch (error) {
-      var _error$message;
-
-      var errorMessage = "Failed to construct 'IntersectionObserver': member root is not of type Element";
-
-      if ((_error$message = error.message) !== null && _error$message !== void 0 && _error$message.includes(errorMessage)) {
-        intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
-          root: null,
-          rootMargin: "".concat(ABS_VIEWPORT_ANCHOR_OFFSET_TOP, "px")
-        });
-      } else {
-        throw error;
-      }
+      intersectionObserver = new IntersectionObserver(createIntersectionObserverCallback(onVisible), {
+        root: null,
+        rootMargin: "".concat(ABS_VIEWPORT_ANCHOR_OFFSET_TOP, "px")
+      });
     }
 
     cardEl && intersectionObserver.observe(cardEl);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "74.4.0",
+	"version": "74.5.0",
 	"sideEffects": false
 }

package/dist/es2019/card/card.js

@@ -26,7 +26,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.4.0";
+const packageVersion = "74.5.0";
 export class CardBase extends Component {
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // of Cards regardless of whether it shares the same file (either internal or external)

package/dist/es2019/card/cardImageView/cardOverlay/index.js

@@ -5,7 +5,6 @@ import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import cx from 'classnames';
-import { token } from '@atlaskit/tokens';
 import TickIcon from '@atlaskit/icon/glyph/check';
 import { Ellipsify } from '@atlaskit/media-ui'; // We dont require things directly from "utils" to avoid circular dependencies
 
@@ -76,7 +75,7 @@ export class CardOverlay extends Component {
       actions
     } = this.props;
     const titleText = resolveTitleText(cardStatus, mediaName, error, selected);
-    const menuTriggerColor = !persistent ? token('color.icon.inverse', 'white') : undefined;
+    const menuTriggerColor = !persistent ? "var(--ds-icon-inverse, white)" : undefined;
     return jsx(Overlay, {
       hasError: !!error,
       noHover: noHover,

package/dist/es2019/card/cardImageView/cardOverlay/styles.js

@@ -8,24 +8,23 @@ import { css } from '@emotion/react';
 import { borderRadius, size, ellipsis, absolute } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import * as colors from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { rgba, easeOutCubic, transition, antialiased } from '../../styles';
 export const tickBoxStyles = css`
   ${size(14)}
   ${transition()}
-  background-color: ${token('elevation.surface.overlay', rgba('#ffffff', 0.5))};
+  background-color: ${`var(--ds-surface-overlay, ${rgba('#ffffff', 0.5)})`};
   position: absolute;
   top: 8px;
   right: 8px;
   border-radius: 20px;
-  color: ${token('color.icon.subtle', '#798599')}; /* CLEANUP - TODO FIL-3884: Align color with new design */
+  color: ${"var(--ds-icon-subtle, #798599)"}; /* CLEANUP - TODO FIL-3884: Align color with new design */
   display: flex;
   opacity: 0;
 
   &.selected {
     opacity: 1;
-    color: ${token('color.icon.inverse', 'white')};
-    background-color: ${token('color.icon.selected', '#0052cc')}; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */
+    color: ${"var(--ds-icon-inverse, white)"};
+    background-color: ${"var(--ds-icon-selected, #0052cc)"}; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */
   }
 
   /* Enforce dimensions of "tick" icon */
@@ -64,7 +63,7 @@ export const overlayStyles = props => css`
   &:not(.persistent):hover, &.active {
     .top-row {
       .title {
-        color: ${token('color.text.information', colors.B400)};
+        color: ${`var(--ds-text-information, ${colors.B400})`};
       }
     }
   }
@@ -72,7 +71,7 @@ export const overlayStyles = props => css`
   &.noHover:hover {
     .top-row {
       .title {
-        color: ${token('color.text', colors.N800)};
+        color: ${`var(--ds-text, ${colors.N800})`};
       }
     }
   }
@@ -83,22 +82,22 @@ export const overlayStyles = props => css`
 
   &:not(.persistent) {
     &:not(.error, .noHover):hover {
-      background-color: ${token('color.background.neutral.hovered', rgba(colors.N900, 0.06))};
+      background-color: ${`var(--ds-background-neutral-hovered, ${rgba(colors.N900, 0.06)})`};
     }
 
     &.selectable {
       &.selected {
-        background-color: ${token('color.background.selected', colors.B200)};
+        background-color: ${`var(--ds-background-selected, ${colors.B200})`};
 
         &:hover {
           /* CLEANUP - TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */
-          background-color: ${token('color.background.selected.hovered', rgba(colors.N900, 0.16))};
+          background-color: ${`var(--ds-background-selected-hovered, ${rgba(colors.N900, 0.16)})`};
         }
 
         .title,
         .bottom-row,
         .file-size {
-          color: ${token('color.text', colors.N900)};
+          color: ${`var(--ds-text, ${colors.N900})`};
         }
       }
     }
@@ -113,7 +112,7 @@ export const overlayStyles = props => css`
       .title {
         transition: opacity 0.3s;
         opacity: 0;
-        color: ${token('color.text', 'white')};
+        color: ${"var(--ds-text, white)"};
         visibility: hidden;
       }
     }
@@ -129,14 +128,14 @@ export const overlayStyles = props => css`
       }
 
       .file-size {
-        color: ${token('color.text', 'white')};
+        color: ${"var(--ds-text, white)"};
         display: none;
       }
     }
 
     &:hover,
     &.active {
-      background-color: ${token('color.interaction.hovered', rgba(colors.N900, 0.5))};
+      background-color: ${`var(--ds-interaction-hovered, ${rgba(colors.N900, 0.5)})`};
 
       .title {
         opacity: 1;
@@ -164,8 +163,8 @@ export const overlayStyles = props => css`
 
       &.selected {
         .tickbox {
-          background-color: ${token('color.background.selected.bold', colors.B200)} !important;
-          color: ${token('color.icon.inverse', 'white')};
+          background-color: ${`var(--ds-background-selected-bold, ${colors.B200})`} !important;
+          color: ${"var(--ds-icon-inverse, white)"};
         }
       }
     }
@@ -179,7 +178,7 @@ export const overlayStyles = props => css`
     &.active {
       .top-row {
         .title {
-          color: ${token('color.text', colors.N800)};
+          color: ${`var(--ds-text, ${colors.N800})`};
         }
       }
     }
@@ -207,7 +206,7 @@ export const errorMessageStyles = css`
   ${antialiased} display: inline-block;
   vertical-align: middle;
   font-weight: bold;
-  color: ${token('color.text.subtlest', colors.N70)};
+  color: ${`var(--ds-text-subtlest, ${colors.N70})`};
   font-size: 12px;
   line-height: 15px;
   overflow: hidden;
@@ -224,8 +223,8 @@ export const titleWrapperStyles = theme => css`
   box-sizing: border-box;
   word-wrap: break-word;
   color: ${themed({
-  light: token('color.text', colors.N800),
-  dark: token('color.text', colors.DN900)
+  light: `var(--ds-text, ${colors.N800})`,
+  dark: `var(--ds-text, ${colors.DN900})`
 })({
   theme
 })};
@@ -234,7 +233,7 @@ export const titleWrapperStyles = theme => css`
 `;
 export const subtitleStyles = css`
   ${ellipsis('100px')} font-size: 12px;
-  color: ${token('color.text.subtlest', '#5e6c84')};
+  color: ${"var(--ds-text-subtlest, #5e6c84)"};
 `;
 export const metadataStyles = css`
   display: flex;

package/dist/es2019/card/cardImageView/fileCardImageView.js

@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
-import { token } from '@atlaskit/tokens';
 import { Ellipsify, MediaImage } from '@atlaskit/media-ui';
 import VidPlayIcon from '@atlaskit/icon/glyph/vid-play';
 import { CardOverlay } from './cardOverlay';
@@ -220,7 +219,7 @@ export class FileCardImageView extends Component {
         css: cardActionsWrapperStyles
       }, actions ? jsx(CardActions, {
         actions: actions,
-        triggerColor: token('color.icon.inverse', 'white')
+        triggerColor: "var(--ds-icon-inverse, white)"
       }) : null))));
     });
 

package/dist/es2019/card/cardImageView/styles.js

@@ -1,5 +1,4 @@
 import { css } from '@emotion/react';
-import { token } from '@atlaskit/tokens';
 import { absolute, borderRadius, size } from '@atlaskit/media-ui';
 import { themed } from '@atlaskit/theme/components';
 import { N20, DN50, N0 } from '@atlaskit/theme/colors';
@@ -18,8 +17,8 @@ const getBackgroundColor = props => {
     mediaType
   } = props;
   return `background: ${mediaType === 'image' ? 'transparent' : themed({
-    light: token('color.background.neutral', N20),
-    dark: token('color.background.neutral', DN50)
+    light: `var(--ds-background-neutral, ${N20})`,
+    dark: `var(--ds-background-neutral, ${DN50})`
   })(props)};`;
 };
 
@@ -59,7 +58,7 @@ export const playIconWrapperStyles = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${token('color.icon.inverse', 'white')};
+  color: ${"var(--ds-icon-inverse, white)"};
 
   /* we want to override default icon size and hover state */
   &:hover > * {
@@ -68,7 +67,7 @@ export const playIconWrapperStyles = css`
   }
 `;
 export const playIconBackgroundStyles = css`
-  background: ${token('color.background.neutral.bold', 'rgba(23, 43, 77, 0.7)')};
+  background: ${"var(--ds-background-neutral-bold, rgba(23, 43, 77, 0.7))"};
   border-radius: 100%;
   padding: 10px;
   display: flex;
@@ -89,12 +88,12 @@ export const overlayStyles = css`
   ${absolute()}
   ${size()}
   border-radius: inherit;
-  background-color: ${token('color.blanket', 'rgba(9, 30, 66, 0.5)')};
+  background-color: ${"var(--ds-blanket, rgba(9, 30, 66, 0.5))"};
 `;
 export const titleStyles = css`
   ${absolute()} width: 100%;
   padding: 8px;
-  color: ${token('color.text.inverse', N0)};
+  color: ${`var(--ds-text-inverse, ${N0})`};
   font-size: 12px;
   line-height: 18px;
   word-wrap: break-word;
@@ -105,7 +104,7 @@ export const bodyStyles = css`
   bottom: 0;
   width: 100%;
   padding: 8px;
-  color: ${token('color.text.inverse', N0)};
+  color: ${`var(--ds-text-inverse, ${N0})`};
 `;
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 

package/dist/es2019/card/cardState.js

@@ -19,7 +19,7 @@ export const createStateUpdater = (newState, fireErrorEvent) => prevState => {
   return newState;
 };
 export const getCardStateFromFileState = (fileState, isBannedLocalPreview, featureFlags) => {
-  const status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags));
+  const status = getCardStatus(fileState.status, extractFilePreviewStatus(fileState, isBannedLocalPreview, featureFlags), featureFlags);
   const error = status === 'error' && isErrorFileState(fileState) ? new MediaCardError('error-file-state', new Error(fileState.message)) : undefined;
   const progress = status === 'uploading' && fileState.status === 'uploading' ? fileState.progress : 1;
   return {

package/dist/es2019/card/getCardStatus.js

@@ -1,5 +1,7 @@
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
 export const isFinalCardStatus = status => ['complete', 'error', 'failed-processing'].includes(status);
-export const getCardStatus = (fileStatus, {
+
+const getCardStatusBuggy = (fileStatus, {
   hasFilesize,
   isPreviewable,
   hasPreview
@@ -37,4 +39,35 @@ export const getCardStatus = (fileStatus, {
     default:
       return 'loading';
   }
+};
+
+const getCardStatusFixed = (fileStatus, {
+  isPreviewable,
+  hasPreview
+}) => {
+  switch (fileStatus) {
+    case 'uploading':
+    case 'failed-processing':
+    case 'error':
+    case 'processing':
+      return fileStatus;
+
+    case 'processed':
+      if (!isPreviewable || !hasPreview) {
+        return 'complete';
+      }
+
+      return 'loading-preview';
+
+    default:
+      return 'loading';
+  }
+};
+
+export const getCardStatus = (fileStatus, filePreviewStatus, featureFlags) => {
+  if (getMediaFeatureFlag('fetchFileStateAfterUpload', featureFlags)) {
+    return getCardStatusFixed(fileStatus, filePreviewStatus);
+  }
+
+  return getCardStatusBuggy(fileStatus, filePreviewStatus);
 };

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -80,7 +80,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.4.0";
+const packageVersion = "74.5.0";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

package/dist/es2019/card/styles/index.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { fontFamily } from '@atlaskit/theme/constants';
 import { fadeIn } from '@atlaskit/media-ui';
-import { token } from '@atlaskit/tokens';
 export { defaultTransitionDuration } from './config';
 export { antialiased, borderRadiusLeft, capitalize, centerSelf, centerSelfX, centerSelfY, centerX, hexToRgb, rgba, spaceAround, transition, withAppearance } from './mixins';
 export { easeOutCubic, easeOutExpo } from './easing';
@@ -15,7 +14,7 @@ export const rootStyles = () => css`
   }
 `;
 export const cardShadow = `
-  box-shadow: ${token('elevation.shadow.raised', '0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24)')};
+  box-shadow: ${"var(--ds-shadow-raised, 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24))"};
 `;
 export const fadeinImageStyles = () => css`
   ${fadeIn};

package/dist/es2019/card/ui/blanket/styles.js

@@ -1,9 +1,8 @@
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { transition } from '../../styles';
 import { N90A } from '@atlaskit/theme/colors';
 export const blanketClassName = 'media-card-blanket';
-export const fixedBlanketStyles = `background-color: ${token('color.blanket', N90A)};`;
+export const fixedBlanketStyles = `background-color: ${`var(--ds-blanket, ${N90A})`};`;
 export const blanketStyles = isFixed => css`
   ${transition()}
   position: absolute;

package/dist/es2019/card/ui/iconMessage/styles.js

@@ -1,4 +1,3 @@
-import { token } from '@atlaskit/tokens';
 import { css, keyframes } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 const breatheAnimation = keyframes`
@@ -20,7 +19,7 @@ const getStylesBasedOnProps = ({
   opacity: 1;
   font-weight: 450;
   ${reducedFont ? 'font-size: 0.7em;' : ''}
-  color: ${token('color.text.subtlest', N300)};
+  color: ${`var(--ds-text-subtlest, ${N300})`};
   text-align: center;
   ${animated ? animatedStyles : ''}
   margin-bottom: -1em;

package/dist/es2019/card/ui/loadingRateLimited/styles.js

@@ -1,4 +1,3 @@
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { generateResponsiveStyles } from '../progressBar/styles';
 import { N300 } from '@atlaskit/theme/colors';
@@ -27,7 +26,7 @@ export const loadingRateLimitedTextWrapperStyles = ({
 }) => css`
   margin-top: 10px;
   overflow: hidden;
-  color: ${token('color.text.subtlest', N300)};
+  color: ${`var(--ds-text-subtlest, ${N300})`};
   display: block;
   width: 100%;
   text-align: center;

package/dist/es2019/card/ui/newFileExperience/newFileExperienceWrapper.js

@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/react';
 import { newFileExperienceClassName } from '../../cardConstants';
 import { newFileExperienceWrapperStyles } from './styles';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 export const NewFileExperienceWrapper = props => {
   const {
     testId,
@@ -19,6 +20,7 @@ export const NewFileExperienceWrapper = props => {
     isTickBoxSelectable,
     shouldDisplayTooltip
   } = props;
+  const theme = useGlobalTheme();
   return jsx("div", {
     id: "newFileExperienceWrapper",
     className: newFileExperienceClassName,
@@ -33,7 +35,8 @@ export const NewFileExperienceWrapper = props => {
       isPlayButtonClickable,
       isTickBoxSelectable,
       shouldDisplayTooltip,
-      mediaCardCursor
+      mediaCardCursor,
+      theme
     }),
     ref: innerRef,
     onClick: onClick,

package/dist/es2019/card/ui/newFileExperience/styles.js

@@ -2,12 +2,13 @@ import { css } from '@emotion/react';
 import { fontFamily } from '@atlaskit/theme/constants';
 import { borderRadius } from '@atlaskit/media-ui';
 import { N20 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
+import { themed } from '@atlaskit/theme/components';
 import { transition } from '../../styles';
 import { fixedBlanketStyles, blanketClassName } from '../blanket/styles';
 import { fixedActionBarStyles, actionsBarClassName } from '../actionsBar/styles';
 import { generateResponsiveStyles, getClickablePlayButtonStyles, getCursorStyle, getSelectableTickBoxStyles, getWrapperDimensions, getWrapperShadow } from '../styles';
+const BACKGROUND_COLOR_DARK = '#22272C';
 export const newFileExperienceWrapperStyles = ({
   breakpoint,
   dimensions,
@@ -18,7 +19,8 @@ export const newFileExperienceWrapperStyles = ({
   isPlayButtonClickable,
   isTickBoxSelectable,
   shouldDisplayTooltip,
-  mediaCardCursor
+  mediaCardCursor,
+  theme
 }) => css`
   ${transition()}
   box-sizing: border-box;
@@ -28,7 +30,12 @@ export const newFileExperienceWrapperStyles = ({
   position: relative;
   font-family: ${fontFamily()};
   ${getWrapperDimensions(dimensions, appearance)}
-  ${displayBackground && `background-color: ${token('color.background.neutral', N20)};`}
+  ${displayBackground && `background: ${themed({
+  light: `var(--ds-background-neutral, ${N20})`,
+  dark: `var(--ds-background-neutral, ${BACKGROUND_COLOR_DARK})`
+})({
+  theme
+})};`}
   ${borderRadius}
   ${getCursorStyle(mediaCardCursor)}
   ${getWrapperShadow(disableOverlay, selected)}

package/dist/es2019/card/ui/playButton/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { N0, N90A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const playButtonClassName = 'media-card-play-button';
 export const bkgClassName = 'play-icon-background';
 const discSize = 48;
@@ -20,7 +19,7 @@ export const playButtonWrapperStyles = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${token('color.icon.inverse', N0)};
+  color: ${`var(--ds-icon-inverse, ${N0})`};
   span {
     position: absolute;
   }
@@ -31,6 +30,6 @@ export const backgroundStyles = css`
   position: absolute;
   width: ${discSize}px;
   height: ${discSize}px;
-  background: ${token('color.background.neutral.bold', N90A)};
+  background: ${`var(--ds-background-neutral-bold, ${N90A})`};
   border-radius: 100%;
 `;

package/dist/es2019/card/ui/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
 import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
 import { getDefaultCardDimensions } from '../../utils/cardDimensions';
@@ -39,7 +38,7 @@ export const getWrapperDimensions = (dimensions, appearance) => {
 // CSS outline has no 'radius', therefore we can't achieve the same effect with it
 
 export const getWrapperShadow = (disableOverlay, selected) => {
-  const withOverlayShadow = !disableOverlay ? `${token('elevation.shadow.raised', `0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}`)}` : '';
+  const withOverlayShadow = !disableOverlay ? `${`var(--ds-shadow-raised, ${`0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}`})`}` : '';
   const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
   const shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
   return shadow ? `box-shadow: ${shadow};` : '';

package/dist/es2019/card/ui/tickBox/styles.js

@@ -1,14 +1,13 @@
 import { css } from '@emotion/react';
 import { transition } from '../../styles';
 import { B200, N0, N100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const tickBoxClassName = 'media-card-tickbox';
 export const tickboxFixedStyles = `
-  background-color: ${token('color.background.input', N0)};
-  color: ${token('color.icon.subtle', N100)};
+  background-color: ${`var(--ds-background-input, ${N0})`};
+  color: ${`var(--ds-icon-subtle, ${N100})`};
 `;
-export const getSelectedStyles = selected => selected ? `background-color: ${token('color.icon.information', B200)};
-      color: ${token('color.icon.inverse', 'white')};` : ``;
+export const getSelectedStyles = selected => selected ? `background-color: ${`var(--ds-icon-information, ${B200})`};
+      color: ${"var(--ds-icon-inverse, white)"};` : ``;
 export const wrapperStyles = selected => css`
   ${transition()}
   font-size: 14px;

package/dist/es2019/card/ui/titleBox/failedTitleBox.js

@@ -3,7 +3,6 @@ import { FormattedMessage } from 'react-intl-next';
 import EditorWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { messages } from '@atlaskit/media-ui';
 import { R300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { ErrorMessageWrapper, TitleBoxWrapper } from './titleBoxComponents';
 export const FailedTitleBox = ({
   breakpoint,
@@ -14,6 +13,6 @@ export const FailedTitleBox = ({
   }, /*#__PURE__*/React.createElement(ErrorMessageWrapper, null, /*#__PURE__*/React.createElement(EditorWarningIcon, {
     label: 'Warning',
     size: 'small',
-    primaryColor: token('color.text.danger', R300)
+    primaryColor: `var(--ds-text-danger, ${R300})`
   }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };