@atlaskit/editor-common 76.27.9 → 76.27.10

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

@@ -5,10 +5,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';
 const lightPanelColors = {
   info: B50,
   note: P50,
@@ -87,28 +84,10 @@ const lightIconColor = {
   warning: `var(--ds-icon-warning, ${Y400})`,
   error: `var(--ds-icon-danger, ${R400})`
 };
-const darkIconColor = {
-  info: `var(--ds-icon-information, ${B100})`,
-  note: `var(--ds-icon-discovery, ${P100})`,
-  tip: `var(--ds-icon-success, ${G200})`,
-  success: `var(--ds-icon-success, ${G200})`,
-  warning: `var(--ds-icon-warning, ${Y100})`,
-  error: `var(--ds-icon-danger, ${R200})`
-};
-const tokenDarkPanelColors = {
-  info: `var(--ds-background-information, ${darkPanelColors['info']})`,
-  note: `var(--ds-background-discovery, ${darkPanelColors['note']})`,
-  tip: `var(--ds-background-success, ${darkPanelColors['tip']})`,
-  success: `var(--ds-background-success, ${darkPanelColors['success']})`,
-  warning: `var(--ds-background-warning, ${darkPanelColors['warning']})`,
-  error: `var(--ds-background-danger, ${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.
-const panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
+const panelEmojiSpriteVerticalAlignment = -(8 * 3 - akEditorCustomIconSize) / 2;
 const panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
@@ -159,51 +138,19 @@ export const PanelSharedSelectors = {
   yellowWarningIcon: `[aria-label=":warning:"]  span:nth-child(1)`,
   copyButton: `button[aria-label="Copy"]`
 };
-const iconDynamicStyles = panelType => props => {
-  const light = lightIconColor[panelType];
-  const dark = darkIconColor[panelType];
-  const color = themed({
-    light,
-    dark
-  })(props);
-  return `
-    color: ${color};
-  `;
-};
+const iconDynamicStyles = panelType => `color: ${lightIconColor[panelType]};`;
 
 // Provides the color without tokens, used when converting to a custom panel
-export const getPanelTypeBackgroundNoTokens = (panelType, props = {}) => {
-  const light = lightPanelColors[panelType];
-  const dark = darkPanelColors[panelType];
-  const background = themed({
-    light,
-    dark
-  })(props);
-  return background || 'none';
-};
-export const getPanelTypeBackground = (panelType, props = {}) => {
-  const light = hexToEditorBackgroundPaletteColor(lightPanelColors[panelType]);
-  // hexToEditorBackgroundPaletteColor has a light mode as a fallback color - for legacy dark mode we define the tokens locally
-  const dark = tokenDarkPanelColors[panelType];
-  const background = themed({
-    light,
-    dark
-  })(props);
-  return background || 'none';
-};
-const mainDynamicStyles = panelType => props => {
-  const background = getPanelTypeBackground(panelType, props);
-  const text = themed({
-    light: 'inherit',
-    dark: darkPanelColors.TextColor
-  })(props);
+export const getPanelTypeBackgroundNoTokens = panelType => lightPanelColors[panelType] || 'none';
+export const getPanelTypeBackground = panelType => hexToEditorBackgroundPaletteColor(lightPanelColors[panelType]) || 'none';
+const mainDynamicStyles = panelType => {
   return `
-    background-color: ${background};
-    color: ${text};
+    background-color: ${getPanelTypeBackground(panelType)};
+    color: inherit;
   `;
 };
-export const panelSharedStylesWithoutPrefix = props => css`
-  border-radius: ${borderRadius()}px;
+export const panelSharedStylesWithoutPrefix = () => css`
+  border-radius: ${"var(--ds-border-radius, 3px)"};
   margin: ${blockNodesVerticalMargin} 0 0;
   padding: ${"var(--ds-space-100, 8px)"};
   min-width: ${akEditorTableCellMinWidth}px;
@@ -212,7 +159,7 @@ export const panelSharedStylesWithoutPrefix = props => css`
   align-items: baseline;
   word-break: break-word;
 
-  ${mainDynamicStyles(PanelType.INFO)(props)}
+  ${mainDynamicStyles(PanelType.INFO)}
 
   .${PanelSharedCssClassName.icon} {
     flex-shrink: 0;
@@ -225,7 +172,7 @@ export const panelSharedStylesWithoutPrefix = props => css`
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
-    ${iconDynamicStyles(PanelType.INFO)(props)}
+    ${iconDynamicStyles(PanelType.INFO)}
 
     > span {
       vertical-align: middle;
@@ -259,53 +206,47 @@ export const panelSharedStylesWithoutPrefix = props => css`
   }
 
   &[data-panel-type='${PanelType.NOTE}'] {
-    ${mainDynamicStyles(PanelType.NOTE)(props)}
+    ${mainDynamicStyles(PanelType.NOTE)}
 
     .${PanelSharedCssClassName.icon} {
-      ${iconDynamicStyles(PanelType.NOTE)(props)}
+      ${iconDynamicStyles(PanelType.NOTE)}
     }
   }
 
   &[data-panel-type='${PanelType.TIP}'] {
-    ${mainDynamicStyles(PanelType.TIP)(props)}
+    ${mainDynamicStyles(PanelType.TIP)}
 
     .${PanelSharedCssClassName.icon} {
-      ${iconDynamicStyles(PanelType.TIP)(props)}
+      ${iconDynamicStyles(PanelType.TIP)}
     }
   }
 
   &[data-panel-type='${PanelType.WARNING}'] {
-    ${mainDynamicStyles(PanelType.WARNING)(props)}
+    ${mainDynamicStyles(PanelType.WARNING)}
 
     .${PanelSharedCssClassName.icon} {
-      ${iconDynamicStyles(PanelType.WARNING)(props)}
+      ${iconDynamicStyles(PanelType.WARNING)}
     }
   }
 
   &[data-panel-type='${PanelType.ERROR}'] {
-    ${mainDynamicStyles(PanelType.ERROR)(props)}
+    ${mainDynamicStyles(PanelType.ERROR)}
 
     .${PanelSharedCssClassName.icon} {
-      ${iconDynamicStyles(PanelType.ERROR)(props)}
+      ${iconDynamicStyles(PanelType.ERROR)}
     }
   }
 
   &[data-panel-type='${PanelType.SUCCESS}'] {
-    ${mainDynamicStyles(PanelType.SUCCESS)(props)}
+    ${mainDynamicStyles(PanelType.SUCCESS)}
 
     .${PanelSharedCssClassName.icon} {
-      ${iconDynamicStyles(PanelType.SUCCESS)(props)}
+      ${iconDynamicStyles(PanelType.SUCCESS)}
     }
   }
-
-  &[data-panel-type='${PanelType.CUSTOM}'] {
-    ${themed({
-  dark: getPanelBackgroundDarkModeColors
-})(props)};
-  }
 `;
-export const panelSharedStyles = props => css`
+export const panelSharedStyles = () => css`
   .${PanelSharedCssClassName.prefix} {
-    ${panelSharedStylesWithoutPrefix(props)}
+    ${panelSharedStylesWithoutPrefix()}
   }
 `;

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

@@ -1,17 +1,11 @@
 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';
-const divider = themed({
-  light: `var(--ds-border, ${N30A})`,
-  dark: `var(--ds-border, ${DN50})`
-});
-
+import { N30A } from '@atlaskit/theme/colors';
 // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
-export const ruleSharedStyles = props => css`
+export const ruleSharedStyles = () => css`
   & hr {
     border: none;
-    background-color: ${divider(props)};
+    background-color: ${`var(--ds-border, ${N30A})`};
     margin: ${akEditorLineHeight}em 0;
     height: 2px;
     border-radius: 1px;

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

@@ -1,8 +1,7 @@
 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,17 +16,10 @@ export function BaseThemeWrapper({
   baseFontSize,
   children
 }) {
-  const {
-    mode
-  } = useGlobalTheme();
   const memoizedTheme = useMemo(() => ({
     baseFontSize: baseFontSize || fontSize(),
-    layoutMaxWidth: akEditorDefaultLayoutWidth,
-    // Below is used for editor dark mode.
-    [CHANNEL]: {
-      mode
-    }
-  }), [baseFontSize, mode]);
+    layoutMaxWidth: akEditorDefaultLayoutWidth
+  }), [baseFontSize]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
   }, children);

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

@@ -4,12 +4,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "76.27.9";
+const packageVersion = "76.27.10";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {
@@ -26,17 +24,11 @@ class DropList extends Component {
     ${this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'}
   `);
     /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-    _defineProperty(this, "menuWrapper", theme => {
+    _defineProperty(this, "menuWrapper", () => {
       return css`
-      color: ${themed({
-        light: `var(--ds-text, ${N900})`,
-        dark: `var(--ds-text, ${DN600})`
-      })(theme)};
-      background-color: ${themed({
-        light: `var(--ds-surface-overlay, ${N0})`,
-        dark: `var(--ds-surface-overlay, ${DN50})`
-      })(theme)};
-      border-radius: ${borderRadius()}px;
+      color: ${`var(--ds-text, ${N900})`};
+      background-color: ${`var(--ds-surface-overlay, ${N0})`};
+      border-radius: ${"var(--ds-border-radius, 3px)"};
       box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px calc(-1 * 2px) ${N50A}, 0 0 1px ${N60A}`})`};
       box-sizing: border-box;
       overflow: auto;
@@ -128,9 +120,7 @@ class DropList extends Component {
       id
     } = this.props;
     let layerContent = isOpen ? jsx("div", {
-      css: theme => this.menuWrapper({
-        theme: theme
-      }),
+      css: this.menuWrapper,
       "data-role": "droplistContent",
       "data-testid": testId && `${testId}--content`,
       ref: this.handleContentRef,

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

@@ -5,8 +5,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 const messages = defineMessages({
@@ -33,31 +32,22 @@ export const messages = defineMessages({
 });
 const BORDER_RADIUS = "var(--ds-border-radius-100, 4px)";
 const EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
-const EXPAND_SELECTED_BACKGROUND = themed({
-  light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
-  dark: "var(--ds-surface, rgba(9, 10, 11, 0.29))"
-});
+const EXPAND_SELECTED_BACKGROUND = "var(--ds-surface, rgba(255, 255, 255, 0.6))";
 const EXPAND_FOCUSED_BORDER_COLOR = `var(--ds-border-focused, ${B300})`;
 const EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
-const EXPAND_EXPANDED_BORDER_COLOR = themed({
-  light: `var(--ds-border, ${N40A})`,
-  dark: `var(--ds-border, ${DN50})`
-});
+const EXPAND_EXPANDED_BORDER_COLOR = `var(--ds-border, ${N40A})`;
 export const ExpandIconWrapper = ({
   children,
   expanded
 }) => {
   return jsx("div", {
-    css: props => expanded ? [expandIconWrapperStyle(props), expandIconWrapperExpandedStyle] : expandIconWrapperStyle(props)
+    css: () => expanded ? [expandIconWrapperStyle(), expandIconWrapperExpandedStyle] : expandIconWrapperStyle()
   }, children);
 };
-const expandIconWrapperStyle = props => css`
+const expandIconWrapperStyle = () => css`
   cursor: pointer;
   display: flex;
-  color: ${themed({
-  light: `var(--ds-icon, ${N90})`,
-  dark: "var(--ds-icon, #d9dde3)"
-})(props)};
+  color: ${`var(--ds-icon, ${N90})`};
   border-radius: ${"var(--ds-border-radius-100, 4px)"};
   width: 24px;
   height: 24px;
@@ -101,13 +91,13 @@ const containerStyles = styleProps => {
   // and is the root level expand.
   const marginHorizontal = styleProps['data-node-type'] === 'expand' ? `-${akLayoutGutterOffset}px` : 0;
   const margin = `${marginTop} ${marginHorizontal} ${marginBottom}`;
-  return themeProps => css`
+  return () => css`
     border-width: 1px;
     border-style: solid;
-    border-color: ${focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR};
+    border-color: ${focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR};
     border-radius: ${BORDER_RADIUS};
     min-height: 25px;
-    background: ${!expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps)};
+    background: ${!expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND};
     margin: ${margin};
 
     transition: background 0.3s ${akEditorSwoopCubicBezier},
@@ -118,12 +108,8 @@ const containerStyles = styleProps => {
       // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
       // This is because the default state already uses the same token and, as such, the hover style won't change anything.
       // https://product-fabric.atlassian.net/browse/DSP-4152
-      border: 1px solid
-        ${themed({
-    light: `var(--ds-border, ${N50A})`,
-    dark: `var(--ds-border, ${DN50})`
-  })(themeProps)};
-      background: ${EXPAND_SELECTED_BACKGROUND(themeProps)};
+      border: 1px solid ${`var(--ds-border, ${N50A})`};
+      background: ${EXPAND_SELECTED_BACKGROUND};
     }
 
     td > :not(style):first-child,
@@ -132,7 +118,7 @@ const containerStyles = styleProps => {
     }
   `;
 };
-const contentStyles = styleProps => themeProps => css`
+const contentStyles = styleProps => () => css`
     padding-top: ${styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"};
     padding-right: ${"var(--ds-space-100, 8px)"};
     // TODO: Migrate away from gridSize
@@ -161,16 +147,13 @@ const contentStyles = styleProps => themeProps => css`
         }
       ` : ''}
   `;
-const titleInputStyles = props => css`
+const titleInputStyles = () => css`
   outline: none;
   border: none;
   font-size: ${relativeFontSizeToBase16(fontSize())};
   line-height: ${akEditorLineHeight};
   font-weight: normal;
-  color: ${themed({
-  light: `var(--ds-text-subtlest, ${N200A})`,
-  dark: `var(--ds-text-subtlest, ${DN600})`
-})(props)};
+  color: ${`var(--ds-text-subtlest, ${N200A})`};
   background: transparent;
   display: flex;
   flex: 1;
@@ -178,17 +161,11 @@ const titleInputStyles = props => css`
   width: 100%;
 
   &::placeholder {
-    opacity: ${themed({
-  light: 1,
-  dark: 0.6
-})(props)};
-    color: ${themed({
-  light: `var(--ds-text-subtlest, ${N200})`,
-  dark: `var(--ds-text-subtlest, ${DN600})`
-})(props)};
+    opacity: 1;
+    color: ${`var(--ds-text-subtlest, ${N200})`};
   }
 `;
-const titleContainerStyles = props => css`
+const titleContainerStyles = () => css`
   padding: 0;
   display: flex;
   align-items: flex-start;
@@ -196,10 +173,7 @@ const titleContainerStyles = props => css`
   border: none;
   font-size: ${relativeFontSizeToBase16(fontSize())};
   width: 100%;
-  color: ${themed({
-  light: `var(--ds-text-subtle, ${N300A})`,
-  dark: `var(--ds-text-subtle, ${DN600})`
-})(props)};
+  color: ${`var(--ds-text-subtle, ${N300A})`};
   overflow: hidden;
   cursor: pointer;
 

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

@@ -11,8 +11,8 @@ const errorColor = css`
 const validColor = css`
   color: ${`var(--ds-text-success, ${G400})`};
 `;
-const messageStyle = props => css`
-  ${h200(props)} font-weight: normal;
+const messageStyle = () => css`
+  ${h200()} font-weight: normal;
   color: ${`var(--ds-text-subtlest, ${N200})`};
   margin-top: ${"var(--ds-space-050, 4px)"};
   display: flex;
@@ -30,8 +30,8 @@ export const HelperMessage = ({
 export const ErrorMessage = ({
   children
 }) => jsx("div", {
-  css: theme => {
-    return [messageStyle(theme), errorColor];
+  css: () => {
+    return [messageStyle(), errorColor];
   }
 }, jsx("span", {
   css: iconWrapperStyle
@@ -43,8 +43,8 @@ export const ErrorMessage = ({
 export const ValidMessage = ({
   children
 }) => jsx("div", {
-  css: theme => {
-    return [messageStyle(theme), validColor];
+  css: () => {
+    return [messageStyle(), validColor];
   }
 }, jsx("span", {
   css: iconWrapperStyle

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

@@ -5,13 +5,11 @@ 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 class PortalProviderAPI extends EventDispatcher {
-  constructor(intl, onAnalyticsEvent, analyticsContext, themeMode) {
+  constructor(intl, onAnalyticsEvent, analyticsContext) {
     super();
     _defineProperty(this, "portals", new Map());
     _defineProperty(this, "setContext", context => {
@@ -20,7 +18,6 @@ export class PortalProviderAPI extends EventDispatcher {
     this.intl = intl;
     this.onAnalyticsEvent = onAnalyticsEvent;
     this.useAnalyticsContext = analyticsContext;
-    this.themeMode = themeMode;
   }
   render(children, container, hasAnalyticsContext = false, hasIntlContext = false) {
     this.portals.set(container, {
@@ -28,10 +25,7 @@ export class PortalProviderAPI extends EventDispatcher {
       hasAnalyticsContext,
       hasIntlContext
     });
-    const childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
-      mode: this.themeMode
-    }, children());
-    let wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders) : childrenWithThemeProviders;
+    let wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, children()) : children();
     if (hasIntlContext) {
       wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
         value: this.intl
@@ -44,26 +38,21 @@ export class PortalProviderAPI extends EventDispatcher {
   // we (unfortunately) need to re-render to pass down any updated context.
   // selectively do this for nodeviews that opt-in via `hasAnalyticsContext`
   forceUpdate({
-    intl,
-    themeMode
+    intl
   }) {
     this.intl = intl;
-    this.themeMode = themeMode;
     this.portals.forEach((portal, container) => {
       if (!portal.hasAnalyticsContext && !this.useAnalyticsContext && !portal.hasIntlContext) {
         return;
       }
       let wrappedChildren = portal.children();
-      const childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
-        mode: themeMode
-      }, wrappedChildren);
       if (portal.hasAnalyticsContext && this.useAnalyticsContext) {
-        wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders);
+        wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, wrappedChildren);
       }
       if (portal.hasIntlContext) {
         wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
           value: this.intl
-        }, childrenWithThemeProviders);
+        }, wrappedChildren);
       }
       unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container);
     });
@@ -103,15 +92,14 @@ export class PortalProviderAPI extends EventDispatcher {
 class BasePortalProvider extends React.Component {
   constructor(props) {
     super(props);
-    this.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
+    this.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext);
   }
   render() {
     return this.props.render(this.portalProviderAPI);
   }
   componentDidUpdate() {
     this.portalProviderAPI.forceUpdate({
-      intl: this.props.intl,
-      themeMode: this.props.themeMode
+      intl: this.props.intl
     });
   }
 }
@@ -132,10 +120,8 @@ const PortalProviderWithThemeAndIntlProviders = ({
   render
 }) => {
   const intl = useIntl();
-  const globalTheme = useGlobalTheme();
   return /*#__PURE__*/React.createElement(BasePortalProvider, {
     intl: intl,
-    themeMode: globalTheme.mode,
     onAnalyticsEvent: onAnalyticsEvent,
     useAnalyticsContext: useAnalyticsContext,
     render: render

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

@@ -4,9 +4,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';
@@ -26,12 +24,9 @@ const colorPickerExpandContainer = css`
 // 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 */
-const colorPickerWrapper = theme => css`
-  border-radius: ${borderRadius()}px;
-  background-color: ${themed({
-  light: `var(--ds-surface-overlay, ${N0})`,
-  dark: `var(--ds-surface-overlay, ${DN50})`
-})(theme)};
+const colorPickerWrapper = () => css`
+  border-radius: ${"var(--ds-border-radius, 3px)"};
+  background-color: ${`var(--ds-surface-overlay, ${N0})`};
   box-shadow: 0 4px 8px -2px ${N60A}, 0 0 1px ${N60A};
   padding: ${"var(--ds-space-100, 8px)"} 0px;
 `;
@@ -153,7 +148,7 @@ const ColorPickerButton = props => {
   };
   const title = props.title || '';
   const currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  const buttonStyle = theme => {
+  const buttonStyle = () => {
     var _props$size, _props$size2, _props$size3;
     return css`
     padding: ${"var(--ds-space-075, 6px)"} 10px;
@@ -167,7 +162,7 @@ const ColorPickerButton = props => {
       align-self: center;
       content: '';
       border: 1px solid ${DEFAULT_BORDER_COLOR};
-      border-radius: ${borderRadius()}px;
+      border-radius: ${"var(--ds-border-radius, 3px)"};
       background-color: ${currentColor || 'transparent'};
       width: ${((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px'};
       height: ${((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px'};
@@ -175,10 +170,7 @@ const ColorPickerButton = props => {
       margin: 0px ${"var(--ds-space-025, 2px)"};
     }
     &:hover {
-      background: ${themed({
-      light: `var(--ds-background-neutral-subtle-hovered, ${N30A})`,
-      dark: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
-    })(theme)};
+      background: ${`var(--ds-background-neutral-subtle-hovered, ${N30A})`};
     }
   `;
   };