@atlaskit/editor-plugin-text-color 12.1.2 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-text-color
 
+## 12.2.0
+
+### Minor Changes
+
+- [`eb17ff47fd9d1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eb17ff47fd9d1) -
+  [EDITOR-7588] Add an accessibility footer for the new text and highlight color experience behind
+  `platform_editor_lovability_text_bg_color`.
+
+### Patch Changes
+
+- [`724e2a1ea50bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/724e2a1ea50bb) -
+  Remove stale feature gate platform_editor_toolbar_aifc_text_color_config_jsm.
+- Updated dependencies
+
+## 12.1.3
+
+### Patch Changes
+
+- [`6f7b6c498b07c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f7b6c498b07c) -
+  [EDITOR-7591] Align the no-color highlight palette tile icon with the updated transparent
+  highlight styling for the experiment `platform_editor_lovability_text_bg_color`.
+- Updated dependencies
+
 ## 12.1.2
 
 ### Patch Changes

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getContrastRatio = getContrastRatio;
+var _adfSchema = require("@atlaskit/adf-schema");
+// from platform/packages/design-system/tokens/src/utils/get-contrast-ratio.tsx
+
+function hexToRgb(hex) {
+  if (!(0, _adfSchema.isHex)(hex)) {
+    throw new Error('Invalid HEX');
+  }
+  var colorParts = hex.substring(1).split('');
+  var color = colorParts.length === 3 || colorParts.length === 4 ? "".concat(colorParts[0]).concat(colorParts[0]).concat(colorParts[1]).concat(colorParts[1]).concat(colorParts[2]).concat(colorParts[2]) : colorParts.slice(0, 6).join('');
+  var colorValue = Number("0x".concat(color));
+  return [colorValue >> 16 & 255, colorValue >> 8 & 255, colorValue & 255];
+}
+function relativeLuminanceW3C(r, g, b) {
+  var RsRGB = r / 255;
+  var GsRGB = g / 255;
+  var BsRGB = b / 255;
+  var R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
+  var G = GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
+  var B = BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}
+function getContrastRatio(foreground, background) {
+  if (!(0, _adfSchema.isHex)(foreground) || !(0, _adfSchema.isHex)(background)) {
+    throw new Error('Invalid HEX');
+  }
+  var foregroundRgb = hexToRgb(foreground);
+  var backgroundRgb = hexToRgb(background);
+  var foregroundLuminance = relativeLuminanceW3C(foregroundRgb[0], foregroundRgb[1], foregroundRgb[2]);
+  var backgroundLuminance = relativeLuminanceW3C(backgroundRgb[0], backgroundRgb[1], backgroundRgb[2]);
+  // calculate the color contrast ratio
+  var brightest = Math.max(foregroundLuminance, backgroundLuminance);
+  var darkest = Math.min(foregroundLuminance, backgroundLuminance);
+  return (brightest + 0.05) / (darkest + 0.05);
+}

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

@@ -3,8 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.overrideMarks = exports.DEFAULT_COLOR = void 0;
+exports.overrideMarks = exports.TRANSPARENT_HIGHLIGHT_COLOR = exports.DIFFICULT_CONTRAST_RATIO = exports.DEFAULT_COLOR = exports.DEFAULT_BACKGROUND_COLOR = exports.ACCESSIBLE_CONTRAST_RATIO = void 0;
 var overrideMarks = exports.overrideMarks = ['backgroundColor'];
+var ACCESSIBLE_CONTRAST_RATIO = exports.ACCESSIBLE_CONTRAST_RATIO = 4.5;
+var DIFFICULT_CONTRAST_RATIO = exports.DIFFICULT_CONTRAST_RATIO = 3;
+var DEFAULT_BACKGROUND_COLOR = exports.DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
+var TRANSPARENT_HIGHLIGHT_COLOR = exports.TRANSPARENT_HIGHLIGHT_COLOR = '#00000000';
 var DEFAULT_COLOR = exports.DEFAULT_COLOR = {
   // TODO: DSP-4137 - Remove usage of hardcoded color
   /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */

package/dist/cjs/textColorPlugin.js

@@ -53,7 +53,7 @@ var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
     });
   };
   if (isToolbarAIFCEnabled) {
-    if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_text_color_config') || (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_text_color_config_jsm')) {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_text_color_config')) {
       var _api$toolbar;
       if (api !== null && api !== void 0 && (_api$toolbar = api.toolbar) !== null && _api$toolbar !== void 0 && _api$toolbar.actions.registerComponents && isToolbarComponentEnabled(pluginConfig(textColorConfig))) {
         api.toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));

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

@@ -0,0 +1,9 @@
+
+._19itglyw{border:none}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bah1yb4{justify-content:space-between}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/ui/ColorAccessibilityMenuItem.js

@@ -0,0 +1,146 @@
+/* ColorAccessibilityMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _new = require("@atlaskit/button/new");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _accessibility = _interopRequireDefault(require("@atlaskit/icon/core/accessibility"));
+var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/question-circle"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _tokens = require("@atlaskit/tokens");
+var _colorContrast = require("../pm-plugins/utils/color-contrast");
+var _constants = require("../pm-plugins/utils/constants");
+var resolveColorValue = function resolveColorValue(color, fallback) {
+  return (0, _uiColor.getTokenCSSVariableValue)(color) || (color.startsWith('var(') ? fallback : color);
+};
+var getForegroundColor = function getForegroundColor(textColor, defaultColor) {
+  if (!textColor || defaultColor && textColor === defaultColor) {
+    return (0, _tokens.getTokenValue)('color.text', defaultColor || _constants.DEFAULT_COLOR.color);
+  }
+  var colorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(textColor) || textColor;
+  return resolveColorValue(colorValue, textColor);
+};
+var getBackgroundColor = function getBackgroundColor(highlightColor) {
+  if (!highlightColor || highlightColor === _constants.TRANSPARENT_HIGHLIGHT_COLOR) {
+    return (0, _tokens.getTokenValue)('elevation.surface', _constants.DEFAULT_BACKGROUND_COLOR);
+  }
+  var colorValue = (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightColor) || highlightColor;
+  return resolveColorValue(colorValue, highlightColor);
+};
+var useColorAccessibilityState = function useColorAccessibilityState(api) {
+  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['textColor', 'highlight'], function (states) {
+    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,
+      textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color
+    };
+  });
+};
+var getContrastRatio = function getContrastRatio(defaultColor, highlightColor, textColor) {
+  try {
+    var contrastRatio = (0, _colorContrast.getContrastRatio)(getForegroundColor(textColor, defaultColor), getBackgroundColor(highlightColor));
+    return contrastRatio;
+  }
+  // if we failed to calculate the contrast ratio, return null
+  catch (_unused) {
+    return null;
+  }
+};
+var getAccessibilityStatus = function getAccessibilityStatus(contrastRatio) {
+  if (contrastRatio >= _constants.ACCESSIBLE_CONTRAST_RATIO) {
+    return 'accessible';
+  } else if (contrastRatio >= _constants.DIFFICULT_CONTRAST_RATIO) {
+    return 'difficultToRead';
+  } else {
+    return 'inaccessible';
+  }
+};
+var AccessibilityStatus = function AccessibilityStatus(_ref) {
+  var accessibilityStatus = _ref.accessibilityStatus,
+    formatMessage = _ref.formatMessage;
+  if (accessibilityStatus === 'accessible') {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      as: "span",
+      size: "small",
+      color: "color.text.success"
+    }, formatMessage(_messages.colorAccessibilityMessages.accessibleLabel));
+  } else if (accessibilityStatus === 'difficultToRead') {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      as: "span",
+      size: "small",
+      color: "color.text.warning"
+    }, formatMessage(_messages.colorAccessibilityMessages.difficultToReadLabel));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      as: "span",
+      size: "small",
+      color: "color.text.danger"
+    }, formatMessage(_messages.colorAccessibilityMessages.inaccessibleLabel));
+  }
+};
+var styles = {
+  container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4"
+};
+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,
+    textColor = _useColorAccessibilit.textColor;
+  var contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
+  if (contrastRatio === null) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+  var accessibilityStatus = getAccessibilityStatus(contrastRatio);
+  var tooltipContent = function tooltipContent(accessibilityStatus) {
+    if (accessibilityStatus === 'accessible') {
+      return formatMessage(_messages.colorAccessibilityMessages.accessibleTooltip);
+    } else if (accessibilityStatus === 'difficultToRead') {
+      return formatMessage(_messages.colorAccessibilityMessages.difficultToReadTooltip);
+    } else {
+      return formatMessage(_messages.colorAccessibilityMessages.inaccessibleTooltip);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    alignBlock: "center",
+    space: "space.050"
+  }, /*#__PURE__*/_react.default.createElement(_accessibility.default, {
+    label: "",
+    size: "medium"
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    as: "span",
+    size: "small",
+    color: "color.text.subtle"
+  }, formatMessage(_messages.colorAccessibilityMessages.accessibility)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    as: "span",
+    size: "small",
+    color: "color.text.subtle",
+    "aria-hidden": "true"
+  }, "\u2022"), /*#__PURE__*/_react.default.createElement(AccessibilityStatus, {
+    accessibilityStatus: accessibilityStatus,
+    formatMessage: formatMessage
+  })), /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    icon: _questionCircle.default,
+    shape: "circle",
+    label: tooltipContent(accessibilityStatus),
+    isTooltipDisabled: false,
+    spacing: "compact",
+    appearance: "subtle"
+  }));
+};

package/dist/cjs/ui/ToolbarTextColor/index.js

@@ -25,6 +25,7 @@ var _editorPalette = require("@atlaskit/editor-palette");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _textStyle = _interopRequireDefault(require("@atlaskit/icon/core/text-style"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _changeColor = require("../../pm-plugins/commands/change-color");
 var _inputType = require("../../pm-plugins/utils/inputType");
@@ -143,7 +144,7 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
         disabled = _this$props.disabled,
         pluginInjectionApi = _this$props.pluginInjectionApi;
       var palette = pluginState.palette;
-      var isNewColorPaletteEnabled = (0, _experiments.editorExperiment)('platform_editor_lovability_text_bg_color', true);
+      var isNewColorPaletteEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true);
       var colorPickerColumns = isNewColorPaletteEnabled ? 10 : undefined;
       var fitWidth;
       if (document.body.clientWidth <= 740) {

package/dist/cjs/ui/toolbar-components.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getToolbarComponents = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _ColorAccessibilityMenuItem = require("./ColorAccessibilityMenuItem");
 var _RemoveColorMenuItem = require("./RemoveColorMenuItem");
 var _TextColorHighlightMenu = require("./TextColorHighlightMenu");
 var _TextColorMenuItem = require("./TextColorMenuItem");
@@ -64,5 +67,14 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
         parents: parents
       });
     }
-  })];
+  })].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? [_objectSpread(_objectSpread({}, _toolbar.COLOR_ACCESSIBILITY_MENU_ITEM), {}, {
+    parents: [_objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
+      rank: _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[_toolbar.COLOR_ACCESSIBILITY_MENU_ITEM.key]
+    })],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_ColorAccessibilityMenuItem.ColorAccessibilityMenuItem, {
+        api: api
+      });
+    }
+  })] : []));
 };

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

@@ -0,0 +1,34 @@
+// from platform/packages/design-system/tokens/src/utils/get-contrast-ratio.tsx
+
+import { isHex } from '@atlaskit/adf-schema';
+function hexToRgb(hex) {
+  if (!isHex(hex)) {
+    throw new Error('Invalid HEX');
+  }
+  const colorParts = hex.substring(1).split('');
+  const color = colorParts.length === 3 || colorParts.length === 4 ? `${colorParts[0]}${colorParts[0]}${colorParts[1]}${colorParts[1]}${colorParts[2]}${colorParts[2]}` : colorParts.slice(0, 6).join('');
+  const colorValue = Number(`0x${color}`);
+  return [colorValue >> 16 & 255, colorValue >> 8 & 255, colorValue & 255];
+}
+function relativeLuminanceW3C(r, g, b) {
+  const RsRGB = r / 255;
+  const GsRGB = g / 255;
+  const BsRGB = b / 255;
+  const R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
+  const G = GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
+  const B = BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}
+export function getContrastRatio(foreground, background) {
+  if (!isHex(foreground) || !isHex(background)) {
+    throw new Error('Invalid HEX');
+  }
+  const foregroundRgb = hexToRgb(foreground);
+  const backgroundRgb = hexToRgb(background);
+  const foregroundLuminance = relativeLuminanceW3C(foregroundRgb[0], foregroundRgb[1], foregroundRgb[2]);
+  const backgroundLuminance = relativeLuminanceW3C(backgroundRgb[0], backgroundRgb[1], backgroundRgb[2]);
+  // calculate the color contrast ratio
+  const brightest = Math.max(foregroundLuminance, backgroundLuminance);
+  const darkest = Math.min(foregroundLuminance, backgroundLuminance);
+  return (brightest + 0.05) / (darkest + 0.05);
+}

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

@@ -1,4 +1,8 @@
 export const overrideMarks = ['backgroundColor'];
+export const ACCESSIBLE_CONTRAST_RATIO = 4.5;
+export const DIFFICULT_CONTRAST_RATIO = 3;
+export const DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
+export const TRANSPARENT_HIGHLIGHT_COLOR = '#00000000';
 export const DEFAULT_COLOR = {
   // TODO: DSP-4137 - Remove usage of hardcoded color
   /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */

package/dist/es2019/textColorPlugin.js

@@ -48,7 +48,7 @@ export const textColorPlugin = ({
     });
   };
   if (isToolbarAIFCEnabled) {
-    if (fg('platform_editor_toolbar_aifc_text_color_config') || fg('platform_editor_toolbar_aifc_text_color_config_jsm')) {
+    if (fg('platform_editor_toolbar_aifc_text_color_config')) {
       var _api$toolbar;
       if (api !== null && api !== void 0 && (_api$toolbar = api.toolbar) !== null && _api$toolbar !== void 0 && _api$toolbar.actions.registerComponents && isToolbarComponentEnabled(pluginConfig(textColorConfig))) {
         api.toolbar.actions.registerComponents(getToolbarComponents(api));

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

@@ -0,0 +1,9 @@
+
+._19itglyw{border:none}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bah1yb4{justify-content:space-between}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/ui/ColorAccessibilityMenuItem.js

@@ -0,0 +1,143 @@
+/* ColorAccessibilityMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./ColorAccessibilityMenuItem.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { IconButton } from '@atlaskit/button/new';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { colorAccessibilityMessages as messages } from '@atlaskit/editor-common/messages';
+import { getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
+import { hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
+import AccessibilityIcon from '@atlaskit/icon/core/accessibility';
+import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
+import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
+import { getTokenValue } from '@atlaskit/tokens';
+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';
+const resolveColorValue = (color, fallback) => {
+  return getTokenCSSVariableValue(color) || (color.startsWith('var(') ? fallback : color);
+};
+const getForegroundColor = (textColor, defaultColor) => {
+  if (!textColor || defaultColor && textColor === defaultColor) {
+    return getTokenValue('color.text', defaultColor || DEFAULT_COLOR.color);
+  }
+  const colorValue = hexToEditorTextPaletteColor(textColor) || textColor;
+  return resolveColorValue(colorValue, textColor);
+};
+const getBackgroundColor = highlightColor => {
+  if (!highlightColor || highlightColor === TRANSPARENT_HIGHLIGHT_COLOR) {
+    return getTokenValue('elevation.surface', DEFAULT_BACKGROUND_COLOR);
+  }
+  const colorValue = hexToEditorTextBackgroundPaletteColor(highlightColor) || highlightColor;
+  return resolveColorValue(colorValue, highlightColor);
+};
+const useColorAccessibilityState = api => {
+  return useSharedPluginStateWithSelector(api, ['textColor', 'highlight'], states => {
+    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,
+      textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color
+    };
+  });
+};
+const getContrastRatio = (defaultColor, highlightColor, textColor) => {
+  try {
+    const contrastRatio = calcContrastRatio(getForegroundColor(textColor, defaultColor), getBackgroundColor(highlightColor));
+    return contrastRatio;
+  }
+  // if we failed to calculate the contrast ratio, return null
+  catch {
+    return null;
+  }
+};
+const getAccessibilityStatus = contrastRatio => {
+  if (contrastRatio >= ACCESSIBLE_CONTRAST_RATIO) {
+    return 'accessible';
+  } else if (contrastRatio >= DIFFICULT_CONTRAST_RATIO) {
+    return 'difficultToRead';
+  } else {
+    return 'inaccessible';
+  }
+};
+const AccessibilityStatus = ({
+  accessibilityStatus,
+  formatMessage
+}) => {
+  if (accessibilityStatus === 'accessible') {
+    return /*#__PURE__*/React.createElement(Text, {
+      as: "span",
+      size: "small",
+      color: "color.text.success"
+    }, formatMessage(messages.accessibleLabel));
+  } else if (accessibilityStatus === 'difficultToRead') {
+    return /*#__PURE__*/React.createElement(Text, {
+      as: "span",
+      size: "small",
+      color: "color.text.warning"
+    }, formatMessage(messages.difficultToReadLabel));
+  } else {
+    return /*#__PURE__*/React.createElement(Text, {
+      as: "span",
+      size: "small",
+      color: "color.text.danger"
+    }, formatMessage(messages.inaccessibleLabel));
+  }
+};
+const styles = {
+  container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4"
+};
+export const ColorAccessibilityMenuItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    defaultColor,
+    highlightColor,
+    textColor
+  } = useColorAccessibilityState(api);
+  const contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
+  if (contrastRatio === null) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  const accessibilityStatus = getAccessibilityStatus(contrastRatio);
+  const tooltipContent = accessibilityStatus => {
+    if (accessibilityStatus === 'accessible') {
+      return formatMessage(messages.accessibleTooltip);
+    } else if (accessibilityStatus === 'difficultToRead') {
+      return formatMessage(messages.difficultToReadTooltip);
+    } else {
+      return formatMessage(messages.inaccessibleTooltip);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    space: "space.050"
+  }, /*#__PURE__*/React.createElement(AccessibilityIcon, {
+    label: "",
+    size: "medium"
+  }), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    size: "small",
+    color: "color.text.subtle"
+  }, formatMessage(messages.accessibility)), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    size: "small",
+    color: "color.text.subtle",
+    "aria-hidden": "true"
+  }, "\u2022"), /*#__PURE__*/React.createElement(AccessibilityStatus, {
+    accessibilityStatus: accessibilityStatus,
+    formatMessage: formatMessage
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    icon: QuestionCircleIcon,
+    shape: "circle",
+    label: tooltipContent(accessibilityStatus),
+    isTooltipDisabled: false,
+    spacing: "compact",
+    appearance: "subtle"
+  }));
+};

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

@@ -18,6 +18,7 @@ import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import TextStyleIcon from '@atlaskit/icon/core/text-style';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeColor as changeColorWithAnalytics } from '../../pm-plugins/commands/change-color';
 import { getInputMethod } from '../../pm-plugins/utils/inputType';
@@ -124,7 +125,7 @@ export class ToolbarTextColor extends React.Component {
       pluginInjectionApi
     } = this.props;
     const palette = pluginState.palette;
-    const isNewColorPaletteEnabled = editorExperiment('platform_editor_lovability_text_bg_color', true);
+    const isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
     const colorPickerColumns = isNewColorPaletteEnabled ? 10 : undefined;
     let fitWidth;
     if (document.body.clientWidth <= 740) {

package/dist/es2019/ui/toolbar-components.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU, CLEAR_COLOR_MENU_ITEM, TEXT_SECTION_PRIMARY_TOOLBAR_RANK, TEXT_SECTION_PRIMARY_TOOLBAR } from '@atlaskit/editor-common/toolbar';
+import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU, CLEAR_COLOR_MENU_ITEM, COLOR_ACCESSIBILITY_MENU_ITEM, TEXT_SECTION_PRIMARY_TOOLBAR_RANK, TEXT_SECTION_PRIMARY_TOOLBAR } from '@atlaskit/editor-common/toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { ColorAccessibilityMenuItem } from './ColorAccessibilityMenuItem';
 import { RemoveColorMenuItem } from './RemoveColorMenuItem';
 import { TextColorHighlightMenu } from './TextColorHighlightMenu';
 import { TextColorMenuItem } from './TextColorMenuItem';
@@ -63,5 +65,16 @@ export const getToolbarComponents = api => {
         parents: parents
       });
     }
-  }];
+  }, ...(expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? [{
+    ...COLOR_ACCESSIBILITY_MENU_ITEM,
+    parents: [{
+      ...TEXT_COLOR_HIGHLIGHT_MENU_SECTION,
+      rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[COLOR_ACCESSIBILITY_MENU_ITEM.key]
+    }],
+    component: () => {
+      return /*#__PURE__*/React.createElement(ColorAccessibilityMenuItem, {
+        api: api
+      });
+    }
+  }] : [])];
 };

package/dist/esm/pm-plugins/utils/color-contrast.js

@@ -0,0 +1,34 @@
+// from platform/packages/design-system/tokens/src/utils/get-contrast-ratio.tsx
+
+import { isHex } from '@atlaskit/adf-schema';
+function hexToRgb(hex) {
+  if (!isHex(hex)) {
+    throw new Error('Invalid HEX');
+  }
+  var colorParts = hex.substring(1).split('');
+  var color = colorParts.length === 3 || colorParts.length === 4 ? "".concat(colorParts[0]).concat(colorParts[0]).concat(colorParts[1]).concat(colorParts[1]).concat(colorParts[2]).concat(colorParts[2]) : colorParts.slice(0, 6).join('');
+  var colorValue = Number("0x".concat(color));
+  return [colorValue >> 16 & 255, colorValue >> 8 & 255, colorValue & 255];
+}
+function relativeLuminanceW3C(r, g, b) {
+  var RsRGB = r / 255;
+  var GsRGB = g / 255;
+  var BsRGB = b / 255;
+  var R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
+  var G = GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
+  var B = BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}
+export function getContrastRatio(foreground, background) {
+  if (!isHex(foreground) || !isHex(background)) {
+    throw new Error('Invalid HEX');
+  }
+  var foregroundRgb = hexToRgb(foreground);
+  var backgroundRgb = hexToRgb(background);
+  var foregroundLuminance = relativeLuminanceW3C(foregroundRgb[0], foregroundRgb[1], foregroundRgb[2]);
+  var backgroundLuminance = relativeLuminanceW3C(backgroundRgb[0], backgroundRgb[1], backgroundRgb[2]);
+  // calculate the color contrast ratio
+  var brightest = Math.max(foregroundLuminance, backgroundLuminance);
+  var darkest = Math.min(foregroundLuminance, backgroundLuminance);
+  return (brightest + 0.05) / (darkest + 0.05);
+}

package/dist/esm/pm-plugins/utils/constants.js

@@ -1,4 +1,8 @@
 export var overrideMarks = ['backgroundColor'];
+export var ACCESSIBLE_CONTRAST_RATIO = 4.5;
+export var DIFFICULT_CONTRAST_RATIO = 3;
+export var DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
+export var TRANSPARENT_HIGHLIGHT_COLOR = '#00000000';
 export var DEFAULT_COLOR = {
   // TODO: DSP-4137 - Remove usage of hardcoded color
   /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */

package/dist/esm/textColorPlugin.js

@@ -46,7 +46,7 @@ export var textColorPlugin = function textColorPlugin(_ref) {
     });
   };
   if (isToolbarAIFCEnabled) {
-    if (fg('platform_editor_toolbar_aifc_text_color_config') || fg('platform_editor_toolbar_aifc_text_color_config_jsm')) {
+    if (fg('platform_editor_toolbar_aifc_text_color_config')) {
       var _api$toolbar;
       if (api !== null && api !== void 0 && (_api$toolbar = api.toolbar) !== null && _api$toolbar !== void 0 && _api$toolbar.actions.registerComponents && isToolbarComponentEnabled(pluginConfig(textColorConfig))) {
         api.toolbar.actions.registerComponents(getToolbarComponents(api));

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

@@ -0,0 +1,9 @@
+
+._19itglyw{border:none}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bah1yb4{justify-content:space-between}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/esm/ui/ColorAccessibilityMenuItem.js

@@ -0,0 +1,139 @@
+/* ColorAccessibilityMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./ColorAccessibilityMenuItem.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { IconButton } from '@atlaskit/button/new';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { colorAccessibilityMessages as messages } from '@atlaskit/editor-common/messages';
+import { getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
+import { hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
+import AccessibilityIcon from '@atlaskit/icon/core/accessibility';
+import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
+import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
+import { getTokenValue } from '@atlaskit/tokens';
+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';
+var resolveColorValue = function resolveColorValue(color, fallback) {
+  return getTokenCSSVariableValue(color) || (color.startsWith('var(') ? fallback : color);
+};
+var getForegroundColor = function getForegroundColor(textColor, defaultColor) {
+  if (!textColor || defaultColor && textColor === defaultColor) {
+    return getTokenValue('color.text', defaultColor || DEFAULT_COLOR.color);
+  }
+  var colorValue = hexToEditorTextPaletteColor(textColor) || textColor;
+  return resolveColorValue(colorValue, textColor);
+};
+var getBackgroundColor = function getBackgroundColor(highlightColor) {
+  if (!highlightColor || highlightColor === TRANSPARENT_HIGHLIGHT_COLOR) {
+    return getTokenValue('elevation.surface', DEFAULT_BACKGROUND_COLOR);
+  }
+  var colorValue = hexToEditorTextBackgroundPaletteColor(highlightColor) || highlightColor;
+  return resolveColorValue(colorValue, highlightColor);
+};
+var useColorAccessibilityState = function useColorAccessibilityState(api) {
+  return useSharedPluginStateWithSelector(api, ['textColor', 'highlight'], function (states) {
+    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,
+      textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color
+    };
+  });
+};
+var getContrastRatio = function getContrastRatio(defaultColor, highlightColor, textColor) {
+  try {
+    var contrastRatio = calcContrastRatio(getForegroundColor(textColor, defaultColor), getBackgroundColor(highlightColor));
+    return contrastRatio;
+  }
+  // if we failed to calculate the contrast ratio, return null
+  catch (_unused) {
+    return null;
+  }
+};
+var getAccessibilityStatus = function getAccessibilityStatus(contrastRatio) {
+  if (contrastRatio >= ACCESSIBLE_CONTRAST_RATIO) {
+    return 'accessible';
+  } else if (contrastRatio >= DIFFICULT_CONTRAST_RATIO) {
+    return 'difficultToRead';
+  } else {
+    return 'inaccessible';
+  }
+};
+var AccessibilityStatus = function AccessibilityStatus(_ref) {
+  var accessibilityStatus = _ref.accessibilityStatus,
+    formatMessage = _ref.formatMessage;
+  if (accessibilityStatus === 'accessible') {
+    return /*#__PURE__*/React.createElement(Text, {
+      as: "span",
+      size: "small",
+      color: "color.text.success"
+    }, formatMessage(messages.accessibleLabel));
+  } else if (accessibilityStatus === 'difficultToRead') {
+    return /*#__PURE__*/React.createElement(Text, {
+      as: "span",
+      size: "small",
+      color: "color.text.warning"
+    }, formatMessage(messages.difficultToReadLabel));
+  } else {
+    return /*#__PURE__*/React.createElement(Text, {
+      as: "span",
+      size: "small",
+      color: "color.text.danger"
+    }, formatMessage(messages.inaccessibleLabel));
+  }
+};
+var styles = {
+  container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4"
+};
+export var ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref2) {
+  var api = _ref2.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useColorAccessibilit = useColorAccessibilityState(api),
+    defaultColor = _useColorAccessibilit.defaultColor,
+    highlightColor = _useColorAccessibilit.highlightColor,
+    textColor = _useColorAccessibilit.textColor;
+  var contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
+  if (contrastRatio === null) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  var accessibilityStatus = getAccessibilityStatus(contrastRatio);
+  var tooltipContent = function tooltipContent(accessibilityStatus) {
+    if (accessibilityStatus === 'accessible') {
+      return formatMessage(messages.accessibleTooltip);
+    } else if (accessibilityStatus === 'difficultToRead') {
+      return formatMessage(messages.difficultToReadTooltip);
+    } else {
+      return formatMessage(messages.inaccessibleTooltip);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    space: "space.050"
+  }, /*#__PURE__*/React.createElement(AccessibilityIcon, {
+    label: "",
+    size: "medium"
+  }), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    size: "small",
+    color: "color.text.subtle"
+  }, formatMessage(messages.accessibility)), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    size: "small",
+    color: "color.text.subtle",
+    "aria-hidden": "true"
+  }, "\u2022"), /*#__PURE__*/React.createElement(AccessibilityStatus, {
+    accessibilityStatus: accessibilityStatus,
+    formatMessage: formatMessage
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    icon: QuestionCircleIcon,
+    shape: "circle",
+    label: tooltipContent(accessibilityStatus),
+    isTooltipDisabled: false,
+    spacing: "compact",
+    appearance: "subtle"
+  }));
+};

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

@@ -28,6 +28,7 @@ import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import TextStyleIcon from '@atlaskit/icon/core/text-style';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeColor as changeColorWithAnalytics } from '../../pm-plugins/commands/change-color';
 import { getInputMethod } from '../../pm-plugins/utils/inputType';
@@ -139,7 +140,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         disabled = _this$props.disabled,
         pluginInjectionApi = _this$props.pluginInjectionApi;
       var palette = pluginState.palette;
-      var isNewColorPaletteEnabled = editorExperiment('platform_editor_lovability_text_bg_color', true);
+      var isNewColorPaletteEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true);
       var colorPickerColumns = isNewColorPaletteEnabled ? 10 : undefined;
       var fitWidth;
       if (document.body.clientWidth <= 740) {

package/dist/esm/ui/toolbar-components.js

@@ -1,8 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 React from 'react';
-import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU, CLEAR_COLOR_MENU_ITEM, TEXT_SECTION_PRIMARY_TOOLBAR_RANK, TEXT_SECTION_PRIMARY_TOOLBAR } from '@atlaskit/editor-common/toolbar';
+import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU, CLEAR_COLOR_MENU_ITEM, COLOR_ACCESSIBILITY_MENU_ITEM, TEXT_SECTION_PRIMARY_TOOLBAR_RANK, TEXT_SECTION_PRIMARY_TOOLBAR } from '@atlaskit/editor-common/toolbar';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { ColorAccessibilityMenuItem } from './ColorAccessibilityMenuItem';
 import { RemoveColorMenuItem } from './RemoveColorMenuItem';
 import { TextColorHighlightMenu } from './TextColorHighlightMenu';
 import { TextColorMenuItem } from './TextColorMenuItem';
@@ -57,5 +60,14 @@ export var getToolbarComponents = function getToolbarComponents(api) {
         parents: parents
       });
     }
-  })];
+  })].concat(_toConsumableArray(expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? [_objectSpread(_objectSpread({}, COLOR_ACCESSIBILITY_MENU_ITEM), {}, {
+    parents: [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
+      rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[COLOR_ACCESSIBILITY_MENU_ITEM.key]
+    })],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(ColorAccessibilityMenuItem, {
+        api: api
+      });
+    }
+  })] : []));
 };

package/dist/types/pm-plugins/utils/color-contrast.d.ts

@@ -0,0 +1 @@
+export declare function getContrastRatio(foreground: string, background: string): number;

package/dist/types/pm-plugins/utils/constants.d.ts

@@ -1,4 +1,8 @@
 export declare const overrideMarks: string[];
+export declare const ACCESSIBLE_CONTRAST_RATIO = 4.5;
+export declare const DIFFICULT_CONTRAST_RATIO = 3;
+export declare const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";
+export declare const TRANSPARENT_HIGHLIGHT_COLOR = "#00000000";
 export declare const DEFAULT_COLOR: {
     color: string;
     label: string;

package/dist/types/ui/ColorAccessibilityMenuItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TextColorPlugin } from '../textColorPluginType';
+type ColorAccessibilityMenuItemProps = {
+    api: ExtractInjectionAPI<TextColorPlugin> | undefined;
+};
+export declare const ColorAccessibilityMenuItem: ({ api }: ColorAccessibilityMenuItemProps) => React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-color",
-	"version": "12.1.2",
+	"version": "12.2.0",
 	"description": "Text color plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,13 +41,13 @@
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/platform-feature-flags-react": "^1.0.0",
 		"@atlaskit/primitives": "^20.0.0",
-		"@atlaskit/tmp-editor-statsig": "^108.3.0",
+		"@atlaskit/tmp-editor-statsig": "^109.0.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.4.0",
+		"@atlaskit/editor-common": "^116.6.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -102,9 +102,6 @@
 		},
 		"platform_editor_toolbar_aifc_text_color_config": {
 			"type": "boolean"
-		},
-		"platform_editor_toolbar_aifc_text_color_config_jsm": {
-			"type": "boolean"
 		}
 	}
 }