@atlaskit/color-picker 3.2.6 → 3.2.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/color-picker
 
+## 3.2.7
+
+### Patch Changes
+
+- [#91022](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91022) [`bb3ea561f66a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bb3ea561f66a) - [ux] Refactored UI to align with spacing token adoption
+
 ## 3.2.6
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -63,7 +63,32 @@ var ColorCard = function ColorCard(props) {
       };
     }
   }, []);
-  return (0, _react2.jsx)(_tooltip.default, {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? (0, _react2.jsx)(_tooltip.default, {
+    content: label
+  }, (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: [sharedColorContainerStylesNew, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onKeyDown: handleKeyDown,
+    role: "radio",
+    "aria-checked": selected,
+    "aria-label": label,
+    tabIndex: 0
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') && {
+    ref: ref
+  }), (0, _react2.jsx)("div", {
+    css: colorCardWrapperStylesNew
+  }, (0, _react2.jsx)("div", {
+    css: colorCardContentStylesNew,
+    style: {
+      background: value || 'transparent'
+    }
+  }, selected && (0, _react2.jsx)("div", {
+    css: colorCardContentCheckMarkStyles
+  }, (0, _react2.jsx)(_done.default, {
+    primaryColor: checkMarkColor,
+    label: ""
+  })))))) : (0, _react2.jsx)(_tooltip.default, {
     content: label
   }, (0, _react2.jsx)("div", (0, _extends2.default)({
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
@@ -124,4 +149,32 @@ var colorCardContentStyles = (0, _react2.css)({
 var colorCardContentCheckMarkStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '1px'
+});
+var sharedColorContainerStylesNew = (0, _react2.css)({
+  display: 'inline-block',
+  position: 'relative',
+  width: "var(--ds-space-300, 32px)",
+  height: "var(--ds-space-300, 32px)",
+  border: '2px solid transparent',
+  boxSizing: 'border-box',
+  borderRadius: "var(--ds-border-radius-200, 6px)",
+  transition: 'border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")"),
+  borderColor: "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")"),
+  padding: "var(--ds-space-0, 0px)",
+  cursor: 'pointer',
+  outline: 'none'
+});
+var colorCardWrapperStylesNew = (0, _react2.css)({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var colorCardContentStylesNew = (0, _react2.css)({
+  width: "var(--ds-space-300, 24px)",
+  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, ")"))
 });

package/dist/cjs/components/ColorPaletteMenu.js

@@ -12,6 +12,7 @@ var _utils = require("../utils");
 var _react = require("@emotion/react");
 var _constants = require("../constants");
 var _colors = require("@atlaskit/theme/colors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /** @jsx jsx */
 
 var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAnalytics(_ref) {
@@ -35,7 +36,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.6"
+          packageVersion: "3.2.7"
         }
       })(createAnalyticsEvent);
     }
@@ -61,7 +62,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
     var label = _ref2.label,
       value = _ref2.value;
     return (0, _react.jsx)("div", {
-      css: colorCardWrapperStyles,
+      css: (0, _platformFeatureFlags.getBooleanFF)('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? colorCardWrapperStyles : colorCardWrapperStylesOld,
       key: value
     }, (0, _react.jsx)(_ColorCard.default, {
       label: label,
@@ -77,13 +78,18 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.6"
+  packageVersion: "3.2.7"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
-var colorCardWrapperStyles = (0, _react.css)({
+var colorCardWrapperStylesOld = (0, _react.css)({
   display: 'flex',
   margin: "var(--ds-space-025, 2px)",
   height: "".concat(_constants.COLOR_CARD_SIZE, "px")
 });
+var colorCardWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  margin: "var(--ds-space-025, 2px)",
+  height: "var(--ds-space-400, 32px)"
+});
 var colorPaletteContainerStyles = (0, _react.css)({
   display: 'flex',
   flexWrap: 'wrap',

package/dist/cjs/components/ColorPicker.js

@@ -38,7 +38,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.6";
+var packageVersion = "3.2.7";
 var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalytics);

package/dist/cjs/components/Trigger.js

@@ -32,7 +32,31 @@ var ColorCard = function ColorCard(_ref) {
       onClick();
     }
   }, [onClick]);
-  return (0, _react2.jsx)(_tooltip.default, {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? (0, _react2.jsx)(_tooltip.default, {
+    content: label
+  }, (0, _react2.jsx)("button", (0, _extends2.default)({}, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') ? {
+    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSizeNew : defaultColorContainerSizeNew, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+    disabled: isDisabled
+  } : {
+    css: [sharedColorContainerStyles, defaultColorContainerSizeNew, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles]
+  }, {
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    "aria-label": label,
+    "aria-expanded": expanded,
+    "aria-haspopup": true,
+    type: "button"
+  }), (0, _react2.jsx)("span", {
+    css: colorCardWrapperStylesNew
+  }, (0, _react2.jsx)("span", (0, _extends2.default)({}, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') ? {
+    css: [colorCardContentStylesNew, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
+  } : {
+    css: [colorCardContentStylesNew, defaultColorCardContentSize]
+  }, {
+    style: {
+      background: value || 'transparent'
+    }
+  }))))) : (0, _react2.jsx)(_tooltip.default, {
     content: label
   }, (0, _react2.jsx)("button", (0, _extends2.default)({}, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') ? {
     css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
@@ -75,10 +99,19 @@ var smallColorContainerSize = (0, _react2.css)({
   height: '22px',
   top: "var(--ds-space-negative-025, -2px)"
 });
+var smallColorContainerSizeNew = (0, _react2.css)({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)",
+  top: "var(--ds-space-negative-025, -2px)"
+});
 var defaultColorContainerSize = (0, _react2.css)({
   width: "".concat(_constants.COLOR_CARD_SIZE, "px"),
   height: "".concat(_constants.COLOR_CARD_SIZE, "px")
 });
+var defaultColorContainerSizeNew = (0, _react2.css)({
+  width: "var(--ds-space-400, 32px)",
+  height: "var(--ds-space-400, 32px)"
+});
 var colorCardButtonStyles = (0, _react2.css)({
   ':hover': {
     borderColor: "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")")
@@ -99,6 +132,17 @@ 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 colorCardWrapperStylesNew = (0, _react2.css)({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var colorCardContentStylesNew = (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 smallColorCardContentSize = (0, _react2.css)({
   width: "var(--ds-space-200, 16px)",
   height: "var(--ds-space-200, 16px)"

package/dist/cjs/components/components.js

@@ -10,6 +10,7 @@ var _ColorCard = _interopRequireDefault(require("./ColorCard"));
 var _utils = require("../utils");
 var _constants = require("../constants");
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /** @jsx jsx */
 
 var MenuList = exports.MenuList = function MenuList(props) {
@@ -37,7 +38,7 @@ var Option = exports.Option = function Option(props) {
     isSelected = props.isSelected,
     innerProps = props.innerProps;
   return (0, _react.jsx)("div", (0, _extends2.default)({
-    css: colorCardWrapperStyles
+    css: (0, _platformFeatureFlags.getBooleanFF)('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? colorCardWrapperStyles : colorCardWrapperStylesOld
   }, innerProps), (0, _react.jsx)(_ColorCard.default, {
     label: label,
     value: value,
@@ -57,11 +58,16 @@ var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator()
 var Placeholder = exports.Placeholder = function Placeholder() {
   return null;
 };
-var colorCardWrapperStyles = (0, _react.css)({
+var colorCardWrapperStylesOld = (0, _react.css)({
   display: 'flex',
   margin: "var(--ds-space-025, 2px)",
   height: "".concat(_constants.COLOR_CARD_SIZE, "px")
 });
+var colorCardWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  margin: "var(--ds-space-025, 2px)",
+  height: "var(--ds-space-400, 32px)"
+});
 var colorPaletteContainerStyles = (0, _react.css)({
   display: 'flex',
   flexWrap: 'wrap',

package/dist/cjs/constants.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KEY_TAB = exports.KEY_SPACE = exports.KEY_ENTER = exports.KEY_ARROW_UP = exports.KEY_ARROW_DOWN = exports.COLOR_CARD_SIZE = void 0;
+exports.KEY_TAB = exports.KEY_SPACE = exports.KEY_ENTER = exports.KEY_ARROW_UP = exports.KEY_ARROW_DOWN = exports.COLOR_CARD_SIZE_NEW = exports.COLOR_CARD_SIZE = void 0;
 var COLOR_CARD_SIZE = exports.COLOR_CARD_SIZE = 30;
+var COLOR_CARD_SIZE_NEW = exports.COLOR_CARD_SIZE_NEW = 32;
 var KEY_SPACE = exports.KEY_SPACE = ' ';
 var KEY_ENTER = exports.KEY_ENTER = 'Enter';
 var KEY_ARROW_UP = exports.KEY_ARROW_UP = 'ArrowDown';

package/dist/cjs/utils.js

@@ -14,7 +14,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 var getWidth = exports.getWidth = function getWidth(cols, mode) {
-  var width = cols * (_constants.COLOR_CARD_SIZE + (0, _theme.gridSize)() / 2);
+  var width = cols * (((0, _platformFeatureFlags.getBooleanFF)('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? _constants.COLOR_CARD_SIZE_NEW : _constants.COLOR_CARD_SIZE) + (0, _theme.gridSize)() / 2);
   return mode === _types.Mode.Standard ? width + (0, _theme.gridSize)() : width;
 };
 var getOptions = exports.getOptions = (0, _memoizeOne.default)(function (palette, selectedColor, showDefaultSwatchColor) {

package/dist/es2019/components/ColorCard.js

@@ -56,7 +56,32 @@ const ColorCard = props => {
       };
     }
   }, []);
-  return jsx(Tooltip, {
+  return getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? jsx(Tooltip, {
+    content: label
+  }, jsx("div", _extends({
+    css: [sharedColorContainerStylesNew, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onKeyDown: handleKeyDown,
+    role: "radio",
+    "aria-checked": selected,
+    "aria-label": label,
+    tabIndex: 0
+  }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
+    ref: ref
+  }), jsx("div", {
+    css: colorCardWrapperStylesNew
+  }, jsx("div", {
+    css: colorCardContentStylesNew,
+    style: {
+      background: value || 'transparent'
+    }
+  }, selected && jsx("div", {
+    css: colorCardContentCheckMarkStyles
+  }, jsx(EditorDoneIcon, {
+    primaryColor: checkMarkColor,
+    label: ""
+  })))))) : jsx(Tooltip, {
     content: label
   }, jsx("div", _extends({
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
@@ -117,4 +142,32 @@ const colorCardContentStyles = css({
 const colorCardContentCheckMarkStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '1px'
+});
+const sharedColorContainerStylesNew = css({
+  display: 'inline-block',
+  position: 'relative',
+  width: "var(--ds-space-300, 32px)",
+  height: "var(--ds-space-300, 32px)",
+  border: '2px solid transparent',
+  boxSizing: 'border-box',
+  borderRadius: "var(--ds-border-radius-200, 6px)",
+  transition: 'border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+  backgroundColor: `var(--ds-background-neutral-subtle, ${N0})`,
+  borderColor: `var(--ds-background-neutral-subtle, ${N0})`,
+  padding: "var(--ds-space-0, 0px)",
+  cursor: 'pointer',
+  outline: 'none'
+});
+const colorCardWrapperStylesNew = css({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+const colorCardContentStylesNew = css({
+  width: "var(--ds-space-300, 24px)",
+  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})`}`
 });

package/dist/es2019/components/ColorPaletteMenu.js

@@ -6,6 +6,7 @@ import { getOptions, getWidth } from '../utils';
 import { css, jsx } from '@emotion/react';
 import { COLOR_CARD_SIZE } from '../constants';
 import { N0, N40 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const ColorPaletteMenuWithoutAnalytics = ({
   createAnalyticsEvent,
   onChange,
@@ -25,7 +26,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.6"
+          packageVersion: "3.2.7"
         }
       })(createAnalyticsEvent);
     }
@@ -52,7 +53,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
     label,
     value
   }) => jsx("div", {
-    css: colorCardWrapperStyles,
+    css: getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? colorCardWrapperStyles : colorCardWrapperStylesOld,
     key: value
   }, jsx(ColorCard, {
     label: label,
@@ -67,13 +68,18 @@ export const ColorPaletteMenuWithoutAnalytics = ({
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.6"
+  packageVersion: "3.2.7"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
-const colorCardWrapperStyles = css({
+const colorCardWrapperStylesOld = css({
   display: 'flex',
   margin: "var(--ds-space-025, 2px)",
   height: `${COLOR_CARD_SIZE}px`
 });
+const colorCardWrapperStyles = css({
+  display: 'flex',
+  margin: "var(--ds-space-025, 2px)",
+  height: "var(--ds-space-400, 32px)"
+});
 const colorPaletteContainerStyles = css({
   display: 'flex',
   flexWrap: 'wrap',

package/dist/es2019/components/ColorPicker.js

@@ -21,7 +21,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.2.6";
+const packageVersion = "3.2.7";
 export class ColorPickerWithoutAnalytics extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/Trigger.js

@@ -24,7 +24,31 @@ const ColorCard = ({
       onClick();
     }
   }, [onClick]);
-  return jsx(Tooltip, {
+  return getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? jsx(Tooltip, {
+    content: label
+  }, jsx("button", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
+    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSizeNew : defaultColorContainerSizeNew, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+    disabled: isDisabled
+  } : {
+    css: [sharedColorContainerStyles, defaultColorContainerSizeNew, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles]
+  }, {
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    "aria-label": label,
+    "aria-expanded": expanded,
+    "aria-haspopup": true,
+    type: "button"
+  }), jsx("span", {
+    css: colorCardWrapperStylesNew
+  }, jsx("span", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
+    css: [colorCardContentStylesNew, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
+  } : {
+    css: [colorCardContentStylesNew, defaultColorCardContentSize]
+  }, {
+    style: {
+      background: value || 'transparent'
+    }
+  }))))) : jsx(Tooltip, {
     content: label
   }, jsx("button", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
     css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
@@ -67,10 +91,19 @@ const smallColorContainerSize = css({
   height: '22px',
   top: "var(--ds-space-negative-025, -2px)"
 });
+const smallColorContainerSizeNew = css({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)",
+  top: "var(--ds-space-negative-025, -2px)"
+});
 const defaultColorContainerSize = css({
   width: `${COLOR_CARD_SIZE}px`,
   height: `${COLOR_CARD_SIZE}px`
 });
+const defaultColorContainerSizeNew = css({
+  width: "var(--ds-space-400, 32px)",
+  height: "var(--ds-space-400, 32px)"
+});
 const colorCardButtonStyles = css({
   ':hover': {
     borderColor: `var(--ds-background-neutral-subtle, ${N0})`
@@ -91,6 +124,17 @@ const colorCardContentStyles = css({
   borderRadius: "var(--ds-border-radius-100, 3px)",
   boxShadow: `inset 0px 0px 0px 1px ${`var(--ds-background-inverse-subtle, ${DN600A})`}`
 });
+const colorCardWrapperStylesNew = css({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+const colorCardContentStylesNew = css({
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxShadow: `inset 0px 0px 0px 1px ${`var(--ds-background-inverse-subtle, ${DN600A})`}`
+});
 const smallColorCardContentSize = css({
   width: "var(--ds-space-200, 16px)",
   height: "var(--ds-space-200, 16px)"

package/dist/es2019/components/components.js

@@ -5,6 +5,7 @@ import ColorCard from './ColorCard';
 import { getWidth } from '../utils';
 import { COLOR_CARD_SIZE } from '../constants';
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const MenuList = props => {
   const {
     selectProps: {
@@ -38,7 +39,7 @@ export const Option = props => {
     innerProps
   } = props;
   return jsx("div", _extends({
-    css: colorCardWrapperStyles
+    css: getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? colorCardWrapperStyles : colorCardWrapperStylesOld
   }, innerProps), jsx(ColorCard, {
     label: label,
     value: value,
@@ -52,11 +53,16 @@ export const Option = props => {
 };
 export const DropdownIndicator = () => null;
 export const Placeholder = () => null;
-const colorCardWrapperStyles = css({
+const colorCardWrapperStylesOld = css({
   display: 'flex',
   margin: "var(--ds-space-025, 2px)",
   height: `${COLOR_CARD_SIZE}px`
 });
+const colorCardWrapperStyles = css({
+  display: 'flex',
+  margin: "var(--ds-space-025, 2px)",
+  height: "var(--ds-space-400, 32px)"
+});
 const colorPaletteContainerStyles = css({
   display: 'flex',
   flexWrap: 'wrap',

package/dist/es2019/constants.js

@@ -1,4 +1,5 @@
 export const COLOR_CARD_SIZE = 30;
+export const COLOR_CARD_SIZE_NEW = 32;
 export const KEY_SPACE = ' ';
 export const KEY_ENTER = 'Enter';
 export const KEY_ARROW_UP = 'ArrowDown';

package/dist/es2019/utils.js

@@ -1,12 +1,12 @@
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { gridSize } from '@atlaskit/theme';
-import { COLOR_CARD_SIZE } from './constants';
+import { COLOR_CARD_SIZE, COLOR_CARD_SIZE_NEW } from './constants';
 import memoizeOne from 'memoize-one';
 import { Mode } from './types';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const getWidth = (cols, mode) => {
-  const width = cols * (COLOR_CARD_SIZE + gridSize() / 2);
+  const width = cols * ((getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? COLOR_CARD_SIZE_NEW : COLOR_CARD_SIZE) + gridSize() / 2);
   return mode === Mode.Standard ? width + gridSize() : width;
 };
 export const getOptions = memoizeOne((palette, selectedColor, showDefaultSwatchColor) => {

package/dist/esm/components/ColorCard.js

@@ -52,7 +52,32 @@ var ColorCard = function ColorCard(props) {
       };
     }
   }, []);
-  return jsx(Tooltip, {
+  return getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? jsx(Tooltip, {
+    content: label
+  }, jsx("div", _extends({
+    css: [sharedColorContainerStylesNew, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onKeyDown: handleKeyDown,
+    role: "radio",
+    "aria-checked": selected,
+    "aria-label": label,
+    tabIndex: 0
+  }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
+    ref: ref
+  }), jsx("div", {
+    css: colorCardWrapperStylesNew
+  }, jsx("div", {
+    css: colorCardContentStylesNew,
+    style: {
+      background: value || 'transparent'
+    }
+  }, selected && jsx("div", {
+    css: colorCardContentCheckMarkStyles
+  }, jsx(EditorDoneIcon, {
+    primaryColor: checkMarkColor,
+    label: ""
+  })))))) : jsx(Tooltip, {
     content: label
   }, jsx("div", _extends({
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
@@ -113,4 +138,32 @@ var colorCardContentStyles = css({
 var colorCardContentCheckMarkStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   margin: '1px'
+});
+var sharedColorContainerStylesNew = css({
+  display: 'inline-block',
+  position: 'relative',
+  width: "var(--ds-space-300, 32px)",
+  height: "var(--ds-space-300, 32px)",
+  border: '2px solid transparent',
+  boxSizing: 'border-box',
+  borderRadius: "var(--ds-border-radius-200, 6px)",
+  transition: 'border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+  backgroundColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")"),
+  borderColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")"),
+  padding: "var(--ds-space-0, 0px)",
+  cursor: 'pointer',
+  outline: 'none'
+});
+var colorCardWrapperStylesNew = css({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var colorCardContentStylesNew = css({
+  width: "var(--ds-space-300, 24px)",
+  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, ")"))
 });

package/dist/esm/components/ColorPaletteMenu.js

@@ -6,6 +6,7 @@ import { getOptions, getWidth } from '../utils';
 import { css, jsx } from '@emotion/react';
 import { COLOR_CARD_SIZE } from '../constants';
 import { N0, N40 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAnalytics(_ref) {
   var createAnalyticsEvent = _ref.createAnalyticsEvent,
     onChange = _ref.onChange,
@@ -27,7 +28,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.6"
+          packageVersion: "3.2.7"
         }
       })(createAnalyticsEvent);
     }
@@ -53,7 +54,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
     var label = _ref2.label,
       value = _ref2.value;
     return jsx("div", {
-      css: colorCardWrapperStyles,
+      css: getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? colorCardWrapperStyles : colorCardWrapperStylesOld,
       key: value
     }, jsx(ColorCard, {
       label: label,
@@ -69,13 +70,18 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.6"
+  packageVersion: "3.2.7"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
-var colorCardWrapperStyles = css({
+var colorCardWrapperStylesOld = css({
   display: 'flex',
   margin: "var(--ds-space-025, 2px)",
   height: "".concat(COLOR_CARD_SIZE, "px")
 });
+var colorCardWrapperStyles = css({
+  display: 'flex',
+  margin: "var(--ds-space-025, 2px)",
+  height: "var(--ds-space-400, 32px)"
+});
 var colorPaletteContainerStyles = css({
   display: 'flex',
   flexWrap: 'wrap',

package/dist/esm/components/ColorPicker.js

@@ -29,7 +29,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.6";
+var packageVersion = "3.2.7";
 export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalytics);

package/dist/esm/components/Trigger.js

@@ -24,7 +24,31 @@ var ColorCard = function ColorCard(_ref) {
       onClick();
     }
   }, [onClick]);
-  return jsx(Tooltip, {
+  return getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? jsx(Tooltip, {
+    content: label
+  }, jsx("button", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
+    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSizeNew : defaultColorContainerSizeNew, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+    disabled: isDisabled
+  } : {
+    css: [sharedColorContainerStyles, defaultColorContainerSizeNew, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles]
+  }, {
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    "aria-label": label,
+    "aria-expanded": expanded,
+    "aria-haspopup": true,
+    type: "button"
+  }), jsx("span", {
+    css: colorCardWrapperStylesNew
+  }, jsx("span", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
+    css: [colorCardContentStylesNew, swatchSize === 'small' ? smallColorCardContentSize : defaultColorCardContentSize]
+  } : {
+    css: [colorCardContentStylesNew, defaultColorCardContentSize]
+  }, {
+    style: {
+      background: value || 'transparent'
+    }
+  }))))) : jsx(Tooltip, {
     content: label
   }, jsx("button", _extends({}, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') ? {
     css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
@@ -67,10 +91,19 @@ var smallColorContainerSize = css({
   height: '22px',
   top: "var(--ds-space-negative-025, -2px)"
 });
+var smallColorContainerSizeNew = css({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)",
+  top: "var(--ds-space-negative-025, -2px)"
+});
 var defaultColorContainerSize = css({
   width: "".concat(COLOR_CARD_SIZE, "px"),
   height: "".concat(COLOR_CARD_SIZE, "px")
 });
+var defaultColorContainerSizeNew = css({
+  width: "var(--ds-space-400, 32px)",
+  height: "var(--ds-space-400, 32px)"
+});
 var colorCardButtonStyles = css({
   ':hover': {
     borderColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")")
@@ -91,6 +124,17 @@ 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 colorCardWrapperStylesNew = css({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+var colorCardContentStylesNew = css({
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxShadow: "inset 0px 0px 0px 1px ".concat("var(--ds-background-inverse-subtle, ".concat(DN600A, ")"))
+});
 var smallColorCardContentSize = css({
   width: "var(--ds-space-200, 16px)",
   height: "var(--ds-space-200, 16px)"

package/dist/esm/components/components.js

@@ -5,6 +5,7 @@ import ColorCard from './ColorCard';
 import { getWidth } from '../utils';
 import { COLOR_CARD_SIZE } from '../constants';
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var MenuList = function MenuList(props) {
   var cols = props.selectProps.cols,
     innerRef = props.innerRef,
@@ -30,7 +31,7 @@ export var Option = function Option(props) {
     isSelected = props.isSelected,
     innerProps = props.innerProps;
   return jsx("div", _extends({
-    css: colorCardWrapperStyles
+    css: getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? colorCardWrapperStyles : colorCardWrapperStylesOld
   }, innerProps), jsx(ColorCard, {
     label: label,
     value: value,
@@ -50,11 +51,16 @@ export var DropdownIndicator = function DropdownIndicator() {
 export var Placeholder = function Placeholder() {
   return null;
 };
-var colorCardWrapperStyles = css({
+var colorCardWrapperStylesOld = css({
   display: 'flex',
   margin: "var(--ds-space-025, 2px)",
   height: "".concat(COLOR_CARD_SIZE, "px")
 });
+var colorCardWrapperStyles = css({
+  display: 'flex',
+  margin: "var(--ds-space-025, 2px)",
+  height: "var(--ds-space-400, 32px)"
+});
 var colorPaletteContainerStyles = css({
   display: 'flex',
   flexWrap: 'wrap',

package/dist/esm/constants.js

@@ -1,4 +1,5 @@
 export var COLOR_CARD_SIZE = 30;
+export var COLOR_CARD_SIZE_NEW = 32;
 export var KEY_SPACE = ' ';
 export var KEY_ENTER = 'Enter';
 export var KEY_ARROW_UP = 'ArrowDown';

package/dist/esm/utils.js

@@ -1,12 +1,12 @@
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { gridSize } from '@atlaskit/theme';
-import { COLOR_CARD_SIZE } from './constants';
+import { COLOR_CARD_SIZE, COLOR_CARD_SIZE_NEW } from './constants';
 import memoizeOne from 'memoize-one';
 import { Mode } from './types';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var getWidth = function getWidth(cols, mode) {
-  var width = cols * (COLOR_CARD_SIZE + gridSize() / 2);
+  var width = cols * ((getBooleanFF('platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl') ? COLOR_CARD_SIZE_NEW : COLOR_CARD_SIZE) + gridSize() / 2);
   return mode === Mode.Standard ? width + gridSize() : width;
 };
 export var getOptions = memoizeOne(function (palette, selectedColor, showDefaultSwatchColor) {

package/dist/types/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const COLOR_CARD_SIZE = 30;
+export declare const COLOR_CARD_SIZE_NEW = 32;
 export declare const KEY_SPACE = " ";
 export declare const KEY_ENTER = "Enter";
 export declare const KEY_ARROW_UP = "ArrowDown";

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

@@ -1,4 +1,5 @@
 export declare const COLOR_CARD_SIZE = 30;
+export declare const COLOR_CARD_SIZE_NEW = 32;
 export declare const KEY_SPACE = " ";
 export declare const KEY_ENTER = "Enter";
 export declare const KEY_ARROW_UP = "ArrowDown";

package/docs/0-intro.tsx

@@ -7,18 +7,41 @@ import {
   AtlassianInternalWarning,
   DevPreviewWarning,
 } from '@atlaskit/docs';
+import { Box, xcss } from '@atlaskit/primitives';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
+const marginBottomStyles = xcss({
+  marginBottom: 'space.100',
+});
+
+const marginTopStyles = xcss({
+  marginBottom: 'space.100',
+});
 
 export default md`
-${(
-  <>
-    <div style={{ marginBottom: '0.5rem' }}>
-      <AtlassianInternalWarning />
-    </div>
-    <div style={{ marginTop: '0.5rem' }}>
-      <DevPreviewWarning />
-    </div>
-  </>
-)}
+${
+  getBooleanFF(
+    'platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl',
+  ) ? (
+    <>
+      <Box xcss={marginBottomStyles}>
+        <AtlassianInternalWarning />
+      </Box>
+      <Box xcss={marginTopStyles}>
+        <DevPreviewWarning />
+      </Box>
+    </>
+  ) : (
+    <>
+      <div style={{ marginBottom: '0.5rem' }}>
+        <AtlassianInternalWarning />
+      </div>
+      <div style={{ marginTop: '0.5rem' }}>
+        <DevPreviewWarning />
+      </div>
+    </>
+  )
+}
 
 This component allows to pick colors from color palette.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "3.2.6",
+  "version": "3.2.7",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,10 +35,10 @@
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.5",
-    "@atlaskit/select": "^17.3.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
-    "@atlaskit/tooltip": "^18.1.0",
+    "@atlaskit/select": "^17.6.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tooltip": "^18.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "memoize-one": "^6.0.0"
@@ -47,6 +47,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@atlaskit/primitives": "^5.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
@@ -78,6 +79,9 @@
   "platform-feature-flags": {
     "platform.color-picker-radio-button-functionality_6hkcy": {
       "type": "boolean"
+    },
+    "platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl": {
+      "type": "boolean"
     }
   }
 }