@atlaskit/editor-core 177.0.0 → 178.0.0

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect, createRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -9,7 +9,6 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
-import { token } from '@atlaskit/tokens';
 export const menuItemDimensions = {
   width: 175,
   height: 32
@@ -32,6 +31,10 @@ const menuContainer = css`
     }
   }
 `;
+const label = css`
+  display: inline-block;
+  width: 100%;
+`;
 export const itemSpacing = gridSize() / 2;
 const DropdownButtonItem = ButtonItem;
 
@@ -43,17 +46,24 @@ const DropdownMenuItem = ({
   iconBefore
 }) => {
   const [tooltipContent, setTooltipContent] = useState(item.tooltip || '');
-  const handleTooltipMouseOut = useCallback(() => {
+  const handleItemMouseOut = useCallback(() => {
     setTooltipContent('');
-  }, []);
+
+    if (item.onMouseOut) {
+      dispatchCommand(item.onMouseOut);
+    }
+  }, [item.onMouseOut, dispatchCommand]);
   const handleItemMouseDown = useCallback(e => {
-    e.preventDefault();
-  }, []);
-  const handleItemMouseOver = useCallback(e => {
+    e.preventDefault(); // ED-16204 - This is needed for safari to get handleItemClick() to work
+
+    if (item.onMouseDown) {
+      dispatchCommand(item.onMouseDown);
+    }
+  }, [item.onMouseDown, dispatchCommand]);
+  const handleItemMouseOver = useCallback(() => {
     setTooltipContent(item.tooltip || '');
 
     if (item.onMouseOver) {
-      e.preventDefault();
       dispatchCommand(item.onMouseOver);
     }
   }, [item.tooltip, item.onMouseOver, dispatchCommand]);
@@ -95,6 +105,24 @@ const DropdownMenuItem = ({
       editorView === null || editorView === void 0 ? void 0 : editorView.focus();
     }
   }, [dispatchCommand, item.onClick, hide, editorView]);
+  /* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
+
+  const labelRef = /*#__PURE__*/createRef();
+  const handleTitleWrapperMouseEvent = useCallback(e => {
+    if (item.disabled) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, [item.disabled]);
+  useEffect(() => {
+    const labelRefCurrent = labelRef.current;
+    labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('click', handleTitleWrapperMouseEvent);
+    labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.addEventListener('mousedown', handleTitleWrapperMouseEvent);
+    return () => {
+      labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('click', handleTitleWrapperMouseEvent);
+      labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
+    };
+  });
   const itemContent = jsx(DropdownButtonItem, {
     iconBefore: iconBefore,
     iconAfter: item.elemAfter,
@@ -105,16 +133,18 @@ const DropdownMenuItem = ({
     onMouseOver: handleItemMouseOver,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
+    onMouseOut: handleItemMouseOut,
     onFocus: handleItemOnFocus,
     onBlur: handleItemOnBlur
-  }, item.title);
+  }, jsx("span", {
+    ref: labelRef,
+    css: label
+  }, item.title));
 
   if (tooltipContent) {
     return jsx(Tooltip, {
       content: tooltipContent
-    }, jsx("div", {
-      onMouseOut: handleTooltipMouseOut
-    }, itemContent));
+    }, itemContent);
   }
 
   return itemContent;
@@ -151,7 +181,7 @@ class Dropdown extends Component {
 
     if (showSelected && selected) {
       return jsx(EditorDoneIcon, {
-        primaryColor: token('color.icon.selected', B400),
+        primaryColor: `var(--ds-icon-selected, ${B400})`,
         size: "small",
         label: intl.formatMessage(messages.confirmModalOK)
       });

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { token } from '@atlaskit/tokens';
 export default function EditorEmojiAddIcon() {
   return /*#__PURE__*/React.createElement("svg", {
     width: 24,
@@ -10,7 +9,7 @@ export default function EditorEmojiAddIcon() {
   }, /*#__PURE__*/React.createElement("rect", {
     width: 24,
     height: 24,
-    fill: token('color.background.neutral.subtle', 'white'),
+    fill: "var(--ds-background-neutral-subtle, white)",
     fillOpacity: "0.01"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",

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

@@ -2,7 +2,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { gridSize } from '@atlaskit/theme/constants';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
@@ -15,7 +14,7 @@ const toolbarScrollButtons = css`
   grid-template-columns: 1fr 1fr;
   grid-gap: ${akGridSize / 2}px;
   padding: ${akGridSize / 2}px ${akGridSize}px;
-  border-left: solid ${token('color.border', N30)} 1px;
+  border-left: solid ${`var(--ds-border, ${N30})`} 1px;
   flex-shrink: 0;
   align-items: center;
 `;

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

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const separator = css`
-  background: ${token('color.border', N30)};
+  background: ${`var(--ds-border, ${N30})`};
   width: 1px;
   height: 20px;
   margin: 0 4px;

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

@@ -10,7 +10,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { DN70 } from '@atlaskit/theme/colors';
 import { getFeatureFlags } from '../../feature-flags-context';
-import { compareArrays, getFirstFocusableElement, shallowEqual } from '../utils';
+import { compareArrays, shallowEqual } from '../utils';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
 import Button from './Button';
 import Dropdown from './Dropdown';
@@ -23,7 +23,6 @@ import { EmojiPickerButton } from './EmojiPickerButton';
 import Announcer from '../../../utils/announcer/announcer';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
-import { token } from '@atlaskit/tokens';
 import { decorationStateKey, ACTIONS } from '../../base/pm-plugins/decoration';
 import ScrollButtons from './ScrollButtons';
 import { ToolbarArrowKeyNavigationProvider } from '../../../ui/ToolbarArrowKeyNavigationProvider';
@@ -211,11 +210,11 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
 
 const toolbarContainer = (theme, scrollable, hasSelect, firstElementIsSelect) => css`
   background-color: ${themed({
-  light: token('elevation.surface.overlay', 'white'),
-  dark: token('elevation.surface.overlay', DN70)
+  light: "var(--ds-surface-overlay, white)",
+  dark: `var(--ds-surface-overlay, ${DN70})`
 })(theme)};
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)`})`};
   display: flex;
   line-height: 1;
   box-sizing: border-box;
@@ -332,14 +331,6 @@ class Toolbar extends Component {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "focusToolbar", event => {
-      if (event.altKey && event.keyCode === 121) {
-        var _getFirstFocusableEle, _this$toolbarContaine;
-
-        (_getFirstFocusableEle = getFirstFocusableElement((_this$toolbarContaine = this.toolbarContainerRef) === null || _this$toolbarContaine === void 0 ? void 0 : _this$toolbarContaine.current)) === null || _getFirstFocusableEle === void 0 ? void 0 : _getFirstFocusableEle.focus();
-      }
-    });
-
     _defineProperty(this, "shouldHandleArrowKeys", () => {
       var _this$props$items;
 
@@ -410,7 +401,6 @@ class Toolbar extends Component {
     this.setState({
       mounted: true
     });
-    document.addEventListener('keydown', this.focusToolbar);
   }
 
   componentDidUpdate(prevProps) {
@@ -425,13 +415,7 @@ class Toolbar extends Component {
     this.resetStyling({
       table: this.props.node.type.name === 'table'
     });
-    document.removeEventListener('keydown', this.focusToolbar);
   }
-  /**
-   * To listen to keyboard shortcut Alt+F10 and focus floating toolbar's first focusable element.
-   * @param event
-   */
-
 
   render() {
     const {
@@ -449,11 +433,18 @@ class Toolbar extends Component {
 
     const firstElementIsSelect = items[0].type === 'select';
     const hasSelect = items.find(item => item.type === 'select' && item.selectType === 'list');
+
+    const isShortcutToFocusToolbar = event => {
+      //Alt + F10 to reach first element in this floating toolbar
+      return event.altKey && (event.key === 'F10' || event.keyCode === 121);
+    };
+
     return jsx(React.Fragment, null, jsx(ToolbarArrowKeyNavigationProvider, {
       editorView: this.props.editorView,
       handleEscape: this.handleEscape,
       disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
-      childComponentSelector: "[data-testid='editor-floating-toolbar']"
+      childComponentSelector: "[data-testid='editor-floating-toolbar']",
+      isShortcutToFocusToolbar: isShortcutToFocusToolbar
     }, jsx("div", {
       ref: this.toolbarContainerRef,
       css: theme => [toolbarContainer({

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

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

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

@@ -1,7 +1,6 @@
 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 {
@@ -21,7 +20,7 @@ export const gridStyles = css`
 
   // TODO: https://product-fabric.atlassian.net/browse/DSP-4352
   .gridLine {
-    border-left: 1px solid ${token('color.border', N30A)};
+    border-left: 1px solid ${`var(--ds-border, ${N30A})`};
     display: inline-block;
     box-sizing: border-box;
     height: 100%;
@@ -32,6 +31,6 @@ export const gridStyles = css`
   }
 
   .highlight {
-    border-left: 1px solid ${token('color.border.focused', B200)};
+    border-left: 1px solid ${`var(--ds-border-focused, ${B200})`};
   }
 `;

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

@@ -2,7 +2,6 @@ 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';
 import { N400 } from '@atlaskit/theme/colors';
 export const header = css`
   z-index: ${akEditorUnitZIndex};
@@ -13,15 +12,15 @@ export const header = css`
   justify-content: space-between;
   align-items: center;
   box-shadow: 'none';
-  color: ${token('color.text', colors.N400)};
-  background-color: ${token('color.background.neutral.subtle', colors.N0)};
+  color: ${`var(--ds-text, ${colors.N400})`};
+  background-color: ${`var(--ds-background-neutral-subtle, ${colors.N0})`};
   border-radius: ${borderRadius()}px;
 `;
 export const footer = css`
   z-index: ${akEditorUnitZIndex};
   font-size: ${relativeFontSizeToBase16(14)};
   line-height: 20px;
-  color: ${token('color.text.subtlest', colors.N300)};
+  color: ${`var(--ds-text-subtlest, ${colors.N300})`};
   padding: 24px;
   text-align: right;
   box-shadow: 'none';
@@ -31,11 +30,11 @@ export const contentWrapper = css`
   border-bottom-right-radius: ${borderRadius()}px;
   overflow: auto;
   position: relative;
-  color: ${token('color.text.subtle', colors.N400)};
-  background-color: ${token('color.background.neutral.subtle', colors.N0)};
+  color: ${`var(--ds-text-subtle, ${colors.N400})`};
+  background-color: ${`var(--ds-background-neutral-subtle, ${colors.N0})`};
 `;
 export const line = css`
-  background: ${token('color.background.neutral.subtle', '#fff')};
+  background: ${"var(--ds-background-neutral-subtle, #fff)"};
   content: '';
   display: block;
   height: 2px;
@@ -68,7 +67,7 @@ export const dialogHeader = {
   '&': {
     fontSize: relativeFontSizeToBase16(24),
     fontWeight: 400,
-    color: token('color.text.subtle', N400),
+    color: `var(--ds-text-subtle, ${N400})`,
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
@@ -77,13 +76,13 @@ export const title = {
   '&': {
     fontSize: relativeFontSizeToBase16(18),
     fontWeight: 400,
-    color: token('color.text.subtle', N400),
+    color: `var(--ds-text-subtle, ${N400})`,
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
 };
 export const codeSm = css`
-  background-color: ${token('color.background.neutral', colors.N20)};
+  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
   border-radius: ${borderRadius()}px;
   width: 24px;
   display: inline-block;
@@ -92,7 +91,7 @@ export const codeSm = css`
   text-align: center;
 `;
 export const codeMd = css`
-  background-color: ${token('color.background.neutral', colors.N20)};
+  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
   border-radius: ${borderRadius()}px;
   display: inline-block;
   height: 24px;
@@ -101,7 +100,7 @@ export const codeMd = css`
   text-align: center;
 `;
 export const codeLg = css`
-  background-color: ${token('color.background.neutral', colors.N20)};
+  background-color: ${`var(--ds-background-neutral, ${colors.N20})`};
   border-radius: ${borderRadius()}px;
   display: inline-block;
   height: 24px;

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

@@ -8,7 +8,6 @@ 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';
@@ -34,17 +33,17 @@ const clearText = css`
   cursor: pointer;
   padding: 0;
   margin-right: 8px;
-  color: ${token('color.icon.subtle', N90)};
+  color: ${`var(--ds-icon-subtle, ${N90})`};
   background: transparent;
   border: none;
 `;
 const textInputWrapper = css`
   ${inputWrapper};
-  border-top: 1px solid ${token('color.border', N30)};
-  border-bottom: 1px solid ${token('color.border', N30)};
+  border-top: 1px solid ${`var(--ds-border, ${N30})`};
+  border-bottom: 1px solid ${`var(--ds-border, ${N30})`};
 `;
 const iconWrapper = css`
-  color: ${token('color.icon.subtle', N80)};
+  color: ${`var(--ds-icon-subtle, ${N80})`};
   padding: 4px 8px;
   width: 18px;
 `;
@@ -771,6 +770,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     }), displayUrl && jsx(Tooltip, {
       content: formatClearLinkText
     }, jsx("button", {
+      type: "button",
       css: clearText,
       onClick: this.handleClearText
     }, jsx(CrossCircleIcon, {
@@ -796,6 +796,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     }), displayText && jsx(Tooltip, {
       content: formatMessage(messages.clearText)
     }, jsx("button", {
+      type: "button",
       css: clearText,
       onClick: this.handleClearDisplayText,
       onKeyDown: this.handleClearTextKeyDown

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

@@ -4,11 +4,10 @@ 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: ${token('color.background.neutral', N30)};
-  border: 1px solid ${token('color.border', N50)};
+  background: ${`var(--ds-background-neutral, ${N30})`};
+  border: 1px solid ${`var(--ds-border, ${N50})`};
   border-radius: ${borderRadius()}px;
   box-sizing: border-box;
   cursor: default;
@@ -22,18 +21,18 @@ const wrapperNode = css`
   white-space: nowrap;
 
   .ProseMirror-selectednode & {
-    background: ${token('color.background.selected', N50)};
+    background: ${`var(--ds-background-selected, ${N50})`};
     outline: none;
   }
 `;
 const jiraChildNode = css`
   display: inline-block;
-  color: ${token('color.text.subtlest', '#707070')};
+  color: ${"var(--ds-text-subtlest, #707070)"};
   line-height: 24px;
   vertical-align: top;
 
   &::before {
-    color: ${token('color.text', 'black')};
+    color: ${"var(--ds-text, black)"};
     content: 'JIRA | ';
   }
 `;

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

@@ -3,7 +3,6 @@ import { gridSize } from '@atlaskit/theme/constants';
 import { N40A, N50A } from '@atlaskit/theme/colors';
 import { columnLayoutSharedStyle, LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
 import { gridMediumMaxWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akLayoutGutterOffset, akEditorSwoopCubicBezier, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { TableCssClassName } from '@atlaskit/editor-plugin-table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugin-table/ui/consts';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
@@ -19,7 +18,7 @@ export const layoutStyles = css`
         flex: 1;
         min-width: 0;
         border: ${akEditorSelectedBorderSize}px solid
-          ${token('color.border', N40A)};
+          ${`var(--ds-border, ${N40A})`};
         border-radius: 4px;
         padding: ${LAYOUT_COLUMN_PADDING}px;
         box-sizing: border-box;
@@ -106,12 +105,12 @@ export const layoutStyles = css`
       /* Shows the border when cursor is inside a layout */
       &.selected [data-layout-column],
       &:hover [data-layout-column] {
-        border-color: ${token('color.border', N50A)};
+        border-color: ${`var(--ds-border, ${N50A})`};
       }
 
       &.selected.danger > [data-layout-column] {
-        background-color: ${token('color.background.danger', akEditorDeleteBackground)};
-        border-color: ${token('color.border.danger', akEditorDeleteBorder)};
+        background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
+        border-color: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
       }
 
       &.${akEditorSelectedNodeClassName}:not(.danger) {

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

@@ -18,16 +18,15 @@ 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: ${token('color.text.subtlest', N100)};
+  color: ${`var(--ds-text-subtlest, ${N100})`};
   font-size: ${relativeFontSizeToBase16(12)};
   padding: 12px 40px;
   line-height: 20px;
-  border-top: 1px solid ${token('color.border', N30)};
+  border-top: 1px solid ${`var(--ds-border, ${N30})`};
   margin: 0;
 `;
 const container = css`
@@ -48,7 +47,7 @@ const validationWrapper = css`
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 12px 0 40px;
-  border-top: 1px solid ${token('color.border.danger', R400)};
+  border-top: 1px solid ${`var(--ds-border-danger, ${R400})`};
   align-items: start;
   flex-direction: column;
 `;
@@ -57,7 +56,7 @@ const buttonWrapper = css`
   padding: 4px 8px;
 `;
 const clearText = css`
-  color: ${token('color.icon.subtle', N80)};
+  color: ${`var(--ds-icon-subtle, ${N80})`};
 `;
 export class AltTextEditComponent extends React.Component {
   constructor(props) {

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

@@ -3,7 +3,6 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, fileCardImageViewSelectedSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
-import { token } from '@atlaskit/tokens';
 export const mediaStyles = css`
   .ProseMirror {
     ${mediaSingleSharedStyle} & [layout='full-width'] .${richMediaClassName},
@@ -95,7 +94,7 @@ export const mediaStyles = css`
 
   .${richMediaClassName}:hover .richMedia-resize-handle-left::after,
   .${richMediaClassName}:hover .richMedia-resize-handle-right::after {
-    background: ${token('color.border', N60)};
+    background: ${`var(--ds-border, ${N60})`};
   }
 
   .${akEditorSelectedNodeClassName} .richMedia-resize-handle-right::after,
@@ -104,7 +103,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: ${token('color.border.focused', B200)};
+    background: ${`var(--ds-border-focused, ${B200})`};
   }
 
   .__resizable_base__ {
@@ -116,42 +115,42 @@ export const mediaStyles = css`
   /* Danger when top level node for smart cards / inline links */
   .danger > div > div > .media-card-frame,
   .danger > span > a {
-    background-color: ${token('color.background.danger', akEditorDeleteBackground)};
+    background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
     box-shadow: 0px 0px 0px ${akEditorSelectedBorderBoldSize}px
-      ${token('color.border.danger', akEditorDeleteBorder)};
+      ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
     transition: background-color 0s, box-shadow 0s;
   }
   .mediaGroupView-content-wrap.danger {
     /* Media inline */
     .${fileCardImageViewSelectedSelector}::after {
-      border: 1px solid ${token('color.border.danger', akEditorDeleteIconColor)};
+      border: 1px solid ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`};
     }
   }
   /* Danger when nested node or common */
   .danger {
     /* Media single */
     .${richMediaClassName} .${fileCardImageViewSelector}::after {
-      border: 1px solid ${token('color.border.danger', akEditorDeleteIconColor)};
+      border: 1px solid ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`};
     }
     /* Media single video player */
     .${richMediaClassName} .${inlinePlayerClassName}::after {
-      border: 1px solid ${token('color.border.danger', akEditorDeleteIconColor)};
+      border: 1px solid ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`};
     }
     /* New file experience */
     .${richMediaClassName} .${newFileExperienceClassName} {
       box-shadow: 0 0 0 1px
-        ${token('color.border.danger', akEditorDeleteIconColor)} !important;
+        ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`} !important;
     }
     /* Media resize handlers */
     .richMedia-resize-handle-right::after,
     .richMedia-resize-handle-left::after {
-      background: ${token('color.icon.danger', akEditorDeleteIconColor)};
+      background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`};
     }
 
     /* Smart cards */
     div div .media-card-frame,
     .inlineCardView-content-wrap > span > a {
-      background-color: ${token('color.blanket.danger', 'rgb(255, 189, 173, 0.5)')}; /* R75 with 50% opactiy */
+      background-color: ${"var(--ds-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

@@ -3,10 +3,9 @@ import React from 'react';
 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: ${token('color.text.subtlest', N200)};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   width: 100%;
   text-align: center;
   margin-top: 8px !important;