@atlaskit/editor-core 177.0.0 → 177.0.1

package/dist/es2019/plugins/find-replace/ui/styles.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N60, N30A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const replaceSectionButtonStyles = css({
   marginLeft: '4px'
@@ -9,7 +8,7 @@ export const replaceSectionButtonStyles = css({
 export const ruleStyles = css({
   width: '100%',
   border: 'none',
-  backgroundColor: `${token('color.border', N30A)}`,
+  backgroundColor: `${`var(--ds-border, ${N30A})`}`,
   margin: '4px 0px',
   height: '1px',
   borderRadius: '1px'
@@ -36,7 +35,7 @@ export const sectionWrapperStyles = css`
   }
 `;
 export const countStyles = css({
-  color: `${token('color.text.subtlest', N60)}`,
+  color: `${`var(--ds-text-subtlest, ${N60})`}`,
   fontSize: `${relativeFontSizeToBase16(12)}`,
   flex: '0 0 auto',
   justifyContent: 'center',

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

@@ -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
@@ -151,7 +150,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

@@ -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;

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;
 `;

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;

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

@@ -6,11 +6,10 @@ 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: ${token('color.icon.accent.blue', hexToRgba(B400, 0.4) || B400)};
-  background: ${token('color.background.accent.blue.subtle', hexToRgba(B300, 0.6) || B300)};
+  color: ${`var(--ds-icon-accent-blue, ${hexToRgba(B400, 0.4) || B400})`};
+  background: ${`var(--ds-background-accent-blue-subtle, ${hexToRgba(B300, 0.6) || B300})`};
   border-radius: ${borderRadius()}px;
   margin: 5px 3px 25px;
   width: ${FILE_WIDTH}px;
@@ -20,7 +19,7 @@ const iconWrapper = css`
   justify-content: center;
 `;
 const dropLine = css`
-  background: ${token('color.border.focused', B200)};
+  background: ${`var(--ds-border-focused, ${B200})`};
   border-radius: ${borderRadius()}px;
   margin: 2px 0;
   width: 100%;

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

@@ -17,12 +17,11 @@ 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 ${token('color.border.danger', R400)};
+  border-top: 1px solid ${`var(--ds-border-danger, ${R400})`};
   align-items: start;
   display: flex;
   flex-direction: column;

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

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { N500, N30A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const mentionsStyles = css`
   .${MentionSharedCssClassName.MENTION_CONTAINER} {
     &.${akEditorSelectedNodeClassName} [data-mention-id] > span {
@@ -10,7 +9,7 @@ export const mentionsStyles = css`
 
       /* need to specify dark text colour because personal mentions
          (in dark blue) have white text by default */
-      color: ${token('color.text.subtle', N500)};
+      color: ${`var(--ds-text-subtle, ${N500})`};
     }
   }
 
@@ -20,11 +19,11 @@ export const mentionsStyles = css`
       > span
       > span {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
-      background-color: ${token('color.background.danger', akEditorDeleteBackgroundWithOpacity)};
+      background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackgroundWithOpacity})`};
     }
     .${MentionSharedCssClassName.MENTION_CONTAINER} > span > span > span {
-      background-color: ${token('color.background.neutral', N30A)};
-      color: ${token('color.text.subtle', N500)};
+      background-color: ${`var(--ds-background-neutral, ${N30A})`};
+      color: ${`var(--ds-text-subtle, ${N500})`};
     }
   }
 `;

package/dist/es2019/plugins/mentions/ui/InviteItem/index.js

@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { N300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import React, { useCallback, useEffect } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { avatarStyle, capitalizedStyle, mentionItemStyle, nameSectionStyle, rowStyle, ROW_SIDE_PADDING, AVATAR_HEIGHT, mentionItemSelectedStyle } from './styles';
@@ -54,7 +53,7 @@ const InviteItem = ({
     css: avatarStyle
   }, jsx(AddIcon, {
     label: intl.formatMessage(messages.mentionsAddLabel),
-    primaryColor: token('color.icon.subtle', N300)
+    primaryColor: `var(--ds-icon-subtle, ${N300})`
   })), jsx("div", {
     css: nameSectionStyle,
     "data-testid": "name-section"

package/dist/es2019/plugins/mentions/ui/InviteItem/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { N30, N300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const ROW_SIDE_PADDING = 14;
 export const rowStyle = css`
   align-items: center;
@@ -30,7 +29,7 @@ export const nameSectionStyle = css`
   flex: 1;
   min-width: 0;
   margin-left: 14px;
-  color: ${token('color.text.subtle', N300)};
+  color: ${`var(--ds-text-subtle, ${N300})`};
   opacity: inherit;
 `;
 export const mentionItemStyle = css`
@@ -41,7 +40,7 @@ export const mentionItemStyle = css`
   cursor: pointer;
 `;
 export const mentionItemSelectedStyle = css`
-  background-color: ${token('color.background.neutral.subtle.hovered', N30)};
+  background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
 `;
 export const capitalizedStyle = css`
   text-transform: capitalize;