@atlaskit/editor-common 66.0.5 → 68.0.0

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

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shadowObserverClassNames = exports.ShadowObserver = exports.ShadowKeys = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var ShadowKeys;
+exports.ShadowKeys = ShadowKeys;
+
+(function (ShadowKeys) {
+  ShadowKeys["SHOW_LEFT_SHADOW"] = "showLeftShadow";
+  ShadowKeys["SHOW_RIGHT_SHADOW"] = "showRightShadow";
+})(ShadowKeys || (exports.ShadowKeys = ShadowKeys = {}));
+
+var shadowObserverClassNames = {
+  SENTINEL_LEFT: 'sentinel-left',
+  SENTINEL_RIGHT: 'sentinel-right',
+  SHADOW_CONTAINER: 'with-shadow-observer'
+};
+exports.shadowObserverClassNames = shadowObserverClassNames;
+
+var requestIdleCallback = function requestIdleCallback(fn) {
+  return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.requestAnimationFrame(fn);
+};
+
+var cancelIdleCallback = function cancelIdleCallback(id) {
+  return window.cancelIdleCallback ? window.cancelIdleCallback(id) : window.cancelAnimationFrame(id);
+};
+
+var ShadowObserver = /*#__PURE__*/function () {
+  function ShadowObserver(_ref) {
+    var _defineProperty2,
+        _this = this;
+
+    var scrollContainer = _ref.scrollContainer,
+        onUpdateShadows = _ref.onUpdateShadows;
+    (0, _classCallCheck2.default)(this, ShadowObserver);
+    (0, _defineProperty3.default)(this, "sentinels", {});
+    (0, _defineProperty3.default)(this, "shadowStates", (_defineProperty2 = {}, (0, _defineProperty3.default)(_defineProperty2, ShadowKeys.SHOW_LEFT_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, ShadowKeys.SHOW_RIGHT_SHADOW, false), _defineProperty2));
+    (0, _defineProperty3.default)(this, "init", function () {
+      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(function (entries, _) {
+        entries.forEach(_this.onIntersect);
+      }, {
+        root: _this.scrollContainer
+      });
+
+      _this.intersectionObserver.observe(_this.sentinels.left);
+
+      _this.intersectionObserver.observe(_this.sentinels.right);
+    });
+    (0, _defineProperty3.default)(this, "onIntersect", function (entry) {
+      _this.requestCallbackId = requestIdleCallback(function () {
+        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();
+  }
+
+  (0, _createClass2.default)(ShadowObserver, [{
+    key: "dispose",
+    value: function dispose() {
+      if (this.intersectionObserver) {
+        this.intersectionObserver.disconnect();
+        this.intersectionObserver = undefined;
+        this.requestCallbackId && cancelIdleCallback(this.requestCallbackId);
+      }
+    }
+  }]);
+  return ShadowObserver;
+}();
+
+exports.ShadowObserver = ShadowObserver;

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

@@ -25,6 +25,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _unsupportedContent = require("../../messages/unsupportedContent");
@@ -41,7 +43,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), (0, _tokens.token)('color.background.disabled', _colors.N30), (0, _tokens.token)('color.border.disabled', _colors.N50), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,

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

@@ -25,6 +25,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _unsupportedContent = require("../../messages/unsupportedContent");
@@ -41,7 +43,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var inlineNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+var inlineNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), (0, _tokens.token)('color.background.disabled', _colors.N30), (0, _tokens.token)('color.border.disabled', _colors.N50), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 
 var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,

package/dist/cjs/ui/index.js

@@ -85,6 +85,12 @@ Object.defineProperty(exports, "REACT_INTL_ERROR_MESSAGE", {
     return _IntlErrorBoundary.REACT_INTL_ERROR_MESSAGE;
   }
 });
+Object.defineProperty(exports, "ShadowObserver", {
+  enumerable: true,
+  get: function get() {
+    return _shadowObserver.ShadowObserver;
+  }
+});
 Object.defineProperty(exports, "UnsupportedBlock", {
   enumerable: true,
   get: function get() {
@@ -205,6 +211,12 @@ Object.defineProperty(exports, "shadowClassNames", {
     return _OverflowShadow.shadowClassNames;
   }
 });
+Object.defineProperty(exports, "shadowObserverClassNames", {
+  enumerable: true,
+  get: function get() {
+    return _shadowObserver.shadowObserverClassNames;
+  }
+});
 Object.defineProperty(exports, "sharedExpandStyles", {
   enumerable: true,
   get: function get() {
@@ -260,6 +272,8 @@ var _WidthProvider = require("./WidthProvider");
 
 var _OverflowShadow = _interopRequireWildcard(require("./OverflowShadow"));
 
+var _shadowObserver = require("./OverflowShadow/shadowObserver");
+
 var _WithCreateAnalyticsEvent = require("./WithCreateAnalyticsEvent");
 
 var _Expand = require("./Expand");

package/dist/cjs/utils/breakout.js

@@ -38,8 +38,8 @@ var breakoutConsts = {
         return '100%';
     }
   },
-  calcLineLength: function calcLineLength(containerWidth, allowDynamicTextSizing) {
-    return allowDynamicTextSizing && containerWidth ? breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth)) : breakoutConsts.defaultLayoutWidth;
+  calcLineLength: function calcLineLength() {
+    return breakoutConsts.defaultLayoutWidth;
   },
   calcWideWidth: function calcWideWidth() {
     var containerWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : breakoutConsts.defaultLayoutWidth;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getUnsupportedContentLevelData = exports.UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS = exports.UNSUPPORTED_CONTENT_LEVEL_SEVERITY = void 0;
 
-var _adfUtils = require("@atlaskit/adf-utils");
+var _traverse = require("@atlaskit/adf-utils/traverse");
 
 var UNSUPPORTED_CONTENT_LEVEL_SEVERITY;
 exports.UNSUPPORTED_CONTENT_LEVEL_SEVERITY = UNSUPPORTED_CONTENT_LEVEL_SEVERITY;
@@ -32,7 +32,7 @@ var buildUnsupportedContentLevelThresholds = function buildUnsupportedContentLev
 var countSupportedUnsupportedNodes = function countSupportedUnsupportedNodes(validDocument) {
   var unsupportedNodes = 0;
   var supportedNodes = 0;
-  (0, _adfUtils.traverse)(validDocument, {
+  (0, _traverse.traverse)(validDocument, {
     any: function any(node) {
       var unsupportedNodeTypes = ['unsupportedInline', 'unsupportedBlock', 'confluenceUnsupportedInline', 'confluenceUnsupportedBlock'];
 
@@ -45,7 +45,7 @@ var countSupportedUnsupportedNodes = function countSupportedUnsupportedNodes(val
           // start an independent traversal for the purpose of counting
           // unsupported content nodes (with nested children contributing towards
           // that count)
-          (0, _adfUtils.traverse)(originalNode, {
+          (0, _traverse.traverse)(originalNode, {
             any: function any() {
               unsupportedNodes++;
             }

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.validationErrorHandler = exports.validateADFEntity = exports.UNSUPPORTED_NODE_ATTRIBUTE = void 0;
 exports.wrapWithUnsupported = wrapWithUnsupported;
 
-var _adfUtils = require("@atlaskit/adf-utils");
+var _validator = require("@atlaskit/adf-utils/validator");
 
 var _analytics = require("./analytics");
 
@@ -126,7 +126,7 @@ function trackValidationError(dispatchAnalyticsEvent, error, entity) {
 var validateADFEntity = function validateADFEntity(schema, node, dispatchAnalyticsEvent) {
   var nodes = Object.keys(schema.nodes);
   var marks = Object.keys(schema.marks);
-  var validate = (0, _adfUtils.validator)(nodes, marks, {
+  var validate = (0, _validator.validator)(nodes, marks, {
     allowPrivateAttributes: true
   });
   var emptyDoc = {

package/dist/cjs/version.json

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

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

@@ -1,6 +1,7 @@
 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 const annotationPrefix = 'ak-editor-annotation';
 export const AnnotationSharedClassNames = {
   focus: `${annotationPrefix}-focus`,
@@ -14,16 +15,22 @@ const Y200a = 'rgba(255, 196, 0, 0.82)';
 const DY75a = 'rgba(111, 92, 37, 0.5)';
 const DY200 = '#82641c';
 export const AnnotationSharedCSSByState = props => ({
+  /* eslint-disable */
   focus: css`
+    // Background is not coming through in confluence, suspecting to be caused by some specific combination of
+    // emotion and token look up
+
     background: ${themed({
     light: Y75,
     dark: DY75
   })(props)};
-    border-bottom: 2px solid ${themed({
-    light: Y300,
-    dark: DY300
+    border-bottom: 2px solid
+      ${themed({
+    light: token('color.border.accent.yellow', Y300),
+    dark: token('color.border.accent.yellow', DY300)
   })(props)};
-    box-shadow: 1px 2px 3px ${N60A}, -1px 2px 3px ${N60A};
+    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
+    box-shadow: ${token('elevation.shadow.overlay', `1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`)};
     cursor: pointer;
   `,
   blur: css`
@@ -31,12 +38,15 @@ export const AnnotationSharedCSSByState = props => ({
     light: Y75a,
     dark: DY75a
   })(props)};
-    border-bottom: 2px solid ${themed({
-    light: Y200a,
-    dark: DY200
+    border-bottom: 2px solid
+      ${themed({
+    light: token('color.border.accent.yellow', Y200a),
+    dark: token('color.border.accent.yellow', DY200)
   })(props)};
     cursor: pointer;
   `
+  /* eslint-enable */
+
 });
 export const annotationSharedStyles = props => css`
   .ProseMirror {

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

@@ -6,7 +6,7 @@ export const blockMarksSharedStyles = css`
    */
   *:not(.fabric-editor-block-mark) >,
   /* For nested block marks */
-  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-child {
+  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type {
     p,
     h1,
     h2,

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

@@ -1,11 +1,13 @@
 import { css } from '@emotion/react';
 import { akEditorBlockquoteBorderColor, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const blockquoteSharedStyles = css`
   & blockquote {
     box-sizing: border-box;
     padding-left: ${gridSize() * 2}px;
-    border-left: 2px solid ${akEditorBlockquoteBorderColor};
+    border-left: 2px solid
+      ${token('color.border', akEditorBlockquoteBorderColor)};
     margin: ${blockNodesVerticalMargin} 0 0 0;
     margin-right: 0;
 

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

@@ -2,13 +2,14 @@ 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 const codeMarkSharedStyles = props => {
   const theme = getTheme(props);
   return css`
     .code {
       --ds--code--bg-color: ${themed({
-    light: N30A,
-    dark: DN70
+    light: token('color.background.neutral', N30A),
+    dark: token('color.background.neutral', DN70)
   })(props)};
       ${getCodeStyles(theme)}
     }

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

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 const columnLayoutSharedStyle = css`
   [data-layout-section] {
+    position: relative;
     display: flex;
     flex-direction: row;
     & > * {

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

@@ -1,3 +1,5 @@
+/* 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/es2019/styles/shared/rule.js

@@ -2,9 +2,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';
 const 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 const ruleSharedStyles = props => css`

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

@@ -1,7 +1,10 @@
+/* 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';
 const shadowWidth = 8;
 /**
  * TODO: This is close to working and removes a tone of JS from OverflowShadow component
@@ -54,5 +57,16 @@ const shadowSharedStyle = css`
     top: 0px;
     display: block;
   }
+  & .${shadowObserverClassNames.SENTINEL_LEFT} {
+    height: 100%;
+    width: 0px;
+    min-width: 0px;
+  }
+
+  & .${shadowObserverClassNames.SENTINEL_RIGHT} {
+    height: 100%;
+    width: 0px;
+    min-width: 0px;
+  }
 `;
 export { shadowSharedStyle };

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

@@ -1,9 +1,13 @@
+/* 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 const tableMarginTop = 24;
 export const tableMarginBottom = 16;
@@ -36,7 +40,7 @@ const tableSharedStyle = props => css`
     /**
      * Fix block top alignment inside table cells.
      */
-    .decisionItemView-content-wrap:first-child > div {
+    .decisionItemView-content-wrap:first-of-type > div {
       margin-top: 0;
     }
   }
@@ -60,8 +64,8 @@ const tableSharedStyle = props => css`
     border-collapse: collapse;
     border: ${tableCellBorderWidth}px solid
       ${themed({
-  light: akEditorTableBorder,
-  dark: akEditorTableBorderDark
+  light: token('color.border', akEditorTableBorder),
+  dark: token('color.border', akEditorTableBorderDark)
 })(props)};
     table-layout: fixed;
     font-size: 1em;
@@ -83,7 +87,7 @@ const tableSharedStyle = props => css`
         border-bottom: none;
       }
       th td {
-        background-color: white;
+        background-color: ${token('color.background.neutral.subtle', 'white')};
       }
       th,
       td {
@@ -92,8 +96,8 @@ const tableSharedStyle = props => css`
         vertical-align: top;
         border: 1px solid
           ${themed({
-  light: akEditorTableBorder,
-  dark: akEditorTableBorderDark
+  light: token('color.border', akEditorTableBorder),
+  dark: token('color.border', akEditorTableBorderDark)
 })(props)};
         border-right-width: 0;
         border-bottom-width: 0;
@@ -109,11 +113,11 @@ const tableSharedStyle = props => css`
           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;
         }
 
@@ -124,8 +128,8 @@ const tableSharedStyle = props => css`
       }
       th {
         background-color: ${themed({
-  light: akEditorTableToolbar,
-  dark: akEditorTableToolbarDark
+  light: token('color.background.neutral', akEditorTableToolbar),
+  dark: token('color.background.neutral', akEditorTableToolbarDark)
 })(props)};
         text-align: left;
 
@@ -143,14 +147,14 @@ const tableSharedStyle = props => css`
             background-attachment: local, scroll, scroll;
             background-position: 100% 0, 100% 0, 0 0;
             background-color: ${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)};
 
             .line-number-gutter {
               background-color: ${themed({
-  light: 'rgb(226, 229, 233)',
-  dark: DN20
+  light: token('color.background.neutral', 'rgb(226, 229, 233)'),
+  dark: token('color.background.neutral', DN20)
 })(props)};
             }
 
@@ -165,14 +169,14 @@ const tableSharedStyle = props => css`
 })}!important;
 
               background-color: ${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)}!important;
 
               // selector lives inside @atlaskit/code
               --ds--code--line-number-bg-color: ${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/es2019/styles/shared/task-decision.js

@@ -20,6 +20,7 @@ export const tasksAndDecisionsStyles = css`
     margin: 12px 0 0 0;
   }
 
+  // If task list is first in the document then set margin top to zero.
   div[data-task-list-local-id]:first-child {
     margin-top: 0;
   }

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

@@ -4,20 +4,6 @@ import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
 import { WidthConsumer } from '../WidthProvider';
-
-function mapBreakpointToFontSize(breakpoint) {
-  switch (breakpoint) {
-    case 'M':
-      return fontSize() + 2;
-
-    case 'L':
-      return fontSize() + 4;
-
-    default:
-      return fontSize();
-  }
-}
-
 export function mapBreakpointToLayoutMaxWidth(breakpoint) {
   switch (breakpoint) {
     case 'M':
@@ -31,8 +17,6 @@ export function mapBreakpointToLayoutMaxWidth(breakpoint) {
   }
 }
 export function BaseThemeWrapper({
-  breakpoint,
-  dynamicTextSizing,
   baseFontSize,
   children
 }) {
@@ -40,26 +24,24 @@ export function BaseThemeWrapper({
     mode
   } = useGlobalTheme();
   const memoizedTheme = useMemo(() => ({
-    baseFontSize: dynamicTextSizing ? mapBreakpointToFontSize(breakpoint) : baseFontSize || mapBreakpointToFontSize('S'),
-    layoutMaxWidth: dynamicTextSizing ? mapBreakpointToLayoutMaxWidth(breakpoint) : akEditorDefaultLayoutWidth,
+    baseFontSize: baseFontSize || fontSize(),
+    layoutMaxWidth: akEditorDefaultLayoutWidth,
     // Below is used for editor dark mode.
     [CHANNEL]: {
       mode
     }
-  }), [breakpoint, dynamicTextSizing, baseFontSize, mode]);
+  }), [baseFontSize, mode]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
   }, children);
 }
 export function BaseTheme({
   children,
-  dynamicTextSizing,
   baseFontSize
 }) {
   return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
     breakpoint
   }) => /*#__PURE__*/React.createElement(BaseThemeWrapper, {
-    dynamicTextSizing: dynamicTextSizing,
     breakpoint: breakpoint,
     baseFontSize: baseFontSize
   }, /*#__PURE__*/React.createElement(React.Fragment, null, children)));

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

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