@atlaskit/editor-common 72.0.0 → 72.1.0

package/dist/es2019/styles/shared/table.js

@@ -5,7 +5,6 @@ import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorSelected
 import { DN20 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import browser from '../../utils/browser';
 import { CodeBlockSharedCssClassName } from './code-block';
 export const tableMarginTop = 24;
@@ -65,8 +64,8 @@ const tableSharedStyle = props => css`
     border-collapse: collapse;
     border: ${tableCellBorderWidth}px solid
       ${themed({
-  light: token('color.border', akEditorTableBorder),
-  dark: token('color.border', akEditorTableBorderDark)
+  light: `var(--ds-border, ${akEditorTableBorder})`,
+  dark: `var(--ds-border, ${akEditorTableBorderDark})`
 })(props)};
     table-layout: fixed;
     font-size: 1em;
@@ -88,7 +87,7 @@ const tableSharedStyle = props => css`
         border-bottom: none;
       }
       th td {
-        background-color: ${token('color.background.neutral.subtle', 'white')};
+        background-color: ${"var(--ds-background-neutral-subtle, white)"};
       }
       th,
       td {
@@ -97,8 +96,8 @@ const tableSharedStyle = props => css`
         vertical-align: top;
         border: 1px solid
           ${themed({
-  light: token('color.border', akEditorTableBorder),
-  dark: token('color.border', akEditorTableBorderDark)
+  light: `var(--ds-border, ${akEditorTableBorder})`,
+  dark: `var(--ds-border, ${akEditorTableBorderDark})`
 })(props)};
         border-right-width: 0;
         border-bottom-width: 0;
@@ -132,8 +131,8 @@ const tableSharedStyle = props => css`
       }
       th {
         background-color: ${themed({
-  light: token('color.background.neutral', akEditorTableToolbar),
-  dark: token('color.background.neutral', akEditorTableToolbarDark)
+  light: `var(--ds-background-neutral, ${akEditorTableToolbar})`,
+  dark: `var(--ds-background-neutral, ${akEditorTableToolbarDark})`
 })(props)};
         text-align: left;
 
@@ -142,34 +141,34 @@ const tableSharedStyle = props => css`
         &:not([style]):not(.danger) {
           .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}:not(.danger) {
             background-color: ${themed({
-  light: token('elevation.surface.raised', 'rgb(235, 237, 240)'),
-  dark: token('elevation.surface.raised', 'rgb(36, 47, 66)')
+  light: "var(--ds-surface-raised, rgb(235, 237, 240))",
+  dark: "var(--ds-surface-raised, rgb(36, 47, 66))"
 })(props)};
 
             :not(.${akEditorSelectedNodeClassName}) {
               box-shadow: 0px 0px 0px 1px
-                ${token('color.border', 'transparent')};
+                ${"var(--ds-border, transparent)"};
             }
 
             .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
               background-image: ${overflowShadow({
   background: themed({
-    light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-    dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+    light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+    dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
   })(props),
   leftCoverWidth: `${gridSize() * 3}px`
 })};
 
               background-color: ${themed({
-  light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-  dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+  light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+  dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
 })(props)};
             }
 
             .${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
               background-color: ${themed({
-  light: token('color.background.neutral', 'rgb(226, 229, 233)'),
-  dark: token('color.background.neutral', DN20)
+  light: "var(--ds-background-neutral, rgb(226, 229, 233))",
+  dark: `var(--ds-background-neutral, ${DN20})`
 })(props)};
             }
 
@@ -177,21 +176,21 @@ const tableSharedStyle = props => css`
             > [data-ds--code--code-block] {
               background-image: ${overflowShadow({
   background: themed({
-    light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-    dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+    light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+    dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
   })(props),
   leftCoverWidth: `${gridSize() * 3}px`
 })}!important;
 
               background-color: ${themed({
-  light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-  dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+  light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+  dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
 })(props)}!important;
 
               // selector lives inside @atlaskit/code
               --ds--code--line-number-bg-color: ${themed({
-  light: token('color.background.neutral', 'rgb(226, 229, 233)'),
-  dark: token('color.background.neutral', DN20)
+  light: "var(--ds-background-neutral, rgb(226, 229, 233))",
+  dark: `var(--ds-background-neutral, ${DN20})`
 })(props)};
             }
           }

package/dist/es2019/ui/Caption/index.js

@@ -5,16 +5,15 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N200, N400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { messages } from './messages';
 const captionWrapperStyle = css`
   margin-top: 8px;
   text-align: center;
   position: relative;
-  color: ${token('color.text.subtle', N400)};
+  color: ${`var(--ds-text-subtle, ${N400})`};
 `;
 const placeholderStyle = css`
-  color: ${token('color.text.subtlest', N200)};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   position: absolute;
   top: 0;
   width: 100%;

package/dist/es2019/ui/DropList/index.js

@@ -7,10 +7,9 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "72.0.0";
+const packageVersion = "72.1.0";
 const halfFocusRing = 1;
 const dropOffset = `0, ${gridSize()}px`;
 
@@ -33,12 +32,12 @@ class DropList extends Component {
     _defineProperty(this, "menuWrapper", theme => {
       return css`
       color: ${themed({
-        light: token('color.text', N900),
-        dark: token('color.text', DN600)
+        light: `var(--ds-text, ${N900})`,
+        dark: `var(--ds-text, ${DN600})`
       })(theme)};
       background-color: ${themed({
-        light: token('elevation.surface.overlay', N0),
-        dark: token('elevation.surface.overlay', DN50)
+        light: `var(--ds-surface-overlay, ${N0})`,
+        dark: `var(--ds-surface-overlay, ${DN50})`
       })(theme)};
       border-radius: ${borderRadius()}px;
       box-shadow: 0 ${gridSize() / 2}px ${gridSize()}px -${gridSize() / 4}px ${N50A},

package/dist/es2019/ui/Expand/index.js

@@ -8,7 +8,6 @@ import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, rel
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export const messages = defineMessages({
   collapseNode: {
     id: 'fabric.editor.collapseNode',
@@ -32,16 +31,16 @@ export const messages = defineMessages({
   }
 });
 const BORDER_RADIUS = gridSize() / 2;
-const EXPAND_COLLAPSED_BACKGROUND = token('color.background.neutral.subtle', 'transparent');
+const EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 const EXPAND_SELECTED_BACKGROUND = themed({
-  light: token('elevation.surface', 'rgba(255, 255, 255, 0.6)'),
-  dark: token('elevation.surface', 'rgba(9, 10, 11, 0.29)')
+  light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
+  dark: "var(--ds-surface, rgba(9, 10, 11, 0.29))"
 });
-const EXPAND_FOCUSED_BORDER_COLOR = token('color.border.focused', colors.B300);
+const EXPAND_FOCUSED_BORDER_COLOR = `var(--ds-border-focused, ${colors.B300})`;
 const EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
 const EXPAND_EXPANDED_BORDER_COLOR = themed({
-  light: token('color.border', colors.N40A),
-  dark: token('color.border', colors.DN50)
+  light: `var(--ds-border, ${colors.N40A})`,
+  dark: `var(--ds-border, ${colors.DN50})`
 });
 export const ExpandIconWrapper = ({
   children,
@@ -56,15 +55,15 @@ const expandIconWrapperStyle = props => css`
   cursor: pointer;
   display: flex;
   color: ${themed({
-  light: token('color.icon', colors.N90),
-  dark: token('color.icon', '#d9dde3')
+  light: `var(--ds-icon, ${colors.N90})`,
+  dark: "var(--ds-icon, #d9dde3)"
 })(props)};
   border-radius: ${gridSize() / 2}px;
   width: 24px;
   height: 24px;
 
   &:hover {
-    background: ${token('color.background.neutral.subtle.hovered', colors.N30A)};
+    background: ${`var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`};
   }
 
   svg {
@@ -123,8 +122,8 @@ const containerStyles = styleProps => {
       // https://product-fabric.atlassian.net/browse/DSP-4152
       border: 1px solid
         ${themed({
-    light: token('color.border', colors.N50A),
-    dark: token('color.border', colors.DN50)
+    light: `var(--ds-border, ${colors.N50A})`,
+    dark: `var(--ds-border, ${colors.DN50})`
   })(themeProps)};
       background: ${EXPAND_SELECTED_BACKGROUND(themeProps)};
     }
@@ -171,8 +170,8 @@ const titleInputStyles = props => css`
   line-height: ${akEditorLineHeight};
   font-weight: normal;
   color: ${themed({
-  light: token('color.text.subtlest', colors.N200A),
-  dark: token('color.text.subtlest', colors.DN600)
+  light: `var(--ds-text-subtlest, ${colors.N200A})`,
+  dark: `var(--ds-text-subtlest, ${colors.DN600})`
 })(props)};
   background: transparent;
   display: flex;
@@ -183,8 +182,8 @@ const titleInputStyles = props => css`
   &::placeholder {
     opacity: 0.6;
     color: ${themed({
-  light: token('color.text.subtlest', colors.N200A),
-  dark: token('color.text.subtlest', colors.DN600)
+  light: `var(--ds-text-subtlest, ${colors.N200A})`,
+  dark: `var(--ds-text-subtlest, ${colors.DN600})`
 })(props)};
   }
 `;
@@ -198,8 +197,8 @@ const titleContainerStyles = props => css`
   font-size: ${relativeFontSizeToBase16(fontSize())};
   width: 100%;
   color: ${themed({
-  light: token('color.text.subtle', colors.N300A),
-  dark: token('color.text.subtle', colors.DN600)
+  light: `var(--ds-text-subtle, ${colors.N300A})`,
+  dark: `var(--ds-text-subtle, ${colors.DN600})`
 })(props)};
   overflow: hidden;
   cursor: pointer;

package/dist/es2019/ui/Messages/index.js

@@ -5,17 +5,16 @@ import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
 const errorColor = css`
-  color: ${token('color.text.danger', R400)};
+  color: ${`var(--ds-text-danger, ${R400})`};
 `;
 const validColor = css`
-  color: ${token('color.text.success', G400)};
+  color: ${`var(--ds-text-success, ${G400})`};
 `;
 
 const messageStyle = props => css`
   ${h200(props)} font-weight: normal;
-  color: ${token('color.text.subtlest', N200)};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   margin-top: ${gridSize() / 2}px;
   display: flex;
   justify-content: baseline;

package/dist/es2019/ui/PortalProvider/PortalProviderThemesProvider.js

@@ -28,16 +28,9 @@ export function PortalProviderThemeProviders(props) {
   const atlaskitTheme = React.useCallback(() => ({
     mode
   }), [mode]);
-  return (
-    /*#__PURE__*/
-    // TODO: ED-15585
-    // import { ThemeProvider as DeprectateStyledComponentsProvider } from 'styled-components';
-    // <DeprectateStyledComponentsProvider theme={styledComponentsAndEmotionTheme}>
-    // </DeprectateStyledComponentsProvider>
-    React.createElement(ThemeProvider, {
-      theme: styledComponentsAndEmotionTheme
-    }, /*#__PURE__*/React.createElement(AtlaskitTheme.Provider, {
-      value: atlaskitTheme
-    }, children))
-  );
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: styledComponentsAndEmotionTheme
+  }, /*#__PURE__*/React.createElement(AtlaskitTheme.Provider, {
+    value: atlaskitTheme
+  }, children));
 }

package/dist/es2019/ui/UnsupportedBlock/index.js

@@ -6,15 +6,14 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
 const blockNodeStyle = css`
-  background: ${token('color.background.disabled', N30)};
-  border: 1px dashed ${token('color.border.disabled', N50)};
+  background: ${`var(--ds-background-disabled, ${N30})`};
+  border: 1px dashed ${`var(--ds-border-disabled, ${N50})`};
   border-radius: ${borderRadius()}px;
   box-sizing: border-box;
   cursor: default;

package/dist/es2019/ui/UnsupportedInline/index.js

@@ -6,7 +6,6 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
@@ -14,8 +13,8 @@ import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-un
 import { getUnsupportedContent } from '../unsupported-content-helper';
 const inlineNodeStyle = css`
   align-items: center;
-  background: ${token('color.background.disabled', N30)};
-  border: 1px dashed ${token('color.border.disabled', N50)};
+  background: ${`var(--ds-background-disabled, ${N30})`};
+  border: 1px dashed ${`var(--ds-border-disabled, ${N50})`};
   border-radius: ${borderRadius()}px;
   box-sizing: border-box;
   cursor: default;

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

@@ -1,4 +1,4 @@
-import { colorPalette, colorPaletteExtended } from '@atlaskit/adf-schema';
+import { colorPalette } from '@atlaskit/adf-schema';
 import { DEFAULT_BORDER_COLOR } from './common';
 import getColorMessage from './getColorMessage';
 import paletteMessages from './paletteMessages';
@@ -16,10 +16,6 @@ const mapPaletteColor = (label, color) => {
 
 
 export const textColorPalette = [];
-export const textColorPaletteExtended = [];
 colorPalette.forEach((label, color) => {
   textColorPalette.push(mapPaletteColor(label, color));
-});
-colorPaletteExtended.forEach((label, color) => {
-  textColorPaletteExtended.push(mapPaletteColor(label, color));
 });

package/dist/es2019/ui-color/ColorPalette/index.js

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import { injectIntl } from 'react-intl-next';
 import { N0, N500 } from '@atlaskit/theme/colors';
-import { token, useThemeObserver } from '@atlaskit/tokens';
+import { useThemeObserver } from '@atlaskit/tokens';
 import Color from './Color';
 import getColorMessage from './Palettes/getColorMessage';
 import { newDarkPalette, newLightPalette } from './Palettes/paletteMessagesTokenModeNames';
@@ -29,7 +29,7 @@ function getCheckMarkColor(color, textPalette) {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 
 
-  return contrastColor === N0 ? token('color.icon.inverse', N0) : token('color.icon', N500);
+  return contrastColor === N0 ? `var(--ds-icon-inverse, ${N0})` : `var(--ds-icon, ${N500})`;
 }
 
 const ColorPalette = props => {

package/dist/es2019/ui-color/index.js

@@ -4,5 +4,5 @@ export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/c
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
 export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
-export { textColorPalette, textColorPaletteExtended } from './ColorPalette/Palettes/textColorPalette';
+export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
 export { DEFAULT_BORDER_COLOR } from './ColorPalette/Palettes/common';

package/dist/es2019/ui-menu/DropdownMenu/index.js

@@ -8,7 +8,6 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup } from '@atlaskit/menu';
 import { B100, DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropList from '../../ui/DropList';
@@ -21,7 +20,7 @@ const wrapper = css`
   }
 `;
 const focusedMenuItemStyle = css`
-  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;
 `;
 
@@ -34,8 +33,8 @@ const buttonStyles = isActive => theme => {
       > span,
       > span:hover,
       > span:active {
-        background: ${token('color.background.selected', '#6c798f')};
-        color: ${token('color.text', '#fff')};
+        background: ${"var(--ds-background-selected, #6c798f)"};
+        color: ${"var(--ds-text, #fff)"};
       }
       :focus > span[aria-disabled='false'] {
         ${focusedMenuItemStyle};
@@ -49,24 +48,24 @@ const buttonStyles = isActive => theme => {
     return css`
       > span:hover[aria-disabled='false'] {
         color: ${themed({
-      light: token('color.text', N900),
-      dark: token('color.text', DN600)
+      light: `var(--ds-text, ${N900})`,
+      dark: `var(--ds-text, ${DN600})`
     })(theme)};
         background-color: ${themed({
-      light: token('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)'),
-      dark: token('color.background.neutral.subtle.hovered', 'rgb(59, 71, 92)')
+      light: "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))",
+      dark: "var(--ds-background-neutral-subtle-hovered, rgb(59, 71, 92))"
     })(theme)};
       }
       > span:active[aria-disabled='false'] {
         background-color: ${themed({
-      light: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)'),
-      dark: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)')
+      light: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))",
+      dark: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"
     })(theme)};
       }
       > span[aria-disabled='true'] {
         color: ${themed({
-      light: token('color.text.disabled', N70),
-      dark: token('color.text.disabled', DN80)
+      light: `var(--ds-text-disabled, ${N70})`,
+      dark: `var(--ds-text-disabled, ${DN80})`
     })(theme)};
       }
       :focus > span[aria-disabled='false'] {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.0.0",
+	"version": "72.1.0",
 	"sideEffects": false
 }

package/dist/esm/analytics/types/enums.js

@@ -39,7 +39,7 @@ export var ACTION;
   ACTION["DISPATCHED_VALID_TRANSACTION"] = "dispatchedValidTransaction";
   ACTION["EDITED"] = "edited";
   ACTION["EDITOR_CRASHED"] = "unhandledErrorCaught";
-  ACTION["EDITOR_CRASHED_ADDITIONAL_INFORMATION"] = "unhandledErrorCaughtAdditionalInfo";
+  ACTION["EDITOR_CRASHED_ADDITIONAL_INFORMATION"] = "unhandledErrorCaughtAdditionalInfov2";
   ACTION["EDITOR_MOUNTED"] = "mounted";
   ACTION["EDITOR_TTI"] = "tti";
   ACTION["EDITOR_CONTENT_RETRIEVAL_PERFORMED"] = "contentRetrievalPerformed";

package/dist/esm/keymaps/index.js

@@ -7,7 +7,6 @@ var _templateObject;
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { browser } from '../utils';
 export var addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
 export var toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
@@ -78,7 +77,7 @@ var arrowKeysMap = {
   ARROWUP: "\u2191",
   ARROWDOWN: "\u2193"
 };
-var tooltipShortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), token('color.background.inverse.subtle', N400));
+var tooltipShortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), "var(--ds-background-inverse-subtle, ".concat(N400, ")"));
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 function formatShortcut(keymap) {

package/dist/esm/styles/shared/annotation.js

@@ -5,7 +5,6 @@ var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export var annotationPrefix = 'ak-editor-annotation';
 export var AnnotationSharedClassNames = {
   focus: "".concat(annotationPrefix, "-focus"),
@@ -21,18 +20,18 @@ var DY200 = '#82641c';
 export var AnnotationSharedCSSByState = function AnnotationSharedCSSByState(props) {
   return {
     focus: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    // Background is not coming through in confluence, suspecting to be caused by some specific combination of\n    // emotion and token look up\n\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147\n    box-shadow: ", ";\n    cursor: pointer;\n  "])), themed({
-      light: token('color.background.accent.yellow.subtler', Y75),
-      dark: token('color.background.accent.yellow.subtler', DY75)
+      light: "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"),
+      dark: "var(--ds-background-accent-yellow-subtler, ".concat(DY75, ")")
     })(props), themed({
-      light: token('color.border.accent.yellow', Y300),
-      dark: token('color.border.accent.yellow', DY300)
-    })(props), token('elevation.shadow.overlay', "1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A))),
+      light: "var(--ds-border-accent-yellow, ".concat(Y300, ")"),
+      dark: "var(--ds-border-accent-yellow, ".concat(DY300, ")")
+    })(props), "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")")),
     blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    cursor: pointer;\n  "])), themed({
-      light: token('color.background.accent.yellow.subtlest', Y75a),
-      dark: token('color.background.accent.yellow.subtlest', DY75a)
+      light: "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"),
+      dark: "var(--ds-background-accent-yellow-subtlest, ".concat(DY75a, ")")
     })(props), themed({
-      light: token('color.border.accent.yellow', Y200a),
-      dark: token('color.border.accent.yellow', DY200)
+      light: "var(--ds-border-accent-yellow, ".concat(Y200a, ")"),
+      dark: "var(--ds-border-accent-yellow, ".concat(DY200, ")")
     })(props))
   };
 };

package/dist/esm/styles/shared/blockquote.js

@@ -5,5 +5,4 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { akEditorBlockquoteBorderColor, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-export var blockquoteSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & blockquote {\n    box-sizing: border-box;\n    padding-left: ", "px;\n    border-left: 2px solid\n      ", ";\n    margin: ", " 0 0 0;\n    margin-right: 0;\n\n    [dir='rtl'] & {\n      padding-left: 0;\n      padding-right: ", "px;\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &::before {\n      content: '';\n    }\n\n    &::after {\n      content: none;\n    }\n\n    & p {\n      display: block;\n    }\n\n    & table,\n    & table:last-child {\n      display: inline-table;\n    }\n  }\n"])), gridSize() * 2, token('color.border', akEditorBlockquoteBorderColor), blockNodesVerticalMargin, gridSize() * 2);
+export var blockquoteSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & blockquote {\n    box-sizing: border-box;\n    padding-left: ", "px;\n    border-left: 2px solid\n      ", ";\n    margin: ", " 0 0 0;\n    margin-right: 0;\n\n    [dir='rtl'] & {\n      padding-left: 0;\n      padding-right: ", "px;\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &::before {\n      content: '';\n    }\n\n    &::after {\n      content: none;\n    }\n\n    & p {\n      display: block;\n    }\n\n    & table,\n    & table:last-child {\n      display: inline-table;\n    }\n  }\n"])), gridSize() * 2, "var(--ds-border, ".concat(akEditorBlockquoteBorderColor, ")"), blockNodesVerticalMargin, gridSize() * 2);

package/dist/esm/styles/shared/code-block.js

@@ -7,7 +7,6 @@ import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth,
 import { DN20, DN400, DN50, DN800, N20, N30, N400, N800 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export var CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -18,24 +17,24 @@ export var CodeBlockSharedCssClassName = {
   DS_CODEBLOCK: '[data-ds--code--code-block]'
 };
 export var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", "px 100%, ", "px 100%,\n        ", "px 100%, ", "px 100%, ", "px 100%,\n        1px 100%, ", "px 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, token('elevation.surface.raised', 'transparent'), borderRadius(), blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, themed({
-    light: token('color.background.neutral', N20),
-    dark: token('color.background.neutral', DN50)
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", "px 100%, ", "px 100%,\n        ", "px 100%, ", "px 100%, ", "px 100%,\n        1px 100%, ", "px 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", borderRadius(), blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, themed({
+    light: "var(--ds-background-neutral, ".concat(N20, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN50, ")")
   })(props), borderRadius(), overflowShadow({
     background: themed({
-      light: token('color.background.neutral', N20),
-      dark: token('color.background.neutral', DN50)
+      light: "var(--ds-background-neutral, ".concat(N20, ")"),
+      dark: "var(--ds-background-neutral, ".concat(DN50, ")")
     })(props),
     leftCoverWidth: "".concat(gridSize() * 3, "px")
   }), gridSize() * 3, gridSize() * 3, gridSize(), gridSize(), gridSize(), gridSize(), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
-    light: token('color.background.neutral', N30),
-    dark: token('color.background.neutral', DN20)
+    light: "var(--ds-background-neutral, ".concat(N30, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN20, ")")
   })(props), gridSize(), themed({
-    light: token('color.text.subtlest', N400),
-    dark: token('color.text.subtlest', DN400)
+    light: "var(--ds-text-subtlest, ".concat(N400, ")"),
+    dark: "var(--ds-text-subtlest, ".concat(DN400, ")")
   })(props), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, themed({
-    light: token('color.text', N800),
-    dark: token('color.text', DN800)
+    light: "var(--ds-text, ".concat(N800, ")"),
+    dark: "var(--ds-text, ".concat(DN800, ")")
   })(props), borderRadius(), gridSize(), relativeFontSizeToBase16(fontSize()));
 };
 export var codeBlockInListSafariFix = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ::before {\n    content: ' ';\n    line-height: ", ";\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), akEditorLineHeight, akEditorLineHeight);

package/dist/esm/styles/shared/code-mark.js

@@ -6,11 +6,10 @@ import { css } from '@emotion/react';
 import { getCodeStyles } from '@atlaskit/code/inline';
 import { DN70, N30A } from '@atlaskit/theme/colors';
 import { getTheme, themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export var codeMarkSharedStyles = function codeMarkSharedStyles(props) {
   var theme = getTheme(props);
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), themed({
-    light: token('color.background.neutral', N30A),
-    dark: token('color.background.neutral', DN70)
+    light: "var(--ds-background-neutral, ".concat(N30A, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN70, ")")
   })(props), getCodeStyles(theme));
 };