@atlaskit/editor-plugin-text-color 12.3.29 → 12.3.31

package/dist/es2019/pm-plugins/main.js

@@ -1,9 +1,8 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { getTextColorInNonActiveTheme, textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
+import { textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { getActiveColor, isMultiTextColorSelection } from './utils/color';
+import { getActiveColor } from './utils/color';
 import { DEFAULT_COLOR } from './utils/constants';
 import { getDisabledState } from './utils/disabled';
 function createInitialPluginState(editorState, pluginConfig) {
@@ -20,12 +19,7 @@ function createInitialPluginState(editorState, pluginConfig) {
     disabled: getDisabledState(editorState),
     palette,
     defaultColor: defaultColor.color,
-    isPaletteOpen: false,
-    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-      colorInNonActiveTheme: getTextColorInNonActiveTheme(color, defaultColor.color),
-      isMultiTextColor: isMultiTextColorSelection(editorState)
-    })
+    isPaletteOpen: false
   };
   return state;
 }
@@ -51,12 +45,7 @@ export function createPlugin(dispatch, pluginConfig) {
           case ACTIONS.RESET_COLOR:
             nextState = {
               ...pluginState,
-              color: pluginState.defaultColor,
-              // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-              ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-                colorInNonActiveTheme: getTextColorInNonActiveTheme(pluginState.defaultColor, pluginState.defaultColor),
-                isMultiTextColor: false
-              })
+              color: pluginState.defaultColor
             };
             break;
           case ACTIONS.SET_COLOR:
@@ -64,12 +53,7 @@ export function createPlugin(dispatch, pluginConfig) {
               ...pluginState,
               color: meta.color,
               disabled: false,
-              isPaletteOpen: false,
-              // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-              ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-                colorInNonActiveTheme: getTextColorInNonActiveTheme(meta.color, pluginState.defaultColor),
-                isMultiTextColor: false
-              })
+              isPaletteOpen: false
             };
             break;
           case ACTIONS.DISABLE:
@@ -89,15 +73,10 @@ export function createPlugin(dispatch, pluginConfig) {
             nextState = {
               ...pluginState,
               color,
-              disabled: getDisabledState(newState),
-              // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-              ...(color !== pluginState.color && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-                colorInNonActiveTheme: getTextColorInNonActiveTheme(color, pluginState.defaultColor),
-                isMultiTextColor: isMultiTextColorSelection(newState)
-              })
+              disabled: getDisabledState(newState)
             };
         }
-        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isMultiTextColor !== nextState.isMultiTextColor || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
+        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
           dispatch(pluginKey, nextState);
           return nextState;
         }

package/dist/es2019/pm-plugins/utils/color.js

@@ -1,4 +1,3 @@
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { DEFAULT_COLOR } from './constants';
 
 /**
@@ -45,32 +44,6 @@ export const getActiveColor = state => {
   }
   return marksWithColor.length ? marksWithColor[0].attrs.color : DEFAULT_COLOR.color;
 };
-
-/**
- * Returns true when the selection contains two or more distinct text colors,
- * counting unmarked text as the default color.
- */
-export const isMultiTextColorSelection = state => {
-  const {
-    selection,
-    doc
-  } = state;
-  if (!(selection instanceof TextSelection)) {
-    return false;
-  }
-  const {
-    textColor
-  } = doc.type.schema.marks;
-  const colors = new Set();
-  doc.nodesBetween(selection.from, selection.to, node => {
-    if (node.isText) {
-      var _mark$attrs$color;
-      const mark = textColor.isInSet(node.marks);
-      colors.add((_mark$attrs$color = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : DEFAULT_COLOR.color);
-    }
-  });
-  return colors.size > 1;
-};
 export const getActiveColorNew = tr => {
   const {
     $from,

package/dist/es2019/ui/ColorAccessibilityMenuItem.compiled.css

@@ -1,4 +1,3 @@
-
 ._19itglyw{border:none}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}

package/dist/es2019/ui/ColorAccessibilityMenuItem.js

@@ -1,14 +1,17 @@
-/* ColorAccessibilityMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* ColorAccessibilityMenuItem.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./ColorAccessibilityMenuItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { PanelType } from '@atlaskit/adf-schema/panel';
 import { IconButton } from '@atlaskit/button/new';
 import { cx } from '@atlaskit/css';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { colorAccessibilityMessages as messages } from '@atlaskit/editor-common/messages';
-import { getHighlightColorInNonActiveTheme, getTextColorInNonActiveTheme, getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
-import { hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
+import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getTextColorInNonActiveTheme, getTokenCSSVariableValue, getTokenCSSVariableValueForNonActiveTheme } from '@atlaskit/editor-common/ui-color';
+import { hexToEditorBackgroundPaletteColor, hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import AccessibilityIcon from '@atlaskit/icon/core/accessibility';
 import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
@@ -16,7 +19,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
 import { getTokenValue } from '@atlaskit/tokens/get-token-value';
 import { getContrastRatio as calcContrastRatio } from '../pm-plugins/utils/color-contrast';
-import { DEFAULT_COLOR, DEFAULT_BACKGROUND_COLOR, TRANSPARENT_HIGHLIGHT_COLOR, ACCESSIBLE_CONTRAST_RATIO, DIFFICULT_CONTRAST_RATIO } from '../pm-plugins/utils/constants';
+import { DEFAULT_COLOR, DEFAULT_BACKGROUND_COLOR, ACCESSIBLE_CONTRAST_RATIO, DIFFICULT_CONTRAST_RATIO } from '../pm-plugins/utils/constants';
 const resolveColorValue = (color, fallback) => {
   return getTokenCSSVariableValue(color) || (color.startsWith('var(') ? fallback : color);
 };
@@ -27,30 +30,117 @@ const getForegroundColor = (textColor, defaultColor) => {
   const colorValue = hexToEditorTextPaletteColor(textColor) || textColor;
   return resolveColorValue(colorValue, textColor);
 };
-const getBackgroundColor = highlightColor => {
-  if (!highlightColor || highlightColor === TRANSPARENT_HIGHLIGHT_COLOR) {
+const getBackgroundColor = (backgroundColor, palette = 'text') => {
+  if (!backgroundColor || backgroundColor === 'none') {
     return getTokenValue('elevation.surface', DEFAULT_BACKGROUND_COLOR);
   }
-  const colorValue = hexToEditorTextBackgroundPaletteColor(highlightColor) || highlightColor;
-  return resolveColorValue(colorValue, highlightColor);
+  const colorValue = palette === 'element' ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : hexToEditorTextBackgroundPaletteColor(backgroundColor) || backgroundColor;
+  return resolveColorValue(colorValue, backgroundColor);
+};
+const getBackgroundColorInNonActiveTheme = (backgroundColor, palette = 'text') => {
+  if (!backgroundColor || backgroundColor === 'none') {
+    return getTokenCSSVariableValueForNonActiveTheme("var(--ds-surface, #FFFFFF)", DEFAULT_BACKGROUND_COLOR);
+  }
+  const colorValue = palette === 'element' ? hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor : hexToEditorTextBackgroundPaletteColor(backgroundColor) || backgroundColor;
+  return getTokenCSSVariableValueForNonActiveTheme(colorValue, backgroundColor);
+};
+const STANDARD_PANEL_BACKGROUND_COLORS = new Map([[PanelType.INFO, getPanelTypeBackgroundNoTokens(PanelType.INFO)], [PanelType.NOTE, getPanelTypeBackgroundNoTokens(PanelType.NOTE)], [PanelType.SUCCESS, getPanelTypeBackgroundNoTokens(PanelType.SUCCESS)], [PanelType.WARNING, getPanelTypeBackgroundNoTokens(PanelType.WARNING)], [PanelType.ERROR, getPanelTypeBackgroundNoTokens(PanelType.ERROR)]]);
+const getResolvedBackgroundFromHighlight = highlightColor => {
+  if (!highlightColor) {
+    return {
+      color: null,
+      source: 'text'
+    };
+  }
+  return {
+    color: highlightColor,
+    source: 'text'
+  };
+};
+
+/**
+ * Resolves a background color from a container node that paints behind text.
+ * Callers walk ancestors so the nearest painted container wins.
+ */
+const getSupportedAncestorBackgroundColor = node => {
+  let backgroundColor;
+  if (node.type.name === 'tableCell' || node.type.name === 'tableHeader') {
+    backgroundColor = node.attrs.background;
+  } else if (node.type.name === 'panel' || node.type.name === 'panel_c1') {
+    if (node.attrs.panelType === PanelType.CUSTOM) {
+      backgroundColor = node.attrs.panelColor;
+    } else {
+      backgroundColor = STANDARD_PANEL_BACKGROUND_COLORS.get(node.attrs.panelType);
+    }
+  }
+  return backgroundColor ? {
+    color: backgroundColor,
+    source: 'element'
+  } : null;
+};
+
+/**
+ * Resolves the visible background behind a text node.
+ * Text highlight wins before falling back to the nearest element background.
+ */
+export const getResolvedBackgroundColorForTextNode = ($pos, node) => {
+  for (const mark of node.marks) {
+    if (mark.type.name === 'backgroundColor' && mark.attrs.color) {
+      return {
+        color: mark.attrs.color,
+        source: 'text'
+      };
+    }
+  }
+  for (let depth = $pos.depth; depth > 0; depth--) {
+    const resolvedBackgroundColor = getSupportedAncestorBackgroundColor($pos.node(depth));
+    if (resolvedBackgroundColor) {
+      return resolvedBackgroundColor;
+    }
+  }
+  return {
+    color: null,
+    source: 'text'
+  };
+};
+const getResolvedBackgroundColorForPosition = ($pos, highlightColor) => {
+  const highlightBackground = getResolvedBackgroundFromHighlight(highlightColor);
+  if (highlightColor) {
+    return highlightBackground;
+  }
+  for (let depth = $pos.depth; depth > 0; depth--) {
+    const resolvedBackgroundColor = getSupportedAncestorBackgroundColor($pos.node(depth));
+    if (resolvedBackgroundColor) {
+      return resolvedBackgroundColor;
+    }
+  }
+  return highlightBackground;
+};
+const getResolvedBackgroundColorValue = backgroundColor => {
+  if (backgroundColor.source === 'element') {
+    return getBackgroundColor(backgroundColor.color, 'element');
+  }
+  return getBackgroundColor(backgroundColor.color);
+};
+const getResolvedBackgroundColorValueInNonActiveTheme = backgroundColor => {
+  if (backgroundColor.source === 'element') {
+    return getBackgroundColorInNonActiveTheme(backgroundColor.color, 'element');
+  }
+  return getBackgroundColorInNonActiveTheme(backgroundColor.color);
 };
 const useColorAccessibilityState = api => {
   return useSharedPluginStateWithSelector(api, ['textColor', 'highlight'], states => {
-    var _states$textColorStat, _states$highlightStat, _states$highlightStat2, _states$highlightStat3, _states$textColorStat2, _states$textColorStat3, _states$textColorStat4;
+    var _states$textColorStat, _states$highlightStat, _states$textColorStat2;
     return {
       defaultColor: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.defaultColor,
       highlightColor: (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.activeColor,
-      highlightColorInNonActiveTheme: (_states$highlightStat2 = states.highlightState) === null || _states$highlightStat2 === void 0 ? void 0 : _states$highlightStat2.activeColorInNonActiveTheme,
-      isMultiHighlightColor: (_states$highlightStat3 = states.highlightState) === null || _states$highlightStat3 === void 0 ? void 0 : _states$highlightStat3.isMultiHighlightColor,
-      isMultiTextColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.isMultiTextColor,
-      textColor: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.color,
-      textColorInNonActiveTheme: (_states$textColorStat4 = states.textColorState) === null || _states$textColorStat4 === void 0 ? void 0 : _states$textColorStat4.colorInNonActiveTheme
+      textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color
     };
   });
 };
-const getContrastRatio = (defaultColor, highlightColor, textColor) => {
+const getContrastRatio = (defaultColor, backgroundColor, textColor) => {
   try {
-    const contrastRatio = calcContrastRatio(getForegroundColor(textColor, defaultColor), getBackgroundColor(highlightColor));
+    const contrastRatio = calcContrastRatio(getForegroundColor(textColor, defaultColor), getResolvedBackgroundColorValue(backgroundColor));
     return contrastRatio;
   } catch {
     // if we failed to calculate the contrast ratio, return null
@@ -58,16 +148,10 @@ const getContrastRatio = (defaultColor, highlightColor, textColor) => {
   }
 };
 
-// Computes the contrast ratio for a (textColor, highlightColor) pair as it would
-// appear in the non-active theme, using the shared resolvers so the walker
-// evaluates the same colors the single-pair plugin-state path does. Returns null
-// if it cannot be calculated.
-const getNonActiveThemeContrastRatio = (defaultColor, highlightColor, textColor) => {
+// Computes the contrast ratio as it would appear in the non-active theme.
+const getNonActiveThemeContrastRatio = (defaultColor, backgroundColor, textColor) => {
   try {
-    return calcContrastRatio(getTextColorInNonActiveTheme(textColor !== null && textColor !== void 0 ? textColor : null, defaultColor || DEFAULT_COLOR.color), getHighlightColorInNonActiveTheme(highlightColor !== null && highlightColor !== void 0 ? highlightColor : null, {
-      defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR,
-      transparentColor: TRANSPARENT_HIGHLIGHT_COLOR
-    }));
+    return calcContrastRatio(getTextColorInNonActiveTheme(textColor !== null && textColor !== void 0 ? textColor : null, defaultColor || DEFAULT_COLOR.color), getResolvedBackgroundColorValueInNonActiveTheme(backgroundColor));
   } catch {
     // if we failed to calculate the contrast ratio, return null
     return null;
@@ -84,87 +168,92 @@ const getAccessibilityStatus = contrastRatio => {
 };
 
 /**
- * Collects the worst accessibility status across all unique (textColor, highlightColor)
+ * Computes status from active foreground/background colors only.
+ * Used by the gate-off path so legacy behavior stays isolated.
+ */
+const getAccessibilityStatusFromColorPair = (defaultColor, backgroundColor, textColor) => {
+  const contrastRatio = getContrastRatio(defaultColor, backgroundColor, textColor);
+  return contrastRatio === null ? null : getAccessibilityStatus(contrastRatio);
+};
+
+/**
+ * Returns the lowest contrast ratio across active and non-active themes.
+ */
+const getMostCriticalContrastRatioAcrossThemes = (defaultColor, backgroundColor, textColor) => {
+  const contrastRatio = getContrastRatio(defaultColor, backgroundColor, textColor);
+  const nonActiveThemeContrastRatio = getNonActiveThemeContrastRatio(defaultColor, backgroundColor, textColor);
+  if (contrastRatio !== null && nonActiveThemeContrastRatio !== null) {
+    return Math.min(contrastRatio, nonActiveThemeContrastRatio);
+  }
+  return contrastRatio;
+};
+const getAccessibilityStatusFromColorPairAcrossThemes = (defaultColor, backgroundColor, textColor) => {
+  const mostCriticalContrastRatio = getMostCriticalContrastRatioAcrossThemes(defaultColor, backgroundColor, textColor);
+  return mostCriticalContrastRatio === null ? null : getAccessibilityStatus(mostCriticalContrastRatio);
+};
+
+/**
+ * Collects the worst accessibility status across all unique foreground/background
  * combinations in the current selection.
  *
- * When the selection spans multiple text colors and/or highlight colors,
- * this walks the document between selection boundaries and checks every
- * text node's color marks, computing the contrast ratio for each unique pair
- * (across both the active and non-active theme) and returning the worst
- * status found.
+ * When the selection spans multiple text colors and/or resolved backgrounds,
+ * this checks each unique pair across both the active and non-active theme and
+ * returns the worst status found.
  */
-const getWorstAccessibilityStatusFromSelection = (api, defaultColor) => {
-  if (!(api !== null && api !== void 0 && api.core)) {
+const getWorstAccessibilityStatusFromEditorState = (state, defaultColor) => {
+  let worstContrastRatio = null;
+
+  // Text/highlight colors only apply to a text range. If the selection is
+  // not a text selection (e.g. a node, cell or all selection) there is no
+  // meaningful range of colored text to evaluate.
+  if (!(state.selection instanceof TextSelection) || state.selection.empty) {
     return null;
   }
-
-  // Track the lowest (worst) contrast ratio across all pairs; a lower ratio
-  // means a worse accessibility status, so a single numeric comparison is
-  // enough to find the worst pair.
-  let worstContrastRatio = null;
-  api.core.actions.execute(({
-    tr
-  }) => {
-    // Text/highlight colors only apply to a text range. If the selection is
-    // not a text selection (e.g. a node, cell or all selection) there is no
-    // meaningful range of colored text to evaluate.
-    if (!(tr.selection instanceof TextSelection)) {
-      return null;
+  const {
+    from,
+    to
+  } = state.selection;
+  const seen = new Set();
+  state.doc.nodesBetween(from, to, (node, pos) => {
+    var _textColor, _backgroundColor$colo;
+    if (!node.isText) {
+      return !node.isLeaf;
     }
-    const {
-      from,
-      to
-    } = tr.selection;
-    const seen = new Set();
-    tr.doc.nodesBetween(from, to, node => {
-      var _textColor, _highlightColor;
-      // Text and highlight color marks only apply to text nodes, so skip
-      // any non-text leaves (e.g. emoji, mentions, inline cards). Continue
-      // descending into container nodes to reach their text children.
-      if (!node.isText) {
-        return !node.isLeaf;
-      }
-
-      // Extract both color marks in a single pass over the node's marks
-      // rather than two `Array.find` scans.
-      let textColor = null;
-      let highlightColor = null;
-      for (const mark of node.marks) {
-        if (mark.type.name === 'textColor') {
-          var _mark$attrs$color;
-          textColor = (_mark$attrs$color = mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : null;
-        } else if (mark.type.name === 'backgroundColor') {
-          var _mark$attrs$color2;
-          highlightColor = (_mark$attrs$color2 = mark.attrs.color) !== null && _mark$attrs$color2 !== void 0 ? _mark$attrs$color2 : null;
-        }
-      }
-      const pairKey = `${(_textColor = textColor) !== null && _textColor !== void 0 ? _textColor : 'default'}|${(_highlightColor = highlightColor) !== null && _highlightColor !== void 0 ? _highlightColor : 'default'}`;
-      // Skip pairs we have already evaluated so the expensive contrast
-      // calculations run at most once per unique (text, highlight) pair.
-      if (seen.has(pairKey)) {
-        return;
-      }
-      seen.add(pairKey);
-      const contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
-      if (contrastRatio === null) {
-        return;
-      }
-
-      // Account for the non-active theme so the worst-case (least
-      // accessible) contrast across both themes is used for each pair,
-      // keeping multi-color selections consistent with the single-pair path.
-      const nonActiveThemeContrastRatio = getNonActiveThemeContrastRatio(defaultColor, highlightColor, textColor);
-      const mostCriticalContrastRatio = nonActiveThemeContrastRatio !== null ? Math.min(contrastRatio, nonActiveThemeContrastRatio) : contrastRatio;
-      if (worstContrastRatio === null || mostCriticalContrastRatio < worstContrastRatio) {
-        worstContrastRatio = mostCriticalContrastRatio;
+    let textColor = null;
+    for (const mark of node.marks) {
+      if (mark.type.name === 'textColor') {
+        var _mark$attrs$color;
+        textColor = (_mark$attrs$color = mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : null;
       }
-    });
-
-    // Read-only operation — do not dispatch
-    return null;
+    }
+    const backgroundColor = getResolvedBackgroundColorForTextNode(state.doc.resolve(pos), node);
+    const pairKey = `${(_textColor = textColor) !== null && _textColor !== void 0 ? _textColor : 'default'}|${backgroundColor.source}|${(_backgroundColor$colo = backgroundColor.color) !== null && _backgroundColor$colo !== void 0 ? _backgroundColor$colo : 'default'}`;
+    // Skip foreground/background pairs already evaluated. The source is
+    // part of the key because text highlights and element backgrounds use
+    // different editor palettes.
+    if (seen.has(pairKey)) {
+      return;
+    }
+    seen.add(pairKey);
+    const mostCriticalContrastRatio = getMostCriticalContrastRatioAcrossThemes(defaultColor, backgroundColor, textColor);
+    if (mostCriticalContrastRatio === null) {
+      return;
+    }
+    if (worstContrastRatio === null || mostCriticalContrastRatio < worstContrastRatio) {
+      worstContrastRatio = mostCriticalContrastRatio;
+    }
   });
   return worstContrastRatio === null ? null : getAccessibilityStatus(worstContrastRatio);
 };
+export const getAccessibilityStatusForCurrentSelection = (state, defaultColor, highlightColor, textColor) => {
+  if (state.selection instanceof TextSelection) {
+    if (!state.selection.empty) {
+      return getWorstAccessibilityStatusFromEditorState(state, defaultColor);
+    }
+    return getAccessibilityStatusFromColorPairAcrossThemes(defaultColor, getResolvedBackgroundColorForPosition(state.selection.$from, highlightColor), textColor);
+  }
+  return null;
+};
 const AccessibilityStatus = ({
   accessibilityStatus,
   formatMessage
@@ -202,54 +291,13 @@ export const ColorAccessibilityMenuItem = ({
   const {
     defaultColor,
     highlightColor,
-    highlightColorInNonActiveTheme,
-    isMultiHighlightColor,
-    isMultiTextColor,
-    textColor,
-    textColorInNonActiveTheme
+    textColor
   } = useColorAccessibilityState(api);
-  // The multi-color selection handling (walking every unique text/highlight
-  // pair across the active and non-active theme) is only performed when the
-  // patch gate is on. When the gate is off we fall back to the legacy behavior
-  // of only evaluating the single active text/highlight color in the current
-  // active theme
-  const isMultiColorSelection = Boolean(isMultiTextColor || isMultiHighlightColor) && fg('platform_editor_lovability_text_bg_color_patch_1');
-
-  // The complement of `isMultiColorSelection`: the single active text/highlight
-  // pair is evaluated whenever we are not walking a multi-color selection. This
-  // covers both a genuinely single-color selection (gate on) and every
-  // selection when the gate is off (legacy behavior).
-  const isSingleColorSelection = !isMultiColorSelection;
-
-  // Memoize the selection walk so we don't re-traverse the entire ProseMirror
-  // document on every render. It only needs to recompute when the multi-color
-  // selection state or the inputs to the walk change (the selection flags,
-  // default color, or the plugin api).
-  const multiColorStatus = React.useMemo(() => isMultiColorSelection ? getWorstAccessibilityStatusFromSelection(api, defaultColor) : null,
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isMultiColorSelection, isMultiTextColor, isMultiHighlightColor, defaultColor, api]);
-
-  // The single active text/highlight pair path. Everything below only applies
-  // when we are not walking a multi-color selection
-  let singleColorStatus = null;
-  if (isSingleColorSelection) {
-    const singleColorContrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
-
-    // Also account for the non-active theme (gate on only) so the worst-case
-    // (least accessible) status across both themes is shown.
-    let nonActiveThemeSingleColorRatio = null;
-    if (textColorInNonActiveTheme && highlightColorInNonActiveTheme && fg('platform_editor_lovability_text_bg_color_patch_1')) {
-      try {
-        nonActiveThemeSingleColorRatio = calcContrastRatio(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
-      } catch {
-        // if we failed to calculate the contrast ratio, leave as null
-        nonActiveThemeSingleColorRatio = null;
-      }
-    }
-    const mostCriticalContrastRatio = singleColorContrastRatio !== null && nonActiveThemeSingleColorRatio !== null ? Math.min(singleColorContrastRatio, nonActiveThemeSingleColorRatio) : singleColorContrastRatio;
-    singleColorStatus = mostCriticalContrastRatio !== null ? getAccessibilityStatus(mostCriticalContrastRatio) : null;
-  }
-  const accessibilityStatus = isSingleColorSelection ? singleColorStatus : multiColorStatus;
+  const {
+    editorView
+  } = useEditorToolbar();
+  const editorState = editorView === null || editorView === void 0 ? void 0 : editorView.state;
+  const accessibilityStatus = React.useMemo(() => editorState && fg('platform_editor_lovability_text_bg_color_patch_1') ? getAccessibilityStatusForCurrentSelection(editorState, defaultColor, highlightColor, textColor) : getAccessibilityStatusFromColorPair(defaultColor, getResolvedBackgroundFromHighlight(highlightColor), textColor), [defaultColor, editorState, highlightColor, textColor]);
   if (accessibilityStatus === null) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }

package/dist/es2019/ui/RemoveColorMenuItem.compiled.css

@@ -1,4 +1,3 @@
-
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._zulp12x7{gap:var(--ds-space-075,6px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._195gv77o{margin-inline:var(--ds-space-025,2px)}

package/dist/es2019/ui/RemoveColorMenuItem.js

@@ -1,4 +1,4 @@
-/* RemoveColorMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* RemoveColorMenuItem.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./RemoveColorMenuItem.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/TextColorMenuItem.js

@@ -1,4 +1,4 @@
-/* TextColorMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* TextColorMenuItem.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./TextColorMenuItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';

package/dist/es2019/ui/TextMenuSection.compiled.css

@@ -1,4 +1,3 @@
-
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._18zru2gc{padding-inline:var(--ds-space-100,8px)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1rjc12x7{padding-block:var(--ds-space-075,6px)}

package/dist/es2019/ui/TextMenuSection.js

@@ -1,4 +1,4 @@
-/* TextMenuSection.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* TextMenuSection.tsx generated by @compiled/babel-plugin v0.40.0 */
 import "./TextMenuSection.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

package/dist/esm/pm-plugins/main.js

@@ -3,11 +3,10 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { getTextColorInNonActiveTheme, textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
+import { textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-import { getActiveColor, isMultiTextColorSelection } from './utils/color';
+import { getActiveColor } from './utils/color';
 import { DEFAULT_COLOR } from './utils/constants';
 import { getDisabledState } from './utils/disabled';
 function createInitialPluginState(editorState, pluginConfig) {
@@ -19,16 +18,13 @@ function createInitialPluginState(editorState, pluginConfig) {
     border: "var(--ds-border, #0B120E24)"
   }].concat(_toConsumableArray(paletteColors));
   var color = getActiveColor(editorState);
-  var state = _objectSpread({
+  var state = {
     color: color,
     disabled: getDisabledState(editorState),
     palette: palette,
     defaultColor: defaultColor.color,
     isPaletteOpen: false
-  }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-    colorInNonActiveTheme: getTextColorInNonActiveTheme(color, defaultColor.color),
-    isMultiTextColor: isMultiTextColorSelection(editorState)
-  });
+  };
   return state;
 }
 export var ACTIONS = /*#__PURE__*/function (ACTIONS) {
@@ -53,9 +49,6 @@ export function createPlugin(dispatch, pluginConfig) {
           case ACTIONS.RESET_COLOR:
             nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
               color: pluginState.defaultColor
-            }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: getTextColorInNonActiveTheme(pluginState.defaultColor, pluginState.defaultColor),
-              isMultiTextColor: false
             });
             break;
           case ACTIONS.SET_COLOR:
@@ -63,9 +56,6 @@ export function createPlugin(dispatch, pluginConfig) {
               color: meta.color,
               disabled: false,
               isPaletteOpen: false
-            }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: getTextColorInNonActiveTheme(meta.color, pluginState.defaultColor),
-              isMultiTextColor: false
             });
             break;
           case ACTIONS.DISABLE:
@@ -83,12 +73,9 @@ export function createPlugin(dispatch, pluginConfig) {
             nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
               color: color,
               disabled: getDisabledState(newState)
-            }, color !== pluginState.color && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: getTextColorInNonActiveTheme(color, pluginState.defaultColor),
-              isMultiTextColor: isMultiTextColorSelection(newState)
             });
         }
-        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isMultiTextColor !== nextState.isMultiTextColor || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
+        if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
           dispatch(pluginKey, nextState);
           return nextState;
         }