@atlaskit/editor-common 76.27.9 → 76.28.0

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

@@ -8,10 +8,7 @@ import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
-import { B100, B400, B50, B75, G200, G400, G50, G75, N0, N20, N60, P100, P400, P50, P75, R100, R200, R400, R50, R75, T100, T50, T75, Y100, Y200, Y400, Y50, Y75 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { B100, B400, B50, B75, G200, G400, G50, G75, N0, N20, N60, P100, P400, P50, P75, R100, R400, R50, R75, T100, T50, T75, Y200, Y400, Y50, Y75 } from '@atlaskit/theme/colors';
 var lightPanelColors = {
   info: B50,
   note: P50,
@@ -90,28 +87,10 @@ var lightIconColor = {
   warning: "var(--ds-icon-warning, ".concat(Y400, ")"),
   error: "var(--ds-icon-danger, ".concat(R400, ")")
 };
-var darkIconColor = {
-  info: "var(--ds-icon-information, ".concat(B100, ")"),
-  note: "var(--ds-icon-discovery, ".concat(P100, ")"),
-  tip: "var(--ds-icon-success, ".concat(G200, ")"),
-  success: "var(--ds-icon-success, ".concat(G200, ")"),
-  warning: "var(--ds-icon-warning, ".concat(Y100, ")"),
-  error: "var(--ds-icon-danger, ".concat(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 = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
+var panelEmojiSpriteVerticalAlignment = -(8 * 3 - akEditorCustomIconSize) / 2;
 var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
@@ -165,54 +144,22 @@ export var PanelSharedSelectors = {
   copyButton: "button[aria-label=\"Copy\"]"
 };
 var iconDynamicStyles = function iconDynamicStyles(panelType) {
-  return function (props) {
-    var light = lightIconColor[panelType];
-    var dark = darkIconColor[panelType];
-    var color = 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
 export var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var light = lightPanelColors[panelType];
-  var dark = darkPanelColors[panelType];
-  var background = themed({
-    light: light,
-    dark: dark
-  })(props);
-  return background || 'none';
+  return lightPanelColors[panelType] || 'none';
 };
 export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var light = 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 = themed({
-    light: light,
-    dark: dark
-  })(props);
-  return background || 'none';
+  return hexToEditorBackgroundPaletteColor(lightPanelColors[panelType]) || 'none';
 };
 var mainDynamicStyles = function mainDynamicStyles(panelType) {
-  return function (props) {
-    var background = getPanelTypeBackground(panelType, props);
-    var text = 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  ");
 };
-export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), borderRadius(), blockNodesVerticalMargin, "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO)(props), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO)(props), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE)(props), PanelType.TIP, mainDynamicStyles(PanelType.TIP)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP)(props), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING)(props), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR)(props), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS)(props), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS)(props), PanelType.CUSTOM, themed({
-    dark: getPanelBackgroundDarkModeColors
-  })(props));
+export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)", blockNodesVerticalMargin, "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
 };
-export var panelSharedStyles = function panelSharedStyles(props) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(props));
+export var panelSharedStyles = function panelSharedStyles() {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    ", "\n  }\n"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix());
 };

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

@@ -2,14 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
-import { DN50, N30A } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-var divider = themed({
-  light: "var(--ds-border, ".concat(N30A, ")"),
-  dark: "var(--ds-border, ".concat(DN50, ")")
-});
-
+import { N30A } from '@atlaskit/theme/colors';
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-export var ruleSharedStyles = function ruleSharedStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & hr {\n    border: none;\n    background-color: ", ";\n    margin: ", "em 0;\n    height: 2px;\n    border-radius: 1px;\n  }\n"])), divider(props), akEditorLineHeight);
+export var ruleSharedStyles = function ruleSharedStyles() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N30A, ")"), akEditorLineHeight);
 };

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

@@ -1,9 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useMemo } from 'react';
 import { ThemeProvider } from '@emotion/react';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { useGlobalTheme } from '@atlaskit/theme/components';
-import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
+import { fontSize } from '@atlaskit/theme/constants';
 import { WidthConsumer } from '../WidthProvider';
 export function mapBreakpointToLayoutMaxWidth(breakpoint) {
   switch (breakpoint) {
@@ -17,25 +15,21 @@ export function mapBreakpointToLayoutMaxWidth(breakpoint) {
 export function BaseThemeWrapper(_ref) {
   var baseFontSize = _ref.baseFontSize,
     children = _ref.children;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   var memoizedTheme = useMemo(function () {
-    return _defineProperty({
+    return {
       baseFontSize: baseFontSize || fontSize(),
       layoutMaxWidth: akEditorDefaultLayoutWidth
-    }, CHANNEL, {
-      mode: mode
-    });
-  }, [baseFontSize, mode]);
+    };
+  }, [baseFontSize]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
   }, children);
 }
-export function BaseTheme(_ref3) {
-  var children = _ref3.children,
-    baseFontSize = _ref3.baseFontSize;
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref4) {
-    var breakpoint = _ref4.breakpoint;
+export function BaseTheme(_ref2) {
+  var children = _ref2.children,
+    baseFontSize = _ref2.baseFontSize;
+  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
+    var breakpoint = _ref3.breakpoint;
     return /*#__PURE__*/React.createElement(BaseThemeWrapper, {
       breakpoint: breakpoint,
       baseFontSize: baseFontSize

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

@@ -14,12 +14,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
+import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "76.27.9";
+var packageVersion = "76.28.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {
@@ -35,14 +33,8 @@ var DropList = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "wrapperStyles", css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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;'));
     _defineProperty(_assertThisInitialized(_this), "triggerStyles", css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 */
-    _defineProperty(_assertThisInitialized(_this), "menuWrapper", function (theme) {
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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    "])), themed({
-        light: "var(--ds-text, ".concat(N900, ")"),
-        dark: "var(--ds-text, ".concat(DN600, ")")
-      })(theme), themed({
-        light: "var(--ds-surface-overlay, ".concat(N0, ")"),
-        dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
-      })(theme), borderRadius(), "var(--ds-shadow-overlay, ".concat("0 4px 8px calc(-1 * 2px) ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-space-050, 4px)");
+    _defineProperty(_assertThisInitialized(_this), "menuWrapper", function () {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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(N900, ")"), "var(--ds-surface-overlay, ".concat(N0, ")"), "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 4px 8px calc(-1 * 2px) ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"), "var(--ds-space-050, 4px)");
     });
     /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
@@ -118,7 +110,6 @@ var DropList = /*#__PURE__*/function (_Component) {
   _createClass(DropList, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
       var _this$props = this.props,
         children = _this$props.children,
         isOpen = _this$props.isOpen,
@@ -128,11 +119,7 @@ var DropList = /*#__PURE__*/function (_Component) {
         testId = _this$props.testId,
         id = _this$props.id;
       var layerContent = isOpen ? 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/esm/ui/Expand/index.js

@@ -9,8 +9,7 @@ import React, { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { B300, DN50, DN600, N200, N200A, N300A, N30A, N40A, N50A, N90 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
+import { B300, N200, N200A, N300A, N30A, N40A, N50A, N90 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 export var messages = defineMessages({
@@ -37,30 +36,21 @@ export var messages = defineMessages({
 });
 var BORDER_RADIUS = "var(--ds-border-radius-100, 4px)";
 var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
-var EXPAND_SELECTED_BACKGROUND = 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(B300, ")");
 var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
-var EXPAND_EXPANDED_BORDER_COLOR = themed({
-  light: "var(--ds-border, ".concat(N40A, ")"),
-  dark: "var(--ds-border, ".concat(DN50, ")")
-});
+var EXPAND_EXPANDED_BORDER_COLOR = "var(--ds-border, ".concat(N40A, ")");
 export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
   var children = _ref.children,
     expanded = _ref.expanded;
   return 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 css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), themed({
-    light: "var(--ds-icon, ".concat(N90, ")"),
-    dark: "var(--ds-icon, #d9dde3)"
-  })(props), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")"), akEditorSwoopCubicBezier);
+var expandIconWrapperStyle = function expandIconWrapperStyle() {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N90, ")"), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")"), akEditorSwoopCubicBezier);
 };
 var expandIconWrapperExpandedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
 export var expandLayoutWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
@@ -82,35 +72,20 @@ var containerStyles = function containerStyles(styleProps) {
   // and is the root level expand.
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
-  return function (themeProps) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", ";\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, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", themed({
-      light: "var(--ds-border, ".concat(N50A, ")"),
-      dark: "var(--ds-border, ".concat(DN50, ")")
-    })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
+  return function () {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N50A, ")"), EXPAND_SELECTED_BACKGROUND);
   };
 };
 var contentStyles = function contentStyles(styleProps) {
-  return function (themeProps) {
+  return function () {
     return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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)", gridSize() * 4 - 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 css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", ";\n  width: 100%;\n\n  &::placeholder {\n    opacity: ", ";\n    color: ", ";\n  }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, themed({
-    light: "var(--ds-text-subtlest, ".concat(N200A, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(DN600, ")")
-  })(props), "var(--ds-space-050, 4px)", themed({
-    light: 1,
-    dark: 0.6
-  })(props), themed({
-    light: "var(--ds-text-subtlest, ".concat(N200, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(DN600, ")")
-  })(props));
+var titleInputStyles = function titleInputStyles() {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", ";\n  width: 100%;\n\n  &::placeholder {\n    opacity: 1;\n    color: ", ";\n  }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, "var(--ds-text-subtlest, ".concat(N200A, ")"), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(N200, ")"));
 };
-var titleContainerStyles = function titleContainerStyles(props) {
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n\n  &:focus {\n    outline: 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), themed({
-    light: "var(--ds-text-subtle, ".concat(N300A, ")"),
-    dark: "var(--ds-text-subtle, ".concat(DN600, ")")
-  })(props));
+var titleContainerStyles = function titleContainerStyles() {
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n\n  &:focus {\n    outline: 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), "var(--ds-text-subtle, ".concat(N300A, ")"));
 };
 export var sharedExpandStyles = {
   titleInputStyles: titleInputStyles,

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

@@ -9,8 +9,8 @@ import { G400, N200, R400 } from '@atlaskit/theme/colors';
 import { h200 } from '@atlaskit/theme/typography';
 var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(R400, ")"));
 var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-success, ".concat(G400, ")"));
-var messageStyle = function messageStyle(props) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", ";\n  display: flex;\n  justify-content: baseline;\n"])), h200(props), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
+var messageStyle = function messageStyle() {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", ";\n  display: flex;\n  justify-content: baseline;\n"])), h200(), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
 };
 var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
 export var HelperMessage = function HelperMessage(_ref) {
@@ -22,8 +22,8 @@ export var HelperMessage = function HelperMessage(_ref) {
 export var ErrorMessage = function ErrorMessage(_ref2) {
   var children = _ref2.children;
   return jsx("div", {
-    css: function css(theme) {
-      return [messageStyle(theme), errorColor];
+    css: function css() {
+      return [messageStyle(), errorColor];
     }
   }, jsx("span", {
     css: iconWrapperStyle
@@ -36,8 +36,8 @@ export var ErrorMessage = function ErrorMessage(_ref2) {
 export var ValidMessage = function ValidMessage(_ref3) {
   var children = _ref3.children;
   return jsx("div", {
-    css: function css(theme) {
-      return [messageStyle(theme), validColor];
+    css: function css() {
+      return [messageStyle(), validColor];
     }
   }, jsx("span", {
     css: iconWrapperStyle

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

@@ -14,15 +14,13 @@ import PropTypes from 'prop-types';
 import { createPortal, unmountComponentAtNode, unstable_renderSubtreeIntoContainer } from 'react-dom';
 import { injectIntl, RawIntlProvider, useIntl } from 'react-intl-next';
 import { default as AnalyticsReactContext } from '@atlaskit/analytics-next-stable-react-context';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { EventDispatcher } from '../../event-dispatcher';
 import IntlProviderIfMissingWrapper from '../IntlProviderIfMissingWrapper';
-import { PortalProviderThemeProviders } from './PortalProviderThemesProvider';
 export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
   _inherits(PortalProviderAPI, _EventDispatcher);
   var _super = _createSuper(PortalProviderAPI);
-  function PortalProviderAPI(intl, onAnalyticsEvent, analyticsContext, themeMode) {
+  function PortalProviderAPI(intl, onAnalyticsEvent, analyticsContext) {
     var _this;
     _classCallCheck(this, PortalProviderAPI);
     _this = _super.call(this);
@@ -33,7 +31,6 @@ export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
     _this.intl = intl;
     _this.onAnalyticsEvent = onAnalyticsEvent;
     _this.useAnalyticsContext = analyticsContext;
-    _this.themeMode = themeMode;
     return _this;
   }
   _createClass(PortalProviderAPI, [{
@@ -46,10 +43,7 @@ export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
         hasAnalyticsContext: hasAnalyticsContext,
         hasIntlContext: hasIntlContext
       });
-      var childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
-        mode: this.themeMode
-      }, children());
-      var wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders) : childrenWithThemeProviders;
+      var wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, children()) : children();
       if (hasIntlContext) {
         wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
           value: this.intl
@@ -65,25 +59,20 @@ export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
     key: "forceUpdate",
     value: function forceUpdate(_ref) {
       var _this2 = this;
-      var intl = _ref.intl,
-        themeMode = _ref.themeMode;
+      var intl = _ref.intl;
       this.intl = intl;
-      this.themeMode = themeMode;
       this.portals.forEach(function (portal, container) {
         if (!portal.hasAnalyticsContext && !_this2.useAnalyticsContext && !portal.hasIntlContext) {
           return;
         }
         var wrappedChildren = portal.children();
-        var childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
-          mode: themeMode
-        }, wrappedChildren);
         if (portal.hasAnalyticsContext && _this2.useAnalyticsContext) {
-          wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders);
+          wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, wrappedChildren);
         }
         if (portal.hasIntlContext) {
           wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
             value: _this2.intl
-          }, childrenWithThemeProviders);
+          }, wrappedChildren);
         }
         unstable_renderSubtreeIntoContainer(_this2.context, wrappedChildren, container);
       });
@@ -131,7 +120,7 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
     var _this3;
     _classCallCheck(this, BasePortalProvider);
     _this3 = _super2.call(this, props);
-    _this3.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
+    _this3.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext);
     return _this3;
   }
   _createClass(BasePortalProvider, [{
@@ -143,8 +132,7 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       this.portalProviderAPI.forceUpdate({
-        intl: this.props.intl,
-        themeMode: this.props.themeMode
+        intl: this.props.intl
       });
     }
   }]);
@@ -167,10 +155,8 @@ var PortalProviderWithThemeAndIntlProviders = function PortalProviderWithThemeAn
     useAnalyticsContext = _ref3.useAnalyticsContext,
     render = _ref3.render;
   var intl = useIntl();
-  var globalTheme = useGlobalTheme();
   return /*#__PURE__*/React.createElement(BasePortalProvider, {
     intl: intl,
-    themeMode: globalTheme.mode,
     onAnalyticsEvent: onAnalyticsEvent,
     useAnalyticsContext: useAnalyticsContext,
     render: render

package/dist/esm/ui-menu/ColorPickerButton/index.js

@@ -7,9 +7,7 @@ import { css, jsx } from '@emotion/react';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { DN50, N0, N30A, N60A } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
+import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -25,11 +23,8 @@ var colorPickerExpandContainer = css(_templateObject2 || (_templateObject2 = _ta
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-var colorPickerWrapper = function colorPickerWrapper(theme) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: ", " 0px;\n"])), borderRadius(), themed({
-    light: "var(--ds-surface-overlay, ".concat(N0, ")"),
-    dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
-  })(theme), N60A, N60A, "var(--ds-space-100, 8px)");
+var colorPickerWrapper = function colorPickerWrapper() {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: ", " 0px;\n"])), "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, ".concat(N0, ")"), N60A, N60A, "var(--ds-space-100, 8px)");
 };
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -159,13 +154,10 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
   var title = props.title || '';
   var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  var buttonStyle = function buttonStyle(theme) {
+  var buttonStyle = function buttonStyle() {
     var _props$size, _props$size2, _props$size3;
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: ", " 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), "var(--ds-space-075, 6px)", "var(--ds-background-neutral-subtle, transparent)", /* If custom props size height, override the button base height property */
-    !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", DEFAULT_BORDER_COLOR, borderRadius(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px', "var(--ds-space-025, 2px)", themed({
-      light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")"),
-      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
-    })(theme));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: ", " 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", ";\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), "var(--ds-space-075, 6px)", "var(--ds-background-neutral-subtle, transparent)", /* If custom props size height, override the button base height property */
+    !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", DEFAULT_BORDER_COLOR, "var(--ds-border-radius, 3px)", currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px', "var(--ds-space-025, 2px)", "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")"));
   };
   return jsx("div", {
     css: colorPickerButtonWrapper

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -23,8 +23,7 @@ import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B100, DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
+import { B100, N70, N900 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
 import { KeyDownHandlerContext } from '../../ui-menu/ToolbarArrowKeyNavigationProvider';
@@ -36,28 +35,14 @@ import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
 var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
 var focusedMenuItemStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), "var(--ds-border-focused, ".concat(B100, ")"));
 var buttonStyles = function buttonStyles(isActive, submenuActive) {
-  return function (theme) {
-    if (isActive) {
-      /**
-       * Hack for item to imitate old dropdown-menu selected styles
-       */
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        > span,\n        > span:hover,\n        > span:active {\n          background: ", ";\n          color: ", ";\n        }\n        :focus > span[aria-disabled='false'] {\n          ", ";\n        }\n        :focus-visible,\n        :focus-visible > span[aria-disabled='false'] {\n          outline: none;\n        }\n      "])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
-    } else {
-      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        > span:hover[aria-disabled='false'] {\n          color: ", ";\n          background-color: ", ";\n        }\n        ", "\n        > span[aria-disabled='true'] {\n          color: ", ";\n        }\n        :focus > span[aria-disabled='false'] {\n          ", ";\n        }\n        :focus-visible,\n        :focus-visible > span[aria-disabled='false'] {\n          outline: none;\n        }\n      "])), themed({
-        light: "var(--ds-text, ".concat(N900, ")"),
-        dark: "var(--ds-text, ".concat(DN600, ")")
-      })(theme), themed({
-        light: "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))",
-        dark: "var(--ds-background-neutral-subtle-hovered, rgb(59, 71, 92))"
-      })(theme), !submenuActive && "\n          > span:active[aria-disabled='false'] {\n            background-color: ".concat(themed({
-        light: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))",
-        dark: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"
-      })(theme), ";\n          }"), themed({
-        light: "var(--ds-text-disabled, ".concat(N70, ")"),
-        dark: "var(--ds-text-disabled, ".concat(DN80, ")")
-      })(theme), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
-    }
-  };
+  if (isActive) {
+    /**
+     * Hack for item to imitate old dropdown-menu selected styles
+     */
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
+  } else {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      ", "\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-text, ".concat(N900, ")"), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n          > span:active[aria-disabled='false'] {\n            background-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n          }"), "var(--ds-text-disabled, ".concat(N70, ")"), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
+  }
 };
 
 var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
@@ -291,10 +276,8 @@ function DropdownMenuItem(_ref) {
     setSubmenuActive(!!event.target.closest(".".concat(DropdownMenuSharedCssClassName.SUBMENU)));
   };
   var dropListItem = jsx("div", {
-    css: function css(theme) {
-      return buttonStyles(item.isActive, submenuActive)({
-        theme: theme
-      });
+    css: function css() {
+      return buttonStyles(item.isActive, submenuActive);
     },
     tabIndex: -1,
     "aria-disabled": item.isDisabled ? 'true' : 'false',

package/dist/types/media-inline/constants.d.ts

@@ -1,3 +1,22 @@
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;
 export declare const DEFAULT_INLINE_IMAGE_ASPECT_RATIO: number;
+export declare const DEFAULT_INLINE_IMAGE_BORDER_SIZE = 0;
+/**
+ * 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.
+ */
+export declare const referenceHeights: {
+    p: number;
+    h1: number;
+    h2: number;
+    h3: number;
+    h4: number;
+    h5: number;
+    h6: number;
+};

package/dist/types/media-inline/inline-image-wrapper.d.ts

@@ -4,6 +4,8 @@ type Props = {
     children: ReactElement;
     isSelected?: boolean;
     aspectRatio?: number | string;
+    borderSize?: number;
+    borderColor?: string;
 };
 export declare const InlineImageWrapper: FC<Props>;
 export {};

package/dist/types/media-inline/media-inline-image-card.d.ts

@@ -8,6 +8,10 @@ export interface MediaInlineImageCardProps {
     mediaClient: MediaClient;
     isSelected?: boolean;
     isLazy?: boolean;
+    border?: {
+        borderSize?: number;
+        borderColor?: string;
+    };
 }
 export declare const MediaInlineImageCardInternal: FC<MediaInlineImageCardProps & WrappedComponentProps & MediaInlineAttrs>;
 export declare const MediaInlineImageCard: FC<MediaInlineImageCardProps & MediaInlineAttrs>;