@atlaskit/button 16.0.0 → 16.1.3

package/dist/es2019/shared/colors.js

@@ -1,4 +1,5 @@
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 // Hard coding the active rgba color value rather than using a helper to convert it
 // With helper it would be: hex2rgba(colors.B75, 0.6)
 const fadedB75 = 'rgba(179, 212, 255, 0.6)';
@@ -7,106 +8,106 @@ const values = {
   background: {
     default: {
       default: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: token('color.background.subtleNeutral.resting', colors.N20A),
+        dark: token('color.background.subtleNeutral.resting', colors.DN70)
       },
       hover: {
-        light: colors.N30A,
-        dark: colors.DN60
+        light: token('color.background.subtleNeutral.hover', colors.N30A),
+        dark: token('color.background.subtleNeutral.hover', colors.DN60)
       },
       active: {
-        light: fadedB75,
-        dark: colors.B75
+        light: token('color.background.subtleNeutral.pressed', fadedB75),
+        dark: token('color.background.subtleNeutral.pressed', colors.B75)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       }
     },
     primary: {
       default: {
-        light: colors.B400,
-        dark: colors.B100
+        light: token('color.background.boldBrand.resting', colors.B400),
+        dark: token('color.background.boldBrand.resting', colors.B100)
       },
       hover: {
-        light: colors.B300,
-        dark: colors.B75
+        light: token('color.background.boldBrand.hover', colors.B300),
+        dark: token('color.background.boldBrand.hover', colors.B75)
       },
       active: {
-        light: colors.B500,
-        dark: colors.B200
+        light: token('color.background.boldBrand.pressed', colors.B500),
+        dark: token('color.background.boldBrand.pressed', colors.B200)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       }
     },
     warning: {
       default: {
-        light: colors.Y300,
-        dark: colors.Y300
+        light: token('color.background.boldWarning.resting', colors.Y300),
+        dark: token('color.background.boldWarning.resting', colors.Y300)
       },
       hover: {
-        light: colors.Y200,
-        dark: colors.Y200
+        light: token('color.background.boldWarning.hover', colors.Y200),
+        dark: token('color.background.boldWarning.hover', colors.Y200)
       },
       active: {
-        light: colors.Y400,
-        dark: colors.Y400
+        light: token('color.background.boldWarning.pressed', colors.Y400),
+        dark: token('color.background.boldWarning.pressed', colors.Y400)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.Y400,
-        dark: colors.Y400
+        light: token('color.background.selected.resting', colors.Y400),
+        dark: token('color.background.selected.resting', colors.Y400)
       },
       focusSelected: {
-        light: colors.Y400,
-        dark: colors.Y400
+        light: token('color.background.selected.resting', colors.Y400),
+        dark: token('color.background.selected.resting', colors.Y400)
       }
     },
     danger: {
       default: {
-        light: colors.R400,
-        dark: colors.R400
+        light: token('color.background.boldDanger.resting', colors.R400),
+        dark: token('color.background.boldDanger.resting', colors.R400)
       },
       hover: {
-        light: colors.R300,
-        dark: colors.R300
+        light: token('color.background.boldDanger.hover', colors.R300),
+        dark: token('color.background.boldDanger.hover', colors.R300)
       },
       active: {
-        light: colors.R500,
-        dark: colors.R500
+        light: token('color.background.boldDanger.pressed', colors.R500),
+        dark: token('color.background.boldDanger.pressed', colors.R500)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: token('color.background.disabled', colors.N20A),
+        dark: token('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: token('color.background.selected.resting', colors.R500),
+        dark: token('color.background.selected.resting', colors.R500)
       },
       focusSelected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: token('color.background.selected.resting', colors.R500),
+        dark: token('color.background.selected.resting', colors.R500)
       }
     },
     link: {
@@ -115,12 +116,12 @@ const values = {
         dark: 'none'
       },
       selected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
       }
     },
     subtle: {
@@ -129,24 +130,24 @@ const values = {
         dark: 'none'
       },
       hover: {
-        light: colors.N30A,
-        dark: colors.DN60
+        light: token('color.background.transparentNeutral.hover', colors.N30A),
+        dark: token('color.background.transparentNeutral.hover', colors.DN60)
       },
       active: {
-        light: fadedB75,
-        dark: colors.B75
+        light: token('color.background.transparentNeutral.pressed', fadedB75),
+        dark: token('color.background.transparentNeutral.pressed', colors.B75)
       },
       disabled: {
         light: 'none',
         dark: 'none'
       },
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.DN0)
       }
     },
     'subtle-link': {
@@ -155,236 +156,236 @@ const values = {
         dark: 'none'
       },
       selected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: token('color.background.selected.resting', colors.N700),
+        dark: token('color.background.selected.resting', colors.N20)
       }
     }
   },
   boxShadowColor: {
     default: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       }
     },
     primary: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       }
     },
     warning: {
       focus: {
-        light: colors.Y500,
-        dark: colors.Y500
+        light: token('color.border.focus', colors.Y500),
+        dark: token('color.border.focus', colors.Y500)
       },
       focusSelected: {
-        light: colors.Y500,
-        dark: colors.Y500
+        light: token('color.border.focus', colors.Y500),
+        dark: token('color.border.focus', colors.Y500)
       }
     },
     danger: {
       focus: {
-        light: colors.R100,
-        dark: colors.R100
+        light: token('color.border.focus', colors.R100),
+        dark: token('color.border.focus', colors.R100)
       },
       focusSelected: {
-        light: colors.R100,
-        dark: colors.R100
+        light: token('color.border.focus', colors.R100),
+        dark: token('color.border.focus', colors.R100)
       }
     },
     link: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       }
     },
     subtle: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       }
     },
     'subtle-link': {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: token('color.border.focus', colors.B100),
+        dark: token('color.border.focus', colors.B75)
       }
     }
   },
   color: {
     default: {
       default: {
-        light: colors.N500,
-        dark: colors.DN400
+        light: token('color.text.highEmphasis', colors.N500),
+        dark: token('color.text.highEmphasis', colors.DN400)
       },
       active: {
-        light: colors.B400,
-        dark: colors.B400
+        light: token('color.text.highEmphasis', colors.B400),
+        dark: token('color.text.highEmphasis', colors.B400)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       }
     },
     primary: {
       default: {
-        light: colors.N0,
-        dark: colors.DN30
+        light: token('color.text.onBold', colors.N0),
+        dark: token('color.text.onBold', colors.DN30)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       }
     },
     warning: {
       default: {
-        light: colors.N800,
-        dark: colors.N800
+        light: token('color.text.onBoldWarning', colors.N800),
+        dark: token('color.text.onBoldWarning', colors.N800)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N800,
-        dark: colors.N800
+        light: token('color.text.selected', colors.N800),
+        dark: token('color.text.selected', colors.N800)
       },
       focusSelected: {
-        light: colors.N800,
-        dark: colors.N800
+        light: token('color.text.selected', colors.N800),
+        dark: token('color.text.selected', colors.N800)
       }
     },
     danger: {
       default: {
-        light: colors.N0,
-        dark: colors.N0
+        light: token('color.text.onBold', colors.N0),
+        dark: token('color.text.onBold', colors.N0)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: token('color.text.selected', colors.N0),
+        dark: token('color.text.selected', colors.N0)
       },
       focusSelected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: token('color.text.selected', colors.N0),
+        dark: token('color.text.selected', colors.N0)
       }
     },
     link: {
       default: {
-        light: colors.B400,
-        dark: colors.B100
+        light: token('color.text.link.resting', colors.B400),
+        dark: token('color.text.link.resting', colors.B100)
       },
       hover: {
-        light: colors.B300,
-        dark: colors.B75
+        light: token('color.text.link.resting', colors.B300),
+        dark: token('color.text.link.resting', colors.B75)
       },
       active: {
-        light: colors.B500,
-        dark: colors.B200
+        light: token('color.text.link.pressed', colors.B500),
+        dark: token('color.text.link.pressed', colors.B200)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN100
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.N700
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.N700)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.N700
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.N700)
       }
     },
     subtle: {
       default: {
-        light: colors.N500,
-        dark: colors.DN400
+        light: token('color.text.highEmphasis', colors.N500),
+        dark: token('color.text.highEmphasis', colors.DN400)
       },
       active: {
-        light: colors.B400,
-        dark: colors.B400
+        light: token('color.text.highEmphasis', colors.B400),
+        dark: token('color.text.highEmphasis', colors.B400)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN100
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       }
     },
     'subtle-link': {
       default: {
-        light: colors.N200,
-        dark: colors.DN400
+        light: token('color.text.mediumEmphasis', colors.N200),
+        dark: token('color.text.mediumEmphasis', colors.DN400)
       },
       hover: {
-        light: colors.N90,
-        dark: colors.B50
+        light: token('color.text.mediumEmphasis', colors.N90),
+        dark: token('color.text.mediumEmphasis', colors.B50)
       },
       active: {
-        light: colors.N400,
-        dark: colors.DN300
+        light: token('color.text.highEmphasis', colors.N400),
+        dark: token('color.text.highEmphasis', colors.DN300)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN100
+        light: token('color.text.disabled', colors.N70),
+        dark: token('color.text.disabled', colors.DN100)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: token('color.text.selected', colors.N20),
+        dark: token('color.text.selected', colors.DN400)
       }
     }
   }

package/dist/es2019/shared/css.js

@@ -166,7 +166,7 @@ export function getCss({
     // Giving disabled styles preference over active by listing them after.
     // Not using '&:disabled' because :disabled is not a valid state for all element types
     // so we are targeting the attribute
-    // Attributes have the same specificity a pesudo classes so we are overriding :disabled here
+    // Attributes have the same specificity a pseudo classes so we are overriding :disabled here
     '&[disabled]': { // always using 'disabled' even when selected
       ...getColors({
         appearance,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/button",
-	"version": "16.0.0",
+	"version": "16.1.3",
 	"sideEffects": false
 }

package/dist/esm/custom-theme-button/theme.js

@@ -14,7 +14,7 @@ var stateToSelectorMap = {
   disabled: '&[disabled]'
 }; // Mapping the new clean css back to the legacy theme format.
 // The legacy theme format has all styles at the top level (no nested selectors)
-// and uses `getSpecifiers()` to apply the style to all psudeo states
+// and uses `getSpecifiers()` to apply the style to all pseudo states
 
 export function getCustomCss(_ref) {
   var _ref$appearance = _ref.appearance,
@@ -40,7 +40,7 @@ export function getCustomCss(_ref) {
     shouldFitContainer: shouldFitContainer,
     isOnlySingleIcon: iconIsOnlyChild
   }); // we need to disable the default browser focus styles always
-  // this is because we are not expressing that we can have two pesduo states at a time
+  // this is because we are not expressing that we can have two pseudo states at a time
 
   result.outline = 'none'; // Pulling relevant styles up to the top level
 
@@ -68,7 +68,7 @@ export function getCustomCss(_ref) {
   });
   return result;
 } // This styling approach works by generating a 'style' and applying with maximum specificity
-// To do this we are overwriting all psuedo selectors
+// To do this we are overwriting all pseudo selectors
 
 export function getSpecifiers(styles) {
   return {

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

@@ -6,6 +6,8 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/core';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import { N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import blockEvents from './block-events';
 import { getContentStyle, getFadingCss, getIconStyle, overlayCss } from './css';
 
@@ -77,7 +79,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.0.0",
+    packageVersion: "16.1.3",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -99,6 +101,21 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     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 ? token('color.text.mediumEmphasis', N500) : token('color.text.onBoldWarning', N500)
+      }
+    };
+  }
+
   return jsx(Component, _extends({}, rest, {
     css: [buttonCss, isInteractive ? null : noPointerEventsOnChildrenCss],
     className: className,
@@ -130,6 +147,6 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
       spacing: spacing
     })]
   }, iconAfter) : null, overlay ? jsx("span", {
-    css: overlayCss
+    css: [overlayCss, spinnerHackCss]
   }, overlay) : null);
 });