@atlaskit/status 5.10.1 → 5.11.0

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

@@ -4,11 +4,27 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef, useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
+import { isSwatchSelected, COLORS, PICKER_SWATCHES, SWATCH_ICON_COLOR } from '../status-colors';
 import Color from './color';
 const 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)"]];
 const 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)"]];
 const 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)"]];
-const getPalette = colorMode => {
+// Derived from the status colour registry so the swatch list, the Lozenge appearances
+// and the i18n keys cannot drift apart. See COLORS.
+const paletteHex = PICKER_SWATCHES.flatMap(value => {
+  const swatch = COLORS[value].swatch;
+  return swatch ? [[value, swatch.backgroundColor, swatch.borderColor, SWATCH_ICON_COLOR]] : [];
+});
+
+/** Columns each variant is laid out in; `extended` wraps its ten swatches onto two rows. */
+const variantToCols = {
+  default: 7,
+  extended: 5
+};
+const getPalette = (colorMode, variant = 'default') => {
+  if (variant === 'extended') {
+    return paletteHex;
+  }
   if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
     const isDark = colorMode === 'dark';
     return paletteTeam26.map(([colorValue, backgroundColor, lightBorderColor, darkBorderColor, iconColor]) => [colorValue, backgroundColor, isDark ? darkBorderColor : lightBorderColor, iconColor]);
@@ -19,16 +35,18 @@ const 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
 const colorPaletteWrapperStyles = null;
 export default (({
-  cols = 7,
+  cols,
   onClick,
   selectedColor,
   className,
-  onHover
+  onHover,
+  palette: variant = 'default'
 }) => {
   const {
     colorMode
   } = useThemeObserver();
-  const palette = getPalette(colorMode);
+  const palette = getPalette(colorMode, variant);
+  const resolvedCols = cols !== null && cols !== void 0 ? cols : variantToCols[variant];
   const colorRefs = useRef([]);
   useEffect(() => {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
@@ -59,7 +77,7 @@ export default (({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ax(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", className]),
     style: {
-      maxWidth: cols * 32
+      maxWidth: resolvedCols * 32
     }
   }, palette.map(([colorValue, backgroundColor, borderColor, iconColor], i) => /*#__PURE__*/React.createElement(Color, {
     key: colorValue,
@@ -69,7 +87,7 @@ export default (({
     iconColor: iconColor,
     onClick: onClick,
     onHover: onHover,
-    isSelected: colorValue === selectedColor,
+    isSelected: isSwatchSelected(colorValue, selectedColor),
     tabIndex: i === 0 ? 0 : -1,
     setRef: el => colorRefs.current[i] = el,
     onKeyDown: createKeyDownHandler(i)

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

@@ -9,6 +9,7 @@ import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
+import { getColorLabelKey } from '../status-colors';
 const styles = {
   button: "_2rko12b0 _19itia51 _1reo15vq _18m915vq _4t3i1tcg _1bsb1tcg _bfhki8nm _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1e0c1ule"
 };
@@ -55,7 +56,7 @@ export default class Color extends PureComponent {
     } = this.props;
     return /*#__PURE__*/React.createElement("li", {
       className: ax(["_2rko12x7 _189ee4h9 _1dqonqa1 _1h6d1j28 _19pkze3t _2hwxv77o _otyrze3t _18u0v77o _1e0c1txw _4cvr1h6o _ca0qe4h9 _u5f3e4h9 _n3tde4h9 _19bve4h9 _bfw7ia51"])
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages[`${value}Color`], labels => /*#__PURE__*/React.createElement(Pressable, {
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages[getColorLabelKey(value)], labels => /*#__PURE__*/React.createElement(Pressable, {
       xcss: styles.button,
       onClick: this.onClick,
       onMouseEnter: this.onMouseEnter,

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

@@ -0,0 +1,217 @@
+import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+
+/** Named colours the ADF `color` attribute can carry. */
+
+export const 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.
+ */
+
+export const HEX_PALETTE = ['#B3F5FF',
+// Teal
+'#ABF5D1',
+// Green
+'#D3F1A7',
+// Lime — named `green` renders identically
+'#FFF0B3',
+// Yellow
+'#FCE4A6',
+// Orange — named `yellow` renders identically
+'#FDD0EC' // Magenta
+];
+export const DEFAULT_LOZENGE_APPEARANCE = 'neutral';
+
+/** Pre-experiment mapping. Delete with `platform_editor_update_status_colors`. */
+export const 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.)
+ */
+export const 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.
+ */
+export const 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. */
+export const PICKER_SWATCHES = ['neutral',
+// Gray
+'blue',
+// Blue
+'#B3F5FF',
+// Teal
+'#ABF5D1',
+// Green
+'#D3F1A7',
+// Lime
+'#FFF0B3',
+// Yellow
+'#FCE4A6',
+// Orange
+'red',
+// Red
+'#FDD0EC',
+// Magenta
+'purple' // Purple
+];
+export const isNamedColor = color => NAMED_COLORS.includes(color);
+export const normalizeColor = color => color.startsWith('#') ? color.toUpperCase() : color;
+const specFor = color => 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.
+ */
+export const 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';
+};
+export const 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.
+  const 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);
+};
+export const getLozengeAppearance = color => {
+  const isUpdateStatusColorsEnabled = 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 || 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/esm/components/Status.js

@@ -15,15 +15,13 @@ import Lozenge from '@atlaskit/lozenge/lozenge';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { createStatusAnalyticsAndFire } from './analytics';
 import { ANALYTICS_HOVER_DELAY } from './constants';
-var colorToLozengeAppearanceMap = {
-  neutral: 'neutral',
-  purple: 'discovery',
-  blue: 'information',
-  red: 'danger',
-  yellow: 'warning',
-  green: 'success'
-};
-var 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.
+ */
+
 var MAX_WIDTH = 200;
 
 /**
@@ -99,7 +97,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
       if (text.trim().length === 0) {
         return null;
       }
-      var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE;
+      var 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
@@ -112,7 +110,7 @@ var StatusInternal = /*#__PURE__*/function (_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/esm/components/StatusPicker.js

@@ -14,6 +14,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.
+ */
+
 var fieldTextWrapperStyles = null;
 
 // Keep the existing content position while reserving space inside the scrollport for focus rings.
@@ -65,12 +72,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.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/esm/components/analytics.js

@@ -3,7 +3,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) { _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 var ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "5.10.0";
+var packageVersion = "5.10.1";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

package/dist/esm/components/i18n.js

@@ -2,8 +2,8 @@ import { defineMessages } from 'react-intl';
 export var 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 var 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',

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

@@ -5,11 +5,28 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef, useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
+import { isSwatchSelected, COLORS, PICKER_SWATCHES, SWATCH_ICON_COLOR } from '../status-colors';
 import Color from './color';
 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 = PICKER_SWATCHES.flatMap(function (value) {
+  var swatch = COLORS[value].swatch;
+  return swatch ? [[value, swatch.backgroundColor, swatch.borderColor, 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 (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
     var isDark = colorMode === 'dark';
     return paletteTeam26.map(function (_ref) {
@@ -28,15 +45,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;
 export default (function (_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 = 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 = useRef([]);
   useEffect(function () {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
@@ -73,7 +92,7 @@ export default (function (_ref3) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ax(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", className]),
     style: {
-      maxWidth: cols * 32
+      maxWidth: resolvedCols * 32
     }
   }, palette.map(function (_ref4, i) {
     var _ref5 = _slicedToArray(_ref4, 4),
@@ -89,7 +108,7 @@ export default (function (_ref3) {
       iconColor: iconColor,
       onClick: onClick,
       onHover: onHover,
-      isSelected: colorValue === selectedColor,
+      isSelected: isSwatchSelected(colorValue, selectedColor),
       tabIndex: i === 0 ? 0 : -1,
       setRef: function setRef(el) {
         return colorRefs.current[i] = el;

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

@@ -16,6 +16,7 @@ import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
+import { getColorLabelKey } from '../status-colors';
 var styles = {
   button: "_2rko12b0 _19itia51 _1reo15vq _18m915vq _4t3i1tcg _1bsb1tcg _bfhki8nm _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1e0c1ule"
 };
@@ -68,7 +69,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         onKeyDown = _this$props2.onKeyDown;
       return /*#__PURE__*/React.createElement("li", {
         className: ax(["_2rko12x7 _189ee4h9 _1dqonqa1 _1h6d1j28 _19pkze3t _2hwxv77o _otyrze3t _18u0v77o _1e0c1txw _4cvr1h6o _ca0qe4h9 _u5f3e4h9 _n3tde4h9 _19bve4h9 _bfw7ia51"])
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages[getColorLabelKey(value)], function (labels) {
         return /*#__PURE__*/React.createElement(Pressable, {
           xcss: styles.button,
           onClick: _this2.onClick,