@atlaskit/media-card 74.1.9 → 74.3.0

package/dist/cjs/utils/analytics.js

@@ -65,21 +65,24 @@ var getRenderPreviewableCardPayload = function getRenderPreviewableCardPayload(f
 
 exports.getRenderPreviewableCardPayload = getRenderPreviewableCardPayload;
 
-var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes, performanceAttributes) {
+var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes, performanceAttributes, traceContext) {
   return {
     eventType: 'operational',
     action: 'commenced',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
-      performanceAttributes: performanceAttributes
+      performanceAttributes: performanceAttributes,
+      traceContext: {
+        traceId: traceContext.traceId
+      }
     }
   };
 };
 
 exports.getRenderCommencedEventPayload = getRenderCommencedEventPayload;
 
-var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability) {
+var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
   return {
     eventType: 'operational',
     action: 'succeeded',
@@ -88,7 +91,8 @@ var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fil
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'success',
-      ssrReliability: ssrReliability
+      ssrReliability: ssrReliability,
+      traceContext: traceContext
     }
   };
 };
@@ -189,7 +193,7 @@ var extractErrorInfo = function extractErrorInfo(error) {
 
 exports.extractErrorInfo = extractErrorInfo;
 
-var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability) {
+var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -200,14 +204,15 @@ var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttribu
       status: 'fail'
     }, extractErrorInfo(error)), {}, {
       request: getRenderErrorRequestMetadata(error),
-      ssrReliability: ssrReliability
+      ssrReliability: ssrReliability,
+      traceContext: traceContext
     })
   };
 };
 
 exports.getRenderErrorEventPayload = getRenderErrorEventPayload;
 
-var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability) {
+var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -217,7 +222,8 @@ var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload
       performanceAttributes: performanceAttributes,
       status: 'fail',
       failReason: 'failed-processing',
-      ssrReliability: ssrReliability
+      ssrReliability: ssrReliability,
+      traceContext: traceContext
     }
   };
 };

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

@@ -13,10 +13,14 @@ 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");
 
+var _mixins = require("../../card/styles/mixins");
+
 var _templateObject, _templateObject2;
 
 var wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])), (0, _styles.rootStyles)());
@@ -30,12 +34,12 @@ exports.CardActionIconButtonVariant = CardActionIconButtonVariant;
 })(CardActionIconButtonVariant || (exports.CardActionIconButtonVariant = CardActionIconButtonVariant = {}));
 
 var getVariantStyles = function getVariantStyles(variant) {
-  return variant === 'filled' ? "\n    background: ".concat(_colors.N0, ";\n    margin-right: 8px;\n    opacity: 0.8;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      opacity: 0.6;\n    }\n  ") : "\n    &:hover {\n      background-color: rgba(9, 30, 66, 0.06);\n    }\n  ";
+  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  ");
 };
 
 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), _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), (0, _tokens.token)('color.icon', _colors.N500), getVariantStyles(variant));
 };
 
 exports.cardActionButtonStyles = cardActionButtonStyles;

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

@@ -9,9 +9,11 @@ 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: #ff991f;\n"])));
+var errorIconWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  color: ", ";\n"])), (0, _tokens.token)('color.icon.warning', '#ff991f'));
 exports.errorIconWrapperStyles = errorIconWrapperStyles;

package/dist/cjs/utils/fileIcon/index.js

@@ -21,7 +21,7 @@ var _react = require("@emotion/react");
 
 var _react2 = require("react");
 
-var _mediaTypeIcon = require("../mediaTypeIcon");
+var _mediaTypeIcon = require("@atlaskit/media-ui/media-type-icon");
 
 var _styles = require("./styles");
 

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

@@ -11,6 +11,8 @@ 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");
@@ -26,13 +28,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: _colors.N20,
-    dark: _colors.DN50
+    light: (0, _tokens.token)('color.background.neutral', _colors.N20),
+    dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
   })({
     theme: theme
   }), (0, _components.themed)({
-    light: _colors.N50,
-    dark: _colors.DN100
+    light: (0, _tokens.token)('color.icon', _colors.N50),
+    dark: (0, _tokens.token)('color.icon', _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.1.9";
+var packageVersion = "74.3.0";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {

package/dist/cjs/utils/videoSnapshot.js

@@ -11,25 +11,50 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-var _videoSnapshot = _interopRequireDefault(require("video-snapshot"));
-
 var takeSnapshot = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(blob) {
-    var snapshooter, dataUri;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            snapshooter = new _videoSnapshot.default(blob);
-            _context.next = 3;
-            return snapshooter.takeSnapshot();
+            return _context.abrupt("return", new Promise(function (resolve, reject) {
+              var url = URL.createObjectURL(blob);
+              var video = document.createElement('video');
+              video.preload = 'metadata';
+              video.src = url;
+              video.muted = true;
+              video.play().catch(function () {
+                return reject(new Error('failed to play video'));
+              });
+              video.addEventListener('timeupdate', function timeUpdateHandler() {
+                video.removeEventListener('timeupdate', timeUpdateHandler);
+                video.pause();
+                URL.revokeObjectURL(url); //create canvas to draw our first frame on.
+
+                if (!video.videoWidth && !video.videoHeight) {
+                  return reject(new Error('error retrieving video dimensions'));
+                }
+
+                var canvas = document.createElement('canvas');
+                canvas.width = video.videoWidth;
+                canvas.height = video.videoHeight;
+                var context = canvas.getContext('2d');
+
+                if (!context) {
+                  return reject(new Error('error creating canvas context'));
+                }
 
-          case 3:
-            dataUri = _context.sent;
-            snapshooter.end();
-            return _context.abrupt("return", dataUri);
+                context.drawImage(video, 0, 0, canvas.width, canvas.height);
+                var dataURL = canvas.toDataURL('image/jpeg', 0.85);
+                resolve(dataURL);
+              });
+              video.addEventListener('error', function () {
+                reject(new Error('failed to load video'));
+                URL.revokeObjectURL(url);
+              });
+            }));
 
-          case 6:
+          case 1:
           case "end":
             return _context.stop();
         }

package/dist/cjs/version.json

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

package/dist/es2019/card/card.js

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
+import { getRandomHex } from '@atlaskit/media-common';
 import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, isProcessedFileState, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { injectIntl, IntlProvider } from 'react-intl-next';
@@ -25,12 +26,13 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.1.9";
+const packageVersion = "74.3.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)
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
+  // Generate unique traceId for file
   constructor(props) {
     super(props);
 
@@ -54,6 +56,10 @@ export class CardBase extends Component {
 
     _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
+    _defineProperty(this, "traceContext", {
+      traceId: getRandomHex(16)
+    });
+
     _defineProperty(this, "getImageURLParams", ({
       collectionName: collection
     }) => ({
@@ -112,7 +118,8 @@ export class CardBase extends Component {
         imageUrlParams: this.getImageURLParams(identifier),
         mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState),
         createAnalyticsEvent,
-        featureFlags: this.props.featureFlags
+        featureFlags: this.props.featureFlags,
+        traceContext: this.traceContext
       };
     });
 
@@ -937,7 +944,7 @@ export class CardBase extends Component {
     const {
       createAnalyticsEvent
     } = this.props;
-    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
+    createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext);
     completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
   }
 
@@ -950,7 +957,7 @@ export class CardBase extends Component {
       overall: {
         durationSincePageStart: this.timeElapsedTillCommenced
       }
-    });
+    }, this.traceContext);
     startUfoExperience(this.internalOccurrenceKey);
   }
 

package/dist/es2019/card/cardAnalytics.js

@@ -1,24 +1,24 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../utils/analytics';
 import { MediaCardError } from '../errors';
-export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data')) => {
+export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 
   switch (status) {
     case 'complete':
-      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability));
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext));
       break;
 
     case 'failed-processing':
-      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability));
+      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext));
       break;
 
     case 'error':
-      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability));
+      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext));
       break;
   }
 };
-export const fireCommencedEvent = (createAnalyticsEvent, fileAttributes, performanceAttributes) => {
-  fireMediaCardEvent(getRenderCommencedEventPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
+export const fireCommencedEvent = (createAnalyticsEvent, fileAttributes, performanceAttributes, traceContext) => {
+  fireMediaCardEvent(getRenderCommencedEventPayload(fileAttributes, performanceAttributes, traceContext), createAnalyticsEvent);
 };
 export const fireCopiedEvent = (createAnalyticsEvent, fileId, cardRef) => {
   if (typeof window.getSelection === 'function') {

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

@@ -5,6 +5,7 @@ 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
 
@@ -75,7 +76,7 @@ export class CardOverlay extends Component {
       actions
     } = this.props;
     const titleText = resolveTitleText(cardStatus, mediaName, error, selected);
-    const menuTriggerColor = !persistent ? 'white' : undefined;
+    const menuTriggerColor = !persistent ? token('color.icon.inverse', 'white') : undefined;
     return jsx(Overlay, {
       hasError: !!error,
       noHover: noHover,

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

@@ -8,23 +8,24 @@ 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 { rgba, centerX, easeOutCubic, transition, antialiased } from '../../styles';
+import { token } from '@atlaskit/tokens';
+import { rgba, easeOutCubic, transition, antialiased } from '../../styles';
 export const tickBoxStyles = css`
   ${size(14)}
   ${transition()}
-  background-color: ${rgba('#ffffff', 0.5)};
+  background-color: ${token('elevation.surface.overlay', rgba('#ffffff', 0.5))};
   position: absolute;
   top: 8px;
   right: 8px;
   border-radius: 20px;
-  color: #798599; /* TODO FIL-3884: Align color with new design */
+  color: ${token('color.icon.subtle', '#798599')}; /* CLEANUP - TODO FIL-3884: Align color with new design */
   display: flex;
   opacity: 0;
 
   &.selected {
     opacity: 1;
-    color: white;
-    background-color: #0052cc; /* TODO FIL-3884: Align with tickbox icons */
+    color: ${token('color.icon.inverse', 'white')};
+    background-color: ${token('color.icon.selected', '#0052cc')}; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */
   }
 
   /* Enforce dimensions of "tick" icon */
@@ -63,13 +64,7 @@ export const overlayStyles = props => css`
   &:not(.persistent):hover, &.active {
     .top-row {
       .title {
-        color: ${colors.B400};
-      }
-    }
-
-    .bottom-row {
-      .delete-btn {
-        display: flex;
+        color: ${token('color.text.information', colors.B400)};
       }
     }
   }
@@ -77,7 +72,7 @@ export const overlayStyles = props => css`
   &.noHover:hover {
     .top-row {
       .title {
-        color: ${colors.N800};
+        color: ${token('color.text', colors.N800)};
       }
     }
   }
@@ -88,22 +83,22 @@ export const overlayStyles = props => css`
 
   &:not(.persistent) {
     &:not(.error, .noHover):hover {
-      background-color: ${rgba(colors.N900, 0.06)};
+      background-color: ${token('color.background.neutral.hovered', rgba(colors.N900, 0.06))};
     }
 
     &.selectable {
       &.selected {
-        background-color: ${colors.B200};
+        background-color: ${token('color.background.selected', colors.B200)};
 
         &:hover {
-          /* TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */
+          /* 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))};
         }
 
         .title,
         .bottom-row,
-        .file-size,
-        .more-btn {
-          color: ${colors.N0};
+        .file-size {
+          color: ${token('color.text', colors.N900)};
         }
       }
     }
@@ -118,7 +113,7 @@ export const overlayStyles = props => css`
       .title {
         transition: opacity 0.3s;
         opacity: 0;
-        color: white;
+        color: ${token('color.text', 'white')};
         visibility: hidden;
       }
     }
@@ -134,31 +129,14 @@ export const overlayStyles = props => css`
       }
 
       .file-size {
-        color: white;
-        display: none;
-      }
-
-      .more-btn {
-        color: ${colors.N0};
-        display: none;
-
-        &:hover {
-          background-color: rgba(9, 30, 66, 0.2);
-        }
-      }
-
-      .delete-btn {
+        color: ${token('color.text', 'white')};
         display: none;
-
-        &:hover {
-          background-color: rgba(9, 30, 66, 0.2);
-        }
       }
     }
 
     &:hover,
     &.active {
-      background-color: ${rgba(colors.N900, 0.5)};
+      background-color: ${token('color.interaction.hovered', rgba(colors.N900, 0.5))};
 
       .title {
         opacity: 1;
@@ -170,14 +148,6 @@ export const overlayStyles = props => css`
         display: block;
       }
 
-      .more-btn {
-        ${centerX} color: ${colors.N0};
-      }
-
-      .delete-btn {
-        display: flex;
-      }
-
       .bottom-row {
         opacity: 1;
         transform: translateY(0);
@@ -194,9 +164,8 @@ export const overlayStyles = props => css`
 
       &.selected {
         .tickbox {
-          background-color: ${colors.B200} !important;
-          border-color: ${colors.B200} !important;
-          color: white;
+          background-color: ${token('color.background.selected.bold', colors.B200)} !important;
+          color: ${token('color.icon.inverse', 'white')};
         }
       }
     }
@@ -210,7 +179,7 @@ export const overlayStyles = props => css`
     &.active {
       .top-row {
         .title {
-          color: ${colors.N800};
+          color: ${token('color.text', colors.N800)};
         }
       }
     }
@@ -238,7 +207,7 @@ export const errorMessageStyles = css`
   ${antialiased} display: inline-block;
   vertical-align: middle;
   font-weight: bold;
-  color: ${colors.N70};
+  color: ${token('color.text.subtlest', colors.N70)};
   font-size: 12px;
   line-height: 15px;
   overflow: hidden;
@@ -255,8 +224,8 @@ export const titleWrapperStyles = theme => css`
   box-sizing: border-box;
   word-wrap: break-word;
   color: ${themed({
-  light: colors.N800,
-  dark: colors.DN900
+  light: token('color.text', colors.N800),
+  dark: token('color.text', colors.DN900)
 })({
   theme
 })};
@@ -265,7 +234,7 @@ export const titleWrapperStyles = theme => css`
 `;
 export const subtitleStyles = css`
   ${ellipsis('100px')} font-size: 12px;
-  color: #5e6c84;
+  color: ${token('color.text.subtlest', '#5e6c84')};
 `;
 export const metadataStyles = css`
   display: flex;

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

@@ -2,8 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import React from 'react';
-import { Component } from '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 +220,7 @@ export class FileCardImageView extends Component {
         css: cardActionsWrapperStyles
       }, actions ? jsx(CardActions, {
         actions: actions,
-        triggerColor: "white"
+        triggerColor: token('color.icon.inverse', 'white')
       }) : null))));
     });
 

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

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

package/dist/es2019/card/getCardPreview/helpers.js

@@ -69,9 +69,9 @@ export const getCardPreviewFromFilePreview = async filePreview => {
 
   throw new LocalPreviewError('local-preview-unsupported');
 };
-export const getCardPreviewFromBackend = async (mediaClient, id, params) => {
+export const getCardPreviewFromBackend = async (mediaClient, id, params, traceContext) => {
   try {
-    const blob = await mediaClient.getImage(id, params);
+    const blob = await mediaClient.getImage(id, params, undefined, undefined, traceContext);
     return {
       dataURI: URL.createObjectURL(blob),
       orientation: 1,

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

@@ -75,7 +75,8 @@ export const getCardPreview = async ({
   imageUrlParams,
   mediaBlobUrlAttrs,
   createAnalyticsEvent,
-  featureFlags
+  featureFlags,
+  traceContext
 }) => {
   const mode = imageUrlParams.mode;
   const cachedPreview = cardPreviewCache.get(id, mode);
@@ -136,7 +137,7 @@ export const getCardPreview = async ({
     throw new MediaCardError('remote-preview-not-ready');
   }
 
-  const remotePreview = await fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs);
+  const remotePreview = await fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs, traceContext);
 
   if (getMediaFeatureFlag('memoryCacheLogging', featureFlags)) {
     createAnalyticsEvent && fireImageFetchingOperationalEvent(createAnalyticsEvent, 'remote-success', {
@@ -197,8 +198,8 @@ export const isSSRClientPreview = preview => {
   return ssrClientSources.includes(preview.source);
 };
 export const isSSRDataPreview = preview => preview.source === 'ssr-data';
-export const fetchAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs) => {
-  const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params);
+export const fetchAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) => {
+  const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params, traceContext);
   return extendAndCachePreview(id, params.mode, { ...remotePreview,
     dimensions
   }, mediaBlobUrlAttrs);