@atlaskit/media-card 74.2.0 → 74.3.1

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.2.0";
+const packageVersion = "74.3.1";
 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)
@@ -96,7 +96,7 @@ export class CardBase extends Component {
       } : undefined;
     });
 
-    _defineProperty(this, "getCardPreviewParams", (identifier, fileState, traceContext) => {
+    _defineProperty(this, "getCardPreviewParams", (identifier, fileState) => {
       const {
         isBannedLocalPreview
       } = this.state;
@@ -119,7 +119,7 @@ export class CardBase extends Component {
         mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState),
         createAnalyticsEvent,
         featureFlags: this.props.featureFlags,
-        traceId: traceContext.traceId
+        traceContext: this.traceContext
       };
     });
 
@@ -153,7 +153,7 @@ export class CardBase extends Component {
 
     _defineProperty(this, "resolvePreview", async (identifier, fileState) => {
       try {
-        const params = this.getCardPreviewParams(identifier, fileState, this.traceContext);
+        const params = this.getCardPreviewParams(identifier, fileState);
         const cardPreview = await getCardPreview(params);
         this.safeSetState({
           cardPreview

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, traceId) => {
+export const getCardPreviewFromBackend = async (mediaClient, id, params, traceContext) => {
   try {
-    const blob = await mediaClient.getImage(id, params, undefined, undefined, traceId);
+    const blob = await mediaClient.getImage(id, params, undefined, undefined, traceContext);
     return {
       dataURI: URL.createObjectURL(blob),
       orientation: 1,

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

@@ -76,7 +76,7 @@ export const getCardPreview = async ({
   mediaBlobUrlAttrs,
   createAnalyticsEvent,
   featureFlags,
-  traceId
+  traceContext
 }) => {
   const mode = imageUrlParams.mode;
   const cachedPreview = cardPreviewCache.get(id, mode);
@@ -137,7 +137,7 @@ export const getCardPreview = async ({
     throw new MediaCardError('remote-preview-not-ready');
   }
 
-  const remotePreview = await fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs, traceId);
+  const remotePreview = await fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs, traceContext);
 
   if (getMediaFeatureFlag('memoryCacheLogging', featureFlags)) {
     createAnalyticsEvent && fireImageFetchingOperationalEvent(createAnalyticsEvent, 'remote-success', {
@@ -198,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, traceId) => {
-  const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params, traceId);
+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);

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

@@ -1,6 +1,7 @@
 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';
@@ -14,7 +15,7 @@ export const rootStyles = () => css`
   }
 `;
 export const cardShadow = `
-  box-shadow: 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24);
+  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)')};
 `;
 export const fadeinImageStyles = () => css`
   ${fadeIn};

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

@@ -1,8 +1,9 @@
+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: ${N90A};`;
+export const fixedBlanketStyles = `background-color: ${token('color.blanket', N90A)};`;
 export const blanketStyles = isFixed => css`
   ${transition()}
   position: absolute;

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

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

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

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

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

@@ -2,6 +2,7 @@ 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 { transition } from '../../styles';
 import { fixedBlanketStyles, blanketClassName } from '../blanket/styles';
@@ -27,17 +28,17 @@ export const newFileExperienceWrapperStyles = ({
   position: relative;
   font-family: ${fontFamily()};
   ${getWrapperDimensions(dimensions, appearance)}
-  ${displayBackground ? `background-color: ${N20};` : ''}
-    ${borderRadius}
-    ${getCursorStyle(mediaCardCursor)}
-    ${getWrapperShadow(disableOverlay, selected)}
+  ${displayBackground && `background-color: ${token('color.background.neutral', N20)};`}
+  ${borderRadius}
+  ${getCursorStyle(mediaCardCursor)}
+  ${getWrapperShadow(disableOverlay, selected)}
   ${generateResponsiveStyles(breakpoint)};
   ${hideNativeBrowserTextSelectionStyles}
 
   /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */
-    ${getClickablePlayButtonStyles(isPlayButtonClickable)}
-    ${getSelectableTickBoxStyles(isTickBoxSelectable)}
-    &:hover .${blanketClassName} {
+  ${getClickablePlayButtonStyles(isPlayButtonClickable)}
+  ${getSelectableTickBoxStyles(isTickBoxSelectable)}
+  &:hover .${blanketClassName} {
     ${fixedBlanketStyles}
   }
   &:hover .${actionsBarClassName} {
@@ -45,6 +46,6 @@ export const newFileExperienceWrapperStyles = ({
   }
 
   /* Tooltip does not support percentage dimensions. We enforce them here */
-  ${shouldDisplayTooltip ? `> div { width: 100%; height: 100% }` : ''}
+  ${shouldDisplayTooltip && `> div { width: 100%; height: 100%; }`}
 `;
 newFileExperienceWrapperStyles.displayName = 'NewFileExperienceWrapper';

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

@@ -1,5 +1,6 @@
 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;
@@ -19,7 +20,7 @@ export const playButtonWrapperStyles = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${N0};
+  color: ${token('color.icon.inverse', N0)};
   span {
     position: absolute;
   }
@@ -30,6 +31,6 @@ export const backgroundStyles = css`
   position: absolute;
   width: ${discSize}px;
   height: ${discSize}px;
-  background: ${N90A};
+  background: ${token('color.background.neutral.bold', N90A)};
   border-radius: 100%;
 `;

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../../styles/mixins';
-import { N0, N400 } from '@atlaskit/theme/colors';
+import { N0 } from '@atlaskit/theme/colors';
 import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
 const height = 3;
 const padding = 1;
@@ -23,6 +23,7 @@ export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop,
     ${showOnTop ? 'top' : 'bottom'}: ${marginBottom}px
   `;
 }
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 const getStyledBarStylesBasedOnProps = ({
   progress,
@@ -44,12 +45,14 @@ box-sizing: border-box;
   content: '';
   width: ${progress}%;
   height: 100%;
-  background-color: ${N400};
+  background-color: #44546F;
   ${borderRadius}
   display: block;
 }
 ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 `;
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 
 export const styledBarStyles = props => {
   return css`

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

@@ -1,6 +1,7 @@
 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';
@@ -38,7 +39,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 ? `0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}` : '';
+  const withOverlayShadow = !disableOverlay ? `${token('elevation.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,13 +1,14 @@
 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: ${N0};
-  color: ${N100};
+  background-color: ${token('color.background.input', N0)};
+  color: ${token('color.icon.subtle', N100)};
 `;
-export const getSelectedStyles = selected => selected ? `background-color: ${B200};
-      color: white;` : ``;
+export const getSelectedStyles = selected => selected ? `background-color: ${token('color.icon.information', B200)};
+      color: ${token('color.icon.inverse', 'white')};` : ``;
 export const wrapperStyles = selected => css`
   ${transition()}
   font-size: 14px;

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

@@ -3,6 +3,7 @@ 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,
@@ -13,6 +14,6 @@ export const FailedTitleBox = ({
   }, /*#__PURE__*/React.createElement(ErrorMessageWrapper, null, /*#__PURE__*/React.createElement(EditorWarningIcon, {
     label: 'Warning',
     size: 'small',
-    primaryColor: R300
+    primaryColor: token('color.text.danger', R300)
   }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, customMessage))));
 };

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

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { token } from '@atlaskit/tokens';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0 } from '@atlaskit/theme/colors';
 import { rgba } from '../../styles/mixins';
@@ -20,7 +21,7 @@ export const titleBoxWrapperStyles = ({
   position: absolute;
   bottom: 0;
   width: 100%;
-  background-color: ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 0.8)};
+  background-color: ${token('elevation.surface', rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 0.8))};
   color: inherit;
   cursor: inherit;
   pointer-events: none;

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

@@ -1,7 +1,9 @@
 import { css } from '@emotion/react';
 import { N500, N0 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { borderRadius, size, center } from '@atlaskit/media-ui';
 import { rootStyles } from '../../card/styles';
+import { rgba } from '../../card/styles/mixins';
 export const wrapperStyles = css`
   ${rootStyles()}
   display: flex;
@@ -17,20 +19,19 @@ export let CardActionIconButtonVariant;
 
 const getVariantStyles = variant => {
   return variant === 'filled' ? `
-    background: ${N0};
+    background-color: ${token('elevation.surface.overlay', rgba(N0, 0.8))};
     margin-right: 8px;
-    opacity: 0.8;
 
     &:last-child {
       margin-right: 0;
     }
 
     &:hover {
-      opacity: 0.6;
+      background-color: ${token('elevation.surface.overlay.hovered', rgba(N0, 0.6))}
     }
   ` : `
     &:hover {
-      background-color: rgba(9, 30, 66, 0.06);
+      background-color: ${token('color.background.neutral.subtle.hovered', 'rgba(9, 30, 66, 0.06)')};
     }
   `;
 };
@@ -41,7 +42,7 @@ export const cardActionButtonStyles = ({
   ${center}
   ${borderRadius}
     ${size(26)}
-    color: ${N500};
+    color: ${token('color.icon', N500)};
 
   &:hover {
     cursor: pointer;

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

@@ -1,5 +1,6 @@
+import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 export const errorIconWrapperStyles = css`
   display: flex;
-  color: #ff991f;
+  color: ${token('color.icon.warning', '#ff991f')};
 `;

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

@@ -1,7 +1,7 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { MediaTypeIcon } from '../mediaTypeIcon';
+import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
 import { fileTypeIconStyles } from './styles';
 const fileTypeIconClass = 'file-type-icon';
 export class FileIcon extends Component {