@atlaskit/color-picker 1.2.6 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/color-picker
 
+## 2.0.0
+
+### Major Changes
+
+- [`80b9cc64aa2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/80b9cc64aa2) - [ux] Added tokens to color-picker
+
+## 1.3.1
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
+## 1.3.0
+
+### Minor Changes
+
+- [`10b517acfea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/10b517acfea) - [ux] Updated how the darker border for each colour block is rendered by using css instead of `darken()`
+
 ## 1.2.6
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -103,10 +103,10 @@ var ColorCard = /*#__PURE__*/function (_PureComponent) {
         onKeyDown: this.onKeyDown
       }, /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardContent, {
         color: value || 'transparent'
-      }, selected && /*#__PURE__*/_react.default.createElement(_done.default, {
+      }, selected && /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardContentCheckMark, null, /*#__PURE__*/_react.default.createElement(_done.default, {
         primaryColor: checkMarkColor,
         label: ""
-      })));
+      }))));
     }
   }]);
   return ColorCard;

package/dist/cjs/components/ColorPicker.js

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

package/dist/cjs/components/components.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Placeholder = exports.DropdownIndicator = exports.Option = exports.MenuList = void 0;
+exports.Placeholder = exports.Option = exports.MenuList = exports.DropdownIndicator = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -19,11 +19,13 @@ var _utils = require("../utils");
 
 var _ColorPalette = require("../styled/ColorPalette");
 
+var _excluded = ["cx", "selectProps", "innerRef"];
+
 var MenuList = function MenuList(props) {
   var cx = props.cx,
       cols = props.selectProps.cols,
       innerRef = props.innerRef,
-      rest = (0, _objectWithoutProperties2.default)(props, ["cx", "selectProps", "innerRef"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorPaletteContainer, (0, _extends2.default)({
     role: "grid",
     style: {

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KEY_ENTER = exports.KEY_SPACE = exports.COLOR_CARD_SIZE = void 0;
+exports.KEY_SPACE = exports.KEY_ENTER = exports.COLOR_CARD_SIZE = void 0;
 var COLOR_CARD_SIZE = 30;
 exports.COLOR_CARD_SIZE = COLOR_CARD_SIZE;
 var KEY_SPACE = ' ';

package/dist/cjs/index.js

@@ -5,10 +5,10 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ColorPickerWithoutAnalytics", {
+Object.defineProperty(exports, "ColorPaletteMenu", {
   enumerable: true,
   get: function get() {
-    return _ColorPicker.ColorPickerWithoutAnalytics;
+    return _ColorPaletteMenu.default;
   }
 });
 Object.defineProperty(exports, "ColorPaletteMenuWithoutAnalytics", {
@@ -17,13 +17,13 @@ Object.defineProperty(exports, "ColorPaletteMenuWithoutAnalytics", {
     return _ColorPaletteMenu.ColorPaletteMenuWithoutAnalytics;
   }
 });
-Object.defineProperty(exports, "ColorPaletteMenu", {
+Object.defineProperty(exports, "ColorPickerWithoutAnalytics", {
   enumerable: true,
   get: function get() {
-    return _ColorPaletteMenu.default;
+    return _ColorPicker.ColorPickerWithoutAnalytics;
   }
 });
-exports.Compact = exports.Standard = exports.default = void 0;
+exports.default = exports.Standard = exports.Compact = void 0;
 
 var _ColorPicker = _interopRequireWildcard(require("./components/ColorPicker"));
 

package/dist/cjs/styled/ColorCard.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ColorCardContent = exports.ColorCardButton = exports.ColorCardOption = void 0;
+exports.ColorCardOption = exports.ColorCardContentCheckMark = exports.ColorCardContent = exports.ColorCardButton = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,20 +17,20 @@ var _theme = require("@atlaskit/theme");
 
 var _constants = require("../constants");
 
-var _darken = _interopRequireDefault(require("polished/lib/color/darken"));
+var _tokens = require("@atlaskit/tokens");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 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; }
 
-var buttonFocusedBorder = "border-color: ".concat(_theme.colors.B100, ";");
-var sharedColorContainerStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n  &:hover,\n  &:focus {\n    border-color: ", ";\n  }\n"])), _constants.COLOR_CARD_SIZE, _constants.COLOR_CARD_SIZE, (0, _theme.borderRadius)() * 2, _theme.colors.B75);
+var buttonFocusedBorder = "border-color: ".concat((0, _tokens.token)('color.border.focused', _theme.colors.B100), ";");
+var sharedColorContainerStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n  &:hover,\n  &:focus {\n    border-color: ", ";\n  }\n"])), _constants.COLOR_CARD_SIZE, _constants.COLOR_CARD_SIZE, (0, _theme.borderRadius)() * 2, (0, _tokens.token)('color.border.focused', _theme.colors.B75));
 
 var ColorCardOption = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
   if (props.focused) {
-    return "border-color: ".concat(_theme.colors.B75);
+    return "border-color: ".concat((0, _tokens.token)('color.border.focused', _theme.colors.B75));
   }
 });
 
@@ -44,10 +44,13 @@ var ColorCardButton = _styledComponents.default.button(_templateObject3 || (_tem
 
 exports.ColorCardButton = ColorCardButton;
 
-var ColorCardContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 22px;\n  height: 22px;\n  border-radius: ", "px;\n  background: ", ";\n  border: solid 1px ", ";\n"])), (0, _theme.borderRadius)(), function (props) {
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var ColorCardContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 24px;\n  height: 24px;\n  border-radius: ", "px;\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px\n    ", ";\n"])), (0, _theme.borderRadius)(), function (props) {
   return props.color;
-}, function (props) {
-  return (0, _darken.default)(0.1, props.color);
-});
+}, (0, _tokens.token)('color.background.inverse.subtle', _theme.colors.DN600A));
+
+exports.ColorCardContent = ColorCardContent;
+
+var ColorCardContentCheckMark = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px;\n"])));
 
-exports.ColorCardContent = ColorCardContent;
+exports.ColorCardContentCheckMark = ColorCardContentCheckMark;

package/dist/cjs/styled/ColorPalette.js

@@ -17,6 +17,8 @@ var _utils = require("../utils");
 
 var _types = require("../types");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 var ColorCardWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: ", "px;\n"])), (0, _theme.gridSize)() / 4);
@@ -29,10 +31,10 @@ var ColorPaletteContainer = _styledComponents.default.div(_templateObject2 || (_
 
 exports.ColorPaletteContainer = ColorPaletteContainer;
 
-var ColorPaletteMenu = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin: 0;\n  background-color: ", ";\n  width: ", "px;\n  ", "\n"])), _theme.colors.N0, function (props) {
+var ColorPaletteMenu = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin: 0;\n  background-color: ", ";\n  width: ", "px;\n  ", "\n"])), (0, _tokens.token)('elevation.surface.overlay', _theme.colors.N0), function (props) {
   return (0, _utils.getWidth)(props.cols);
 }, function (props) {
-  return props.mode && props.mode === _types.Mode.Standard && "\n    box-radius: ".concat(_theme.borderRadius, "px;\n    box-shadow: 0 0 0 1px ").concat(_theme.colors.N40, ", 0 0 8px ").concat(_theme.colors.N40, ";\n    width: ").concat((0, _utils.getWidth)(props.cols) + (0, _theme.gridSize)(), "px;\n  ");
+  return props.mode && props.mode === _types.Mode.Standard && "\n    box-radius: ".concat(_theme.borderRadius, "px;\n    box-shadow: ").concat((0, _tokens.token)('elevation.shadow.overlay', "0 0 0 1px ".concat(_theme.colors.N40, ", 0 0 8px ").concat(_theme.colors.N40)), ";\n    width: ").concat((0, _utils.getWidth)(props.cols) + (0, _theme.gridSize)(), "px;\n  ");
 });
 
 exports.ColorPaletteMenu = ColorPaletteMenu;

package/dist/cjs/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getOptions = exports.getWidth = void 0;
+exports.getWidth = exports.getOptions = void 0;
 
 var _theme = require("@atlaskit/theme");
 

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "1.2.6"
+	"version": "2.0.0"
 }

package/dist/es2019/components/ColorCard.js

@@ -5,7 +5,7 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done'; // AFP-2532 TODO:
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { colors } from '@atlaskit/theme';
-import { ColorCardOption, ColorCardContent } from '../styled/ColorCard';
+import { ColorCardOption, ColorCardContent, ColorCardContentCheckMark } from '../styled/ColorCard';
 import { KEY_SPACE, KEY_ENTER } from '../constants';
 export default class ColorCard extends PureComponent {
   constructor(...args) {
@@ -51,6 +51,7 @@ export default class ColorCard extends PureComponent {
       label,
       selected,
       focused,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
       checkMarkColor = colors.N0
     } = this.props;
     return /*#__PURE__*/React.createElement(ColorCardOption, {
@@ -62,10 +63,10 @@ export default class ColorCard extends PureComponent {
       onKeyDown: this.onKeyDown
     }, /*#__PURE__*/React.createElement(ColorCardContent, {
       color: value || 'transparent'
-    }, selected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+    }, selected && /*#__PURE__*/React.createElement(ColorCardContentCheckMark, null, /*#__PURE__*/React.createElement(EditorDoneIcon, {
       primaryColor: checkMarkColor,
       label: ""
-    })));
+    }))));
   }
 
 }

package/dist/es2019/components/ColorPicker.js

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

package/dist/es2019/styled/ColorCard.js

@@ -2,10 +2,9 @@ import styled, { css } from 'styled-components'; // AFP-2532 TODO: Fix automatic
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { borderRadius, colors } from '@atlaskit/theme';
-import { COLOR_CARD_SIZE } from '../constants'; // polished has problems tree-shaking https://github.com/styled-components/polished/issues/478
-
-import darken from 'polished/lib/color/darken';
-const buttonFocusedBorder = `border-color: ${colors.B100};`;
+import { COLOR_CARD_SIZE } from '../constants';
+import { token } from '@atlaskit/tokens';
+const buttonFocusedBorder = `border-color: ${token('color.border.focused', colors.B100)};`;
 const sharedColorContainerStyles = css`
   display: inline-block;
   position: relative;
@@ -22,7 +21,7 @@ const sharedColorContainerStyles = css`
   outline: none;
   &:hover,
   &:focus {
-    border-color: ${colors.B75};
+    border-color: ${token('color.border.focused', colors.B75)};
   }
 `;
 export const ColorCardOption = styled.div`
@@ -30,7 +29,7 @@ export const ColorCardOption = styled.div`
 
   ${props => {
   if (props.focused) {
-    return `border-color: ${colors.B75}`;
+    return `border-color: ${token('color.border.focused', colors.B75)}`;
   }
 }};
 `;
@@ -50,13 +49,19 @@ export const ColorCardButton = styled.button`
   }
 }};
 `;
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export const ColorCardContent = styled.div`
   position: absolute;
   top: 1px;
   left: 1px;
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   border-radius: ${borderRadius()}px;
   background: ${props => props.color};
-  border: solid 1px ${props => darken(0.1, props.color)};
+  box-shadow: inset 0px 0px 0px 1px
+    ${token('color.background.inverse.subtle', colors.DN600A)};
+`;
+export const ColorCardContentCheckMark = styled.div`
+  margin: 1px;
 `;

package/dist/es2019/styled/ColorPalette.js

@@ -4,6 +4,7 @@ import styled from 'styled-components'; // AFP-2532 TODO: Fix automatic suppress
 import { gridSize, borderRadius, colors } from '@atlaskit/theme';
 import { getWidth } from '../utils';
 import { Mode } from '../types';
+import { token } from '@atlaskit/tokens';
 export const ColorCardWrapper = styled.div`
   display: flex;
   margin: ${gridSize() / 4}px;
@@ -16,11 +17,11 @@ export const ColorPaletteContainer = styled.div`
 export const ColorPaletteMenu = styled.div`
   position: relative;
   margin: 0;
-  background-color: ${colors.N0};
+  background-color: ${token('elevation.surface.overlay', colors.N0)};
   width: ${props => getWidth(props.cols)}px;
   ${props => props.mode && props.mode === Mode.Standard && `
     box-radius: ${borderRadius}px;
-    box-shadow: 0 0 0 1px ${colors.N40}, 0 0 8px ${colors.N40};
+    box-shadow: ${token('elevation.shadow.overlay', `0 0 0 1px ${colors.N40}, 0 0 8px ${colors.N40}`)};
     width: ${getWidth(props.cols) + gridSize()}px;
   `}
 `;

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "1.2.6"
+	"version": "2.0.0"
 }

package/dist/esm/components/ColorCard.js

@@ -16,7 +16,7 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done'; // AFP-2532 TODO:
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { colors } from '@atlaskit/theme';
-import { ColorCardOption, ColorCardContent } from '../styled/ColorCard';
+import { ColorCardOption, ColorCardContent, ColorCardContentCheckMark } from '../styled/ColorCard';
 import { KEY_SPACE, KEY_ENTER } from '../constants';
 
 var ColorCard = /*#__PURE__*/function (_PureComponent) {
@@ -86,10 +86,10 @@ var ColorCard = /*#__PURE__*/function (_PureComponent) {
         onKeyDown: this.onKeyDown
       }, /*#__PURE__*/React.createElement(ColorCardContent, {
         color: value || 'transparent'
-      }, selected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+      }, selected && /*#__PURE__*/React.createElement(ColorCardContentCheckMark, null, /*#__PURE__*/React.createElement(EditorDoneIcon, {
         primaryColor: checkMarkColor,
         label: ""
-      })));
+      }))));
     }
   }]);
 

package/dist/esm/components/ColorPicker.js

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

package/dist/esm/components/components.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["cx", "selectProps", "innerRef"];
 import React from 'react';
 import ColorCard from './ColorCard';
 import { getWidth } from '../utils';
@@ -8,7 +9,7 @@ export var MenuList = function MenuList(props) {
   var cx = props.cx,
       cols = props.selectProps.cols,
       innerRef = props.innerRef,
-      rest = _objectWithoutProperties(props, ["cx", "selectProps", "innerRef"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/React.createElement(ColorPaletteContainer, _extends({
     role: "grid",

package/dist/esm/styled/ColorCard.js

@@ -1,19 +1,18 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import styled, { css } from 'styled-components'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { borderRadius, colors } from '@atlaskit/theme';
-import { COLOR_CARD_SIZE } from '../constants'; // polished has problems tree-shaking https://github.com/styled-components/polished/issues/478
-
-import darken from 'polished/lib/color/darken';
-var buttonFocusedBorder = "border-color: ".concat(colors.B100, ";");
-var sharedColorContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n  &:hover,\n  &:focus {\n    border-color: ", ";\n  }\n"])), COLOR_CARD_SIZE, COLOR_CARD_SIZE, borderRadius() * 2, colors.B75);
+import { COLOR_CARD_SIZE } from '../constants';
+import { token } from '@atlaskit/tokens';
+var buttonFocusedBorder = "border-color: ".concat(token('color.border.focused', colors.B100), ";");
+var sharedColorContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n  &:hover,\n  &:focus {\n    border-color: ", ";\n  }\n"])), COLOR_CARD_SIZE, COLOR_CARD_SIZE, borderRadius() * 2, token('color.border.focused', colors.B75));
 export var ColorCardOption = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
   if (props.focused) {
-    return "border-color: ".concat(colors.B75);
+    return "border-color: ".concat(token('color.border.focused', colors.B75));
   }
 });
 export var ColorCardButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  &:hover {\n    border-color: transparent;\n  }\n  &:not(:focus):hover,\n  &:focus {\n    ", ";\n  }\n\n  ", ";\n"])), sharedColorContainerStyles, buttonFocusedBorder, function (props) {
@@ -21,8 +20,9 @@ export var ColorCardButton = styled.button(_templateObject3 || (_templateObject3
     return buttonFocusedBorder;
   }
 });
-export var ColorCardContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 22px;\n  height: 22px;\n  border-radius: ", "px;\n  background: ", ";\n  border: solid 1px ", ";\n"])), borderRadius(), function (props) {
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export var ColorCardContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 24px;\n  height: 24px;\n  border-radius: ", "px;\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px\n    ", ";\n"])), borderRadius(), function (props) {
   return props.color;
-}, function (props) {
-  return darken(0.1, props.color);
-});
+}, token('color.background.inverse.subtle', colors.DN600A));
+export var ColorCardContentCheckMark = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 1px;\n"])));

package/dist/esm/styled/ColorPalette.js

@@ -8,12 +8,13 @@ import styled from 'styled-components'; // AFP-2532 TODO: Fix automatic suppress
 import { gridSize, borderRadius, colors } from '@atlaskit/theme';
 import { getWidth } from '../utils';
 import { Mode } from '../types';
+import { token } from '@atlaskit/tokens';
 export var ColorCardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin: ", "px;\n"])), gridSize() / 4);
 export var ColorPaletteContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: ", ";\n"])), function (props) {
   return props.mode === Mode.Compact ? "0" : "".concat(gridSize() / 2, "px");
 });
-export var ColorPaletteMenu = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 0;\n  background-color: ", ";\n  width: ", "px;\n  ", "\n"])), colors.N0, function (props) {
+export var ColorPaletteMenu = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 0;\n  background-color: ", ";\n  width: ", "px;\n  ", "\n"])), token('elevation.surface.overlay', colors.N0), function (props) {
   return getWidth(props.cols);
 }, function (props) {
-  return props.mode && props.mode === Mode.Standard && "\n    box-radius: ".concat(borderRadius, "px;\n    box-shadow: 0 0 0 1px ").concat(colors.N40, ", 0 0 8px ").concat(colors.N40, ";\n    width: ").concat(getWidth(props.cols) + gridSize(), "px;\n  ");
+  return props.mode && props.mode === Mode.Standard && "\n    box-radius: ".concat(borderRadius, "px;\n    box-shadow: ").concat(token('elevation.shadow.overlay', "0 0 0 1px ".concat(colors.N40, ", 0 0 8px ").concat(colors.N40)), ";\n    width: ").concat(getWidth(props.cols) + gridSize(), "px;\n  ");
 });

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "1.2.6"
+	"version": "2.0.0"
 }

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

@@ -23,12 +23,12 @@ export declare class ColorPaletteMenuWithoutAnalytics extends React.Component<Pr
         cols: number;
         mode: Mode;
     };
-    createAndFireEventOnAtlaskit: (payload: Record<string, any>) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
+    createAndFireEventOnAtlaskit: (payload: import("@atlaskit/analytics-next").AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
     changeAnalyticsCaller: () => import("@atlaskit/analytics-next").UIAnalyticsEvent | undefined;
     onChange: (value: string) => void;
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<Props, "label" | "onChange" | "checkMarkColor" | "cols" | "mode" | "palette" | "selectedColor">, "label" | "onChange" | "checkMarkColor" | "palette" | "selectedColor"> & Partial<Pick<Pick<Props, "label" | "onChange" | "checkMarkColor" | "cols" | "mode" | "palette" | "selectedColor">, "cols" | "mode">> & Partial<Pick<{
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "onChange" | "checkMarkColor" | "palette" | "selectedColor"> & Partial<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "cols" | "mode">> & Partial<Pick<{
     cols: number;
     mode: Mode;
 }, never>> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "onChange" | "checkMarkColor" | "cols" | "mode" | "palette" | "selectedColor" | "analyticsContext"> & React.RefAttributes<any>>;

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

@@ -20,10 +20,10 @@ export interface Props {
     createAnalyticsEvent?: any;
 }
 export declare class ColorPickerWithoutAnalytics extends React.Component<Props> {
-    createAndFireEventOnAtlaskit: (payload: Record<string, any>) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
+    createAndFireEventOnAtlaskit: (payload: import("@atlaskit/analytics-next").AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
     changeAnalyticsCaller: () => import("@atlaskit/analytics-next").UIAnalyticsEvent | undefined;
     onChange: (option: ValueType<Color>) => void;
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Props, "label" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "analyticsContext"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "analyticsContext"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MenuListComponentProps, OptionProps } from '@atlaskit/select';
 import { Color } from '../types';
 export declare const MenuList: (props: MenuListComponentProps<Color>) => JSX.Element;

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

@@ -8,4 +8,5 @@ declare type ColorCardContentProps = {
     color: string;
 };
 export declare const ColorCardContent: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & ColorCardContentProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & ColorCardContentProps>;
+export declare const ColorCardContentCheckMark: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
 export {};

package/dist/types/styled/ColorPalette.d.ts

@@ -7,7 +7,7 @@ declare type ColorPaletteMenuProps = {
     cols: number;
     mode?: Mode;
 };
-export declare const ColorCardWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ColorCardWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
 export declare const ColorPaletteContainer: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Props, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Props>;
 export declare const ColorPaletteMenu: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & ColorPaletteMenuProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & ColorPaletteMenuProps>;
 export {};

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

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const ColorCardWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ColorCardWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "1.2.6",
+  "version": "2.0.0",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,12 +22,12 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/select": "^15.0.0",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@babel/runtime": "^7.0.0",
     "memoize-one": "^6.0.0",
-    "polished": "1.9.3",
     "styled-components": "^3.2.6"
   },
   "peerDependencies": {
@@ -42,7 +42,7 @@
     "enzyme-adapter-react-16": "^1.15.1",
     "jscodeshift": "^0.13.0",
     "react": "^16.8.0",
-    "typescript": "3.9.6"
+    "typescript": "4.2.4"
   },
   "keywords": [
     "ui",
@@ -54,5 +54,10 @@
     "./ColorPaletteMenu": "./src/components/ColorPaletteMenu.tsx",
     ".": "./src/index.ts"
   },
+  "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    }
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }