@atlaskit/editor-plugin-text-color 12.3.22 → 12.3.24

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-text-color
 
+## 12.3.24
+
+### Patch Changes
+
+- [`d778b282fb391`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d778b282fb391) -
+  Tighten color picker spacing and footer dimensions.
+
+  The `@atlaskit/editor-toolbar/color-palette` entry point now supports a `gap` prop to customise
+  spacing between color tile wrappers, for example: `<ColorPalette gap="space.0" {...props} />`.
+
+- Updated dependencies
+
+## 12.3.23
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.3.22
 
 ### Patch Changes

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

@@ -1,9 +1,14 @@
 
 ._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)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bah1yb4{justify-content:space-between}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}

package/dist/cjs/ui/ColorAccessibilityMenuItem.js

@@ -11,6 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 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 _uiColor = require("@atlaskit/editor-common/ui-color");
@@ -204,7 +205,8 @@ var AccessibilityStatus = function AccessibilityStatus(_ref2) {
   }
 };
 var styles = {
-  container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4"
+  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;
@@ -275,7 +277,7 @@ var ColorAccessibilityMenuItem = exports.ColorAccessibilityMenuItem = function C
     }
   };
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.container
+    xcss: (0, _css.cx)(styles.container, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && styles.containerPatch)
   }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     alignBlock: "center",
     space: "space.050"

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

@@ -2,9 +2,11 @@
 ._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)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
 ._19pk12x7{margin-top:var(--ds-space-075,6px)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}

package/dist/cjs/ui/RemoveColorMenuItem.js

@@ -23,6 +23,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   removeColorButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6d1l7x _19pk12x7",
+  removeColorButtonPatch: "_195gze3t _19pkze3t",
   iconContainer: "_zulp12x7 _1e0c1txw _4cvr1h6o _1bah1h6o"
 };
 var RemoveColorMenuItem = exports.RemoveColorMenuItem = function RemoveColorMenuItem(_ref) {
@@ -62,7 +63,7 @@ var RemoveColorMenuItem = exports.RemoveColorMenuItem = function RemoveColorMenu
   if ((0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
     if ((0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1')) {
       return /*#__PURE__*/React.createElement("div", {
-        className: (0, _runtime.ax)([styles.removeColorButton])
+        className: (0, _runtime.ax)([styles.removeColorButton, styles.removeColorButtonPatch])
       }, /*#__PURE__*/React.createElement(_new.default, {
         shouldFitContainer: true,
         appearance: "subtle",

package/dist/cjs/ui/TextColorMenuItem.js

@@ -18,6 +18,7 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -58,13 +59,9 @@ function TextColorMenuItem(_ref) {
       }
     }
   }, [editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch, api === null || api === void 0 ? void 0 : api.textColor.actions, parents, closeMenu, isNewColorPaletteEnabled]);
-  return /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
-    xcss: styles.container,
-    testId: "text-color-menu-item"
-  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
-    size: "xxsmall"
-  }, formatMessage(_messages.textColorMessages.textColorTooltip)), /*#__PURE__*/_react.default.createElement(_editorToolbar.ColorPalette, {
-    cols: isNewColorPaletteEnabled ? TEXT_COLOR_PICKER_COLUMNS : undefined
+  var colorPalette = /*#__PURE__*/_react.default.createElement(_editorToolbar.ColorPalette, {
+    cols: isNewColorPaletteEnabled ? TEXT_COLOR_PICKER_COLUMNS : undefined,
+    gap: isNewColorPaletteEnabled && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') ? 'space.0' : undefined
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     onClick: function onClick(color, _, event) {
@@ -78,5 +75,13 @@ function TextColorMenuItem(_ref) {
       hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
       paletteColorTooltipMessages: _uiColor.textPaletteTooltipMessages
     }
-  }));
+  });
+  return /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    xcss: styles.container,
+    testId: "text-color-menu-item"
+  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "xxsmall"
+  }, formatMessage(_messages.textColorMessages.textColorTooltip)), isNewColorPaletteEnabled && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') ? /*#__PURE__*/_react.default.createElement(_compiled.Bleed, {
+    inline: "space.025"
+  }, colorPalette) : colorPalette);
 }

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

@@ -1,2 +1,7 @@
-._18zru2gc{padding-inline:var(--ds-space-100,8px)}
-._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+
+._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)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}

package/dist/cjs/ui/TextMenuSection.js

@@ -15,7 +15,8 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var styles = {
-  menu: "_1rjcv77o _18zru2gc"
+  menuOld: "_1rjcv77o _18zru2gc",
+  menu: "_zulpu2gc _1rjc12x7 _18zrutpp _1e0c1txw _2lx21bp4"
 };
 var TextMenuSection = exports.TextMenuSection = function TextMenuSection(_ref) {
   var children = _ref.children,
@@ -31,7 +32,7 @@ var TextMenuSection = exports.TextMenuSection = function TextMenuSection(_ref) {
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
     hasSeparator: hasSeparator
   }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.menu,
+    xcss: (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') ? styles.menu : styles.menuOld,
     onMouseDown: onMouseDown
   }, children));
 };

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

@@ -1,9 +1,14 @@
 
 ._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)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bah1yb4{justify-content:space-between}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}

package/dist/es2019/ui/ColorAccessibilityMenuItem.js

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@atlaskit/button/new';
+import { cx } from '@atlaskit/css';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { colorAccessibilityMessages as messages } from '@atlaskit/editor-common/messages';
 import { getHighlightColorInNonActiveTheme, getTextColorInNonActiveTheme, getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
@@ -189,7 +190,8 @@ const AccessibilityStatus = ({
   }
 };
 const styles = {
-  container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4"
+  container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4",
+  containerPatch: "_19pkze3t _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t"
 };
 export const ColorAccessibilityMenuItem = ({
   api
@@ -261,7 +263,7 @@ export const ColorAccessibilityMenuItem = ({
     }
   };
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container
+    xcss: cx(styles.container, fg('platform_editor_lovability_text_bg_color_patch_1') && styles.containerPatch)
   }, /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     space: "space.050"

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

@@ -2,9 +2,11 @@
 ._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)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
 ._19pk12x7{margin-top:var(--ds-space-075,6px)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}

package/dist/es2019/ui/RemoveColorMenuItem.js

@@ -14,6 +14,7 @@ import { Text } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const styles = {
   removeColorButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6d1l7x _19pk12x7",
+  removeColorButtonPatch: "_195gze3t _19pkze3t",
   iconContainer: "_zulp12x7 _1e0c1txw _4cvr1h6o _1bah1h6o"
 };
 export const RemoveColorMenuItem = ({
@@ -56,7 +57,7 @@ export const RemoveColorMenuItem = ({
   if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
     if (fg('platform_editor_lovability_text_bg_color_patch_1')) {
       return /*#__PURE__*/React.createElement("div", {
-        className: ax([styles.removeColorButton])
+        className: ax([styles.removeColorButton, styles.removeColorButtonPatch])
       }, /*#__PURE__*/React.createElement(Button, {
         shouldFitContainer: true,
         appearance: "subtle",

package/dist/es2019/ui/TextColorMenuItem.js

@@ -10,7 +10,8 @@ import { textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
 import Heading from '@atlaskit/heading';
-import { Stack } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Bleed, Stack } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const TEXT_COLOR_PICKER_COLUMNS = 10;
 const styles = {
@@ -53,13 +54,9 @@ export function TextColorMenuItem({
       }
     }
   }, [editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch, api === null || api === void 0 ? void 0 : api.textColor.actions, parents, closeMenu, isNewColorPaletteEnabled]);
-  return /*#__PURE__*/React.createElement(Stack, {
-    xcss: styles.container,
-    testId: "text-color-menu-item"
-  }, /*#__PURE__*/React.createElement(Heading, {
-    size: "xxsmall"
-  }, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(ColorPalette, {
-    cols: isNewColorPaletteEnabled ? TEXT_COLOR_PICKER_COLUMNS : undefined
+  const colorPalette = /*#__PURE__*/React.createElement(ColorPalette, {
+    cols: isNewColorPaletteEnabled ? TEXT_COLOR_PICKER_COLUMNS : undefined,
+    gap: isNewColorPaletteEnabled && fg('platform_editor_lovability_text_bg_color_patch_1') ? 'space.0' : undefined
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     onClick: (color, _, event) => {
@@ -73,5 +70,13 @@ export function TextColorMenuItem({
       hexToPaletteColor: hexToEditorTextPaletteColor,
       paletteColorTooltipMessages: textPaletteTooltipMessages
     }
-  }));
+  });
+  return /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.container,
+    testId: "text-color-menu-item"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xxsmall"
+  }, formatMessage(messages.textColorTooltip)), isNewColorPaletteEnabled && fg('platform_editor_lovability_text_bg_color_patch_1') ? /*#__PURE__*/React.createElement(Bleed, {
+    inline: "space.025"
+  }, colorPalette) : colorPalette);
 }

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

@@ -1,2 +1,7 @@
-._18zru2gc{padding-inline:var(--ds-space-100,8px)}
-._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+
+._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)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}

package/dist/es2019/ui/TextMenuSection.js

@@ -8,7 +8,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const styles = {
-  menu: "_1rjcv77o _18zru2gc"
+  menuOld: "_1rjcv77o _18zru2gc",
+  menu: "_zulpu2gc _1rjc12x7 _18zrutpp _1e0c1txw _2lx21bp4"
 };
 export const TextMenuSection = ({
   children,
@@ -23,7 +24,7 @@ export const TextMenuSection = ({
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
     hasSeparator: hasSeparator
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.menu,
+    xcss: expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_1') ? styles.menu : styles.menuOld,
     onMouseDown: onMouseDown
   }, children));
 };

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

@@ -1,9 +1,14 @@
 
 ._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)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bah1yb4{justify-content:space-between}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
-._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}

package/dist/esm/ui/ColorAccessibilityMenuItem.js

@@ -7,6 +7,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@atlaskit/button/new';
+import { cx } from '@atlaskit/css';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { colorAccessibilityMessages as messages } from '@atlaskit/editor-common/messages';
 import { getHighlightColorInNonActiveTheme, getTextColorInNonActiveTheme, getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
@@ -197,7 +198,8 @@ var AccessibilityStatus = function AccessibilityStatus(_ref2) {
   }
 };
 var styles = {
-  container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4"
+  container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4",
+  containerPatch: "_19pkze3t _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t"
 };
 export var ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref3) {
   var api = _ref3.api;
@@ -268,7 +270,7 @@ export var ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref
     }
   };
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container
+    xcss: cx(styles.container, fg('platform_editor_lovability_text_bg_color_patch_1') && styles.containerPatch)
   }, /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     space: "space.050"

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

@@ -2,9 +2,11 @@
 ._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)}
+._195gze3t{margin-inline:var(--ds-space-0,0)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
 ._19pk12x7{margin-top:var(--ds-space-075,6px)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}

package/dist/esm/ui/RemoveColorMenuItem.js

@@ -14,6 +14,7 @@ import { Text } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var styles = {
   removeColorButton: "_2rko12b0 _195gv77o _189ee4h9 _1dqonqa1 _1h6d1l7x _19pk12x7",
+  removeColorButtonPatch: "_195gze3t _19pkze3t",
   iconContainer: "_zulp12x7 _1e0c1txw _4cvr1h6o _1bah1h6o"
 };
 export var RemoveColorMenuItem = function RemoveColorMenuItem(_ref) {
@@ -53,7 +54,7 @@ export var RemoveColorMenuItem = function RemoveColorMenuItem(_ref) {
   if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
     if (fg('platform_editor_lovability_text_bg_color_patch_1')) {
       return /*#__PURE__*/React.createElement("div", {
-        className: ax([styles.removeColorButton])
+        className: ax([styles.removeColorButton, styles.removeColorButtonPatch])
       }, /*#__PURE__*/React.createElement(Button, {
         shouldFitContainer: true,
         appearance: "subtle",

package/dist/esm/ui/TextColorMenuItem.js

@@ -10,7 +10,8 @@ import { textPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { ColorPalette, useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
 import Heading from '@atlaskit/heading';
-import { Stack } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Bleed, Stack } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var TEXT_COLOR_PICKER_COLUMNS = 10;
 var styles = {
@@ -49,13 +50,9 @@ export function TextColorMenuItem(_ref) {
       }
     }
   }, [editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch, api === null || api === void 0 ? void 0 : api.textColor.actions, parents, closeMenu, isNewColorPaletteEnabled]);
-  return /*#__PURE__*/React.createElement(Stack, {
-    xcss: styles.container,
-    testId: "text-color-menu-item"
-  }, /*#__PURE__*/React.createElement(Heading, {
-    size: "xxsmall"
-  }, formatMessage(messages.textColorTooltip)), /*#__PURE__*/React.createElement(ColorPalette, {
-    cols: isNewColorPaletteEnabled ? TEXT_COLOR_PICKER_COLUMNS : undefined
+  var colorPalette = /*#__PURE__*/React.createElement(ColorPalette, {
+    cols: isNewColorPaletteEnabled ? TEXT_COLOR_PICKER_COLUMNS : undefined,
+    gap: isNewColorPaletteEnabled && fg('platform_editor_lovability_text_bg_color_patch_1') ? 'space.0' : undefined
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     onClick: function onClick(color, _, event) {
@@ -69,5 +66,13 @@ export function TextColorMenuItem(_ref) {
       hexToPaletteColor: hexToEditorTextPaletteColor,
       paletteColorTooltipMessages: textPaletteTooltipMessages
     }
-  }));
+  });
+  return /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.container,
+    testId: "text-color-menu-item"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xxsmall"
+  }, formatMessage(messages.textColorTooltip)), isNewColorPaletteEnabled && fg('platform_editor_lovability_text_bg_color_patch_1') ? /*#__PURE__*/React.createElement(Bleed, {
+    inline: "space.025"
+  }, colorPalette) : colorPalette);
 }

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

@@ -1,2 +1,7 @@
-._18zru2gc{padding-inline:var(--ds-space-100,8px)}
-._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+
+._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)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}

package/dist/esm/ui/TextMenuSection.js

@@ -8,7 +8,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var styles = {
-  menu: "_1rjcv77o _18zru2gc"
+  menuOld: "_1rjcv77o _18zru2gc",
+  menu: "_zulpu2gc _1rjc12x7 _18zrutpp _1e0c1txw _2lx21bp4"
 };
 export var TextMenuSection = function TextMenuSection(_ref) {
   var children = _ref.children,
@@ -24,7 +25,7 @@ export var TextMenuSection = function TextMenuSection(_ref) {
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
     hasSeparator: hasSeparator
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.menu,
+    xcss: expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_1') ? styles.menu : styles.menuOld,
     onMouseDown: onMouseDown
   }, children));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-color",
-	"version": "12.3.22",
+	"version": "12.3.24",
 	"description": "Text color plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 		"@atlaskit/editor-plugin-toolbar": "^9.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/editor-shared-styles": "^4.0.0",
-		"@atlaskit/editor-toolbar": "^2.2.0",
+		"@atlaskit/editor-toolbar": "^2.3.0",
 		"@atlaskit/editor-toolbar-model": "^1.1.0",
 		"@atlaskit/heading": "^6.2.0",
 		"@atlaskit/icon": "^37.0.0",
@@ -41,13 +41,13 @@
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
 		"@atlaskit/primitives": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^125.2.0",
+		"@atlaskit/tmp-editor-statsig": "^126.1.0",
 		"@atlaskit/tokens": "^15.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.30.0",
+		"@atlaskit/editor-common": "^116.32.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"