@atlaskit/editor-common 115.6.0 → 115.7.1

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

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { ShadowObserver, shadowObserverClassNames } from './shadowObserver';
+import { ShadowObserver } from './shadowObserver';
+import { shadowObserverClassNames } from './shadowObserverClassNames';
 export const shadowClassNames = {
   RIGHT_SHADOW: 'right-shadow',
   LEFT_SHADOW: 'left-shadow'

package/dist/es2019/ui/OverflowShadow/shadowObserver.js

@@ -1,15 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-export let ShadowKeys = /*#__PURE__*/function (ShadowKeys) {
-  ShadowKeys["SHOW_LEFT_SHADOW"] = "showLeftShadow";
-  ShadowKeys["SHOW_RIGHT_SHADOW"] = "showRightShadow";
-  return ShadowKeys;
-}({});
-export const shadowObserverClassNames = {
-  SENTINEL_LEFT: 'sentinel-left',
-  SENTINEL_RIGHT: 'sentinel-right',
-  SHADOW_CONTAINER: 'with-shadow-observer'
-};
+import { ShadowKeys } from './ShadowKeys';
+import { shadowObserverClassNames } from './shadowObserverClassNames';
 const requestIdleCallback = fn => {
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -83,4 +75,8 @@ export class ShadowObserver {
       this.sentinels = {};
     }
   }
-}
+}
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { ShadowKeys } from './ShadowKeys';
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { shadowObserverClassNames } from './shadowObserverClassNames';

package/dist/es2019/ui/OverflowShadow/shadowObserverClassNames.js

@@ -0,0 +1,5 @@
+export const shadowObserverClassNames = {
+  SENTINEL_LEFT: 'sentinel-left',
+  SENTINEL_RIGHT: 'sentinel-right',
+  SHADOW_CONTAINER: 'with-shadow-observer'
+};

package/dist/es2019/ui/PlainOutsideClickTargetRefContext.js

@@ -0,0 +1,5 @@
+import React 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 const PlainOutsideClickTargetRefContext = /*#__PURE__*/React.createContext(() => {});

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

@@ -7,8 +7,10 @@ import { createPortal, flushSync } from 'react-dom';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { calculatePlacement, calculatePosition, findOverflowScrollParent, validatePosition } from './utils';
+import { calculatePlacement, calculatePosition, findOverflowScrollParent } from './utils';
+import { validatePosition } from './validatePosition';
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export default class Popup extends React.Component {
@@ -53,7 +55,7 @@ export default class Popup extends React.Component {
         ...defaultTrapConfig,
         ...this.props.focusTrap
       };
-      this.focusTrap = createFocusTrap(popup, editorExperiment('platform_editor_block_menu', true) ? trapConfig : defaultTrapConfig);
+      this.focusTrap = createFocusTrap(popup, editorExperiment('platform_editor_block_menu', true) || expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) ? trapConfig : defaultTrapConfig);
       this.focusTrap.activate();
     }));
   }
@@ -82,7 +84,9 @@ export default class Popup extends React.Component {
     if (!target || !popup) {
       return {};
     }
-    const placement = calculatePlacement(target, boundariesElement || document.body, fitWidth, fitHeight, alignX, alignY, forcePlacement, preventOverflow);
+    const placement = calculatePlacement(target,
+    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- Existing Popup positioning fallback; keep unchanged for safety.
+    boundariesElement || document.body, fitWidth, fitHeight, alignX, alignY, forcePlacement, preventOverflow);
     if (onPlacementChanged && this.placement.join('') !== placement.join('')) {
       onPlacementChanged(placement);
       this.placement = placement;
@@ -97,6 +101,7 @@ export default class Popup extends React.Component {
       offset: offset,
       allowOutOfBounds,
       rect,
+      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- Existing Popup positioning fallback; keep unchanged for safety.
       boundariesElement: boundariesElement || document.body,
       minPopupMargin,
       scrollableElement: stick && (expValEquals('platform_editor_fix_scrolling_popup_position', 'isEnabled', true) || expValEquals('create_work_item_modernization_exp', 'isEnabled', true)) ? this.scrollElement : undefined
@@ -145,7 +150,9 @@ export default class Popup extends React.Component {
      * Currently Popup isn't capable of position itself correctly in case 2,
      * Add "position: relative" to "overflow: scroll" container or to some other FloatingPanel wrapper inside it.
      */
-    return !target || document.body.contains(target) && popup.offsetParent &&
+    return !target ||
+    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- Existing Popup containment check; keep unchanged for safety.
+    document.body.contains(target) && popup.offsetParent &&
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     !popup.offsetParent.contains(target) || overflowScrollParent && !overflowScrollParent.contains(popup.offsetParent);

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

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

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

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

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

@@ -1,10 +1,5 @@
-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.
  */
@@ -329,13 +324,6 @@ export function calculatePosition({
   };
   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".
@@ -366,4 +354,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/es2019/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/es2019/ui/ResizerLegacy/handleSides.js

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

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

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

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

@@ -6,7 +6,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';
 const getResizeAnalyticsEvent = (type, size, layout) => {
   const actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
   return {

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

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

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

@@ -1,12 +1,6 @@
-export const snapTo = (target, points) => {
-  return points.length === 0 ?
-  // extreme last case if there are no points somehow
-  target : points.reduce((point, closest) => {
-    return Math.abs(closest - target) < Math.abs(point - target) ? closest : point;
-  });
-};
-export const handleSides = ['left', 'right'];
-export const 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/es2019/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/es2019/ui/with-outer-listeners.js

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 const PlainOutsideClickTargetRefContext = /*#__PURE__*/React.createContext(() => {});
+import { PlainOutsideClickTargetRefContext } from './PlainOutsideClickTargetRefContext';
 export default function withOuterListeners(Component) {
   return class WithOutsideClick extends PureComponent {
     constructor(...args) {
@@ -58,4 +56,6 @@ export default function withOuterListeners(Component) {
       , this.props));
     }
   };
-}
+}
+// eslint-disable-next-line @atlaskit/editor/no-re-export
+export { PlainOutsideClickTargetRefContext } from './PlainOutsideClickTargetRefContext';

package/dist/es2019/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 const 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
@@ -42,7 +42,6 @@ export const 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/es2019/ui-color/ColorPalette/Palettes/lightBackgroundPaletteTooltipMessages.js

@@ -0,0 +1,108 @@
+import { defineMessages } from 'react-intl';
+export const 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/es2019/ui-color/ColorPalette/Palettes/lightChartsColorPaletteTooltipMessages.js

@@ -0,0 +1,192 @@
+import { defineMessages } from 'react-intl';
+export const 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.'
+  }
+});