@atlaskit/editor-core 177.0.0 → 177.0.1

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

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const panelStyles = props => css`
   .ProseMirror {
     .${PanelSharedCssClassName.prefix} {
@@ -11,10 +10,10 @@ export const panelStyles = props => css`
       &.danger {
         box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
           ${akEditorDeleteBorder};
-        background-color: ${token('color.background.danger', akEditorDeleteBackground)} !important;
+        background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`} !important;
 
         .${PanelSharedCssClassName.icon} {
-          color: ${token('color.icon.danger', akEditorDeleteIconColor)} !important;
+          color: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`} !important;
         }
       }
     }
@@ -26,10 +25,10 @@ export const panelStyles = props => css`
     /* Danger when nested node */
     .danger .${PanelSharedCssClassName.prefix} {
       &[data-panel-type] {
-        background-color: ${token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity)};
+        background-color: ${`var(--ds-blanket-danger, ${akEditorDeleteBackgroundWithOpacity})`};
 
         .${PanelSharedCssClassName.icon} {
-          color: ${token('color.icon.danger', akEditorDeleteIconColor)};
+          color: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`};
         }
       }
     }

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

@@ -1,9 +1,8 @@
 import { css } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const placeholderStyles = css`
   .ProseMirror .placeholder-decoration {
-    color: ${token('color.text.subtlest', N200)};
+    color: ${`var(--ds-text-subtlest, ${N200})`};
     width: 100%;
     pointer-events: none;
     user-select: none;

package/dist/es2019/plugins/placeholder-text/styles.js

@@ -1,20 +1,19 @@
 import { css } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const placeholderTextStyles = css`
   .ProseMirror span[data-placeholder] {
-    color: ${token('color.text.subtlest', N300)};
+    color: ${`var(--ds-text-subtlest, ${N300})`};
     display: inline;
   }
 
   .ProseMirror span.pm-placeholder {
     display: inline;
-    color: ${token('color.text.subtlest', N300)};
+    color: ${`var(--ds-text-subtlest, ${N300})`};
   }
   .ProseMirror span.pm-placeholder__text {
     display: inline;
-    color: ${token('color.text.subtlest', N300)};
+    color: ${`var(--ds-text-subtlest, ${N300})`};
   }
 
   .ProseMirror span.pm-placeholder.${akEditorSelectedNodeClassName} {
@@ -22,7 +21,7 @@ export const placeholderTextStyles = css`
   }
 
   .ProseMirror span.pm-placeholder__text[data-placeholder]::after {
-    color: ${token('color.text.subtlest', N300)};
+    color: ${`var(--ds-text-subtlest, ${N300})`};
     cursor: text;
     content: attr(data-placeholder);
     display: inline;

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

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { ruleSharedStyles } from '@atlaskit/editor-common/styles';
 import { akEditorLineHeight, akEditorSelectedBorderColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const ruleStyles = props => css`
   .ProseMirror {
     ${ruleSharedStyles(props)};
@@ -14,7 +13,7 @@ export const ruleStyles = props => css`
 
       &.${akEditorSelectedNodeClassName} {
         outline: none;
-        background-color: ${token('color.border.selected', akEditorSelectedBorderColor)};
+        background-color: ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`};
       }
     }
   }

package/dist/es2019/plugins/status/ui/statusPicker.js

@@ -12,7 +12,6 @@ import { N0 } from '@atlaskit/theme/colors';
 import withOuterListeners from '../../../ui/with-outer-listeners';
 import { DEFAULT_STATUS } from '../actions';
 import { analyticsState, createStatusAnalyticsAndFire } from '../analytics';
-import { token } from '@atlaskit/tokens';
 const PopupWithListeners = withOuterListeners(Popup);
 export let InputMethod;
 
@@ -23,10 +22,10 @@ export let InputMethod;
 })(InputMethod || (InputMethod = {}));
 
 const pickerContainer = css`
-  background: ${token('elevation.surface.overlay', N0)};
+  background: ${`var(--ds-surface-overlay, ${N0})`};
   padding: ${gridSize()}px 0;
   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))"};
   input {
     text-transform: uppercase;
   }

package/dist/es2019/plugins/tasks-and-decisions/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const taskDecisionStyles = css`
   [data-decision-wrapper] {
     cursor: pointer;
@@ -17,8 +16,8 @@ export const taskDecisionStyles = css`
     .${TaskDecisionSharedCssClassName.DECISION_CONTAINER}.${akEditorSelectedNodeClassName}
       > div {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-        ${token('color.border.danger', akEditorDeleteBorder)};
-      background-color: ${token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity)};
+        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      background-color: ${`var(--ds-blanket-danger, ${akEditorDeleteBackgroundWithOpacity})`};
       &::after {
         content: none; /* reset the Blanket selection style */
       }

package/dist/es2019/plugins/type-ahead/pm-plugins/decorations.js

@@ -12,7 +12,6 @@ import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
 import { StatsModifier } from '../stats-modifier';
 import { getTypeAheadQuery } from '../utils';
 import { closeTypeAhead } from '../transforms/close-type-ahead';
-import { token } from '@atlaskit/tokens';
 export const factoryDecorations = ({
   intl,
   popupMountRef,
@@ -56,7 +55,7 @@ export const factoryDecorations = ({
 
       typeaheadComponent.dataset.editorPopup = 'true';
       typeaheadComponent.dataset.typeAhead = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
-      typeaheadComponent.style.color = token('color.text.accent.blue', B400);
+      typeaheadComponent.style.color = `var(--ds-text-accent-blue, ${B400})`;
       typeaheadComponent.style.backgroundColor = 'transparent';
 
       const onUndoRedo = inputType => {

package/dist/es2019/plugins/type-ahead/ui/InputQuery.js

@@ -10,7 +10,6 @@ import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
 import { AssistiveText } from './AssistiveText';
 import { typeAheadListMessages } from '../messages';
 import { useIntl } from 'react-intl-next';
-import { token } from '@atlaskit/tokens';
 import * as colors from '@atlaskit/theme/colors';
 
 const isNavigationKey = event => {
@@ -230,7 +229,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     background: 'transparent',
     border: 'none',
     '&&': {
-      color: `${token('color.link', colors.B400)}`
+      color: `${`var(--ds-link, ${colors.B400})`}`
     }
   });
   useLayoutEffect(() => {

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -9,7 +9,6 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import IconFallback from '../../quick-insert/assets/fallback';
 import { shortcutStyle } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { token } from '@atlaskit/tokens';
 import { useIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
 export const ICON_HEIGHT = 40;
@@ -19,7 +18,7 @@ export const itemIcon = css`
   width: ${ICON_WIDTH}px;
   height: ${ICON_HEIGHT}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;
 
@@ -42,15 +41,15 @@ const itemBody = css`
 const itemText = theme => css`
   white-space: initial;
   color: ${themed({
-  light: token('color.text', N800),
-  dark: token('color.text', DN600)
+  light: `var(--ds-text, ${N800})`,
+  dark: `var(--ds-text, ${DN600})`
 })(theme)};
   .item-title {
     line-height: 1.4;
   }
   .item-description {
     font-size: ${relativeFontSizeToBase16(12)};
-    color: ${token('color.text.subtlest', N200)};
+    color: ${`var(--ds-text-subtlest, ${N200})`};
     margin-top: 3px;
   }
 `;
@@ -61,10 +60,10 @@ const itemAfter = css`
 const customRenderItemDivStyle = css`
   overflow: hidden;
   &:hover {
-    background-color: ${token('color.background.selected', N30)};
+    background-color: ${`var(--ds-background-selected, ${N30})`};
   }
   &:focus {
-    box-shadow: inset 0px 0px 0px 2px ${token('color.border.focused', B100)};
+    box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`};
     outline: none;
   }
 `;
@@ -76,7 +75,7 @@ const customRenderItemDivStyle = css`
 
 const selectionFrame = {
   '& > button:focus': {
-    boxShadow: `inset 0px 0px 0px 2px ${token('color.border.focused', B100)}`,
+    boxShadow: `inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`}`,
     outline: 'none',
     '&:active': {
       boxShadow: 'none'
@@ -84,7 +83,7 @@ const selectionFrame = {
   }
 };
 const selectedStyle = css`
-  background-color: ${token('color.background.selected', N30)};
+  background-color: ${`var(--ds-background-selected, ${N30})`};
 `;
 const FallbackIcon = /*#__PURE__*/React.memo(({
   label

package/dist/es2019/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -10,12 +10,11 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { TypeAheadList } from './TypeAheadList';
 import { ITEM_PADDING } from './TypeAheadListItem';
-import { token } from '@atlaskit/tokens';
 const DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
 const typeAheadContent = css`
-  background: ${token('elevation.surface.overlay', N0)};
+  background: ${`var(--ds-surface-overlay, ${N0})`};
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 0 1px ${N60A}, 0 4px 8px -2px ${N50A}`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px ${N60A}, 0 4px 8px -2px ${N50A}`})`};
   padding: ${gridSize() / 2}px 0;
   width: 320px;
   max-height: 380px; /* ~5.5 visibile items */

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/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,7 +3,6 @@ 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, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export const TableControlsPadding = 20;
 const mainToolbarWrapperStyle = css`
@@ -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;
 
@@ -37,7 +36,7 @@ const stickyToolbarWrapperStyle = css`
   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/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/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

@@ -12,9 +12,8 @@ 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;
 `;

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/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}

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