@atlaskit/renderer 94.0.0 → 96.0.0

package/dist/es2019/render-document.js

@@ -1,10 +1,11 @@
+import memoizeOne from 'memoize-one';
 import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { getValidDocument } from '@atlaskit/editor-common/validator';
 import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaskit/editor-common/utils';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from './analytics/enums';
 import { PLATFORM } from './analytics/events';
 import { trackUnsupportedContentLevels } from './analytics/unsupported-content';
-import { transformMediaLinkMarks } from '@atlaskit/adf-utils';
+import { transformMediaLinkMarks } from '@atlaskit/adf-utils/transforms';
 const SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
 
 const withStopwatch = cb => {
@@ -18,6 +19,116 @@ const withStopwatch = cb => {
   };
 };
 
+const _validation = (doc, schema, adfStage, useSpecBasedValidator, dispatchAnalyticsEvent) => {
+  let 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
+    const {
+      transformedAdf,
+      isTransformed
+    } = transformMediaLinkMarks(doc);
+
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.MEDIA_LINK_TRANSFORMED,
+        actionSubject: ACTION_SUBJECT.RENDERER,
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+
+    result = validateADFEntity(schema, transformedAdf || doc, dispatchAnalyticsEvent);
+  } else {
+    result = 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;
+};
+
+const memoValidation = memoizeOne(_validation, (newArgs, lastArgs) => {
+  const [newDoc, newSchema, newADFStage, newUseSpecValidator] = newArgs;
+  const [oldDoc, oldSchema, oldADFStage, oldUseSpecValidator] = lastArgs; // we're ignoring changes to dispatchAnalyticsEvent in this check
+
+  const result = areDocsEqual(newDoc, oldDoc) && newSchema === oldSchema && newADFStage === oldADFStage && newUseSpecValidator === oldUseSpecValidator;
+  return result;
+});
+
+const 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);
+};
+
+const _serializeFragment = (serializer, doc) => {
+  return serializer.serializeFragment(doc.content);
+};
+
+const memoSerializeFragment = memoizeOne(_serializeFragment, (newArgs, lastArgs) => {
+  const [newSerializer, newDoc] = newArgs;
+  const [oldSerializer, oldDoc] = lastArgs;
+  return newSerializer === oldSerializer && areDocsEqual(newDoc, oldDoc);
+});
+
+const _createNodeAndCheck = (schema, doc, dispatchAnalyticsEvent) => {
+  const pmNode = schema.nodeFromJSON(doc);
+
+  try {
+    pmNode.check();
+  } catch (err) {
+    if (dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.INVALID_PROSEMIRROR_DOCUMENT,
+        actionSubject: ACTION_SUBJECT.RENDERER,
+        attributes: {
+          platform: PLATFORM.WEB,
+          error: err === null || err === void 0 ? void 0 : err.toString()
+        },
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+  }
+
+  return pmNode;
+};
+
+const memoCreateNodeAndCheck = memoizeOne(_createNodeAndCheck, (newArgs, lastArgs) => {
+  // ignore dispatchAnalyticsEvent
+  const [newSchema, newDoc] = newArgs;
+  const [oldSchema, oldDoc] = lastArgs;
+  return newSchema === oldSchema && areDocsEqual(newDoc, oldDoc);
+});
 export const renderDocument = (doc, serializer, schema = defaultSchema, adfStage = 'final', useSpecBasedValidator = false, rendererId = 'noid', dispatchAnalyticsEvent, unsupportedContentLevelsTracking, appearance) => {
   const stat = {
     sanitizeTime: 0
@@ -26,26 +137,7 @@ export const renderDocument = (doc, serializer, schema = defaultSchema, adfStage
     output: validDoc,
     time: sanitizeTime
   } = withStopwatch(() => {
-    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
-      const {
-        transformedAdf,
-        isTransformed
-      } = transformMediaLinkMarks(doc);
-
-      if (isTransformed && dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          action: ACTION.MEDIA_LINK_TRANSFORMED,
-          actionSubject: ACTION_SUBJECT.RENDERER,
-          eventType: EVENT_TYPE.OPERATIONAL
-        });
-      }
-
-      return validateADFEntity(schema, transformedAdf || doc, dispatchAnalyticsEvent);
-    }
-
-    return getValidDocument(doc, schema, adfStage);
+    return memoValidation(doc, schema, adfStage, useSpecBasedValidator, dispatchAnalyticsEvent);
   }); // save sanitize time to stats
 
   stat.sanitizeTime = sanitizeTime;
@@ -55,53 +147,22 @@ export const renderDocument = (doc, serializer, schema = defaultSchema, adfStage
       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;
-    }
   }
 
   const {
     output: node,
     time: buildTreeTime
   } = withStopwatch(() => {
-    const pmNode = schema.nodeFromJSON(validDoc);
-
-    try {
-      pmNode.check();
-    } catch (err) {
-      if (dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          action: ACTION.INVALID_PROSEMIRROR_DOCUMENT,
-          actionSubject: ACTION_SUBJECT.RENDERER,
-          attributes: {
-            platform: PLATFORM.WEB,
-            error: err === null || err === void 0 ? void 0 : err.toString()
-          },
-          eventType: EVENT_TYPE.OPERATIONAL
-        });
-      }
-    }
-
-    return pmNode;
+    return memoCreateNodeAndCheck(schema, validDoc, dispatchAnalyticsEvent);
   }); // save build tree time to stats
 
   stat.buildTreeTime = buildTreeTime;
   const {
     output: result,
     time: serializeTime
-  } = withStopwatch(() => serializer.serializeFragment(node.content)); // save serialize tree time to stats
+  } = withStopwatch(() => {
+    return memoSerializeFragment(serializer, node);
+  }); // save serialize tree time to stats
 
   stat.serializeTime = serializeTime;
 

package/dist/es2019/ui/MediaCard.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
-import { filter } from '@atlaskit/adf-utils';
+import { filter } from '@atlaskit/adf-utils/traverse';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client';
 import { withImageLoader } from '@atlaskit/editor-common/utils';

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

@@ -7,9 +7,7 @@ import { breakoutConsts } from '@atlaskit/editor-common/utils';
  * More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
  */
 
-export function BreakoutSSRInlineScript({
-  allowDynamicTextSizing
-}) {
+export function BreakoutSSRInlineScript() {
   /**
    * Should only inline this script while SSR,
    * not needed on the client side.
@@ -19,7 +17,7 @@ export function BreakoutSSRInlineScript({
   }
 
   const id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
-  const context = createBreakoutInlineScript(id, allowDynamicTextSizing);
+  const context = createBreakoutInlineScript(id);
   return /*#__PURE__*/React.createElement("script", {
     "data-breakout-script-id": id,
     dangerouslySetInnerHTML: {
@@ -27,11 +25,11 @@ export function BreakoutSSRInlineScript({
     }
   });
 }
-export function createBreakoutInlineScript(id, allowDynamicTextSizing) {
+export function createBreakoutInlineScript(id) {
   return `
   (function(window){
     ${breakoutInlineScriptContext};
-    (${applyBreakoutAfterSSR.toString()})("${id}", ${allowDynamicTextSizing}, breakoutConsts);
+    (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts);
   })(window);
 `;
 }
@@ -44,7 +42,7 @@ export const breakoutInlineScriptContext = `
   breakoutConsts.calcWideWidth = ${breakoutConsts.calcWideWidth.toString()};
 `;
 
-function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
+function applyBreakoutAfterSSR(id, breakoutConsts) {
   const MEDIA_NODE_TYPE = 'mediaSingle';
   const WIDE_LAYOUT_MODES = ['full-width', 'wide'];
 
@@ -98,7 +96,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')) {
-            const lineLength = breakoutConsts.calcLineLength(renderer.offsetWidth, allowDynamicTextSizing);
+            const lineLength = breakoutConsts.calcLineLength();
             const left = lineLength / 2 - parseInt(width) / 2;
 
             if (left < 0) {

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

@@ -6,7 +6,7 @@ import React, { Fragment, useContext, useLayoutEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
-import { reduce } from '@atlaskit/adf-utils';
+import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI } from '@atlaskit/editor-common/utils';
@@ -61,18 +61,13 @@ export class Renderer extends PureComponent {
       }
     });
 
-    _defineProperty(this, "getSchema", () => {
-      const {
-        schema,
-        adfStage
-      } = this.props;
-
+    _defineProperty(this, "getSchema", memoizeOne((schema, adfStage) => {
       if (schema) {
         return schema;
       }
 
       return getSchemaBasedOnStage(adfStage);
-    });
+    }));
 
     _defineProperty(this, "onMouseDownEditView", () => {
       // When the user is deselecting text on the screen by clicking, if they are clicking outside
@@ -197,7 +192,6 @@ export class Renderer extends PureComponent {
       appearance: props.appearance,
       disableHeadingIDs: props.disableHeadingIDs,
       disableActions: props.disableActions,
-      allowDynamicTextSizing: props.allowDynamicTextSizing,
       allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
       allowColumnSorting: props.allowColumnSorting,
       fireAnalyticsEvent: this.fireAnalyticsEvent,
@@ -223,7 +217,6 @@ export class Renderer extends PureComponent {
       onError,
       appearance,
       adfStage,
-      allowDynamicTextSizing,
       truncated,
       maxHeight,
       fadeOutHeight,
@@ -283,7 +276,7 @@ export class Renderer extends PureComponent {
     try {
       var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
 
-      const schema = this.getSchema();
+      const schema = this.getSchema(this.props.schema, this.props.adfStage);
       const {
         result,
         stat,
@@ -304,7 +297,6 @@ export class Renderer extends PureComponent {
         }
       }, jsx(SmartCardStorageProvider, null, jsx(RendererWrapper, {
         appearance: appearance,
-        dynamicTextSizing: !!allowDynamicTextSizing,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         allowColumnSorting: allowColumnSorting,
         allowCopyToClipboard: allowCopyToClipboard,
@@ -313,9 +305,7 @@ export class Renderer extends PureComponent {
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,
         onMouseDown: this.onMouseDownEditView
-      }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, {
-        allowDynamicTextSizing: !!allowDynamicTextSizing
-      }) : null, jsx(RendererActionsInternalUpdater, {
+      }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
         doc: pmDoc,
         schema: schema,
         onAnalyticsEvent: this.fireAnalyticsEvent
@@ -340,7 +330,6 @@ export class Renderer extends PureComponent {
 
       return jsx(RendererWrapper, {
         appearance: appearance,
-        dynamicTextSizing: !!allowDynamicTextSizing,
         allowCopyToClipboard: allowCopyToClipboard,
         allowPlaceholderText: allowPlaceholderText,
         allowColumnSorting: allowColumnSorting,
@@ -391,7 +380,6 @@ const RendererWithAnalytics = /*#__PURE__*/React.memo(props => jsx(FabricEditorA
 const RendererWrapper = /*#__PURE__*/React.memo(props => {
   const {
     allowColumnSorting,
-    dynamicTextSizing,
     allowNestedHeaderLinks,
     innerRef,
     appearance,
@@ -402,8 +390,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   return jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
   }, jsx(BaseTheme, {
-    dynamicTextSizing: dynamicTextSizing,
-    baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
+    baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx("div", {
     ref: innerRef,
     onClick: onClick,

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

@@ -3,11 +3,13 @@ import { themed } from '@atlaskit/theme/components';
 import { gridSize, fontFamily, fontSize, borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
+import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 export const FullPagePadding = 32;
 
 const getLineHeight = fontCode => headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
@@ -200,11 +202,11 @@ const tableSortableColumnStyle = ({
           margin-top: 0;
         }
 
-        > .ProseMirror-gapcursor.-right:first-child + * {
+        > .ProseMirror-gapcursor.-right:first-of-type + * {
           margin-top: 0;
         }
 
-        > .ProseMirror-gapcursor:first-child + span + * {
+        > .ProseMirror-gapcursor:first-of-type + span + * {
           margin-top: 0;
         }
 
@@ -213,7 +215,7 @@ const tableSortableColumnStyle = ({
             outline: unset;
           }
           &:focus-visible {
-            border-color: ${colors.B300};
+            border-color: ${token('color.border.focused', colors.B300)};
           }
         }
 
@@ -288,8 +290,8 @@ export const rendererStyles = wrapperProps => theme => {
     font-size: ${editorFontSize(themeProps)}px;
     line-height: 1.5rem;
     color: ${themed({
-    light: colors.N800,
-    dark: '#B8C7E0'
+    light: token('color.text', colors.N800),
+    dark: token('color.text', '#B8C7E0')
   })(themeProps)};
 
     .${RendererCssClassName.DOCUMENT}::after {
@@ -331,13 +333,17 @@ export const rendererStyles = wrapperProps => theme => {
     }
 
     & span.akActionMark {
-      color: ${colors.B400};
+      color: ${token('color.link', colors.B400)};
       text-decoration: none;
 
       &:hover {
-        color: ${colors.B300};
+        color: ${token('color.link', colors.B300)};
         text-decoration: underline;
       }
+
+      &:active {
+        color: ${token('color.link.pressed', colors.B500)};
+      }
     }
 
     & span.akActionMark {
@@ -373,13 +379,13 @@ export const rendererStyles = wrapperProps => theme => {
 
     & span.date-node {
       background: ${themed({
-    light: colors.N30A,
-    dark: colors.DN70
+    light: token('color.background.neutral', colors.N30A),
+    dark: token('color.background.neutral', colors.DN70)
   })(themeProps)};
       border-radius: ${borderRadius()}px;
       color: ${themed({
-    light: colors.N800,
-    dark: colors.DN600
+    light: token('color.text', colors.N800),
+    dark: token('color.text', colors.DN600)
   })(themeProps)};
       padding: 2px 4px;
       margin: 0 1px;
@@ -387,8 +393,8 @@ export const rendererStyles = wrapperProps => theme => {
     }
 
     & span.date-node-highlighted {
-      background: ${colors.R50};
-      color: ${colors.R500};
+      background: ${token('color.background.danger', colors.R50)};
+      color: ${token('color.text.danger', colors.R500)};
     }
 
     & .renderer-image {
@@ -464,6 +470,11 @@ export const rendererStyles = wrapperProps => theme => {
       .${TableSharedCssClassName.TABLE_NODE_WRAPPER} {
         overflow-x: auto;
       }
+
+      .${shadowObserverClassNames.SHADOW_CONTAINER}
+        .${TableSharedCssClassName.TABLE_NODE_WRAPPER} {
+        display: flex;
+      }
     }
 
     ${tableSharedStyle(themeProps)}
@@ -481,6 +492,13 @@ export const rendererStyles = wrapperProps => theme => {
         z-index: ${akEditorStickyHeaderZIndex};
       }
 
+      &
+        .${shadowObserverClassNames.SENTINEL_LEFT},
+        &
+        .${shadowObserverClassNames.SENTINEL_RIGHT} {
+        height: calc(100% - ${tableMarginTop}px);
+      }
+
       /**
      * A hack for making all the <th /> heights equal in case some have shorter
      * content than others.
@@ -494,7 +512,7 @@ export const rendererStyles = wrapperProps => theme => {
         margin-right: 0;
       }
 
-      table tr:first-child {
+      table tr:first-of-type {
         height: 100%;
 
         td,
@@ -506,19 +524,19 @@ export const rendererStyles = wrapperProps => theme => {
       table[data-number-column='true'] {
         .${RendererCssClassName.NUMBER_COLUMN} {
           background-color: ${themed({
-    light: akEditorTableToolbar,
-    dark: akEditorTableToolbarDark
+    light: token('color.background.neutral', akEditorTableToolbar),
+    dark: token('color.background.neutral', akEditorTableToolbarDark)
   })(themeProps)};
           border-right: 1px solid
             ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)};
           width: ${akEditorTableNumberColumnWidth}px;
           text-align: center;
           color: ${themed({
-    light: colors.N200,
-    dark: colors.DN400
+    light: token('color.text.subtlest', colors.N200),
+    dark: token('color.text.subtlest', colors.DN400)
   })(themeProps)};
           font-size: ${relativeFontSizeToBase16(fontSize())};
         }
@@ -537,13 +555,13 @@ export const rendererStyles = wrapperProps => theme => {
 
       border-right: 1px solid
         ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)};
       border-bottom: 1px solid
         ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)};
 
       /* this is to compensate for the table border */
@@ -569,20 +587,20 @@ export const rendererStyles = wrapperProps => theme => {
     .sticky td {
       box-shadow: 0px 1px
           ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)},
         0px -0.5px ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)},
         inset -1px 0px ${themed({
-    light: akEditorTableToolbar,
-    dark: akEditorTableToolbarDark
+    light: token('color.border', akEditorTableToolbar),
+    dark: token('color.border', akEditorTableToolbarDark)
   })(themeProps)},
         0px -1px ${themed({
-    light: akEditorTableToolbar,
-    dark: akEditorTableToolbarDark
+    light: token('color.border', akEditorTableToolbar),
+    dark: token('color.border', akEditorTableToolbarDark)
   })(themeProps)};
     }
 

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
+import { token } from '@atlaskit/tokens';
 
 const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
   position: relative;
@@ -14,7 +15,7 @@ const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
     left: 0;
     right: 0;
     background-image: linear-gradient(
-      rgba(255, 255, 255, 0),
+      ${token('color.background.neutral.subtle', 'rgba(255, 255, 255, 0)')},
       ${backgroundColor}
     );
   }
@@ -37,13 +38,14 @@ const FadeOut = props => {
 export class TruncatedWrapper extends Component {
   constructor(props) {
     super(props);
-  }
+  } // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
+
 
   render() {
     const {
       height = 95,
       fadeHeight = 24,
-      backgroundColor = 'white',
+      backgroundColor = token('elevation.surface', 'white'),
       children
     } = this.props;
     return jsx(FadeOut, {

package/dist/es2019/ui/SortingIcon.js

@@ -5,13 +5,15 @@ import { gridSize } from '@atlaskit/theme/constants';
 import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { sortingIconMessages } from '../messages';
-import { injectIntl } from 'react-intl-next'; // We use data url here because of this issue:
+import { injectIntl } from 'react-intl-next';
+import { token } from '@atlaskit/tokens'; // We use data url here because of this issue:
 // https://product-fabric.atlassian.net/browse/ED-8001
 // Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
+// TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4136
 
 export const TableSortIconDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-8-6h24v24H-8z"></path><path d="M3 8.509V1c0-.552.449-1 1-1 .552 0 1 .448 1 1V8.51l1.217-1.206a1.05 1.05 0 011.477 0 1.03 1.03 0 01.004 1.463l-.003.002-2.956 2.93a1.053 1.053 0 01-1.478 0L.305 8.767a1.03 1.03 0 01.001-1.464 1.05 1.05 0 011.477 0L3 8.508z" fill="#42526E"></path></g></svg>`)}`;
 const TABLE_SORTING_ICON_CLASS = 'table-sorting-icon';
-export let StatusClassNames;
+export let StatusClassNames; // TODO: get design to check border
 
 (function (StatusClassNames) {
   StatusClassNames["ASC"] = "sorting-icon-svg__asc";
@@ -28,14 +30,14 @@ const wrapperStyles = css`
   margin: 6px;
   right: 0;
   top: 0;
-  border: 2px solid #fff;
+  border: 2px solid ${token('color.border.inverse', '#fff')};
   border-radius: ${gridSize() / 2}px;
-  background-color: ${N20};
+  background-color: ${token('color.background.neutral.subtle', N20)};
   justify-content: center;
   align-items: center;
 
   &:hover {
-    background-color: ${N30};
+    background-color: ${token('color.background.neutral.subtle.hovered', N30)};
   }
 
   &.${StatusClassNames.SORTING_NOT_ALLOWED} {

package/dist/es2019/ui/annotations/draft/component.js

@@ -13,7 +13,7 @@ import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 const markStyles = props => css`
   color: inherit;
   background-color: unset;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
 
   ${AnnotationSharedCSSByState(props).focus};
 `;

package/dist/es2019/ui/annotations/element/mark.js

@@ -9,7 +9,7 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 const markStyles = props => css`
   color: inherit;
   background-color: unset;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
 
   &[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}'] {
     ${AnnotationSharedCSSByState({