@atlaskit/editor-core 177.0.0 → 177.0.1

package/dist/esm/plugins/extension/ui/styles.js

@@ -4,5 +4,4 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
-export var extensionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .extensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), token('color.background.danger', akEditorDeleteBackground), blockNodesVerticalMargin, blockNodesVerticalMargin);
+export var extensionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .extensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), blockNodesVerticalMargin, blockNodesVerticalMargin);

package/dist/esm/plugins/fake-text-cursor/styles.js

@@ -4,5 +4,4 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { B75 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export var fakeCursorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .ProseMirror-fake-text-cursor {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n    }\n\n    .ProseMirror-fake-text-cursor::after {\n      content: '';\n      display: inline;\n      top: 0;\n      position: absolute;\n      border-right: 1px solid ", ";\n    }\n\n    .ProseMirror-fake-text-selection {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n      background-color: ", ";\n    }\n  }\n"])), token('color.border', 'rgba(0, 0, 0, 0.4)'), token('color.background.selected', B75));
+export var fakeCursorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .ProseMirror-fake-text-cursor {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n    }\n\n    .ProseMirror-fake-text-cursor::after {\n      content: '';\n      display: inline;\n      top: 0;\n      position: absolute;\n      border-right: 1px solid ", ";\n    }\n\n    .ProseMirror-fake-text-selection {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n      background-color: ", ";\n    }\n  }\n"])), "var(--ds-border, rgba(0, 0, 0, 0.4))", "var(--ds-background-selected, ".concat(B75, ")"));

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

@@ -5,7 +5,6 @@ var _templateObject;
 /** @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 var replaceSectionButtonStyles = css({
   marginLeft: '4px'
@@ -13,7 +12,7 @@ export var replaceSectionButtonStyles = css({
 export var ruleStyles = css({
   width: '100%',
   border: 'none',
-  backgroundColor: "".concat(token('color.border', N30A)),
+  backgroundColor: "".concat("var(--ds-border, ".concat(N30A, ")")),
   margin: '4px 0px',
   height: '1px',
   borderRadius: '1px'
@@ -27,7 +26,7 @@ export var wrapperStyles = css({
 });
 export var sectionWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  & > * {\n    display: inline-flex;\n    height: 32px;\n    flex: 0 0 auto;\n  }\n\n  & > [data-ds--text-field--container] {\n    display: flex;\n    flex: 1 1 auto;\n  }\n"])));
 export var countStyles = css({
-  color: "".concat(token('color.text.subtlest', N60)),
+  color: "".concat("var(--ds-text-subtlest, ".concat(N60, ")")),
   fontSize: "".concat(relativeFontSizeToBase16(12)),
   flex: '0 0 auto',
   justifyContent: 'center',

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

@@ -23,7 +23,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 var menuItemDimensions = {
   width: 175,
   height: 32
@@ -168,7 +167,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
 
       if (showSelected && selected) {
         return jsx(EditorDoneIcon, {
-          primaryColor: token('color.icon.selected', B400),
+          primaryColor: "var(--ds-icon-selected, ".concat(B400, ")"),
           size: "small",
           label: intl.formatMessage(messages.confirmModalOK)
         });

package/dist/esm/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/esm/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -7,7 +7,6 @@ var _templateObject;
 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 @@ import Button from './Button';
 import messages from './messages';
 import rafSchedule from 'raf-schd';
 var akGridSize = gridSize();
-var toolbarScrollButtons = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", "px;\n  padding: ", "px ", "px;\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), akGridSize / 2, akGridSize / 2, akGridSize, token('color.border', N30));
+var toolbarScrollButtons = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", "px;\n  padding: ", "px ", "px;\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), akGridSize / 2, akGridSize / 2, akGridSize, "var(--ds-border, ".concat(N30, ")"));
 var LeftIcon = ChevronLeftLargeIcon;
 var RightIcon = ChevronRightLargeIcon;
 export default (function (_ref) {

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

@@ -5,8 +5,7 @@ var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-var separator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), token('color.border', N30));
+var separator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), "var(--ds-border, ".concat(N30, ")"));
 export default (function () {
   return jsx("div", {
     css: separator,

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

@@ -36,7 +36,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';
@@ -240,9 +239,9 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
 
 var toolbarContainer = function toolbarContainer(theme, scrollable, hasSelect, firstElementIsSelect) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div > div {\n    align-items: center;\n  }\n  ", "\n"])), themed({
-    light: token('elevation.surface.overlay', 'white'),
-    dark: token('elevation.surface.overlay', DN70)
-  })(theme), borderRadius(), token('elevation.shadow.overlay', "0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)"), scrollable ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              height: 40px;\n            "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              height: 32px;\n            "])))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        padding: ", "px ", "px;\n        ", "\n      "])), akGridSize / 2, akGridSize, firstElementIsSelect && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding-left: ", "px;\n        "])), akGridSize / 2)));
+    light: "var(--ds-surface-overlay, white)",
+    dark: "var(--ds-surface-overlay, ".concat(DN70, ")")
+  })(theme), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"), scrollable ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              height: 40px;\n            "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              height: 32px;\n            "])))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        padding: ", "px ", "px;\n        ", "\n      "])), akGridSize / 2, akGridSize, firstElementIsSelect && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding-left: ", "px;\n        "])), akGridSize / 2)));
 };
 
 var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {

package/dist/esm/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';
 var background = {
   danger: {
     default: {
@@ -8,28 +7,28 @@ var 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, ".concat(colors.N30A, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")")
     },
     active: {
-      light: token('color.background.neutral.pressed', "".concat(hexToRgba(colors.B75, 0.6))),
-      dark: token('color.background.neutral.pressed', "".concat(hexToRgba(colors.B75, 0.6)))
+      light: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(colors.B75, 0.6)), ")"),
+      dark: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(colors.B75, 0.6)), ")")
     }
   }
 };
 var color = {
   danger: {
     default: {
-      light: token('color.icon', colors.N400),
-      dark: token('color.icon', colors.DN400)
+      light: "var(--ds-icon, ".concat(colors.N400, ")"),
+      dark: "var(--ds-icon, ".concat(colors.DN400, ")")
     },
     hover: {
-      light: token('color.icon.danger', colors.R400),
-      dark: token('color.icon.danger', colors.R400)
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
     },
     active: {
-      light: token('color.icon.danger', colors.R400),
-      dark: token('color.icon.danger', colors.R400)
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
     }
   }
 };

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

@@ -5,6 +5,5 @@ var _templateObject;
 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 var GRID_GUTTER = 12;
-export var gridStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, akEditorGridLineZIndex, token('color.border', N30A), token('color.border.focused', B200));
+export var gridStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, akEditorGridLineZIndex, "var(--ds-border, ".concat(N30A, ")"), "var(--ds-border-focused, ".concat(B200, ")"));

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

@@ -6,12 +6,11 @@ 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 var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), token('color.text', colors.N400), token('color.background.neutral.subtle', colors.N0), borderRadius());
-export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), token('color.text.subtlest', colors.N300));
-export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 20px 44px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), token('color.text.subtle', colors.N400), token('color.background.neutral.subtle', colors.N0));
-export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), token('color.background.neutral.subtle', '#fff'));
+export var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), "var(--ds-text, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"), borderRadius());
+export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), "var(--ds-text-subtlest, ".concat(colors.N300, ")"));
+export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 20px 44px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), "var(--ds-text-subtle, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"));
+export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), "var(--ds-background-neutral-subtle, #fff)");
 export var content = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
 export var column = {
   width: '44%',
@@ -24,7 +23,7 @@ export var dialogHeader = {
   '&': {
     fontSize: relativeFontSizeToBase16(24),
     fontWeight: 400,
-    color: token('color.text.subtle', N400),
+    color: "var(--ds-text-subtle, ".concat(N400, ")"),
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
@@ -33,11 +32,11 @@ export var title = {
   '&': {
     fontSize: relativeFontSizeToBase16(18),
     fontWeight: 400,
-    color: token('color.text.subtle', N400),
+    color: "var(--ds-text-subtle, ".concat(N400, ")"),
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
 };
-export var codeSm = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
-export var codeMd = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
-export var codeLg = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), token('color.background.neutral', colors.N20), borderRadius());
+export var codeSm = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());
+export var codeMd = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());
+export var codeLg = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), borderRadius());

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

@@ -26,7 +26,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';
@@ -48,9 +47,9 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { transformTimeStamp } from '../../../../ui/LinkSearch/transformTimeStamp';
 import Announcer from '../../../../utils/announcer/announcer';
 export var RECENT_SEARCH_LIST_SIZE = 5;
-var clearText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: 8px;\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), token('color.icon.subtle', N90));
-var textInputWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), inputWrapper, token('color.border', N30), token('color.border', N30));
-var iconWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), token('color.icon.subtle', N80));
+var clearText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: 8px;\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), "var(--ds-icon-subtle, ".concat(N90, ")"));
+var textInputWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), inputWrapper, "var(--ds-border, ".concat(N30, ")"), "var(--ds-border, ".concat(N30, ")"));
+var iconWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), "var(--ds-icon-subtle, ".concat(N80, ")"));
 export var messages = defineMessages({
   displayText: {
     id: 'fabric.editor.displayText',

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

@@ -8,9 +8,8 @@ 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';
-var wrapperNode = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), token('color.background.neutral', N30), token('color.border', N50), borderRadius(), relativeFontSizeToBase16(13), token('color.background.selected', N50));
-var jiraChildNode = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: ", ";\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: ", ";\n    content: 'JIRA | ';\n  }\n"])), token('color.text.subtlest', '#707070'), token('color.text', 'black'));
+var wrapperNode = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-border, ".concat(N50, ")"), borderRadius(), relativeFontSizeToBase16(13), "var(--ds-background-selected, ".concat(N50, ")"));
+var jiraChildNode = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: ", ";\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: ", ";\n    content: 'JIRA | ';\n  }\n"])), "var(--ds-text-subtlest, #707070)", "var(--ds-text, black)");
 var svgChildNode = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n\n  & > div {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 export default function JIRAIssueNode(props) {
   var issueKey = props.node.attrs.issueKey;

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

@@ -7,8 +7,7 @@ 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 };
-export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, token('color.border', N40A), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, token('color.border', N50A), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);
+export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, "var(--ds-border, ".concat(N40A, ")"), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, "var(--ds-border, ".concat(N50A, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);

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

@@ -31,16 +31,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 var CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
-var supportText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), token('color.text.subtlest', N100), relativeFontSizeToBase16(12), token('color.border', N30));
+var supportText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(N100, ")"), relativeFontSizeToBase16(12), "var(--ds-border, ".concat(N30, ")"));
 var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
 var inputWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
-var validationWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 12px 0 40px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), token('color.border.danger', R400));
+var validationWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 12px 0 40px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), "var(--ds-border-danger, ".concat(R400, ")"));
 var buttonWrapper = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 4px 8px;\n"])));
-var clearText = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.icon.subtle', N80));
+var clearText = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-icon-subtle, ".concat(N80, ")"));
 export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(AltTextEditComponent, _React$Component);
 

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

@@ -7,8 +7,7 @@ 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 var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, token('color.border', N60), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, token('color.border.focused', B200), token('color.background.danger', akEditorDeleteBackground), akEditorSelectedBorderBoldSize, token('color.border.danger', akEditorDeleteBorder), fileCardImageViewSelectedSelector, token('color.border.danger', akEditorDeleteIconColor), richMediaClassName, fileCardImageViewSelector, token('color.border.danger', akEditorDeleteIconColor), richMediaClassName, inlinePlayerClassName, token('color.border.danger', akEditorDeleteIconColor), richMediaClassName, newFileExperienceClassName, token('color.border.danger', akEditorDeleteIconColor), token('color.icon.danger', akEditorDeleteIconColor), token('color.blanket.danger', 'rgb(255, 189, 173, 0.5)'));
+export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), fileCardImageViewSelectedSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on
  * the page, without a border, that are inside a flexbox, to no longer align to

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

@@ -7,9 +7,8 @@ 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';
-var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), token('color.text.subtlest', N200));
+var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));
 export var CAPTION_PLACEHOLDER_ID = 'caption-placeholder';
 export default /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick;

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

@@ -10,10 +10,9 @@ 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';
-var iconWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), token('color.icon.accent.blue', hexToRgba(B400, 0.4) || B400), token('color.background.accent.blue.subtle', hexToRgba(B300, 0.6) || B300), borderRadius(), FILE_WIDTH, MEDIA_HEIGHT);
-var dropLine = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), token('color.border.focused', B200), borderRadius());
+var iconWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-icon-accent-blue, ".concat(hexToRgba(B400, 0.4) || B400, ")"), "var(--ds-background-accent-blue-subtle, ".concat(hexToRgba(B300, 0.6) || B300, ")"), borderRadius(), FILE_WIDTH, MEDIA_HEIGHT);
+var dropLine = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), "var(--ds-border-focused, ".concat(B200, ")"), borderRadius());
 
 var IconWrapperComponent = function IconWrapperComponent(props) {
   var intl = props.intl;

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

@@ -30,8 +30,7 @@ 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';
-var validationWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), token('color.border.danger', R400));
+var validationWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), "var(--ds-border-danger, ".concat(R400, ")"));
 var buttonWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 4px 8px 4px 0px;\n"])));
 export var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(LinkAddToolbar, _React$PureComponent);

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

@@ -6,5 +6,4 @@ 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 var mentionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), token('color.text.subtle', N500), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, token('color.background.danger', akEditorDeleteBackgroundWithOpacity), MentionSharedCssClassName.MENTION_CONTAINER, token('color.background.neutral', N30A), token('color.text.subtle', N500));
+export var mentionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(N500, ")"), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(N30A, ")"), "var(--ds-text-subtle, ".concat(N500, ")"));

package/dist/esm/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';
@@ -53,7 +52,7 @@ var InviteItem = function InviteItem(_ref) {
     css: avatarStyle
   }, jsx(AddIcon, {
     label: intl.formatMessage(messages.mentionsAddLabel),
-    primaryColor: token('color.icon.subtle', N300)
+    primaryColor: "var(--ds-icon-subtle, ".concat(N300, ")")
   })), jsx("div", {
     css: nameSectionStyle,
     "data-testid": "name-section"

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

@@ -4,12 +4,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import { css } from '@emotion/react';
 import { N30, N300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var ROW_SIDE_PADDING = 14;
 export var rowStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: 6px ", "px;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n"])), ROW_SIDE_PADDING);
 export var AVATAR_HEIGHT = 36;
 export var avatarStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  flex: initial;\n  opacity: inherit;\n  width: 36px;\n  height: ", "px;\n\n  > span {\n    width: 24px;\n    height: 24px;\n    padding: 6px;\n  }\n"])), AVATAR_HEIGHT);
-export var nameSectionStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), token('color.text.subtle', N300));
+export var nameSectionStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), "var(--ds-text-subtle, ".concat(N300, ")"));
 export var mentionItemStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: pointer;\n"])));
-export var mentionItemSelectedStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.neutral.subtle.hovered', N30));
+export var mentionItemSelectedStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"));
 export var capitalizedStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  text-transform: capitalize;\n"])));

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

@@ -5,7 +5,6 @@ var _templateObject;
 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 var panelStyles = function panelStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, token('color.background.danger', akEditorDeleteBackground), PanelSharedCssClassName.icon, token('color.icon.danger', akEditorDeleteIconColor), PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity), PanelSharedCssClassName.icon, token('color.icon.danger', akEditorDeleteIconColor), panelSharedStyles(props), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), panelSharedStyles(props), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));
 };

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

@@ -4,5 +4,4 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-export var placeholderStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .placeholder-decoration {\n    color: ", ";\n    width: 100%;\n    pointer-events: none;\n    user-select: none;\n  }\n"])), token('color.text.subtlest', N200));
+export var placeholderStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .placeholder-decoration {\n    color: ", ";\n    width: 100%;\n    pointer-events: none;\n    user-select: none;\n  }\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));

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

@@ -5,5 +5,4 @@ var _templateObject;
 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 var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), token('color.text.subtlest', N300), token('color.text.subtlest', N300), token('color.text.subtlest', N300), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), token('color.text.subtlest', N300));
+export var placeholderTextStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), "var(--ds-text-subtlest, ".concat(N300, ")"), "var(--ds-text-subtlest, ".concat(N300, ")"), "var(--ds-text-subtlest, ".concat(N300, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Background]), "var(--ds-text-subtlest, ".concat(N300, ")"));

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

@@ -5,7 +5,6 @@ var _templateObject;
 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 var ruleStyles = function ruleStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles(props), akEditorLineHeight, akEditorSelectedNodeClassName, token('color.border.selected', akEditorSelectedBorderColor));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles(props), akEditorLineHeight, akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
 };

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

@@ -25,7 +25,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';
 var PopupWithListeners = withOuterListeners(Popup);
 export var InputMethod;
 
@@ -35,7 +34,7 @@ export var InputMethod;
   InputMethod["enterKey"] = "enterKey";
 })(InputMethod || (InputMethod = {}));
 
-var pickerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), token('elevation.surface.overlay', N0), gridSize(), borderRadius(), token('elevation.shadow.overlay', '0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)'));
+var pickerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), "var(--ds-surface-overlay, ".concat(N0, ")"), gridSize(), borderRadius(), "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))");
 export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
   _inherits(StatusPickerWithoutAnalytcs, _React$Component);
 

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

@@ -5,5 +5,4 @@ var _templateObject;
 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 var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-decision-wrapper] {\n    cursor: pointer;\n  }\n\n  .", " > [data-decision-wrapper],\n  ol[data-node-type='decisionList'].", " {\n    border-radius: 4px;\n    ", "\n  }\n\n  .danger {\n    .", ".", "\n      > div {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n      &::after {\n        content: none; /* reset the Blanket selection style */\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity));
+export var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-decision-wrapper] {\n    cursor: pointer;\n  }\n\n  .", " > [data-decision-wrapper],\n  ol[data-node-type='decisionList'].", " {\n    border-radius: 4px;\n    ", "\n  }\n\n  .danger {\n    .", ".", "\n      > div {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n      &::after {\n        content: none; /* reset the Blanket selection style */\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"));

package/dist/esm/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 var factoryDecorations = function factoryDecorations(_ref) {
   var intl = _ref.intl,
       popupMountRef = _ref.popupMountRef,
@@ -51,7 +50,7 @@ export var factoryDecorations = function factoryDecorations(_ref) {
 
       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, ".concat(B400, ")");
       typeaheadComponent.style.backgroundColor = 'transparent';
 
       var onUndoRedo = function onUndoRedo(inputType) {