@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/es2019/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -4,12 +4,13 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import UndoIcon from '@atlaskit/icon/glyph/undo';
 import RedoIcon from '@atlaskit/icon/glyph/redo';
-import { undo as undoKeymap, redo as redoKeymap, ToolTipContent } from '../../../../keymaps';
+import { undo as undoKeymap, redo as redoKeymap, ToolTipContent, tooltip } from '../../../../keymaps';
 import { buttonGroupStyle, separatorStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../messages';
 import { createTypeAheadTools } from '../../../type-ahead/api';
 import { undoFromToolbar, redoFromToolbar } from '../../commands';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 const closeTypeAheadAndRunCommand = editorView => command => {
   if (!editorView) {
@@ -69,7 +70,8 @@ export class ToolbarUndoRedo extends PureComponent {
       spacing: isReducedSpacing ? 'none' : 'default',
       onClick: handleUndo,
       disabled: !canUndo || disabled,
-      "aria-label": labelUndo,
+      "aria-label": tooltip(undoKeymap, labelUndo),
+      "aria-keyshortcuts": getAriaKeyshortcuts(undoKeymap),
       title: jsx(ToolTipContent, {
         description: labelUndo,
         keymap: undoKeymap
@@ -91,7 +93,8 @@ export class ToolbarUndoRedo extends PureComponent {
         label: ""
       }),
       testId: "ak-editor-toolbar-button-redo",
-      "aria-label": labelRedo
+      "aria-label": tooltip(redoKeymap, labelRedo),
+      "aria-keyshortcuts": getAriaKeyshortcuts(redoKeymap)
     }), jsx("span", {
       css: separatorStyles
     }));

package/dist/es2019/plugins/unsupported-content/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const UnsupportedSharedCssClassName = {
   BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',
   INLINE_CONTAINER: 'unsupportedInlineView-content-wrap'
@@ -21,8 +20,8 @@ export const unsupportedStyles = css`
     .${akEditorSelectedNodeClassName}${blockUnsupportedSelector},
       .${akEditorSelectedNodeClassName}${inlineUnsupportedSelector} {
       border: ${akEditorSelectedBorderSize}px solid
-        ${token('color.border.danger', akEditorDeleteBorder)};
-      background-color: ${token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity)};
+        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      background-color: ${`var(--ds-blanket-danger, ${akEditorDeleteBackgroundWithOpacity})`};
     }
   }
 `;

package/dist/es2019/ui/Addon/Dropdown/styles.js

@@ -1,13 +1,12 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const dropdown = css`
   display: flex;
   flex-direction: column;
-  background: ${token('elevation.surface.overlay', 'white')};
+  background: ${"var(--ds-surface-overlay, white)"};
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
   box-sizing: border-box;
   padding: 4px 0;
 `;

package/dist/es2019/ui/Addon/DropdownItem/styles.js

@@ -1,18 +1,17 @@
 import { css } from '@emotion/react';
 import { N800, N20 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const dropdownItem = css`
   display: flex;
   align-items: center;
   cursor: pointer;
   text-decoration: none;
   padding: 8px 32px 8px 12px;
-  color: ${token('color.text', N800)};
+  color: ${`var(--ds-text, ${N800})`};
   > span {
     display: flex;
     margin-right: 8px;
   }
   &:hover {
-    background-color: ${token('color.background.neutral.subtle.hovered', N20)};
+    background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
   }
 `;

package/dist/es2019/ui/Alignment/AlignmentButton/index.js

@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
 import ToolbarButton from '../../ToolbarButton';
-import { ToolTipContent } from '../../../keymaps';
+import { ToolTipContent, tooltip } from '../../../keymaps';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 class AlignmentButton extends PureComponent {
   constructor(...args) {
@@ -32,8 +33,9 @@ class AlignmentButton extends PureComponent {
         description: label,
         keymap: shortcut
       }),
-      "aria-label": label,
+      "aria-label": shortcut ? tooltip(shortcut, label) : label,
       "aria-pressed": isSelected,
+      "aria-keyshortcuts": getAriaKeyshortcuts(shortcut),
       onClick: this.onClick,
       iconBefore: content
     });

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -7,7 +7,6 @@ import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N40 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import Toolbar from '../../Toolbar';
 import PluginSlot from '../../PluginSlot';
 import WithPluginState from '../../WithPluginState';
@@ -40,8 +39,8 @@ const commentEditorStyle = css`
   /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */
 
   height: auto;
-  background-color: ${token('color.background.input', 'white')};
-  border: 1px solid ${token('color.border', N40)};
+  background-color: ${"var(--ds-background-input, white)"};
+  border: 1px solid ${`var(--ds-border, ${N40})`};
   box-sizing: border-box;
   border-radius: ${borderRadius()}px;
 

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -3,8 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-import { akEditorToolbarKeylineHeight, akEditorGridLineZIndex, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorToolbarKeylineHeight, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export const TableControlsPadding = 20;
 const mainToolbarWrapperStyle = css`
   position: relative;
@@ -12,7 +11,7 @@ const mainToolbarWrapperStyle = css`
   padding: ${gridSize()}px ${gridSize()}px 0;
   display: flex;
   height: auto;
-  background-color: ${token('elevation.surface', 'white')};
+  background-color: ${"var(--ds-surface, white)"};
   box-shadow: none;
   padding-left: ${TableControlsPadding}px;
 
@@ -33,11 +32,11 @@ const stickyToolbarWrapperStyle = css`
   position: sticky;
   /* stylelint-enable declaration-block-no-duplicate-properties */
   padding-bottom: ${gridSize()}px;
-  z-index: ${akEditorGridLineZIndex + akEditorMenuZIndex};
+  z-index: ${akEditorMenuZIndex};
   transition: box-shadow ease-in-out 0.2s;
   &.show-keyline {
     box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0
-      ${token('color.border', N30)};
+      ${`var(--ds-border, ${N30})`};
   }
 `;
 

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -71,7 +71,8 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     var _props$featureFlags8, _props$featureFlags9, _props$featureFlags10;
 
     return jsx(ToolbarArrowKeyNavigationProvider, {
-      editorView: props.editorView
+      editorView: props.editorView,
+      childComponentSelector: "[data-testid='ak-editor-main-toolbar']"
     }, jsx("div", {
       css: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)),
       "data-testid": "ak-editor-main-toolbar"

package/dist/es2019/ui/Appearance/FullPage/MainToolbar.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { gridSize } from '@atlaskit/theme/constants';
 import { akEditorMenuZIndex, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 export const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
@@ -8,7 +7,7 @@ const toolbarLineHeight = 56; // box-shadow is overriden by the mainToolbar
 
 const mainToolbarWithKeyline = css`
   box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0
-    ${token('color.border', N30)};
+    ${`var(--ds-border, ${N30})`};
 `;
 const mainToolbarTwoLineStyle = css`
   @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
@@ -26,7 +25,7 @@ const mainToolbar = css`
   height: ${toolbarLineHeight}px;
   flex-shrink: 0;
   // TODO: https://product-fabric.atlassian.net/browse/DSP-4456
-  background-color: ${token('elevation.surface', 'white')};
+  background-color: ${"var(--ds-surface, white)"};
 
   & object {
     height: 0 !important;

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

@@ -2,12 +2,11 @@ import { css } from '@emotion/react';
 import { akEditorSubtleAccent, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N300, N50 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const inputStyle = css`
   /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */
   input& {
-    background-color: ${token('color.background.input', 'white')};
-    border: 1px solid ${token('color.border.input', akEditorSubtleAccent)};
+    background-color: ${"var(--ds-background-input, white)"};
+    border: 1px solid ${`var(--ds-border-input, ${akEditorSubtleAccent})`};
     border-radius: ${borderRadius()}px;
     box-sizing: border-box;
     height: 40px;
@@ -19,11 +18,11 @@ export const inputStyle = css`
     font-weight: 400;
     line-height: 1.42857142857143;
     letter-spacing: -0.005em;
-    color: ${token('color.text.subtlest', N300)};
+    color: ${`var(--ds-text-subtlest, ${N300})`};
 
     &:hover {
-      background-color: ${token('color.background.input.hovered', 'white')};
-      border-color: ${token('color.border.input', N50)};
+      background-color: ${"var(--ds-background-input-hovered, white)"};
+      border-color: ${`var(--ds-border-input, ${N50})`};
       cursor: text;
     }
   }

package/dist/es2019/ui/CollapsedEditor/index.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
 import React from 'react';
 import Editor from '../../editor';
 import EditorWithActions from '../../labs/EditorWithActions';
@@ -40,10 +41,10 @@ export default class CollapsedEditor extends React.Component {
     }
 
     if (!this.props.isExpanded) {
-      return /*#__PURE__*/React.createElement(ChromeCollapsed, {
+      return /*#__PURE__*/React.createElement(IntlProviderIfMissingWrapper, null, /*#__PURE__*/React.createElement(ChromeCollapsed, {
         onFocus: this.props.onFocus,
         text: this.props.placeholder
-      });
+      }));
     }
 
     return /*#__PURE__*/React.cloneElement(child, {

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -88,7 +88,8 @@ const ColorPickerButton = props => {
       zIndex: props.setDisableParentScroll ? 600 : undefined,
       ariaLabel: "Color picker popup"
     }, jsx("div", {
-      css: colorPickerWrapper
+      css: colorPickerWrapper,
+      "data-test-id": "color-picker-menu"
     }, jsx(ColorPaletteWithListeners, {
       palette: props.colorPalette,
       cols: props.cols,

package/dist/es2019/ui/ConfigPanel/Fields/CheckboxGroup.js

@@ -5,7 +5,6 @@ import { Fragment, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
 import { Field, Fieldset as AKFieldset } from '@atlaskit/form';
-import { token } from '@atlaskit/tokens';
 import { ValidationError } from '../types';
 import FieldMessages from '../FieldMessages';
 
@@ -16,7 +15,7 @@ function validate(value, isRequired) {
 }
 
 const requiredIndicator = css`
-  color: ${token('color.text.danger', '#bf2600')};
+  color: ${"var(--ds-text-danger, #bf2600)"};
 `;
 
 function CheckboxGroupInner({

package/dist/es2019/ui/ConfigPanel/Fields/Expand.js

@@ -3,14 +3,13 @@ import React, { useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N40 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Button from '@atlaskit/button';
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../messages';
 export const expandContainer = css`
-  border-bottom: 1px solid ${token('color.border', N40)};
+  border-bottom: 1px solid ${`var(--ds-border, ${N40})`};
 `;
 export const expandControl = css`
   display: flex;

package/dist/es2019/ui/ConfigPanel/Fields/Fieldset.js

@@ -8,15 +8,12 @@ import SectionMessage from '@atlaskit/section-message';
 import Button from '@atlaskit/button/custom-theme-button';
 import Select from '@atlaskit/select';
 import AddCircleIcon from '@atlaskit/icon/glyph/add-circle';
-import { messages } from '../messages'; // eslint-disable-next-line import/no-cycle
-
-import FormContent from '../FormContent';
+import { messages } from '../messages';
 import { getNameFromDuplicateField, isDuplicateField } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const actionsWrapper = css`
-  border-top: 1px solid ${token('color.border', N40A)};
+  border-top: 1px solid ${`var(--ds-border, ${N40A})`};
   margin-top: ${gridSize() * 2}px;
   padding-top: ${gridSize() * 2}px;
 `;
@@ -209,7 +206,8 @@ class FieldsetField extends React.Component {
       extensionManifest,
       onFieldChange,
       firstVisibleFieldName,
-      error
+      error,
+      formComponent: FormComponent
     } = this.props;
     const {
       label,
@@ -223,7 +221,7 @@ class FieldsetField extends React.Component {
     const children = this.renderActions();
     return jsx(Fragment, null, error && jsx(FieldsetError, {
       message: error
-    }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormContent, {
+    }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormComponent, {
       fields: selectedFields,
       parentName: name,
       extensionManifest: extensionManifest,

package/dist/es2019/ui/ConfigPanel/Fields/common/RequiredIndicator.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const requiredIndicator = css`
-  color: ${token('color.text.danger', R500)};
+  color: ${`var(--ds-text-danger, ${R500})`};
 `;

package/dist/es2019/ui/ConfigPanel/FormContent.js

@@ -5,8 +5,7 @@ import Boolean from './Fields/Boolean';
 import CustomSelect from './Fields/CustomSelect';
 import Date from './Fields/Date';
 import DateRange from './Fields/DateRange';
-import Enum from './Fields/Enum'; // eslint-disable-next-line import/no-cycle
-
+import Enum from './Fields/Enum';
 import Fieldset from './Fields/Fieldset';
 import Number from './Fields/Number';
 import String from './Fields/String';
@@ -121,7 +120,8 @@ export function FieldComponent({
         onFieldChange: onFieldChange,
         extensionManifest: extensionManifest,
         parameters: defaultValue || {},
-        error: error
+        error: error,
+        formComponent: FormContent
       });
 
     case 'user':

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -7,7 +7,6 @@ import Button from '@atlaskit/button/custom-theme-button';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { messages } from './messages';
 const iconWidth = 40;
@@ -22,7 +21,7 @@ const itemIcon = css`
   width: ${iconWidth}px;
   height: ${iconWidth}px;
   overflow: hidden;
-  border: 1px solid ${token('color.border', 'rgba(223, 225, 229, 0.5)')}; /* N60 at 50% */
+  border: 1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
   border-radius: ${borderRadius()}px;
   box-sizing: border-box;
 
@@ -55,7 +54,7 @@ const itemText = css`
   white-space: initial;
   .item-summary {
     font-size: ${relativeFontSizeToBase16(11.67)};
-    color: ${token('color.text.subtlest', N200)};
+    color: ${`var(--ds-text-subtlest, ${N200})`};
     margin-top: 4px;
 
     white-space: nowrap;

package/dist/es2019/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -6,7 +6,6 @@ import { gridSize } from '@atlaskit/theme/constants';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import Tooltip from '@atlaskit/tooltip';
 import { N80, R300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { messages } from '../messages';
 const removableFieldWrapper = css`
   position: relative;
@@ -21,10 +20,10 @@ const removeButtonWrapper = css`
   top: 0;
   cursor: pointer;
 
-  color: ${token('color.icon.subtle', N80)};
+  color: ${`var(--ds-icon-subtle, ${N80})`};
 
   &:hover {
-    color: ${token('color.icon.danger', R300)};
+    color: ${`var(--ds-icon-danger, ${R300})`};
   }
 `;
 

package/dist/es2019/ui/ContentStyles/index.js

@@ -3,7 +3,6 @@ import React, { useMemo } from 'react';
 import { jsx, css, useTheme } from '@emotion/react';
 import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles } from '@atlaskit/editor-common/styles';
 import { editorFontSize } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { unsupportedStyles } from '../../plugins/unsupported-content/styles';
 import { telepointerStyle } from '../../plugins/collab-edit/styles';
 import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
@@ -67,7 +66,7 @@ const contentStyles = props => css`
   }
 
   .ProseMirror-selectednode:empty {
-    outline: 2px solid ${token('color.border.focused', '#8cf')};
+    outline: 2px solid ${"var(--ds-border-focused, #8cf)"};
   }
 
   ${placeholderTextStyles}
@@ -131,8 +130,13 @@ const contentStyles = props => css`
     text-align: center;
   }
 
-  .pm-table-header-content-wrap,
-  .pm-table-cell-content-wrap div.fabric-editor-block-mark {
+  .pm-table-header-content-wrap :not(.fabric-editor-alignment),
+  .pm-table-header-content-wrap
+    :not(p, .fabric-editor-block-mark)
+    + div.fabric-editor-block-mark,
+  .pm-table-cell-content-wrap
+    :not(p, .fabric-editor-block-mark)
+    + div.fabric-editor-block-mark {
     p:first-of-type {
       margin-top: 0;
     }

package/dist/es2019/ui/ContextPanel/index.js

@@ -13,7 +13,6 @@ import { pluginKey as contextPanelPluginKey } from '../../plugins/context-panel'
 import { pluginKey as widthPluginKey } from '../../plugins/width';
 import WithEditorActions from '../WithEditorActions';
 import { getChildBreakoutModes } from '../../utils/document';
-import { token } from '@atlaskit/tokens';
 const ANIM_SPEED_MS = 500;
 const EDITOR_WIDTH = akEditorDefaultLayoutWidth + akEditorBreakoutPadding;
 const WIDE_EDITOR_WIDTH = akEditorWideLayoutWidth + akEditorBreakoutPadding;
@@ -43,7 +42,7 @@ export const panel = css`
   height: 100%;
   transition: width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier};
   overflow: hidden;
-  box-shadow: inset 2px 0 0 0 ${token('color.border', N30)};
+  box-shadow: inset 2px 0 0 0 ${`var(--ds-border, ${N30})`};
 `;
 export const content = css`
   transition: width 600ms ${akEditorSwoopCubicBezier};

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -17,7 +17,6 @@ import { getFeaturedQuickInsertItems, searchQuickInsertItems } from '../../plugi
 import { insertItem } from '../../plugins/quick-insert/commands';
 import ElementBrowser from './components/ElementBrowserLoader';
 import { ELEMENT_ITEM_HEIGHT } from './constants';
-import { token } from '@atlaskit/tokens';
 
 const InsertMenu = ({
   editorView,
@@ -148,13 +147,13 @@ const insertMenuWrapper = (theme, itemCount) => css`
   itemCount
 })}px;
   background-color: ${themed({
-  light: token('elevation.surface.overlay', N0),
-  dark: token('elevation.surface.overlay', DN50)
+  light: `var(--ds-surface-overlay, ${N0})`,
+  dark: `var(--ds-surface-overlay, ${DN50})`
 })(theme)};
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 0 0 1px ${N30A},
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A},
     0 2px 1px ${N30A},
-    0 0 20px -6px ${N60A}`)};
+    0 0 20px -6px ${N60A}`})`};
 `;
 
 const itemBefore = css`

package/dist/es2019/ui/ElementBrowser/ModalElementBrowser.js

@@ -12,7 +12,6 @@ import ElementBrowser from './components/ElementBrowserLoader';
 import { getCategories } from './categories';
 import { MODAL_WRAPPER_PADDING } from './constants';
 import { messages } from './messages';
-import { token } from '@atlaskit/tokens';
 const actions = css`
   display: inline-flex;
   margin: 0 -4px;
@@ -28,8 +27,8 @@ const wrapper = css`
   padding: ${MODAL_WRAPPER_PADDING}px ${MODAL_WRAPPER_PADDING}px 0 10px;
   overflow: hidden;
   background-color: ${themed({
-  light: token('elevation.surface.overlay', N0),
-  dark: token('elevation.surface.overlay', DN50)
+  light: `var(--ds-surface-overlay, ${N0})`,
+  dark: `var(--ds-surface-overlay, ${DN50})`
 })()};
   border-radius: ${borderRadius()}px;
 `;

package/dist/es2019/ui/ElementBrowser/components/CategoryList.js

@@ -9,7 +9,6 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE } from '../constants';
 import useFocus from '../hooks/use-focus';
 import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION_SUBJECT_ID, ACTION } from '../../../plugins/analytics';
-import { token } from '@atlaskit/tokens';
 
 function CategoryList({
   categories = [],
@@ -72,9 +71,9 @@ function CategoryListItem({
         marginLeft: '2px',
         height: '100%',
         width: '100%',
-        color: category.name !== selectedCategory ? token('color.text', N800) : token('color.text.selected', B400),
+        color: category.name !== selectedCategory ? `var(--ds-text, ${N800})` : `var(--ds-text-selected, ${B400})`,
         ...(category.name === selectedCategory && {
-          background: token('color.background.selected', B50)
+          background: `var(--ds-background-selected, ${B50})`
         })
       },
       ...rest

package/dist/es2019/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -9,7 +9,6 @@ import { ButtonItem } from '@atlaskit/menu';
 import { B100, N200 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../../plugins/analytics';
 import IconFallback from '../../../../plugins/quick-insert/assets/fallback';
@@ -238,7 +237,7 @@ const elementItemsWrapper = css`
 
     :focus {
       box-shadow: 0 0 0 ${ELEMENT_LIST_PADDING}px
-        ${token('color.border.focused', B100)};
+        ${`var(--ds-border-focused, ${B100})`};
     }
   }
   .ReactVirtualized__Collection__innerScrollContainer {
@@ -281,7 +280,7 @@ const itemDescription = css`
 
   overflow: hidden;
   font-size: ${relativeFontSizeToBase16(11.67)};
-  color: ${token('color.text.subtle', N200)};
+  color: ${`var(--ds-text-subtle, ${N200})`};
   margin-top: 2px;
 `;
 const itemText = css`

package/dist/es2019/ui/ElementBrowser/components/ElementList/EmptyState.js

@@ -3,7 +3,6 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import NotFoundIllustration from './NotFoundIllustration';
-import { token } from '@atlaskit/tokens';
 export default function EmptyState({
   onExternalLinkClick
 }) {
@@ -37,7 +36,7 @@ export default function EmptyState({
 const emptyStateHeading = css`
   font-size: 1.42857em;
   line-height: 1.2;
-  color: ${token('color.text', 'rgb(23, 43, 77)')};
+  color: ${"var(--ds-text, rgb(23, 43, 77))"};
   font-weight: 500;
   letter-spacing: -0.008em;
   margin-top: 28px;

package/dist/es2019/ui/ElementBrowser/components/ElementSearch.js

@@ -11,7 +11,6 @@ import { GRID_SIZE, SEARCH_ITEM_HEIGHT_WIDTH } from '../constants';
 import useFocus from '../hooks/use-focus';
 import { Modes } from '../types';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 
 function ElementSearch({
   onSearch,
@@ -102,7 +101,7 @@ const wrapperInline = css`
 `;
 const elementBeforeInput = css`
   margin: 1px 6px 0 8px;
-  color: ${token('color.icon', N200)};
+  color: ${`var(--ds-icon, ${N200})`};
 
   // Custom SearchIcon style
   span,

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

@@ -1,15 +1,14 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const container = height => css`
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 12px 24px -6px ${N50A}, 0 0 1px ${N60A}`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 12px 24px -6px ${N50A}, 0 0 1px ${N60A}`})`};
   display: flex;
   align-items: center;
   box-sizing: border-box;
   padding: 4px 8px;
-  background-color: ${token('color.background.input', N0)};
+  background-color: ${`var(--ds-background-input, ${N0})`};
   ${height ? css`
         height: ${height}px;
       ` : ''};