@atlaskit/status 5.10.1 → 5.11.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/status
 
+## 5.11.0
+
+### Minor Changes
+
+- [`30567ec57fc8c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/30567ec57fc8c) -
+  [ux] Add an optional `palette` prop to `StatusPicker` (`'default' | 'extended'`). `extended`
+  offers ten colours instead of six and can emit hex values through `onColorClick`; `default` is
+  unchanged, so existing consumers keep today's six named colours. Status colours now come from a
+  single registry, and `Status` renders hex behind `platform_editor_gracefully_render_status_color`.
+  The ten-colour picker is rolled out by `platform_editor_update_status_colors` in
+  `@atlaskit/editor-plugin-status`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.10.1
 
 ### Patch Changes

package/dist/cjs/components/Status.js

@@ -21,18 +21,15 @@ var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge/lozenge"));
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _analytics = require("./analytics");
 var _constants = require("./constants");
+var _statusColors = require("./status-colors");
 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); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
-var colorToLozengeAppearanceMap = {
-  neutral: 'neutral',
-  purple: 'discovery',
-  blue: 'information',
-  red: 'danger',
-  yellow: 'warning',
-  green: 'success'
-};
-var DEFAULT_APPEARANCE = 'neutral';
+/**
+ * What the ADF `color` attribute can hold. `HexColor` is the closed set we persist — do
+ * not substitute it here, or graceful rendering of unknown hex becomes a type error.
+ */
+
 var MAX_WIDTH = 200;
 
 /**
@@ -108,7 +105,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
       if (text.trim().length === 0) {
         return null;
       }
-      var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE;
+      var appearance = (0, _statusColors.getLozengeAppearance)(color);
       // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
       return /*#__PURE__*/React.createElement("span", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -121,7 +118,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
         onBlur: this.handleBlur,
         tabIndex: onClick ? -1 : undefined,
         "data-node-type": "status",
-        "data-color": color,
+        "data-color": (0, _statusColors.normalizeColor)(color),
         "data-style": style,
         role: role
       }, /*#__PURE__*/React.createElement(_lozenge.default, {

package/dist/cjs/components/StatusPicker.js

@@ -23,6 +23,12 @@ var _i18n = require("./i18n");
 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); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
+/**
+ * Which set of selectable values the picker offers.
+ * - `default`: the six named colours.
+ * - `extended`: ten colours; hues without an existing name are persisted as hex.
+ */
+
 var fieldTextWrapperStyles = null;
 
 // Keep the existing content position while reserving space inside the scrollport for focus rings.
@@ -74,12 +80,14 @@ var Picker = /*#__PURE__*/function (_PureComponent) {
         onColorClick = _this$props.onColorClick,
         onColorHover = _this$props.onColorHover,
         intl = _this$props.intl,
-        scrollableContent = _this$props.scrollableContent;
+        scrollableContent = _this$props.scrollableContent,
+        palette = _this$props.palette;
       var colorPalette = /*#__PURE__*/_react.default.createElement(_colorPalette.default, {
         key: this.colorPaletteKey,
         onClick: onColorClick,
         onHover: onColorHover,
-        selectedColor: selectedColor
+        selectedColor: selectedColor,
+        palette: palette
       });
 
       // Using <React.Fragment> instead of [] to workaround Enzyme

package/dist/cjs/components/analytics.js

@@ -10,7 +10,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ELEMENTS_CHANNEL = exports.ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "5.10.0";
+var packageVersion = "5.10.1";
 var createStatusAnalyticsAndFire = exports.createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

package/dist/cjs/components/i18n.js

@@ -8,8 +8,8 @@ var _reactIntl = require("react-intl");
 var messages = exports.messages = (0, _reactIntl.defineMessages)({
   neutralColor: {
     id: 'fabric.status.color.grey',
-    defaultMessage: 'Grey',
-    description: 'Tooltip for the grey color in color palette'
+    defaultMessage: 'Gray',
+    description: 'Tooltip for the gray color in color palette'
   },
   purpleColor: {
     id: 'fabric.status.color.purple',
@@ -36,6 +36,26 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
     defaultMessage: 'Green',
     description: 'Tooltip for the green color in color palette'
   },
+  tealColor: {
+    id: 'fabric.status.color.teal',
+    defaultMessage: 'Teal',
+    description: 'Tooltip for the teal color in color palette'
+  },
+  limeColor: {
+    id: 'fabric.status.color.lime',
+    defaultMessage: 'Lime',
+    description: 'Tooltip for the lime color in color palette'
+  },
+  orangeColor: {
+    id: 'fabric.status.color.orange',
+    defaultMessage: 'Orange',
+    description: 'Tooltip for the orange color in color palette'
+  },
+  magentaColor: {
+    id: 'fabric.status.color.magenta',
+    defaultMessage: 'Magenta',
+    description: 'Tooltip for the magenta color in color palette'
+  },
   statusInputLabel: {
     id: 'fabric.status.input.label',
     defaultMessage: 'Set a status',

package/dist/cjs/components/internal/color-palette.js

@@ -13,12 +13,29 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useThemeObserver2 = require("@atlaskit/tokens/use-theme-observer");
+var _statusColors = require("../status-colors");
 var _color = _interopRequireDefault(require("./color"));
 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 paletteLegacy = [['neutral', "var(--ds-background-neutral, #0515240F)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery, #F8EEFE)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon-discovery, #AF59E1)"], ['blue', "var(--ds-background-information, #E9F2FE)", "var(--ds-border-information, #357DE8)", "var(--ds-icon-information, #357DE8)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon-warning, #E06C00)"], ['green', "var(--ds-background-success, #EFFFD6)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon-success, #6A9A23)"]];
 var paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-pressed, #ADCBFB)", "var(--ds-border-information, #357DE8)", "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-pressed, #BDE97C)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-pressed, #FBD779)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-pressed, #FFB8B2)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-pressed, #E3BDFA)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon, #292A2E)"]];
 var paletteTeam26 = [['neutral', "var(--ds-background-neutral, #0515240F)", '#CACBCF', '#63666B', "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-subtler, #CFE1FD)", '#8FB8F6', '#1558BC', "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-subtler, #D3F1A7)", '#B3DF72', '#4C6B1F', "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-subtler, #FCE4A6)", '#FBC828', '#9E4C00', "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-subtler, #FFD5D2)", '#FD9891', '#AE2E24', "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-subtler, #EED7FC)", '#D8A0F7', '#803FA5', "var(--ds-icon, #292A2E)"]];
+// Derived from the status colour registry so the swatch list, the Lozenge appearances
+// and the i18n keys cannot drift apart. See COLORS.
+var paletteHex = _statusColors.PICKER_SWATCHES.flatMap(function (value) {
+  var swatch = _statusColors.COLORS[value].swatch;
+  return swatch ? [[value, swatch.backgroundColor, swatch.borderColor, _statusColors.SWATCH_ICON_COLOR]] : [];
+});
+
+/** Columns each variant is laid out in; `extended` wraps its ten swatches onto two rows. */
+var variantToCols = {
+  default: 7,
+  extended: 5
+};
 var getPalette = function getPalette(colorMode) {
+  var variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+  if (variant === 'extended') {
+    return paletteHex;
+  }
   if ((0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')) {
     var isDark = colorMode === 'dark';
     return paletteTeam26.map(function (_ref) {
@@ -37,15 +54,17 @@ var getPalette = function getPalette(colorMode) {
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 var colorPaletteWrapperStyles = null;
 var _default = exports.default = function _default(_ref3) {
-  var _ref3$cols = _ref3.cols,
-    cols = _ref3$cols === void 0 ? 7 : _ref3$cols,
+  var cols = _ref3.cols,
     onClick = _ref3.onClick,
     selectedColor = _ref3.selectedColor,
     className = _ref3.className,
-    onHover = _ref3.onHover;
+    onHover = _ref3.onHover,
+    _ref3$palette = _ref3.palette,
+    variant = _ref3$palette === void 0 ? 'default' : _ref3$palette;
   var _useThemeObserver = (0, _useThemeObserver2.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
-  var palette = getPalette(colorMode);
+  var palette = getPalette(colorMode, variant);
+  var resolvedCols = cols !== null && cols !== void 0 ? cols : variantToCols[variant];
   var colorRefs = (0, _react.useRef)([]);
   (0, _react.useEffect)(function () {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
@@ -82,7 +101,7 @@ var _default = exports.default = function _default(_ref3) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: (0, _runtime.ax)(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", className]),
     style: {
-      maxWidth: cols * 32
+      maxWidth: resolvedCols * 32
     }
   }, palette.map(function (_ref4, i) {
     var _ref5 = (0, _slicedToArray2.default)(_ref4, 4),
@@ -98,7 +117,7 @@ var _default = exports.default = function _default(_ref3) {
       iconColor: iconColor,
       onClick: onClick,
       onHover: onHover,
-      isSelected: colorValue === selectedColor,
+      isSelected: (0, _statusColors.isSwatchSelected)(colorValue, selectedColor),
       tabIndex: i === 0 ? 0 : -1,
       setRef: function setRef(el) {
         return colorRefs.current[i] = el;

package/dist/cjs/components/internal/color.js

@@ -22,6 +22,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _reactIntl = require("react-intl");
 var _constants = require("../constants");
 var _i18n = require("../i18n");
+var _statusColors = require("../status-colors");
 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); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
@@ -77,7 +78,7 @@ var Color = exports.default = /*#__PURE__*/function (_PureComponent) {
         onKeyDown = _this$props2.onKeyDown;
       return /*#__PURE__*/React.createElement("li", {
         className: (0, _runtime.ax)(["_2rko12x7 _189ee4h9 _1dqonqa1 _1h6d1j28 _19pkze3t _2hwxv77o _otyrze3t _18u0v77o _1e0c1txw _4cvr1h6o _ca0qe4h9 _u5f3e4h9 _n3tde4h9 _19bve4h9 _bfw7ia51"])
-      }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
+      }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages[(0, _statusColors.getColorLabelKey)(value)], function (labels) {
         return /*#__PURE__*/React.createElement(_compiled.Pressable, {
           xcss: styles.button,
           onClick: _this2.onClick,

package/dist/cjs/components/status-colors.js

@@ -0,0 +1,228 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeColor = exports.isSwatchSelected = exports.isNamedColor = exports.getLozengeAppearance = exports.getColorLabelKey = exports.colorToLozengeAppearanceMap = exports.SWATCH_ICON_COLOR = exports.PICKER_SWATCHES = exports.NAMED_COLORS = exports.HEX_PALETTE = exports.DEFAULT_LOZENGE_APPEARANCE = exports.COLORS = void 0;
+var _unsafeExpValNoExposure = require("@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+/** Named colours the ADF `color` attribute can carry. */
+
+var NAMED_COLORS = exports.NAMED_COLORS = ['neutral', 'purple', 'blue', 'red', 'yellow', 'green'];
+
+/**
+ * Hex ids the picker persists — the hues with no existing named ADF colour.
+ * Each is the panel-medium hex for that accent, so it resolves to the same token
+ * the editor palette would give it.
+ */
+
+var HEX_PALETTE = exports.HEX_PALETTE = ['#B3F5FF',
+// Teal
+'#ABF5D1',
+// Green
+'#D3F1A7',
+// Lime — named `green` renders identically
+'#FFF0B3',
+// Yellow
+'#FCE4A6',
+// Orange — named `yellow` renders identically
+'#FDD0EC' // Magenta
+];
+var DEFAULT_LOZENGE_APPEARANCE = exports.DEFAULT_LOZENGE_APPEARANCE = 'neutral';
+
+/** Pre-experiment mapping. Delete with `platform_editor_update_status_colors`. */
+var colorToLozengeAppearanceMap = exports.colorToLozengeAppearanceMap = {
+  neutral: 'neutral',
+  purple: 'discovery',
+  blue: 'information',
+  red: 'danger',
+  yellow: 'warning',
+  green: 'success'
+};
+
+/**
+ * Check-mark colour for the selected swatch. Uniform across the ten-colour palette, so
+ * it is not a per-colour field. (The legacy six-colour palette does vary it, which is
+ * why `ColorProps` still takes it per swatch.)
+ */
+var SWATCH_ICON_COLOR = exports.SWATCH_ICON_COLOR = "var(--ds-icon, #292A2E)";
+
+/**
+ * Keys of `messages` usable as a swatch's accessible name. Kept as a union so
+ * `getColorLabelKey` returns something `messages` is guaranteed to have — the
+ * call site in `color.tsx` then needs no cast, and an unregistered colour cannot
+ * produce a missing key.
+ */
+
+/**
+ * Single source of truth for status colours: appearance, swatch tokens and i18n key.
+ * Typed as a total `Record`, so adding a value to NAMED_COLORS or HEX_PALETTE
+ * fails to compile until it is described here.
+ *
+ * Legacy named `yellow`/`green` have no swatch — they are not offered separately,
+ * because `accent-orange`/`accent-lime` are byte-identical to the Orange/Lime swatches
+ * in both themes. The distinct Yellow and Green swatches are the #FFF0B3 / #ABF5D1 hues.
+ *
+ * CSS cannot be derived from this: Compiled needs static literals and the styling lint
+ * rule rejects computed values. `statusStylesHexAccent` in editor-core mirrors it by hand.
+ */
+var COLORS = exports.COLORS = {
+  neutral: {
+    appearance: 'neutral',
+    labelKey: 'neutralColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-neutral, #0515240F)",
+      borderColor: "var(--ds-border, #0B120E24)"
+    }
+  },
+  blue: {
+    appearance: 'accent-blue',
+    labelKey: 'blueColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-blue-subtler, #CFE1FD)",
+      borderColor: "var(--ds-border-accent-blue-subtle, #8FB8F6)"
+    }
+  },
+  '#B3F5FF': {
+    appearance: 'accent-teal',
+    labelKey: 'tealColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
+      borderColor: "var(--ds-border-accent-teal-subtle, #9DD9EE)"
+    }
+  },
+  '#ABF5D1': {
+    appearance: 'accent-green',
+    labelKey: 'greenColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+      borderColor: "var(--ds-border-accent-green-subtle, #7EE2B8)"
+    }
+  },
+  '#D3F1A7': {
+    appearance: 'accent-lime',
+    labelKey: 'limeColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
+      borderColor: "var(--ds-border-accent-lime-subtle, #B3DF72)"
+    }
+  },
+  '#FFF0B3': {
+    appearance: 'accent-yellow',
+    labelKey: 'yellowColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-yellow-subtler, #F5E989)",
+      borderColor: "var(--ds-border-accent-yellow-subtle, #EED12B)"
+    }
+  },
+  '#FCE4A6': {
+    appearance: 'accent-orange',
+    labelKey: 'orangeColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-orange-subtler, #FCE4A6)",
+      borderColor: "var(--ds-border-accent-orange-subtle, #FBC828)"
+    }
+  },
+  red: {
+    appearance: 'accent-red',
+    labelKey: 'redColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+      borderColor: "var(--ds-border-accent-red-subtle, #FD9891)"
+    }
+  },
+  '#FDD0EC': {
+    appearance: 'accent-magenta',
+    labelKey: 'magentaColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
+      borderColor: "var(--ds-border-accent-magenta-subtle, #F797D2)"
+    }
+  },
+  purple: {
+    appearance: 'accent-purple',
+    labelKey: 'purpleColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+      borderColor: "var(--ds-border-accent-purple-subtle, #D8A0F7)"
+    }
+  },
+  yellow: {
+    appearance: 'accent-orange',
+    labelKey: 'yellowColor'
+  },
+  green: {
+    appearance: 'accent-lime',
+    labelKey: 'greenColor'
+  }
+};
+
+/** Swatch order in the ten-colour picker: two rows of five. */
+var PICKER_SWATCHES = exports.PICKER_SWATCHES = ['neutral',
+// Gray
+'blue',
+// Blue
+'#B3F5FF',
+// Teal
+'#ABF5D1',
+// Green
+'#D3F1A7',
+// Lime
+'#FFF0B3',
+// Yellow
+'#FCE4A6',
+// Orange
+'red',
+// Red
+'#FDD0EC',
+// Magenta
+'purple' // Purple
+];
+var isNamedColor = exports.isNamedColor = function isNamedColor(color) {
+  return NAMED_COLORS.includes(color);
+};
+var normalizeColor = exports.normalizeColor = function normalizeColor(color) {
+  return color.startsWith('#') ? color.toUpperCase() : color;
+};
+var specFor = function specFor(color) {
+  return COLORS[normalizeColor(color)];
+};
+
+/**
+ * Falls back to the neutral label rather than building a key from the colour: an
+ * unregistered value would otherwise yield a key `messages` does not have, and
+ * spreading the resulting `undefined` into `FormattedMessage` throws.
+ */
+var getColorLabelKey = exports.getColorLabelKey = function getColorLabelKey(color) {
+  var _specFor$labelKey, _specFor;
+  return (_specFor$labelKey = (_specFor = specFor(color)) === null || _specFor === void 0 ? void 0 : _specFor.labelKey) !== null && _specFor$labelKey !== void 0 ? _specFor$labelKey : 'neutralColor';
+};
+var isSwatchSelected = exports.isSwatchSelected = function isSwatchSelected(swatchValue, selectedColor) {
+  var _specFor2, _specFor3;
+  if (!selectedColor) {
+    return false;
+  }
+  if (normalizeColor(swatchValue) === normalizeColor(selectedColor)) {
+    return true;
+  }
+
+  // A swatch also counts as selected when it renders the same hue under a different
+  // id — legacy named `green`/`yellow` share the Lime/Orange swatches. Unknown values
+  // have no spec, so they never collide on the neutral fallback.
+  var swatchAppearance = (_specFor2 = specFor(swatchValue)) === null || _specFor2 === void 0 ? void 0 : _specFor2.appearance;
+  return swatchAppearance !== undefined && swatchAppearance === ((_specFor3 = specFor(selectedColor)) === null || _specFor3 === void 0 ? void 0 : _specFor3.appearance);
+};
+var getLozengeAppearance = exports.getLozengeAppearance = function getLozengeAppearance(color) {
+  var isUpdateStatusColorsEnabled = (0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_update_status_colors', 'isEnabled', false);
+
+  // Named colours are recoloured only by the experiment. `gracefully_render_status_color`
+  // is a read-path gate for hex written by another cohort, so it must never reach here.
+  if (isNamedColor(color)) {
+    return isUpdateStatusColorsEnabled ? COLORS[color].appearance : colorToLozengeAppearanceMap[color];
+  }
+  if (isUpdateStatusColorsEnabled || (0, _fg.fg)('platform_editor_gracefully_render_status_color')) {
+    var _specFor$appearance, _specFor4;
+    return (_specFor$appearance = (_specFor4 = specFor(color)) === null || _specFor4 === void 0 ? void 0 : _specFor4.appearance) !== null && _specFor$appearance !== void 0 ? _specFor$appearance : DEFAULT_LOZENGE_APPEARANCE;
+  }
+  return DEFAULT_LOZENGE_APPEARANCE;
+};

package/dist/es2019/components/Status.js

@@ -8,15 +8,13 @@ import Lozenge from '@atlaskit/lozenge/lozenge';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { createStatusAnalyticsAndFire } from './analytics';
 import { ANALYTICS_HOVER_DELAY } from './constants';
-const colorToLozengeAppearanceMap = {
-  neutral: 'neutral',
-  purple: 'discovery',
-  blue: 'information',
-  red: 'danger',
-  yellow: 'warning',
-  green: 'success'
-};
-const DEFAULT_APPEARANCE = 'neutral';
+import { getLozengeAppearance, normalizeColor } from './status-colors';
+
+/**
+ * What the ADF `color` attribute can hold. `HexColor` is the closed set we persist — do
+ * not substitute it here, or graceful rendering of unknown hex becomes a type error.
+ */
+
 const MAX_WIDTH = 200;
 
 /**
@@ -88,7 +86,7 @@ class StatusInternal extends PureComponent {
     if (text.trim().length === 0) {
       return null;
     }
-    const appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE;
+    const appearance = getLozengeAppearance(color);
     // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
     return /*#__PURE__*/React.createElement("span", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -101,7 +99,7 @@ class StatusInternal extends PureComponent {
       onBlur: this.handleBlur,
       tabIndex: onClick ? -1 : undefined,
       "data-node-type": "status",
-      "data-color": color,
+      "data-color": normalizeColor(color),
       "data-style": style,
       role: role
     }, /*#__PURE__*/React.createElement(Lozenge, {

package/dist/es2019/components/StatusPicker.js

@@ -7,6 +7,13 @@ import React, { PureComponent } from 'react';
 import { injectIntl } from 'react-intl';
 import ColorPalette from './internal/color-palette';
 import { messages } from './i18n';
+
+/**
+ * Which set of selectable values the picker offers.
+ * - `default`: the six named colours.
+ * - `extended`: ten colours; hues without an existing name are persisted as hex.
+ */
+
 const fieldTextWrapperStyles = null;
 
 // Keep the existing content position while reserving space inside the scrollport for focus rings.
@@ -49,13 +56,15 @@ class Picker extends PureComponent {
       onColorClick,
       onColorHover,
       intl,
-      scrollableContent
+      scrollableContent,
+      palette
     } = this.props;
     const colorPalette = /*#__PURE__*/React.createElement(ColorPalette, {
       key: this.colorPaletteKey,
       onClick: onColorClick,
       onHover: onColorHover,
-      selectedColor: selectedColor
+      selectedColor: selectedColor,
+      palette: palette
     });
 
     // Using <React.Fragment> instead of [] to workaround Enzyme

package/dist/es2019/components/analytics.js

@@ -1,6 +1,6 @@
 export const ELEMENTS_CHANNEL = 'fabric-elements';
 const packageName = "@atlaskit/status";
-const packageVersion = "5.10.0";
+const packageVersion = "5.10.1";
 export const createStatusAnalyticsAndFire = createAnalyticsEvent => payload => {
   const statusPayload = {
     ...payload,

package/dist/es2019/components/i18n.js

@@ -2,8 +2,8 @@ import { defineMessages } from 'react-intl';
 export const messages = defineMessages({
   neutralColor: {
     id: 'fabric.status.color.grey',
-    defaultMessage: 'Grey',
-    description: 'Tooltip for the grey color in color palette'
+    defaultMessage: 'Gray',
+    description: 'Tooltip for the gray color in color palette'
   },
   purpleColor: {
     id: 'fabric.status.color.purple',
@@ -30,6 +30,26 @@ export const messages = defineMessages({
     defaultMessage: 'Green',
     description: 'Tooltip for the green color in color palette'
   },
+  tealColor: {
+    id: 'fabric.status.color.teal',
+    defaultMessage: 'Teal',
+    description: 'Tooltip for the teal color in color palette'
+  },
+  limeColor: {
+    id: 'fabric.status.color.lime',
+    defaultMessage: 'Lime',
+    description: 'Tooltip for the lime color in color palette'
+  },
+  orangeColor: {
+    id: 'fabric.status.color.orange',
+    defaultMessage: 'Orange',
+    description: 'Tooltip for the orange color in color palette'
+  },
+  magentaColor: {
+    id: 'fabric.status.color.magenta',
+    defaultMessage: 'Magenta',
+    description: 'Tooltip for the magenta color in color palette'
+  },
   statusInputLabel: {
     id: 'fabric.status.input.label',
     defaultMessage: 'Set a status',