@atlaskit/editor-common 66.0.5 → 68.0.0

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

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

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

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

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

@@ -1,24 +1,25 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import browser from '../../utils/browser';
+import { ShadowObserver, shadowObserverClassNames } from './shadowObserver';
 export const shadowClassNames = {
   RIGHT_SHADOW: 'right-shadow',
   LEFT_SHADOW: 'left-shadow'
 };
-const isIE11 = browser.ie_version === 11;
 export default function overflowShadow(Component, options) {
   return class OverflowShadow extends React.Component {
     constructor(...args) {
       super(...args);
 
+      _defineProperty(this, "overflowContainerWidth", 0);
+
       _defineProperty(this, "state", {
         showLeftShadow: false,
         showRightShadow: false
       });
 
       _defineProperty(this, "handleScroll", event => {
-        if (!this.overflowContainer || event.target !== this.overflowContainer) {
+        if (!this.overflowContainer || event.target !== this.overflowContainer || options.useShadowObserver) {
           return;
         }
 
@@ -26,6 +27,10 @@ export default function overflowShadow(Component, options) {
       });
 
       _defineProperty(this, "updateShadows", () => {
+        if (options.useShadowObserver) {
+          return;
+        }
+
         this.setState(prevState => {
           if (!this.overflowContainer) {
             return;
@@ -90,20 +95,22 @@ export default function overflowShadow(Component, options) {
           this.overflowContainer = container;
         }
 
-        if (options.scrollableSelector) {
-          this.scrollable = container.querySelectorAll(options.scrollableSelector);
+        if (options.useShadowObserver) {
+          this.initShadowObserver();
+          return;
         }
 
         this.updateShadows();
-
-        if (!isIE11) {
-          this.overflowContainer.addEventListener('scroll', this.handleScroll);
-        }
+        this.overflowContainer.addEventListener('scroll', this.handleScroll);
       });
     }
 
     componentWillUnmount() {
-      if (this.overflowContainer && !isIE11) {
+      if (options.useShadowObserver) {
+        return this.shadowObserver && this.shadowObserver.dispose();
+      }
+
+      if (this.overflowContainer) {
         this.overflowContainer.removeEventListener('scroll', this.handleScroll);
       }
 
@@ -111,7 +118,36 @@ export default function overflowShadow(Component, options) {
     }
 
     componentDidUpdate() {
-      this.updateShadows();
+      if (!options.useShadowObserver) {
+        this.updateShadows();
+      }
+    }
+
+    initShadowObserver() {
+      if (this.shadowObserver || !this.overflowContainer) {
+        return;
+      }
+
+      this.shadowObserver = new ShadowObserver({
+        scrollContainer: this.overflowContainer,
+        onUpdateShadows: shadowStates => {
+          this.setState(prevState => {
+            const {
+              showLeftShadow,
+              showRightShadow
+            } = shadowStates;
+
+            if (showLeftShadow !== prevState.showLeftShadow || showRightShadow !== prevState.showRightShadow) {
+              return {
+                showLeftShadow,
+                showRightShadow
+              };
+            }
+
+            return null;
+          });
+        }
+      });
     }
 
     render() {
@@ -119,7 +155,7 @@ export default function overflowShadow(Component, options) {
         showLeftShadow,
         showRightShadow
       } = this.state;
-      const classNames = [showRightShadow && shadowClassNames.RIGHT_SHADOW, showLeftShadow && shadowClassNames.LEFT_SHADOW].filter(Boolean).join(' ');
+      let classNames = [showRightShadow && shadowClassNames.RIGHT_SHADOW, showLeftShadow && shadowClassNames.LEFT_SHADOW, options.useShadowObserver && shadowObserverClassNames.SHADOW_CONTAINER].filter(Boolean).join(' ');
       return /*#__PURE__*/React.createElement(Component, _extends({
         handleRef: this.handleContainer,
         shadowClassNames: classNames

package/dist/es2019/ui/OverflowShadow/shadowObserver.js

@@ -0,0 +1,82 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export let ShadowKeys;
+
+(function (ShadowKeys) {
+  ShadowKeys["SHOW_LEFT_SHADOW"] = "showLeftShadow";
+  ShadowKeys["SHOW_RIGHT_SHADOW"] = "showRightShadow";
+})(ShadowKeys || (ShadowKeys = {}));
+
+export const shadowObserverClassNames = {
+  SENTINEL_LEFT: 'sentinel-left',
+  SENTINEL_RIGHT: 'sentinel-right',
+  SHADOW_CONTAINER: 'with-shadow-observer'
+};
+
+const requestIdleCallback = fn => {
+  return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.requestAnimationFrame(fn);
+};
+
+const cancelIdleCallback = id => {
+  return window.cancelIdleCallback ? window.cancelIdleCallback(id) : window.cancelAnimationFrame(id);
+};
+
+export class ShadowObserver {
+  constructor({
+    scrollContainer,
+    onUpdateShadows
+  }) {
+    _defineProperty(this, "sentinels", {});
+
+    _defineProperty(this, "shadowStates", {
+      [ShadowKeys.SHOW_LEFT_SHADOW]: false,
+      [ShadowKeys.SHOW_RIGHT_SHADOW]: false
+    });
+
+    _defineProperty(this, "init", () => {
+      if (!this.scrollContainer || this.intersectionObserver) {
+        return;
+      }
+
+      this.sentinels.right = document.createElement('div');
+      this.sentinels.right.classList.add(shadowObserverClassNames.SENTINEL_RIGHT);
+      this.scrollContainer.appendChild(this.sentinels.right);
+      this.sentinels.left = document.createElement('div');
+      this.sentinels.left.classList.add(shadowObserverClassNames.SENTINEL_LEFT);
+      this.scrollContainer.prepend(this.sentinels.left);
+      this.intersectionObserver = new IntersectionObserver((entries, _) => {
+        entries.forEach(this.onIntersect);
+      }, {
+        root: this.scrollContainer
+      });
+      this.intersectionObserver.observe(this.sentinels.left);
+      this.intersectionObserver.observe(this.sentinels.right);
+    });
+
+    _defineProperty(this, "onIntersect", entry => {
+      this.requestCallbackId = requestIdleCallback(() => {
+        if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_LEFT)) {
+          this.shadowStates[ShadowKeys.SHOW_LEFT_SHADOW] = !entry.isIntersecting;
+        }
+
+        if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_RIGHT)) {
+          this.shadowStates[ShadowKeys.SHOW_RIGHT_SHADOW] = !entry.isIntersecting;
+        }
+
+        this.onUpdateShadows(this.shadowStates);
+      });
+    });
+
+    this.scrollContainer = scrollContainer;
+    this.onUpdateShadows = onUpdateShadows;
+    this.init();
+  }
+
+  dispose() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = undefined;
+      this.requestCallbackId && cancelIdleCallback(this.requestCallbackId);
+    }
+  }
+
+}

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

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

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

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

package/dist/es2019/ui/index.js

@@ -10,6 +10,7 @@ export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
 export { default as withOuterListeners } from './with-outer-listeners';
 export { WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
+export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';

package/dist/es2019/utils/breakout.js

@@ -29,7 +29,7 @@ const breakoutConsts = {
         return '100%';
     }
   },
-  calcLineLength: (containerWidth, allowDynamicTextSizing) => allowDynamicTextSizing && containerWidth ? breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth)) : breakoutConsts.defaultLayoutWidth,
+  calcLineLength: () => breakoutConsts.defaultLayoutWidth,
   calcWideWidth: (containerWidth = breakoutConsts.defaultLayoutWidth, maxWidth = Infinity, fallback = '100%') => {
     const effectiveFullWidth = containerWidth - breakoutConsts.padding;
     const layoutMaxWidth = breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth));

package/dist/es2019/utils/unsupportedContent/get-unsupported-content-level-data.js

@@ -1,4 +1,4 @@
-import { traverse } from '@atlaskit/adf-utils';
+import { traverse } from '@atlaskit/adf-utils/traverse';
 export let UNSUPPORTED_CONTENT_LEVEL_SEVERITY;
 
 (function (UNSUPPORTED_CONTENT_LEVEL_SEVERITY) {

package/dist/es2019/utils/validate-using-spec.js

@@ -1,4 +1,4 @@
-import { validator } from '@atlaskit/adf-utils';
+import { validator } from '@atlaskit/adf-utils/validator';
 export const UNSUPPORTED_NODE_ATTRIBUTE = 'unsupportedNodeAttribute';
 import { ACTION_SUBJECT_ID } from './analytics';
 import { fireUnsupportedEvent } from './track-unsupported-content';

package/dist/es2019/version.json

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

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

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

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

@@ -3,4 +3,4 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from '@emotion/react';
-export var blockMarksSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
+export var blockMarksSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n"])));

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

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

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

@@ -6,10 +6,11 @@ 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: N30A,
-    dark: DN70
+    light: token('color.background.neutral', N30A),
+    dark: token('color.background.neutral', DN70)
   })(props), getCodeStyles(theme));
 };

package/dist/esm/styles/shared/column-layout.js

@@ -4,5 +4,5 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
-var columnLayoutSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-layout-section] {\n    display: flex;\n    flex-direction: row;\n    & > * {\n      flex: 1;\n      min-width: 0;\n    }\n\n    & > .unsupportedBlockView-content-wrap {\n      min-width: initial;\n    }\n\n    @media screen and (max-width: ", "px) {\n      flex-direction: column;\n    }\n  }\n"])), gridMediumMaxWidth);
+var columnLayoutSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-layout-section] {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    & > * {\n      flex: 1;\n      min-width: 0;\n    }\n\n    & > .unsupportedBlockView-content-wrap {\n      min-width: initial;\n    }\n\n    @media screen and (max-width: ", "px) {\n      flex-direction: column;\n    }\n  }\n"])), gridMediumMaxWidth);
 export { columnLayoutSharedStyle };

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

@@ -3,6 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2;
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4066
 import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';

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

@@ -6,9 +6,10 @@ 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: N30A,
-  dark: DN50
+  light: token('color.border', N30A),
+  dark: token('color.border', 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

@@ -2,10 +2,13 @@ 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';
 import { shadowClassNames } from '../../ui/OverflowShadow';
+import { shadowObserverClassNames } from '../../ui/OverflowShadow/shadowObserver';
 var shadowWidth = 8;
 /**
  * TODO: This is close to working and removes a tone of JS from OverflowShadow component
@@ -21,5 +24,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"])), 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);
+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);
 export { shadowSharedStyle };

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

@@ -2,12 +2,16 @@ 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
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4153
 import { css } from '@emotion/react';
 import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, 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';
 export var tableMarginTop = 24;
 export var tableMarginBottom = 16;
@@ -32,17 +36,17 @@ 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-child > 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: white;\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 {\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        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]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\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: akEditorTableBorder,
-    dark: akEditorTableBorderDark
-  })(props), tableCellMinWidth, themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+  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 {\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        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]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\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)
   })(props), tableCellPadding, browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', themed({
     dark: getTableCellBackgroundDarkModeColors
   })(props), themed({
-    light: akEditorTableToolbar,
-    dark: akEditorTableToolbarDark
+    light: token('color.background.neutral', akEditorTableToolbar),
+    dark: token('color.background.neutral', akEditorTableToolbarDark)
   })(props), overflowShadow({
     background: themed({
       light: 'rgb(235, 237, 240)',
@@ -50,11 +54,11 @@ var tableSharedStyle = function tableSharedStyle(props) {
     })(props),
     width: "".concat(gridSize(), "px")
   }), themed({
-    light: 'rgb(235, 237, 240)',
-    dark: 'rgb(36, 47, 66)'
+    light: token('color.background.neutral', 'rgb(235, 237, 240)'),
+    dark: token('color.background.neutral', 'rgb(36, 47, 66)')
   })(props), themed({
-    light: 'rgb(226, 229, 233)',
-    dark: DN20
+    light: token('color.background.neutral', 'rgb(226, 229, 233)'),
+    dark: token('color.background.neutral', DN20)
   })(props), overflowShadow({
     background: themed({
       light: 'rgb(235, 237, 240)',
@@ -62,11 +66,11 @@ var tableSharedStyle = function tableSharedStyle(props) {
     })(props),
     width: "".concat(gridSize(), "px")
   }), themed({
-    light: 'rgb(235, 237, 240)',
-    dark: 'rgb(36, 47, 66)'
+    light: token('color.background.neutral', 'rgb(235, 237, 240)'),
+    dark: token('color.background.neutral', 'rgb(36, 47, 66)')
   })(props), themed({
-    light: 'rgb(226, 229, 233)',
-    dark: DN20
+    light: token('color.background.neutral', 'rgb(226, 229, 233)'),
+    dark: token('color.background.neutral', DN20)
   })(props));
 };
 

package/dist/esm/styles/shared/task-decision.js

@@ -7,4 +7,4 @@ import { akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
 export var TaskDecisionSharedCssClassName = {
   DECISION_CONTAINER: 'decisionItemView-content-wrap'
 };
-export var tasksAndDecisionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: 12px 0 0 0;\n  }\n\n  div[data-task-list-local-id]:first-child {\n    margin-top: 0;\n  }\n\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: 0px;\n    margin-left: 24px;\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER);
+export var tasksAndDecisionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: 12px 0 0 0;\n  }\n\n  // If task list is first in the document then set margin top to zero.\n  div[data-task-list-local-id]:first-child {\n    margin-top: 0;\n  }\n\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: 0px;\n    margin-left: 24px;\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER);