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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-text-color
 
+## 12.3.31
+
+### Patch Changes
+
+- [`e74b3e9fc5c95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e74b3e9fc5c95) -
+  Account for container backgrounds in text color contrast warnings
+- Updated dependencies
+
+## 12.3.30
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.3.29
 
 ### Patch Changes

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

@@ -12,7 +12,6 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _color = require("./utils/color");
 var _constants = require("./utils/constants");
@@ -28,16 +27,13 @@ function createInitialPluginState(editorState, pluginConfig) {
     border: "var(--ds-border, #0B120E24)"
   }].concat((0, _toConsumableArray2.default)(paletteColors));
   var color = (0, _color.getActiveColor)(editorState);
-  var state = _objectSpread({
+  var state = {
     color: color,
     disabled: (0, _disabled.getDisabledState)(editorState),
     palette: palette,
     defaultColor: defaultColor.color,
     isPaletteOpen: false
-  }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-    colorInNonActiveTheme: (0, _uiColor.getTextColorInNonActiveTheme)(color, defaultColor.color),
-    isMultiTextColor: (0, _color.isMultiTextColorSelection)(editorState)
-  });
+  };
   return state;
 }
 var ACTIONS = exports.ACTIONS = /*#__PURE__*/function (ACTIONS) {
@@ -62,9 +58,6 @@ function createPlugin(dispatch, pluginConfig) {
           case ACTIONS.RESET_COLOR:
             nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
               color: pluginState.defaultColor
-            }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: (0, _uiColor.getTextColorInNonActiveTheme)(pluginState.defaultColor, pluginState.defaultColor),
-              isMultiTextColor: false
             });
             break;
           case ACTIONS.SET_COLOR:
@@ -72,9 +65,6 @@ function createPlugin(dispatch, pluginConfig) {
               color: meta.color,
               disabled: false,
               isPaletteOpen: false
-            }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: (0, _uiColor.getTextColorInNonActiveTheme)(meta.color, pluginState.defaultColor),
-              isMultiTextColor: false
             });
             break;
           case ACTIONS.DISABLE:
@@ -92,12 +82,9 @@ function createPlugin(dispatch, pluginConfig) {
             nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
               color: color,
               disabled: (0, _disabled.getDisabledState)(newState)
-            }, color !== pluginState.color && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
-              colorInNonActiveTheme: (0, _uiColor.getTextColorInNonActiveTheme)(color, pluginState.defaultColor),
-              isMultiTextColor: (0, _color.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;
         }

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

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isMultiTextColorSelection = exports.getActiveColorNew = exports.getActiveColor = void 0;
-var _state = require("@atlaskit/editor-prosemirror/state");
+exports.getActiveColorNew = exports.getActiveColor = void 0;
 var _constants = require("./constants");
 /**
  * Use getDisabledStateNew instead and pass in `tr`
@@ -50,28 +49,6 @@ var getActiveColor = exports.getActiveColor = function getActiveColor(state) {
   }
   return marksWithColor.length ? marksWithColor[0].attrs.color : _constants.DEFAULT_COLOR.color;
 };
-
-/**
- * Returns true when the selection contains two or more distinct text colors,
- * counting unmarked text as the default color.
- */
-var isMultiTextColorSelection = exports.isMultiTextColorSelection = function isMultiTextColorSelection(state) {
-  var selection = state.selection,
-    doc = state.doc;
-  if (!(selection instanceof _state.TextSelection)) {
-    return false;
-  }
-  var textColor = doc.type.schema.marks.textColor;
-  var colors = new Set();
-  doc.nodesBetween(selection.from, selection.to, function (node) {
-    if (node.isText) {
-      var _mark$attrs$color;
-      var 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 : _constants.DEFAULT_COLOR.color);
-    }
-  });
-  return colors.size > 1;
-};
 var getActiveColorNew = exports.getActiveColorNew = function getActiveColorNew(tr) {
   var _ref3 = tr.selection,
     $from = _ref3.$from,

package/dist/cjs/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/cjs/ui/ColorAccessibilityMenuItem.js

@@ -1,19 +1,22 @@
-/* ColorAccessibilityMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* ColorAccessibilityMenuItem.tsx generated by @compiled/babel-plugin v0.40.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ColorAccessibilityMenuItem = void 0;
+exports.getResolvedBackgroundColorForTextNode = exports.getAccessibilityStatusForCurrentSelection = exports.ColorAccessibilityMenuItem = void 0;
 require("./ColorAccessibilityMenuItem.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _panel = require("@atlaskit/adf-schema/panel");
 var _new = require("@atlaskit/button/new");
 var _css = require("@atlaskit/css");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
+var _panel2 = require("@atlaskit/editor-common/panel");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -37,30 +40,128 @@ var getForegroundColor = function getForegroundColor(textColor, defaultColor) {
   var colorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(textColor) || textColor;
   return resolveColorValue(colorValue, textColor);
 };
-var getBackgroundColor = function getBackgroundColor(highlightColor) {
-  if (!highlightColor || highlightColor === _constants.TRANSPARENT_HIGHLIGHT_COLOR) {
+var getBackgroundColor = function getBackgroundColor(backgroundColor) {
+  var palette = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
+  if (!backgroundColor || backgroundColor === 'none') {
     return (0, _getTokenValue.getTokenValue)('elevation.surface', _constants.DEFAULT_BACKGROUND_COLOR);
   }
-  var colorValue = (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightColor) || highlightColor;
-  return resolveColorValue(colorValue, highlightColor);
+  var colorValue = palette === 'element' ? (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor) || backgroundColor : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(backgroundColor) || backgroundColor;
+  return resolveColorValue(colorValue, backgroundColor);
+};
+var getBackgroundColorInNonActiveTheme = function getBackgroundColorInNonActiveTheme(backgroundColor) {
+  var palette = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
+  if (!backgroundColor || backgroundColor === 'none') {
+    return (0, _uiColor.getTokenCSSVariableValueForNonActiveTheme)("var(--ds-surface, #FFFFFF)", _constants.DEFAULT_BACKGROUND_COLOR);
+  }
+  var colorValue = palette === 'element' ? (0, _editorPalette.hexToEditorBackgroundPaletteColor)(backgroundColor) || backgroundColor : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(backgroundColor) || backgroundColor;
+  return (0, _uiColor.getTokenCSSVariableValueForNonActiveTheme)(colorValue, backgroundColor);
+};
+var STANDARD_PANEL_BACKGROUND_COLORS = new Map([[_panel.PanelType.INFO, (0, _panel2.getPanelTypeBackgroundNoTokens)(_panel.PanelType.INFO)], [_panel.PanelType.NOTE, (0, _panel2.getPanelTypeBackgroundNoTokens)(_panel.PanelType.NOTE)], [_panel.PanelType.SUCCESS, (0, _panel2.getPanelTypeBackgroundNoTokens)(_panel.PanelType.SUCCESS)], [_panel.PanelType.WARNING, (0, _panel2.getPanelTypeBackgroundNoTokens)(_panel.PanelType.WARNING)], [_panel.PanelType.ERROR, (0, _panel2.getPanelTypeBackgroundNoTokens)(_panel.PanelType.ERROR)]]);
+var getResolvedBackgroundFromHighlight = function 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.
+ */
+var getSupportedAncestorBackgroundColor = function getSupportedAncestorBackgroundColor(node) {
+  var 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 === _panel.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.
+ */
+var getResolvedBackgroundColorForTextNode = exports.getResolvedBackgroundColorForTextNode = function getResolvedBackgroundColorForTextNode($pos, node) {
+  var _iterator = _createForOfIteratorHelper(node.marks),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var mark = _step.value;
+      if (mark.type.name === 'backgroundColor' && mark.attrs.color) {
+        return {
+          color: mark.attrs.color,
+          source: 'text'
+        };
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  for (var depth = $pos.depth; depth > 0; depth--) {
+    var resolvedBackgroundColor = getSupportedAncestorBackgroundColor($pos.node(depth));
+    if (resolvedBackgroundColor) {
+      return resolvedBackgroundColor;
+    }
+  }
+  return {
+    color: null,
+    source: 'text'
+  };
+};
+var getResolvedBackgroundColorForPosition = function getResolvedBackgroundColorForPosition($pos, highlightColor) {
+  var highlightBackground = getResolvedBackgroundFromHighlight(highlightColor);
+  if (highlightColor) {
+    return highlightBackground;
+  }
+  for (var depth = $pos.depth; depth > 0; depth--) {
+    var resolvedBackgroundColor = getSupportedAncestorBackgroundColor($pos.node(depth));
+    if (resolvedBackgroundColor) {
+      return resolvedBackgroundColor;
+    }
+  }
+  return highlightBackground;
+};
+var getResolvedBackgroundColorValue = function getResolvedBackgroundColorValue(backgroundColor) {
+  if (backgroundColor.source === 'element') {
+    return getBackgroundColor(backgroundColor.color, 'element');
+  }
+  return getBackgroundColor(backgroundColor.color);
+};
+var getResolvedBackgroundColorValueInNonActiveTheme = function getResolvedBackgroundColorValueInNonActiveTheme(backgroundColor) {
+  if (backgroundColor.source === 'element') {
+    return getBackgroundColorInNonActiveTheme(backgroundColor.color, 'element');
+  }
+  return getBackgroundColorInNonActiveTheme(backgroundColor.color);
 };
 var useColorAccessibilityState = function useColorAccessibilityState(api) {
   return (0, _hooks.useSharedPluginStateWithSelector)(api, ['textColor', 'highlight'], function (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
     };
   });
 };
-var getContrastRatio = function getContrastRatio(defaultColor, highlightColor, textColor) {
+var getContrastRatio = function getContrastRatio(defaultColor, backgroundColor, textColor) {
   try {
-    var contrastRatio = (0, _colorContrast.getContrastRatio)(getForegroundColor(textColor, defaultColor), getBackgroundColor(highlightColor));
+    var contrastRatio = (0, _colorContrast.getContrastRatio)(getForegroundColor(textColor, defaultColor), getResolvedBackgroundColorValue(backgroundColor));
     return contrastRatio;
   } catch (_unused) {
     // if we failed to calculate the contrast ratio, return null
@@ -68,16 +169,10 @@ var getContrastRatio = function getContrastRatio(defaultColor, highlightColor, t
   }
 };
 
-// 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.
-var getNonActiveThemeContrastRatio = function getNonActiveThemeContrastRatio(defaultColor, highlightColor, textColor) {
+// Computes the contrast ratio as it would appear in the non-active theme.
+var getNonActiveThemeContrastRatio = function getNonActiveThemeContrastRatio(defaultColor, backgroundColor, textColor) {
   try {
-    return (0, _colorContrast.getContrastRatio)((0, _uiColor.getTextColorInNonActiveTheme)(textColor !== null && textColor !== void 0 ? textColor : null, defaultColor || _constants.DEFAULT_COLOR.color), (0, _uiColor.getHighlightColorInNonActiveTheme)(highlightColor !== null && highlightColor !== void 0 ? highlightColor : null, {
-      defaultBackgroundColor: _constants.DEFAULT_BACKGROUND_COLOR,
-      transparentColor: _constants.TRANSPARENT_HIGHLIGHT_COLOR
-    }));
+    return (0, _colorContrast.getContrastRatio)((0, _uiColor.getTextColorInNonActiveTheme)(textColor !== null && textColor !== void 0 ? textColor : null, defaultColor || _constants.DEFAULT_COLOR.color), getResolvedBackgroundColorValueInNonActiveTheme(backgroundColor));
   } catch (_unused2) {
     // if we failed to calculate the contrast ratio, return null
     return null;
@@ -94,96 +189,103 @@ var getAccessibilityStatus = function 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.
+ */
+var getAccessibilityStatusFromColorPair = function getAccessibilityStatusFromColorPair(defaultColor, backgroundColor, textColor) {
+  var contrastRatio = getContrastRatio(defaultColor, backgroundColor, textColor);
+  return contrastRatio === null ? null : getAccessibilityStatus(contrastRatio);
+};
+
+/**
+ * Returns the lowest contrast ratio across active and non-active themes.
+ */
+var getMostCriticalContrastRatioAcrossThemes = function getMostCriticalContrastRatioAcrossThemes(defaultColor, backgroundColor, textColor) {
+  var contrastRatio = getContrastRatio(defaultColor, backgroundColor, textColor);
+  var nonActiveThemeContrastRatio = getNonActiveThemeContrastRatio(defaultColor, backgroundColor, textColor);
+  if (contrastRatio !== null && nonActiveThemeContrastRatio !== null) {
+    return Math.min(contrastRatio, nonActiveThemeContrastRatio);
+  }
+  return contrastRatio;
+};
+var getAccessibilityStatusFromColorPairAcrossThemes = function getAccessibilityStatusFromColorPairAcrossThemes(defaultColor, backgroundColor, textColor) {
+  var 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.
  */
-var getWorstAccessibilityStatusFromSelection = function getWorstAccessibilityStatusFromSelection(api, defaultColor) {
-  if (!(api !== null && api !== void 0 && api.core)) {
+var getWorstAccessibilityStatusFromEditorState = function getWorstAccessibilityStatusFromEditorState(state, defaultColor) {
+  var 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 _state.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.
-  var worstContrastRatio = null;
-  api.core.actions.execute(function (_ref) {
-    var tr = _ref.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 _state.TextSelection)) {
-      return null;
+  var _state$selection = state.selection,
+    from = _state$selection.from,
+    to = _state$selection.to;
+  var seen = new Set();
+  state.doc.nodesBetween(from, to, function (node, pos) {
+    var _backgroundColor$colo;
+    if (!node.isText) {
+      return !node.isLeaf;
     }
-    var _tr$selection = tr.selection,
-      from = _tr$selection.from,
-      to = _tr$selection.to;
-    var seen = new Set();
-    tr.doc.nodesBetween(from, to, function (node) {
-      // 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.
-      var textColor = null;
-      var highlightColor = null;
-      var _iterator = _createForOfIteratorHelper(node.marks),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var mark = _step.value;
-          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;
-          }
+    var textColor = null;
+    var _iterator2 = _createForOfIteratorHelper(node.marks),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var mark = _step2.value;
+        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;
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      var pairKey = "".concat(textColor !== null && textColor !== void 0 ? textColor : 'default', "|").concat(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);
-      var 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.
-      var nonActiveThemeContrastRatio = getNonActiveThemeContrastRatio(defaultColor, highlightColor, textColor);
-      var mostCriticalContrastRatio = nonActiveThemeContrastRatio !== null ? Math.min(contrastRatio, nonActiveThemeContrastRatio) : contrastRatio;
-      if (worstContrastRatio === null || mostCriticalContrastRatio < worstContrastRatio) {
-        worstContrastRatio = mostCriticalContrastRatio;
       }
-    });
-
-    // Read-only operation — do not dispatch
-    return null;
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    var backgroundColor = getResolvedBackgroundColorForTextNode(state.doc.resolve(pos), node);
+    var pairKey = "".concat(textColor !== null && textColor !== void 0 ? textColor : 'default', "|").concat(backgroundColor.source, "|").concat((_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);
+    var mostCriticalContrastRatio = getMostCriticalContrastRatioAcrossThemes(defaultColor, backgroundColor, textColor);
+    if (mostCriticalContrastRatio === null) {
+      return;
+    }
+    if (worstContrastRatio === null || mostCriticalContrastRatio < worstContrastRatio) {
+      worstContrastRatio = mostCriticalContrastRatio;
+    }
   });
   return worstContrastRatio === null ? null : getAccessibilityStatus(worstContrastRatio);
 };
-var AccessibilityStatus = function AccessibilityStatus(_ref2) {
-  var accessibilityStatus = _ref2.accessibilityStatus,
-    formatMessage = _ref2.formatMessage;
+var getAccessibilityStatusForCurrentSelection = exports.getAccessibilityStatusForCurrentSelection = function getAccessibilityStatusForCurrentSelection(state, defaultColor, highlightColor, textColor) {
+  if (state.selection instanceof _state.TextSelection) {
+    if (!state.selection.empty) {
+      return getWorstAccessibilityStatusFromEditorState(state, defaultColor);
+    }
+    return getAccessibilityStatusFromColorPairAcrossThemes(defaultColor, getResolvedBackgroundColorForPosition(state.selection.$from, highlightColor), textColor);
+  }
+  return null;
+};
+var AccessibilityStatus = function AccessibilityStatus(_ref) {
+  var accessibilityStatus = _ref.accessibilityStatus,
+    formatMessage = _ref.formatMessage;
   if (accessibilityStatus === 'accessible') {
     return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
       as: "span",
@@ -208,62 +310,20 @@ var styles = {
   container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4",
   containerPatch: "_19pkze3t _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t"
 };
-var ColorAccessibilityMenuItem = exports.ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref3) {
-  var api = _ref3.api;
+var ColorAccessibilityMenuItem = exports.ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref2) {
+  var api = _ref2.api;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useColorAccessibilit = useColorAccessibilityState(api),
     defaultColor = _useColorAccessibilit.defaultColor,
     highlightColor = _useColorAccessibilit.highlightColor,
-    highlightColorInNonActiveTheme = _useColorAccessibilit.highlightColorInNonActiveTheme,
-    isMultiHighlightColor = _useColorAccessibilit.isMultiHighlightColor,
-    isMultiTextColor = _useColorAccessibilit.isMultiTextColor,
-    textColor = _useColorAccessibilit.textColor,
-    textColorInNonActiveTheme = _useColorAccessibilit.textColorInNonActiveTheme;
-  // 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
-  var isMultiColorSelection = Boolean(isMultiTextColor || isMultiHighlightColor) && (0, _platformFeatureFlags.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).
-  var 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).
-  var multiColorStatus = _react.default.useMemo(function () {
-    return 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
-  var singleColorStatus = null;
-  if (isSingleColorSelection) {
-    var 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.
-    var nonActiveThemeSingleColorRatio = null;
-    if (textColorInNonActiveTheme && highlightColorInNonActiveTheme && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1')) {
-      try {
-        nonActiveThemeSingleColorRatio = (0, _colorContrast.getContrastRatio)(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
-      } catch (_unused3) {
-        // if we failed to calculate the contrast ratio, leave as null
-        nonActiveThemeSingleColorRatio = null;
-      }
-    }
-    var mostCriticalContrastRatio = singleColorContrastRatio !== null && nonActiveThemeSingleColorRatio !== null ? Math.min(singleColorContrastRatio, nonActiveThemeSingleColorRatio) : singleColorContrastRatio;
-    singleColorStatus = mostCriticalContrastRatio !== null ? getAccessibilityStatus(mostCriticalContrastRatio) : null;
-  }
-  var accessibilityStatus = isSingleColorSelection ? singleColorStatus : multiColorStatus;
+    textColor = _useColorAccessibilit.textColor;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var editorState = editorView === null || editorView === void 0 ? void 0 : editorView.state;
+  var accessibilityStatus = _react.default.useMemo(function () {
+    return editorState && (0, _platformFeatureFlags.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.default.createElement(_react.default.Fragment, null);
   }

package/dist/cjs/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/cjs/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 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/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 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/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/cjs/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 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");