@atlaskit/editor-common 66.0.5 → 67.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-common
 
+## 67.0.0
+
+### Minor Changes
+
+- [`025ee31e9bc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/025ee31e9bc) - [ux] Instrumented `@atlaskit/editor-common` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking change.
+
+- [`bd24b9d71d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bd24b9d71d2) - [ux] Instrumented `@atlaskit/renderer` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`facd9f48e88`](https://bitbucket.org/atlassian/atlassian-frontend/commits/facd9f48e88) - Fixed confluence inline comment missing background colour.
+- Updated dependencies
+
 ## 66.0.5
 
 ### Patch Changes

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

@@ -15,6 +15,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 var annotationPrefix = 'ak-editor-annotation';
@@ -34,20 +36,23 @@ var DY200 = '#82641c';
 
 var AnnotationSharedCSSByState = function AnnotationSharedCSSByState(props) {
   return {
-    focus: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    box-shadow: 1px 2px 3px ", ", -1px 2px 3px ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
+    /* eslint-disable */
+    focus: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  "])), (0, _components.themed)({
       light: _colors.Y75,
       dark: DY75
     })(props), (0, _components.themed)({
-      light: _colors.Y300,
-      dark: DY300
-    })(props), _colors.N60A, _colors.N60A),
-    blur: (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
+      light: (0, _tokens.token)('color.border.accent.yellow', _colors.Y300),
+      dark: (0, _tokens.token)('color.border.accent.yellow', DY300)
+    })(props), (0, _tokens.token)('elevation.shadow.overlay', "1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A))),
+    blur: (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
       light: Y75a,
       dark: DY75a
     })(props), (0, _components.themed)({
-      light: Y200a,
-      dark: DY200
+      light: (0, _tokens.token)('color.border.accent.yellow', Y200a),
+      dark: (0, _tokens.token)('color.border.accent.yellow', DY200)
     })(props))
+    /* eslint-enable */
+
   };
 };
 

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

@@ -15,7 +15,9 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
-var blockquoteSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.gridSize)() * 2, _editorSharedStyles.akEditorBlockquoteBorderColor, _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)() * 2);
+var blockquoteSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.gridSize)() * 2, (0, _tokens.token)('color.border', _editorSharedStyles.akEditorBlockquoteBorderColor), _editorSharedStyles.blockNodesVerticalMargin, (0, _constants.gridSize)() * 2);
 exports.blockquoteSharedStyles = blockquoteSharedStyles;

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

@@ -17,13 +17,15 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var codeMarkSharedStyles = function codeMarkSharedStyles(props) {
   var theme = (0, _components.getTheme)(props);
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), (0, _components.themed)({
-    light: _colors.N30A,
-    dark: _colors.DN70
+    light: (0, _tokens.token)('color.background.neutral', _colors.N30A),
+    dark: (0, _tokens.token)('color.background.neutral', _colors.DN70)
   })(props), (0, _inline.getCodeStyles)(theme));
 };
 

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

@@ -17,11 +17,13 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var divider = (0, _components.themed)({
-  light: _colors.N30A,
-  dark: _colors.DN50
+  light: (0, _tokens.token)('color.border', _colors.N30A),
+  dark: (0, _tokens.token)('color.border', _colors.DN50)
 }); // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 
 var ruleSharedStyles = function ruleSharedStyles(props) {

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

@@ -21,6 +21,8 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _browser = _interopRequireDefault(require("../../utils/browser"));
 
 var _templateObject;
@@ -57,17 +59,17 @@ var TableSharedCssClassName = {
 exports.TableSharedCssClassName = TableSharedCssClassName;
 
 var tableSharedStyle = function tableSharedStyle(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, _editorSharedStyles.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, (0, _components.themed)({
-    light: _editorSharedStyles.akEditorTableBorder,
-    dark: _editorSharedStyles.akEditorTableBorderDark
-  })(props), tableCellMinWidth, (0, _components.themed)({
-    light: _editorSharedStyles.akEditorTableBorder,
-    dark: _editorSharedStyles.akEditorTableBorderDark
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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: ", ";\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, _editorSharedStyles.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, (0, _components.themed)({
+    light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
+    dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
+  })(props), (0, _tokens.token)('color.background.neutral.subtle', 'white'), tableCellMinWidth, (0, _components.themed)({
+    light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
+    dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
   })(props), tableCellPadding, _browser.default.gecko || _browser.default.ie || _browser.default.mac && _browser.default.chrome ? 'background-clip: padding-box;' : '', (0, _components.themed)({
     dark: _editorSharedStyles.getTableCellBackgroundDarkModeColors
   })(props), (0, _components.themed)({
-    light: _editorSharedStyles.akEditorTableToolbar,
-    dark: _editorSharedStyles.akEditorTableToolbarDark
+    light: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbar),
+    dark: (0, _tokens.token)('color.background.neutral', _editorSharedStyles.akEditorTableToolbarDark)
   })(props), (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
       light: 'rgb(235, 237, 240)',
@@ -75,11 +77,11 @@ var tableSharedStyle = function tableSharedStyle(props) {
     })(props),
     width: "".concat((0, _constants.gridSize)(), "px")
   }), (0, _components.themed)({
-    light: 'rgb(235, 237, 240)',
-    dark: 'rgb(36, 47, 66)'
+    light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
+    dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
   })(props), (0, _components.themed)({
-    light: 'rgb(226, 229, 233)',
-    dark: _colors.DN20
+    light: (0, _tokens.token)('color.background.neutral', 'rgb(226, 229, 233)'),
+    dark: (0, _tokens.token)('color.background.neutral', _colors.DN20)
   })(props), (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
       light: 'rgb(235, 237, 240)',
@@ -87,11 +89,11 @@ var tableSharedStyle = function tableSharedStyle(props) {
     })(props),
     width: "".concat((0, _constants.gridSize)(), "px")
   }), (0, _components.themed)({
-    light: 'rgb(235, 237, 240)',
-    dark: 'rgb(36, 47, 66)'
+    light: (0, _tokens.token)('color.background.neutral', 'rgb(235, 237, 240)'),
+    dark: (0, _tokens.token)('color.background.neutral', 'rgb(36, 47, 66)')
   })(props), (0, _components.themed)({
-    light: 'rgb(226, 229, 233)',
-    dark: _colors.DN20
+    light: (0, _tokens.token)('color.background.neutral', 'rgb(226, 229, 233)'),
+    dark: (0, _tokens.token)('color.background.neutral', _colors.DN20)
   })(props));
 };
 

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

@@ -29,6 +29,8 @@ var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _messages = require("./messages");
 
 var _templateObject, _templateObject2;
@@ -37,8 +39,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var captionWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), _colors.N400);
-var placeholderStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), _colors.N200);
+var captionWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), (0, _tokens.token)('color.text.subtle', _colors.N400));
+var placeholderStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200));
 
 var CaptionComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(CaptionComponent, _React$Component);

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

@@ -29,6 +29,8 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _excluded = ["children"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
@@ -61,16 +63,16 @@ var messages = (0, _reactIntlNext.defineMessages)({
 });
 exports.messages = messages;
 var BORDER_RADIUS = (0, _constants.gridSize)() / 2;
-var EXPAND_COLLAPSED_BACKGROUND = 'transparent';
+var EXPAND_COLLAPSED_BACKGROUND = (0, _tokens.token)('color.background.neutral.subtle', 'transparent');
 var EXPAND_SELECTED_BACKGROUND = (0, _components.themed)({
-  light: 'rgba(255, 255, 255, 0.6)',
-  dark: 'rgba(9, 10, 11, 0.29)'
+  light: (0, _tokens.token)('elevation.surface', 'rgba(255, 255, 255, 0.6)'),
+  dark: (0, _tokens.token)('elevation.surface', 'rgba(9, 10, 11, 0.29)')
 });
-var EXPAND_FOCUSED_BORDER_COLOR = colors.B300;
+var EXPAND_FOCUSED_BORDER_COLOR = (0, _tokens.token)('color.border.focused', colors.B300);
 var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
 var EXPAND_EXPANDED_BORDER_COLOR = (0, _components.themed)({
-  light: colors.N40A,
-  dark: colors.DN50
+  light: (0, _tokens.token)('color.border', colors.N40A),
+  dark: (0, _tokens.token)('color.border', colors.DN50)
 });
 
 var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
@@ -87,9 +89,9 @@ exports.ExpandIconWrapper = ExpandIconWrapper;
 
 var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), (0, _components.themed)({
-    light: colors.N90,
-    dark: '#d9dde3'
-  })(props), (0, _constants.gridSize)() / 2, colors.N30A, _editorSharedStyles.akEditorSwoopCubicBezier);
+    light: (0, _tokens.token)('color.icon', colors.N90),
+    dark: (0, _tokens.token)('color.icon', '#d9dde3')
+  })(props), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.background.neutral.subtle.hovered', colors.N30A), _editorSharedStyles.akEditorSwoopCubicBezier);
 };
 
 var expandIconWrapperExpandedStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
@@ -116,9 +118,9 @@ var containerStyles = function containerStyles(styleProps) {
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function (themeProps) {
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    &:hover {\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > &:first-child {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _constants.gridSize)(), (0, _components.themed)({
-      light: colors.N50A,
-      dark: colors.DN50
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4152\n    &:hover {\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > &:first-child {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _constants.gridSize)(), (0, _components.themed)({
+      light: (0, _tokens.token)('color.border', colors.N50A),
+      dark: (0, _tokens.token)('color.border', colors.DN50)
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
   };
 };
@@ -131,18 +133,18 @@ var contentStyles = function contentStyles(styleProps) {
 
 var titleInputStyles = function titleInputStyles(props) {
   return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", "px;\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _components.themed)({
-    light: colors.N200A,
-    dark: colors.DN600
+    light: (0, _tokens.token)('color.text.subtlest', colors.N200A),
+    dark: (0, _tokens.token)('color.text.subtlest', colors.DN600)
   })(props), (0, _constants.gridSize)() / 2, (0, _components.themed)({
-    light: colors.N200A,
-    dark: colors.DN600
+    light: (0, _tokens.token)('color.text.subtlest', colors.N200A),
+    dark: (0, _tokens.token)('color.text.subtlest', colors.DN600)
   })(props));
 };
 
 var titleContainerStyles = function titleContainerStyles(props) {
   return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n  // Prevent browser selection being inside the title container\n  user-select: none;\n\n  &:focus {\n    outline: 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-    light: colors.N300A,
-    dark: colors.DN600
+    light: (0, _tokens.token)('color.text.subtle', colors.N300A),
+    dark: (0, _tokens.token)('color.text.subtle', colors.DN600)
   })(props));
 };
 

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

@@ -21,13 +21,15 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.R400);
-var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.G400);
+var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.text.danger', _colors.R400));
+var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.text.success', _colors.G400));
 
 var messageStyle = function messageStyle(props) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(props), _colors.N200, (0, _constants.gridSize)() / 2);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(props), (0, _tokens.token)('color.text.subtlest', _colors.N200), (0, _constants.gridSize)() / 2);
 };
 
 var iconWrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 4px;\n"])));

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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "66.0.5",
+	"version": "67.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/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/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,3 +1,5 @@
+/* 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';

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;
@@ -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;
@@ -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/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%;

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/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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "66.0.5",
+	"version": "67.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/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/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,6 +2,8 @@ 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';

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-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: ", ";\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: 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/ui/Caption/index.js

@@ -17,9 +17,10 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N200, N400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { messages } from './messages';
-var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), N400);
-var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), N200);
+var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), token('color.text.subtle', N400));
+var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), token('color.text.subtlest', N200));
 export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(CaptionComponent, _React$Component);
 

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

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

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

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

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

@@ -10,12 +10,13 @@ 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';
-var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
+var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('color.background.disabled', N30), token('color.border.disabled', N50), borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,

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

@@ -10,12 +10,13 @@ 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';
-var inlineNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
+var inlineNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('color.background.disabled', N30), token('color.border.disabled', N50), borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "66.0.5",
+  "version": "67.0.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -50,19 +50,20 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/editor-json-transformer": "^8.7.0",
-    "@atlaskit/editor-shared-styles": "^2.0.0",
-    "@atlaskit/emoji": "^64.5.0",
+    "@atlaskit/editor-shared-styles": "^2.1.0",
+    "@atlaskit/emoji": "^64.6.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/media-card": "^73.5.0",
-    "@atlaskit/media-client": "^15.1.0",
-    "@atlaskit/media-picker": "^61.0.0",
+    "@atlaskit/media-card": "^73.6.0",
+    "@atlaskit/media-client": "^16.0.0",
+    "@atlaskit/media-picker": "^62.0.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/profilecard": "^16.4.0",
-    "@atlaskit/smart-card": "^19.0.0",
+    "@atlaskit/smart-card": "^19.1.0",
     "@atlaskit/smart-user-picker": "^5.0.2",
     "@atlaskit/task-decision": "^17.4.0",
     "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/width-detector": "^4.0.0",
@@ -84,7 +85,7 @@
     "react-loadable": "^5.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/media-core": "^32.3.1",
+    "@atlaskit/media-core": "^33.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1"
@@ -92,7 +93,7 @@
   "devDependencies": {
     "@atlaskit/editor-json-transformer": "^8.7.0",
     "@atlaskit/editor-test-helpers": "^17.0.0",
-    "@atlaskit/media-core": "^32.3.0",
+    "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/util-data-test": "^17.2.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -116,7 +117,8 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "deprecation": "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "theming": "tokens"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"