@atlaskit/color-picker 3.0.8 → 3.0.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/color-picker
 
+## 3.0.10
+
+### Patch Changes
+
+- [`4ce590325b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ce590325b4) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
+## 3.0.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.0.8
 
 ### Patch Changes

package/dist/cjs/components/ColorPicker.js

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

package/dist/cjs/styled/ColorPalette.js

@@ -11,15 +11,15 @@ var _theme = require("@atlaskit/theme");
 var _utils = require("../utils");
 var _types = require("../types");
 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);
+var ColorCardWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin: ", ";\n"])), "var(--ds-space-025, 2px)");
 exports.ColorCardWrapper = ColorCardWrapper;
 var ColorPaletteContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: ", ";\n"])), function (props) {
-  return props.mode === _types.Mode.Compact ? "0" : "".concat((0, _theme.gridSize)() / 2, "px");
+  return props.mode === _types.Mode.Compact ? "0" : "var(--ds-space-050, 4px)";
 });
 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"])), "var(--ds-surface-overlay, ".concat(_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: ", "var(--ds-shadow-overlay, ".concat("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("var(--ds-radius-100, 3px)", ";\n    box-shadow: ", "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_theme.colors.N40, ", 0 0 8px ").concat(_theme.colors.N40), ")"), ";\n    width: ", (0, _utils.getWidth)(props.cols) + (0, _theme.gridSize)(), "px;\n  ");
 });
 exports.ColorPaletteMenu = ColorPaletteMenu;

package/dist/cjs/version.json

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

package/dist/es2019/components/ColorPicker.js

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

package/dist/es2019/styled/ColorPalette.js

@@ -1,17 +1,17 @@
 import styled from 'styled-components';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { gridSize, borderRadius, colors } from '@atlaskit/theme';
+import { gridSize, colors } from '@atlaskit/theme';
 import { getWidth } from '../utils';
 import { Mode } from '../types';
 export const ColorCardWrapper = styled.div`
   display: flex;
-  margin: ${gridSize() / 4}px;
+  margin: ${"var(--ds-space-025, 2px)"};
 `;
 export const ColorPaletteContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
-  padding: ${props => props.mode === Mode.Compact ? `0` : `${gridSize() / 2}px`};
+  padding: ${props => props.mode === Mode.Compact ? `0` : `${"var(--ds-space-050, 4px)"}`};
 `;
 export const ColorPaletteMenu = styled.div`
   position: relative;
@@ -19,7 +19,7 @@ export const ColorPaletteMenu = styled.div`
   background-color: ${`var(--ds-surface-overlay, ${colors.N0})`};
   width: ${props => getWidth(props.cols)}px;
   ${props => props.mode && props.mode === Mode.Standard && `
-    box-radius: ${borderRadius}px;
+    box-radius: ${"var(--ds-radius-100, 3px)"};
     box-shadow: ${`var(--ds-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": "3.0.8"
+	"version": "3.0.10"
 }

package/dist/esm/components/ColorPicker.js

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

package/dist/esm/styled/ColorPalette.js

@@ -3,15 +3,15 @@ var _templateObject, _templateObject2, _templateObject3;
 import styled from 'styled-components';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { gridSize, borderRadius, colors } from '@atlaskit/theme';
+import { gridSize, colors } from '@atlaskit/theme';
 import { getWidth } from '../utils';
 import { Mode } from '../types';
-export var ColorCardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin: ", "px;\n"])), gridSize() / 4);
+export var ColorCardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin: ", ";\n"])), "var(--ds-space-025, 2px)");
 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");
+  return props.mode === Mode.Compact ? "0" : "var(--ds-space-050, 4px)";
 });
 export var ColorPaletteMenu = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 0;\n  background-color: ", ";\n  width: ", "px;\n  ", "\n"])), "var(--ds-surface-overlay, ".concat(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: ", "var(--ds-shadow-overlay, ".concat("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("var(--ds-radius-100, 3px)", ";\n    box-shadow: ", "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(colors.N40, ", 0 0 8px ").concat(colors.N40), ")"), ";\n    width: ", getWidth(props.cols) + gridSize(), "px;\n  ");
 });

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "3.0.8",
+  "version": "3.0.10",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -21,11 +21,11 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.2.0",
+    "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/select": "^16.1.0",
-    "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.0.0",
+    "@atlaskit/theme": "^12.3.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "memoize-one": "^6.0.0",
     "styled-components": "^3.2.6"
@@ -56,7 +56,9 @@
   },
   "techstack": {
     "@repo/internal": {
-      "theming": "tokens"
+      "design-tokens": [
+        "color"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"