@atlaskit/editor-common 76.27.9 → 76.28.0

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

@@ -1,62 +1,43 @@
 import { css } from '@emotion/react';
 import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
 export const annotationPrefix = 'ak-editor-annotation';
 export const AnnotationSharedClassNames = {
   focus: `${annotationPrefix}-focus`,
   blur: `${annotationPrefix}-blur`,
   draft: `${annotationPrefix}-draft`
 };
-const DY75 = 'rgb(111, 92, 37)';
-const DY300 = '#ffd557';
 const Y75a = 'rgba(255, 240, 179, 0.5)';
 const Y200a = 'rgba(255, 196, 0, 0.82)';
-const DY75a = 'rgba(111, 92, 37, 0.5)';
-const DY200 = '#82641c';
-export const AnnotationSharedCSSByState = props => ({
+export const AnnotationSharedCSSByState = () => ({
   focus: css`
     // Background is not coming through in confluence, suspecting to be caused by some specific combination of
     // emotion and token look up
 
-    background: ${themed({
-    light: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
-    dark: `var(--ds-background-accent-yellow-subtler, ${DY75})`
-  })(props)};
-    border-bottom: 2px solid
-      ${themed({
-    light: `var(--ds-border-accent-yellow, ${Y300})`,
-    dark: `var(--ds-border-accent-yellow, ${DY300})`
-  })(props)};
+    background: ${`var(--ds-background-accent-yellow-subtler, ${Y75})`};
+    border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y300})`};
     // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
     box-shadow: ${`var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`};
     cursor: pointer;
   `,
   blur: css`
-    background: ${themed({
-    light: `var(--ds-background-accent-yellow-subtlest, ${Y75a})`,
-    dark: `var(--ds-background-accent-yellow-subtlest, ${DY75a})`
-  })(props)};
-    border-bottom: 2px solid
-      ${themed({
-    light: `var(--ds-border-accent-yellow, ${Y200a})`,
-    dark: `var(--ds-border-accent-yellow, ${DY200})`
-  })(props)};
+    background: ${`var(--ds-background-accent-yellow-subtlest, ${Y75a})`};
+    border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`};
     cursor: pointer;
   `
 });
-export const annotationSharedStyles = props => css`
+export const annotationSharedStyles = () => css`
   .ProseMirror {
     .${AnnotationSharedClassNames.focus} {
-      ${AnnotationSharedCSSByState(props).focus};
+      ${AnnotationSharedCSSByState().focus};
     }
 
     .${AnnotationSharedClassNames.draft} {
-      ${AnnotationSharedCSSByState(props).focus};
+      ${AnnotationSharedCSSByState().focus};
       cursor: initial;
     }
 
     .${AnnotationSharedClassNames.blur} {
-      ${AnnotationSharedCSSByState(props).blur};
+      ${AnnotationSharedCSSByState().blur};
     }
   }
 `;

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

@@ -1,8 +1,7 @@
 import { css } from '@emotion/react';
 import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { DN20, DN400, DN50, DN800, N20, N30, N400, N800 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius, fontSize } from '@atlaskit/theme/constants';
+import { N20, N30, N400, N800 } from '@atlaskit/theme/colors';
+import { fontSize } from '@atlaskit/theme/constants';
 export const CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
@@ -12,11 +11,11 @@ export const CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTENT: 'code-content',
   DS_CODEBLOCK: '[data-ds--code--code-block]'
 };
-export const codeBlockSharedStyles = props => css`
+export const codeBlockSharedStyles = () => css`
   .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
     position: relative;
     background-color: ${"var(--ds-surface-raised, transparent)"};
-    border-radius: ${borderRadius()}px;
+    border-radius: ${"var(--ds-border-radius, 3px)"};
     margin: ${blockNodesVerticalMargin} 0 0 0;
     font-family: ${akEditorCodeFontFamily};
     min-width: ${akEditorTableCellMinWidth}px;
@@ -44,21 +43,15 @@ export const codeBlockSharedStyles = props => css`
     }
 
     .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
-      background-color: ${themed({
-  light: `var(--ds-background-neutral, ${N20})`,
-  dark: `var(--ds-background-neutral, ${DN50})`
-})(props)};
+      background-color: ${`var(--ds-background-neutral, ${N20})`};
       display: flex;
-      border-radius: ${borderRadius()}px;
+      border-radius: ${"var(--ds-border-radius, 3px)"};
       width: 100%;
       counter-reset: line;
       overflow-x: auto;
 
       background-image: ${overflowShadow({
-  background: themed({
-    light: `var(--ds-background-neutral, ${N20})`,
-    dark: `var(--ds-background-neutral, ${DN50})`
-  })(props),
+  background: `var(--ds-background-neutral, ${N20})`,
   leftCoverWidth: "var(--ds-space-300, 24px)"
 })};
 
@@ -78,10 +71,7 @@ export const codeBlockSharedStyles = props => css`
     .${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
       flex-shrink: 0;
       text-align: right;
-      background-color: ${themed({
-  light: `var(--ds-background-neutral, ${N30})`,
-  dark: `var(--ds-background-neutral, ${DN20})`
-})(props)};
+      background-color: ${`var(--ds-background-neutral, ${N30})`};
       padding: ${"var(--ds-space-100, 8px)"};
       position: relative;
 
@@ -94,10 +84,7 @@ export const codeBlockSharedStyles = props => css`
           display: inline-block;
           content: counter(line);
           counter-increment: line;
-          color: ${themed({
-  light: `var(--ds-text-subtlest, ${N400})`,
-  dark: `var(--ds-text-subtlest, ${DN400})`
-})(props)};
+          color: ${`var(--ds-text-subtlest, ${N400})`};
           font-size: ${relativeFontSizeToBase16(fontSize())};
           line-height: 1.5rem;
         }
@@ -112,11 +99,8 @@ export const codeBlockSharedStyles = props => css`
         flex-grow: 1;
         tab-size: 4;
         cursor: text;
-        color: ${themed({
-  light: `var(--ds-text, ${N800})`,
-  dark: `var(--ds-text, ${DN800})`
-})(props)};
-        border-radius: ${borderRadius()}px;
+        color: ${`var(--ds-text, ${N800})`};
+        border-radius: ${"var(--ds-border-radius, 3px)"};
         margin: ${"var(--ds-space-100, 8px)"};
         white-space: pre;
         font-size: ${relativeFontSizeToBase16(fontSize())};

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

@@ -1,14 +1,10 @@
 import { css } from '@emotion/react';
 import { getCodeStyles } from '@atlaskit/code/inline';
-import { DN70, N30A } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-export const codeMarkSharedStyles = props => {
+import { N30A } from '@atlaskit/theme/colors';
+export const codeMarkSharedStyles = () => {
   return css`
     .code {
-      --ds--code--bg-color: ${themed({
-    light: `var(--ds-background-neutral, ${N30A})`,
-    dark: `var(--ds-background-neutral, ${DN70})`
-  })(props)};
+      --ds--code--bg-color: ${`var(--ds-background-neutral, ${N30A})`};
       ${getCodeStyles()}
     }
   `;

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.28.0";
 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