@atlaskit/renderer 94.0.0 → 96.0.0

package/dist/cjs/render-document.js

@@ -1,10 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderDocument = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+
 var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 
 var _validator = require("@atlaskit/editor-common/validator");
@@ -17,7 +23,7 @@ var _events = require("./analytics/events");
 
 var _unsupportedContent = require("./analytics/unsupported-content");
 
-var _adfUtils = require("@atlaskit/adf-utils");
+var _transforms = require("@atlaskit/adf-utils/transforms");
 
 var SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
 
@@ -32,6 +38,138 @@ var withStopwatch = function withStopwatch(cb) {
   };
 };
 
+var _validation = function _validation(doc, schema, adfStage, useSpecBasedValidator, dispatchAnalyticsEvent) {
+  var result;
+
+  if (useSpecBasedValidator) {
+    // link mark on mediaSingle is deprecated, need to move link mark to child media node
+    // https://product-fabric.atlassian.net/browse/ED-14043
+    var _transformMediaLinkMa = (0, _transforms.transformMediaLinkMarks)(doc),
+        transformedAdf = _transformMediaLinkMa.transformedAdf,
+        isTransformed = _transformMediaLinkMa.isTransformed;
+
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: _enums.ACTION.MEDIA_LINK_TRANSFORMED,
+        actionSubject: _enums.ACTION_SUBJECT.RENDERER,
+        eventType: _enums.EVENT_TYPE.OPERATIONAL
+      });
+    }
+
+    result = (0, _utils.validateADFEntity)(schema, transformedAdf || doc, dispatchAnalyticsEvent);
+  } else {
+    result = (0, _validator.getValidDocument)(doc, schema, adfStage);
+  }
+
+  if (!result) {
+    return result;
+  } // ProseMirror always require a child under doc
+
+
+  if (result.type === 'doc' && useSpecBasedValidator) {
+    if (Array.isArray(result.content) && result.content.length === 0) {
+      result.content.push({
+        type: 'paragraph',
+        content: []
+      });
+    } // Just making sure doc is always valid
+
+
+    if (!result.version) {
+      result.version = 1;
+    }
+  }
+
+  return result;
+};
+
+var memoValidation = (0, _memoizeOne.default)(_validation, function (newArgs, lastArgs) {
+  var _newArgs = (0, _slicedToArray2.default)(newArgs, 4),
+      newDoc = _newArgs[0],
+      newSchema = _newArgs[1],
+      newADFStage = _newArgs[2],
+      newUseSpecValidator = _newArgs[3];
+
+  var _lastArgs = (0, _slicedToArray2.default)(lastArgs, 4),
+      oldDoc = _lastArgs[0],
+      oldSchema = _lastArgs[1],
+      oldADFStage = _lastArgs[2],
+      oldUseSpecValidator = _lastArgs[3]; // we're ignoring changes to dispatchAnalyticsEvent in this check
+
+
+  var result = areDocsEqual(newDoc, oldDoc) && newSchema === oldSchema && newADFStage === oldADFStage && newUseSpecValidator === oldUseSpecValidator;
+  return result;
+});
+
+var areDocsEqual = function areDocsEqual(docA, docB) {
+  if (docA === docB) {
+    return true;
+  }
+
+  if (typeof docA === 'string' && typeof docB === 'string') {
+    return docA === docB;
+  } // PMNode
+
+
+  if (docA.type && docA.toJSON && docB.type && docB.toJSON) {
+    return JSON.stringify(docA.toJSON()) === JSON.stringify(docB.toJSON());
+  } // Object
+
+
+  return JSON.stringify(docA) === JSON.stringify(docB);
+};
+
+var _serializeFragment = function _serializeFragment(serializer, doc) {
+  return serializer.serializeFragment(doc.content);
+};
+
+var memoSerializeFragment = (0, _memoizeOne.default)(_serializeFragment, function (newArgs, lastArgs) {
+  var _newArgs2 = (0, _slicedToArray2.default)(newArgs, 2),
+      newSerializer = _newArgs2[0],
+      newDoc = _newArgs2[1];
+
+  var _lastArgs2 = (0, _slicedToArray2.default)(lastArgs, 2),
+      oldSerializer = _lastArgs2[0],
+      oldDoc = _lastArgs2[1];
+
+  return newSerializer === oldSerializer && areDocsEqual(newDoc, oldDoc);
+});
+
+var _createNodeAndCheck = function _createNodeAndCheck(schema, doc, dispatchAnalyticsEvent) {
+  var pmNode = schema.nodeFromJSON(doc);
+
+  try {
+    pmNode.check();
+  } catch (err) {
+    if (dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: _enums.ACTION.INVALID_PROSEMIRROR_DOCUMENT,
+        actionSubject: _enums.ACTION_SUBJECT.RENDERER,
+        attributes: {
+          platform: _events.PLATFORM.WEB,
+          error: err === null || err === void 0 ? void 0 : err.toString()
+        },
+        eventType: _enums.EVENT_TYPE.OPERATIONAL
+      });
+    }
+  }
+
+  return pmNode;
+};
+
+var memoCreateNodeAndCheck = (0, _memoizeOne.default)(_createNodeAndCheck, function (newArgs, lastArgs) {
+  // ignore dispatchAnalyticsEvent
+  var _newArgs3 = (0, _slicedToArray2.default)(newArgs, 2),
+      newSchema = _newArgs3[0],
+      newDoc = _newArgs3[1];
+
+  var _lastArgs3 = (0, _slicedToArray2.default)(lastArgs, 2),
+      oldSchema = _lastArgs3[0],
+      oldDoc = _lastArgs3[1];
+
+  return newSchema === oldSchema && areDocsEqual(newDoc, oldDoc);
+});
+
 var renderDocument = function renderDocument(doc, serializer) {
   var schema = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _schemaDefault.defaultSchema;
   var adfStage = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'final';
@@ -45,25 +183,7 @@ var renderDocument = function renderDocument(doc, serializer) {
   };
 
   var _withStopwatch = withStopwatch(function () {
-    if (useSpecBasedValidator) {
-      // link mark on mediaSingle is deprecated, need to move link mark to child media node
-      // https://product-fabric.atlassian.net/browse/ED-14043
-      var _transformMediaLinkMa = (0, _adfUtils.transformMediaLinkMarks)(doc),
-          transformedAdf = _transformMediaLinkMa.transformedAdf,
-          isTransformed = _transformMediaLinkMa.isTransformed;
-
-      if (isTransformed && dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          action: _enums.ACTION.MEDIA_LINK_TRANSFORMED,
-          actionSubject: _enums.ACTION_SUBJECT.RENDERER,
-          eventType: _enums.EVENT_TYPE.OPERATIONAL
-        });
-      }
-
-      return (0, _utils.validateADFEntity)(schema, transformedAdf || doc, dispatchAnalyticsEvent);
-    }
-
-    return (0, _validator.getValidDocument)(doc, schema, adfStage);
+    return memoValidation(doc, schema, adfStage, useSpecBasedValidator, dispatchAnalyticsEvent);
   }),
       validDoc = _withStopwatch.output,
       sanitizeTime = _withStopwatch.time; // save sanitize time to stats
@@ -76,43 +196,10 @@ var renderDocument = function renderDocument(doc, serializer) {
       stat: stat,
       result: null
     };
-  } // ProseMirror always require a child under doc
-
-
-  if (validDoc.type === 'doc' && useSpecBasedValidator) {
-    if (Array.isArray(validDoc.content) && validDoc.content.length === 0) {
-      validDoc.content.push({
-        type: 'paragraph',
-        content: []
-      });
-    } // Just making sure doc is always valid
-
-
-    if (!validDoc.version) {
-      validDoc.version = 1;
-    }
   }
 
   var _withStopwatch2 = withStopwatch(function () {
-    var pmNode = schema.nodeFromJSON(validDoc);
-
-    try {
-      pmNode.check();
-    } catch (err) {
-      if (dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          action: _enums.ACTION.INVALID_PROSEMIRROR_DOCUMENT,
-          actionSubject: _enums.ACTION_SUBJECT.RENDERER,
-          attributes: {
-            platform: _events.PLATFORM.WEB,
-            error: err === null || err === void 0 ? void 0 : err.toString()
-          },
-          eventType: _enums.EVENT_TYPE.OPERATIONAL
-        });
-      }
-    }
-
-    return pmNode;
+    return memoCreateNodeAndCheck(schema, validDoc, dispatchAnalyticsEvent);
   }),
       node = _withStopwatch2.output,
       buildTreeTime = _withStopwatch2.time; // save build tree time to stats
@@ -121,7 +208,7 @@ var renderDocument = function renderDocument(doc, serializer) {
   stat.buildTreeTime = buildTreeTime;
 
   var _withStopwatch3 = withStopwatch(function () {
-    return serializer.serializeFragment(node.content);
+    return memoSerializeFragment(serializer, node);
   }),
       result = _withStopwatch3.output,
       serializeTime = _withStopwatch3.time; // save serialize tree time to stats

package/dist/cjs/ui/MediaCard.js

@@ -29,7 +29,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _adfUtils = require("@atlaskit/adf-utils");
+var _traverse = require("@atlaskit/adf-utils/traverse");
 
 var _mediaCard = require("@atlaskit/media-card");
 
@@ -56,7 +56,7 @@ var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(doc) {
     return [];
   }
 
-  return (0, _adfUtils.filter)(doc, function (node) {
+  return (0, _traverse.filter)(doc, function (node) {
     return node.type === 'media';
   }).reduce(function (identifierList, mediaNode) {
     if (mediaNode.attrs) {

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -19,9 +19,7 @@ var _utils = require("@atlaskit/editor-common/utils");
  *
  * More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
  */
-function BreakoutSSRInlineScript(_ref) {
-  var allowDynamicTextSizing = _ref.allowDynamicTextSizing;
-
+function BreakoutSSRInlineScript() {
   /**
    * Should only inline this script while SSR,
    * not needed on the client side.
@@ -31,7 +29,7 @@ function BreakoutSSRInlineScript(_ref) {
   }
 
   var id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
-  var context = createBreakoutInlineScript(id, allowDynamicTextSizing);
+  var context = createBreakoutInlineScript(id);
   return /*#__PURE__*/_react.default.createElement("script", {
     "data-breakout-script-id": id,
     dangerouslySetInnerHTML: {
@@ -40,14 +38,14 @@ function BreakoutSSRInlineScript(_ref) {
   });
 }
 
-function createBreakoutInlineScript(id, allowDynamicTextSizing) {
-  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", ").concat(allowDynamicTextSizing, ", breakoutConsts);\n  })(window);\n");
+function createBreakoutInlineScript(id) {
+  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts);\n  })(window);\n");
 }
 
 var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n");
 exports.breakoutInlineScriptContext = breakoutInlineScriptContext;
 
-function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
+function applyBreakoutAfterSSR(id, breakoutConsts) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
   var WIDE_LAYOUT_MODES = ['full-width', 'wide'];
 
@@ -101,7 +99,7 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
           // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
 
           if (node.classList.contains('pm-table-container')) {
-            var lineLength = breakoutConsts.calcLineLength(renderer.offsetWidth, allowDynamicTextSizing);
+            var lineLength = breakoutConsts.calcLineLength();
             var left = lineLength / 2 - parseInt(width) / 2;
 
             if (left < 0) {

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

@@ -31,7 +31,7 @@ var _react2 = require("@emotion/react");
 
 var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 
-var _adfUtils = require("@atlaskit/adf-utils");
+var _traverse = require("@atlaskit/adf-utils/traverse");
 
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
@@ -132,17 +132,13 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         createAnalyticsEvent(event).fire(channel);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSchema", function () {
-      var _this$props = _this.props,
-          schema = _this$props.schema,
-          adfStage = _this$props.adfStage;
-
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSchema", (0, _memoizeOne.default)(function (schema, adfStage) {
       if (schema) {
         return schema;
       }
 
       return (0, _schemaDefault.getSchemaBasedOnStage)(adfStage);
-    });
+    }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDownEditView", function () {
       // When the user is deselecting text on the screen by clicking, if they are clicking outside
       // the current selection, by the time the onclick handler is called the window.getSelection()
@@ -228,7 +224,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
               platform: _events.PLATFORM.WEB,
               duration: duration,
               ttfb: (0, _utils.getResponseEndTime)(),
-              nodes: (0, _adfUtils.reduce)(_this2.props.document, function (acc, node) {
+              nodes: (0, _traverse.reduce)(_this2.props.document, function (acc, node) {
                 acc[node.type] = (acc[node.type] || 0) + 1;
                 return acc;
               }, {}),
@@ -270,7 +266,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         appearance: props.appearance,
         disableHeadingIDs: props.disableHeadingIDs,
         disableActions: props.disableActions,
-        allowDynamicTextSizing: props.allowDynamicTextSizing,
         allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
         allowColumnSorting: props.allowColumnSorting,
         fireAnalyticsEvent: this.fireAnalyticsEvent,
@@ -293,22 +288,21 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this3 = this;
 
-      var _this$props2 = this.props,
-          document = _this$props2.document,
-          onComplete = _this$props2.onComplete,
-          onError = _this$props2.onError,
-          appearance = _this$props2.appearance,
-          adfStage = _this$props2.adfStage,
-          allowDynamicTextSizing = _this$props2.allowDynamicTextSizing,
-          truncated = _this$props2.truncated,
-          maxHeight = _this$props2.maxHeight,
-          fadeOutHeight = _this$props2.fadeOutHeight,
-          enableSsrInlineScripts = _this$props2.enableSsrInlineScripts,
-          allowHeadingAnchorLinks = _this$props2.allowHeadingAnchorLinks,
-          allowPlaceholderText = _this$props2.allowPlaceholderText,
-          allowColumnSorting = _this$props2.allowColumnSorting,
-          allowCopyToClipboard = _this$props2.allowCopyToClipboard,
-          allowCustomPanels = _this$props2.allowCustomPanels;
+      var _this$props = this.props,
+          document = _this$props.document,
+          onComplete = _this$props.onComplete,
+          onError = _this$props.onError,
+          appearance = _this$props.appearance,
+          adfStage = _this$props.adfStage,
+          truncated = _this$props.truncated,
+          maxHeight = _this$props.maxHeight,
+          fadeOutHeight = _this$props.fadeOutHeight,
+          enableSsrInlineScripts = _this$props.enableSsrInlineScripts,
+          allowHeadingAnchorLinks = _this$props.allowHeadingAnchorLinks,
+          allowPlaceholderText = _this$props.allowPlaceholderText,
+          allowColumnSorting = _this$props.allowColumnSorting,
+          allowCopyToClipboard = _this$props.allowCopyToClipboard,
+          allowCustomPanels = _this$props.allowCustomPanels;
       var allowNestedHeaderLinks = (0, _links.isNestedHeaderLinksEnabled)(allowHeadingAnchorLinks);
       /**
        * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -358,7 +352,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       try {
         var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
 
-        var schema = this.getSchema();
+        var schema = this.getSchema(this.props.schema, this.props.adfStage);
 
         var _renderDocument = (0, _.renderDocument)(document, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
             result = _renderDocument.result,
@@ -381,7 +375,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           }
         }, (0, _react2.jsx)(_SmartCardStorage.Provider, null, (0, _react2.jsx)(RendererWrapper, {
           appearance: appearance,
-          dynamicTextSizing: !!allowDynamicTextSizing,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
           allowCopyToClipboard: allowCopyToClipboard,
@@ -390,9 +383,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView
-        }, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, {
-          allowDynamicTextSizing: !!allowDynamicTextSizing
-        }) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
+        }, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, null) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
@@ -417,7 +408,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
 
         return (0, _react2.jsx)(RendererWrapper, {
           appearance: appearance,
-          dynamicTextSizing: !!allowDynamicTextSizing,
           allowCopyToClipboard: allowCopyToClipboard,
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
@@ -473,7 +463,6 @@ var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
 
 var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   var allowColumnSorting = props.allowColumnSorting,
-      dynamicTextSizing = props.dynamicTextSizing,
       allowNestedHeaderLinks = props.allowNestedHeaderLinks,
       innerRef = props.innerRef,
       appearance = props.appearance,
@@ -483,8 +472,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper"
   }, (0, _react2.jsx)(_ui.BaseTheme, {
-    dynamicTextSizing: dynamicTextSizing,
-    baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
+    baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
   }, (0, _react2.jsx)("div", {
     ref: innerRef,
     onClick: onClick,

package/dist/cjs/ui/Renderer/style.js

@@ -21,6 +21,8 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _typography = require("@atlaskit/theme/typography");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _ui = require("@atlaskit/editor-common/ui");
@@ -94,7 +96,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
 
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      &.", "\n        .", " {\n        cursor: default;\n      }\n\n      .", " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .", " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .", " {\n          opacity: 1;\n        }\n      }\n    }\n  "])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _styles.tableCellPadding, colors.B300, headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-of-type + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-of-type + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      &.", "\n        .", " {\n        cursor: default;\n      }\n\n      .", " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .", " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .", " {\n          opacity: 1;\n        }\n      }\n    }\n  "])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _styles.tableCellPadding, (0, _tokens.token)('color.border.focused', colors.B300), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER);
 };
 
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
@@ -124,42 +126,42 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     var themeProps = {
       theme: theme
     };
-    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", "px;\n    line-height: 1.5rem;\n    color: ", ";\n\n    .", "::after {\n      // we add a clearfix after ak-renderer-document in order to\n      // contain internal floats (such as media images that are \"wrap-left\")\n      // to just the renderer (and not spill outside of it)\n      content: '';\n      visibility: hidden;\n      display: block;\n      height: 0;\n      clear: both;\n    }\n\n    ", "\n    ", "\n\n    & h1 {\n      ", "\n    }\n\n    & h2 {\n      ", "\n    }\n\n    & h3 {\n      ", "\n    }\n\n    & h4 {\n      ", "\n    }\n\n    & h5 {\n      ", "\n    }\n\n    & h6 {\n      ", "\n    }\n\n    & span.akActionMark {\n      color: ", ";\n      text-decoration: none;\n\n      &:hover {\n        color: ", ";\n        text-decoration: underline;\n      }\n    }\n\n    & span.akActionMark {\n      cursor: pointer;\n    }\n\n    & span[data-placeholder] {\n      color: ", ";\n    }\n\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", "\n\n    & .UnknownBlock {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: 400;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n\n    & span.date-node {\n      background: ", ";\n      border-radius: ", "px;\n      color: ", ";\n      padding: 2px 4px;\n      margin: 0 1px;\n      transition: background 0.3s;\n    }\n\n    & span.date-node-highlighted {\n      background: ", ";\n      color: ", ";\n    }\n\n    & .renderer-image {\n      max-width: 100%;\n      display: block;\n      margin: ", "px 0;\n    }\n\n    .", ".rich-media-wrapped\n      + .", ":not(.rich-media-wrapped) {\n      clear: both;\n    }\n\n    & .code-block,\n    & blockquote,\n    & hr,\n    & > div > div:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped\n      + .rich-media-wrapped\n      + *:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n    .", ".image-align-start,\n      .", ".image-center,\n      .", ".image-align-end {\n      clear: both;\n    }\n\n    & .rich-media-wrapped {\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        margin-top: 8px;\n      }\n    }\n\n    ", "\n    /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    /* Breakout for tables and extensions */\n    .", " > {\n      * .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n\n      * .", " {\n        overflow-x: auto;\n      }\n\n      & .", ":first-child {\n        margin-top: 0;\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n      }\n\n      .", " {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n\n      .", " {\n        overflow-x: auto;\n      }\n    }\n\n    ", "\n\n    .", " .", " {\n      z-index: 0;\n      transition: all 0.1s linear;\n      display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n      /** Shadow overrides */\n      &.", "::after,\n        &.", "::before {\n        top: ", "px;\n        height: calc(100% - ", "px);\n        z-index: ", ";\n      }\n\n      /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n      table {\n        height: 1px; /* will be ignored */\n        ", ";\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      table tr:first-child {\n        height: 100%;\n\n        td,\n        th {\n          position: relative;\n        }\n      }\n\n      table[data-number-column='true'] {\n        .", " {\n          background-color: ", ";\n          border-right: 1px solid\n            ", ";\n          width: ", "px;\n          text-align: center;\n          color: ", ";\n          font-size: ", ";\n        }\n\n        .fixed .", " {\n          border-right: 0px none;\n        }\n      }\n    }\n\n    tr[data-header-row].fixed {\n      position: fixed !important;\n      display: flex;\n      overflow: hidden;\n      z-index: ", ";\n\n      border-right: 1px solid\n        ", ";\n      border-bottom: 1px solid\n        ", ";\n\n      /* this is to compensate for the table border */\n      transform: translateX(-1px);\n    }\n\n    .sticky > th {\n      z-index: ", ";\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* Make the number column header sticky */\n    .sticky > td {\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n    .sticky th,\n    .sticky td {\n      box-shadow: 0px 1px\n          ", ",\n        0px -0.5px ", ",\n        inset -1px 0px ", ",\n        0px -1px ", ";\n    }\n\n    /* this will remove jumpiness caused in Chrome for sticky headers */\n    .fixed + tr {\n      min-height: 0px;\n    }\n\n    /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n    & .code-block {\n      max-width: 100%;\n      /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n      /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n      display: -ms-grid;\n      display: grid;\n      -ms-grid-columns: auto 1fr;\n      /* stylelint-enable */\n\n      grid-template-columns: minmax(0, 1fr);\n      position: relative;\n      border-radius: ", "px;\n\n      /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n      word-wrap: normal;\n\n      & > span {\n        /* stylelint-disable value-no-vendor-prefix */\n        -ms-grid-row: 1;\n        -ms-grid-column: 2;\n        /* stylelint-enable */\n        grid-column: 1;\n      }\n    }\n\n    & .MediaGroup,\n    & .code-block {\n      margin-top: ", ";\n\n      &:first-child {\n        margin-top: 0;\n      }\n\n      &:hover button.copy-to-clipboard,\n      .copy-to-clipboard:focus {\n        opacity: 1;\n        position: absolute;\n        height: 32px;\n        width: 32px;\n        right: 6px;\n        top: 4px;\n        padding: 2px;\n      }\n    }\n\n    ", ";\n    & [data-layout-section] {\n      margin-top: ", "px;\n      & > div + div {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        & > div + div {\n          margin-left: 0;\n        }\n      }\n    }\n  "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
-      light: colors.N800,
-      dark: '#B8C7E0'
-    })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-      light: colors.N30A,
-      dark: colors.DN70
+    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: ", "px;\n    line-height: 1.5rem;\n    color: ", ";\n\n    .", "::after {\n      // we add a clearfix after ak-renderer-document in order to\n      // contain internal floats (such as media images that are \"wrap-left\")\n      // to just the renderer (and not spill outside of it)\n      content: '';\n      visibility: hidden;\n      display: block;\n      height: 0;\n      clear: both;\n    }\n\n    ", "\n    ", "\n\n    & h1 {\n      ", "\n    }\n\n    & h2 {\n      ", "\n    }\n\n    & h3 {\n      ", "\n    }\n\n    & h4 {\n      ", "\n    }\n\n    & h5 {\n      ", "\n    }\n\n    & h6 {\n      ", "\n    }\n\n    & span.akActionMark {\n      color: ", ";\n      text-decoration: none;\n\n      &:hover {\n        color: ", ";\n        text-decoration: underline;\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    & span.akActionMark {\n      cursor: pointer;\n    }\n\n    & span[data-placeholder] {\n      color: ", ";\n    }\n\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", "\n\n    & .UnknownBlock {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: 400;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n\n    & span.date-node {\n      background: ", ";\n      border-radius: ", "px;\n      color: ", ";\n      padding: 2px 4px;\n      margin: 0 1px;\n      transition: background 0.3s;\n    }\n\n    & span.date-node-highlighted {\n      background: ", ";\n      color: ", ";\n    }\n\n    & .renderer-image {\n      max-width: 100%;\n      display: block;\n      margin: ", "px 0;\n    }\n\n    .", ".rich-media-wrapped\n      + .", ":not(.rich-media-wrapped) {\n      clear: both;\n    }\n\n    & .code-block,\n    & blockquote,\n    & hr,\n    & > div > div:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped\n      + .rich-media-wrapped\n      + *:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n    .", ".image-align-start,\n      .", ".image-center,\n      .", ".image-align-end {\n      clear: both;\n    }\n\n    & .rich-media-wrapped {\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        margin-top: 8px;\n      }\n    }\n\n    ", "\n    /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    /* Breakout for tables and extensions */\n    .", " > {\n      * .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n\n      * .", " {\n        overflow-x: auto;\n      }\n\n      & .", ":first-child {\n        margin-top: 0;\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n      }\n\n      .", " {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n\n      .", " {\n        overflow-x: auto;\n      }\n\n      .", "\n        .", " {\n        display: flex;\n      }\n    }\n\n    ", "\n\n    .", " .", " {\n      z-index: 0;\n      transition: all 0.1s linear;\n      display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n      /** Shadow overrides */\n      &.", "::after,\n        &.", "::before {\n        top: ", "px;\n        height: calc(100% - ", "px);\n        z-index: ", ";\n      }\n\n      &\n        .", ",\n        &\n        .", " {\n        height: calc(100% - ", "px);\n      }\n\n      /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n      table {\n        height: 1px; /* will be ignored */\n        ", ";\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      table tr:first-of-type {\n        height: 100%;\n\n        td,\n        th {\n          position: relative;\n        }\n      }\n\n      table[data-number-column='true'] {\n        .", " {\n          background-color: ", ";\n          border-right: 1px solid\n            ", ";\n          width: ", "px;\n          text-align: center;\n          color: ", ";\n          font-size: ", ";\n        }\n\n        .fixed .", " {\n          border-right: 0px none;\n        }\n      }\n    }\n\n    tr[data-header-row].fixed {\n      position: fixed !important;\n      display: flex;\n      overflow: hidden;\n      z-index: ", ";\n\n      border-right: 1px solid\n        ", ";\n      border-bottom: 1px solid\n        ", ";\n\n      /* this is to compensate for the table border */\n      transform: translateX(-1px);\n    }\n\n    .sticky > th {\n      z-index: ", ";\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* Make the number column header sticky */\n    .sticky > td {\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n    .sticky th,\n    .sticky td {\n      box-shadow: 0px 1px\n          ", ",\n        0px -0.5px ", ",\n        inset -1px 0px ", ",\n        0px -1px ", ";\n    }\n\n    /* this will remove jumpiness caused in Chrome for sticky headers */\n    .fixed + tr {\n      min-height: 0px;\n    }\n\n    /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n    & .code-block {\n      max-width: 100%;\n      /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n      /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n      display: -ms-grid;\n      display: grid;\n      -ms-grid-columns: auto 1fr;\n      /* stylelint-enable */\n\n      grid-template-columns: minmax(0, 1fr);\n      position: relative;\n      border-radius: ", "px;\n\n      /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n      word-wrap: normal;\n\n      & > span {\n        /* stylelint-disable value-no-vendor-prefix */\n        -ms-grid-row: 1;\n        -ms-grid-column: 2;\n        /* stylelint-enable */\n        grid-column: 1;\n      }\n    }\n\n    & .MediaGroup,\n    & .code-block {\n      margin-top: ", ";\n\n      &:first-child {\n        margin-top: 0;\n      }\n\n      &:hover button.copy-to-clipboard,\n      .copy-to-clipboard:focus {\n        opacity: 1;\n        position: absolute;\n        height: 32px;\n        width: 32px;\n        right: 6px;\n        top: 4px;\n        padding: 2px;\n      }\n    }\n\n    ", ";\n    & [data-layout-section] {\n      margin-top: ", "px;\n      & > div + div {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        & > div + div {\n          margin-left: 0;\n        }\n      }\n    }\n  "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
+      light: (0, _tokens.token)('color.text', colors.N800),
+      dark: (0, _tokens.token)('color.text', '#B8C7E0')
+    })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), (0, _tokens.token)('color.link', colors.B400), (0, _tokens.token)('color.link', colors.B300), (0, _tokens.token)('color.link.pressed', colors.B500), colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+      light: (0, _tokens.token)('color.background.neutral', colors.N30A),
+      dark: (0, _tokens.token)('color.background.neutral', colors.DN70)
     })(themeProps), (0, _constants.borderRadius)(), (0, _components.themed)({
-      light: colors.N800,
-      dark: colors.DN600
-    })(themeProps), colors.R50, colors.R500, (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
-      light: _editorSharedStyles.akEditorTableToolbar,
-      dark: _editorSharedStyles.akEditorTableToolbarDark
+      light: (0, _tokens.token)('color.text', colors.N800),
+      dark: (0, _tokens.token)('color.text', colors.DN600)
+    })(themeProps), (0, _tokens.token)('color.background.danger', colors.R50), (0, _tokens.token)('color.text.danger', colors.R500), (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
+      light: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbar),
+      dark: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbarDark)
     })(themeProps), (0, _components.themed)({
-      light: _editorSharedStyles.akEditorTableBorder,
-      dark: _editorSharedStyles.akEditorTableBorderDark
+      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
+      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
     })(themeProps), _editorSharedStyles.akEditorTableNumberColumnWidth, (0, _components.themed)({
-      light: colors.N200,
-      dark: colors.DN400
+      light: (0, _tokens.token)('color.text.subtlest', colors.N200),
+      dark: (0, _tokens.token)('color.text.subtlest', colors.DN400)
     })(themeProps), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
-      light: _editorSharedStyles.akEditorTableBorder,
-      dark: _editorSharedStyles.akEditorTableBorderDark
+      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
+      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
     })(themeProps), (0, _components.themed)({
-      light: _editorSharedStyles.akEditorTableBorder,
-      dark: _editorSharedStyles.akEditorTableBorderDark
+      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
+      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
     })(themeProps), _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
-      light: _editorSharedStyles.akEditorTableBorder,
-      dark: _editorSharedStyles.akEditorTableBorderDark
+      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
+      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
     })(themeProps), (0, _components.themed)({
-      light: _editorSharedStyles.akEditorTableBorder,
-      dark: _editorSharedStyles.akEditorTableBorderDark
+      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
+      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
     })(themeProps), (0, _components.themed)({
-      light: _editorSharedStyles.akEditorTableToolbar,
-      dark: _editorSharedStyles.akEditorTableToolbarDark
+      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbar),
+      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbarDark)
     })(themeProps), (0, _components.themed)({
-      light: _editorSharedStyles.akEditorTableToolbar,
-      dark: _editorSharedStyles.akEditorTableToolbarDark
+      light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbar),
+      dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbarDark)
     })(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
   };
 };

package/dist/cjs/ui/Renderer/truncated-wrapper.js

@@ -23,6 +23,8 @@ var _react = require("@emotion/react");
 
 var _react2 = require("react");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -30,7 +32,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      rgba(255, 255, 255, 0),\n      ", "\n    );\n  }\n"])), maxHeight, top, backgroundColor);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      ", ",\n      ", "\n    );\n  }\n"])), maxHeight, top, (0, _tokens.token)('color.background.neutral.subtle', 'rgba(255, 255, 255, 0)'), backgroundColor);
 };
 
 var FadeOut = function FadeOut(props) {
@@ -53,7 +55,8 @@ var TruncatedWrapper = /*#__PURE__*/function (_Component) {
   function TruncatedWrapper(props) {
     (0, _classCallCheck2.default)(this, TruncatedWrapper);
     return _super.call(this, props);
-  }
+  } // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
+
 
   (0, _createClass2.default)(TruncatedWrapper, [{
     key: "render",
@@ -64,7 +67,7 @@ var TruncatedWrapper = /*#__PURE__*/function (_Component) {
           _this$props$fadeHeigh = _this$props.fadeHeight,
           fadeHeight = _this$props$fadeHeigh === void 0 ? 24 : _this$props$fadeHeigh,
           _this$props$backgroun = _this$props.backgroundColor,
-          backgroundColor = _this$props$backgroun === void 0 ? 'white' : _this$props$backgroun,
+          backgroundColor = _this$props$backgroun === void 0 ? (0, _tokens.token)('elevation.surface', 'white') : _this$props$backgroun,
           children = _this$props.children;
       return (0, _react.jsx)(FadeOut, {
         height: height,