@atlaskit/color-picker 3.1.8 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/color-picker
 
+## 3.2.0
+
+### Minor Changes
+
+- [#56495](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/56495) [`a755b1922b5e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a755b1922b5e) - [ux] Migrated `styled-components` to `@emotion/react`. There is no expected visual or behaviour change.
+
+## 3.1.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.1.8
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -6,93 +6,101 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
-var _theme = require("@atlaskit/theme");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _ColorCard = require("../styled/ColorCard");
 var _constants = require("../constants");
+var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-var ColorCard = exports.default = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(ColorCard, _PureComponent);
-  var _super = _createSuper(ColorCard);
-  function ColorCard() {
-    var _this;
-    (0, _classCallCheck2.default)(this, ColorCard);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+/** @jsx jsx */
+
+var ColorCard = function ColorCard(props) {
+  var value = props.value,
+    label = props.label,
+    selected = props.selected,
+    focused = props.focused,
+    _props$checkMarkColor = props.checkMarkColor,
+    checkMarkColor = _props$checkMarkColor === void 0 ? "var(--ds-icon-inverse, ".concat(_colors.N0, ")") : _props$checkMarkColor,
+    isTabbing = props.isTabbing,
+    onClick = props.onClick,
+    onKeyDown = props.onKeyDown;
+  var handleMouseDown = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+  }, []);
+  var handleClick = (0, _react.useCallback)(function (event) {
+    if (onClick) {
+      event.preventDefault();
+      onClick(value);
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDown", function (event) {
+  }, [onClick, value]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    var key = event.key;
+    if ((isTabbing === undefined || isTabbing) && onKeyDown && (key === _constants.KEY_ENTER || key === _constants.KEY_SPACE)) {
       event.preventDefault();
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function (event) {
-      var _this$props = _this.props,
-        onClick = _this$props.onClick,
-        value = _this$props.value;
-      if (onClick) {
-        event.preventDefault();
-        onClick(value);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
-      var key = event.key;
-      var _this$props2 = _this.props,
-        onKeyDown = _this$props2.onKeyDown,
-        value = _this$props2.value,
-        isTabbing = _this$props2.isTabbing;
-      if ((isTabbing === undefined || isTabbing) && onKeyDown && (key === _constants.KEY_ENTER || key === _constants.KEY_SPACE)) {
-        event.preventDefault();
-        if (isTabbing) {
-          event.stopPropagation();
-        }
-        onKeyDown(value);
+      if (isTabbing) {
+        event.stopPropagation();
       }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ref", /*#__PURE__*/_react.default.createRef());
-    return _this;
-  }
-  (0, _createClass2.default)(ColorCard, [{
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-        value = _this$props3.value,
-        label = _this$props3.label,
-        selected = _this$props3.selected,
-        focused = _this$props3.focused,
-        _this$props3$checkMar = _this$props3.checkMarkColor,
-        checkMarkColor = _this$props3$checkMar === void 0 ? _theme.colors.N0 : _this$props3$checkMar,
-        isTabbing = _this$props3.isTabbing;
-      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-        content: label
-      }, /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardOption, {
-        onClick: this.onClick,
-        onMouseDown: this.onMouseDown,
-        focused: focused,
-        role: "radio",
-        "aria-checked": selected,
-        "aria-label": label,
-        tabIndex: 0,
-        onKeyDown: this.onKeyDown,
-        isTabbing: isTabbing
-      }, /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardContent, {
-        color: value || 'transparent'
-      }, selected && /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardContentCheckMark, null, /*#__PURE__*/_react.default.createElement(_done.default, {
-        primaryColor: checkMarkColor,
-        label: ""
-      })))));
+      onKeyDown(value);
+    }
+  }, [isTabbing, onKeyDown, value]);
+  return (0, _react2.jsx)(_tooltip.default, {
+    content: label
+  }, (0, _react2.jsx)("div", {
+    css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onKeyDown: handleKeyDown,
+    role: "radio",
+    "aria-checked": selected,
+    "aria-label": label,
+    tabIndex: 0
+  }, (0, _react2.jsx)("div", {
+    css: colorCardContentStyles,
+    style: {
+      background: value || 'transparent'
     }
-  }]);
-  return ColorCard;
-}(_react.PureComponent);
+  }, selected && (0, _react2.jsx)("div", {
+    css: colorCardContentCheckMarkStyles
+  }, (0, _react2.jsx)(_done.default, {
+    primaryColor: checkMarkColor,
+    label: ""
+  })))));
+};
+var _default = exports.default = ColorCard;
+var sharedColorContainerStyles = (0, _react2.css)({
+  display: 'inline-block',
+  position: 'relative',
+  width: "".concat(_constants.COLOR_CARD_SIZE, "px"),
+  height: "".concat(_constants.COLOR_CARD_SIZE, "px"),
+  border: '2px solid transparent',
+  boxSizing: 'border-box',
+  borderRadius: '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 colorCardOptionTabbingStyles = (0, _react2.css)({
+  ':hover, :focus': {
+    borderColor: "var(--ds-border-focused, ".concat(_colors.B75, ")")
+  }
+});
+var colorCardOptionFocusedStyles = (0, _react2.css)({
+  borderColor: "var(--ds-border-focused, ".concat(_colors.B75, ")")
+});
+var colorCardContentStyles = (0, _react2.css)({
+  position: 'absolute',
+  top: '1px',
+  left: '1px',
+  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, ")"))
+});
+var colorCardContentCheckMarkStyles = (0, _react2.css)({
+  margin: '1px'
+});

package/dist/cjs/components/ColorPaletteMenu.js

@@ -5,100 +5,100 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ColorPaletteMenuWithoutAnalytics = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
 var _types = require("../types");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _ColorPalette = require("../styled/ColorPalette");
 var _ColorCard = _interopRequireDefault(require("./ColorCard"));
 var _utils = require("../utils");
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(ColorPaletteMenuWithoutAnalytics, _React$Component);
-  var _super = _createSuper(ColorPaletteMenuWithoutAnalytics);
-  function ColorPaletteMenuWithoutAnalytics() {
-    var _this;
-    (0, _classCallCheck2.default)(this, ColorPaletteMenuWithoutAnalytics);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var _react = require("@emotion/react");
+var _constants = require("../constants");
+var _colors = require("@atlaskit/theme/colors");
+/** @jsx jsx */
+
+var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAnalytics(_ref) {
+  var createAnalyticsEvent = _ref.createAnalyticsEvent,
+    onChange = _ref.onChange,
+    palette = _ref.palette,
+    selectedColor = _ref.selectedColor,
+    checkMarkColor = _ref.checkMarkColor,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Color picker' : _ref$label,
+    _ref$cols = _ref.cols,
+    cols = _ref$cols === void 0 ? 6 : _ref$cols,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? _types.Mode.Standard : _ref$mode;
+  var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
+  var changeAnalyticsCaller = function changeAnalyticsCaller() {
+    if (createAnalyticsEvent) {
+      return createAndFireEventOnAtlaskit({
+        action: 'clicked',
+        actionSubject: 'color-palette-menu',
+        attributes: {
+          componentName: 'color-picker',
+          packageName: "@atlaskit/color-picker",
+          packageVersion: "3.2.0"
+        }
+      })(createAnalyticsEvent);
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createAndFireEventOnAtlaskit", (0, _analyticsNext.createAndFireEvent)('atlaskit'));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeAnalyticsCaller", function () {
-      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
-      if (createAnalyticsEvent) {
-        return _this.createAndFireEventOnAtlaskit({
-          action: 'clicked',
-          actionSubject: 'color-palette-menu',
-          attributes: {
-            componentName: 'color-picker',
-            packageName: "@atlaskit/color-picker",
-            packageVersion: "3.1.8"
-          }
-        })(createAnalyticsEvent);
-      }
-      return undefined;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (value) {
-      _this.props.onChange(value, _this.changeAnalyticsCaller());
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(ColorPaletteMenuWithoutAnalytics, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        palette = _this$props.palette,
-        selectedColor = _this$props.selectedColor,
-        checkMarkColor = _this$props.checkMarkColor,
-        cols = _this$props.cols,
-        _this$props$label = _this$props.label,
-        label = _this$props$label === void 0 ? 'Color picker' : _this$props$label,
-        mode = _this$props.mode;
-      var _getOptions = (0, _utils.getOptions)(palette, selectedColor),
-        options = _getOptions.options,
-        selectedValue = _getOptions.value;
-      var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
-      return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPaletteMenu, {
-        cols: cols,
-        "aria-label": fullLabel,
-        mode: mode,
-        role: "radiogroup"
-      }, /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPaletteContainer, {
-        mode: mode
-      }, options.map(function (_ref) {
-        var label = _ref.label,
-          value = _ref.value;
-        return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorCardWrapper, {
-          key: value
-        }, /*#__PURE__*/_react.default.createElement(_ColorCard.default, {
-          label: label,
-          value: value,
-          checkMarkColor: checkMarkColor,
-          isOption: true,
-          selected: value === selectedValue.value,
-          onClick: _this2.onChange,
-          onKeyDown: _this2.onChange
-        }));
-      })));
+    return undefined;
+  };
+  var handleChange = function handleChange(value) {
+    onChange(value, changeAnalyticsCaller());
+  };
+  var _getOptions = (0, _utils.getOptions)(palette, selectedColor),
+    options = _getOptions.options,
+    selectedValue = _getOptions.value;
+  var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
+  return (0, _react.jsx)("div", {
+    "aria-label": fullLabel,
+    role: "radiogroup",
+    css: [colorPaletteMenuStyles, mode === _types.Mode.Standard && colorPaletteMenuStandardStyles],
+    style: {
+      width: "".concat((0, _utils.getWidth)(cols, mode), "px")
     }
-  }]);
-  return ColorPaletteMenuWithoutAnalytics;
-}(_react.default.Component);
-(0, _defineProperty2.default)(ColorPaletteMenuWithoutAnalytics, "defaultProps", {
-  cols: 6,
-  mode: _types.Mode.Standard
-});
+  }, (0, _react.jsx)("div", {
+    css: [colorPaletteContainerStyles, mode === _types.Mode.Compact && colorPaletteContainerCompactStyles]
+  }, options.map(function (_ref2) {
+    var label = _ref2.label,
+      value = _ref2.value;
+    return (0, _react.jsx)("div", {
+      css: colorCardWrapperStyles,
+      key: value
+    }, (0, _react.jsx)(_ColorCard.default, {
+      label: label,
+      value: value,
+      checkMarkColor: checkMarkColor,
+      isOption: true,
+      selected: value === selectedValue.value,
+      onClick: handleChange,
+      onKeyDown: handleChange
+    }));
+  })));
+};
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.1.8"
-})((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
+  packageVersion: "3.2.0"
+})((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
+var colorCardWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  margin: "var(--ds-space-025, 2px)",
+  height: "".concat(_constants.COLOR_CARD_SIZE, "px")
+});
+var colorPaletteContainerStyles = (0, _react.css)({
+  display: 'flex',
+  flexWrap: 'wrap',
+  padding: "var(--ds-space-050, 4px)"
+});
+var colorPaletteContainerCompactStyles = (0, _react.css)({
+  padding: "var(--ds-space-0, 0)"
+});
+var colorPaletteMenuStyles = (0, _react.css)({
+  display: 'flex',
+  position: 'relative',
+  margin: "var(--ds-space-0, 0)",
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")")
+});
+var colorPaletteMenuStandardStyles = (0, _react.css)({
+  borderRadius: "var(--ds-border-radius-100, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40, ", 0 0 8px ").concat(_colors.N40), ")")
+});

package/dist/cjs/components/ColorPicker.js

@@ -20,12 +20,12 @@ var _Trigger = _interopRequireDefault(require("./Trigger"));
 var components = _interopRequireWildcard(require("./components"));
 var _constants = require("../constants");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _ColorPicker = require("../styled/ColorPicker");
 var _utils = require("../utils");
+var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var defaultPopperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -37,7 +37,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.1.8";
+var packageVersion = "3.2.0";
 var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalytics);
@@ -103,13 +103,14 @@ var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PUR
         options = _getOptions.options,
         value = _getOptions.value;
       var fullLabel = "".concat(label, ", ").concat(value.label, " selected");
-      return /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
+      return (0, _react2.jsx)(_select.PopupSelect, {
         target: function target(_ref) {
           var ref = _ref.ref,
             isOpen = _ref.isOpen;
-          return /*#__PURE__*/_react.default.createElement(_ColorPicker.ColorCardWrapper, {
-            innerRef: ref
-          }, /*#__PURE__*/_react.default.createElement(_Trigger.default, (0, _extends2.default)({}, value, {
+          return (0, _react2.jsx)("div", {
+            css: colorCardWrapperStyles,
+            ref: ref
+          }, (0, _react2.jsx)(_Trigger.default, (0, _extends2.default)({}, value, {
             label: fullLabel,
             expanded: isOpen
           })));
@@ -141,4 +142,7 @@ var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: packageName,
   packageVersion: packageVersion
-})((0, _analyticsNext.withAnalyticsEvents)()(ColorPickerWithoutAnalytics));
+})((0, _analyticsNext.withAnalyticsEvents)()(ColorPickerWithoutAnalytics));
+var colorCardWrapperStyles = (0, _react2.css)({
+  display: 'inline-block'
+});

package/dist/cjs/components/Trigger.js

@@ -5,62 +5,78 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _ColorCard = require("../styled/ColorCard");
+var _react = require("react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var ColorCard = exports.default = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(ColorCard, _React$PureComponent);
-  var _super = _createSuper(ColorCard);
-  function ColorCard() {
-    var _this;
-    (0, _classCallCheck2.default)(this, ColorCard);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDown", function (event) {
+var _react2 = require("@emotion/react");
+var _constants = require("../constants");
+var _colors = require("@atlaskit/theme/colors");
+/** @jsx jsx */
+
+var ColorCard = function ColorCard(_ref) {
+  var value = _ref.value,
+    label = _ref.label,
+    expanded = _ref.expanded,
+    onClick = _ref.onClick;
+  var handleMouseDown = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+  }, []);
+  var handleClick = (0, _react.useCallback)(function (event) {
+    event.currentTarget.focus();
+    if (onClick) {
       event.preventDefault();
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function (event) {
-      var onClick = _this.props.onClick;
-      event.currentTarget.focus();
-      if (onClick) {
-        event.preventDefault();
-        onClick();
-      }
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(ColorCard, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        value = _this$props.value,
-        label = _this$props.label,
-        expanded = _this$props.expanded;
-      return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-        content: label
-      }, /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardButton, {
-        onClick: this.onClick,
-        onMouseDown: this.onMouseDown,
-        focused: expanded,
-        "aria-label": label,
-        "aria-expanded": expanded,
-        "aria-haspopup": true,
-        type: "button"
-      }, /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardContent, {
-        color: value || 'transparent'
-      })));
+      onClick();
+    }
+  }, [onClick]);
+  return (0, _react2.jsx)(_tooltip.default, {
+    content: label
+  }, (0, _react2.jsx)("button", {
+    css: [sharedColorContainerStyles, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    "aria-label": label,
+    "aria-expanded": expanded,
+    "aria-haspopup": true,
+    type: "button"
+  }, (0, _react2.jsx)("span", {
+    css: colorCardContentStyles,
+    style: {
+      background: value || 'transparent'
     }
-  }]);
-  return ColorCard;
-}(_react.default.PureComponent);
+  })));
+};
+var _default = exports.default = ColorCard;
+var sharedColorContainerStyles = (0, _react2.css)({
+  display: 'inline-block',
+  position: 'relative',
+  width: "".concat(_constants.COLOR_CARD_SIZE, "px"),
+  height: "".concat(_constants.COLOR_CARD_SIZE, "px"),
+  border: '2px solid transparent',
+  boxSizing: 'border-box',
+  borderRadius: '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 colorCardButtonStyles = (0, _react2.css)({
+  ':hover': {
+    borderColor: "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")")
+  },
+  ':not(:focus):hover, :focus': {
+    borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
+  }
+});
+var colorCardButtonFocusedStyles = (0, _react2.css)({
+  borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
+});
+var colorCardContentStyles = (0, _react2.css)({
+  position: 'absolute',
+  top: '1px',
+  left: '1px',
+  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, ")"))
+});