@atlaskit/editor-core 166.0.4 → 167.0.2

package/dist/es2019/plugins/floating-toolbar/ui/styles.js

@@ -1,5 +1,6 @@
 import * as colors from '@atlaskit/theme/colors';
 import { hexToRgba } from '@atlaskit/adf-schema';
+import { token } from '@atlaskit/tokens';
 const background = {
   danger: {
     default: {
@@ -7,28 +8,28 @@ const background = {
       dark: 'inherit'
     },
     hover: {
-      light: colors.N30A,
-      dark: colors.N30A
+      light: token('color.background.neutral.subtle.hovered', colors.N30A),
+      dark: token('color.background.neutral.subtle.hovered', colors.N30A)
     },
     active: {
-      light: hexToRgba(colors.B75, 0.6),
-      dark: hexToRgba(colors.B75, 0.6)
+      light: token('color.background.neutral.pressed', `${hexToRgba(colors.B75, 0.6)}`),
+      dark: token('color.background.neutral.pressed', `${hexToRgba(colors.B75, 0.6)}`)
     }
   }
 };
 const color = {
   danger: {
     default: {
-      light: colors.N400,
-      dark: colors.DN400
+      light: token('color.icon', colors.N400),
+      dark: token('color.icon', colors.DN400)
     },
     hover: {
-      light: colors.R400,
-      dark: colors.R400
+      light: token('color.icon.danger', colors.R400),
+      dark: token('color.icon.danger', colors.R400)
     },
     active: {
-      light: colors.R400,
-      dark: colors.R400
+      light: token('color.icon.danger', colors.R400),
+      dark: token('color.icon.danger', colors.R400)
     }
   }
 };

package/dist/es2019/plugins/grid/styles.js

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import { N30A, B200 } from '@atlaskit/theme/colors';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 export const GRID_GUTTER = 12;
 export const gridStyles = css`
   .gridParent {
@@ -18,8 +19,9 @@ export const gridStyles = css`
     pointer-events: none;
   }
 
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352
   .gridLine {
-    border-left: 1px solid ${N30A};
+    border-left: 1px solid ${token('color.border', N30A)};
     display: inline-block;
     box-sizing: border-box;
     height: 100%;
@@ -30,6 +32,6 @@ export const gridStyles = css`
   }
 
   .highlight {
-    border-left: 1px solid ${B200};
+    border-left: 1px solid ${token('color.border.focused', B200)};
   }
 `;

package/dist/es2019/plugins/help-dialog/ui/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 export const header = css`
   z-index: ${akEditorUnitZIndex};
   min-height: 24px;
@@ -11,15 +12,15 @@ export const header = css`
   justify-content: space-between;
   align-items: center;
   box-shadow: 'none';
-  color: ${colors.N400};
-  background-color: ${colors.N0};
+  color: ${token('color.text', colors.N400)};
+  background-color: ${token('color.background.neutral.subtle', colors.N0)};
   border-radius: ${borderRadius()}px;
 `;
 export const footer = css`
   z-index: ${akEditorUnitZIndex};
   font-size: ${relativeFontSizeToBase16(14)};
   line-height: 20px;
-  color: ${colors.N300};
+  color: ${token('color.text.subtlest', colors.N300)};
   padding: 24px;
   text-align: right;
   box-shadow: 'none';
@@ -29,11 +30,11 @@ export const contentWrapper = css`
   border-bottom-right-radius: ${borderRadius()}px;
   overflow: auto;
   position: relative;
-  color: ${colors.N400};
-  background-color: ${colors.N0};
+  color: ${token('color.text.subtle', colors.N400)};
+  background-color: ${token('color.background.neutral.subtle', colors.N0)};
 `;
 export const line = css`
-  background: #fff;
+  background: ${token('color.background.neutral.subtle', '#fff')};
   content: '';
   display: block;
   height: 2px;
@@ -67,7 +68,7 @@ export const title = css`
   font-weight: 400;
 `;
 export const codeSm = css`
-  background-color: ${colors.N20};
+  background-color: ${token('color.background.neutral', colors.N20)};
   border-radius: ${borderRadius()}px;
   width: 24px;
   display: inline-block;
@@ -76,7 +77,7 @@ export const codeSm = css`
   text-align: center;
 `;
 export const codeMd = css`
-  background-color: ${colors.N20};
+  background-color: ${token('color.background.neutral', colors.N20)};
   border-radius: ${borderRadius()}px;
   display: inline-block;
   height: 24px;
@@ -85,7 +86,7 @@ export const codeMd = css`
   text-align: center;
 `;
 export const codeLg = css`
-  background-color: ${colors.N20};
+  background-color: ${token('color.background.neutral', colors.N20)};
   border-radius: ${borderRadius()}px;
   display: inline-block;
   height: 24px;

package/dist/es2019/plugins/hyperlink/pm-plugins/input-rule.js

@@ -1,5 +1,5 @@
 import { createRule, createPlugin } from '../../../utils/input-rules';
-import { LinkMatcher, normalizeUrl } from '../utils';
+import { findFilepaths, isLinkInMatches, LinkMatcher, normalizeUrl } from '../utils';
 import { INPUT_METHOD, addAnalytics } from '../../analytics';
 import { getLinkCreationAnalyticsEvent } from '../analytics';
 export function createLinkInputRule(regexp, skipAnalytics = false, useUnpredictableInputRule = true) {
@@ -17,7 +17,29 @@ export function createLinkInputRule(regexp, skipAnalytics = false, useUnpredicta
     const url = normalizeUrl(link.url);
     const markType = schema.mark('link', {
       href: url
-    });
+    }); // Need access to complete text to check if last URL is part of a filepath before linkifying
+
+    const nodeBefore = state.selection.$from.nodeBefore;
+
+    if (!nodeBefore || !nodeBefore.isText || !nodeBefore.text) {
+      return null;
+    }
+
+    const filepaths = findFilepaths(nodeBefore.text, // The position referenced by 'start' is relative to the start of the document, findFilepaths deals with index in a node only.
+    start - (nodeBefore.text.length - link.text.length) // (start of link match) - (whole node text length - link length) gets start of text node, which is used as offset
+    );
+
+    if (isLinkInMatches(start, filepaths)) {
+      const tr = state.tr;
+
+      if (useUnpredictableInputRule) {
+        tr.insertText(' ');
+      } // To keep consistent with original behaviour.
+
+
+      return tr;
+    }
+
     const from = start;
     const to = Math.min(start + link.text.length, state.doc.content.size);
     const tr = state.tr.addMark(from, to, markType); // Keep old behavior that will delete the space after the link

package/dist/es2019/plugins/hyperlink/pm-plugins/keymap.js

@@ -5,6 +5,7 @@ import { stateKey } from '../pm-plugins/main';
 import { showLinkToolbar, hideLinkToolbar } from '../commands';
 import { INPUT_METHOD, addAnalytics } from '../../analytics';
 import { getLinkCreationAnalyticsEvent } from '../analytics';
+import { findFilepaths, isLinkInMatches } from '../utils';
 export function createKeymapPlugin(skipAnalytics = false) {
   const list = {};
   keymaps.bindKeymapWithCommand(keymaps.addLink.common, showLinkToolbar(INPUT_METHOD.SHORTCUT), list);
@@ -32,7 +33,7 @@ const mayConvertLastWordToHyperlink = skipAnalytics => {
   return function (state, dispatch) {
     const nodeBefore = state.selection.$from.nodeBefore;
 
-    if (!nodeBefore || !nodeBefore.isText) {
+    if (!nodeBefore || !nodeBefore.isText || !nodeBefore.text) {
       return false;
     }
 
@@ -53,6 +54,13 @@ const mayConvertLastWordToHyperlink = skipAnalytics => {
       const markType = state.schema.mark('link', {
         href: url
       });
+      const filepaths = findFilepaths(nodeBefore.text, start - (nodeBefore.text.length - hyperlinkedText.length) // The position referenced by 'start' is relative to the start of the document, findFilepaths deals with index in a node only.
+      );
+
+      if (isLinkInMatches(start, filepaths)) {
+        return false;
+      }
+
       const tr = state.tr.addMark(start, end, markType);
 
       if (dispatch) {

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -8,6 +8,7 @@ import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 import { N90, N80, N30 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import Tooltip from '@atlaskit/tooltip';
 import { PureComponent } from 'react';
@@ -33,17 +34,17 @@ const clearText = css`
   cursor: pointer;
   padding: 0;
   margin-right: 8px;
-  color: ${N90};
+  color: ${token('color.icon.subtle', N90)};
   background: transparent;
   border: none;
 `;
 const textInputWrapper = css`
   ${inputWrapper};
-  border-top: 1px solid ${N30};
-  border-bottom: 1px solid ${N30};
+  border-top: 1px solid ${token('color.border', N30)};
+  border-bottom: 1px solid ${token('color.border', N30)};
 `;
 const iconWrapper = css`
-  color: ${N80};
+  color: ${token('color.icon.subtle', N80)};
   padding: 4px 8px;
   width: 18px;
 `;

package/dist/es2019/plugins/hyperlink/utils.js

@@ -1,5 +1,7 @@
 import { mapSlice } from '../../utils/slice';
-import { isSafeUrl, linkify, normalizeUrl as normaliseLinkHref } from '@atlaskit/adf-schema';
+import { isSafeUrl, linkify, normalizeUrl as normaliseLinkHref } from '@atlaskit/adf-schema'; // Regular expression for a windows filepath in the format <DRIVE LETTER>:\<folder name>\
+
+export const FILEPATH_REGEXP = /([a-zA-Z]:|\\)([^\/:*?<>"|]+\\)?([^\/:*?<>"| ]+(?=\s?))?/gim;
 /**
  * Instance of class LinkMatcher are used in autoformatting in place of Regex.
  * Hence it has been made similar to regex with an exec method.
@@ -76,7 +78,12 @@ export function linkifyContent(schema) {
       const text = node.text;
       const matches = findLinkMatches(text);
       let pos = 0;
+      const filepaths = findFilepaths(text);
       matches.forEach(match => {
+        if (isLinkInMatches(match.start, filepaths)) {
+          return;
+        }
+
         if (match.start > 0) {
           linkified.push(node.cut(pos, match.start));
         }
@@ -130,4 +137,38 @@ function findLinkMatches(text) {
   }
 
   return matches;
-}
+}
+
+export const findFilepaths = (text, offset = 0) => {
+  // Creation of a copy of the RegExp is necessary as lastIndex is stored on it when we run .exec()
+  const localRegExp = new RegExp(FILEPATH_REGEXP);
+  let match;
+  const matchesList = [];
+  const maxFilepathSize = 260;
+
+  while ((match = localRegExp.exec(text)) !== null) {
+    const start = match.index + offset;
+    let end = localRegExp.lastIndex + offset;
+
+    if (end - start > maxFilepathSize) {
+      end = start + maxFilepathSize;
+    } // We don't care about big strings of text that are pretending to be filepaths!!
+
+
+    matchesList.push({
+      startIndex: start,
+      endIndex: end
+    });
+  }
+
+  return matchesList;
+};
+export const isLinkInMatches = (linkStart, matchesList) => {
+  for (let i = 0; i < matchesList.length; i++) {
+    if (linkStart >= matchesList[i].startIndex && linkStart < matchesList[i].endIndex) {
+      return true;
+    }
+  }
+
+  return false;
+};

package/dist/es2019/plugins/insert-block/index.js

@@ -94,7 +94,7 @@ const insertBlockPlugin = (options = {}) => ({
           isDisabled: disabled,
           isTypeAheadAllowed: isTypeAheadAllowed(editorView.state),
           editorView: editorView,
-          tableSupported: options.allowTables,
+          tableSupported: !!editorView.state.schema.nodes.table,
           actionSupported: !!editorView.state.schema.nodes.taskItem,
           mentionsSupported: !!(mentionState && mentionState.mentionProvider),
           decisionSupported: !!editorView.state.schema.nodes.decisionItem,

package/dist/es2019/plugins/jira-issue/nodeviews/jira-issue.js

@@ -4,10 +4,11 @@ import { JiraIcon } from '@atlaskit/logo/jira-icon';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 const wrapperNode = css`
   align-items: center;
-  background: ${N30};
-  border: 1px solid ${N50};
+  background: ${token('color.background.neutral', N30)};
+  border: 1px solid ${token('color.border', N50)};
   border-radius: ${borderRadius()}px;
   box-sizing: border-box;
   cursor: default;
@@ -21,18 +22,18 @@ const wrapperNode = css`
   white-space: nowrap;
 
   .ProseMirror-selectednode & {
-    background: ${N50};
+    background: ${token('color.background.selected', N50)};
     outline: none;
   }
 `;
 const jiraChildNode = css`
   display: inline-block;
-  color: #707070;
+  color: ${token('color.text.subtlest', '#707070')};
   line-height: 24px;
   vertical-align: top;
 
   &::before {
-    color: black;
+    color: ${token('color.text', 'black')};
     content: 'JIRA | ';
   }
 `;

package/dist/es2019/plugins/layout/styles.js

@@ -19,7 +19,9 @@ export const layoutStyles = css`
       [data-layout-column] {
         flex: 1;
         min-width: 0;
-        border: ${akEditorSelectedBorderSize}px solid ${N40A};
+        // TODO: https://product-fabric.atlassian.net/browse/DSP-4353
+        border: ${akEditorSelectedBorderSize}px solid
+          ${token('color.border', N40A)};
         border-radius: 4px;
         padding: ${LAYOUT_COLUMN_PADDING}px;
         box-sizing: border-box;
@@ -29,11 +31,11 @@ export const layoutStyles = css`
             margin-top: 0;
           }
 
-          > .ProseMirror-gapcursor.-right:first-child + * {
+          > .ProseMirror-gapcursor.-right:first-of-type + * {
             margin-top: 0;
           }
 
-          > .ProseMirror-gapcursor:first-child + span + * {
+          > .ProseMirror-gapcursord:first-of-type + span + * {
             margin-top: 0;
           }
 
@@ -41,17 +43,17 @@ export const layoutStyles = css`
             margin-top: 0;
           }
 
-          > .mediaSingleView-content-wrap:first-child .rich-media-item {
+          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {
             margin-top: 0;
           }
 
-          > .ProseMirror-gapcursor.-right:first-child
+          > .ProseMirror-gapcursor.-right:first-of-type
             + .mediaSingleView-content-wrap
             .rich-media-item {
             margin-top: 0;
           }
 
-          > .ProseMirror-gapcursor:first-child
+          > .ProseMirror-gapcursor:first-of-type
             + span
             + .mediaSingleView-content-wrap
             .rich-media-item {
@@ -85,10 +87,11 @@ export const layoutStyles = css`
         }
       }
 
+      // TODO: https://product-fabric.atlassian.net/browse/DSP-4441
       /* Shows the border when cursor is inside a layout */
       &.selected [data-layout-column],
       &:hover [data-layout-column] {
-        border-color: ${N50A};
+        border-color: ${token('color.border', N50A)};
       }
 
       &.selected.danger > [data-layout-column] {

package/dist/es2019/plugins/media/commands/helpers.js

@@ -56,6 +56,10 @@ export const findMediaNode = (mediaPluginState, id, isMediaSingle) => {
 };
 export const isMobileUploadCompleted = (mediaPluginState, mediaId) => !!mediaPluginState.mediaOptions && // This flag tells us that it's a 'mobile' env.
 !!mediaPluginState.mediaOptions.allowMarkingUploadsAsIncomplete && typeof mediaPluginState.mobileUploadComplete[mediaId] === 'boolean' ? mediaPluginState.mobileUploadComplete[mediaId] : undefined;
+export const isMediaNode = (pos, state) => {
+  const node = state.doc.nodeAt(pos);
+  return node && ['media', 'mediaInline'].includes(node.type.name);
+};
 export const updateAllMediaNodesAttrs = (id, attrs, isMediaSingle) => (state, dispatch) => {
   const mediaPluginState = mediaPluginKey.getState(state);
   let mediaNodes;
@@ -67,17 +71,12 @@ export const updateAllMediaNodesAttrs = (id, attrs, isMediaSingle) => (state, di
     mediaNodes = mediaGroupNode ? [mediaGroupNode] : [];
   }
 
-  const isMediaNode = pos => {
-    const node = state.doc.nodeAt(pos);
-    return node && node.type.name === 'media';
-  };
-
   const validMediaNodePositions = mediaNodes.reduce((acc, {
     getPos
   }) => {
     const pos = getPos();
 
-    if (typeof pos === 'number' && !isMediaNode(pos)) {
+    if (typeof pos === 'number' && !isMediaNode(pos, state)) {
       return acc;
     }
 
@@ -109,9 +108,8 @@ export const updateMediaNodeAttrs = (id, attrs, isMediaSingle) => (state, dispat
 
   const tr = state.tr;
   const pos = mediaNodeWithPos.getPos();
-  const node = tr.doc.nodeAt(pos);
 
-  if (!node || node.type.name !== 'media') {
+  if (!isMediaNode(pos, state)) {
     return false;
   }
 

package/dist/es2019/plugins/media/nodeviews/mediaInline.js

@@ -6,12 +6,14 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaInlineNodeSelector } from './styles';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
 export const createMediaNodeUpdater = props => {
-  const node = props.node.firstChild;
+  const node = props.node;
   return new MediaNodeUpdater({ ...props,
     isMediaSingle: true,
     node: node ? node : props.node,
-    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    contextIdentifierProvider: props.contextIdentifierProvider
   });
 };
 /**
@@ -45,10 +47,12 @@ export const updateMediaNodeAttributes = async props => {
       const copyNode = mediaNodeUpdater.copyNode();
       addPendingTask(copyNode);
       await copyNode;
-    } catch {
+    } catch (e) {
       return;
     }
   }
+
+  await mediaNodeUpdater.updateFileAttrs();
 };
 export const handleNewNode = props => {
   const {
@@ -59,7 +63,7 @@ export const handleNewNode = props => {
   mediaPluginState.handleMediaNodeMount(node, () => getPos());
 };
 export const MediaInline = props => {
-  const [viewMediaClientConfig, setViewMediaClientConfig] = useState({});
+  const [viewMediaClientConfig, setViewMediaClientConfig] = useState();
   useEffect(() => {
     handleNewNode(props);
     updateMediaNodeAttributes(props);
@@ -90,6 +94,18 @@ export const MediaInline = props => {
     mediaItemType: 'file',
     collectionName: collection
   };
+  /*
+   * Only show the loading view if the media provider is not ready
+   * prevents calling the media API before the provider is ready
+   */
+
+  if (!viewMediaClientConfig) {
+    return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
+      message: "",
+      isSelected: false
+    });
+  }
+
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
     isSelected: props.isSelected,
     identifier: identifier,
@@ -100,12 +116,12 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
   createDomRef() {
     const domRef = document.createElement('span');
     domRef.contentEditable = 'false';
-    domRef.classList.add(MediaInlineNodeSelector);
     return domRef;
   }
 
   getContentDOM() {
     const dom = document.createElement('span');
+    dom.classList.add(MediaInlineNodeSelector);
     return {
       dom
     };

package/dist/es2019/plugins/media/nodeviews/mediaNodeView/media.js

@@ -54,6 +54,12 @@ export class MediaNode extends Component {
       }
     });
 
+    _defineProperty(this, "onFullscreenChange", fullscreen => {
+      this.mediaPluginState.updateAndDispatch({
+        isFullscreen: fullscreen
+      });
+    });
+
     _defineProperty(this, "handleNewNode", props => {
       const {
         node
@@ -161,6 +167,7 @@ export class MediaNode extends Component {
       selectable: true,
       selected: selected,
       disableOverlay: true,
+      onFullscreenChange: this.onFullscreenChange,
       onClick: this.selectMediaSingleFromCard,
       useInlinePlayer: mediaOptions && mediaOptions.allowLazyLoading,
       isLazy: mediaOptions && mediaOptions.allowLazyLoading,

package/dist/es2019/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -18,15 +18,16 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, ACTI
 import { RECENT_SEARCH_WIDTH_IN_PX } from '../../../../../ui/LinkSearch/ToolbarComponents';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { ErrorMessage } from '@atlaskit/editor-common/ui';
+import { token } from '@atlaskit/tokens';
 export const CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
 const supportText = css`
-  color: ${N100};
+  color: ${token('color.text.subtlest', N100)};
   font-size: ${relativeFontSizeToBase16(12)};
   padding: 12px 40px;
   line-height: 20px;
-  border-top: 1px solid ${N30};
+  border-top: 1px solid ${token('color.border', N30)};
   margin: 0;
 `;
 const container = css`
@@ -47,7 +48,7 @@ const validationWrapper = css`
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 12px 0 40px;
-  border-top: 1px solid ${R400};
+  border-top: 1px solid ${token('color.border.danger', R400)};
   align-items: start;
   flex-direction: column;
 `;
@@ -56,7 +57,7 @@ const buttonWrapper = css`
   padding: 4px 8px;
 `;
 const clearText = css`
-  color: ${N80};
+  color: ${token('color.icon.subtle', N80)};
 `;
 export class AltTextEditComponent extends React.Component {
   constructor(props) {

package/dist/es2019/plugins/media/pm-plugins/main.js

@@ -57,6 +57,8 @@ export class MediaPluginStateImplementation {
 
     _defineProperty(this, "showDropzone", false);
 
+    _defineProperty(this, "isFullscreen", false);
+
     _defineProperty(this, "layout", 'center');
 
     _defineProperty(this, "mediaNodes", []);

package/dist/es2019/plugins/media/styles.js

@@ -95,7 +95,7 @@ export const mediaStyles = css`
 
   .${richMediaClassName}:hover .richMedia-resize-handle-left::after,
   .${richMediaClassName}:hover .richMedia-resize-handle-right::after {
-    background: ${N60};
+    background: ${token('color.border', N60)};
   }
 
   .${akEditorSelectedNodeClassName} .richMedia-resize-handle-right::after,
@@ -104,7 +104,7 @@ export const mediaStyles = css`
   .${richMediaClassName} .richMedia-resize-handle-left:hover::after,
   .${richMediaClassName}.is-resizing .richMedia-resize-handle-right::after,
   .${richMediaClassName}.is-resizing .richMedia-resize-handle-left::after {
-    background: ${B200};
+    background: ${token('color.border.focused', B200)};
   }
 
   .__resizable_base__ {
@@ -151,7 +151,7 @@ export const mediaStyles = css`
     /* Smart cards */
     div div .media-card-frame,
     .inlineCardView-content-wrap > span > a {
-      background-color: rgb(255, 189, 173, 0.5); /* R75 with 50% opactiy */
+      background-color: ${token('color.blanket.danger', 'rgb(255, 189, 173, 0.5)')}; /* R75 with 50% opactiy */
       transition: background-color 0s;
     }
 

package/dist/es2019/plugins/media/ui/CaptionPlaceholder/index.js

@@ -2,9 +2,10 @@
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { messages } from './messages';
 const placeholder = css`
-  color: ${N200};
+  color: ${token('color.text.subtlest', N200)};
   width: 100%;
   text-align: center;
   margin-top: 8px !important;

package/dist/es2019/plugins/media/ui/Media/DropPlaceholder.js

@@ -6,10 +6,11 @@ import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { hexToRgba } from '@atlaskit/adf-schema';
 import { injectIntl } from 'react-intl-next';
 import { dropPlaceholderMessages } from './drop-placeholder-messages';
+import { token } from '@atlaskit/tokens';
 import { MEDIA_HEIGHT, FILE_WIDTH } from '../../nodeviews/mediaNodeView/media';
 const iconWrapper = css`
-  color: ${hexToRgba(B400, 0.4) || B400};
-  background: ${hexToRgba(B300, 0.6) || B300};
+  color: ${token('color.icon.accent.blue', hexToRgba(B400, 0.4) || B400)};
+  background: ${token('color.background.accent.blue.subtle', hexToRgba(B300, 0.6) || B300)};
   border-radius: ${borderRadius()}px;
   margin: 5px 3px 25px;
   width: ${FILE_WIDTH}px;
@@ -19,7 +20,7 @@ const iconWrapper = css`
   justify-content: center;
 `;
 const dropLine = css`
-  background: ${B200};
+  background: ${token('color.border.focused', B200)};
   border-radius: ${borderRadius()}px;
   margin: 2px 0;
   width: 100%;

package/dist/es2019/plugins/media/ui/MediaLinkingToolbar.js

@@ -17,11 +17,12 @@ import { normalizeUrl } from '../../hyperlink/utils';
 import { R400 } from '@atlaskit/theme/colors';
 import { INPUT_METHOD } from '../../analytics/types/enums';
 import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
+import { token } from '@atlaskit/tokens';
 const validationWrapper = css`
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 4px 0 32px;
-  border-top: 1px solid ${R400};
+  border-top: 1px solid ${token('color.border.danger', R400)};
   align-items: start;
   display: flex;
   flex-direction: column;