@atlaskit/editor-common 69.2.1 → 69.3.0

package/dist/esm/ui/Layer/internal/helpers.js

@@ -0,0 +1,62 @@
+var positionMap = {
+  'top left': {
+    position: 'top-start',
+    animation: 'top'
+  },
+  'top center': {
+    position: 'top',
+    animation: 'top'
+  },
+  'top right': {
+    position: 'top-end',
+    animation: 'top'
+  },
+  'right top': {
+    position: 'right-start',
+    animation: 'right'
+  },
+  'right middle': {
+    position: 'right',
+    animation: 'right'
+  },
+  'right bottom': {
+    position: 'right-end',
+    animation: 'right'
+  },
+  'bottom left': {
+    position: 'bottom-start',
+    animation: 'bottom'
+  },
+  'bottom center': {
+    position: 'bottom',
+    animation: 'bottom'
+  },
+  'bottom right': {
+    position: 'bottom-end',
+    animation: 'bottom'
+  },
+  'left top': {
+    position: 'left-start',
+    animation: 'left'
+  },
+  'left middle': {
+    position: 'left',
+    animation: 'left'
+  },
+  'left bottom': {
+    position: 'left-end',
+    animation: 'left'
+  }
+};
+export var POSITION_ATTRIBUTE_ENUM = {
+  values: ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom left', 'bottom center', 'bottom right', 'left top', 'left middle', 'left bottom'],
+  default: 'right middle'
+};
+
+function positionToPopper(position) {
+  return position && positionMap[position] ? positionMap[position].position : null;
+}
+
+export function positionPropToPopperPosition(position) {
+  return positionToPopper(position) || positionMap[POSITION_ATTRIBUTE_ENUM.default].position;
+}

package/dist/esm/ui/PortalProvider/PortalProviderThemesProvider.js

@@ -0,0 +1,43 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { ThemeProvider } from '@emotion/react';
+import AtlaskitTheme from '@atlaskit/theme/components';
+import { CHANNEL } from '@atlaskit/theme/constants';
+export function PortalProviderThemeProviders(props) {
+  var children = props.children,
+      mode = props.mode;
+  var styledComponentsAndEmotionTheme = React.useMemo( // This return value should only be one of the following
+  // - { [CHANNEL]: { mode },
+  // - { theme: { [CHANNEL]: { mode } }
+  // However, it appears that consumers have inconsistent expectations
+  // regarding the shape.
+  // This can be revisited in future work, and for the purposes of
+  // fixing https://product-fabric.atlassian.net/browse/ED-14956
+  // we are merging the two shapes consumers expect.
+  function () {
+    var _ref;
+
+    return _ref = {}, _defineProperty(_ref, CHANNEL, {
+      mode: mode
+    }), _defineProperty(_ref, "theme", _defineProperty({}, CHANNEL, {
+      mode: mode
+    })), _ref;
+  }, [mode]);
+  var atlaskitTheme = React.useCallback(function () {
+    return {
+      mode: mode
+    };
+  }, [mode]);
+  return (
+    /*#__PURE__*/
+    // TODO: ED-15585
+    // import { ThemeProvider as DeprectateStyledComponentsProvider } from 'styled-components';
+    // <DeprectateStyledComponentsProvider theme={styledComponentsAndEmotionTheme}>
+    // </DeprectateStyledComponentsProvider>
+    React.createElement(ThemeProvider, {
+      theme: styledComponentsAndEmotionTheme
+    }, /*#__PURE__*/React.createElement(AtlaskitTheme.Provider, {
+      value: atlaskitTheme
+    }, children))
+  );
+}

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

@@ -0,0 +1,275 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import { createPortal, unmountComponentAtNode, unstable_renderSubtreeIntoContainer } from 'react-dom';
+import { injectIntl, RawIntlProvider, useIntl } from 'react-intl-next';
+import { default as AnalyticsReactContext } from '@atlaskit/analytics-next-stable-react-context';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
+import { EventDispatcher } from '../../event-dispatcher';
+import { PortalProviderThemeProviders } from './PortalProviderThemesProvider';
+export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
+  _inherits(PortalProviderAPI, _EventDispatcher);
+
+  var _super = _createSuper(PortalProviderAPI);
+
+  function PortalProviderAPI(intl, onAnalyticsEvent, analyticsContext, themeMode) {
+    var _this;
+
+    _classCallCheck(this, PortalProviderAPI);
+
+    _this = _super.call(this);
+
+    _defineProperty(_assertThisInitialized(_this), "portals", new Map());
+
+    _defineProperty(_assertThisInitialized(_this), "setContext", function (context) {
+      _this.context = context;
+    });
+
+    _this.intl = intl;
+    _this.onAnalyticsEvent = onAnalyticsEvent;
+    _this.useAnalyticsContext = analyticsContext;
+    _this.themeMode = themeMode;
+    return _this;
+  }
+
+  _createClass(PortalProviderAPI, [{
+    key: "render",
+    value: function render(children, container) {
+      var _this2 = this;
+
+      var hasAnalyticsContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var hasIntlContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      this.portals.set(container, {
+        children: children,
+        hasAnalyticsContext: hasAnalyticsContext,
+        hasIntlContext: hasIntlContext
+      });
+
+      var childrenWithThemeProviders = function childrenWithThemeProviders() {
+        return /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+          mode: _this2.themeMode
+        }, children());
+      };
+
+      var wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders()) : childrenWithThemeProviders();
+
+      if (hasIntlContext) {
+        wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
+          value: this.intl
+        }, wrappedChildren);
+      }
+
+      unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container);
+    } // TODO: until https://product-fabric.atlassian.net/browse/ED-5013
+    // we (unfortunately) need to re-render to pass down any updated context.
+    // selectively do this for nodeviews that opt-in via `hasAnalyticsContext`
+
+  }, {
+    key: "forceUpdate",
+    value: function forceUpdate(_ref) {
+      var _this3 = this;
+
+      var intl = _ref.intl,
+          themeMode = _ref.themeMode;
+      this.intl = intl;
+      this.themeMode = themeMode;
+      this.portals.forEach(function (portal, container) {
+        if (!portal.hasAnalyticsContext && !_this3.useAnalyticsContext && !portal.hasIntlContext) {
+          return;
+        }
+
+        var wrappedChildren = portal.children();
+
+        var childrenWithThemeProviders = function childrenWithThemeProviders() {
+          return /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+            mode: themeMode
+          }, wrappedChildren);
+        };
+
+        if (portal.hasAnalyticsContext && _this3.useAnalyticsContext) {
+          wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders());
+        }
+
+        if (portal.hasIntlContext) {
+          wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
+            value: _this3.intl
+          }, childrenWithThemeProviders());
+        }
+
+        unstable_renderSubtreeIntoContainer(_this3.context, wrappedChildren, container);
+      });
+    }
+  }, {
+    key: "remove",
+    value: function remove(container) {
+      this.portals.delete(container); // There is a race condition that can happen caused by Prosemirror vs React,
+      // where Prosemirror removes the container from the DOM before React gets
+      // around to removing the child from the container
+      // This will throw a NotFoundError: The node to be removed is not a child of this node
+      // Both Prosemirror and React remove the elements asynchronously, and in edge
+      // cases Prosemirror beats React
+
+      try {
+        unmountComponentAtNode(container);
+      } catch (error) {
+        if (this.onAnalyticsEvent) {
+          this.onAnalyticsEvent({
+            payload: {
+              action: ACTION.FAILED_TO_UNMOUNT,
+              actionSubject: ACTION_SUBJECT.EDITOR,
+              actionSubjectId: ACTION_SUBJECT_ID.REACT_NODE_VIEW,
+              attributes: {
+                error: error,
+                domNodes: {
+                  container: container ? container.className : undefined,
+                  child: container.firstElementChild ? container.firstElementChild.className : undefined
+                }
+              },
+              eventType: EVENT_TYPE.OPERATIONAL
+            }
+          });
+        }
+      }
+    }
+  }]);
+
+  return PortalProviderAPI;
+}(EventDispatcher);
+
+var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
+  _inherits(BasePortalProvider, _React$Component);
+
+  var _super2 = _createSuper(BasePortalProvider);
+
+  function BasePortalProvider(props) {
+    var _this4;
+
+    _classCallCheck(this, BasePortalProvider);
+
+    _this4 = _super2.call(this, props);
+    _this4.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
+    return _this4;
+  }
+
+  _createClass(BasePortalProvider, [{
+    key: "render",
+    value: function render() {
+      return this.props.render(this.portalProviderAPI);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.portalProviderAPI.forceUpdate({
+        intl: this.props.intl,
+        themeMode: this.props.themeMode
+      });
+    }
+  }]);
+
+  return BasePortalProvider;
+}(React.Component);
+
+_defineProperty(BasePortalProvider, "displayName", 'PortalProvider');
+
+export var PortalProvider = injectIntl(BasePortalProvider);
+export var PortalProviderWithThemeProviders = function PortalProviderWithThemeProviders(props) {
+  var intl = useIntl();
+  var globalTheme = useGlobalTheme();
+  return /*#__PURE__*/React.createElement(BasePortalProvider, {
+    intl: intl,
+    themeMode: globalTheme.mode,
+    onAnalyticsEvent: props.onAnalyticsEvent,
+    useAnalyticsContext: props.useAnalyticsContext,
+    render: props.render
+  });
+};
+export var PortalRenderer = /*#__PURE__*/function (_React$Component2) {
+  _inherits(PortalRenderer, _React$Component2);
+
+  var _super3 = _createSuper(PortalRenderer);
+
+  function PortalRenderer(props) {
+    var _this5;
+
+    _classCallCheck(this, PortalRenderer);
+
+    _this5 = _super3.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this5), "handleUpdate", function (portals) {
+      return _this5.setState({
+        portals: portals
+      });
+    });
+
+    props.portalProviderAPI.setContext(_assertThisInitialized(_this5));
+    props.portalProviderAPI.on('update', _this5.handleUpdate);
+    _this5.state = {
+      portals: new Map()
+    };
+    return _this5;
+  }
+
+  _createClass(PortalRenderer, [{
+    key: "render",
+    value: function render() {
+      var portals = this.state.portals;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(portals.entries()).map(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+            container = _ref3[0],
+            children = _ref3[1];
+
+        return /*#__PURE__*/createPortal(children, container);
+      }));
+    }
+  }]);
+
+  return PortalRenderer;
+}(React.Component);
+/**
+ * Wrapper to re-provide modern analytics context to ReactNodeViews.
+ */
+
+var dummyAnalyticsContext = {
+  getAtlaskitAnalyticsContext: function getAtlaskitAnalyticsContext() {},
+  getAtlaskitAnalyticsEventHandlers: function getAtlaskitAnalyticsEventHandlers() {}
+};
+
+var AnalyticsContextWrapper = /*#__PURE__*/function (_React$Component3) {
+  _inherits(AnalyticsContextWrapper, _React$Component3);
+
+  var _super4 = _createSuper(AnalyticsContextWrapper);
+
+  function AnalyticsContextWrapper() {
+    _classCallCheck(this, AnalyticsContextWrapper);
+
+    return _super4.apply(this, arguments);
+  }
+
+  _createClass(AnalyticsContextWrapper, [{
+    key: "render",
+    value: function render() {
+      var _ref4 = this.context.contextAdapter.analytics || {
+        value: dummyAnalyticsContext
+      },
+          value = _ref4.value;
+
+      return /*#__PURE__*/React.createElement(AnalyticsReactContext.Provider, {
+        value: value
+      }, this.props.children);
+    }
+  }]);
+
+  return AnalyticsContextWrapper;
+}(React.Component);

package/dist/esm/ui-color/ColorPalette/Color/index.js

@@ -0,0 +1,93 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/** @jsx jsx */
+import React, { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
+import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
+import { N0 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { buttonStyle, buttonWrapperStyle } from './styles';
+
+var Color = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Color, _PureComponent);
+
+  var _super = _createSuper(Color);
+
+  function Color() {
+    var _this;
+
+    _classCallCheck(this, Color);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (e) {
+      e.preventDefault();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onClick", function (e) {
+      var _this$props = _this.props,
+          onClick = _this$props.onClick,
+          value = _this$props.value,
+          label = _this$props.label;
+      e.preventDefault();
+      onClick(value, label);
+    });
+
+    return _this;
+  }
+
+  _createClass(Color, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          autoFocus = _this$props2.autoFocus,
+          tabIndex = _this$props2.tabIndex,
+          value = _this$props2.value,
+          label = _this$props2.label,
+          isSelected = _this$props2.isSelected,
+          borderColor = _this$props2.borderColor,
+          _this$props2$checkMar = _this$props2.checkMarkColor,
+          checkMarkColor = _this$props2$checkMar === void 0 ? N0 : _this$props2$checkMar;
+      return jsx(Tooltip, {
+        content: label
+      }, jsx("span", {
+        css: buttonWrapperStyle
+      }, jsx("button", {
+        css: buttonStyle,
+        "aria-label": label,
+        role: "radio",
+        "aria-checked": isSelected,
+        onClick: this.onClick,
+        onMouseDown: this.onMouseDown,
+        tabIndex: tabIndex,
+        className: "".concat(isSelected ? 'selected' : ''),
+        style: {
+          backgroundColor: value || 'transparent',
+          border: "1px solid ".concat(borderColor)
+        },
+        autoFocus: autoFocus
+      }, isSelected && jsx(EditorDoneIcon, {
+        primaryColor: checkMarkColor,
+        label: ""
+      }))));
+    }
+  }]);
+
+  return Color;
+}(PureComponent);
+
+export default Color;

package/dist/esm/ui-color/ColorPalette/Color/styles.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import { css } from '@emotion/react';
+import { N0, N50, N900 } from '@atlaskit/theme/colors';
+/** this is not new usage - old code extracted from editor-core */
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+export var buttonStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 26px;\n  width: 26px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), N900, N0);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+/** this is not new usage - old code extracted from editor-core */
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+export var buttonWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border-color: ", ";\n  }\n"])), N50);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

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

@@ -0,0 +1,15 @@
+import { tableBackgroundBorderColor, tableBackgroundColorPalette } from '@atlaskit/adf-schema';
+import getColorMessage from './getColorMessage';
+import paletteMessages from './paletteMessages';
+var cellBackgroundColorPalette = [];
+tableBackgroundColorPalette.forEach(function (label, color) {
+  var key = label.toLowerCase().replace(' ', '-');
+  var message = getColorMessage(paletteMessages, key);
+  cellBackgroundColorPalette.push({
+    value: color,
+    label: label,
+    border: tableBackgroundBorderColor,
+    message: message
+  });
+});
+export default cellBackgroundColorPalette;

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

@@ -0,0 +1,24 @@
+import chromatism from 'chromatism';
+import { N800 } from '@atlaskit/theme/colors';
+/**
+ * For a given color set the alpha channel to alpha
+ *
+ * @param color color string, suppports HEX, RGB, RGBA etc.
+ * @param alpha Alpha channel value as fraction of 1
+ * @return CSS RGBA string with applied alpha channel
+ */
+
+function setAlpha(color, alpha) {
+  var _chromatism$convert$r = chromatism.convert(color).rgb,
+      r = _chromatism$convert$r.r,
+      g = _chromatism$convert$r.g,
+      b = _chromatism$convert$r.b;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+}
+/** this is not new usage - old code extracted from editor-core */
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+
+export var DEFAULT_BORDER_COLOR = setAlpha(N800, 0.12);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

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

@@ -0,0 +1,10 @@
+export default function getColorMessage(messages, color) {
+  var message = messages[color];
+
+  if (!message) {
+    // eslint-disable-next-line no-console
+    console.warn("Text color palette does not have an internationalization message for color ".concat(color.toUpperCase(), ".\nYou must add a message description to properly translate this color.\nUsing current label as default message.\nThis could have happen when someone changed the 'colorPalette' from 'adf-schema' without updating this file.\n"));
+  }
+
+  return message;
+}

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

@@ -0,0 +1 @@
+export { DEFAULT_BORDER_COLOR } from './common';

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

@@ -0,0 +1,113 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  white: {
+    id: 'fabric.theme.white',
+    defaultMessage: 'White',
+    description: 'Name of a color'
+  },
+  'light-blue': {
+    id: 'fabric.theme.light-blue',
+    defaultMessage: 'Light blue',
+    description: 'Name of a color'
+  },
+  'light-teal': {
+    id: 'fabric.theme.light-teal',
+    defaultMessage: 'Light teal',
+    description: 'Name of a color'
+  },
+  'light-green': {
+    id: 'fabric.theme.light-green',
+    defaultMessage: 'Light green',
+    description: 'Name of a color'
+  },
+  'light-yellow': {
+    id: 'fabric.theme.light-yellow',
+    defaultMessage: 'Light yellow',
+    description: 'Name of a color'
+  },
+  'light-red': {
+    id: 'fabric.theme.light-red',
+    defaultMessage: 'Light red',
+    description: 'Name of a color'
+  },
+  'light-purple': {
+    id: 'fabric.theme.light-purple',
+    defaultMessage: 'Light purple',
+    description: 'Name of a color'
+  },
+  'light-gray': {
+    id: 'fabric.theme.light-gray',
+    defaultMessage: 'Light gray',
+    description: 'Name of a color'
+  },
+  blue: {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'Name of a color'
+  },
+  teal: {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'Name of a color'
+  },
+  green: {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'Name of a color'
+  },
+  yellow: {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Name of a color'
+  },
+  red: {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'Name of a color'
+  },
+  orange: {
+    id: 'fabric.theme.orange',
+    defaultMessage: 'Orange',
+    description: 'Name of a color.'
+  },
+  purple: {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'Name of a color'
+  },
+  gray: {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'Name of a color'
+  },
+  'dark-blue': {
+    id: 'fabric.theme.dark-blue',
+    defaultMessage: 'Dark blue',
+    description: 'Name of a color'
+  },
+  'dark-teal': {
+    id: 'fabric.theme.dark-teal',
+    defaultMessage: 'Dark teal',
+    description: 'Name of a color'
+  },
+  'dark-green': {
+    id: 'fabric.theme.dark-green',
+    defaultMessage: 'Dark green',
+    description: 'Name of a color'
+  },
+  'dark-yellow': {
+    id: 'fabric.theme.dark-yellow',
+    defaultMessage: 'Dark yellow',
+    description: 'Name of a color'
+  },
+  'dark-red': {
+    id: 'fabric.theme.dark-red',
+    defaultMessage: 'Dark red',
+    description: 'Name of a color'
+  },
+  'dark-purple': {
+    id: 'fabric.theme.dark-purple',
+    defaultMessage: 'Dark purple',
+    description: 'Name of a color'
+  }
+});