@atlaskit/color-picker 3.5.0 → 3.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/color-picker
 
+## 3.6.0
+
+### Minor Changes
+
+- [#169778](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169778)
+  [`0e59b2c7cdc48`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0e59b2c7cdc48) -
+  [ux] Added outline variant support for Color picker
+
+## 3.5.1
+
+### Patch Changes
+
+- [#167775](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167775)
+  [`0769cc797ece1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0769cc797ece1) -
+  Clean up color picker role fix feature gate
+
 ## 3.5.0
 
 ### Minor Changes

package/dist/cjs/components/ColorCard.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--editor-done"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../constants");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _useCallbackRef = require("use-callback-ref");
@@ -38,7 +39,9 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
     checkMarkColor = _props$checkMarkColor === void 0 ? _colors.N0 : _props$checkMarkColor,
     isTabbing = props.isTabbing,
     onClick = props.onClick,
-    onKeyDown = props.onKeyDown;
+    onKeyDown = props.onKeyDown,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'fill' : _props$variant;
   var ref = (0, _react.useRef)(null);
   var isInitialFocus = (0, _react.useRef)(true);
   var isColorPaletteMenu = type === _constants.COLOR_PALETTE_MENU;
@@ -86,33 +89,44 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
   var role = isColorPaletteMenu ? isInsideMenuRole : 'presentation';
   var ariaChecked = isColorPaletteMenu ? selected : undefined;
   var ariaLabel = isColorPaletteMenu ? label : undefined;
+  var isOutlineVariant = (0, _platformFeatureFlags.fg)('thor_colourful_single_select_milestone1_gate') && variant === 'outline';
+  var newCheckmarkColor = isOutlineVariant ? "var(--ds-icon, #44546F)" : checkMarkColor;
   return (0, _react2.jsx)(_tooltip.default, {
     content: label
   }, function (tooltipProps) {
     delete tooltipProps['aria-describedby'];
-    return (0, _react2.jsx)("div", (0, _extends2.default)({}, tooltipProps, {
-      ref: initialFocusRef ? (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref, initialFocusRef]) : (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref]),
-      role: role,
-      tabIndex: selected ? 0 : -1,
-      "aria-checked": ariaChecked,
-      "aria-label": ariaLabel,
-      css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      onKeyDown: handleKeyDown
-    }), (0, _react2.jsx)("div", {
-      css: colorCardWrapperStyles
-    }, (0, _react2.jsx)("div", {
-      css: colorCardContentStyles,
-      style: {
-        background: value || 'transparent'
-      }
-    }, selected && (0, _react2.jsx)(_checkMarkEditorDone.default, {
-      color: checkMarkColor,
-      label: "",
-      spacing: "spacious",
-      LEGACY_margin: "1px"
-    }))));
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      (0, _react2.jsx)("div", (0, _extends2.default)({}, tooltipProps, {
+        ref: initialFocusRef ? (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref, initialFocusRef]) : (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref]),
+        role: role
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        ,
+        tabIndex: selected ? 0 : -1,
+        "aria-checked": ariaChecked,
+        "aria-label": ariaLabel,
+        css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        onKeyDown: handleKeyDown
+      }), (0, _react2.jsx)("div", {
+        css: colorCardWrapperStyles
+      }, (0, _react2.jsx)("div", {
+        css: isOutlineVariant ? colorCardContentStylesOutline : colorCardContentStyles
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        ,
+        style: isOutlineVariant ? {
+          borderColor: value || 'grey'
+        } : {
+          backgroundColor: value || 'transparent'
+        }
+      }, selected && (0, _react2.jsx)(_checkMarkEditorDone.default, {
+        color: newCheckmarkColor,
+        label: "",
+        spacing: "spacious",
+        LEGACY_margin: "1px"
+      }))))
+    );
   });
 });
 var _default = exports.default = ColorCard;
@@ -152,4 +166,11 @@ var colorCardContentStyles = (0, _react2.css)({
   height: "var(--ds-space-300, 24px)",
   borderRadius: "var(--ds-border-radius-100, 3px)",
   boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(_colors.DN600A, ")"))
+});
+var colorCardContentStylesOutline = (0, _react2.css)({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  borderWidth: "var(--ds-border-width-outline, 2px)",
+  borderStyle: 'solid'
 });

package/dist/cjs/components/ColorPaletteMenu.js

@@ -39,7 +39,9 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
     cols = _ref$cols === void 0 ? 6 : _ref$cols,
     _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? _types.Mode.Standard : _ref$mode,
-    initialFocusRef = _ref.initialFocusRef;
+    initialFocusRef = _ref.initialFocusRef,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'fill' : _ref$variant;
   var _getOptions = (0, _utils.getOptions)(palette, selectedColor),
     options = _getOptions.options,
     selectedValue = _getOptions.value;
@@ -61,7 +63,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.5.0"
+          packageVersion: "3.6.0"
         }
       })(createAnalyticsEvent);
     }
@@ -139,14 +141,15 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
       autoFocus: autoFocus,
       initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
       isInsideMenu: isInsideMenu,
-      onKeyDown: handleKeyDown
+      onKeyDown: handleKeyDown,
+      variant: variant
     }));
   })));
 };
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.5.0"
+  packageVersion: "3.6.0"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = (0, _react2.css)({
   display: 'flex',

package/dist/cjs/components/ColorPicker.js

@@ -43,7 +43,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.5.0";
+var packageVersion = "3.6.0";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
@@ -122,7 +122,9 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
         _this$props$showDefau = _this$props.showDefaultSwatchColor,
         showDefaultSwatchColor = _this$props$showDefau === void 0 ? true : _this$props$showDefau,
         isDisabledSelectedSwatch = _this$props.isDisabledSelectedSwatch,
-        intl = _this$props.intl;
+        intl = _this$props.intl,
+        _this$props$variant = _this$props.variant,
+        variant = _this$props$variant === void 0 ? 'fill' : _this$props$variant;
       var _getOptions = (0, _utils.getOptions)(palette, selectedColor, showDefaultSwatchColor),
         options = _getOptions.options,
         value = _getOptions.value;
@@ -139,7 +141,8 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
             expanded: isOpen,
             swatchSize: selectedColourSwatchSize,
             isDisabled: isDisabledSelectedSwatch,
-            id: triggerId
+            id: triggerId,
+            variant: variant
           })));
         },
         popperProps: popperProps,
@@ -158,6 +161,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
         ,
         cols: cols,
         checkMarkColor: checkMarkColor,
+        variant: variant,
         onKeyDown: this.onKeyDown,
         isTabbing: this.state.isTabbing,
         onOptionKeyDown: this.onOptionKeyDown

package/dist/cjs/components/Trigger.js

@@ -25,7 +25,9 @@ var ColorCard = function ColorCard(_ref) {
     _ref$swatchSize = _ref.swatchSize,
     swatchSize = _ref$swatchSize === void 0 ? 'default' : _ref$swatchSize,
     isDisabled = _ref.isDisabled,
-    id = _ref.id;
+    id = _ref.id,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'fill' : _ref$variant;
   var handleMouseDown = (0, _react.useCallback)(function (event) {
     event.preventDefault();
   }, []);
@@ -36,6 +38,12 @@ var ColorCard = function ColorCard(_ref) {
       onClick();
     }
   }, [onClick]);
+  var isOutlineVariant = (0, _platformFeatureFlags.fg)('thor_colourful_single_select_milestone1_gate') && variant === 'outline';
+  var colorCardStyles = isOutlineVariant ? {
+    borderColor: value || 'grey'
+  } : {
+    backgroundColor: value || 'transparent'
+  };
   return (0, _react2.jsx)(_tooltip.default, {
     content: label
   }, (0, _react2.jsx)("button", {
@@ -51,10 +59,10 @@ var ColorCard = function ColorCard(_ref) {
   }, (0, _react2.jsx)("span", {
     css: colorCardWrapperStyles
   }, (0, _react2.jsx)("span", {
-    css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize],
-    style: {
-      background: value || 'transparent'
-    }
+    css: [isOutlineVariant ? colorCardContentStylesOutline : colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: colorCardStyles
   }))));
 };
 var _default = exports.default = ColorCard;
@@ -106,6 +114,11 @@ var colorCardContentStyles = (0, _react2.css)({
   borderRadius: "var(--ds-border-radius-100, 3px)",
   boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(_colors.DN600A, ")"))
 });
+var colorCardContentStylesOutline = (0, _react2.css)({
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  borderWidth: "var(--ds-border-width-outline, 2px)",
+  borderStyle: 'solid'
+});
 var smallColorCardContentSize = (0, _react2.css)({
   width: "var(--ds-space-200, 16px)",
   height: "var(--ds-space-200, 16px)"

package/dist/cjs/components/components.js

@@ -12,7 +12,6 @@ var _react = require("@emotion/react");
 var _constants = require("../constants");
 var _reactIntlNext = require("react-intl-next");
 var _messages = _interopRequireDefault(require("../messages"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -28,7 +27,7 @@ var MenuList = exports.MenuList = function MenuList(props) {
     formatMessage = _useIntl.formatMessage;
   return (0, _react.jsx)("div", {
     css: colorPaletteContainerStyles,
-    role: (0, _platformFeatureFlags.fg)('jsw_roadmaps_fix-color-picker-roles') ? 'group' : 'listbox',
+    role: "group",
     "aria-label": formatMessage(_messages.default.menuListAriaLabel),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -47,16 +46,16 @@ var Option = exports.Option = function Option(props) {
     checkMarkColor = _props$selectProps.checkMarkColor,
     onOptionKeyDown = _props$selectProps.onOptionKeyDown,
     isTabbing = _props$selectProps.isTabbing,
+    variant = _props$selectProps.variant,
     isFocused = props.isFocused,
     isSelected = props.isSelected,
     innerProps = props.innerProps;
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: colorCardWrapperStyles
-  }, innerProps, (0, _platformFeatureFlags.fg)('jsw_roadmaps_fix-color-picker-roles') && {
-    role: 'radio',
-    'aria-checked': isSelected,
-    'aria-selected': undefined
-  }, {
+  }, innerProps, {
+    role: "radio",
+    "aria-checked": isSelected,
+    "aria-selected": undefined,
     "aria-label": label
   }), (0, _react.jsx)(_ColorCard.default, {
     type: _constants.COLOR_PICKER,
@@ -69,7 +68,8 @@ var Option = exports.Option = function Option(props) {
     onKeyDown: function onKeyDown(value) {
       return onOptionKeyDown(value);
     },
-    isTabbing: isTabbing
+    isTabbing: isTabbing,
+    variant: variant
   }));
 };
 var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator() {

package/dist/es2019/components/ColorCard.js

@@ -7,6 +7,7 @@ import React, { useCallback, useRef, useImperativeHandle, forwardRef } from 'rea
 import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
 import Tooltip from '@atlaskit/tooltip';
 import { COLOR_PALETTE_MENU, KEY_ENTER, KEY_SPACE, KEY_TAB } from '../constants';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
@@ -24,7 +25,8 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
     checkMarkColor = N0,
     isTabbing,
     onClick,
-    onKeyDown
+    onKeyDown,
+    variant = 'fill'
   } = props;
   const ref = useRef(null);
   const isInitialFocus = useRef(true);
@@ -71,33 +73,44 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
   const role = isColorPaletteMenu ? isInsideMenuRole : 'presentation';
   const ariaChecked = isColorPaletteMenu ? selected : undefined;
   const ariaLabel = isColorPaletteMenu ? label : undefined;
+  const isOutlineVariant = fg('thor_colourful_single_select_milestone1_gate') && variant === 'outline';
+  const newCheckmarkColor = isOutlineVariant ? "var(--ds-icon, #44546F)" : checkMarkColor;
   return jsx(Tooltip, {
     content: label
   }, tooltipProps => {
     delete tooltipProps['aria-describedby'];
-    return jsx("div", _extends({}, tooltipProps, {
-      ref: initialFocusRef ? mergeRefs([ref, tooltipProps.ref, initialFocusRef]) : mergeRefs([ref, tooltipProps.ref]),
-      role: role,
-      tabIndex: selected ? 0 : -1,
-      "aria-checked": ariaChecked,
-      "aria-label": ariaLabel,
-      css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      onKeyDown: handleKeyDown
-    }), jsx("div", {
-      css: colorCardWrapperStyles
-    }, jsx("div", {
-      css: colorCardContentStyles,
-      style: {
-        background: value || 'transparent'
-      }
-    }, selected && jsx(EditorDoneIcon, {
-      color: checkMarkColor,
-      label: "",
-      spacing: "spacious",
-      LEGACY_margin: "1px"
-    }))));
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      jsx("div", _extends({}, tooltipProps, {
+        ref: initialFocusRef ? mergeRefs([ref, tooltipProps.ref, initialFocusRef]) : mergeRefs([ref, tooltipProps.ref]),
+        role: role
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        ,
+        tabIndex: selected ? 0 : -1,
+        "aria-checked": ariaChecked,
+        "aria-label": ariaLabel,
+        css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        onKeyDown: handleKeyDown
+      }), jsx("div", {
+        css: colorCardWrapperStyles
+      }, jsx("div", {
+        css: isOutlineVariant ? colorCardContentStylesOutline : colorCardContentStyles
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        ,
+        style: isOutlineVariant ? {
+          borderColor: value || 'grey'
+        } : {
+          backgroundColor: value || 'transparent'
+        }
+      }, selected && jsx(EditorDoneIcon, {
+        color: newCheckmarkColor,
+        label: "",
+        spacing: "spacious",
+        LEGACY_margin: "1px"
+      }))))
+    );
   });
 });
 export default ColorCard;
@@ -137,4 +150,11 @@ const colorCardContentStyles = css({
   height: "var(--ds-space-300, 24px)",
   borderRadius: "var(--ds-border-radius-100, 3px)",
   boxShadow: `inset 0px 0px 0px 1px ${`var(--ds-background-inverse-subtle, ${DN600A})`}`
+});
+const colorCardContentStylesOutline = css({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  borderWidth: "var(--ds-border-width-outline, 2px)",
+  borderStyle: 'solid'
 });

package/dist/es2019/components/ColorPaletteMenu.js

@@ -23,7 +23,8 @@ export const ColorPaletteMenuWithoutAnalytics = ({
   label = 'Color picker',
   cols = 6,
   mode = Mode.Standard,
-  initialFocusRef
+  initialFocusRef,
+  variant = 'fill'
 }) => {
   const {
     options,
@@ -43,7 +44,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.5.0"
+          packageVersion: "3.6.0"
         }
       })(createAnalyticsEvent);
     }
@@ -115,13 +116,14 @@ export const ColorPaletteMenuWithoutAnalytics = ({
     autoFocus: autoFocus,
     initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
     isInsideMenu: isInsideMenu,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    variant: variant
   })))));
 };
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.5.0"
+  packageVersion: "3.6.0"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 const colorCardWrapperStyles = css({
   display: 'flex',

package/dist/es2019/components/ColorPicker.js

@@ -27,7 +27,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.5.0";
+const packageVersion = "3.6.0";
 class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);
@@ -95,7 +95,8 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
       selectedColourSwatchSize,
       showDefaultSwatchColor = true,
       isDisabledSelectedSwatch,
-      intl
+      intl,
+      variant = 'fill'
     } = this.props;
     const {
       options,
@@ -114,7 +115,8 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
         expanded: isOpen,
         swatchSize: selectedColourSwatchSize,
         isDisabled: isDisabledSelectedSwatch,
-        id: triggerId
+        id: triggerId,
+        variant: variant
       }))),
       popperProps: popperProps,
       maxMenuWidth: "auto",
@@ -132,6 +134,7 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
       ,
       cols: cols,
       checkMarkColor: checkMarkColor,
+      variant: variant,
       onKeyDown: this.onKeyDown,
       isTabbing: this.state.isTabbing,
       onOptionKeyDown: this.onOptionKeyDown

package/dist/es2019/components/Trigger.js

@@ -15,7 +15,8 @@ const ColorCard = ({
   onClick,
   swatchSize = 'default',
   isDisabled,
-  id
+  id,
+  variant = 'fill'
 }) => {
   const handleMouseDown = useCallback(event => {
     event.preventDefault();
@@ -27,6 +28,12 @@ const ColorCard = ({
       onClick();
     }
   }, [onClick]);
+  const isOutlineVariant = fg('thor_colourful_single_select_milestone1_gate') && variant === 'outline';
+  const colorCardStyles = isOutlineVariant ? {
+    borderColor: value || 'grey'
+  } : {
+    backgroundColor: value || 'transparent'
+  };
   return jsx(Tooltip, {
     content: label
   }, jsx("button", {
@@ -42,10 +49,10 @@ const ColorCard = ({
   }, jsx("span", {
     css: colorCardWrapperStyles
   }, jsx("span", {
-    css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize],
-    style: {
-      background: value || 'transparent'
-    }
+    css: [isOutlineVariant ? colorCardContentStylesOutline : colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: colorCardStyles
   }))));
 };
 export default ColorCard;
@@ -97,6 +104,11 @@ const colorCardContentStyles = css({
   borderRadius: "var(--ds-border-radius-100, 3px)",
   boxShadow: `inset 0px 0px 0px 1px ${`var(--ds-background-inverse-subtle, ${DN600A})`}`
 });
+const colorCardContentStylesOutline = css({
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  borderWidth: "var(--ds-border-width-outline, 2px)",
+  borderStyle: 'solid'
+});
 const smallColorCardContentSize = css({
   width: "var(--ds-space-200, 16px)",
   height: "var(--ds-space-200, 16px)"

package/dist/es2019/components/components.js

@@ -11,7 +11,6 @@ import { css, jsx } from '@emotion/react';
 import { COLOR_PICKER } from '../constants';
 import { useIntl } from 'react-intl-next';
 import messages from '../messages';
-import { fg } from '@atlaskit/platform-feature-flags';
 export const MenuList = props => {
   const {
     //@ts-ignore react-select unsupported props
@@ -26,7 +25,7 @@ export const MenuList = props => {
   } = useIntl();
   return jsx("div", {
     css: colorPaletteContainerStyles,
-    role: fg('jsw_roadmaps_fix-color-picker-roles') ? 'group' : 'listbox',
+    role: "group",
     "aria-label": formatMessage(messages.menuListAriaLabel),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -47,7 +46,8 @@ export const Option = props => {
     selectProps: {
       checkMarkColor,
       onOptionKeyDown,
-      isTabbing
+      isTabbing,
+      variant
     },
     isFocused,
     isSelected,
@@ -55,11 +55,10 @@ export const Option = props => {
   } = props;
   return jsx("div", _extends({
     css: colorCardWrapperStyles
-  }, innerProps, fg('jsw_roadmaps_fix-color-picker-roles') && {
-    role: 'radio',
-    'aria-checked': isSelected,
-    'aria-selected': undefined
-  }, {
+  }, innerProps, {
+    role: "radio",
+    "aria-checked": isSelected,
+    "aria-selected": undefined,
     "aria-label": label
   }), jsx(ColorCard, {
     type: COLOR_PICKER,
@@ -70,7 +69,8 @@ export const Option = props => {
     focused: isFocused,
     selected: isSelected,
     onKeyDown: value => onOptionKeyDown(value),
-    isTabbing: isTabbing
+    isTabbing: isTabbing,
+    variant: variant
   }));
 };
 export const DropdownIndicator = () => null;

package/dist/esm/components/ColorCard.js

@@ -7,6 +7,7 @@ import React, { useCallback, useRef, useImperativeHandle, forwardRef } from 'rea
 import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
 import Tooltip from '@atlaskit/tooltip';
 import { COLOR_PALETTE_MENU, KEY_ENTER, KEY_SPACE, KEY_TAB } from '../constants';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
@@ -26,7 +27,9 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
     checkMarkColor = _props$checkMarkColor === void 0 ? N0 : _props$checkMarkColor,
     isTabbing = props.isTabbing,
     onClick = props.onClick,
-    onKeyDown = props.onKeyDown;
+    onKeyDown = props.onKeyDown,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'fill' : _props$variant;
   var ref = useRef(null);
   var isInitialFocus = useRef(true);
   var isColorPaletteMenu = type === COLOR_PALETTE_MENU;
@@ -74,33 +77,44 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
   var role = isColorPaletteMenu ? isInsideMenuRole : 'presentation';
   var ariaChecked = isColorPaletteMenu ? selected : undefined;
   var ariaLabel = isColorPaletteMenu ? label : undefined;
+  var isOutlineVariant = fg('thor_colourful_single_select_milestone1_gate') && variant === 'outline';
+  var newCheckmarkColor = isOutlineVariant ? "var(--ds-icon, #44546F)" : checkMarkColor;
   return jsx(Tooltip, {
     content: label
   }, function (tooltipProps) {
     delete tooltipProps['aria-describedby'];
-    return jsx("div", _extends({}, tooltipProps, {
-      ref: initialFocusRef ? mergeRefs([ref, tooltipProps.ref, initialFocusRef]) : mergeRefs([ref, tooltipProps.ref]),
-      role: role,
-      tabIndex: selected ? 0 : -1,
-      "aria-checked": ariaChecked,
-      "aria-label": ariaLabel,
-      css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      onKeyDown: handleKeyDown
-    }), jsx("div", {
-      css: colorCardWrapperStyles
-    }, jsx("div", {
-      css: colorCardContentStyles,
-      style: {
-        background: value || 'transparent'
-      }
-    }, selected && jsx(EditorDoneIcon, {
-      color: checkMarkColor,
-      label: "",
-      spacing: "spacious",
-      LEGACY_margin: "1px"
-    }))));
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      jsx("div", _extends({}, tooltipProps, {
+        ref: initialFocusRef ? mergeRefs([ref, tooltipProps.ref, initialFocusRef]) : mergeRefs([ref, tooltipProps.ref]),
+        role: role
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        ,
+        tabIndex: selected ? 0 : -1,
+        "aria-checked": ariaChecked,
+        "aria-label": ariaLabel,
+        css: [sharedColorContainerStyles, (isColorPaletteMenu || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isColorPaletteMenu || !isTabbing) && colorCardOptionFocusedStyles],
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        onKeyDown: handleKeyDown
+      }), jsx("div", {
+        css: colorCardWrapperStyles
+      }, jsx("div", {
+        css: isOutlineVariant ? colorCardContentStylesOutline : colorCardContentStyles
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        ,
+        style: isOutlineVariant ? {
+          borderColor: value || 'grey'
+        } : {
+          backgroundColor: value || 'transparent'
+        }
+      }, selected && jsx(EditorDoneIcon, {
+        color: newCheckmarkColor,
+        label: "",
+        spacing: "spacious",
+        LEGACY_margin: "1px"
+      }))))
+    );
   });
 });
 export default ColorCard;
@@ -140,4 +154,11 @@ var colorCardContentStyles = css({
   height: "var(--ds-space-300, 24px)",
   borderRadius: "var(--ds-border-radius-100, 3px)",
   boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(DN600A, ")"))
+});
+var colorCardContentStylesOutline = css({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)",
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  borderWidth: "var(--ds-border-width-outline, 2px)",
+  borderStyle: 'solid'
 });

package/dist/esm/components/ColorPaletteMenu.js

@@ -30,7 +30,9 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
     cols = _ref$cols === void 0 ? 6 : _ref$cols,
     _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? Mode.Standard : _ref$mode,
-    initialFocusRef = _ref.initialFocusRef;
+    initialFocusRef = _ref.initialFocusRef,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'fill' : _ref$variant;
   var _getOptions = getOptions(palette, selectedColor),
     options = _getOptions.options,
     selectedValue = _getOptions.value;
@@ -52,7 +54,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.5.0"
+          packageVersion: "3.6.0"
         }
       })(createAnalyticsEvent);
     }
@@ -130,14 +132,15 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
       autoFocus: autoFocus,
       initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
       isInsideMenu: isInsideMenu,
-      onKeyDown: handleKeyDown
+      onKeyDown: handleKeyDown,
+      variant: variant
     }));
   })));
 };
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.5.0"
+  packageVersion: "3.6.0"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = css({
   display: 'flex',

package/dist/esm/components/ColorPicker.js

@@ -35,7 +35,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.5.0";
+var packageVersion = "3.6.0";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
@@ -114,7 +114,9 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
         _this$props$showDefau = _this$props.showDefaultSwatchColor,
         showDefaultSwatchColor = _this$props$showDefau === void 0 ? true : _this$props$showDefau,
         isDisabledSelectedSwatch = _this$props.isDisabledSelectedSwatch,
-        intl = _this$props.intl;
+        intl = _this$props.intl,
+        _this$props$variant = _this$props.variant,
+        variant = _this$props$variant === void 0 ? 'fill' : _this$props$variant;
       var _getOptions = getOptions(palette, selectedColor, showDefaultSwatchColor),
         options = _getOptions.options,
         value = _getOptions.value;
@@ -131,7 +133,8 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
             expanded: isOpen,
             swatchSize: selectedColourSwatchSize,
             isDisabled: isDisabledSelectedSwatch,
-            id: triggerId
+            id: triggerId,
+            variant: variant
           })));
         },
         popperProps: popperProps,
@@ -150,6 +153,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
         ,
         cols: cols,
         checkMarkColor: checkMarkColor,
+        variant: variant,
         onKeyDown: this.onKeyDown,
         isTabbing: this.state.isTabbing,
         onOptionKeyDown: this.onOptionKeyDown

package/dist/esm/components/Trigger.js

@@ -16,7 +16,9 @@ var ColorCard = function ColorCard(_ref) {
     _ref$swatchSize = _ref.swatchSize,
     swatchSize = _ref$swatchSize === void 0 ? 'default' : _ref$swatchSize,
     isDisabled = _ref.isDisabled,
-    id = _ref.id;
+    id = _ref.id,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'fill' : _ref$variant;
   var handleMouseDown = useCallback(function (event) {
     event.preventDefault();
   }, []);
@@ -27,6 +29,12 @@ var ColorCard = function ColorCard(_ref) {
       onClick();
     }
   }, [onClick]);
+  var isOutlineVariant = fg('thor_colourful_single_select_milestone1_gate') && variant === 'outline';
+  var colorCardStyles = isOutlineVariant ? {
+    borderColor: value || 'grey'
+  } : {
+    backgroundColor: value || 'transparent'
+  };
   return jsx(Tooltip, {
     content: label
   }, jsx("button", {
@@ -42,10 +50,10 @@ var ColorCard = function ColorCard(_ref) {
   }, jsx("span", {
     css: colorCardWrapperStyles
   }, jsx("span", {
-    css: [colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize],
-    style: {
-      background: value || 'transparent'
-    }
+    css: [isOutlineVariant ? colorCardContentStylesOutline : colorCardContentStyles, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: colorCardStyles
   }))));
 };
 export default ColorCard;
@@ -97,6 +105,11 @@ var colorCardContentStyles = css({
   borderRadius: "var(--ds-border-radius-100, 3px)",
   boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(DN600A, ")"))
 });
+var colorCardContentStylesOutline = css({
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  borderWidth: "var(--ds-border-width-outline, 2px)",
+  borderStyle: 'solid'
+});
 var smallColorCardContentSize = css({
   width: "var(--ds-space-200, 16px)",
   height: "var(--ds-space-200, 16px)"

package/dist/esm/components/components.js

@@ -11,7 +11,6 @@ import { css, jsx } from '@emotion/react';
 import { COLOR_PICKER } from '../constants';
 import { useIntl } from 'react-intl-next';
 import messages from '../messages';
-import { fg } from '@atlaskit/platform-feature-flags';
 export var MenuList = function MenuList(props) {
   var cols = props.selectProps.cols,
     innerRef = props.innerRef,
@@ -20,7 +19,7 @@ export var MenuList = function MenuList(props) {
     formatMessage = _useIntl.formatMessage;
   return jsx("div", {
     css: colorPaletteContainerStyles,
-    role: fg('jsw_roadmaps_fix-color-picker-roles') ? 'group' : 'listbox',
+    role: "group",
     "aria-label": formatMessage(messages.menuListAriaLabel),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -39,16 +38,16 @@ export var Option = function Option(props) {
     checkMarkColor = _props$selectProps.checkMarkColor,
     onOptionKeyDown = _props$selectProps.onOptionKeyDown,
     isTabbing = _props$selectProps.isTabbing,
+    variant = _props$selectProps.variant,
     isFocused = props.isFocused,
     isSelected = props.isSelected,
     innerProps = props.innerProps;
   return jsx("div", _extends({
     css: colorCardWrapperStyles
-  }, innerProps, fg('jsw_roadmaps_fix-color-picker-roles') && {
-    role: 'radio',
-    'aria-checked': isSelected,
-    'aria-selected': undefined
-  }, {
+  }, innerProps, {
+    role: "radio",
+    "aria-checked": isSelected,
+    "aria-selected": undefined,
     "aria-label": label
   }), jsx(ColorCard, {
     type: COLOR_PICKER,
@@ -61,7 +60,8 @@ export var Option = function Option(props) {
     onKeyDown: function onKeyDown(value) {
       return onOptionKeyDown(value);
     },
-    isTabbing: isTabbing
+    isTabbing: isTabbing,
+    variant: variant
   }));
 };
 export var DropdownIndicator = function DropdownIndicator() {

package/dist/types/components/ColorCard.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import React, { type KeyboardEventHandler, type Ref } from 'react';
-import type { ColorCardType } from '../types';
+import type { ColorCardType, ColorCardVariant } from '../types';
 export interface Props {
     autoFocus?: boolean;
     initialFocusRef?: Ref<HTMLDivElement>;
@@ -18,6 +18,7 @@ export interface Props {
     focused?: boolean;
     isOption?: boolean;
     isTabbing?: boolean;
+    variant?: ColorCardVariant;
 }
 export type ColorCardRef = {
     focus: () => void;

package/dist/types/components/ColorPaletteMenu.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { type KeyboardEvent, type MouseEvent, type Ref } from 'react';
-import { Mode, type Palette } from '../types';
+import { Mode, type Palette, type ColorCardVariant } from '../types';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { jsx } from '@emotion/react';
 export type Props = {
@@ -31,7 +31,9 @@ export type Props = {
     mode?: Mode;
     /** the ref object (usually the currently selected color palette) that consumer can leverage to focus on load */
     initialFocusRef?: Ref<HTMLDivElement>;
+    /** Variant of color card */
+    variant?: ColorCardVariant;
 };
-export declare const ColorPaletteMenuWithoutAnalytics: ({ autoFocus, isFocusLockEnabled, isInsideMenu, createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, }: Props) => jsx.JSX.Element;
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "autoFocus" | "onChange" | "initialFocusRef" | "isInsideMenu" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "mode"> & import("react").RefAttributes<any>>;
+export declare const ColorPaletteMenuWithoutAnalytics: ({ autoFocus, isFocusLockEnabled, isInsideMenu, createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, variant, }: Props) => jsx.JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "variant" | "analyticsContext" | "key" | "autoFocus" | "onChange" | "initialFocusRef" | "isInsideMenu" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "mode"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types/components/ColorPicker.d.ts

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { type PopupSelectProps } from '@atlaskit/select';
-import { type Palette, type SwatchSize } from '../types';
+import { type Palette, type SwatchSize, type ColorCardVariant } from '../types';
 import type { WrappedComponentProps } from 'react-intl-next';
 export interface Props {
     /** color picker button label */
@@ -33,11 +33,13 @@ export interface Props {
     isDisabledSelectedSwatch?: boolean;
     /** onMenuOpen handler */
     onMenuOpen?: () => void;
+    /** Display filled or outline variant of the color */
+    variant?: ColorCardVariant;
 }
 export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
 declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Omit<Props & WrappedComponentProps, "intl"> & {
     forwardedRef?: React.Ref<any> | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "onMenuOpen" | "palette" | "triggerId" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "variant" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "onMenuOpen" | "palette" | "triggerId" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/components/Trigger.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { type SwatchSize } from '../types';
+import { type SwatchSize, type ColorCardVariant } from '../types';
 export interface Props {
     value: string;
     label?: string;
@@ -8,6 +8,7 @@ export interface Props {
     swatchSize?: SwatchSize;
     isDisabled?: boolean;
     id?: string;
+    variant?: ColorCardVariant;
 }
-declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, }: Props) => jsx.JSX.Element;
+declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, variant, }: Props) => jsx.JSX.Element;
 export default ColorCard;

package/dist/types/types.d.ts

@@ -9,4 +9,5 @@ export declare enum Mode {
     Compact = 0,
     Standard = 1
 }
+export type ColorCardVariant = 'fill' | 'outline';
 export type SwatchSize = 'small' | 'default';

package/dist/types-ts4.5/components/ColorCard.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import React, { type KeyboardEventHandler, type Ref } from 'react';
-import type { ColorCardType } from '../types';
+import type { ColorCardType, ColorCardVariant } from '../types';
 export interface Props {
     autoFocus?: boolean;
     initialFocusRef?: Ref<HTMLDivElement>;
@@ -18,6 +18,7 @@ export interface Props {
     focused?: boolean;
     isOption?: boolean;
     isTabbing?: boolean;
+    variant?: ColorCardVariant;
 }
 export type ColorCardRef = {
     focus: () => void;

package/dist/types-ts4.5/components/ColorPaletteMenu.d.ts

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import { type KeyboardEvent, type MouseEvent, type Ref } from 'react';
-import { Mode, type Palette } from '../types';
+import { Mode, type Palette, type ColorCardVariant } from '../types';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { jsx } from '@emotion/react';
 export type Props = {
@@ -31,7 +31,9 @@ export type Props = {
     mode?: Mode;
     /** the ref object (usually the currently selected color palette) that consumer can leverage to focus on load */
     initialFocusRef?: Ref<HTMLDivElement>;
+    /** Variant of color card */
+    variant?: ColorCardVariant;
 };
-export declare const ColorPaletteMenuWithoutAnalytics: ({ autoFocus, isFocusLockEnabled, isInsideMenu, createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, }: Props) => jsx.JSX.Element;
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "autoFocus" | "onChange" | "initialFocusRef" | "isInsideMenu" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "mode"> & import("react").RefAttributes<any>>;
+export declare const ColorPaletteMenuWithoutAnalytics: ({ autoFocus, isFocusLockEnabled, isInsideMenu, createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, variant, }: Props) => jsx.JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "variant" | "analyticsContext" | "key" | "autoFocus" | "onChange" | "initialFocusRef" | "isInsideMenu" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "mode"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/ColorPicker.d.ts

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { type PopupSelectProps } from '@atlaskit/select';
-import { type Palette, type SwatchSize } from '../types';
+import { type Palette, type SwatchSize, type ColorCardVariant } from '../types';
 import type { WrappedComponentProps } from 'react-intl-next';
 export interface Props {
     /** color picker button label */
@@ -33,11 +33,13 @@ export interface Props {
     isDisabledSelectedSwatch?: boolean;
     /** onMenuOpen handler */
     onMenuOpen?: () => void;
+    /** Display filled or outline variant of the color */
+    variant?: ColorCardVariant;
 }
 export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
 };
 declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Omit<Props & WrappedComponentProps, "intl"> & {
     forwardedRef?: React.Ref<any> | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "onMenuOpen" | "palette" | "triggerId" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "variant" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "onMenuOpen" | "palette" | "triggerId" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/components/Trigger.d.ts

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { type SwatchSize } from '../types';
+import { type SwatchSize, type ColorCardVariant } from '../types';
 export interface Props {
     value: string;
     label?: string;
@@ -8,6 +8,7 @@ export interface Props {
     swatchSize?: SwatchSize;
     isDisabled?: boolean;
     id?: string;
+    variant?: ColorCardVariant;
 }
-declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, }: Props) => jsx.JSX.Element;
+declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, variant, }: Props) => jsx.JSX.Element;
 export default ColorCard;

package/dist/types-ts4.5/types.d.ts

@@ -9,4 +9,5 @@ export declare enum Mode {
     Compact = 0,
     Standard = 1
 }
+export type ColorCardVariant = 'fill' | 'outline';
 export type SwatchSize = 'small' | 'default';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.5.0",
+	"version": "3.6.0",
 	"description": "Jira Color Picker Component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,9 +30,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/icon": "^22.25.0",
+		"@atlaskit/icon": "^22.26.0",
 		"@atlaskit/platform-feature-flags": "0.3.0",
-		"@atlaskit/select": "^18.5.0",
+		"@atlaskit/select": "^18.6.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.3.0",
 		"@atlaskit/tooltip": "^18.9.0",
@@ -79,7 +79,7 @@
 		"platform-design-system-dsp-20821-color-pickr-focus": {
 			"type": "boolean"
 		},
-		"jsw_roadmaps_fix-color-picker-roles": {
+		"thor_colourful_single_select_milestone1_gate": {
 			"type": "boolean"
 		},
 		"one_event_rules_them_all_fg": {