@atlaskit/button 16.0.0 → 16.1.3

package/dist/cjs/shared/colors.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
+var _tokens = require("@atlaskit/tokens");
+
 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; }
@@ -21,106 +23,106 @@ var values = {
   background: {
     default: {
       default: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20A),
+        dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.DN70)
       },
       hover: {
-        light: colors.N30A,
-        dark: colors.DN60
+        light: (0, _tokens.token)('color.background.subtleNeutral.hover', colors.N30A),
+        dark: (0, _tokens.token)('color.background.subtleNeutral.hover', colors.DN60)
       },
       active: {
-        light: fadedB75,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.background.subtleNeutral.pressed', fadedB75),
+        dark: (0, _tokens.token)('color.background.subtleNeutral.pressed', colors.B75)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: (0, _tokens.token)('color.background.disabled', colors.N20A),
+        dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
       }
     },
     primary: {
       default: {
-        light: colors.B400,
-        dark: colors.B100
+        light: (0, _tokens.token)('color.background.boldBrand.resting', colors.B400),
+        dark: (0, _tokens.token)('color.background.boldBrand.resting', colors.B100)
       },
       hover: {
-        light: colors.B300,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.background.boldBrand.hover', colors.B300),
+        dark: (0, _tokens.token)('color.background.boldBrand.hover', colors.B75)
       },
       active: {
-        light: colors.B500,
-        dark: colors.B200
+        light: (0, _tokens.token)('color.background.boldBrand.pressed', colors.B500),
+        dark: (0, _tokens.token)('color.background.boldBrand.pressed', colors.B200)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: (0, _tokens.token)('color.background.disabled', colors.N20A),
+        dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
       }
     },
     warning: {
       default: {
-        light: colors.Y300,
-        dark: colors.Y300
+        light: (0, _tokens.token)('color.background.boldWarning.resting', colors.Y300),
+        dark: (0, _tokens.token)('color.background.boldWarning.resting', colors.Y300)
       },
       hover: {
-        light: colors.Y200,
-        dark: colors.Y200
+        light: (0, _tokens.token)('color.background.boldWarning.hover', colors.Y200),
+        dark: (0, _tokens.token)('color.background.boldWarning.hover', colors.Y200)
       },
       active: {
-        light: colors.Y400,
-        dark: colors.Y400
+        light: (0, _tokens.token)('color.background.boldWarning.pressed', colors.Y400),
+        dark: (0, _tokens.token)('color.background.boldWarning.pressed', colors.Y400)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: (0, _tokens.token)('color.background.disabled', colors.N20A),
+        dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.Y400,
-        dark: colors.Y400
+        light: (0, _tokens.token)('color.background.selected.resting', colors.Y400),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.Y400)
       },
       focusSelected: {
-        light: colors.Y400,
-        dark: colors.Y400
+        light: (0, _tokens.token)('color.background.selected.resting', colors.Y400),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.Y400)
       }
     },
     danger: {
       default: {
-        light: colors.R400,
-        dark: colors.R400
+        light: (0, _tokens.token)('color.background.boldDanger.resting', colors.R400),
+        dark: (0, _tokens.token)('color.background.boldDanger.resting', colors.R400)
       },
       hover: {
-        light: colors.R300,
-        dark: colors.R300
+        light: (0, _tokens.token)('color.background.boldDanger.hover', colors.R300),
+        dark: (0, _tokens.token)('color.background.boldDanger.hover', colors.R300)
       },
       active: {
-        light: colors.R500,
-        dark: colors.R500
+        light: (0, _tokens.token)('color.background.boldDanger.pressed', colors.R500),
+        dark: (0, _tokens.token)('color.background.boldDanger.pressed', colors.R500)
       },
       disabled: {
-        light: colors.N20A,
-        dark: colors.DN70
+        light: (0, _tokens.token)('color.background.disabled', colors.N20A),
+        dark: (0, _tokens.token)('color.background.disabled', colors.DN70)
       },
       selected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: (0, _tokens.token)('color.background.selected.resting', colors.R500),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.R500)
       },
       focusSelected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: (0, _tokens.token)('color.background.selected.resting', colors.R500),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.R500)
       }
     },
     link: {
@@ -129,12 +131,12 @@ var values = {
         dark: 'none'
       },
       selected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
       }
     },
     subtle: {
@@ -143,24 +145,24 @@ var values = {
         dark: 'none'
       },
       hover: {
-        light: colors.N30A,
-        dark: colors.DN60
+        light: (0, _tokens.token)('color.background.transparentNeutral.hover', colors.N30A),
+        dark: (0, _tokens.token)('color.background.transparentNeutral.hover', colors.DN60)
       },
       active: {
-        light: fadedB75,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.background.transparentNeutral.pressed', fadedB75),
+        dark: (0, _tokens.token)('color.background.transparentNeutral.pressed', colors.B75)
       },
       disabled: {
         light: 'none',
         dark: 'none'
       },
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.DN0)
       }
     },
     'subtle-link': {
@@ -169,236 +171,236 @@ var values = {
         dark: 'none'
       },
       selected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.N20
+        light: (0, _tokens.token)('color.background.selected.resting', colors.N700),
+        dark: (0, _tokens.token)('color.background.selected.resting', colors.N20)
       }
     }
   },
   boxShadowColor: {
     default: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
       }
     },
     primary: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
       }
     },
     warning: {
       focus: {
-        light: colors.Y500,
-        dark: colors.Y500
+        light: (0, _tokens.token)('color.border.focus', colors.Y500),
+        dark: (0, _tokens.token)('color.border.focus', colors.Y500)
       },
       focusSelected: {
-        light: colors.Y500,
-        dark: colors.Y500
+        light: (0, _tokens.token)('color.border.focus', colors.Y500),
+        dark: (0, _tokens.token)('color.border.focus', colors.Y500)
       }
     },
     danger: {
       focus: {
-        light: colors.R100,
-        dark: colors.R100
+        light: (0, _tokens.token)('color.border.focus', colors.R100),
+        dark: (0, _tokens.token)('color.border.focus', colors.R100)
       },
       focusSelected: {
-        light: colors.R100,
-        dark: colors.R100
+        light: (0, _tokens.token)('color.border.focus', colors.R100),
+        dark: (0, _tokens.token)('color.border.focus', colors.R100)
       }
     },
     link: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
       }
     },
     subtle: {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
       }
     },
     'subtle-link': {
       focus: {
-        light: colors.B100,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
       },
       focusSelected: {
-        light: colors.B100,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.border.focus', colors.B100),
+        dark: (0, _tokens.token)('color.border.focus', colors.B75)
       }
     }
   },
   color: {
     default: {
       default: {
-        light: colors.N500,
-        dark: colors.DN400
+        light: (0, _tokens.token)('color.text.highEmphasis', colors.N500),
+        dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN400)
       },
       active: {
-        light: colors.B400,
-        dark: colors.B400
+        light: (0, _tokens.token)('color.text.highEmphasis', colors.B400),
+        dark: (0, _tokens.token)('color.text.highEmphasis', colors.B400)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
       }
     },
     primary: {
       default: {
-        light: colors.N0,
-        dark: colors.DN30
+        light: (0, _tokens.token)('color.text.onBold', colors.N0),
+        dark: (0, _tokens.token)('color.text.onBold', colors.DN30)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
       }
     },
     warning: {
       default: {
-        light: colors.N800,
-        dark: colors.N800
+        light: (0, _tokens.token)('color.text.onBoldWarning', colors.N800),
+        dark: (0, _tokens.token)('color.text.onBoldWarning', colors.N800)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N800,
-        dark: colors.N800
+        light: (0, _tokens.token)('color.text.selected', colors.N800),
+        dark: (0, _tokens.token)('color.text.selected', colors.N800)
       },
       focusSelected: {
-        light: colors.N800,
-        dark: colors.N800
+        light: (0, _tokens.token)('color.text.selected', colors.N800),
+        dark: (0, _tokens.token)('color.text.selected', colors.N800)
       }
     },
     danger: {
       default: {
-        light: colors.N0,
-        dark: colors.N0
+        light: (0, _tokens.token)('color.text.onBold', colors.N0),
+        dark: (0, _tokens.token)('color.text.onBold', colors.N0)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN30
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN30)
       },
       selected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: (0, _tokens.token)('color.text.selected', colors.N0),
+        dark: (0, _tokens.token)('color.text.selected', colors.N0)
       },
       focusSelected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: (0, _tokens.token)('color.text.selected', colors.N0),
+        dark: (0, _tokens.token)('color.text.selected', colors.N0)
       }
     },
     link: {
       default: {
-        light: colors.B400,
-        dark: colors.B100
+        light: (0, _tokens.token)('color.text.link.resting', colors.B400),
+        dark: (0, _tokens.token)('color.text.link.resting', colors.B100)
       },
       hover: {
-        light: colors.B300,
-        dark: colors.B75
+        light: (0, _tokens.token)('color.text.link.resting', colors.B300),
+        dark: (0, _tokens.token)('color.text.link.resting', colors.B75)
       },
       active: {
-        light: colors.B500,
-        dark: colors.B200
+        light: (0, _tokens.token)('color.text.link.pressed', colors.B500),
+        dark: (0, _tokens.token)('color.text.link.pressed', colors.B200)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN100
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN100)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.N700
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.N700)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.N700
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.N700)
       }
     },
     subtle: {
       default: {
-        light: colors.N500,
-        dark: colors.DN400
+        light: (0, _tokens.token)('color.text.highEmphasis', colors.N500),
+        dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN400)
       },
       active: {
-        light: colors.B400,
-        dark: colors.B400
+        light: (0, _tokens.token)('color.text.highEmphasis', colors.B400),
+        dark: (0, _tokens.token)('color.text.highEmphasis', colors.B400)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN100
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN100)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
       }
     },
     'subtle-link': {
       default: {
-        light: colors.N200,
-        dark: colors.DN400
+        light: (0, _tokens.token)('color.text.mediumEmphasis', colors.N200),
+        dark: (0, _tokens.token)('color.text.mediumEmphasis', colors.DN400)
       },
       hover: {
-        light: colors.N90,
-        dark: colors.B50
+        light: (0, _tokens.token)('color.text.mediumEmphasis', colors.N90),
+        dark: (0, _tokens.token)('color.text.mediumEmphasis', colors.B50)
       },
       active: {
-        light: colors.N400,
-        dark: colors.DN300
+        light: (0, _tokens.token)('color.text.highEmphasis', colors.N400),
+        dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN300)
       },
       disabled: {
-        light: colors.N70,
-        dark: colors.DN100
+        light: (0, _tokens.token)('color.text.disabled', colors.N70),
+        dark: (0, _tokens.token)('color.text.disabled', colors.DN100)
       },
       selected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
       },
       focusSelected: {
-        light: colors.N20,
-        dark: colors.DN400
+        light: (0, _tokens.token)('color.text.selected', colors.N20),
+        dark: (0, _tokens.token)('color.text.selected', colors.DN400)
       }
     }
   }

package/dist/cjs/shared/css.js

@@ -182,7 +182,7 @@ function getCss(_ref3) {
     // 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]': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
       key: 'disabled',

package/dist/cjs/version.json

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

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

@@ -8,7 +8,7 @@ const 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({
   appearance = 'default',
@@ -28,7 +28,7 @@ export function getCustomCss({
     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
 
@@ -61,7 +61,7 @@ export function getCustomCss({
   });
   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/es2019/shared/button-base.js

@@ -5,6 +5,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';
 
@@ -69,7 +71,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
 
@@ -91,6 +93,21 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     hasOverlay
   });
   const 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,
@@ -122,6 +139,6 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
       spacing
     })]
   }, iconAfter) : null, overlay ? jsx("span", {
-    css: overlayCss
+    css: [overlayCss, spinnerHackCss]
   }, overlay) : null);
 });