@atlaskit/editor-core 177.0.0 → 178.0.0

package/dist/cjs/plugins/floating-toolbar/ui/Toolbar.js

@@ -67,8 +67,6 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = _interopRequireDefault(require("./messages"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _decoration = require("../../base/pm-plugins/decoration");
 
 var _ScrollButtons = _interopRequireDefault(require("./ScrollButtons"));
@@ -286,9 +284,9 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
 
 var toolbarContainer = function toolbarContainer(theme, scrollable, hasSelect, firstElementIsSelect) {
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div > div {\n    align-items: center;\n  }\n  ", "\n"])), (0, _components.themed)({
-    light: (0, _tokens.token)('elevation.surface.overlay', 'white'),
-    dark: (0, _tokens.token)('elevation.surface.overlay', _colors.DN70)
-  })(theme), (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', "0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)"), scrollable ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n              height: 40px;\n            "]))) : (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n              height: 32px;\n            "])))) : (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        padding: ", "px ", "px;\n        ", "\n      "])), akGridSize / 2, akGridSize, firstElementIsSelect && (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n          padding-left: ", "px;\n        "])), akGridSize / 2)));
+    light: "var(--ds-surface-overlay, white)",
+    dark: "var(--ds-surface-overlay, ".concat(_colors.DN70, ")")
+  })(theme), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"), scrollable ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n              height: 40px;\n            "]))) : (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n              height: 32px;\n            "])))) : (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        padding: ", "px ", "px;\n        ", "\n      "])), akGridSize / 2, akGridSize, firstElementIsSelect && (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n          padding-left: ", "px;\n        "])), akGridSize / 2)));
 };
 
 var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
@@ -386,13 +384,6 @@ var Toolbar = /*#__PURE__*/function (_Component) {
 
     (0, _classCallCheck2.default)(this, Toolbar);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusToolbar", function (event) {
-      if (event.altKey && event.keyCode === 121) {
-        var _getFirstFocusableEle, _this$toolbarContaine;
-
-        (_getFirstFocusableEle = (0, _utils.getFirstFocusableElement)((_this$toolbarContaine = _this.toolbarContainerRef) === null || _this$toolbarContaine === void 0 ? void 0 : _this$toolbarContaine.current)) === null || _getFirstFocusableEle === void 0 ? void 0 : _getFirstFocusableEle.focus();
-      }
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shouldHandleArrowKeys", function () {
       var _this$props$items;
 
@@ -469,7 +460,6 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       this.setState({
         mounted: true
       });
-      document.addEventListener('keydown', this.focusToolbar);
     }
   }, {
     key: "componentDidUpdate",
@@ -486,13 +476,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       this.resetStyling({
         table: this.props.node.type.name === 'table'
       });
-      document.removeEventListener('keydown', this.focusToolbar);
     }
-    /**
-     * To listen to keyboard shortcut Alt+F10 and focus floating toolbar's first focusable element.
-     * @param event
-     */
-
   }, {
     key: "render",
     value: function render() {
@@ -512,11 +496,18 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       var hasSelect = items.find(function (item) {
         return item.type === 'select' && item.selectType === 'list';
       });
+
+      var isShortcutToFocusToolbar = function isShortcutToFocusToolbar(event) {
+        //Alt + F10 to reach first element in this floating toolbar
+        return event.altKey && (event.key === 'F10' || event.keyCode === 121);
+      };
+
       return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_ToolbarArrowKeyNavigationProvider.ToolbarArrowKeyNavigationProvider, {
         editorView: this.props.editorView,
         handleEscape: this.handleEscape,
         disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
-        childComponentSelector: "[data-testid='editor-floating-toolbar']"
+        childComponentSelector: "[data-testid='editor-floating-toolbar']",
+        isShortcutToFocusToolbar: isShortcutToFocusToolbar
       }, (0, _react2.jsx)("div", {
         ref: this.toolbarContainerRef,
         css: function css(theme) {

package/dist/cjs/plugins/floating-toolbar/ui/styles.js

@@ -11,8 +11,6 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _tokens = require("@atlaskit/tokens");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
@@ -24,28 +22,28 @@ var background = {
       dark: 'inherit'
     },
     hover: {
-      light: (0, _tokens.token)('color.background.neutral.subtle.hovered', colors.N30A),
-      dark: (0, _tokens.token)('color.background.neutral.subtle.hovered', colors.N30A)
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")")
     },
     active: {
-      light: (0, _tokens.token)('color.background.neutral.pressed', "".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6))),
-      dark: (0, _tokens.token)('color.background.neutral.pressed', "".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)))
+      light: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")"),
+      dark: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")")
     }
   }
 };
 var color = {
   danger: {
     default: {
-      light: (0, _tokens.token)('color.icon', colors.N400),
-      dark: (0, _tokens.token)('color.icon', colors.DN400)
+      light: "var(--ds-icon, ".concat(colors.N400, ")"),
+      dark: "var(--ds-icon, ".concat(colors.DN400, ")")
     },
     hover: {
-      light: (0, _tokens.token)('color.icon.danger', colors.R400),
-      dark: (0, _tokens.token)('color.icon.danger', colors.R400)
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
     },
     active: {
-      light: (0, _tokens.token)('color.icon.danger', colors.R400),
-      dark: (0, _tokens.token)('color.icon.danger', colors.R400)
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
     }
   }
 };

package/dist/cjs/plugins/grid/styles.js

@@ -15,11 +15,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var GRID_GUTTER = 12;
 exports.GRID_GUTTER = GRID_GUTTER;
-var gridStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, _editorSharedStyles.akEditorGridLineZIndex, (0, _tokens.token)('color.border', _colors.N30A), (0, _tokens.token)('color.border.focused', _colors.B200));
+var gridStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, _editorSharedStyles.akEditorGridLineZIndex, "var(--ds-border, ".concat(_colors.N30A, ")"), "var(--ds-border-focused, ".concat(_colors.B200, ")"));
 exports.gridStyles = gridStyles;

package/dist/cjs/plugins/help-dialog/ui/styles.js

@@ -19,21 +19,19 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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 header = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(24), (0, _tokens.token)('color.text', colors.N400), (0, _tokens.token)('color.background.neutral.subtle', colors.N0), (0, _constants.borderRadius)());
+var header = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(24), "var(--ds-text, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"), (0, _constants.borderRadius)());
 exports.header = header;
-var footer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), (0, _tokens.token)('color.text.subtlest', colors.N300));
+var footer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), "var(--ds-text-subtlest, ".concat(colors.N300, ")"));
 exports.footer = footer;
-var contentWrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 20px 44px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), (0, _constants.borderRadius)(), (0, _tokens.token)('color.text.subtle', colors.N400), (0, _tokens.token)('color.background.neutral.subtle', colors.N0));
+var contentWrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 20px 44px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), (0, _constants.borderRadius)(), "var(--ds-text-subtle, ".concat(colors.N400, ")"), "var(--ds-background-neutral-subtle, ".concat(colors.N0, ")"));
 exports.contentWrapper = contentWrapper;
-var line = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), (0, _tokens.token)('color.background.neutral.subtle', '#fff'));
+var line = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])), "var(--ds-background-neutral-subtle, #fff)");
 exports.line = line;
 var content = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
 exports.content = content;
@@ -50,7 +48,7 @@ var dialogHeader = {
   '&': {
     fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(24),
     fontWeight: 400,
-    color: (0, _tokens.token)('color.text.subtle', colors.N400),
+    color: "var(--ds-text-subtle, ".concat(colors.N400, ")"),
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
@@ -60,15 +58,15 @@ var title = {
   '&': {
     fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(18),
     fontWeight: 400,
-    color: (0, _tokens.token)('color.text.subtle', colors.N400),
+    color: "var(--ds-text-subtle, ".concat(colors.N400, ")"),
     letterSpacing: 'normal',
     lineHeight: 1.42857142857143
   }
 };
 exports.title = title;
-var codeSm = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), (0, _tokens.token)('color.background.neutral', colors.N20), (0, _constants.borderRadius)());
+var codeSm = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
 exports.codeSm = codeSm;
-var codeMd = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), (0, _tokens.token)('color.background.neutral', colors.N20), (0, _constants.borderRadius)());
+var codeMd = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
 exports.codeMd = codeMd;
-var codeLg = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), (0, _tokens.token)('color.background.neutral', colors.N20), (0, _constants.borderRadius)());
+var codeLg = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), "var(--ds-background-neutral, ".concat(colors.N20, ")"), (0, _constants.borderRadius)());
 exports.codeLg = codeLg;

package/dist/cjs/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -47,8 +47,6 @@ var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/page/16"));
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -99,9 +97,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var RECENT_SEARCH_LIST_SIZE = 5;
 exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
-var clearText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: 8px;\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), (0, _tokens.token)('color.icon.subtle', _colors.N90));
-var textInputWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), _ToolbarComponents.inputWrapper, (0, _tokens.token)('color.border', _colors.N30), (0, _tokens.token)('color.border', _colors.N30));
-var iconWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), (0, _tokens.token)('color.icon.subtle', _colors.N80));
+var clearText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: 8px;\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), "var(--ds-icon-subtle, ".concat(_colors.N90, ")"));
+var textInputWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), _ToolbarComponents.inputWrapper, "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-border, ".concat(_colors.N30, ")"));
+var iconWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  padding: 4px 8px;\n  width: 18px;\n"])), "var(--ds-icon-subtle, ".concat(_colors.N80, ")"));
 var messages = (0, _reactIntlNext.defineMessages)({
   displayText: {
     id: 'fabric.editor.displayText',
@@ -1007,6 +1005,7 @@ var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
       }), displayUrl && (0, _react2.jsx)(_tooltip.default, {
         content: formatClearLinkText
       }, (0, _react2.jsx)("button", {
+        type: "button",
         css: clearText,
         onClick: this.handleClearText
       }, (0, _react2.jsx)(_crossCircle.default, {
@@ -1034,6 +1033,7 @@ var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
       }), displayText && (0, _react2.jsx)(_tooltip.default, {
         content: formatMessage(messages.clearText)
       }, (0, _react2.jsx)("button", {
+        type: "button",
         css: clearText,
         onClick: this.handleClearDisplayText,
         onKeyDown: this.handleClearTextKeyDown

package/dist/cjs/plugins/jira-issue/nodeviews/jira-issue.js

@@ -19,12 +19,10 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3;
 
-var wrapperNode = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\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 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), (0, _tokens.token)('color.background.neutral', _colors.N30), (0, _tokens.token)('color.border', _colors.N50), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), (0, _tokens.token)('color.background.selected', _colors.N50));
-var jiraChildNode = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  color: ", ";\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: ", ";\n    content: 'JIRA | ';\n  }\n"])), (0, _tokens.token)('color.text.subtlest', '#707070'), (0, _tokens.token)('color.text', 'black'));
+var wrapperNode = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\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 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-border, ".concat(_colors.N50, ")"), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), "var(--ds-background-selected, ".concat(_colors.N50, ")"));
+var jiraChildNode = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  color: ", ";\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: ", ";\n    content: 'JIRA | ';\n  }\n"])), "var(--ds-text-subtlest, #707070)", "var(--ds-text, black)");
 var svgChildNode = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n\n  & > div {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 
 function JIRAIssueNode(props) {

package/dist/cjs/plugins/layout/styles.js

@@ -31,13 +31,11 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _types = require("@atlaskit/editor-plugin-table/types");
 
 var _consts = require("@atlaskit/editor-plugin-table/ui/consts");
 
 var _templateObject;
 
-var layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border', _colors.N40A), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, (0, _tokens.token)('color.border', _colors.N50A), (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
+var layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, "var(--ds-border, ".concat(_colors.N50A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
 exports.layoutStyles = layoutStyles;

package/dist/cjs/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -57,8 +57,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _ui = require("@atlaskit/editor-common/ui");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -74,12 +72,12 @@ exports.CONTAINER_WIDTH_IN_PX = CONTAINER_WIDTH_IN_PX;
 var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
 exports.MAX_ALT_TEXT_LENGTH = MAX_ALT_TEXT_LENGTH;
-var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N100), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), (0, _tokens.token)('color.border', _colors.N30));
+var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  padding: 12px 40px;\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-border, ".concat(_colors.N30, ")"));
 var container = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
 var inputWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
-var validationWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 12px 0 40px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), (0, _tokens.token)('color.border.danger', _colors.R400));
+var validationWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 12px 0 40px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), "var(--ds-border-danger, ".concat(_colors.R400, ")"));
 var buttonWrapper = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: 4px 8px;\n"])));
-var clearText = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.icon.subtle', _colors.N80));
+var clearText = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-icon-subtle, ".concat(_colors.N80, ")"));
 
 var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(AltTextEditComponent, _React$Component);

package/dist/cjs/plugins/media/styles.js

@@ -19,11 +19,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _mediaCard = require("@atlaskit/media-card");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, (0, _tokens.token)('color.border', _colors.N60), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, (0, _tokens.token)('color.border.focused', _colors.B200), (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _editorSharedStyles.akEditorSelectedBorderBoldSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _mediaCard.fileCardImageViewSelectedSelector, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), (0, _tokens.token)('color.icon.danger', _editorSharedStyles.akEditorDeleteIconColor), (0, _tokens.token)('color.blanket.danger', 'rgb(255, 189, 173, 0.5)'));
+var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _mediaCard.fileCardImageViewSelectedSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on
  * the page, without a border, that are inside a flexbox, to no longer align to

package/dist/cjs/plugins/media/ui/CaptionPlaceholder/index.js

@@ -17,13 +17,11 @@ var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _messages = require("./messages");
 
 var _templateObject;
 
-var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200));
+var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 var CAPTION_PLACEHOLDER_ID = 'caption-placeholder';
 exports.CAPTION_PLACEHOLDER_ID = CAPTION_PLACEHOLDER_ID;
 

package/dist/cjs/plugins/media/ui/Media/DropPlaceholder.js

@@ -23,14 +23,12 @@ var _reactIntlNext = require("react-intl-next");
 
 var _dropPlaceholderMessages = require("./drop-placeholder-messages");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _media = require("../../nodeviews/mediaNodeView/media");
 
 var _templateObject, _templateObject2;
 
-var iconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), (0, _tokens.token)('color.icon.accent.blue', (0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400), (0, _tokens.token)('color.background.accent.blue.subtle', (0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300), (0, _constants.borderRadius)(), _media.FILE_WIDTH, _media.MEDIA_HEIGHT);
-var dropLine = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), (0, _tokens.token)('color.border.focused', _colors.B200), (0, _constants.borderRadius)());
+var iconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-icon-accent-blue, ".concat((0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400, ")"), "var(--ds-background-accent-blue-subtle, ".concat((0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300, ")"), (0, _constants.borderRadius)(), _media.FILE_WIDTH, _media.MEDIA_HEIGHT);
+var dropLine = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: 2px 0;\n  width: 100%;\n  height: 2px;\n"])), "var(--ds-border-focused, ".concat(_colors.B200, ")"), (0, _constants.borderRadius)());
 
 var IconWrapperComponent = function IconWrapperComponent(props) {
   var intl = props.intl;

package/dist/cjs/plugins/media/ui/MediaLinkingToolbar.js

@@ -55,8 +55,6 @@ var _enums = require("../../analytics/types/enums");
 
 var _mediaLinkingToolbarMessages = require("./media-linking-toolbar-messages");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -67,7 +65,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var validationWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), (0, _tokens.token)('color.border.danger', _colors.R400));
+var validationWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 0;\n  padding: 12px 24px 12px 0;\n  margin: 0 4px 0 32px;\n  border-top: 1px solid ", ";\n  align-items: start;\n  display: flex;\n  flex-direction: column;\n"])), "var(--ds-border-danger, ".concat(_colors.R400, ")"));
 var buttonWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 4px 8px 4px 0px;\n"])));
 
 var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {

package/dist/cjs/plugins/mentions/styles.js

@@ -17,9 +17,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var mentionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), (0, _tokens.token)('color.text.subtle', _colors.N500), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackgroundWithOpacity), _mention.MentionSharedCssClassName.MENTION_CONTAINER, (0, _tokens.token)('color.background.neutral', _colors.N30A), (0, _tokens.token)('color.text.subtle', _colors.N500));
+var mentionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(_colors.N500, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(_colors.N30A, ")"), "var(--ds-text-subtle, ".concat(_colors.N500, ")"));
 exports.mentionsStyles = mentionsStyles;

package/dist/cjs/plugins/mentions/ui/InviteItem/index.js

@@ -17,8 +17,6 @@ var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _react2 = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -78,7 +76,7 @@ var InviteItem = function InviteItem(_ref) {
     css: _styles.avatarStyle
   }, (0, _react.jsx)(_add.default, {
     label: intl.formatMessage(_messages.messages.mentionsAddLabel),
-    primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N300)
+    primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N300, ")")
   })), (0, _react.jsx)("div", {
     css: _styles.nameSectionStyle,
     "data-testid": "name-section"

package/dist/cjs/plugins/mentions/ui/InviteItem/styles.js

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 var ROW_SIDE_PADDING = 14;
@@ -25,11 +23,11 @@ var AVATAR_HEIGHT = 36;
 exports.AVATAR_HEIGHT = AVATAR_HEIGHT;
 var avatarStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  flex: initial;\n  opacity: inherit;\n  width: 36px;\n  height: ", "px;\n\n  > span {\n    width: 24px;\n    height: 24px;\n    padding: 6px;\n  }\n"])), AVATAR_HEIGHT);
 exports.avatarStyle = avatarStyle;
-var nameSectionStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), (0, _tokens.token)('color.text.subtle', _colors.N300));
+var nameSectionStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), "var(--ds-text-subtle, ".concat(_colors.N300, ")"));
 exports.nameSectionStyle = nameSectionStyle;
 var mentionItemStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: transparent;\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: pointer;\n"])));
 exports.mentionItemStyle = mentionItemStyle;
-var mentionItemSelectedStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30));
+var mentionItemSelectedStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"));
 exports.mentionItemSelectedStyle = mentionItemSelectedStyle;
 var capitalizedStyle = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: capitalize;\n"])));
 exports.capitalizedStyle = capitalizedStyle;

package/dist/cjs/plugins/panel/styles.js

@@ -15,12 +15,10 @@ var _panel = require("@atlaskit/editor-common/panel");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var panelStyles = function panelStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _panel.PanelSharedCssClassName.icon, (0, _tokens.token)('color.icon.danger', _editorSharedStyles.akEditorDeleteIconColor), _panel.PanelSharedCssClassName.content, _panel.PanelSharedCssClassName.prefix, (0, _tokens.token)('color.blanket.danger', _editorSharedStyles.akEditorDeleteBackgroundWithOpacity), _panel.PanelSharedCssClassName.icon, (0, _tokens.token)('color.icon.danger', _editorSharedStyles.akEditorDeleteIconColor), (0, _panel.panelSharedStyles)(props), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _panel.PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _panel.PanelSharedCssClassName.content, _panel.PanelSharedCssClassName.prefix, "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _panel.PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), (0, _panel.panelSharedStyles)(props), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
 };
 
 exports.panelStyles = panelStyles;

package/dist/cjs/plugins/placeholder/styles.js

@@ -13,9 +13,7 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var placeholderStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .placeholder-decoration {\n    color: ", ";\n    width: 100%;\n    pointer-events: none;\n    user-select: none;\n  }\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200));
+var placeholderStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .placeholder-decoration {\n    color: ", ";\n    width: 100%;\n    pointer-events: none;\n    user-select: none;\n  }\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 exports.placeholderStyles = placeholderStyles;

package/dist/cjs/plugins/placeholder-text/styles.js

@@ -15,9 +15,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var placeholderTextStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N300), (0, _tokens.token)('color.text.subtlest', _colors.N300), (0, _tokens.token)('color.text.subtlest', _colors.N300), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background]), (0, _tokens.token)('color.text.subtlest', _colors.N300));
+var placeholderTextStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror span[data-placeholder] {\n    color: ", ";\n    display: inline;\n  }\n\n  .ProseMirror span.pm-placeholder {\n    display: inline;\n    color: ", ";\n  }\n  .ProseMirror span.pm-placeholder__text {\n    display: inline;\n    color: ", ";\n  }\n\n  .ProseMirror span.pm-placeholder.", " {\n    ", "\n  }\n\n  .ProseMirror span.pm-placeholder__text[data-placeholder]::after {\n    color: ", ";\n    cursor: text;\n    content: attr(data-placeholder);\n    display: inline;\n  }\n"])), "var(--ds-text-subtlest, ".concat(_colors.N300, ")"), "var(--ds-text-subtlest, ".concat(_colors.N300, ")"), "var(--ds-text-subtlest, ".concat(_colors.N300, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtlest, ".concat(_colors.N300, ")"));
 exports.placeholderTextStyles = placeholderTextStyles;

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

@@ -15,12 +15,10 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var ruleStyles = function ruleStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), (0, _styles.ruleSharedStyles)(props), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _tokens.token)('color.border.selected', _editorSharedStyles.akEditorSelectedBorderColor));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), (0, _styles.ruleSharedStyles)(props), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(_editorSharedStyles.akEditorSelectedBorderColor, ")"));
 };
 
 exports.ruleStyles = ruleStyles;