@atlaskit/editor-common 115.6.0 → 115.7.1

package/dist/esm/ui/Popup/isBody.js

@@ -0,0 +1,3 @@
+export function isBody(elem) {
+  return elem === document.body;
+}

package/dist/esm/ui/Popup/isTextNode.js

@@ -0,0 +1,3 @@
+export function isTextNode(elem) {
+  return elem && elem.nodeType === 3;
+}

package/dist/esm/ui/Popup/utils.js

@@ -2,13 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-export function isBody(elem) {
-  return elem === document.body;
-}
-export function isTextNode(elem) {
-  return elem && elem.nodeType === 3;
-}
-
+import { isBody } from './isBody';
+import { isTextNode } from './isTextNode';
 /**
  * Decides if given fitHeight fits below or above the target taking boundaries into account.
  */
@@ -315,13 +310,6 @@ export function calculatePosition(_ref5) {
   position = _objectSpread(_objectSpread({}, position), horizontalPosition);
   return position;
 }
-export function validatePosition(popup) {
-  // popup.offsetParent does not exist if the popup element is not mounted
-  if (!popup || !popup.offsetParent) {
-    return false;
-  }
-  return true;
-}
 
 /**
  * Traverse DOM Tree upwards looking for popup parents with "overflow: scroll".
@@ -352,4 +340,10 @@ function isElementNode(node) {
 // Helper function to check if the passed node is of HTMLElement class
 function isHTMLElementNode(node) {
   return isElementNode(node) && node.namespaceURI === 'http://www.w3.org/1999/xhtml';
-}
+}
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { isBody } from './isBody';
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { isTextNode } from './isTextNode';
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { validatePosition } from './validatePosition';

package/dist/esm/ui/Popup/validatePosition.js

@@ -0,0 +1,7 @@
+export function validatePosition(popup) {
+  // popup.offsetParent does not exist if the popup element is not mounted
+  if (!popup || !popup.offsetParent) {
+    return false;
+  }
+  return true;
+}

package/dist/esm/ui/ResizerLegacy/handleSides.js

@@ -0,0 +1 @@
+export var handleSides = ['left', 'right'];

package/dist/esm/ui/ResizerLegacy/imageAlignmentMap.js

@@ -0,0 +1,4 @@
+export var imageAlignmentMap = {
+  left: 'start',
+  right: 'end'
+};

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

@@ -15,7 +15,8 @@ import { akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { richMediaClassName } from '../../styles';
 import { gridTypeForLayout } from '../../utils';
-import { handleSides, snapTo } from './utils';
+import { handleSides } from './handleSides';
+import { snapTo } from './snapTo';
 var getResizeAnalyticsEvent = function getResizeAnalyticsEvent(type, size, layout) {
   var actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
   return {

package/dist/esm/ui/ResizerLegacy/snapTo.js

@@ -0,0 +1,7 @@
+export var snapTo = function snapTo(target, points) {
+  return points.length === 0 ?
+  // extreme last case if there are no points somehow
+  target : points.reduce(function (point, closest) {
+    return Math.abs(closest - target) < Math.abs(point - target) ? closest : point;
+  });
+};

package/dist/esm/ui/ResizerLegacy/utils.js

@@ -1,12 +1,6 @@
-export var snapTo = function snapTo(target, points) {
-  return points.length === 0 ?
-  // extreme last case if there are no points somehow
-  target : points.reduce(function (point, closest) {
-    return Math.abs(closest - target) < Math.abs(point - target) ? closest : point;
-  });
-};
-export var handleSides = ['left', 'right'];
-export var imageAlignmentMap = {
-  left: 'start',
-  right: 'end'
-};
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { snapTo } from './snapTo';
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { handleSides } from './handleSides';
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { imageAlignmentMap } from './imageAlignmentMap';

package/dist/esm/ui/index.js

@@ -5,17 +5,24 @@ export { AssistiveText } from './AssistiveText/AssistiveText';
 export { default as Caption } from './Caption';
 export { default as MediaSingle } from './MediaSingle';
 export { MediaSingleDimensionHelper, MediaBorderGapFiller } from './MediaSingle/styled';
-export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts } from './MediaSingle/grid';
+export { calcColumnsFromPx } from './MediaSingle/calcColumnsFromPx';
+export { calcPctFromPx } from './MediaSingle/calcPctFromPx';
+export { calcPxFromColumns } from './MediaSingle/calcPxFromColumns';
+export { calcPxFromPct } from './MediaSingle/calcPxFromPct';
+export { layoutSupportsWidth, snapToGrid, calcMediaPxWidth } from './MediaSingle/grid';
+export { wrappedLayouts } from './MediaSingle/wrappedLayouts';
 export { mediaLinkStyle } from './MediaSingle/link';
 export { default as Popup } from './Popup';
 export { findOverflowScrollParent } from './Popup/utils';
 export { default as UnsupportedBlock } from './UnsupportedBlock';
 export { default as UnsupportedInline } from './UnsupportedInline';
 export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
-export { default as withOuterListeners, PlainOutsideClickTargetRefContext } from './with-outer-listeners';
+export { PlainOutsideClickTargetRefContext } from './PlainOutsideClickTargetRefContext';
+export { default as withOuterListeners } from './with-outer-listeners';
 export { WidthContext, WidthConsumer, WidthProvider, createWidthContext, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
-export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shadowObserver';
+export { ShadowObserver } from './OverflowShadow/shadowObserver';
+export { shadowObserverClassNames } from './OverflowShadow/shadowObserverClassNames';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
@@ -28,7 +35,9 @@ export { SmallerEditIcon } from './FloatingToolbar/SmallerEditIcon';
 export { RECENT_SEARCH_WIDTH_IN_PX, RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, LINKPICKER_HEIGHT_IN_PX } from './LinkSearch/const';
 export { ContextPanelProvider, ContextPanelWidthProvider, ContextPanelConsumer, ContextPanel } from './ContextPanel/context';
 export { default as Resizer } from './ResizerLegacy';
-export { snapTo, handleSides, imageAlignmentMap } from './ResizerLegacy/utils';
+export { handleSides } from './ResizerLegacy/handleSides';
+export { imageAlignmentMap } from './ResizerLegacy/imageAlignmentMap';
+export { snapTo } from './ResizerLegacy/snapTo';
 export { wrapperStyle } from './ResizerLegacy/styled';
 export { panelTextInput } from './PanelTextInput/styles';
 export { default as PanelTextInput } from './PanelTextInput';

package/dist/esm/ui/with-outer-listeners.js

@@ -7,9 +7,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { PureComponent } from 'react';
-// Use this context to pass in the reference of the element that should be considered as the outside click target
-// The outside click target is the element that should be clicked outside of to trigger the `handleClickOutside` event
-export var PlainOutsideClickTargetRefContext = /*#__PURE__*/React.createContext(function () {});
+import { PlainOutsideClickTargetRefContext } from './PlainOutsideClickTargetRefContext';
 export default function withOuterListeners(Component) {
   return /*#__PURE__*/function (_PureComponent) {
     function WithOutsideClick() {
@@ -79,4 +77,6 @@ export default function withOuterListeners(Component) {
       }
     }]);
   }(PureComponent);
-}
+}
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { PlainOutsideClickTargetRefContext } from './PlainOutsideClickTargetRefContext';

package/dist/esm/ui-color/ColorPalette/Palettes/highlightColorPalette.js

@@ -8,8 +8,8 @@ import { jsx } from '@emotion/react';
 import { backgroundColorPalette } from '@atlaskit/adf-schema';
 import { useThemeObserver } from '@atlaskit/tokens';
 import getColorMessage from './getColorMessage';
+import { mapPaletteColor } from './mapPaletteColor';
 import paletteMessages from './paletteMessages';
-import { mapPaletteColor } from './textColorPalette';
 export var REMOVE_HIGHLIGHT_COLOR = '#00000000';
 
 // Custom icon ejection - these icons have been migrated away from the deprecated Custom / SVG components to native SVG. Please review whether this icon should be contributed to @atlaskit/icon-lab or whether it can be replaced by an existing icon from either @atlaskit/icon or @atlaskit/icon-lab
@@ -43,7 +43,6 @@ export var EditorDiagonalLineIcon = function EditorDiagonalLineIcon() {
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     jsx(DiagonalLineGlyph, {
-      "aria-label": "",
       style: {
         color: primaryColor
       }

package/dist/esm/ui-color/ColorPalette/Palettes/lightBackgroundPaletteTooltipMessages.js

@@ -0,0 +1,108 @@
+import { defineMessages } from 'react-intl';
+export var lightBackgroundPaletteTooltipMessages = defineMessages({
+  '#DEEBFF': {
+    id: 'fabric.theme.subtle-blue',
+    defaultMessage: 'Subtle blue',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the subtle blue color option.'
+  },
+  '#B3D4FF': {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the blue color option.'
+  },
+  '#4C9AFF': {
+    id: 'fabric.theme.bold-blue',
+    defaultMessage: 'Bold blue',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold blue color option.'
+  },
+  '#E6FCFF': {
+    id: 'fabric.theme.subtle-teal',
+    defaultMessage: 'Subtle teal',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the subtle teal color option.'
+  },
+  '#B3F5FF': {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the teal color option.'
+  },
+  '#79E2F2': {
+    id: 'fabric.theme.bold-teal',
+    defaultMessage: 'Bold teal',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold teal color option.'
+  },
+  '#E3FCEF': {
+    id: 'fabric.theme.subtle-green',
+    defaultMessage: 'Subtle green',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the subtle green color option.'
+  },
+  '#ABF5D1': {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the green color option.'
+  },
+  '#57D9A3': {
+    id: 'fabric.theme.bold-green',
+    defaultMessage: 'Bold green',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold green color option.'
+  },
+  '#FFFAE6': {
+    id: 'fabric.theme.subtle-yellow',
+    defaultMessage: 'Subtle yellow',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the subtle yellow color option.'
+  },
+  '#FFF0B3': {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the yellow color option.'
+  },
+  '#FFC400': {
+    id: 'fabric.theme.bold-yellow',
+    defaultMessage: 'Bold yellow',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold yellow color option.'
+  },
+  '#FFEBE6': {
+    id: 'fabric.theme.subtle-red',
+    defaultMessage: 'Subtle red',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the subtle red color option.'
+  },
+  '#FFBDAD': {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the red color option.'
+  },
+  '#FF8F73': {
+    id: 'fabric.theme.bold-red',
+    defaultMessage: 'Bold red',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold red color option.'
+  },
+  '#EAE6FF': {
+    id: 'fabric.theme.subtle-purple',
+    defaultMessage: 'Subtle purple',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the subtle purple color option.'
+  },
+  '#C0B6F2': {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the purple color option.'
+  },
+  '#998DD9': {
+    id: 'fabric.theme.bold-purple',
+    defaultMessage: 'Bold purple',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold purple color option.'
+  },
+  '#FFFFFF': {
+    id: 'fabric.theme.white',
+    defaultMessage: 'White',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the white color option.'
+  },
+  '#F4F5F7': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the gray color option.'
+  },
+  '#B3BAC5': {
+    id: 'fabric.theme.bold-gray',
+    defaultMessage: 'Bold gray',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor background color picker when the user hovers over the bold gray color option.'
+  }
+});

package/dist/esm/ui-color/ColorPalette/Palettes/lightChartsColorPaletteTooltipMessages.js

@@ -0,0 +1,192 @@
+import { defineMessages } from 'react-intl';
+export var lightChartsColorPaletteTooltipMessages = defineMessages({
+  // Blue color
+  '#7AB2FF': {
+    id: 'fabric.theme.subtle-blue',
+    defaultMessage: 'Subtle blue',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the subtle blue color option.'
+  },
+  '#247FFF': {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the blue color option.'
+  },
+  '#0055CC': {
+    id: 'fabric.theme.bold-blue',
+    defaultMessage: 'Bold blue',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bold blue color option.'
+  },
+  '#003884': {
+    id: 'fabric.theme.bolder-blue',
+    defaultMessage: 'Bolder blue',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bolder blue color option.'
+  },
+  // Teal color
+  '#60C6D2': {
+    id: 'fabric.theme.subtle-teal',
+    defaultMessage: 'Subtle teal',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the subtle teal color option.'
+  },
+  '#1D9AAA': {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the teal color option.'
+  },
+  '#1D7F8C': {
+    id: 'fabric.theme.bold-teal',
+    defaultMessage: 'Bold teal',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bold teal color option.'
+  },
+  '#206B74': {
+    id: 'fabric.theme.bolder-teal',
+    defaultMessage: 'Bolder teal',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bolder teal color option.'
+  },
+  // Green color
+  '#6BE1B0': {
+    id: 'fabric.theme.subtle-green',
+    defaultMessage: 'Subtle green',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the subtle green color option.'
+  },
+  '#23A971': {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the green color option.'
+  },
+  '#177D52': {
+    id: 'fabric.theme.bold-green',
+    defaultMessage: 'Bold green',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bold green color option.'
+  },
+  '#055C3F': {
+    id: 'fabric.theme.bolder-green',
+    defaultMessage: 'Bolder green',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bolder green color option.'
+  },
+  // Yellow color
+  '#FFDB57': {
+    id: 'fabric.theme.subtle-yellow',
+    defaultMessage: 'Subtle yellow',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the subtle yellow color option.'
+  },
+  '#FFBE33': {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the yellow color option.'
+  },
+  '#FF9D00': {
+    id: 'fabric.theme.bold-yellow',
+    defaultMessage: 'Bold yellow',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bold yellow color option.'
+  },
+  '#946104': {
+    id: 'fabric.theme.bolder-yellow',
+    defaultMessage: 'Bolder yellow',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bolder yellow color option.'
+  },
+  // Red color
+  '#FF8F73': {
+    id: 'fabric.theme.subtle-red',
+    defaultMessage: 'Subtle red',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the subtle red color option.'
+  },
+  '#FC552C': {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the red color option.'
+  },
+  '#D32D03': {
+    id: 'fabric.theme.bold-red',
+    defaultMessage: 'Bold red',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bold red color option.'
+  },
+  '#A32000': {
+    id: 'fabric.theme.bolder-red',
+    defaultMessage: 'Bolder red',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bolder red color option.'
+  },
+  // Orange color
+  '#FAA53D': {
+    id: 'fabric.theme.subtle-orange',
+    defaultMessage: 'Subtle orange',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the subtle orange color option.'
+  },
+  '#D97008': {
+    id: 'fabric.theme.orange',
+    defaultMessage: 'Orange',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the orange color option.'
+  },
+  '#B65C02': {
+    id: 'fabric.theme.bold-orange',
+    defaultMessage: 'Bold orange',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bold orange color option.'
+  },
+  '#974F0C': {
+    id: 'fabric.theme.bolder-orange',
+    defaultMessage: 'Bolder orange',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bolder orange color option.'
+  },
+  // Magenta color
+  '#E774BB': {
+    id: 'fabric.theme.subtle-magenta',
+    defaultMessage: 'Subtle magenta',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the subtle magenta color option.'
+  },
+  '#DA62AC': {
+    id: 'fabric.theme.magenta',
+    defaultMessage: 'Magenta',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the magenta color option.'
+  },
+  '#CD519D': {
+    id: 'fabric.theme.bold-magenta',
+    defaultMessage: 'Bold magenta',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bold magenta color option.'
+  },
+  '#943D73': {
+    id: 'fabric.theme.bolder-magenta',
+    defaultMessage: 'Bolder magenta',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bolder magenta color option.'
+  },
+  // Purple color
+  '#B5A7FB': {
+    id: 'fabric.theme.subtle-purple',
+    defaultMessage: 'Subtle purple',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the subtle purple color option.'
+  },
+  '#8B77EE': {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the purple color option.'
+  },
+  '#5A43D0': {
+    id: 'fabric.theme.bold-purple',
+    defaultMessage: 'Bold purple',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bold purple color option.'
+  },
+  '#44368B': {
+    id: 'fabric.theme.bolder-purple',
+    defaultMessage: 'Bolder purple',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bolder purple color option.'
+  },
+  // Gray color
+  '#8993A5': {
+    id: 'fabric.theme.subtle-gray',
+    defaultMessage: 'Subtle gray',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the subtle gray color option.'
+  },
+  '#8590A2': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the gray color option.'
+  },
+  '#758195': {
+    id: 'fabric.theme.bold-gray',
+    defaultMessage: 'Bold gray',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bold gray color option.'
+  },
+  '#44546F': {
+    id: 'fabric.theme.bolder-gray',
+    defaultMessage: 'Bolder gray',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor charts color picker when the user hovers over the bolder gray color option.'
+  }
+});

package/dist/esm/ui-color/ColorPalette/Palettes/lightTextPaletteTooltipMessages.js

@@ -0,0 +1,110 @@
+import { defineMessages } from 'react-intl';
+
+// These messages are only to be used when showSomewhatSemanticTooltips is true.
+export var lightTextPaletteTooltipMessages = defineMessages({
+  '#FFFFFF': {
+    id: 'fabric.theme.white',
+    defaultMessage: 'White',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the white color option.'
+  },
+  '#B3D4FF': {
+    id: 'fabric.theme.subtle-blue',
+    defaultMessage: 'Subtle blue',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the subtle blue color option.'
+  },
+  '#B3F5FF': {
+    id: 'fabric.theme.subtle-teal',
+    defaultMessage: 'Subtle teal',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the subtle teal color option.'
+  },
+  '#ABF5D1': {
+    id: 'fabric.theme.subtle-green',
+    defaultMessage: 'Subtle green',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the subtle green color option.'
+  },
+  '#FFF0B3': {
+    id: 'fabric.theme.subtle-yellow',
+    defaultMessage: 'Subtle yellow',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the subtle yellow color option.'
+  },
+  '#FFBDAD': {
+    id: 'fabric.theme.subtle-red',
+    defaultMessage: 'Subtle red',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the subtle red color option.'
+  },
+  '#EAE6FF': {
+    id: 'fabric.theme.subtle-purple',
+    defaultMessage: 'Subtle purple',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the subtle purple color option.'
+  },
+  '#97A0AF': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the gray color option.'
+  },
+  '#4C9AFF': {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the blue color option.'
+  },
+  '#00B8D9': {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the teal color option.'
+  },
+  '#36B37E': {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the green color option.'
+  },
+  '#FFC400': {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the yellow color option.'
+  },
+  '#FF5630': {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the red color option.'
+  },
+  '#FF991F': {
+    id: 'fabric.theme.bold-orange',
+    defaultMessage: 'Bold orange',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the bold orange color option.'
+  },
+  '#6554C0': {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the purple color option.'
+  },
+  '#0747A6': {
+    id: 'fabric.theme.bold-blue',
+    defaultMessage: 'Bold blue',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the bold blue color option.'
+  },
+  '#008DA6': {
+    id: 'fabric.theme.bold-teal',
+    defaultMessage: 'Bold teal',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the bold teal color option.'
+  },
+  '#006644': {
+    id: 'fabric.theme.bold-green',
+    defaultMessage: 'Bold green',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the bold green color option.'
+  },
+  '#BF2600': {
+    id: 'fabric.theme.bold-red',
+    defaultMessage: 'Bold red',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the bold red color option.'
+  },
+  '#403294': {
+    id: 'fabric.theme.bold-purple',
+    defaultMessage: 'Bold purple',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the bold purple color option.'
+  },
+  '#172B4D': {
+    id: 'fabric.theme.default',
+    defaultMessage: 'Default',
+    description: 'The text is shown as a tooltip label for a color swatch in the editor text color picker when the user hovers over the default color option.'
+  }
+});

package/dist/esm/ui-color/ColorPalette/Palettes/mapPaletteColor.js

@@ -0,0 +1,12 @@
+import getColorMessage from './getColorMessage';
+import paletteMessages from './paletteMessages';
+export var mapPaletteColor = function mapPaletteColor(label, color) {
+  var key = label.toLowerCase().replace(' ', '-');
+  var message = getColorMessage(paletteMessages, key);
+  return {
+    value: color,
+    label: label,
+    border: "var(--ds-border, #0B120E24)",
+    message: message
+  };
+};