@atlaskit/button 16.1.4 → 16.2.0

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

@@ -70,7 +70,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.1.4",
+    packageVersion: "16.2.0",
     analyticsData: analyticsContext
   }); // Button currently calls preventDefault, which is not standard button behaviour
 
@@ -102,7 +102,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   if (isSelected || isDisabled || appearance === 'warning') {
     spinnerHackCss = {
       '[data-theme] & svg': {
-        stroke: isSelected || isDisabled ? `var(--ds-text-mediumEmphasis, ${N500})` : `var(--ds-text-onBoldWarning, ${N500})`
+        stroke: isSelected || isDisabled ? `var(--ds-text-subtle, ${N500})` : `var(--ds-text-warning-inverse, ${N500})`
       }
     };
   }

package/dist/es2019/shared/colors.js

@@ -7,106 +7,106 @@ const values = {
   background: {
     default: {
       default: {
-        light: `var(--ds-background-subtleNeutral-resting, ${colors.N20A})`,
-        dark: `var(--ds-background-subtleNeutral-resting, ${colors.DN70})`
+        light: `var(--ds-background-neutral, ${colors.N20A})`,
+        dark: `var(--ds-background-neutral, ${colors.DN70})`
       },
       hover: {
-        light: `var(--ds-background-subtleNeutral-hover, ${colors.N30A})`,
-        dark: `var(--ds-background-subtleNeutral-hover, ${colors.DN60})`
+        light: `var(--ds-background-neutral-hovered, ${colors.N30A})`,
+        dark: `var(--ds-background-neutral-hovered, ${colors.DN60})`
       },
       active: {
-        light: `var(--ds-background-subtleNeutral-pressed, ${fadedB75})`,
-        dark: `var(--ds-background-subtleNeutral-pressed, ${colors.B75})`
+        light: `var(--ds-background-neutral-pressed, ${fadedB75})`,
+        dark: `var(--ds-background-neutral-pressed, ${colors.B75})`
       },
       disabled: {
         light: `var(--ds-background-disabled, ${colors.N20A})`,
         dark: `var(--ds-background-disabled, ${colors.DN70})`
       },
       selected: {
-        light: `var(--ds-background-selected-resting, ${colors.N700})`,
-        dark: `var(--ds-background-selected-resting, ${colors.DN0})`
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       },
       focusSelected: {
-        light: `var(--ds-background-selected-resting, ${colors.N700})`,
-        dark: `var(--ds-background-selected-resting, ${colors.DN0})`
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       }
     },
     primary: {
       default: {
-        light: `var(--ds-background-boldBrand-resting, ${colors.B400})`,
-        dark: `var(--ds-background-boldBrand-resting, ${colors.B100})`
+        light: `var(--ds-background-brand-bold, ${colors.B400})`,
+        dark: `var(--ds-background-brand-bold, ${colors.B100})`
       },
       hover: {
-        light: `var(--ds-background-boldBrand-hover, ${colors.B300})`,
-        dark: `var(--ds-background-boldBrand-hover, ${colors.B75})`
+        light: `var(--ds-background-brand-bold-hovered, ${colors.B300})`,
+        dark: `var(--ds-background-brand-bold-hovered, ${colors.B75})`
       },
       active: {
-        light: `var(--ds-background-boldBrand-pressed, ${colors.B500})`,
-        dark: `var(--ds-background-boldBrand-pressed, ${colors.B200})`
+        light: `var(--ds-background-brand-bold-pressed, ${colors.B500})`,
+        dark: `var(--ds-background-brand-bold-pressed, ${colors.B200})`
       },
       disabled: {
         light: `var(--ds-background-disabled, ${colors.N20A})`,
         dark: `var(--ds-background-disabled, ${colors.DN70})`
       },
       selected: {
-        light: `var(--ds-background-selected-resting, ${colors.N700})`,
-        dark: `var(--ds-background-selected-resting, ${colors.DN0})`
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       },
       focusSelected: {
-        light: `var(--ds-background-selected-resting, ${colors.N700})`,
-        dark: `var(--ds-background-selected-resting, ${colors.DN0})`
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       }
     },
     warning: {
       default: {
-        light: `var(--ds-background-boldWarning-resting, ${colors.Y300})`,
-        dark: `var(--ds-background-boldWarning-resting, ${colors.Y300})`
+        light: `var(--ds-background-warning-bold, ${colors.Y300})`,
+        dark: `var(--ds-background-warning-bold, ${colors.Y300})`
       },
       hover: {
-        light: `var(--ds-background-boldWarning-hover, ${colors.Y200})`,
-        dark: `var(--ds-background-boldWarning-hover, ${colors.Y200})`
+        light: `var(--ds-background-warning-bold-hovered, ${colors.Y200})`,
+        dark: `var(--ds-background-warning-bold-hovered, ${colors.Y200})`
       },
       active: {
-        light: `var(--ds-background-boldWarning-pressed, ${colors.Y400})`,
-        dark: `var(--ds-background-boldWarning-pressed, ${colors.Y400})`
+        light: `var(--ds-background-warning-bold-pressed, ${colors.Y400})`,
+        dark: `var(--ds-background-warning-bold-pressed, ${colors.Y400})`
       },
       disabled: {
         light: `var(--ds-background-disabled, ${colors.N20A})`,
         dark: `var(--ds-background-disabled, ${colors.DN70})`
       },
       selected: {
-        light: `var(--ds-background-selected-resting, ${colors.Y400})`,
-        dark: `var(--ds-background-selected-resting, ${colors.Y400})`
+        light: `var(--ds-background-brand, ${colors.Y400})`,
+        dark: `var(--ds-background-brand, ${colors.Y400})`
       },
       focusSelected: {
-        light: `var(--ds-background-selected-resting, ${colors.Y400})`,
-        dark: `var(--ds-background-selected-resting, ${colors.Y400})`
+        light: `var(--ds-background-brand, ${colors.Y400})`,
+        dark: `var(--ds-background-brand, ${colors.Y400})`
       }
     },
     danger: {
       default: {
-        light: `var(--ds-background-boldDanger-resting, ${colors.R400})`,
-        dark: `var(--ds-background-boldDanger-resting, ${colors.R400})`
+        light: `var(--ds-background-danger-bold, ${colors.R400})`,
+        dark: `var(--ds-background-danger-bold, ${colors.R400})`
       },
       hover: {
-        light: `var(--ds-background-boldDanger-hover, ${colors.R300})`,
-        dark: `var(--ds-background-boldDanger-hover, ${colors.R300})`
+        light: `var(--ds-background-danger-bold-hovered, ${colors.R300})`,
+        dark: `var(--ds-background-danger-bold-hovered, ${colors.R300})`
       },
       active: {
-        light: `var(--ds-background-boldDanger-pressed, ${colors.R500})`,
-        dark: `var(--ds-background-boldDanger-pressed, ${colors.R500})`
+        light: `var(--ds-background-danger-bold-pressed, ${colors.R500})`,
+        dark: `var(--ds-background-danger-bold-pressed, ${colors.R500})`
       },
       disabled: {
         light: `var(--ds-background-disabled, ${colors.N20A})`,
         dark: `var(--ds-background-disabled, ${colors.DN70})`
       },
       selected: {
-        light: `var(--ds-background-selected-resting, ${colors.R500})`,
-        dark: `var(--ds-background-selected-resting, ${colors.R500})`
+        light: `var(--ds-background-brand, ${colors.R500})`,
+        dark: `var(--ds-background-brand, ${colors.R500})`
       },
       focusSelected: {
-        light: `var(--ds-background-selected-resting, ${colors.R500})`,
-        dark: `var(--ds-background-selected-resting, ${colors.R500})`
+        light: `var(--ds-background-brand, ${colors.R500})`,
+        dark: `var(--ds-background-brand, ${colors.R500})`
       }
     },
     link: {
@@ -115,12 +115,12 @@ const values = {
         dark: 'none'
       },
       selected: {
-        light: `var(--ds-background-selected-resting, ${colors.N700})`,
-        dark: `var(--ds-background-selected-resting, ${colors.N20})`
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.N20})`
       },
       focusSelected: {
-        light: `var(--ds-background-selected-resting, ${colors.N700})`,
-        dark: `var(--ds-background-selected-resting, ${colors.N20})`
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.N20})`
       }
     },
     subtle: {
@@ -129,24 +129,24 @@ const values = {
         dark: 'none'
       },
       hover: {
-        light: `var(--ds-background-transparentNeutral-hover, ${colors.N30A})`,
-        dark: `var(--ds-background-transparentNeutral-hover, ${colors.DN60})`
+        light: `var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`,
+        dark: `var(--ds-background-neutral-subtle-hovered, ${colors.DN60})`
       },
       active: {
-        light: `var(--ds-background-transparentNeutral-pressed, ${fadedB75})`,
-        dark: `var(--ds-background-transparentNeutral-pressed, ${colors.B75})`
+        light: `var(--ds-background-neutral-subtle-pressed, ${fadedB75})`,
+        dark: `var(--ds-background-neutral-subtle-pressed, ${colors.B75})`
       },
       disabled: {
         light: 'none',
         dark: 'none'
       },
       selected: {
-        light: `var(--ds-background-selected-resting, ${colors.N700})`,
-        dark: `var(--ds-background-selected-resting, ${colors.DN0})`
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       },
       focusSelected: {
-        light: `var(--ds-background-selected-resting, ${colors.N700})`,
-        dark: `var(--ds-background-selected-resting, ${colors.DN0})`
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.DN0})`
       }
     },
     'subtle-link': {
@@ -155,236 +155,236 @@ const values = {
         dark: 'none'
       },
       selected: {
-        light: `var(--ds-background-selected-resting, ${colors.N700})`,
-        dark: `var(--ds-background-selected-resting, ${colors.N20})`
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.N20})`
       },
       focusSelected: {
-        light: `var(--ds-background-selected-resting, ${colors.N700})`,
-        dark: `var(--ds-background-selected-resting, ${colors.N20})`
+        light: `var(--ds-background-brand, ${colors.N700})`,
+        dark: `var(--ds-background-brand, ${colors.N20})`
       }
     }
   },
   boxShadowColor: {
     default: {
       focus: {
-        light: `var(--ds-border-focus, ${colors.B100})`,
-        dark: `var(--ds-border-focus, ${colors.B75})`
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       },
       focusSelected: {
-        light: `var(--ds-border-focus, ${colors.B100})`,
-        dark: `var(--ds-border-focus, ${colors.B75})`
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       }
     },
     primary: {
       focus: {
-        light: `var(--ds-border-focus, ${colors.B100})`,
-        dark: `var(--ds-border-focus, ${colors.B75})`
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       },
       focusSelected: {
-        light: `var(--ds-border-focus, ${colors.B100})`,
-        dark: `var(--ds-border-focus, ${colors.B75})`
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       }
     },
     warning: {
       focus: {
-        light: `var(--ds-border-focus, ${colors.Y500})`,
-        dark: `var(--ds-border-focus, ${colors.Y500})`
+        light: `var(--ds-border-focused, ${colors.Y500})`,
+        dark: `var(--ds-border-focused, ${colors.Y500})`
       },
       focusSelected: {
-        light: `var(--ds-border-focus, ${colors.Y500})`,
-        dark: `var(--ds-border-focus, ${colors.Y500})`
+        light: `var(--ds-border-focused, ${colors.Y500})`,
+        dark: `var(--ds-border-focused, ${colors.Y500})`
       }
     },
     danger: {
       focus: {
-        light: `var(--ds-border-focus, ${colors.R100})`,
-        dark: `var(--ds-border-focus, ${colors.R100})`
+        light: `var(--ds-border-focused, ${colors.R100})`,
+        dark: `var(--ds-border-focused, ${colors.R100})`
       },
       focusSelected: {
-        light: `var(--ds-border-focus, ${colors.R100})`,
-        dark: `var(--ds-border-focus, ${colors.R100})`
+        light: `var(--ds-border-focused, ${colors.R100})`,
+        dark: `var(--ds-border-focused, ${colors.R100})`
       }
     },
     link: {
       focus: {
-        light: `var(--ds-border-focus, ${colors.B100})`,
-        dark: `var(--ds-border-focus, ${colors.B75})`
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       },
       focusSelected: {
-        light: `var(--ds-border-focus, ${colors.B100})`,
-        dark: `var(--ds-border-focus, ${colors.B75})`
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       }
     },
     subtle: {
       focus: {
-        light: `var(--ds-border-focus, ${colors.B100})`,
-        dark: `var(--ds-border-focus, ${colors.B75})`
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       },
       focusSelected: {
-        light: `var(--ds-border-focus, ${colors.B100})`,
-        dark: `var(--ds-border-focus, ${colors.B75})`
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       }
     },
     'subtle-link': {
       focus: {
-        light: `var(--ds-border-focus, ${colors.B100})`,
-        dark: `var(--ds-border-focus, ${colors.B75})`
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       },
       focusSelected: {
-        light: `var(--ds-border-focus, ${colors.B100})`,
-        dark: `var(--ds-border-focus, ${colors.B75})`
+        light: `var(--ds-border-focused, ${colors.B100})`,
+        dark: `var(--ds-border-focused, ${colors.B75})`
       }
     }
   },
   color: {
     default: {
       default: {
-        light: `var(--ds-text-highEmphasis, ${colors.N500})`,
-        dark: `var(--ds-text-highEmphasis, ${colors.DN400})`
+        light: `var(--ds-text, ${colors.N500})`,
+        dark: `var(--ds-text, ${colors.DN400})`
       },
       active: {
-        light: `var(--ds-text-highEmphasis, ${colors.B400})`,
-        dark: `var(--ds-text-highEmphasis, ${colors.B400})`
+        light: `var(--ds-text, ${colors.B400})`,
+        dark: `var(--ds-text, ${colors.B400})`
       },
       disabled: {
         light: `var(--ds-text-disabled, ${colors.N70})`,
         dark: `var(--ds-text-disabled, ${colors.DN30})`
       },
       selected: {
-        light: `var(--ds-text-selected, ${colors.N20})`,
-        dark: `var(--ds-text-selected, ${colors.DN400})`
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       },
       focusSelected: {
-        light: `var(--ds-text-selected, ${colors.N20})`,
-        dark: `var(--ds-text-selected, ${colors.DN400})`
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       }
     },
     primary: {
       default: {
-        light: `var(--ds-text-onBold, ${colors.N0})`,
-        dark: `var(--ds-text-onBold, ${colors.DN30})`
+        light: `var(--ds-text-inverse, ${colors.N0})`,
+        dark: `var(--ds-text-inverse, ${colors.DN30})`
       },
       disabled: {
         light: `var(--ds-text-disabled, ${colors.N70})`,
         dark: `var(--ds-text-disabled, ${colors.DN30})`
       },
       selected: {
-        light: `var(--ds-text-selected, ${colors.N20})`,
-        dark: `var(--ds-text-selected, ${colors.DN400})`
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       },
       focusSelected: {
-        light: `var(--ds-text-selected, ${colors.N20})`,
-        dark: `var(--ds-text-selected, ${colors.DN400})`
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       }
     },
     warning: {
       default: {
-        light: `var(--ds-text-onBoldWarning, ${colors.N800})`,
-        dark: `var(--ds-text-onBoldWarning, ${colors.N800})`
+        light: `var(--ds-text-warning-inverse, ${colors.N800})`,
+        dark: `var(--ds-text-warning-inverse, ${colors.N800})`
       },
       disabled: {
         light: `var(--ds-text-disabled, ${colors.N70})`,
         dark: `var(--ds-text-disabled, ${colors.DN30})`
       },
       selected: {
-        light: `var(--ds-text-selected, ${colors.N800})`,
-        dark: `var(--ds-text-selected, ${colors.N800})`
+        light: `var(--ds-text-brand, ${colors.N800})`,
+        dark: `var(--ds-text-brand, ${colors.N800})`
       },
       focusSelected: {
-        light: `var(--ds-text-selected, ${colors.N800})`,
-        dark: `var(--ds-text-selected, ${colors.N800})`
+        light: `var(--ds-text-brand, ${colors.N800})`,
+        dark: `var(--ds-text-brand, ${colors.N800})`
       }
     },
     danger: {
       default: {
-        light: `var(--ds-text-onBold, ${colors.N0})`,
-        dark: `var(--ds-text-onBold, ${colors.N0})`
+        light: `var(--ds-text-inverse, ${colors.N0})`,
+        dark: `var(--ds-text-inverse, ${colors.N0})`
       },
       disabled: {
         light: `var(--ds-text-disabled, ${colors.N70})`,
         dark: `var(--ds-text-disabled, ${colors.DN30})`
       },
       selected: {
-        light: `var(--ds-text-selected, ${colors.N0})`,
-        dark: `var(--ds-text-selected, ${colors.N0})`
+        light: `var(--ds-text-brand, ${colors.N0})`,
+        dark: `var(--ds-text-brand, ${colors.N0})`
       },
       focusSelected: {
-        light: `var(--ds-text-selected, ${colors.N0})`,
-        dark: `var(--ds-text-selected, ${colors.N0})`
+        light: `var(--ds-text-brand, ${colors.N0})`,
+        dark: `var(--ds-text-brand, ${colors.N0})`
       }
     },
     link: {
       default: {
-        light: `var(--ds-text-link-resting, ${colors.B400})`,
-        dark: `var(--ds-text-link-resting, ${colors.B100})`
+        light: `var(--ds-link, ${colors.B400})`,
+        dark: `var(--ds-link, ${colors.B100})`
       },
       hover: {
-        light: `var(--ds-text-link-resting, ${colors.B300})`,
-        dark: `var(--ds-text-link-resting, ${colors.B75})`
+        light: `var(--ds-link, ${colors.B300})`,
+        dark: `var(--ds-link, ${colors.B75})`
       },
       active: {
-        light: `var(--ds-text-link-pressed, ${colors.B500})`,
-        dark: `var(--ds-text-link-pressed, ${colors.B200})`
+        light: `var(--ds-link-pressed, ${colors.B500})`,
+        dark: `var(--ds-link-pressed, ${colors.B200})`
       },
       disabled: {
         light: `var(--ds-text-disabled, ${colors.N70})`,
         dark: `var(--ds-text-disabled, ${colors.DN100})`
       },
       selected: {
-        light: `var(--ds-text-selected, ${colors.N20})`,
-        dark: `var(--ds-text-selected, ${colors.N700})`
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.N700})`
       },
       focusSelected: {
-        light: `var(--ds-text-selected, ${colors.N20})`,
-        dark: `var(--ds-text-selected, ${colors.N700})`
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.N700})`
       }
     },
     subtle: {
       default: {
-        light: `var(--ds-text-highEmphasis, ${colors.N500})`,
-        dark: `var(--ds-text-highEmphasis, ${colors.DN400})`
+        light: `var(--ds-text, ${colors.N500})`,
+        dark: `var(--ds-text, ${colors.DN400})`
       },
       active: {
-        light: `var(--ds-text-highEmphasis, ${colors.B400})`,
-        dark: `var(--ds-text-highEmphasis, ${colors.B400})`
+        light: `var(--ds-text, ${colors.B400})`,
+        dark: `var(--ds-text, ${colors.B400})`
       },
       disabled: {
         light: `var(--ds-text-disabled, ${colors.N70})`,
         dark: `var(--ds-text-disabled, ${colors.DN100})`
       },
       selected: {
-        light: `var(--ds-text-selected, ${colors.N20})`,
-        dark: `var(--ds-text-selected, ${colors.DN400})`
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       },
       focusSelected: {
-        light: `var(--ds-text-selected, ${colors.N20})`,
-        dark: `var(--ds-text-selected, ${colors.DN400})`
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       }
     },
     'subtle-link': {
       default: {
-        light: `var(--ds-text-mediumEmphasis, ${colors.N200})`,
-        dark: `var(--ds-text-mediumEmphasis, ${colors.DN400})`
+        light: `var(--ds-text-subtle, ${colors.N200})`,
+        dark: `var(--ds-text-subtle, ${colors.DN400})`
       },
       hover: {
-        light: `var(--ds-text-mediumEmphasis, ${colors.N90})`,
-        dark: `var(--ds-text-mediumEmphasis, ${colors.B50})`
+        light: `var(--ds-text-subtle, ${colors.N90})`,
+        dark: `var(--ds-text-subtle, ${colors.B50})`
       },
       active: {
-        light: `var(--ds-text-highEmphasis, ${colors.N400})`,
-        dark: `var(--ds-text-highEmphasis, ${colors.DN300})`
+        light: `var(--ds-text, ${colors.N400})`,
+        dark: `var(--ds-text, ${colors.DN300})`
       },
       disabled: {
         light: `var(--ds-text-disabled, ${colors.N70})`,
         dark: `var(--ds-text-disabled, ${colors.DN100})`
       },
       selected: {
-        light: `var(--ds-text-selected, ${colors.N20})`,
-        dark: `var(--ds-text-selected, ${colors.DN400})`
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       },
       focusSelected: {
-        light: `var(--ds-text-selected, ${colors.N20})`,
-        dark: `var(--ds-text-selected, ${colors.DN400})`
+        light: `var(--ds-text-brand, ${colors.N20})`,
+        dark: `var(--ds-text-brand, ${colors.DN400})`
       }
     }
   }

package/dist/es2019/version.json

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

package/dist/esm/button.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onMouseDown", "onMouseUp"];
 import React, { useCallback, useMemo, useState } from 'react';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import ButtonBase from './shared/button-base';
 import { getCss } from './shared/css';
 import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
@@ -10,13 +11,15 @@ import getIsOnlySingleIcon from './shared/get-is-only-single-icon';
 function noop() {}
 
 var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-var ButtonWithMode = /*#__PURE__*/React.forwardRef(function ButtonWithMode(_ref, ref) {
-  var mode = _ref.mode,
-      _ref$onMouseDown = _ref.onMouseDown,
+var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
+  var _ref$onMouseDown = _ref.onMouseDown,
       providedOnMouseDown = _ref$onMouseDown === void 0 ? noop : _ref$onMouseDown,
       _ref$onMouseUp = _ref.onMouseUp,
       providedOnMouseUp = _ref$onMouseUp === void 0 ? noop : _ref$onMouseUp,
-      rest = _objectWithoutProperties(_ref, ["mode", "onMouseDown", "onMouseUp"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
 
   var appearance = rest.appearance || 'default';
   var spacing = rest.spacing || 'default';
@@ -64,15 +67,6 @@ var ButtonWithMode = /*#__PURE__*/React.forwardRef(function ButtonWithMode(_ref,
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp
   }));
-});
-var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(props, ref) {
-  return /*#__PURE__*/React.createElement(GlobalTheme.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return /*#__PURE__*/React.createElement(ButtonWithMode, _extends({}, props, {
-      ref: ref,
-      mode: mode
-    }));
-  });
 })); // Tools including enzyme rely on components having a display name
 
 Button.displayName = 'Button';

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

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { useCallback, useState } from 'react';
 import GlobalTheme from '@atlaskit/theme/components';
@@ -84,7 +85,7 @@ var CustomThemeButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
       providedOnBlur = _ref2.onBlur,
       _ref2$theme = _ref2.theme,
       theme = _ref2$theme === void 0 ? defaultThemeFn : _ref2$theme,
-      rest = _objectWithoutProperties(_ref2, ["appearance", "autoFocus", "isDisabled", "isSelected", "shouldFitContainer", "spacing", "isLoading", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "onFocus", "onBlur", "theme"]);
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   // TODO is there a nicer way to do this?
   // Add default props back into object for spreading

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

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { createTheme } from '@atlaskit/theme/components';
 import { getCss } from '../shared/css';

package/dist/esm/entry-points/standard-button.js

@@ -1 +1,6 @@
+/**
+ * Must import '@emotion/core' in order to resolve type error
+ * https://product-fabric.atlassian.net/browse/DSP-3222
+ */
+import '@emotion/core';
 export { default } from '../button';