@atlaskit/editor-core 177.0.0 → 177.0.1

package/dist/cjs/ui/ToolbarFeedback/styles.js

@@ -15,8 +15,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
@@ -25,11 +23,11 @@ var buttonContent = (0, _react.css)(_templateObject || (_templateObject = (0, _t
 exports.buttonContent = buttonContent;
 var wrapper = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 0;\n"])));
 exports.wrapper = wrapper;
-var confirmationPopup = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow: auto;\n  max-height: none;\n  height: 410px;\n  width: 280px;\n"])), (0, _tokens.token)('elevation.surface.overlay', '#fff'), (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A)));
+var confirmationPopup = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow: auto;\n  max-height: none;\n  height: 410px;\n  width: 280px;\n"])), "var(--ds-surface-overlay, #fff)", (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"));
 exports.confirmationPopup = confirmationPopup;
-var confirmationText = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  word-spacing: 4px;\n  line-height: 22px;\n  color: ", ";\n  margin-top: 30px;\n  padding: 20px;\n  & > div {\n    width: 240px;\n  }\n  & > div:first-of-type {\n    margin-bottom: 12px;\n  }\n  & > div:nth-of-type(2) {\n    margin-bottom: 20px;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), (0, _tokens.token)('color.text.subtle', _colors.N400));
+var confirmationText = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  word-spacing: 4px;\n  line-height: 22px;\n  color: ", ";\n  margin-top: 30px;\n  padding: 20px;\n  & > div {\n    width: 240px;\n  }\n  & > div:first-of-type {\n    margin-bottom: 12px;\n  }\n  & > div:nth-of-type(2) {\n    margin-bottom: 20px;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-text-subtle, ".concat(_colors.N400, ")"));
 exports.confirmationText = confirmationText;
-var confirmationHeader = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), (0, _tokens.token)('color.background.discovery.bold', _colors.P400));
+var confirmationHeader = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), "var(--ds-background-discovery-bold, ".concat(_colors.P400, ")"));
 exports.confirmationHeader = confirmationHeader;
 var confirmationImg = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100px;\n  display: block;\n  margin: 25px auto 0 auto;\n"])));
 exports.confirmationImg = confirmationImg;

package/dist/cjs/ui/WithFlash/index.js

@@ -29,16 +29,14 @@ var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var pulseBackground = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  50% {\n    background-color: ", ";\n  }\n"])), (0, _tokens.token)('color.blanket.danger', _colors.R100));
-var pulseBackgroundReverse = (0, _react2.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-color: ", ";\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), (0, _tokens.token)('color.blanket.danger', _colors.R100), (0, _tokens.token)('color.blanket.danger', _colors.R100));
+var pulseBackground = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  50% {\n    background-color: ", ";\n  }\n"])), "var(--ds-blanket-danger, ".concat(_colors.R100, ")"));
+var pulseBackgroundReverse = (0, _react2.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-color: ", ";\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), "var(--ds-blanket-danger, ".concat(_colors.R100, ")"), "var(--ds-blanket-danger, ".concat(_colors.R100, ")"));
 var flashWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &.-flash > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n\n  & > div {\n    animation: 'none';\n  }\n"])), pulseBackgroundReverse);
 var flashWrapperAnimated = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  & > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n"])), flashWrapper, pulseBackground);
 

package/dist/cjs/ui/styles.js

@@ -27,8 +27,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 
 var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
@@ -37,7 +35,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 var buttonGroupStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
 exports.buttonGroupStyle = buttonGroupStyle;
-var separatorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), (0, _tokens.token)('color.border', _colors.N30));
+var separatorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), "var(--ds-border, ".concat(_colors.N30, ")"));
 exports.separatorStyles = separatorStyles;
 var wrapperStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n\n  margin-left: 0;\n  min-width: auto;\n"])));
 exports.wrapperStyle = wrapperStyle;
@@ -52,7 +50,7 @@ exports.buttonContentStyle = buttonContentStyle;
 var buttonContentReducedSpacingStyle = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px;\n"]))); // Taken from the style of inline dialog components
 
 exports.buttonContentReducedSpacingStyle = buttonContentReducedSpacingStyle;
-var dropShadow = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: ", ";\n"])), (0, _tokens.token)('elevation.shadow.overlay', "0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25)"));
+var dropShadow = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: ", ";\n"])), "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"));
 exports.dropShadow = dropShadow;
 var clickSelectWrapperStyle = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: all;\n"])));
 exports.clickSelectWrapperStyle = clickSelectWrapperStyle;

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "177.0.0";
+var version = "177.0.1";
 exports.version = version;
 
 var nextMajorVersion = function nextMajorVersion() {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "177.0.0",
+	"version": "177.0.1",
 	"sideEffects": false
 }

package/dist/es2019/labs/next/full-page.js

@@ -5,7 +5,6 @@ import rafSchedule from 'raf-schd';
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { BaseTheme } from '@atlaskit/editor-common/ui';
 import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
@@ -93,7 +92,7 @@ const mainToolbar = css`
   display: flex;
   height: 80px;
   flex-shrink: 0;
-  background-color: ${token('elevation.surface', 'white')};
+  background-color: ${"var(--ds-surface, white)"};
 
   & object {
     height: 0 !important;
@@ -101,7 +100,7 @@ const mainToolbar = css`
 `;
 const mainToolbarWithKeyline = css`
   ${mainToolbar}
-  box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0 ${token('color.border', N30)}
+  box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0 ${`var(--ds-border, ${N30})`}
 `;
 const mainToolbarCustomComponentsSlot = css`
   display: flex;

package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/styles.js

@@ -1,11 +1,10 @@
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const triggerWrapper = css`
   display: flex;
 `;
 export const separator = css`
-  background: ${token('color.border', N30)};
+  background: ${`var(--ds-border, ${N30})`};
   width: 1px;
   height: 24px;
   display: inline-block;

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -3,10 +3,9 @@ import { css } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
 import { shortcutStyle } from '../../../../ui/styles';
-import { token } from '@atlaskit/tokens';
 export const blockTypeMenuItemStyle = (tagName, selected) => {
   // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-  const selectedStyle = selected ? `${tagName} { color: ${token('color.text', 'white')} !important; }` : '';
+  const selectedStyle = selected ? `${tagName} { color: ${"var(--ds-text, white)"} !important; }` : '';
   return themeProps => css`
     ${headingsSharedStyles(themeProps)};
     > {
@@ -27,5 +26,5 @@ export const keyboardShortcut = css`
   margin-left: 16px;
 `;
 export const keyboardShortcutSelect = css`
-  color: ${token('color.icon', N400)};
+  color: ${`var(--ds-icon, ${N400})`};
 `;

package/dist/es2019/plugins/breakout/ui/LayoutButton.js

@@ -19,15 +19,14 @@ import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
 import { getPluginState } from '../plugin-key';
 import { NodeSelection } from 'prosemirror-state';
 import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
-import { token } from '@atlaskit/tokens';
 import { layers } from '@atlaskit/theme/constants';
 const toolbarButtonWrapper = css`
   && button {
-    background: ${token('color.background.neutral', N20A)};
-    color: ${token('color.icon', N300)};
+    background: ${`var(--ds-background-neutral, ${N20A})`};
+    color: ${`var(--ds-icon, ${N300})`};
     :hover {
-      background: ${token('color.background.neutral.hovered', B300)};
-      color: ${token('color.icon', 'white')} !important;
+      background: ${`var(--ds-background-neutral-hovered, ${B300})`};
+      color: ${"var(--ds-icon, white)"} !important;
     }
   }
 `;

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

@@ -3,7 +3,6 @@ import { SelectionStyle, getSelectionStyles, akEditorDeleteBorder, akEditorDelet
 import { N20 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
 export const smartCardStyles = css`
   .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
@@ -38,7 +37,7 @@ export const smartCardStyles = css`
     &.danger {
       .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
         box-shadow: 0 0 0 1px
-          ${token('color.border.danger', akEditorDeleteBorder)};
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
         /* EDM-1717: box-shadow Safari fix start */
         z-index: 2;
         /* EDM-1717: box-shadow Safari fix end */
@@ -50,7 +49,7 @@ export const smartCardStyles = css`
     .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
       cursor: pointer;
       &:hover {
-        background-color: ${token('color.background.neutral.subtle.hovered', N20)};
+        background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
       }
     }
 
@@ -63,7 +62,7 @@ export const smartCardStyles = css`
     &.danger {
       .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
         box-shadow: 0 0 0 1px
-          ${token('color.border.danger', akEditorDeleteBorder)} !important;
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
       }
     }
   }
@@ -90,12 +89,12 @@ export const smartCardStyles = css`
     &.danger {
       .media-card-frame::after {
         box-shadow: 0 0 0 1px
-          ${token('color.border.danger', akEditorDeleteBorder)} !important;
-        background: ${token('color.background.danger', akEditorDeleteBackground)} !important;
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
+        background: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`} !important;
       }
       .richMedia-resize-handle-right::after,
       .richMedia-resize-handle-left::after {
-        background: ${token('color.border.danger', akEditorDeleteBorder)};
+        background: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
       }
     }
   }

package/dist/es2019/plugins/code-block/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { R75 } from '@atlaskit/theme/colors';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { codeBlockClassNames } from './ui/class-names';
 import { codeBlockSharedStyles } from '@atlaskit/editor-common/styles';
 
@@ -13,7 +12,7 @@ const GutterDangerOverlay = () => css`
     left: 0;
     top: 0;
     width: 24px;
-    background-color: ${token('color.blanket.danger', 'none')};
+    background-color: ${"var(--ds-blanket-danger, none)"};
   }
 `;
 
@@ -44,29 +43,29 @@ export const codeBlockStyles = props => css`
   /* Danger when top level node */
   .ProseMirror .danger.code-block {
     box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-      ${token('color.border.danger', akEditorDeleteBorder)};
+      ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
 
     .${codeBlockClassNames.gutter} {
-      background-color: ${token('color.background.danger', R75)};
-      color: ${token('color.text.danger', akEditorDeleteIconColor)};
+      background-color: ${`var(--ds-background-danger, ${R75})`};
+      color: ${`var(--ds-text-danger, ${akEditorDeleteIconColor})`};
       ${GutterDangerOverlay()};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: ${token('color.blanket.danger', akEditorDeleteBackground)};
+      background-color: ${`var(--ds-blanket-danger, ${akEditorDeleteBackground})`};
     }
   }
 
   /* Danger when nested node */
   .ProseMirror .danger .code-block {
     .${codeBlockClassNames.gutter} {
-      background-color: ${token('color.background.danger', 'rgba(255, 143, 115, 0.5)')};
-      color: ${token('color.text.danger', akEditorDeleteIconColor)};
+      background-color: ${"var(--ds-background-danger, rgba(255, 143, 115, 0.5))"};
+      color: ${`var(--ds-text-danger, ${akEditorDeleteIconColor})`};
       ${GutterDangerOverlay()};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: ${token('color.blanket.danger', 'rgba(255, 189, 173, 0.5)')};
+      background-color: ${"var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))"};
     }
   }
 `;

package/dist/es2019/plugins/collab-edit/styles.js

@@ -2,14 +2,13 @@ import { css } from '@emotion/react';
 import { TELEPOINTER_DIM_CLASS } from './plugin-state';
 import { colors } from './utils';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 
 const telepointerColorStyle = (color, index) => `
   &.color-${index} {
     background-color: ${color.selection};
     &::after {
       background-color: ${color.solid};
-      color: ${token('color.text.inverse', '#fff')};
+      color: ${"var(--ds-text-inverse, #fff)"};
       border-color: ${color.solid};
     }
   }
@@ -33,7 +32,7 @@ export const telepointerStyle = css`
       top: -14px;
       font-size: ${relativeFontSizeToBase16(9)};
       padding: 2px;
-      color: ${token('color.text.inverse', 'white')};
+      color: ${"var(--ds-text-inverse, white)"};
       left: -1px;
       border-radius: 2px 2px 2px 0;
       line-height: initial;

package/dist/es2019/plugins/collab-edit/ui/styles.js

@@ -2,9 +2,8 @@ import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N20 } from '@atlaskit/theme/colors';
 import { akEditorSmallZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const inviteTeamWrapper = css`
-  background: ${token('color.background.neutral', N20)};
+  background: ${`var(--ds-background-neutral, ${N20})`};
   border-radius: 50%;
   min-width: ${gridSize() * 4}px;
   margin-left: -${gridSize() / 2}px;
@@ -38,11 +37,11 @@ export const badge = color => css`
   z-index: ${akEditorSmallZIndex};
   border-radius: 3px;
   background: ${color};
-  color: ${token('color.text.inverse', '#fff')};
+  color: ${"var(--ds-text-inverse, #fff)"};
   font-size: ${relativeFontSizeToBase16(9)};
   line-height: 0;
   padding-top: 7px;
   text-align: center;
-  box-shadow: 0 0 1px ${token('color.border.inverse', '#fff')};
+  box-shadow: 0 0 1px ${"var(--ds-border-inverse, #fff)"};
   box-sizing: border-box;
 `;

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

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { token } from '@atlaskit/tokens';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const dateStyles = css`
   .${DateSharedCssClassName.DATE_CONTAINER} {
@@ -21,7 +20,7 @@ export const dateStyles = css`
       .${DateSharedCssClassName.DATE_WRAPPER}
       > span {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-        ${token('color.border.danger', akEditorDeleteBorder)};
+        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
     }
   }
 `;

package/dist/es2019/plugins/date/ui/DatePicker/index.js

@@ -10,7 +10,6 @@ import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import Calendar from '@atlaskit/calendar';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N0 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import withOuterListeners from '../../../../ui/with-outer-listeners';
 const PopupWithListeners = withOuterListeners(Popup);
 import { INPUT_METHOD } from '../../../analytics/types/enums';
@@ -19,8 +18,8 @@ import DatePickerInput from './date-picker-input';
 const popupContentWrapper = css`
   padding: 2px;
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
-  background-color: ${token('elevation.surface.overlay', N0)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+  background-color: ${`var(--ds-surface-overlay, ${N0})`};
 `;
 
 class DatePicker extends React.Component {

package/dist/es2019/plugins/expand/ui/styles.js

@@ -2,41 +2,40 @@ import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { R50, R300, N40A, N50A, N80A, DN50, R200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { sharedExpandStyles } from '@atlaskit/editor-common/ui';
 import { SelectionStyle, getSelectionStyles, akLayoutGutterOffset, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { BreakoutCssClassName } from '../../breakout/constants';
 import { expandClassNames } from './class-names';
 const EXPAND_SELECTED_BACKGROUND = themed({
-  light: token('color.background.neutral.subtle', 'rgba(255, 255, 255, 0.6)'),
-  dark: token('color.background.neutral.subtle', 'rgba(9, 10, 11, 0.29)')
+  light: "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))",
+  dark: "var(--ds-background-neutral-subtle, rgba(9, 10, 11, 0.29))"
 });
 
 const EXPAND_ICON_COLOR = props => css`
   color: ${themed({
-  light: token('color.icon.subtle', N80A),
-  dark: token('color.icon.subtle', '#d9dde3')
+  light: `var(--ds-icon-subtle, ${N80A})`,
+  dark: "var(--ds-icon-subtle, #d9dde3)"
 })(props)};
 `;
 
 const ACTIVE_STATE_BACKGROUND_COLOR = themed({
-  dark: token('color.blanket.selected', `#0C294F4B`)
+  dark: `var(--ds-blanket-selected, ${`#0C294F4B`})`
 });
 const ACTIVE_STATE_BORDER = themed({
-  dark: `1px solid ${token('color.border.selected', `#4794ff4B`)}`
+  dark: `1px solid ${`var(--ds-border-selected, ${`#4794ff4B`})`}`
 });
 const ACTIVE_STATE_BORDER_RADIUS = themed({
   dark: '3px'
 });
 const DANGER_STATE_BACKGROUND_COLOR = themed({
-  light: token('color.background.danger', R50),
-  dark: token('color.background.danger', '#441C13')
+  light: `var(--ds-background-danger, ${R50})`,
+  dark: "var(--ds-background-danger, #441C13)"
 });
 const DANGER_STATE_BORDER = themed({
-  dark: `1px solid ${token('color.border.danger', R200)}`
+  dark: `1px solid ${`var(--ds-border-danger, ${R200})`}`
 });
 const DANGER_STATE_BORDER_COLOR = themed({
-  light: token('color.border.danger', R300)
+  light: `var(--ds-border-danger, ${R300})`
 });
 const DANGER_STATE_BORDER_RADIUS = themed({
   dark: '3px'
@@ -113,8 +112,8 @@ export const expandStyles = props => css`
   .${expandClassNames.expanded} {
     background: ${EXPAND_SELECTED_BACKGROUND(props)};
     border-color: ${themed({
-  light: token('color.border', N40A),
-  dark: token('color.border', DN50)
+  light: `var(--ds-border, ${N40A})`,
+  dark: `var(--ds-border, ${DN50})`
 })(props)};
 
     .${expandClassNames.content} {
@@ -155,8 +154,8 @@ export const expandStyles = props => css`
 
       &:hover {
         border-color: ${themed({
-  light: token('color.border', N50A),
-  dark: token('color.border', DN50)
+  light: `var(--ds-border, ${N50A})`,
+  dark: `var(--ds-border, ${DN50})`
 })(props)};
         background: ${EXPAND_SELECTED_BACKGROUND(props)};
       }

package/dist/es2019/plugins/extension/ui/Extension/Extension/styles.js

@@ -3,7 +3,6 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { DN30, DN900, N30 } from '@atlaskit/theme/colors';
 import { wrapperDefault, padding } from '../styles';
-import { token } from '@atlaskit/tokens';
 export const widerLayoutClassName = 'wider-layout';
 export const wrapperStyle = theme => css`
   ${wrapperDefault(theme)}
@@ -32,13 +31,13 @@ export const header = css`
 export const content = theme => css`
   padding: ${padding}px;
   background: ${themed({
-  light: token('elevation.surface', 'white'),
-  dark: token('elevation.surface', DN30)
+  light: "var(--ds-surface, white)",
+  dark: `var(--ds-surface, ${DN30})`
 })(theme)};
   color: ${themed({
-  dark: token('color.text', DN900)
+  dark: `var(--ds-text, ${DN900})`
 })(theme)};
-  border: 1px solid ${token('color.border', N30)};
+  border: 1px solid ${`var(--ds-border, ${N30})`};
   border-radius: ${borderRadius()}px;
   cursor: initial;
 `;

package/dist/es2019/plugins/extension/ui/Extension/InlineExtension/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { wrapperDefault } from '../styles';
-import { token } from '@atlaskit/tokens';
 export const wrapperStyle = theme => css`
   ${wrapperDefault(theme)}
 
@@ -23,6 +22,6 @@ export const wrapperStyle = theme => css`
 
   &.with-children {
     padding: 0;
-    background: ${token('color.background.neutral.subtle', 'white')};
+    background: ${"var(--ds-background-neutral-subtle, white)"};
   }
 `;

package/dist/es2019/plugins/extension/ui/Extension/styles.js

@@ -2,29 +2,28 @@ import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N20, DN50, DN700, B200, N20A, N70 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { EXTENSION_PADDING, BODIED_EXT_PADDING } from '@atlaskit/editor-common/styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
 export const wrapperDefault = theme => css`
   background: ${themed({
-  light: token('color.background.neutral', N20),
-  dark: token('color.background.neutral', DN50)
+  light: `var(--ds-background-neutral, ${N20})`,
+  dark: `var(--ds-background-neutral, ${DN50})`
 })(theme)};
   border-radius: ${borderRadius()}px;
   color: ${themed({
-  dark: token('color.text', DN700)
+  dark: `var(--ds-text, ${DN700})`
 })(theme)};
   position: relative;
   vertical-align: middle;
 
   .ProseMirror-selectednode > span > & > .extension-overlay {
-    box-shadow: inset 0px 0px 0px 2px ${token('color.border.selected', B200)};
+    box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-selected, ${B200})`};
     opacity: 1;
   }
 
   &.with-overlay {
     .extension-overlay {
-      background: ${token('color.background.neutral.hovered', N20A)};
+      background: ${`var(--ds-background-neutral-hovered, ${N20A})`};
       color: transparent;
     }
 
@@ -57,7 +56,7 @@ export const placeholderFallbackParams = css`
   display: inline-block;
   max-width: 200px;
   margin-left: 5px;
-  color: ${token('color.text.subtlest', N70)};
+  color: ${`var(--ds-text-subtlest, ${N70})`};
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

package/dist/es2019/plugins/extension/ui/SaveIndicator/SaveIndicator.js

@@ -5,7 +5,6 @@ import { G300, N0 } from '@atlaskit/theme/colors';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from './messages';
-import { token } from '@atlaskit/tokens';
 
 const noop = () => {};
 
@@ -22,10 +21,10 @@ const saveIndicatorContent = css`
   align-items: center;
   padding: 6px 12px;
 
-  background: ${token('elevation.surface.overlay', N0)};
+  background: ${`var(--ds-surface-overlay, ${N0})`};
 
   /* E300 */
-  box-shadow: ${token('elevation.shadow.overlay', `0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)`})`};
   border-radius: 16px;
 `;
 const saveIndicatorText = css`
@@ -62,7 +61,7 @@ export const SaveIndicator = ({
     "data-testid": "save-indicator-content"
   }, jsx(CheckCircleIcon, {
     label: "Saving",
-    primaryColor: token('color.icon.success', G300),
+    primaryColor: `var(--ds-icon-success, ${G300})`,
     size: "small"
   }), jsx("span", {
     css: saveIndicatorText

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

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const extensionStyles = css`
   .extensionView-content-wrap,
   .bodiedExtensionView-content-wrap {
@@ -22,8 +21,8 @@ export const extensionStyles = css`
 
     &.danger > span > .extension-container {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-        ${token('color.border.danger', akEditorDeleteBorder)};
-      background-color: ${token('color.background.danger', akEditorDeleteBackground)};
+        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
     }
 
     &.inline {

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

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { B75 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const fakeCursorStyles = css`
   .ProseMirror {
     .ProseMirror-fake-text-cursor {
@@ -14,14 +13,14 @@ export const fakeCursorStyles = css`
       display: inline;
       top: 0;
       position: absolute;
-      border-right: 1px solid ${token('color.border', 'rgba(0, 0, 0, 0.4)')};
+      border-right: 1px solid ${"var(--ds-border, rgba(0, 0, 0, 0.4))"};
     }
 
     .ProseMirror-fake-text-selection {
       display: inline;
       pointer-events: none;
       position: relative;
-      background-color: ${token('color.background.selected', B75)};
+      background-color: ${`var(--ds-background-selected, ${B75})`};
     }
   }
 `;