@atlaskit/editor-common 76.27.9 → 76.27.10

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-common
 
+## 76.27.10
+
+### Patch Changes
+
+- [#61676](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61676) [`765a60628f08`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/765a60628f08) - [ux] Change vertical alignment of media inline image to top
+- [#62545](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62545) [`85392e5f9be9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85392e5f9be9) - Remove legacy theming logic from the @atlaskit/editor-common package. Theming is still available via @atlaskit/tokens.
+- Updated dependencies
+
 ## 76.27.9
 
 ### Patch Changes

package/dist/cjs/media-inline/constants.js

@@ -3,7 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_INLINE_IMAGE_ASPECT_RATIO = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
+exports.referenceHeights = exports.DEFAULT_INLINE_IMAGE_ASPECT_RATIO = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
+var _typography = require("@atlaskit/theme/typography");
 var DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_WIDTH = 250;
 var DEFAULT_IMAGE_HEIGHT = exports.DEFAULT_IMAGE_HEIGHT = 200;
-var DEFAULT_INLINE_IMAGE_ASPECT_RATIO = exports.DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
+var DEFAULT_INLINE_IMAGE_ASPECT_RATIO = exports.DEFAULT_INLINE_IMAGE_ASPECT_RATIO = DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT;
+/**
+ * Reference Heights
+ *
+ * These heights enforce consistent sizes with media inline nodes due to
+ * inconsistencies with center aligned inline nodes and text.
+ *
+ * There is conversation about refactoring media inline nodes to conform to
+ * aligning correctly with the surrounding text.
+ */
+var referenceHeights = exports.referenceHeights = {
+  p: _typography.headingSizes.h600.lineHeight - 2,
+  h1: _typography.headingSizes.h800.lineHeight + 4,
+  h2: _typography.headingSizes.h700.lineHeight + 3,
+  h3: _typography.headingSizes.h600.lineHeight + 1,
+  h4: _typography.headingSizes.h500.lineHeight + 3,
+  h5: _typography.headingSizes.h400.lineHeight + 4,
+  h6: _typography.headingSizes.h300.lineHeight + 2
+};

package/dist/cjs/media-inline/inline-image-wrapper.js

@@ -13,8 +13,10 @@ var _styles = require("./styles");
 /** @jsx jsx */
 
 var wrapperStyle = (0, _react.css)({
-  display: 'inline-block',
-  verticalAlign: 'text-bottom',
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  verticalAlign: 'middle',
   overflow: 'hidden',
   borderRadius: "var(--ds-border-radius, 3px)",
   aspectRatio: "var(".concat(_styles.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY, ", ").concat(_constants.DEFAULT_INLINE_IMAGE_ASPECT_RATIO, ")")

package/dist/cjs/media-inline/media-inline-image-card.js

@@ -10,8 +10,8 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _mediaCard = require("@atlaskit/media-card");
-var _typography = require("@atlaskit/theme/typography");
 var _mediaInlineCard = require("../messages/media-inline-card");
+var _constants = require("./constants");
 var _inlineImageWrapper = require("./inline-image-wrapper");
 var _errorView = require("./views/error-view");
 var _loadingView = require("./views/loading-view");
@@ -109,8 +109,8 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
       };
     }
     return {
-      width: Math.round(aspectRatio * _typography.headingSizes.h800.lineHeight),
-      height: _typography.headingSizes.h800.lineHeight
+      width: Math.round(aspectRatio * _constants.referenceHeights['h1']),
+      height: _constants.referenceHeights['h1']
     };
   }, [width, height, aspectRatio]);
   return (0, _react2.jsx)(_inlineImageWrapper.InlineImageWrapper, {

package/dist/cjs/media-inline/styles.js

@@ -7,11 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.mediaInlineImageStyles = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _typography = require("@atlaskit/theme/typography");
+var _constants = require("./constants");
 var _templateObject, _templateObject2;
 var INLINE_IMAGE_WRAPPER_CLASS_NAME = exports.INLINE_IMAGE_WRAPPER_CLASS_NAME = 'media-inline-image-wrapper';
 var INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = exports.INLINE_IMAGE_ASPECT_RATIO_CSS_VAR_KEY = '--editor-media-inline-image-aspect-ratio';
 var inlineImageHeight = function inlineImageHeight(height) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > .", ",\n    > .mediaInlineView-content-wrap\n    > .", " {\n    height: ", "px;\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height);
+  var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > .", ",\n    > .mediaInlineView-content-wrap\n    > .", " {\n    height: ", "px;\n    transform: translateY(", "px);\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, INLINE_IMAGE_WRAPPER_CLASS_NAME, height, margin);
 };
-var mediaInlineImageStyles = exports.mediaInlineImageStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // default inline image height is 24px, this includes\n  // p, h3, and action items\n  .", " {\n    height: ", "px;\n  }\n\n  h1 {\n    ", "\n  }\n\n  h2 {\n    ", "\n  }\n\n  h4 {\n    ", "\n  }\n\n  h5,\n  h6 {\n    ", "\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, _typography.headingSizes.h600.lineHeight, inlineImageHeight(_typography.headingSizes.h800.lineHeight), inlineImageHeight(_typography.headingSizes.h700.lineHeight), inlineImageHeight(_typography.headingSizes.h500.lineHeight), inlineImageHeight(_typography.headingSizes.h400.lineHeight));
+
+/**
+ * Shifting the mediaInline image component (renders image) to align nicely with
+ * mediaInline (renders text) is a bit of a testing ground. This numbers represent
+ * shift in top and bottom and size adjustments to make up for lack of 1to1 size
+ * mapping
+ */
+var mediaInlineImageStyles = exports.mediaInlineImageStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // p, h3, and action items\n  .", " {\n    height: ", "px;\n    transform: translateY(-2px);\n  }\n\n  h1 {\n    ", "\n  }\n\n  h2 {\n    ", "\n  }\n\n  h3 {\n    ", "\n  }\n\n  h4 {\n    ", "\n  }\n\n  h5 {\n    ", "\n  }\n\n  h6 {\n    ", "\n  }\n"])), INLINE_IMAGE_WRAPPER_CLASS_NAME, _constants.referenceHeights['p'], inlineImageHeight(_constants.referenceHeights['h1'], -3), inlineImageHeight(_constants.referenceHeights['h2'], -3), inlineImageHeight(_constants.referenceHeights['h3'], -2), inlineImageHeight(_constants.referenceHeights['h4'], -2), inlineImageHeight(_constants.referenceHeights['h5'], -2), inlineImageHeight(_constants.referenceHeights['h6'], -2));

package/dist/cjs/media-inline/views/icon-wrapper.js

@@ -10,7 +10,7 @@ var _react = require("@emotion/react");
 var wrapperStyle = (0, _react.css)({
   display: 'flex',
   'span > svg': {
-    verticalAlign: 'baseline'
+    verticalAlign: 'top'
   }
 });
 var IconWrapper = exports.IconWrapper = function IconWrapper(_ref) {

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "76.27.9";
+var packageVersion = "76.27.10";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -8,7 +8,6 @@ exports.annotationSharedStyles = exports.annotationPrefix = exports.AnnotationSh
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _templateObject, _templateObject2, _templateObject3;
 var annotationPrefix = exports.annotationPrefix = 'ak-editor-annotation';
 var AnnotationSharedClassNames = exports.AnnotationSharedClassNames = {
@@ -16,30 +15,14 @@ var AnnotationSharedClassNames = exports.AnnotationSharedClassNames = {
   blur: "".concat(annotationPrefix, "-blur"),
   draft: "".concat(annotationPrefix, "-draft")
 };
-var DY75 = 'rgb(111, 92, 37)';
-var DY300 = '#ffd557';
 var Y75a = 'rgba(255, 240, 179, 0.5)';
 var Y200a = 'rgba(255, 196, 0, 0.82)';
-var DY75a = 'rgba(111, 92, 37, 0.5)';
-var DY200 = '#82641c';
-var AnnotationSharedCSSByState = exports.AnnotationSharedCSSByState = function AnnotationSharedCSSByState(props) {
+var AnnotationSharedCSSByState = exports.AnnotationSharedCSSByState = function AnnotationSharedCSSByState() {
   return {
-    focus: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    // Background is not coming through in confluence, suspecting to be caused by some specific combination of\n    // emotion and token look up\n\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147\n    box-shadow: ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
-      light: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
-      dark: "var(--ds-background-accent-yellow-subtler, ".concat(DY75, ")")
-    })(props), (0, _components.themed)({
-      light: "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")"),
-      dark: "var(--ds-border-accent-yellow, ".concat(DY300, ")")
-    })(props), "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")")),
-    blur: (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid\n      ", ";\n    cursor: pointer;\n  "])), (0, _components.themed)({
-      light: "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"),
-      dark: "var(--ds-background-accent-yellow-subtlest, ".concat(DY75a, ")")
-    })(props), (0, _components.themed)({
-      light: "var(--ds-border-accent-yellow, ".concat(Y200a, ")"),
-      dark: "var(--ds-border-accent-yellow, ".concat(DY200, ")")
-    })(props))
+    focus: (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    // Background is not coming through in confluence, suspecting to be caused by some specific combination of\n    // emotion and token look up\n\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147\n    box-shadow: ", ";\n    cursor: pointer;\n  "])), "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"), "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")"), "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")")),
+    blur: (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    background: ", ";\n    border-bottom: 2px solid ", ";\n    cursor: pointer;\n  "])), "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"), "var(--ds-border-accent-yellow, ".concat(Y200a, ")"))
   };
 };
-var annotationSharedStyles = exports.annotationSharedStyles = function annotationSharedStyles(props) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      ", ";\n    }\n\n    .", " {\n      ", ";\n      cursor: initial;\n    }\n\n    .", " {\n      ", ";\n    }\n  }\n"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState(props).focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState(props).focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState(props).blur);
+var annotationSharedStyles = exports.annotationSharedStyles = function annotationSharedStyles() {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      ", ";\n    }\n\n    .", " {\n      ", ";\n      cursor: initial;\n    }\n\n    .", " {\n      ", ";\n    }\n  }\n"])), AnnotationSharedClassNames.focus, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.draft, AnnotationSharedCSSByState().focus, AnnotationSharedClassNames.blur, AnnotationSharedCSSByState().blur);
 };

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

@@ -9,7 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _templateObject, _templateObject2;
 var CodeBlockSharedCssClassName = exports.CodeBlockSharedCssClassName = {
@@ -21,25 +20,10 @@ var CodeBlockSharedCssClassName = exports.CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTENT: 'code-content',
   DS_CODEBLOCK: '[data-ds--code--code-block]'
 };
-var codeBlockSharedStyles = exports.codeBlockSharedStyles = function codeBlockSharedStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", " 100%,\n        ", " 100%, ", " 100%,\n        ", " 100%, ", " 100%,\n        1px 100%, ", " 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", ";\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", ";\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, (0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
-  })(props), (0, _constants.borderRadius)(), (0, _editorSharedStyles.overflowShadow)({
-    background: (0, _components.themed)({
-      light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
-      dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
-    })(props),
+var codeBlockSharedStyles = exports.codeBlockSharedStyles = function codeBlockSharedStyles() {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", ";\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", ";\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-size: ", " 100%,\n        ", " 100%, ", " 100%,\n        ", " 100%, ", " 100%,\n        1px 100%, ", " 100%, 1px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", ";\n      position: relative;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", ";\n        margin: ", ";\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", (0, _editorSharedStyles.overflowShadow)({
+    background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
     leftCoverWidth: "var(--ds-space-300, 24px)"
-  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, (0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(_colors.N30, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.DN20, ")")
-  })(props), "var(--ds-space-100, 8px)", (0, _components.themed)({
-    light: "var(--ds-text-subtlest, ".concat(_colors.N400, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(_colors.DN400, ")")
-  })(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, (0, _components.themed)({
-    light: "var(--ds-text, ".concat(_colors.N800, ")"),
-    dark: "var(--ds-text, ".concat(_colors.DN800, ")")
-  })(props), (0, _constants.borderRadius)(), "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 };
 var codeBlockInListSafariFix = exports.codeBlockInListSafariFix = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ::before {\n    content: ' ';\n    line-height: ", ";\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight);

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

@@ -9,11 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _inline = require("@atlaskit/code/inline");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _templateObject;
-var codeMarkSharedStyles = exports.codeMarkSharedStyles = function codeMarkSharedStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), (0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
-  })(props), (0, _inline.getCodeStyles)());
+var codeMarkSharedStyles = exports.codeMarkSharedStyles = function codeMarkSharedStyles() {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    .code {\n      --ds--code--bg-color: ", ";\n      ", "\n    }\n  "])), "var(--ds-background-neutral, ".concat(_colors.N30A, ")"), (0, _inline.getCodeStyles)());
 };

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

@@ -16,11 +16,8 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 var _emoji = require("@atlaskit/emoji");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
-var _constants = require("@atlaskit/theme/constants");
 var _templateObject, _templateObject2;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var lightPanelColors = {
   info: _colors.B50,
   note: _colors.P50,
@@ -99,28 +96,10 @@ var lightIconColor = {
   warning: "var(--ds-icon-warning, ".concat(_colors.Y400, ")"),
   error: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
 };
-var darkIconColor = {
-  info: "var(--ds-icon-information, ".concat(_colors.B100, ")"),
-  note: "var(--ds-icon-discovery, ".concat(_colors.P100, ")"),
-  tip: "var(--ds-icon-success, ".concat(_colors.G200, ")"),
-  success: "var(--ds-icon-success, ".concat(_colors.G200, ")"),
-  warning: "var(--ds-icon-warning, ".concat(_colors.Y100, ")"),
-  error: "var(--ds-icon-danger, ".concat(_colors.R200, ")")
-};
-var tokenDarkPanelColors = {
-  info: "var(--ds-background-information, ".concat(darkPanelColors['info'], ")"),
-  note: "var(--ds-background-discovery, ".concat(darkPanelColors['note'], ")"),
-  tip: "var(--ds-background-success, ".concat(darkPanelColors['tip'], ")"),
-  success: "var(--ds-background-success, ".concat(darkPanelColors['success'], ")"),
-  warning: "var(--ds-background-warning, ".concat(darkPanelColors['warning'], ")"),
-  error: "var(--ds-background-danger, ".concat(darkPanelColors['error'], ")")
-};
 
-// TODO: Migrate away from gridSize
-// Recommendation: Replace gridSize with 8
 // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
-var panelEmojiSpriteVerticalAlignment = -((0, _constants.gridSize)() * 3 - _consts.akEditorCustomIconSize) / 2;
+var panelEmojiSpriteVerticalAlignment = -(8 * 3 - _consts.akEditorCustomIconSize) / 2;
 var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
@@ -174,54 +153,22 @@ var PanelSharedSelectors = exports.PanelSharedSelectors = {
   copyButton: "button[aria-label=\"Copy\"]"
 };
 var iconDynamicStyles = function iconDynamicStyles(panelType) {
-  return function (props) {
-    var light = lightIconColor[panelType];
-    var dark = darkIconColor[panelType];
-    var color = (0, _components.themed)({
-      light: light,
-      dark: dark
-    })(props);
-    return "\n    color: ".concat(color, ";\n  ");
-  };
+  return "color: ".concat(lightIconColor[panelType], ";");
 };
 
 // Provides the color without tokens, used when converting to a custom panel
 var getPanelTypeBackgroundNoTokens = exports.getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var light = lightPanelColors[panelType];
-  var dark = darkPanelColors[panelType];
-  var background = (0, _components.themed)({
-    light: light,
-    dark: dark
-  })(props);
-  return background || 'none';
+  return lightPanelColors[panelType] || 'none';
 };
 var getPanelTypeBackground = exports.getPanelTypeBackground = function getPanelTypeBackground(panelType) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var light = (0, _editorPalette.hexToEditorBackgroundPaletteColor)(lightPanelColors[panelType]);
-  // hexToEditorBackgroundPaletteColor has a light mode as a fallback color - for legacy dark mode we define the tokens locally
-  var dark = tokenDarkPanelColors[panelType];
-  var background = (0, _components.themed)({
-    light: light,
-    dark: dark
-  })(props);
-  return background || 'none';
+  return (0, _editorPalette.hexToEditorBackgroundPaletteColor)(lightPanelColors[panelType]) || 'none';
 };
 var mainDynamicStyles = function mainDynamicStyles(panelType) {
-  return function (props) {
-    var background = getPanelTypeBackground(panelType, props);
-    var text = (0, _components.themed)({
-      light: 'inherit',
-      dark: darkPanelColors.TextColor
-    })(props);
-    return "\n    background-color: ".concat(background, ";\n    color: ").concat(text, ";\n  ");
-  };
+  return "\n    background-color: ".concat(getPanelTypeBackground(panelType), ";\n    color: inherit;\n  ");
 };
-var panelSharedStylesWithoutPrefix = exports.panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  margin: ", " 0 0;\n  padding: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", ";\n  }\n"])), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO)(props), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(_adfSchema.PanelType.INFO)(props), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE)(props), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP)(props), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING)(props), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR)(props), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS)(props), _adfSchema.PanelType.CUSTOM, (0, _components.themed)({
-    dark: getPanelBackgroundDarkModeColors
-  })(props));
+var panelSharedStylesWithoutPrefix = exports.panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  margin: ", " 0 0;\n  padding: ", ";\n  min-width: ", "px;\n  display: flex;\n  position: relative;\n  align-items: baseline;\n  word-break: break-word;\n\n  ", "\n\n  .", " {\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: content-box;\n    padding-right: ", ";\n    text-align: center;\n    user-select: none;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    ", "\n\n    > span {\n      vertical-align: middle;\n      display: inline-flex;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n    }\n\n    .", " {\n      vertical-align: ", "px;\n\n      // Vertical align only works for inline-block elements in Firefox\n      @-moz-document url-prefix() {\n        img {\n          display: inline-block;\n        }\n      }\n    }\n  }\n\n  .ak-editor-panel__content {\n    margin: 1px 0 1px;\n    flex: 1 0 0;\n    /*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n    min-width: 0;\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n\n  &[data-panel-type='", "'] {\n    ", "\n\n    .", " {\n      ", "\n    }\n  }\n"])), "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(_adfSchema.PanelType.INFO), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS));
 };
-var panelSharedStyles = exports.panelSharedStyles = function panelSharedStyles(props) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(props));
+var panelSharedStyles = exports.panelSharedStyles = function panelSharedStyles() {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix());
 };

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

@@ -9,14 +9,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _templateObject;
-var divider = (0, _components.themed)({
-  light: "var(--ds-border, ".concat(_colors.N30A, ")"),
-  dark: "var(--ds-border, ".concat(_colors.DN50, ")")
-});
-
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-var ruleSharedStyles = exports.ruleSharedStyles = function ruleSharedStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & hr {\n    border: none;\n    background-color: ", ";\n    margin: ", "em 0;\n    height: 2px;\n    border-radius: 1px;\n  }\n"])), divider(props), _editorSharedStyles.akEditorLineHeight);
+var ruleSharedStyles = exports.ruleSharedStyles = function ruleSharedStyles() {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & hr {\n    border: none;\n    background-color: ", ";\n    margin: ", "em 0;\n    height: 2px;\n    border-radius: 1px;\n  }\n"])), "var(--ds-border, ".concat(_colors.N30A, ")"), _editorSharedStyles.akEditorLineHeight);
 };

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

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,11 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.BaseTheme = BaseTheme;
 exports.BaseThemeWrapper = BaseThemeWrapper;
 exports.mapBreakpointToLayoutMaxWidth = mapBreakpointToLayoutMaxWidth;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _WidthProvider = require("../WidthProvider");
 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); }
@@ -29,25 +26,21 @@ function mapBreakpointToLayoutMaxWidth(breakpoint) {
 function BaseThemeWrapper(_ref) {
   var baseFontSize = _ref.baseFontSize,
     children = _ref.children;
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   var memoizedTheme = (0, _react.useMemo)(function () {
-    return (0, _defineProperty2.default)({
+    return {
       baseFontSize: baseFontSize || (0, _constants.fontSize)(),
       layoutMaxWidth: _editorSharedStyles.akEditorDefaultLayoutWidth
-    }, _constants.CHANNEL, {
-      mode: mode
-    });
-  }, [baseFontSize, mode]);
+    };
+  }, [baseFontSize]);
   return /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
     theme: memoizedTheme
   }, children);
 }
-function BaseTheme(_ref3) {
-  var children = _ref3.children,
-    baseFontSize = _ref3.baseFontSize;
-  return /*#__PURE__*/_react.default.createElement(_WidthProvider.WidthConsumer, null, function (_ref4) {
-    var breakpoint = _ref4.breakpoint;
+function BaseTheme(_ref2) {
+  var children = _ref2.children,
+    baseFontSize = _ref2.baseFontSize;
+  return /*#__PURE__*/_react.default.createElement(_WidthProvider.WidthConsumer, null, function (_ref3) {
+    var breakpoint = _ref3.breakpoint;
     return /*#__PURE__*/_react.default.createElement(BaseThemeWrapper, {
       breakpoint: breakpoint,
       baseFontSize: baseFontSize

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

@@ -17,14 +17,12 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
-var _constants = require("@atlaskit/theme/constants");
 var _Layer = _interopRequireDefault(require("../Layer"));
 var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 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; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "76.27.9";
+var packageVersion = "76.27.10";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {
@@ -40,14 +38,8 @@ var DropList = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperStyles", (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  "])), _this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerStyles", (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n    ", "\n  "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
     /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuWrapper", function (theme) {
-      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", " 0;\n      max-height: 90vh;\n    "])), (0, _components.themed)({
-        light: "var(--ds-text, ".concat(_colors.N900, ")"),
-        dark: "var(--ds-text, ".concat(_colors.DN600, ")")
-      })(theme), (0, _components.themed)({
-        light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-        dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
-      })(theme), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 4px 8px calc(-1 * 2px) ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-space-050, 4px)");
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuWrapper", function () {
+      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", " 0;\n      max-height: 90vh;\n    "])), "var(--ds-text, ".concat(_colors.N900, ")"), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 4px 8px calc(-1 * 2px) ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-space-050, 4px)");
     });
     /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
@@ -123,7 +115,6 @@ var DropList = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(DropList, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
       var _this$props = this.props,
         children = _this$props.children,
         isOpen = _this$props.isOpen,
@@ -133,11 +124,7 @@ var DropList = /*#__PURE__*/function (_Component) {
         testId = _this$props.testId,
         id = _this$props.id;
       var layerContent = isOpen ? (0, _react2.jsx)("div", {
-        css: function css(theme) {
-          return _this2.menuWrapper({
-            theme: theme
-          });
-        },
+        css: this.menuWrapper,
         "data-role": "droplistContent",
         "data-testid": testId && "".concat(testId, "--content"),
         ref: this.handleContentRef,

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

@@ -14,7 +14,6 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
@@ -46,30 +45,21 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
 });
 var BORDER_RADIUS = "var(--ds-border-radius-100, 4px)";
 var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
-var EXPAND_SELECTED_BACKGROUND = (0, _components.themed)({
-  light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
-  dark: "var(--ds-surface, rgba(9, 10, 11, 0.29))"
-});
+var EXPAND_SELECTED_BACKGROUND = "var(--ds-surface, rgba(255, 255, 255, 0.6))";
 var EXPAND_FOCUSED_BORDER_COLOR = "var(--ds-border-focused, ".concat(_colors.B300, ")");
 var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
-var EXPAND_EXPANDED_BORDER_COLOR = (0, _components.themed)({
-  light: "var(--ds-border, ".concat(_colors.N40A, ")"),
-  dark: "var(--ds-border, ".concat(_colors.DN50, ")")
-});
+var EXPAND_EXPANDED_BORDER_COLOR = "var(--ds-border, ".concat(_colors.N40A, ")");
 var ExpandIconWrapper = exports.ExpandIconWrapper = function ExpandIconWrapper(_ref) {
   var children = _ref.children,
     expanded = _ref.expanded;
   return (0, _react2.jsx)("div", {
-    css: function css(props) {
-      return expanded ? [expandIconWrapperStyle(props), expandIconWrapperExpandedStyle] : expandIconWrapperStyle(props);
+    css: function css() {
+      return expanded ? [expandIconWrapperStyle(), expandIconWrapperExpandedStyle] : expandIconWrapperStyle();
     }
   }, children);
 };
-var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", ";\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), (0, _components.themed)({
-    light: "var(--ds-icon, ".concat(_colors.N90, ")"),
-    dark: "var(--ds-icon, #d9dde3)"
-  })(props), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")"), _editorSharedStyles.akEditorSwoopCubicBezier);
+var expandIconWrapperStyle = function expandIconWrapperStyle() {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", ";\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), "var(--ds-icon, ".concat(_colors.N90, ")"), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")"), _editorSharedStyles.akEditorSwoopCubicBezier);
 };
 var expandIconWrapperExpandedStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
 var expandLayoutWrapperStyle = exports.expandLayoutWrapperStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
@@ -91,35 +81,20 @@ var containerStyles = function containerStyles(styleProps) {
   // and is the root level expand.
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
-  return function (themeProps) {
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", ";\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", ";\n\n    &:hover {\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-4152\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", (0, _components.themed)({
-      light: "var(--ds-border, ".concat(_colors.N50A, ")"),
-      dark: "var(--ds-border, ".concat(_colors.DN50, ")")
-    })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
+  return function () {
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", ";\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", ";\n\n    &:hover {\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-4152\n      border: 1px solid ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND, margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N50A, ")"), EXPAND_SELECTED_BACKGROUND);
   };
 };
 var contentStyles = function contentStyles(styleProps) {
-  return function (themeProps) {
+  return function () {
     return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    padding-top: ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", (0, _constants.gridSize)() * 4 - (0, _constants.gridSize)() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          user-select: none;\n        }\n      " : '');
   };
 };
-var titleInputStyles = function titleInputStyles(props) {
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", ";\n  width: 100%;\n\n  &::placeholder {\n    opacity: ", ";\n    color: ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _components.themed)({
-    light: "var(--ds-text-subtlest, ".concat(_colors.N200A, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(_colors.DN600, ")")
-  })(props), "var(--ds-space-050, 4px)", (0, _components.themed)({
-    light: 1,
-    dark: 0.6
-  })(props), (0, _components.themed)({
-    light: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(_colors.DN600, ")")
-  })(props));
+var titleInputStyles = function titleInputStyles() {
+  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", ";\n  width: 100%;\n\n  &::placeholder {\n    opacity: 1;\n    color: ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, "var(--ds-text-subtlest, ".concat(_colors.N200A, ")"), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 };
-var titleContainerStyles = function titleContainerStyles(props) {
-  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n\n  &:focus {\n    outline: 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-    light: "var(--ds-text-subtle, ".concat(_colors.N300A, ")"),
-    dark: "var(--ds-text-subtle, ".concat(_colors.DN600, ")")
-  })(props));
+var titleContainerStyles = function titleContainerStyles() {
+  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n\n  &:focus {\n    outline: 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-text-subtle, ".concat(_colors.N300A, ")"));
 };
 var sharedExpandStyles = exports.sharedExpandStyles = {
   titleInputStyles: titleInputStyles,