@atlaskit/editor-core 197.7.0 → 197.7.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-core
 
+## 197.7.1
+
+### Patch Changes
+
+- [#140717](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140717)
+  [`142a506a3f170`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/142a506a3f170) -
+  ED-24958 prevent confluence full page editor crashing when loading from draft doc
+- [#140717](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140717)
+  [`d3922f33f7268`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3922f33f7268) -
+  [ux] Removing token fallbacks for styling. For apps supporting tokens this has no difference, for
+  those not there may be slight variations in colors to align with tokens.
+- [#140665](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140665)
+  [`a578027283b8c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a578027283b8c) -
+  added deprecation notice to the Legacy Editor Component
+
 ## 197.7.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -61,9 +61,6 @@
         {
             "path": "../../../elements/task-decision/afm-cc/tsconfig.json"
         },
-        {
-            "path": "../../../design-system/theme/afm-cc/tsconfig.json"
-        },
         {
             "path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
         },

package/dist/cjs/create-editor/ReactEditorView.js

@@ -30,6 +30,7 @@ var _ufo = require("@atlaskit/editor-common/ufo");
 var _analytics2 = require("@atlaskit/editor-common/utils/analytics");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _eventDispatcher = require("../event-dispatcher");
 var _context = require("../presets/context");
 var _findChangedNodesFromTransaction = require("../utils/findChangedNodesFromTransaction");
@@ -217,10 +218,18 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
       });
       _this.contentTransformer = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
       var doc;
+      var api = _this.pluginInjectionAPI.api();
+      // If we have a doc prop, we need to process it into a PMNode
+
       if (options.doc) {
-        doc = (0, _processRawValue.processRawValue)(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, _this.contentTransformer, _this.dispatchAnalyticsEvent);
+        // if the collabEdit API is set, skip this validation due to potential pm validation errors
+        // from docs that end up with invalid marks after processing (See #hot-111702 for more details)
+        if ((api === null || api === void 0 ? void 0 : api.collabEdit) !== undefined && (0, _platformFeatureFlags.fg)('editor_load_conf_collab_docs_without_checks')) {
+          doc = (0, _processRawValue.processRawValueWithoutTransformation)(schema, options.doc);
+        } else {
+          doc = (0, _processRawValue.processRawValue)(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, _this.contentTransformer, _this.dispatchAnalyticsEvent);
+        }
       }
-      var api = _this.pluginInjectionAPI.api();
       var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState().mode) === 'view';
       var selection;
       if (doc) {

package/dist/cjs/editor.js

@@ -33,6 +33,13 @@ var ComposableEditorWrapper = function ComposableEditorWrapper(_ref) {
     preset: preset
   }, props));
 };
+/**
+ * @deprecated - Please use the `ComposableEditor` component instead.
+ * We strongly encourage the use of custom presets, however your easiest migration path is to use the `useUniversalPreset` hook.
+ * The `ComposableEditor` component is a more flexible and customizable alternative to the `Editor` component.
+ * It allows you to create an editor with a custom set of plugins and configurations.
+ * For more information, see the documentation for the `ComposableEditor` component here: https://atlaskit.atlassian.com/packages/editor/editor-core
+ */
 var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Editor, _React$Component);
   var _super = _createSuper(Editor);

package/dist/cjs/ui/Addon/Dropdown/styles.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.dropdown = void 0;
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -15,8 +13,8 @@ var dropdown = exports.dropdown = (0, _react.css)({
   flexDirection: 'column',
   background: "var(--ds-surface-overlay, white)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
   boxSizing: 'border-box',
   padding: "var(--ds-space-050, 4px)".concat(" 0")
 });

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -20,8 +20,6 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _messages = _interopRequireDefault(require("../../../messages"));
 var _Addon = require("../../Addon");
 var _ContentStyles = require("../../ContentStyles");
@@ -49,10 +47,10 @@ var commentEditorStyles = (0, _react2.css)({
   minWidth: '272px',
   height: 'auto',
   backgroundColor: "var(--ds-background-input, white)",
-  border: "1px solid ".concat("var(--ds-border-input, ".concat(_colors.N100, ")")),
+  border: "1px solid ".concat("var(--ds-border-input, #8590A2)"),
   boxSizing: 'border-box',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  borderRadius: "var(--ds-border-radius, 3px)",
   maxWidth: 'inherit',
   wordWrap: 'break-word'
 });

package/dist/cjs/ui/ChromeCollapsed/styles.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.inputStyle = void 0;
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -18,7 +16,7 @@ var inputStyle = exports.inputStyle = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     border: "1px solid ".concat("var(--ds-border-input, ".concat(_editorSharedStyles.akEditorSubtleAccent, ")")),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+    borderRadius: "var(--ds-border-radius, 3px)",
     boxSizing: 'border-box',
     height: '40px',
     paddingLeft: "var(--ds-space-250, 20px)",
@@ -30,10 +28,10 @@ var inputStyle = exports.inputStyle = (0, _react.css)({
     fontWeight: 400,
     lineHeight: 1.42857142857143,
     letterSpacing: '-0.005em',
-    color: "var(--ds-text-subtlest, ".concat(_colors.N300, ")"),
+    color: "var(--ds-text-subtlest, #626F86)",
     '&:hover': {
       backgroundColor: "var(--ds-background-input-hovered, white)",
-      borderColor: "var(--ds-border-input, ".concat(_colors.N50, ")"),
+      borderColor: "var(--ds-border-input, #8590A2)",
       cursor: 'text'
     }
   }

package/dist/cjs/ui/ContentStyles/ai-panels.js

@@ -8,7 +8,6 @@ exports.aiPanelStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 var _aiPrismColor, _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -69,7 +68,7 @@ var prismBorderStyles = function prismBorderStyles(colorMode, hover) {
     borderRadius: "calc(".concat("var(--ds-border-radius-100, 3px)", " + 1px)"),
     transform: 'translate3d(0, 0, 0)'
   }, hover ? {
-    background: "var(--ds-border-input, ".concat(_colors.N500, ")")
+    background: "var(--ds-border-input, #8590A2)"
   } : isFirefox ? {
     background: "linear-gradient(90deg,\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 12%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 24%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 48%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 64%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 80%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1'][colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], " 100%\n\t\t\t\t\t\t\t)"),
     backgroundSize: '200%'
@@ -80,5 +79,5 @@ var prismBorderStyles = function prismBorderStyles(colorMode, hover) {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 var aiPanelStyles = exports.aiPanelStyles = function aiPanelStyles(colorMode) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value: 270deg;\n\t\tinherits: false;\n\t}\n\n\tdiv[extensionType='com.atlassian.ai-blocks'] {\n\t\t// This hides the label for the extension\n\t\t.extension-label {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t// This styles the ai panel correctly when its just sitting on the page and there\n\t\t// is no user interaction\n\t\t.extension-container {\n\t\t\tposition: relative;\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\tbackground-color: ", " !important;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t&.with-hover-border {\n\t\t\t\t&::before,\n\t\t\t\t&::after {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t\t& .with-margin-styles {\n\t\t\t\tbackground-color: ", " !important;\n\t\t\t\tborder-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when its streaming\n\tdiv[extensionType='com.atlassian.ai-blocks']:has(.streaming) {\n\t\t.extension-container {\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\t", "\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when a user is hovering over the delete button in the floating panel\n\tdiv[extensionType='com.atlassian.ai-blocks'].danger {\n\t\t.extension-container {\n\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t}\n\t}\n\n\t// This removes the margin from the action list when inside an ai panel\n\tdiv[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {\n\t\tdiv[data-node-type='actionList'] {\n\t\t\tmargin: 0 !important;\n\t\t}\n\t}\n"])), "var(--ds-surface, ".concat(_colors.N0, ")"), prismBorderStyles(colorMode), prismBorderStyles(colorMode, true), "var(--ds-surface, ".concat(_colors.N0, ")"), "var(--ds-border-radius-100, 3px)", prismBorderAnimationStyles, prismBorderStyles(colorMode), "var(--ds-border-danger, ".concat(_colors.R400, ")"));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value: 270deg;\n\t\tinherits: false;\n\t}\n\n\tdiv[extensionType='com.atlassian.ai-blocks'] {\n\t\t// This hides the label for the extension\n\t\t.extension-label {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t// This styles the ai panel correctly when its just sitting on the page and there\n\t\t// is no user interaction\n\t\t.extension-container {\n\t\t\tposition: relative;\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\tbackground-color: ", " !important;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t&.with-hover-border {\n\t\t\t\t&::before,\n\t\t\t\t&::after {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t\t& .with-margin-styles {\n\t\t\t\tbackground-color: ", " !important;\n\t\t\t\tborder-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when its streaming\n\tdiv[extensionType='com.atlassian.ai-blocks']:has(.streaming) {\n\t\t.extension-container {\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\t", "\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t// This styles the ai panel correctly when a user is hovering over the delete button in the floating panel\n\tdiv[extensionType='com.atlassian.ai-blocks'].danger {\n\t\t.extension-container {\n\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t}\n\t}\n\n\t// This removes the margin from the action list when inside an ai panel\n\tdiv[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {\n\t\tdiv[data-node-type='actionList'] {\n\t\t\tmargin: 0 !important;\n\t\t}\n\t}\n"])), "var(--ds-surface, #FFFFFF)", prismBorderStyles(colorMode), prismBorderStyles(colorMode, true), "var(--ds-surface, #FFFFFF)", "var(--ds-border-radius-100, 3px)", prismBorderAnimationStyles, prismBorderStyles(colorMode), "var(--ds-border-danger, #E2483D)");
 };

package/dist/cjs/ui/ContentStyles/code-block.js

@@ -9,7 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
@@ -21,5 +20,5 @@ var GutterDangerOverlay = function GutterDangerOverlay() {
 /* When code-block is inside the panel  */
 var firstCodeBlockWithNoMargin = (0, _experiments.editorExperiment)('nested-dnd', true) ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t.ak-editor-panel__content {\n\t\t\t\t> .code-block:first-child,\n\t\t\t\t> .ProseMirror-widget:first-child + .code-block,\n\t\t\t\t> .ProseMirror-widget:first-child + .ProseMirror-widget + .code-block {\n\t\t\t\t\tmargin: 0 0 0 0 !important;\n\t\t\t\t}\n\t\t\t}\n\t\t"]))) : (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t.ak-editor-panel__content {\n\t\t\t\t> .code-block:first-child {\n\t\t\t\t\tmargin: 0 0 0 0 !important;\n\t\t\t\t}\n\t\t\t}\n\t\t"])));
 var codeBlockStyles = exports.codeBlockStyles = function codeBlockStyles() {
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror li {\n\t\t/* if same list item has multiple code blocks we need top margin for all but first */\n\t\t> .code-block {\n\t\t\tmargin: ", " 0 0 0;\n\t\t}\n\t\t> .code-block:first-child,\n\t\t> .ProseMirror-gapcursor:first-child + .code-block {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t> div:last-of-type.code-block {\n\t\t\tmargin-bottom: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror .code-block.", ":not(.danger) {\n\t\t", "\n\t}\n\n\t/* Danger when top level node */\n\t.ProseMirror .danger.code-block {\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t\t", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t/* Danger when nested node */\n\t.ProseMirror .danger .code-block {\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t\t", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t", "\n"])), (0, _styles.codeBlockSharedStyles)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, ".concat(_colors.R75, ")"), "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, rgba(255, 143, 115, 0.5))", "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))", firstCodeBlockWithNoMargin);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror li {\n\t\t/* if same list item has multiple code blocks we need top margin for all but first */\n\t\t> .code-block {\n\t\t\tmargin: ", " 0 0 0;\n\t\t}\n\t\t> .code-block:first-child,\n\t\t> .ProseMirror-gapcursor:first-child + .code-block {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t> div:last-of-type.code-block {\n\t\t\tmargin-bottom: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror .code-block.", ":not(.danger) {\n\t\t", "\n\t}\n\n\t/* Danger when top level node */\n\t.ProseMirror .danger.code-block {\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t\t", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t/* Danger when nested node */\n\t.ProseMirror .danger .code-block {\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t\t", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t", "\n"])), (0, _styles.codeBlockSharedStyles)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, #FFECEB)", "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-danger, rgba(255, 143, 115, 0.5))", "var(--ds-text-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), GutterDangerOverlay(), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))", firstCodeBlockWithNoMargin);
 };

package/dist/cjs/ui/ContentStyles/expand.js

@@ -10,17 +10,16 @@ var _react = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var EXPAND_SELECTED_BACKGROUND = "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))";
 var EXPAND_ICON_COLOR = function EXPAND_ICON_COLOR() {
   return (0, _react.css)({
-    color: "var(--ds-icon-subtle, ".concat(_colors.N100A, ")")
+    color: "var(--ds-icon-subtle, #626F86)"
   });
 };
-var DANGER_STATE_BACKGROUND_COLOR = "var(--ds-background-danger, ".concat(_colors.R50, ")");
-var DANGER_STATE_BORDER_COLOR = "var(--ds-border-danger, ".concat(_colors.R300, ")");
+var DANGER_STATE_BACKGROUND_COLOR = "var(--ds-background-danger, #FFECEB)";
+var DANGER_STATE_BORDER_COLOR = "var(--ds-border-danger, #E2483D)";
 var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
   return (0, _experiments.editorExperiment)('nested-dnd', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> div.ak-editor-expand[data-node-type='nestedExpand'] {\n\t\t\t\t\tmargin-top: ", ";\n\t\t\t\t}\n\t\t\t"])), "var(--ds-space-050, 0.25rem)") : '';
@@ -35,5 +34,5 @@ var expandStyles = exports.expandStyles = function expandStyles() {
   })(), _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, _styles.expandClassNames.type('expand'), _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, _styles.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), _editorSharedStyles.akLayoutGutterOffset + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), _styles.expandClassNames.content, _styles.sharedExpandStyles.contentStyles({
     expanded: false,
     focused: false
-  })(), (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_expand_style_fix') && "overflow-x: clip;", _styles.expandClassNames.titleInput, _styles.sharedExpandStyles.titleInputStyles(), _styles.expandClassNames.titleContainer, _styles.sharedExpandStyles.titleContainerStyles(), _styles.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.expandClassNames.content, "var(--ds-space-100, 8px)", firstNodeWithNotMarginTop(), _styles.expandClassNames.inputContainer, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, ".concat(_colors.N50A, ")"), EXPAND_SELECTED_BACKGROUND);
+  })(), (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_expand_style_fix') && "overflow-x: clip;", _styles.expandClassNames.titleInput, _styles.sharedExpandStyles.titleInputStyles(), _styles.expandClassNames.titleContainer, _styles.sharedExpandStyles.titleContainerStyles(), _styles.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, #091E4224)", _styles.expandClassNames.content, "var(--ds-space-100, 8px)", firstNodeWithNotMarginTop(), _styles.expandClassNames.inputContainer, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, #091E4224)", EXPAND_SELECTED_BACKGROUND);
 };

package/dist/cjs/ui/ContentStyles/extension.js

@@ -8,10 +8,9 @@ exports.extensionStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-var extensionLabelStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t&.danger > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t&:not(.danger).", " > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t// Targets the icon for bodied macro styling in button label\n\t&.danger > span > div > .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t&:not(.danger).", " > span > div .extension-label > span {\n\t\tdisplay: inline;\n\t}\n"])), "var(--ds-background-accent-red-subtler, ".concat(_colors.R50, ")"), "var(--ds-text-danger, ".concat(_colors.R400, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-background-selected, ".concat(_colors.B50, ")"), "var(--ds-text-selected, ".concat(_colors.B400, ")"), _editorSharedStyles.akEditorSelectedNodeClassName);
+var extensionLabelStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t&.danger > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t&:not(.danger).", " > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t// Targets the icon for bodied macro styling in button label\n\t&.danger > span > div > .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t&:not(.danger).", " > span > div .extension-label > span {\n\t\tdisplay: inline;\n\t}\n"])), "var(--ds-background-accent-red-subtler, #FFD5D2)", "var(--ds-text-danger, #AE2E24)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-background-selected, #E9F2FF)", "var(--ds-text-selected, #0C66E4)", _editorSharedStyles.akEditorSelectedNodeClassName);
 var dangerOverlayStyles = (0, _react.css)({
   opacity: 0.3,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

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

@@ -22,7 +22,6 @@ var _styles4 = require("@atlaskit/editor-plugins/paste-options-toolbar/styles");
 var _styles5 = require("@atlaskit/editor-plugins/placeholder-text/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
 var _context = require("../../presets/context");
@@ -53,7 +52,7 @@ var linkStyles = exports.linkStyles = (0, _react2.css)(_templateObject || (_temp
 var ruleStyles = function ruleStyles() {
   return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", ";\n\n\t\thr {\n\t\t\tcursor: pointer;\n\t\t\tpadding: ", " 0;\n\t\t\tmargin: ", " 0;\n\t\t\tbackground-clip: content-box;\n\n\t\t\t&.", " {\n\t\t\t\toutline: none;\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), (0, _styles.ruleSharedStyles)(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(_editorSharedStyles.akEditorSelectedBorderColor, ")"));
 };
-var mentionsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\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, ")"));
+var mentionsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", _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, #091E420F)", "var(--ds-text-subtle, #44546F)");
 var listsStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t// In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\t// The following rule resets the first p tag back to its original margin\n\t\t\t// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n    // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n    &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
 var emojiStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tdisplay: inline-block;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t&.", " > span {\n\t\t\t\t/** needed for selection style to cover custom emoji image properly */\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
 
@@ -61,7 +60,7 @@ var emojiStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _
 var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.ProseMirror .placeholder-decoration': {
-    color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+    color: "var(--ds-text-subtlest, #626F86)",
     width: '100%',
     pointerEvents: 'none',
     userSelect: 'none',

package/dist/cjs/ui/ContentStyles/layout.js

@@ -23,7 +23,6 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _types = require("@atlaskit/editor-plugins/table/types");
 var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _templateObject, _templateObject2, _templateObject3; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
@@ -34,5 +33,5 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* 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\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "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);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* 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\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "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);
 };

package/dist/cjs/ui/ContentStyles/media.js

@@ -11,10 +11,9 @@ var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaCard = require("@atlaskit/media-card");
-var _colors = require("@atlaskit/theme/colors");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var mediaStyles = exports.mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n\t\t\tmargin-left: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\n\t\t.media-extended-resize-experience[layout^='wrap-'] {\n\t\t\t// override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n\t\t\t// to prevent scroll bar\n\t\t\toverflow: visible !important;\n\t\t}\n\n\t\t& [layout^='wrap-'] + [layout^='wrap-'] {\n\t\t\tclear: none;\n\t\t\t& + p,\n\t\t\t& + div[class^='fabric-editor-align'],\n\t\t\t& + ul,\n\t\t\t& + ol,\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tclear: both !important;\n\t\t\t}\n\t\t\t& .", " {\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.mediaSingleView-content-wrap[layout^='wrap-'] {\n\t\t\tmax-width: 100%;\n\t\t\t// overwrite default Prosemirror setting making it clear: both\n\t\t\tclear: inherit;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-left'] {\n\t\t\tfloat: left;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-right'] {\n\t\t\tfloat: right;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-right']\n\t\t\t+ .mediaSingleView-content-wrap[layout='wrap-left'] {\n\t\t\tclear: both;\n\t\t}\n\n\t\t/* Larger margins for resize handlers when at depth 0 of the document */\n\t\t& > .mediaSingleView-content-wrap {\n\t\t\t.richMedia-resize-handle-right {\n\t\t\t\tmargin-right: -", "px;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-left {\n\t\t\t\tmargin-left: -", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.richMedia-resize-handle-right,\n\t.richMedia-resize-handle-left {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\t/* vertical align */\n\t\tjustify-content: center;\n\t}\n\n\t.richMedia-resize-handle-right {\n\t\talign-items: flex-end;\n\t\tpadding-right: ", ";\n\t\tmargin-right: -", "px;\n\t}\n\n\t.richMedia-resize-handle-left {\n\t\talign-items: flex-start;\n\t\tpadding-left: ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.richMedia-resize-handle-right::after,\n\t.richMedia-resize-handle-left::after {\n\t\tcontent: ' ';\n\t\tdisplay: flex;\n\t\twidth: 3px;\n\t\theight: 64px;\n\n\t\tborder-radius: 6px;\n\t}\n\n\t.", ":hover .richMedia-resize-handle-left::after,\n\t.", ":hover .richMedia-resize-handle-right::after {\n\t\tbackground: ", ";\n\t}\n\n\t.", " .richMedia-resize-handle-right::after,\n\t.", " .richMedia-resize-handle-left::after,\n\t.", " .richMedia-resize-handle-right:hover::after,\n\t.", " .richMedia-resize-handle-left:hover::after,\n\t.", ".is-resizing .richMedia-resize-handle-right::after,\n\t.", ".is-resizing .richMedia-resize-handle-left::after {\n\t\tbackground: ", ";\n\t}\n\n\t.__resizable_base__ {\n\t\tleft: unset !important;\n\t\twidth: auto !important;\n\t\theight: auto !important;\n\t}\n\n\t/* Danger when top level node for smart cards / inline links */\n\t.danger > div > div > .media-card-frame,\n\t.danger > span > a {\n\t\tbackground-color: ", ";\n\t\tbox-shadow: 0px 0px 0px ", "px\n\t\t\t", ";\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tbox-shadow 0s;\n\t}\n\t/* Danger when nested node or common */\n\t.danger {\n\t\t/* Media single */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t/* Media single video player */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t/* New file experience */\n\t\t.", " .", " {\n\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t}\n\t\t/* Media resize legacy handlers */\n\t\t.richMedia-resize-handle-right::after,\n\t\t.richMedia-resize-handle-left::after {\n\t\t\tbackground: ", " !important;\n\t\t}\n\t\t/* Media resize new handlers */\n\t\t.resizer-handle-thumb {\n\t\t\tbackground: ", " !important;\n\t\t}\n\n\t\t/* Smart cards */\n\t\tdiv div .media-card-frame,\n\t\t.inlineCardView-content-wrap > span > a {\n\t\t\tbackground-color: ", "; /* R75 with 50% opactiy */\n\t\t\ttransition: background-color 0s;\n\t\t}\n\n\t\tdiv div .media-card-frame::after {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t.warning {\n\t\t/* Media single */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t.", " .", " {\n\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t}\n\n\t\t.resizer-handle-thumb {\n\t\t\tbackground: ", " !important;\n\t\t}\n\t}\n\n\t/* When clicking drag handle, mediaGroup node will be selected. Hence we need to apply selected style to each media node */\n\t.mediaGroupView-content-wrap.", " #newFileExperienceWrapper {\n\t\tbox-shadow: ", ";\n\t}\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _mediaInline.mediaInlineImageStyles, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _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, ")"), _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-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), "var(--ds-icon-warning, ".concat(_colors.Y500, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBoxShadow);
+var mediaStyles = exports.mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n\t\t\tmargin-left: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\n\t\t.media-extended-resize-experience[layout^='wrap-'] {\n\t\t\t// override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n\t\t\t// to prevent scroll bar\n\t\t\toverflow: visible !important;\n\t\t}\n\n\t\t& [layout^='wrap-'] + [layout^='wrap-'] {\n\t\t\tclear: none;\n\t\t\t& + p,\n\t\t\t& + div[class^='fabric-editor-align'],\n\t\t\t& + ul,\n\t\t\t& + ol,\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tclear: both !important;\n\t\t\t}\n\t\t\t& .", " {\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.mediaSingleView-content-wrap[layout^='wrap-'] {\n\t\t\tmax-width: 100%;\n\t\t\t// overwrite default Prosemirror setting making it clear: both\n\t\t\tclear: inherit;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-left'] {\n\t\t\tfloat: left;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-right'] {\n\t\t\tfloat: right;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-right']\n\t\t\t+ .mediaSingleView-content-wrap[layout='wrap-left'] {\n\t\t\tclear: both;\n\t\t}\n\n\t\t/* Larger margins for resize handlers when at depth 0 of the document */\n\t\t& > .mediaSingleView-content-wrap {\n\t\t\t.richMedia-resize-handle-right {\n\t\t\t\tmargin-right: -", "px;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-left {\n\t\t\t\tmargin-left: -", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.richMedia-resize-handle-right,\n\t.richMedia-resize-handle-left {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\t/* vertical align */\n\t\tjustify-content: center;\n\t}\n\n\t.richMedia-resize-handle-right {\n\t\talign-items: flex-end;\n\t\tpadding-right: ", ";\n\t\tmargin-right: -", "px;\n\t}\n\n\t.richMedia-resize-handle-left {\n\t\talign-items: flex-start;\n\t\tpadding-left: ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.richMedia-resize-handle-right::after,\n\t.richMedia-resize-handle-left::after {\n\t\tcontent: ' ';\n\t\tdisplay: flex;\n\t\twidth: 3px;\n\t\theight: 64px;\n\n\t\tborder-radius: 6px;\n\t}\n\n\t.", ":hover .richMedia-resize-handle-left::after,\n\t.", ":hover .richMedia-resize-handle-right::after {\n\t\tbackground: ", ";\n\t}\n\n\t.", " .richMedia-resize-handle-right::after,\n\t.", " .richMedia-resize-handle-left::after,\n\t.", " .richMedia-resize-handle-right:hover::after,\n\t.", " .richMedia-resize-handle-left:hover::after,\n\t.", ".is-resizing .richMedia-resize-handle-right::after,\n\t.", ".is-resizing .richMedia-resize-handle-left::after {\n\t\tbackground: ", ";\n\t}\n\n\t.__resizable_base__ {\n\t\tleft: unset !important;\n\t\twidth: auto !important;\n\t\theight: auto !important;\n\t}\n\n\t/* Danger when top level node for smart cards / inline links */\n\t.danger > div > div > .media-card-frame,\n\t.danger > span > a {\n\t\tbackground-color: ", ";\n\t\tbox-shadow: 0px 0px 0px ", "px\n\t\t\t", ";\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tbox-shadow 0s;\n\t}\n\t/* Danger when nested node or common */\n\t.danger {\n\t\t/* Media single */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t/* Media single video player */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t/* New file experience */\n\t\t.", " .", " {\n\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t}\n\t\t/* Media resize legacy handlers */\n\t\t.richMedia-resize-handle-right::after,\n\t\t.richMedia-resize-handle-left::after {\n\t\t\tbackground: ", " !important;\n\t\t}\n\t\t/* Media resize new handlers */\n\t\t.resizer-handle-thumb {\n\t\t\tbackground: ", " !important;\n\t\t}\n\n\t\t/* Smart cards */\n\t\tdiv div .media-card-frame,\n\t\t.inlineCardView-content-wrap > span > a {\n\t\t\tbackground-color: ", "; /* R75 with 50% opactiy */\n\t\t\ttransition: background-color 0s;\n\t\t}\n\n\t\tdiv div .media-card-frame::after {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t.warning {\n\t\t/* Media single */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t.", " .", " {\n\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t}\n\n\t\t.resizer-handle-thumb {\n\t\t\tbackground: ", " !important;\n\t\t}\n\t}\n\n\t/* When clicking drag handle, mediaGroup node will be selected. Hence we need to apply selected style to each media node */\n\t.mediaGroupView-content-wrap.", " #newFileExperienceWrapper {\n\t\tbox-shadow: ", ";\n\t}\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _mediaInline.mediaInlineImageStyles, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, #091E4224)", _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, #388BFF)", "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _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-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-warning, #E56910)", _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-warning, #E56910)", _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-warning, #E56910)", "var(--ds-icon-warning, #E56910)", _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBoxShadow);
 
 /* `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

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

@@ -20,7 +20,6 @@ var _Transition = _interopRequireDefault(require("react-transition-group/Transit
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _colors = require("@atlaskit/theme/colors");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
@@ -41,7 +40,7 @@ var panel = exports.panel = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transition: "width ".concat(ANIM_SPEED_MS, "ms ").concat(_editorSharedStyles.akEditorSwoopCubicBezier),
   overflow: 'hidden',
-  boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
+  boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #091E4224)")
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/cjs/ui/ToolbarFeedback/styles.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.wrapper = exports.confirmationText = exports.confirmationPopup = exports.confirmationImg = exports.confirmationHeader = exports.buttonContent = void 0;
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -26,10 +24,10 @@ var wrapper = exports.wrapper = (0, _react.css)({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var confirmationPopup = exports.confirmationPopup = (0, _react.css)({
-  background: "var(--ds-surface-overlay, #fff)",
+  background: "var(--ds-surface-overlay, #FFFFFF)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
   display: 'flex',
   flexDirection: 'column',
   boxSizing: 'border-box',
@@ -45,7 +43,7 @@ var confirmationText = exports.confirmationText = (0, _react.css)({
   fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(14),
   wordSpacing: '4px',
   lineHeight: '22px',
-  color: "var(--ds-text-subtle, ".concat(_colors.N400, ")"),
+  color: "var(--ds-text-subtle, #44546F)",
   marginTop: "var(--ds-space-400, 32px)",
   padding: "var(--ds-space-250, 20px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -64,7 +62,7 @@ var confirmationText = exports.confirmationText = (0, _react.css)({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var confirmationHeader = exports.confirmationHeader = (0, _react.css)({
-  backgroundColor: "var(--ds-background-discovery-bold, ".concat(_colors.P400, ")"),
+  backgroundColor: "var(--ds-background-discovery-bold, #6E5DC6)",
   height: '100px',
   width: '100%',
   display: 'inline-block'

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

@@ -14,7 +14,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
@@ -22,18 +21,18 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var pulseBackground = (0, _react2.keyframes)({
   '50%': {
-    backgroundColor: "var(--ds-blanket-danger, ".concat(_colors.R100, ")")
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
   }
 });
 var pulseBackgroundReverse = (0, _react2.keyframes)({
   '0%': {
-    backgroundColor: "var(--ds-blanket-danger, ".concat(_colors.R100, ")")
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
   },
   '50%': {
     backgroundColor: 'auto'
   },
   '100%': {
-    backgroundColor: "var(--ds-blanket-danger, ".concat(_colors.R100, ")")
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
   }
 });
 var flashWrapper = (0, _react2.css)({

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "197.7.0";
+var version = exports.version = "197.7.1";

package/dist/es2019/create-editor/ReactEditorView.js

@@ -11,11 +11,12 @@ import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-m
 import { measureRender } from '@atlaskit/editor-common/performance/measure-render';
 import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
 import { EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
-import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
+import { processRawValue, processRawValueWithoutTransformation } from '@atlaskit/editor-common/process-raw-value';
 import { EditorExperience, ExperienceStore, RELIABILITY_INTERVAL } from '@atlaskit/editor-common/ufo';
 import { analyticsEventKey, getAnalyticsEventSeverity } from '@atlaskit/editor-common/utils/analytics';
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
 import { EditorAPIContext } from '../presets/context';
 import { findChangedNodesFromTransaction } from '../utils/findChangedNodesFromTransaction';
@@ -214,10 +215,18 @@ export class ReactEditorView extends React.Component {
       });
       this.contentTransformer = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
       let doc;
+      const api = this.pluginInjectionAPI.api();
+      // If we have a doc prop, we need to process it into a PMNode
+
       if (options.doc) {
-        doc = processRawValue(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, this.contentTransformer, this.dispatchAnalyticsEvent);
+        // if the collabEdit API is set, skip this validation due to potential pm validation errors
+        // from docs that end up with invalid marks after processing (See #hot-111702 for more details)
+        if ((api === null || api === void 0 ? void 0 : api.collabEdit) !== undefined && fg('editor_load_conf_collab_docs_without_checks')) {
+          doc = processRawValueWithoutTransformation(schema, options.doc);
+        } else {
+          doc = processRawValue(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, this.contentTransformer, this.dispatchAnalyticsEvent);
+        }
       }
-      const api = this.pluginInjectionAPI.api();
       const isViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState().mode) === 'view';
       let selection;
       if (doc) {

package/dist/es2019/editor.js

@@ -23,6 +23,13 @@ const ComposableEditorWrapper = ({
     preset: preset
   }, props));
 };
+/**
+ * @deprecated - Please use the `ComposableEditor` component instead.
+ * We strongly encourage the use of custom presets, however your easiest migration path is to use the `useUniversalPreset` hook.
+ * The `ComposableEditor` component is a more flexible and customizable alternative to the `Editor` component.
+ * It allows you to create an editor with a custom set of plugins and configurations.
+ * For more information, see the documentation for the `ComposableEditor` component here: https://atlaskit.atlassian.com/packages/editor/editor-core
+ */
 export default class Editor extends React.Component {
   constructor(props) {
     super(props);

package/dist/es2019/ui/Addon/Dropdown/styles.js

@@ -1,15 +1,13 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N60A } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const dropdown = css({
   display: 'flex',
   flexDirection: 'column',
   background: "var(--ds-surface-overlay, white)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: `${borderRadius()}px`,
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`,
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
   boxSizing: 'border-box',
   padding: `${"var(--ds-space-050, 4px)"} 0`
 });

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -17,8 +17,6 @@ import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-me
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N100 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import messages from '../../../messages';
 import { ClickAreaBlock } from '../../Addon';
 import { createEditorContentStyle } from '../../ContentStyles';
@@ -37,10 +35,10 @@ const commentEditorStyles = css({
   minWidth: '272px',
   height: 'auto',
   backgroundColor: "var(--ds-background-input, white)",
-  border: `1px solid ${`var(--ds-border-input, ${N100})`}`,
+  border: `1px solid ${"var(--ds-border-input, #8590A2)"}`,
   boxSizing: 'border-box',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: `${borderRadius()}px`,
+  borderRadius: "var(--ds-border-radius, 3px)",
   maxWidth: 'inherit',
   wordWrap: 'break-word'
 });