@atlaskit/editor-core 177.0.0 → 178.0.0

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

@@ -6,11 +6,10 @@ import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { hexToRgba } from '@atlaskit/adf-schema';
 import { injectIntl } from 'react-intl-next';
 import { dropPlaceholderMessages } from './drop-placeholder-messages';
-import { token } from '@atlaskit/tokens';
 import { MEDIA_HEIGHT, FILE_WIDTH } from '../../nodeviews/mediaNodeView/media';
 const iconWrapper = css`
-  color: ${token('color.icon.accent.blue', hexToRgba(B400, 0.4) || B400)};
-  background: ${token('color.background.accent.blue.subtle', hexToRgba(B300, 0.6) || B300)};
+  color: ${`var(--ds-icon-accent-blue, ${hexToRgba(B400, 0.4) || B400})`};
+  background: ${`var(--ds-background-accent-blue-subtle, ${hexToRgba(B300, 0.6) || B300})`};
   border-radius: ${borderRadius()}px;
   margin: 5px 3px 25px;
   width: ${FILE_WIDTH}px;
@@ -20,7 +19,7 @@ const iconWrapper = css`
   justify-content: center;
 `;
 const dropLine = css`
-  background: ${token('color.border.focused', B200)};
+  background: ${`var(--ds-border-focused, ${B200})`};
   border-radius: ${borderRadius()}px;
   margin: 2px 0;
   width: 100%;

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

@@ -17,12 +17,11 @@ import { normalizeUrl } from '../../hyperlink/utils';
 import { R400 } from '@atlaskit/theme/colors';
 import { INPUT_METHOD } from '../../analytics/types/enums';
 import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
-import { token } from '@atlaskit/tokens';
 const validationWrapper = css`
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 4px 0 32px;
-  border-top: 1px solid ${token('color.border.danger', R400)};
+  border-top: 1px solid ${`var(--ds-border-danger, ${R400})`};
   align-items: start;
   display: flex;
   flex-direction: column;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -12,7 +12,6 @@ import { N0 } from '@atlaskit/theme/colors';
 import withOuterListeners from '../../../ui/with-outer-listeners';
 import { DEFAULT_STATUS } from '../actions';
 import { analyticsState, createStatusAnalyticsAndFire } from '../analytics';
-import { token } from '@atlaskit/tokens';
 const PopupWithListeners = withOuterListeners(Popup);
 export let InputMethod;
 
@@ -23,10 +22,10 @@ export let InputMethod;
 })(InputMethod || (InputMethod = {}));
 
 const pickerContainer = css`
-  background: ${token('elevation.surface.overlay', N0)};
+  background: ${`var(--ds-surface-overlay, ${N0})`};
   padding: ${gridSize()}px 0;
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', '0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)')};
+  box-shadow: ${"var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))"};
   input {
     text-transform: uppercase;
   }

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

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

package/dist/es2019/plugins/text-color/commands/change-color.js

@@ -40,8 +40,7 @@ export const changeColor = color => (state, dispatch) => {
   if (textColor) {
     const pluginState = pluginKey.getState(state);
     const activeColor = getActiveColor(state);
-    const withColorAnalytics = createWithColorAnalytics(color, activeColor, // palette is a subset of paletteExpanded
-    pluginState.paletteExpanded || pluginState.palette);
+    const withColorAnalytics = createWithColorAnalytics(color, activeColor, pluginState.palette);
 
     if (pluginState.disabled) {
       return false;

package/dist/es2019/plugins/text-color/pm-plugins/main.js

@@ -1,6 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
-import { textColorPaletteExtended } from '../../../ui/ColorPalette/Palettes/textColorPalette';
+import { textColorPalette } from '../../../ui/ColorPalette/Palettes/textColorPalette';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
 import { getDisabledState } from '../utils/disabled';
@@ -11,7 +11,7 @@ export function createInitialPluginState(editorState, pluginConfig) {
     value: defaultColor.color,
     label: defaultColor.label,
     border: DEFAULT_BORDER_COLOR
-  }, ...textColorPaletteExtended];
+  }, ...textColorPalette];
   const state = {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -7,7 +7,6 @@ import { defineMessages, injectIntl } from 'react-intl-next';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ColorPalette from '../../../../ui/ColorPalette';
-import { textColorPalette as originalTextColors } from '../../../../ui/ColorPalette/Palettes/textColorPalette';
 import Dropdown from '../../../../ui/Dropdown';
 import { expandIconWrapperStyle, wrapperStyle, separatorStyles, triggerWrapperStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
@@ -51,16 +50,13 @@ export class ToolbarTextColor extends React.Component {
 
         const {
           pluginState: {
-            palette,
-            defaultColor
+            palette
           }
         } = this.props; // we store color names in analytics
 
         const swatch = palette.find(sw => sw.value === color);
-        const isNewColor = color !== defaultColor && !originalTextColors.some(col => col.value === color);
         this.dispatchAnalyticsEvent(this.buildAnalyticsSelectColor({
-          color: (swatch ? swatch.label : color).toLowerCase(),
-          isNewColor
+          color: (swatch ? swatch.label : color).toLowerCase()
         }));
         this.handleOpenChange({
           isOpen: false,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { akEditorToolbarKeylineHeight, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export const TableControlsPadding = 20;
 const mainToolbarWrapperStyle = css`
@@ -12,7 +11,7 @@ const mainToolbarWrapperStyle = css`
   padding: ${gridSize()}px ${gridSize()}px 0;
   display: flex;
   height: auto;
-  background-color: ${token('elevation.surface', 'white')};
+  background-color: ${"var(--ds-surface, white)"};
   box-shadow: none;
   padding-left: ${TableControlsPadding}px;
 
@@ -37,7 +36,7 @@ const stickyToolbarWrapperStyle = css`
   transition: box-shadow ease-in-out 0.2s;
   &.show-keyline {
     box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0
-      ${token('color.border', N30)};
+      ${`var(--ds-border, ${N30})`};
   }
 `;
 

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

@@ -65,6 +65,22 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
       return () => window.removeEventListener('resize', updateOnResize);
     }
   });
+
+  const isShortcutToFocusToolbar = event => {
+    //Alt + F9 to reach first element in this main toolbar
+    return event.altKey && (event.key === 'F9' || event.keyCode === 120);
+  };
+
+  const handleEscape = event => {
+    var _props$editorView;
+
+    if (!((_props$editorView = props.editorView) !== null && _props$editorView !== void 0 && _props$editorView.hasFocus())) {
+      var _props$editorView2;
+
+      (_props$editorView2 = props.editorView) === null || _props$editorView2 === void 0 ? void 0 : _props$editorView2.focus();
+    }
+  };
+
   return jsx(ContextPanelConsumer, null, ({
     width: contextPanelWidth
   }) => {
@@ -72,7 +88,9 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
 
     return jsx(ToolbarArrowKeyNavigationProvider, {
       editorView: props.editorView,
-      childComponentSelector: "[data-testid='ak-editor-main-toolbar']"
+      childComponentSelector: "[data-testid='ak-editor-main-toolbar']",
+      isShortcutToFocusToolbar: isShortcutToFocusToolbar,
+      handleEscape: handleEscape
     }, jsx("div", {
       css: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)),
       "data-testid": "ak-editor-main-toolbar"

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

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

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

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

package/dist/es2019/ui/ColorPalette/Palettes/textColorPalette.js

@@ -1 +1 @@
-export { textColorPalette, textColorPaletteExtended } from '@atlaskit/editor-common/ui-color';
+export { textColorPalette } from '@atlaskit/editor-common/ui-color';