@atlaskit/button 16.1.0 → 16.1.4

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/button
 
+## 16.1.4
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 16.1.3
+
+### Patch Changes
+
+- [`c3b0a17a96c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3b0a17a96c) - Fix spinner colours for disabled, warning and selected states when using tokens
+- Updated dependencies
+
+## 16.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.1.0
 
 ### Minor Changes

package/dist/cjs/shared/button-base.js

@@ -21,6 +21,8 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _blockEvents = _interopRequireDefault(require("./block-events"));
 
 var _css = require("./css");
@@ -98,7 +100,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.1.0",
+    packageVersion: "16.1.4",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -120,6 +122,21 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
     hasOverlay: hasOverlay
   });
   var isInteractive = !isDisabled && !hasOverlay;
+  /** HACK: Spinner needs to have different colours in the "new" tokens design compared to the old design.
+   * For now, while we support both, these styles reach into Spinner when a theme is set, applies the right color.
+   * Ticket to remove: https://product-fabric.atlassian.net/browse/DSP-2067
+   */
+
+  var spinnerHackCss = {};
+
+  if (isSelected || isDisabled || appearance === 'warning') {
+    spinnerHackCss = {
+      '[data-theme] & svg': {
+        stroke: isSelected || isDisabled ? "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")") : "var(--ds-text-onBoldWarning, ".concat(_colors.N500, ")")
+      }
+    };
+  }
+
   return (0, _core.jsx)(Component, (0, _extends2.default)({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
@@ -151,7 +168,7 @@ var _default = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(props,
       spacing: spacing
     })]
   }, iconAfter) : null, overlay ? (0, _core.jsx)("span", {
-    css: _css.overlayCss
+    css: [_css.overlayCss, spinnerHackCss]
   }, overlay) : null);
 });