@atlaskit/color-picker 3.0.6 → 3.0.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/color-picker
 
+## 3.0.7
+
+### Patch Changes
+
+- [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
+
 ## 3.0.6
 
 ### Patch Changes

package/dist/cjs/components/ColorPicker.js

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

package/dist/cjs/styled/ColorCard.js

@@ -17,24 +17,22 @@ var _theme = require("@atlaskit/theme");
 
 var _constants = require("../constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 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((0, _tokens.token)('color.border.focused', _theme.colors.B100), ";");
+var buttonFocusedBorder = "border-color: ".concat("var(--ds-border-focused, ".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"])), _constants.COLOR_CARD_SIZE, _constants.COLOR_CARD_SIZE, (0, _theme.borderRadius)() * 2);
 
 var ColorCardOption = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  ", "\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
   if (props.isTabbing === undefined || props.isTabbing) {
-    return "&:hover,\n      &:focus {\n        border-color: ".concat((0, _tokens.token)('color.border.focused', _theme.colors.B75), ";\n      }");
+    return "&:hover,\n      &:focus {\n        border-color: ".concat("var(--ds-border-focused, ".concat(_theme.colors.B75, ")"), ";\n      }");
   }
 }, function (props) {
   if (props.focused && !props.isTabbing) {
-    return "border-color: ".concat((0, _tokens.token)('color.border.focused', _theme.colors.B75));
+    return "border-color: ".concat("var(--ds-border-focused, ".concat(_theme.colors.B75, ")"));
   }
 });
 
@@ -51,7 +49,7 @@ exports.ColorCardButton = ColorCardButton;
 /* 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;
-}, (0, _tokens.token)('color.background.inverse.subtle', _theme.colors.DN600A));
+}, "var(--ds-background-inverse-subtle, ".concat(_theme.colors.DN600A, ")"));
 
 exports.ColorCardContent = ColorCardContent;
 

package/dist/cjs/styled/ColorPalette.js

@@ -17,8 +17,6 @@ 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);
@@ -31,10 +29,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"])), (0, _tokens.token)('elevation.surface.overlay', _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"])), "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: ").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  ");
+  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  ");
 });
 
 exports.ColorPaletteMenu = ColorPaletteMenu;

package/dist/cjs/version.json

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

package/dist/es2019/components/ColorPicker.js

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

package/dist/es2019/styled/ColorCard.js

@@ -3,8 +3,7 @@ import styled, { css } from 'styled-components'; // AFP-2532 TODO: Fix automatic
 
 import { borderRadius, colors } from '@atlaskit/theme';
 import { COLOR_CARD_SIZE } from '../constants';
-import { token } from '@atlaskit/tokens';
-const buttonFocusedBorder = `border-color: ${token('color.border.focused', colors.B100)};`;
+const buttonFocusedBorder = `border-color: ${`var(--ds-border-focused, ${colors.B100})`};`;
 const sharedColorContainerStyles = css`
   display: inline-block;
   position: relative;
@@ -27,14 +26,14 @@ export const ColorCardOption = styled.div`
   if (props.isTabbing === undefined || props.isTabbing) {
     return `&:hover,
       &:focus {
-        border-color: ${token('color.border.focused', colors.B75)};
+        border-color: ${`var(--ds-border-focused, ${colors.B75})`};
       }`;
   }
 }}
 
   ${props => {
   if (props.focused && !props.isTabbing) {
-    return `border-color: ${token('color.border.focused', colors.B75)}`;
+    return `border-color: ${`var(--ds-border-focused, ${colors.B75})`}`;
   }
 }};
 `;
@@ -65,7 +64,7 @@ export const ColorCardContent = styled.div`
   border-radius: ${borderRadius()}px;
   background: ${props => props.color};
   box-shadow: inset 0px 0px 0px 1px
-    ${token('color.background.inverse.subtle', colors.DN600A)};
+    ${`var(--ds-background-inverse-subtle, ${colors.DN600A})`};
 `;
 export const ColorCardContentCheckMark = styled.div`
   margin: 1px;

package/dist/es2019/styled/ColorPalette.js

@@ -4,7 +4,6 @@ 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;
@@ -17,11 +16,11 @@ export const ColorPaletteContainer = styled.div`
 export const ColorPaletteMenu = styled.div`
   position: relative;
   margin: 0;
-  background-color: ${token('elevation.surface.overlay', colors.N0)};
+  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-shadow: ${token('elevation.shadow.overlay', `0 0 0 1px ${colors.N40}, 0 0 8px ${colors.N40}`)};
+    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.6"
+	"version": "3.0.7"
 }

package/dist/esm/components/ColorPicker.js

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

package/dist/esm/styled/ColorCard.js

@@ -7,16 +7,15 @@ import styled, { css } from 'styled-components'; // AFP-2532 TODO: Fix automatic
 
 import { borderRadius, colors } from '@atlaskit/theme';
 import { COLOR_CARD_SIZE } from '../constants';
-import { token } from '@atlaskit/tokens';
-var buttonFocusedBorder = "border-color: ".concat(token('color.border.focused', colors.B100), ";");
+var buttonFocusedBorder = "border-color: ".concat("var(--ds-border-focused, ".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"])), COLOR_CARD_SIZE, COLOR_CARD_SIZE, borderRadius() * 2);
 export var ColorCardOption = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n\n  ", "\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
   if (props.isTabbing === undefined || props.isTabbing) {
-    return "&:hover,\n      &:focus {\n        border-color: ".concat(token('color.border.focused', colors.B75), ";\n      }");
+    return "&:hover,\n      &:focus {\n        border-color: ".concat("var(--ds-border-focused, ".concat(colors.B75, ")"), ";\n      }");
   }
 }, function (props) {
   if (props.focused && !props.isTabbing) {
-    return "border-color: ".concat(token('color.border.focused', colors.B75));
+    return "border-color: ".concat("var(--ds-border-focused, ".concat(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) {
@@ -28,5 +27,5 @@ export var ColorCardButton = styled.button(_templateObject3 || (_templateObject3
 /* 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;
-}, token('color.background.inverse.subtle', colors.DN600A));
+}, "var(--ds-background-inverse-subtle, ".concat(colors.DN600A, ")"));
 export var ColorCardContentCheckMark = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 1px;\n"])));

package/dist/esm/styled/ColorPalette.js

@@ -8,13 +8,12 @@ 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"])), token('elevation.surface.overlay', 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"])), "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: ").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  ");
+  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  ");
 });

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/select": "^16.0.0",
+    "@atlaskit/select": "^16.1.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.13.0",
     "@babel/runtime": "^7.0.0",