@atlaskit/editor-common 71.0.3 → 72.0.1

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,25 +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;\n      background-size: 8px 100%, 8px 100%, 8px 100%, 8px 100%, 8px 100%,\n        8px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 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({
-    // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
     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),
-    width: '8px'
-  }), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
-    light: token('color.background.neutral', N30),
-    dark: token('color.background.neutral', DN20)
+    leftCoverWidth: "".concat(gridSize() * 3, "px")
+  }), gridSize() * 3, gridSize() * 3, gridSize(), gridSize(), gridSize(), gridSize(), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
+    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));
 };

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

@@ -1,9 +1,56 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject;
 
 import { css } from '@emotion/react';
 import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
 import browser from '../../utils/browser';
-export var listPaddingLeftMarkerSpace = 24;
-export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: ", "px;\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), listPaddingLeftMarkerSpace, browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);
+export var listItemCounterPadding = 24;
+var CSS_VAR_NAMES;
+
+(function (CSS_VAR_NAMES) {
+  CSS_VAR_NAMES["ITEM_COUNTER_PADDING"] = "--ed--list--item-counter--padding";
+})(CSS_VAR_NAMES || (CSS_VAR_NAMES = {}));
+
+var getItemCounterLeftPadding = function getItemCounterLeftPadding(itemCounterDigitsSize) {
+  // Previous padding-left was approximately 24px. We approximate that
+  // same value using "ch" units (which represent the width of a "0" digit
+  // character). We use "ch" so that this computed padding can now grow if
+  //  the font-size ever enlarges.
+  var paddingLeft = "2.385ch";
+
+  if (itemCounterDigitsSize >= 3) {
+    // When there are 3 or more digits, we use a combination of "ch" units and
+    // pixel values so that while the computed padding grows if font-size ever
+    // enlarges, it doesn't over-scale with each digit (because of the fixed pixel
+    // portion of the computed value). This way, very large item counters will not
+    // become overly left-padded.
+    var fixedBasePx = 2;
+    paddingLeft = "calc(".concat(itemCounterDigitsSize + 1, "ch - ").concat(fixedBasePx, "px)");
+  }
+
+  return paddingLeft;
+};
+
+var stringifyStyle = function stringifyStyle(style) {
+  return Object.entries(style).reduce(function (str, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    return "".concat(str).concat(key, ":").concat(value, ";");
+  }, "");
+};
+
+export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat) {
+  var style = _defineProperty({}, CSS_VAR_NAMES.ITEM_COUNTER_PADDING, getItemCounterLeftPadding(itemCounterDigitsSize));
+
+  if (styleFormat === 'string') {
+    return stringifyStyle(style);
+  }
+
+  return style;
+}
+export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: var(\n      ", ",\n      ", "px\n    );\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), CSS_VAR_NAMES.ITEM_COUNTER_PADDING, listItemCounterPadding, browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);

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

@@ -3,27 +3,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2;
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
-var tokenPanelColor = {
-  info: 'color.background.information',
-  note: 'color.background.discovery',
-  tip: 'color.background.success',
-  success: 'color.background.success',
-  warning: 'color.background.warning',
-  error: 'color.background.danger'
-};
-var lightPanelColor = {
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
-
-  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var lightPanelColors = {
   info: colors.B50,
   note: colors.P50,
   tip: colors.G50,
@@ -93,38 +83,44 @@ export var darkPanelColors = {
   LightGray: '#5A6977',
   TextColor: '#D9DDE3'
 };
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
 var lightIconColor = {
-  info: token('color.icon.information', colors.B400),
-  note: token('color.icon.discovery', colors.P400),
-  tip: token('color.icon.success', colors.G400),
-  success: token('color.icon.success', colors.G400),
-  warning: token('color.icon.warning', colors.Y400),
-  error: token('color.icon.danger', colors.R400)
+  info: "var(--ds-icon-information, ".concat(colors.B400, ")"),
+  note: "var(--ds-icon-discovery, ".concat(colors.P400, ")"),
+  tip: "var(--ds-icon-success, ".concat(colors.G400, ")"),
+  success: "var(--ds-icon-success, ".concat(colors.G400, ")"),
+  warning: "var(--ds-icon-warning, ".concat(colors.Y400, ")"),
+  error: "var(--ds-icon-danger, ".concat(colors.R400, ")")
 };
 var darkIconColor = {
-  info: token('color.icon.information', colors.B100),
-  note: token('color.icon.discovery', colors.P100),
-  tip: token('color.icon.success', colors.G200),
-  success: token('color.icon.success', colors.G200),
-  warning: token('color.icon.warning', colors.Y100),
-  error: token('color.icon.danger', colors.R200)
+  info: "var(--ds-icon-information, ".concat(colors.B100, ")"),
+  note: "var(--ds-icon-discovery, ".concat(colors.P100, ")"),
+  tip: "var(--ds-icon-success, ".concat(colors.G200, ")"),
+  success: "var(--ds-icon-success, ".concat(colors.G200, ")"),
+  warning: "var(--ds-icon-warning, ".concat(colors.Y100, ")"),
+  error: "var(--ds-icon-danger, ".concat(colors.R200, ")")
+};
+var tokenDarkPanelColors = {
+  info: "var(--ds-background-information, ".concat(darkPanelColors['info'], ")"),
+  note: "var(--ds-background-discovery, ".concat(darkPanelColors['note'], ")"),
+  tip: "var(--ds-background-success, ".concat(darkPanelColors['tip'], ")"),
+  success: "var(--ds-background-success, ".concat(darkPanelColors['success'], ")"),
+  warning: "var(--ds-background-warning, ".concat(darkPanelColors['warning'], ")"),
+  error: "var(--ds-background-danger, ".concat(darkPanelColors['error'], ")")
 }; // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 
 var panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
 var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1; // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]]; // used for custom panels
 
-var panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]];
 export var getPanelDarkColor = function getPanelDarkColor(panelColor) {
   var colorObject = panelDarkModeColors.find(function (color) {
     return color[0] === panelColor || color[1] === panelColor;
   });
   return colorObject ? colorObject[1] : darkPanelColors.B1200S;
-};
+}; // used for custom panels
+
 export var getPanelBackgroundDarkModeColors = panelDarkModeColors.map(function (_ref) {
   var _ref2 = _slicedToArray(_ref, 2),
       colorName = _ref2[0],
@@ -180,7 +176,7 @@ var iconDynamicStyles = function iconDynamicStyles(panelType) {
 
 export var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var light = lightPanelColor[panelType];
+  var light = lightPanelColors[panelType];
   var dark = darkPanelColors[panelType];
   var background = themed({
     light: light,
@@ -190,13 +186,9 @@ export var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTok
 };
 export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
-
-  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
-  var light = token(tokenPanelColor[panelType], lightPanelColor[panelType]);
-  var dark = token(tokenPanelColor[panelType], darkPanelColors[panelType]);
-  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
+  var light = hexToEditorBackgroundPaletteColor(lightPanelColors[panelType]); // hexToEditorBackgroundPaletteColor has a light mode as a fallback color - for legacy dark mode we define the tokens locally
 
+  var dark = tokenDarkPanelColors[panelType];
   var background = themed({
     light: light,
     dark: dark

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

@@ -6,10 +6,9 @@ import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import { DN50, N30A } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 var divider = themed({
-  light: token('color.border', N30A),
-  dark: token('color.border', DN50)
+  light: "var(--ds-border, ".concat(N30A, ")"),
+  dark: "var(--ds-border, ".concat(DN50, ")")
 }); // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 
 export var ruleSharedStyles = function ruleSharedStyles(props) {

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

@@ -3,7 +3,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4116
 import { css } from '@emotion/react';
 import { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
@@ -24,5 +23,5 @@ var shadowWidth = 8;
  *      background-attachment: local, local, scroll, scroll;
  */
 
-var shadowSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, akEditorShadowZIndex, shadowWidth, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, N40A, shadowClassNames.RIGHT_SHADOW, N40A, shadowWidth, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT);
+var shadowSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, akEditorShadowZIndex, shadowWidth, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowWidth, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT);
 export { shadowSharedStyle };

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

@@ -3,14 +3,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4118
 import { css } from '@emotion/react';
 import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorSelectedNodeClassName, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
 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 var tableMarginTop = 24;
@@ -39,43 +37,43 @@ export var TableSharedCssClassName = {
 
 var tableSharedStyle = function tableSharedStyle(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]):not(.danger) {\n          .", ":not(.danger) {\n            background-color: ", ";\n\n            :not(.", ") {\n              box-shadow: 0px 0px 0px 1px\n                ", ";\n            }\n\n            .", " {\n              background-image: ", ";\n\n              background-color: ", ";\n            }\n\n            .", " {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, themed({
-    light: token('color.border', akEditorTableBorder),
-    dark: token('color.border', akEditorTableBorderDark)
-  })(props), token('color.background.neutral.subtle', 'white'), tableCellMinWidth, themed({
-    light: token('color.border', akEditorTableBorder),
-    dark: token('color.border', akEditorTableBorderDark)
+    light: "var(--ds-border, ".concat(akEditorTableBorder, ")"),
+    dark: "var(--ds-border, ".concat(akEditorTableBorderDark, ")")
+  })(props), "var(--ds-background-neutral-subtle, white)", tableCellMinWidth, themed({
+    light: "var(--ds-border, ".concat(akEditorTableBorder, ")"),
+    dark: "var(--ds-border, ".concat(akEditorTableBorderDark, ")")
   })(props), tableCellPadding, browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', themed({
     dark: getTableCellBackgroundDarkModeColors
   })(props), themed({
-    light: token('color.background.neutral', akEditorTableToolbar),
-    dark: token('color.background.neutral', akEditorTableToolbarDark)
+    light: "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"),
+    dark: "var(--ds-background-neutral, ".concat(akEditorTableToolbarDark, ")")
   })(props), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, themed({
-    light: token('elevation.surface.raised', 'rgb(235, 237, 240)'),
-    dark: token('elevation.surface.raised', 'rgb(36, 47, 66)')
-  })(props), akEditorSelectedNodeClassName, token('color.border', 'transparent'), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, overflowShadow({
+    light: "var(--ds-surface-raised, rgb(235, 237, 240))",
+    dark: "var(--ds-surface-raised, rgb(36, 47, 66))"
+  })(props), akEditorSelectedNodeClassName, "var(--ds-border, transparent)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, 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),
-    width: "".concat(gridSize(), "px")
+    leftCoverWidth: "".concat(gridSize() * 3, "px")
   }), 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, 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, ".concat(DN20, ")")
   })(props), 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),
-    width: "".concat(gridSize(), "px")
+    leftCoverWidth: "".concat(gridSize() * 3, "px")
   }), 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), 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, ".concat(DN20, ")")
   })(props));
 };
 

package/dist/esm/types/next-editor-plugin.js

@@ -0,0 +1 @@
+export {};

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

@@ -17,10 +17,9 @@ 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';
-var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), token('color.text.subtle', N400));
-var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), token('color.text.subtlest', N200));
+var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), "var(--ds-text-subtle, ".concat(N400, ")"));
+var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));
 export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(CaptionComponent, _React$Component);
 

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

@@ -20,10 +20,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';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "71.0.3";
+var packageVersion = "72.0.1";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat(gridSize(), "px");
 
@@ -49,11 +48,11 @@ var DropList = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "menuWrapper", function (theme) {
       return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 ", "px ", "px -", "px ", ",\n        0 0 1px ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", "px 0;\n      max-height: 90vh;\n    "])), themed({
-        light: token('color.text', N900),
-        dark: token('color.text', DN600)
+        light: "var(--ds-text, ".concat(N900, ")"),
+        dark: "var(--ds-text, ".concat(DN600, ")")
       })(theme), themed({
-        light: token('elevation.surface.overlay', N0),
-        dark: token('elevation.surface.overlay', DN50)
+        light: "var(--ds-surface-overlay, ".concat(N0, ")"),
+        dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
       })(theme), borderRadius(), gridSize() / 2, gridSize(), gridSize() / 4, N50A, N60A, gridSize() / 2);
     });
 

package/dist/esm/ui/Emoji/index.js

@@ -27,13 +27,16 @@ var EmojiNode = /*#__PURE__*/function (_PureComponent) {
     _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "renderWithProvider", function (providers) {
+      var _resourceConfig$optim;
+
       var _this$props = _this.props,
           allowTextFallback = _this$props.allowTextFallback,
           shortName = _this$props.shortName,
           id = _this$props.id,
           fallback = _this$props.fallback,
           fitToHeight = _this$props.fitToHeight,
-          showTooltip = _this$props.showTooltip;
+          showTooltip = _this$props.showTooltip,
+          resourceConfig = _this$props.resourceConfig;
 
       if (allowTextFallback && !providers.emojiProvider) {
         return /*#__PURE__*/React.createElement("span", {
@@ -55,7 +58,13 @@ var EmojiNode = /*#__PURE__*/function (_PureComponent) {
         },
         emojiProvider: providers.emojiProvider,
         showTooltip: showTooltip,
-        fitToHeight: fitToHeight
+        fitToHeight: fitToHeight,
+        optimistic: true,
+        optimisticImageURL: resourceConfig === null || resourceConfig === void 0 ? void 0 : (_resourceConfig$optim = resourceConfig.optimisticImageApi) === null || _resourceConfig$optim === void 0 ? void 0 : _resourceConfig$optim.getUrl({
+          id: id,
+          fallback: fallback,
+          shortName: shortName
+        })
       });
     });
 

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

@@ -13,7 +13,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 var messages = defineMessages({
   collapseNode: {
     id: 'fabric.editor.collapseNode',
@@ -37,16 +36,16 @@ export var messages = defineMessages({
   }
 });
 var BORDER_RADIUS = gridSize() / 2;
-var EXPAND_COLLAPSED_BACKGROUND = token('color.background.neutral.subtle', 'transparent');
+var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 var 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))"
 });
-var EXPAND_FOCUSED_BORDER_COLOR = token('color.border.focused', colors.B300);
+var EXPAND_FOCUSED_BORDER_COLOR = "var(--ds-border-focused, ".concat(colors.B300, ")");
 var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
 var EXPAND_EXPANDED_BORDER_COLOR = themed({
-  light: token('color.border', colors.N40A),
-  dark: token('color.border', colors.DN50)
+  light: "var(--ds-border, ".concat(colors.N40A, ")"),
+  dark: "var(--ds-border, ".concat(colors.DN50, ")")
 });
 export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
   var children = _ref.children,
@@ -60,9 +59,9 @@ export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
 
 var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), themed({
-    light: token('color.icon', colors.N90),
-    dark: token('color.icon', '#d9dde3')
-  })(props), gridSize() / 2, token('color.background.neutral.subtle.hovered', colors.N30A), akEditorSwoopCubicBezier);
+    light: "var(--ds-icon, ".concat(colors.N90, ")"),
+    dark: "var(--ds-icon, #d9dde3)"
+  })(props), gridSize() / 2, "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), akEditorSwoopCubicBezier);
 };
 
 var expandIconWrapperExpandedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
@@ -89,8 +88,8 @@ var containerStyles = function containerStyles(styleProps) {
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function (themeProps) {
     return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, gridSize(), themed({
-      light: token('color.border', colors.N50A),
-      dark: token('color.border', colors.DN50)
+      light: "var(--ds-border, ".concat(colors.N50A, ")"),
+      dark: "var(--ds-border, ".concat(colors.DN50, ")")
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
   };
 };
@@ -103,18 +102,18 @@ var contentStyles = function contentStyles(styleProps) {
 
 var titleInputStyles = function titleInputStyles(props) {
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", "px;\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, themed({
-    light: token('color.text.subtlest', colors.N200A),
-    dark: token('color.text.subtlest', colors.DN600)
+    light: "var(--ds-text-subtlest, ".concat(colors.N200A, ")"),
+    dark: "var(--ds-text-subtlest, ".concat(colors.DN600, ")")
   })(props), gridSize() / 2, themed({
-    light: token('color.text.subtlest', colors.N200A),
-    dark: token('color.text.subtlest', colors.DN600)
+    light: "var(--ds-text-subtlest, ".concat(colors.N200A, ")"),
+    dark: "var(--ds-text-subtlest, ".concat(colors.DN600, ")")
   })(props));
 };
 
 var titleContainerStyles = function titleContainerStyles(props) {
   return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n  // Prevent browser selection being inside the title container\n  user-select: none;\n\n  &:focus {\n    outline: 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), themed({
-    light: token('color.text.subtle', colors.N300A),
-    dark: token('color.text.subtle', colors.DN600)
+    light: "var(--ds-text-subtle, ".concat(colors.N300A, ")"),
+    dark: "var(--ds-text-subtle, ".concat(colors.DN600, ")")
   })(props));
 };
 

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

@@ -9,12 +9,11 @@ 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';
-var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.text.danger', R400));
-var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.text.success', G400));
+var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(R400, ")"));
+var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-success, ".concat(G400, ")"));
 
 var messageStyle = function messageStyle(props) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), h200(props), token('color.text.subtlest', N200), gridSize() / 2);
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), h200(props), "var(--ds-text-subtlest, ".concat(N200, ")"), gridSize() / 2);
 };
 
 var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 4px;\n"])));