@atlaskit/editor-plugin-text-color 12.3.13 → 12.3.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/pm-plugins/main.js +24 -5
  3. package/dist/cjs/ui/ColorAccessibilityMenuItem.js +18 -5
  4. package/dist/es2019/pm-plugins/main.js +35 -8
  5. package/dist/es2019/ui/ColorAccessibilityMenuItem.js +18 -5
  6. package/dist/esm/pm-plugins/main.js +25 -6
  7. package/dist/esm/ui/ColorAccessibilityMenuItem.js +18 -5
  8. package/dist/types/pm-plugins/main.d.ts +1 -0
  9. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-text-color
2
2
 
3
+ ## 12.3.15
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 12.3.14
10
+
11
+ ### Patch Changes
12
+
13
+ - [`74b3e15fed77e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/74b3e15fed77e) -
14
+ Check editor text and highlight color accessibility against both light and dark theme variants.
15
+ - Updated dependencies
16
+
3
17
  ## 12.3.13
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -11,13 +11,22 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
11
11
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
12
12
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
13
13
  var _uiColor = require("@atlaskit/editor-common/ui-color");
14
+ var _text = require("@atlaskit/editor-palette/text");
14
15
  var _state = require("@atlaskit/editor-prosemirror/state");
16
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
17
  var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
16
18
  var _color = require("./utils/color");
17
19
  var _constants = require("./utils/constants");
18
20
  var _disabled = require("./utils/disabled");
19
21
  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; }
20
22
  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) { (0, _defineProperty2.default)(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; }
23
+ var getColorInNonActiveTheme = function getColorInNonActiveTheme(color, defaultColor) {
24
+ if (!color || color === defaultColor) {
25
+ return (0, _uiColor.getTokenCSSVariableValueForNonActiveTheme)("var(--ds-text, #292A2E)", defaultColor);
26
+ }
27
+ var colorValue = (0, _text.hexToEditorTextPaletteColor)(color) || color;
28
+ return (0, _uiColor.getTokenCSSVariableValueForNonActiveTheme)(colorValue, color);
29
+ };
21
30
  function createInitialPluginState(editorState, pluginConfig) {
22
31
  var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || _constants.DEFAULT_COLOR;
23
32
  var paletteColors = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? _uiColor.textColorPaletteNew : _uiColor.textColorPalette;
@@ -26,13 +35,16 @@ function createInitialPluginState(editorState, pluginConfig) {
26
35
  label: defaultColor.label,
27
36
  border: "var(--ds-border, #0B120E24)"
28
37
  }].concat((0, _toConsumableArray2.default)(paletteColors));
29
- var state = {
30
- color: (0, _color.getActiveColor)(editorState),
38
+ var color = (0, _color.getActiveColor)(editorState);
39
+ var state = _objectSpread({
40
+ color: color,
31
41
  disabled: (0, _disabled.getDisabledState)(editorState),
32
42
  palette: palette,
33
43
  defaultColor: defaultColor.color,
34
44
  isPaletteOpen: false
35
- };
45
+ }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
46
+ colorInNonActiveTheme: getColorInNonActiveTheme(color, defaultColor.color)
47
+ });
36
48
  return state;
37
49
  }
38
50
  var ACTIONS = exports.ACTIONS = /*#__PURE__*/function (ACTIONS) {
@@ -57,6 +69,8 @@ function createPlugin(dispatch, pluginConfig) {
57
69
  case ACTIONS.RESET_COLOR:
58
70
  nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
59
71
  color: pluginState.defaultColor
72
+ }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
73
+ colorInNonActiveTheme: getColorInNonActiveTheme(pluginState.defaultColor, pluginState.defaultColor)
60
74
  });
61
75
  break;
62
76
  case ACTIONS.SET_COLOR:
@@ -64,6 +78,8 @@ function createPlugin(dispatch, pluginConfig) {
64
78
  color: meta.color,
65
79
  disabled: false,
66
80
  isPaletteOpen: false
81
+ }, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
82
+ colorInNonActiveTheme: getColorInNonActiveTheme(meta.color, pluginState.defaultColor)
67
83
  });
68
84
  break;
69
85
  case ACTIONS.DISABLE:
@@ -77,12 +93,15 @@ function createPlugin(dispatch, pluginConfig) {
77
93
  });
78
94
  break;
79
95
  default:
96
+ var color = (0, _color.getActiveColor)(newState);
80
97
  nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
81
- color: (0, _color.getActiveColor)(newState),
98
+ color: color,
82
99
  disabled: (0, _disabled.getDisabledState)(newState)
100
+ }, 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) && {
101
+ colorInNonActiveTheme: getColorInNonActiveTheme(color, pluginState.defaultColor)
83
102
  });
84
103
  }
85
- if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
104
+ if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
86
105
  dispatch(pluginKey, nextState);
87
106
  return nextState;
88
107
  }
package/dist/cjs/ui/ColorAccessibilityMenuItem.js CHANGED
@@ -41,11 +41,13 @@ var getBackgroundColor = function getBackgroundColor(highlightColor) {
41
41
  };
42
42
  var useColorAccessibilityState = function useColorAccessibilityState(api) {
43
43
  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['textColor', 'highlight'], function (states) {
44
- var _states$textColorStat, _states$highlightStat, _states$textColorStat2;
44
+ var _states$textColorStat, _states$highlightStat, _states$highlightStat2, _states$textColorStat2, _states$textColorStat3;
45
45
  return {
46
46
  defaultColor: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.defaultColor,
47
47
  highlightColor: (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.activeColor,
48
- textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color
48
+ highlightColorInNonActiveTheme: (_states$highlightStat2 = states.highlightState) === null || _states$highlightStat2 === void 0 ? void 0 : _states$highlightStat2.activeColorInNonActiveTheme,
49
+ textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color,
50
+ textColorInNonActiveTheme: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.colorInNonActiveTheme
49
51
  };
50
52
  });
51
53
  };
@@ -100,12 +102,23 @@ var ColorAccessibilityMenuItem = exports.ColorAccessibilityMenuItem = function C
100
102
  var _useColorAccessibilit = useColorAccessibilityState(api),
101
103
  defaultColor = _useColorAccessibilit.defaultColor,
102
104
  highlightColor = _useColorAccessibilit.highlightColor,
103
- textColor = _useColorAccessibilit.textColor;
105
+ highlightColorInNonActiveTheme = _useColorAccessibilit.highlightColorInNonActiveTheme,
106
+ textColor = _useColorAccessibilit.textColor,
107
+ textColorInNonActiveTheme = _useColorAccessibilit.textColorInNonActiveTheme;
104
108
  var contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
105
- if (contrastRatio === null) {
109
+ var nonActiveThemeContrastRatio = null;
110
+ try {
111
+ if (textColorInNonActiveTheme && highlightColorInNonActiveTheme && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1')) {
112
+ nonActiveThemeContrastRatio = (0, _colorContrast.getContrastRatio)(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
113
+ }
114
+ } catch (_unused2) {
115
+ // if we failed to calculate the contrast ratio, leave null
116
+ }
117
+ var mostCriticalContrastRatio = contrastRatio !== null && nonActiveThemeContrastRatio !== null && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') ? Math.min(contrastRatio, nonActiveThemeContrastRatio) : contrastRatio;
118
+ if (mostCriticalContrastRatio === null) {
106
119
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
107
120
  }
108
- var accessibilityStatus = getAccessibilityStatus(contrastRatio);
121
+ var accessibilityStatus = getAccessibilityStatus(mostCriticalContrastRatio);
109
122
  var tooltipContent = function tooltipContent(accessibilityStatus) {
110
123
  if (accessibilityStatus === 'accessible') {
111
124
  return formatMessage(_messages.colorAccessibilityMessages.accessibleTooltip);
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -1,10 +1,19 @@
1
1
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- import { textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
2
+ import { getTokenCSSVariableValueForNonActiveTheme, textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
3
+ import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette/text';
3
4
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
4
6
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
5
7
  import { getActiveColor } from './utils/color';
6
8
  import { DEFAULT_COLOR } from './utils/constants';
7
9
  import { getDisabledState } from './utils/disabled';
10
+ const getColorInNonActiveTheme = (color, defaultColor) => {
11
+ if (!color || color === defaultColor) {
12
+ return getTokenCSSVariableValueForNonActiveTheme("var(--ds-text, #292A2E)", defaultColor);
13
+ }
14
+ const colorValue = hexToEditorTextPaletteColor(color) || color;
15
+ return getTokenCSSVariableValueForNonActiveTheme(colorValue, color);
16
+ };
8
17
  function createInitialPluginState(editorState, pluginConfig) {
9
18
  const defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
10
19
  const paletteColors = expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? textColorPaletteNew : textColorPalette;
@@ -13,12 +22,17 @@ function createInitialPluginState(editorState, pluginConfig) {
13
22
  label: defaultColor.label,
14
23
  border: "var(--ds-border, #0B120E24)"
15
24
  }, ...paletteColors];
25
+ const color = getActiveColor(editorState);
16
26
  const state = {
17
- color: getActiveColor(editorState),
27
+ color,
18
28
  disabled: getDisabledState(editorState),
19
29
  palette,
20
30
  defaultColor: defaultColor.color,
21
- isPaletteOpen: false
31
+ isPaletteOpen: false,
32
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
33
+ ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
34
+ colorInNonActiveTheme: getColorInNonActiveTheme(color, defaultColor.color)
35
+ })
22
36
  };
23
37
  return state;
24
38
  }
@@ -44,7 +58,11 @@ export function createPlugin(dispatch, pluginConfig) {
44
58
  case ACTIONS.RESET_COLOR:
45
59
  nextState = {
46
60
  ...pluginState,
47
- color: pluginState.defaultColor
61
+ color: pluginState.defaultColor,
62
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
63
+ ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
64
+ colorInNonActiveTheme: getColorInNonActiveTheme(pluginState.defaultColor, pluginState.defaultColor)
65
+ })
48
66
  };
49
67
  break;
50
68
  case ACTIONS.SET_COLOR:
@@ -52,7 +70,11 @@ export function createPlugin(dispatch, pluginConfig) {
52
70
  ...pluginState,
53
71
  color: meta.color,
54
72
  disabled: false,
55
- isPaletteOpen: false
73
+ isPaletteOpen: false,
74
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
75
+ ...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
76
+ colorInNonActiveTheme: getColorInNonActiveTheme(meta.color, pluginState.defaultColor)
77
+ })
56
78
  };
57
79
  break;
58
80
  case ACTIONS.DISABLE:
@@ -68,13 +90,18 @@ export function createPlugin(dispatch, pluginConfig) {
68
90
  };
69
91
  break;
70
92
  default:
93
+ const color = getActiveColor(newState);
71
94
  nextState = {
72
95
  ...pluginState,
73
- color: getActiveColor(newState),
74
- disabled: getDisabledState(newState)
96
+ color,
97
+ disabled: getDisabledState(newState),
98
+ // eslint-disable-next-line @atlaskit/platform/no-preconditioning
99
+ ...(color !== pluginState.color && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
100
+ colorInNonActiveTheme: getColorInNonActiveTheme(color, pluginState.defaultColor)
101
+ })
75
102
  };
76
103
  }
77
- if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
104
+ if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
78
105
  dispatch(pluginKey, nextState);
79
106
  return nextState;
80
107
  }
package/dist/es2019/ui/ColorAccessibilityMenuItem.js CHANGED
@@ -34,11 +34,13 @@ const getBackgroundColor = highlightColor => {
34
34
  };
35
35
  const useColorAccessibilityState = api => {
36
36
  return useSharedPluginStateWithSelector(api, ['textColor', 'highlight'], states => {
37
- var _states$textColorStat, _states$highlightStat, _states$textColorStat2;
37
+ var _states$textColorStat, _states$highlightStat, _states$highlightStat2, _states$textColorStat2, _states$textColorStat3;
38
38
  return {
39
39
  defaultColor: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.defaultColor,
40
40
  highlightColor: (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.activeColor,
41
- textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color
41
+ highlightColorInNonActiveTheme: (_states$highlightStat2 = states.highlightState) === null || _states$highlightStat2 === void 0 ? void 0 : _states$highlightStat2.activeColorInNonActiveTheme,
42
+ textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color,
43
+ textColorInNonActiveTheme: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.colorInNonActiveTheme
42
44
  };
43
45
  });
44
46
  };
@@ -96,13 +98,24 @@ export const ColorAccessibilityMenuItem = ({
96
98
  const {
97
99
  defaultColor,
98
100
  highlightColor,
99
- textColor
101
+ highlightColorInNonActiveTheme,
102
+ textColor,
103
+ textColorInNonActiveTheme
100
104
  } = useColorAccessibilityState(api);
101
105
  const contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
102
- if (contrastRatio === null) {
106
+ let nonActiveThemeContrastRatio = null;
107
+ try {
108
+ if (textColorInNonActiveTheme && highlightColorInNonActiveTheme && fg('platform_editor_lovability_text_bg_color_patch_1')) {
109
+ nonActiveThemeContrastRatio = calcContrastRatio(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
110
+ }
111
+ } catch {
112
+ // if we failed to calculate the contrast ratio, leave null
113
+ }
114
+ const mostCriticalContrastRatio = contrastRatio !== null && nonActiveThemeContrastRatio !== null && fg('platform_editor_lovability_text_bg_color_patch_1') ? Math.min(contrastRatio, nonActiveThemeContrastRatio) : contrastRatio;
115
+ if (mostCriticalContrastRatio === null) {
103
116
  return /*#__PURE__*/React.createElement(React.Fragment, null);
104
117
  }
105
- const accessibilityStatus = getAccessibilityStatus(contrastRatio);
118
+ const accessibilityStatus = getAccessibilityStatus(mostCriticalContrastRatio);
106
119
  const tooltipContent = accessibilityStatus => {
107
120
  if (accessibilityStatus === 'accessible') {
108
121
  return formatMessage(messages.accessibleTooltip);
package/dist/esm/pm-plugins/main.js CHANGED
@@ -3,12 +3,21 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
3
  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; }
4
4
  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; }
5
5
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
6
- import { textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
6
+ import { getTokenCSSVariableValueForNonActiveTheme, textColorPalette, textColorPaletteNew } from '@atlaskit/editor-common/ui-color';
7
+ import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette/text';
7
8
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
8
10
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
9
11
  import { getActiveColor } from './utils/color';
10
12
  import { DEFAULT_COLOR } from './utils/constants';
11
13
  import { getDisabledState } from './utils/disabled';
14
+ var getColorInNonActiveTheme = function getColorInNonActiveTheme(color, defaultColor) {
15
+ if (!color || color === defaultColor) {
16
+ return getTokenCSSVariableValueForNonActiveTheme("var(--ds-text, #292A2E)", defaultColor);
17
+ }
18
+ var colorValue = hexToEditorTextPaletteColor(color) || color;
19
+ return getTokenCSSVariableValueForNonActiveTheme(colorValue, color);
20
+ };
12
21
  function createInitialPluginState(editorState, pluginConfig) {
13
22
  var defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
14
23
  var paletteColors = expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) ? textColorPaletteNew : textColorPalette;
@@ -17,13 +26,16 @@ function createInitialPluginState(editorState, pluginConfig) {
17
26
  label: defaultColor.label,
18
27
  border: "var(--ds-border, #0B120E24)"
19
28
  }].concat(_toConsumableArray(paletteColors));
20
- var state = {
21
- color: getActiveColor(editorState),
29
+ var color = getActiveColor(editorState);
30
+ var state = _objectSpread({
31
+ color: color,
22
32
  disabled: getDisabledState(editorState),
23
33
  palette: palette,
24
34
  defaultColor: defaultColor.color,
25
35
  isPaletteOpen: false
26
- };
36
+ }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
37
+ colorInNonActiveTheme: getColorInNonActiveTheme(color, defaultColor.color)
38
+ });
27
39
  return state;
28
40
  }
29
41
  export var ACTIONS = /*#__PURE__*/function (ACTIONS) {
@@ -48,6 +60,8 @@ export function createPlugin(dispatch, pluginConfig) {
48
60
  case ACTIONS.RESET_COLOR:
49
61
  nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
50
62
  color: pluginState.defaultColor
63
+ }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
64
+ colorInNonActiveTheme: getColorInNonActiveTheme(pluginState.defaultColor, pluginState.defaultColor)
51
65
  });
52
66
  break;
53
67
  case ACTIONS.SET_COLOR:
@@ -55,6 +69,8 @@ export function createPlugin(dispatch, pluginConfig) {
55
69
  color: meta.color,
56
70
  disabled: false,
57
71
  isPaletteOpen: false
72
+ }, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
73
+ colorInNonActiveTheme: getColorInNonActiveTheme(meta.color, pluginState.defaultColor)
58
74
  });
59
75
  break;
60
76
  case ACTIONS.DISABLE:
@@ -68,12 +84,15 @@ export function createPlugin(dispatch, pluginConfig) {
68
84
  });
69
85
  break;
70
86
  default:
87
+ var color = getActiveColor(newState);
71
88
  nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
72
- color: getActiveColor(newState),
89
+ color: color,
73
90
  disabled: getDisabledState(newState)
91
+ }, color !== pluginState.color && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
92
+ colorInNonActiveTheme: getColorInNonActiveTheme(color, pluginState.defaultColor)
74
93
  });
75
94
  }
76
- if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
95
+ if (pluginState && pluginState.color !== nextState.color || pluginState && pluginState.colorInNonActiveTheme !== nextState.colorInNonActiveTheme || pluginState && pluginState.disabled !== nextState.disabled || pluginState && pluginState.isPaletteOpen !== nextState.isPaletteOpen) {
77
96
  dispatch(pluginKey, nextState);
78
97
  return nextState;
79
98
  }
package/dist/esm/ui/ColorAccessibilityMenuItem.js CHANGED
@@ -34,11 +34,13 @@ var getBackgroundColor = function getBackgroundColor(highlightColor) {
34
34
  };
35
35
  var useColorAccessibilityState = function useColorAccessibilityState(api) {
36
36
  return useSharedPluginStateWithSelector(api, ['textColor', 'highlight'], function (states) {
37
- var _states$textColorStat, _states$highlightStat, _states$textColorStat2;
37
+ var _states$textColorStat, _states$highlightStat, _states$highlightStat2, _states$textColorStat2, _states$textColorStat3;
38
38
  return {
39
39
  defaultColor: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.defaultColor,
40
40
  highlightColor: (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.activeColor,
41
- textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color
41
+ highlightColorInNonActiveTheme: (_states$highlightStat2 = states.highlightState) === null || _states$highlightStat2 === void 0 ? void 0 : _states$highlightStat2.activeColorInNonActiveTheme,
42
+ textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color,
43
+ textColorInNonActiveTheme: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.colorInNonActiveTheme
42
44
  };
43
45
  });
44
46
  };
@@ -93,12 +95,23 @@ export var ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref
93
95
  var _useColorAccessibilit = useColorAccessibilityState(api),
94
96
  defaultColor = _useColorAccessibilit.defaultColor,
95
97
  highlightColor = _useColorAccessibilit.highlightColor,
96
- textColor = _useColorAccessibilit.textColor;
98
+ highlightColorInNonActiveTheme = _useColorAccessibilit.highlightColorInNonActiveTheme,
99
+ textColor = _useColorAccessibilit.textColor,
100
+ textColorInNonActiveTheme = _useColorAccessibilit.textColorInNonActiveTheme;
97
101
  var contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
98
- if (contrastRatio === null) {
102
+ var nonActiveThemeContrastRatio = null;
103
+ try {
104
+ if (textColorInNonActiveTheme && highlightColorInNonActiveTheme && fg('platform_editor_lovability_text_bg_color_patch_1')) {
105
+ nonActiveThemeContrastRatio = calcContrastRatio(textColorInNonActiveTheme, highlightColorInNonActiveTheme);
106
+ }
107
+ } catch (_unused2) {
108
+ // if we failed to calculate the contrast ratio, leave null
109
+ }
110
+ var mostCriticalContrastRatio = contrastRatio !== null && nonActiveThemeContrastRatio !== null && fg('platform_editor_lovability_text_bg_color_patch_1') ? Math.min(contrastRatio, nonActiveThemeContrastRatio) : contrastRatio;
111
+ if (mostCriticalContrastRatio === null) {
99
112
  return /*#__PURE__*/React.createElement(React.Fragment, null);
100
113
  }
101
- var accessibilityStatus = getAccessibilityStatus(contrastRatio);
114
+ var accessibilityStatus = getAccessibilityStatus(mostCriticalContrastRatio);
102
115
  var tooltipContent = function tooltipContent(accessibilityStatus) {
103
116
  if (accessibilityStatus === 'accessible') {
104
117
  return formatMessage(messages.accessibleTooltip);
package/dist/types/pm-plugins/main.d.ts CHANGED
@@ -5,6 +5,7 @@ import type { PaletteColor } from '@atlaskit/editor-common/ui-color';
5
5
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
6
6
  export type TextColorPluginState = {
7
7
  color: string | null;
8
+ colorInNonActiveTheme?: string;
8
9
  defaultColor: string;
9
10
  disabled?: boolean;
10
11
  isPaletteOpen?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-text-color",
3
- "version": "12.3.13",
3
+ "version": "12.3.15",
4
4
  "description": "Text color plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -21,7 +21,7 @@
21
21
  ],
22
22
  "atlaskit:src": "src/index.ts",
23
23
  "dependencies": {
24
- "@atlaskit/adf-schema": "^56.0.0",
24
+ "@atlaskit/adf-schema": "^56.1.0",
25
25
  "@atlaskit/button": "^24.3.0",
26
26
  "@atlaskit/css": "^1.0.0",
27
27
  "@atlaskit/editor-palette": "^3.1.0",
@@ -35,19 +35,19 @@
35
35
  "@atlaskit/editor-shared-styles": "^4.0.0",
36
36
  "@atlaskit/editor-toolbar": "^2.1.0",
37
37
  "@atlaskit/editor-toolbar-model": "^1.1.0",
38
- "@atlaskit/heading": "^6.1.0",
38
+ "@atlaskit/heading": "^6.2.0",
39
39
  "@atlaskit/icon": "^36.2.0",
40
40
  "@atlaskit/icon-lab": "^7.3.0",
41
41
  "@atlaskit/platform-feature-flags": "^2.0.0",
42
42
  "@atlaskit/platform-feature-flags-react": "^1.1.0",
43
- "@atlaskit/primitives": "^20.3.0",
44
- "@atlaskit/tmp-editor-statsig": "^121.0.0",
45
- "@atlaskit/tokens": "^15.4.0",
43
+ "@atlaskit/primitives": "^20.5.0",
44
+ "@atlaskit/tmp-editor-statsig": "^122.0.0",
45
+ "@atlaskit/tokens": "^15.5.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "@emotion/react": "^11.7.1"
48
48
  },
49
49
  "peerDependencies": {
50
- "@atlaskit/editor-common": "^116.22.0",
50
+ "@atlaskit/editor-common": "^116.24.0",
51
51
  "react": "^18.2.0",
52
52
  "react-dom": "^18.2.0",
53
53
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"