@atlaskit/button 21.0.0 → 21.1.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/button
 
+## 21.1.1
+
+### Patch Changes
+
+- [#119753](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119753)
+  [`6a1bfec451e30`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a1bfec451e30) -
+  [ux] `color` and `text-decoration` style specificity have been increased to reduce the probability
+  of global `<a>` tag styles interfering with button styles.
+
+## 21.1.0
+
+### Minor Changes
+
+- [#117964](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117964)
+  [`78292160a22d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/78292160a22d6) -
+  Updated styles for new button to use `rem` unit for width and height instead of `em` with
+  fractional units. This change is no longer behind a feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.0.0
 
 ### Major Changes

package/dist/cjs/new-button/containers/split-button/split-button.js

@@ -61,14 +61,6 @@ var dividerRefreshedOffsetStyles = (0, _react.css)({
   marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
 });
 var dividerHeight = {
-  default: (0, _react.css)({
-    height: "".concat(32 / 14, "em")
-  }),
-  compact: (0, _react.css)({
-    height: "".concat(24 / 14, "em")
-  })
-};
-var dividerHeightWithRem = {
   default: (0, _react.css)({
     height: '2rem'
   }),
@@ -77,17 +69,6 @@ var dividerHeightWithRem = {
   })
 };
 var defaultDividerHeight = {
-  // The divider height is calculated by subtracting twice the border width from the button height.
-  // This ensures the divider does not intersect with the button's border, avoiding visual issues
-  // caused by overlapping alpha colors (color.border) at the intersection.
-  default: (0, _react.css)({
-    height: "calc(".concat(32 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
-  }),
-  compact: (0, _react.css)({
-    height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
-  })
-};
-var defaultDividerHeightWithRem = {
   // The divider height is calculated by subtracting twice the border width from the button height.
   // This ensures the divider does not intersect with the button's border, avoiding visual issues
   // caused by overlapping alpha colors (color.border) at the intersection.
@@ -106,13 +87,10 @@ var Divider = exports.Divider = function Divider(_ref) {
     spacing = _ref.spacing,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
-  // Pulling these out of the below `css` prop to avoid nested ternaries
-  var defaultDividerHeightStyles = (0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
-  var dividerHeightStyles = (0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
   return (
     // I find it funny to provide a div for Divider
     (0, _react.jsx)("div", {
-      css: [baseDividerStyles, appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultDividerHeightStyles[spacing] : dividerHeightStyles[spacing], isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

package/dist/cjs/new-button/variants/shared/use-button-base.js

@@ -23,38 +23,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-// If updating `buttonStyles`, also update `buttonStylesWithRem`.
 var buttonStyles = (0, _primitives.xcss)({
-  display: 'inline-flex',
-  boxSizing: 'border-box',
-  width: 'auto',
-  maxWidth: '100%',
-  position: 'relative',
-  alignItems: 'baseline',
-  justifyContent: 'center',
-  columnGap: 'space.050',
-  borderRadius: 'border.radius.100',
-  borderWidth: 'border.width.0',
-  flexShrink: 0,
-  height: "".concat(32 / 14, "em"),
-  font: 'font.body',
-  fontWeight: 'font.weight.medium',
-  paddingBlock: 'space.075',
-  paddingInlineEnd: 'space.150',
-  paddingInlineStart: 'space.150',
-  textAlign: 'center',
-  transition: 'background 0.1s ease-out',
-  verticalAlign: 'middle',
-  '::after': {
-    borderRadius: 'inherit',
-    inset: 'space.0',
-    borderStyle: 'solid',
-    borderWidth: "var(--ds-border-width, 1px)",
-    pointerEvents: 'none',
-    position: 'absolute'
-  }
-});
-var buttonStylesWithRem = (0, _primitives.xcss)({
   display: 'inline-flex',
   boxSizing: 'border-box',
   width: 'auto',
@@ -119,6 +88,21 @@ var defaultStyles = (0, _primitives.xcss)({
     // @ts-expect-error
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text, ".concat(colors.N500, ")")
+  },
+  ':hover': {
+    // @ts-expect-error — using tokens for explicit fallback usage.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
+    color: "var(--ds-text, ".concat(colors.N500, ")")
+  },
+  ':active': {
+    // @ts-expect-error — using tokens for explicit fallback usage.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
+    color: "var(--ds-text, ".concat(colors.N500, ")")
+  },
+  ':focus': {
+    // @ts-expect-error — using tokens for explicit fallback usage.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
+    color: "var(--ds-text, ".concat(colors.N500, ")")
   }
 });
 var defaultRefreshedStyles = (0, _primitives.xcss)({
@@ -130,15 +114,31 @@ var defaultRefreshedStyles = (0, _primitives.xcss)({
   },
   ':visited': {
     color: 'color.text.subtle'
+  },
+  ':hover': {
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    color: 'color.text.subtle'
+  },
+  ':focus': {
+    color: 'color.text.subtle'
   }
 });
 var primaryStyles = (0, _primitives.xcss)({
   background: "var(--ds-background-brand-bold, #0052CC)",
-  // @ts-expect-error
-  color: "var(--ds-text-inverse, #FFFFFF)",
+  color: 'color.text.inverse',
   ':visited': {
-    // @ts-expect-error
-    color: "var(--ds-text-inverse, #FFFFFF)"
+    color: 'color.text.inverse'
+  },
+  ':hover': {
+    color: 'color.text.inverse'
+  },
+  ':active': {
+    color: 'color.text.inverse'
+  },
+  ':focus': {
+    color: 'color.text.inverse'
   }
 });
 var primaryInteractiveStyles = (0, _primitives.xcss)({
@@ -160,6 +160,18 @@ var warningStyles = (0, _primitives.xcss)({
   ':visited': {
     // @ts-expect-error
     color: "var(--ds-text-warning-inverse, #172B4D)"
+  },
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  },
+  ':focus': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)"
   }
 });
 var warningInteractiveStyles = (0, _primitives.xcss)({
@@ -179,6 +191,15 @@ var dangerStyles = (0, _primitives.xcss)({
   color: 'color.text.inverse',
   ':visited': {
     color: 'color.text.inverse'
+  },
+  ':hover': {
+    color: 'color.text.inverse'
+  },
+  ':active': {
+    color: 'color.text.inverse'
+  },
+  ':focus': {
+    color: 'color.text.inverse'
   }
 });
 var dangerInteractiveStyles = (0, _primitives.xcss)({
@@ -196,6 +217,15 @@ var discoveryStyles = (0, _primitives.xcss)({
   color: 'color.text.inverse',
   ':visited': {
     color: 'color.text.inverse'
+  },
+  ':hover': {
+    color: 'color.text.inverse'
+  },
+  ':active': {
+    color: 'color.text.inverse'
+  },
+  ':focus': {
+    color: 'color.text.inverse'
   }
 });
 var discoveryInteractiveStyles = (0, _primitives.xcss)({
@@ -215,6 +245,18 @@ var subtleStyles = (0, _primitives.xcss)({
   ':visited': {
     // @ts-expect-error
     color: "var(--ds-text, #42526E)"
+  },
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  },
+  ':focus': {
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
   }
 });
 var subtleRefreshedStyles = (0, _primitives.xcss)({
@@ -222,6 +264,15 @@ var subtleRefreshedStyles = (0, _primitives.xcss)({
   color: 'color.text.subtle',
   ':visited': {
     color: 'color.text.subtle'
+  },
+  ':hover': {
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    color: 'color.text.subtle'
+  },
+  ':focus': {
+    color: 'color.text.subtle'
   }
 });
 var subtleInteractiveStyles = (0, _primitives.xcss)({
@@ -247,8 +298,10 @@ var subtleInteractiveRefreshedStyles = (0, _primitives.xcss)({
   }
 });
 
-// Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
-var linkDecorationUnsetStyles = (0, _primitives.xcss)({
+// Reinforce existing styles with higher specificity
+// to defend against global anchor styles from products,
+// preventing issues in Jira and Confluence.
+var linkDefensiveStyles = (0, _primitives.xcss)({
   textDecoration: 'none',
   ':hover': {
     textDecoration: 'none'
@@ -258,28 +311,34 @@ var linkDecorationUnsetStyles = (0, _primitives.xcss)({
   },
   ':focus': {
     textDecoration: 'none'
+  },
+  ':visited': {
+    textDecoration: 'none'
   }
 });
 var disabledStyles = (0, _primitives.xcss)({
   cursor: 'not-allowed',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-  // @ts-expect-error
-  color: "var(--ds-text-disabled, #091E424F)",
+  color: 'color.text.disabled',
+  '::after': {
+    content: 'none'
+  },
+  ':visited': {
+    color: 'color.text.disabled'
+  },
   ':hover': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-    // @ts-expect-error
-    color: "var(--ds-text-disabled, #091E424F)"
+    color: 'color.text.disabled'
   },
   ':active': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-    // @ts-expect-error
-    color: "var(--ds-text-disabled, #091E424F)"
+    color: 'color.text.disabled'
   },
-  '::after': {
-    content: 'none'
+  ':focus': {
+    color: 'color.text.disabled'
   }
 });
 var selectedStyles = (0, _primitives.xcss)({
@@ -292,6 +351,21 @@ var selectedStyles = (0, _primitives.xcss)({
     // @ts-expect-error
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-selected, ".concat(colors.N20, ")")
+  },
+  ':hover': {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")")
+  },
+  ':active': {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")")
+  },
+  ':focus': {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")")
   }
 });
 var selectedRefreshedStyles = (0, _primitives.xcss)({
@@ -303,6 +377,15 @@ var selectedRefreshedStyles = (0, _primitives.xcss)({
   },
   ':visited': {
     color: 'color.text.selected'
+  },
+  ':hover': {
+    color: 'color.text.selected'
+  },
+  ':active': {
+    color: 'color.text.selected'
+  },
+  ':focus': {
+    color: 'color.text.selected'
   }
 });
 var selectedInsideSplitButtonStyles = (0, _primitives.xcss)({
@@ -393,17 +476,7 @@ var selectedDiscoveryStyles = (0, _primitives.xcss)({
     background: "var(--ds-background-selected, #403294)"
   }
 });
-
-// If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
 var spacingCompactStyles = (0, _primitives.xcss)({
-  columnGap: 'space.050',
-  height: "".concat(24 / 14, "em"),
-  paddingBlock: 'space.025',
-  paddingInlineEnd: 'space.150',
-  paddingInlineStart: 'space.150',
-  verticalAlign: 'middle'
-});
-var spacingCompactStylesWithRem = (0, _primitives.xcss)({
   columnGap: 'space.050',
   height: '1.5rem',
   paddingBlock: 'space.025',
@@ -420,25 +493,13 @@ var fullWidthStyles = (0, _primitives.xcss)({
 var loadingStyles = (0, _primitives.xcss)({
   cursor: 'progress'
 });
-// If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
 var iconButtonStyles = (0, _primitives.xcss)({
-  height: "".concat(32 / 14, "em"),
-  width: "".concat(32 / 14, "em"),
-  paddingInlineEnd: 'space.0',
-  paddingInlineStart: 'space.0'
-});
-var iconButtonStylesWithRem = (0, _primitives.xcss)({
   height: '2rem',
   width: '2rem',
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
-// If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
 var iconButtonCompactStyles = (0, _primitives.xcss)({
-  width: "".concat(24 / 14, "em"),
-  height: "".concat(24 / 14, "em")
-});
-var iconButtonCompactStylesWithRem = (0, _primitives.xcss)({
   width: '1.5rem',
   height: '1.5rem'
 });
@@ -488,6 +549,7 @@ var useButtonBase = function useButtonBase(_ref) {
     propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    buttonType = _ref.buttonType,
     _ref$isDisabled = _ref.isDisabled,
     propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isLoading = _ref.isLoading,
@@ -537,13 +599,13 @@ var useButtonBase = function useButtonBase(_ref) {
   (0, _useAutoFocus.default)(localRef, autoFocus);
   return _objectSpread({
     ref: (0, _mergeRefs.default)([localRef, ref]),
-    xcss: [(0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? buttonStylesWithRem : buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), buttonType === 'link' && linkDefensiveStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && ((0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? spacingCompactStylesWithRem : spacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && ((0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? iconButtonStylesWithRem : iconButtonStyles), isIconButton && spacing === 'compact' && ((0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? iconButtonCompactStylesWithRem : iconButtonCompactStyles), shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/_react.default.createElement(_splitButtonContext.SplitButtonContext.Provider, {
       value: undefined

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

@@ -133,7 +133,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "21.0.0",
+    packageVersion: "21.1.1",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/new-button/containers/split-button/split-button.js

@@ -55,14 +55,6 @@ const dividerRefreshedOffsetStyles = css({
   marginInline: `calc(0px - ${"var(--ds-border-width, 1px)"})`
 });
 const dividerHeight = {
-  default: css({
-    height: `${32 / 14}em`
-  }),
-  compact: css({
-    height: `${24 / 14}em`
-  })
-};
-const dividerHeightWithRem = {
   default: css({
     height: '2rem'
   }),
@@ -71,17 +63,6 @@ const dividerHeightWithRem = {
   })
 };
 const defaultDividerHeight = {
-  // The divider height is calculated by subtracting twice the border width from the button height.
-  // This ensures the divider does not intersect with the button's border, avoiding visual issues
-  // caused by overlapping alpha colors (color.border) at the intersection.
-  default: css({
-    height: `calc(${32 / 14}em - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
-  }),
-  compact: css({
-    height: `calc(${24 / 14}em - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
-  })
-};
-const defaultDividerHeightWithRem = {
   // The divider height is calculated by subtracting twice the border width from the button height.
   // This ensures the divider does not intersect with the button's border, avoiding visual issues
   // caused by overlapping alpha colors (color.border) at the intersection.
@@ -100,13 +81,10 @@ export const Divider = ({
   spacing,
   isDisabled = false
 }) => {
-  // Pulling these out of the below `css` prop to avoid nested ternaries
-  const defaultDividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
-  const dividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeightStyles[spacing] : dividerHeightStyles[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

package/dist/es2019/new-button/variants/shared/use-button-base.js

@@ -10,38 +10,7 @@ import { SplitButtonContext, useSplitButtonContext } from '../../containers/spli
 import blockEvents from './block-events';
 import { LOADING_LABEL } from './constants';
 import renderLoadingOverlay from './loading-overlay';
-// If updating `buttonStyles`, also update `buttonStylesWithRem`.
 const buttonStyles = xcss({
-  display: 'inline-flex',
-  boxSizing: 'border-box',
-  width: 'auto',
-  maxWidth: '100%',
-  position: 'relative',
-  alignItems: 'baseline',
-  justifyContent: 'center',
-  columnGap: 'space.050',
-  borderRadius: 'border.radius.100',
-  borderWidth: 'border.width.0',
-  flexShrink: 0,
-  height: `${32 / 14}em`,
-  font: 'font.body',
-  fontWeight: 'font.weight.medium',
-  paddingBlock: 'space.075',
-  paddingInlineEnd: 'space.150',
-  paddingInlineStart: 'space.150',
-  textAlign: 'center',
-  transition: 'background 0.1s ease-out',
-  verticalAlign: 'middle',
-  '::after': {
-    borderRadius: 'inherit',
-    inset: 'space.0',
-    borderStyle: 'solid',
-    borderWidth: "var(--ds-border-width, 1px)",
-    pointerEvents: 'none',
-    position: 'absolute'
-  }
-});
-const buttonStylesWithRem = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
   width: 'auto',
@@ -106,6 +75,21 @@ const defaultStyles = xcss({
     // @ts-expect-error
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text, ${colors.N500})`
+  },
+  ':hover': {
+    // @ts-expect-error — using tokens for explicit fallback usage.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
+    color: `var(--ds-text, ${colors.N500})`
+  },
+  ':active': {
+    // @ts-expect-error — using tokens for explicit fallback usage.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
+    color: `var(--ds-text, ${colors.N500})`
+  },
+  ':focus': {
+    // @ts-expect-error — using tokens for explicit fallback usage.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
+    color: `var(--ds-text, ${colors.N500})`
   }
 });
 const defaultRefreshedStyles = xcss({
@@ -117,15 +101,31 @@ const defaultRefreshedStyles = xcss({
   },
   ':visited': {
     color: 'color.text.subtle'
+  },
+  ':hover': {
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    color: 'color.text.subtle'
+  },
+  ':focus': {
+    color: 'color.text.subtle'
   }
 });
 const primaryStyles = xcss({
   background: "var(--ds-background-brand-bold, #0052CC)",
-  // @ts-expect-error
-  color: "var(--ds-text-inverse, #FFFFFF)",
+  color: 'color.text.inverse',
   ':visited': {
-    // @ts-expect-error
-    color: "var(--ds-text-inverse, #FFFFFF)"
+    color: 'color.text.inverse'
+  },
+  ':hover': {
+    color: 'color.text.inverse'
+  },
+  ':active': {
+    color: 'color.text.inverse'
+  },
+  ':focus': {
+    color: 'color.text.inverse'
   }
 });
 const primaryInteractiveStyles = xcss({
@@ -147,6 +147,18 @@ const warningStyles = xcss({
   ':visited': {
     // @ts-expect-error
     color: "var(--ds-text-warning-inverse, #172B4D)"
+  },
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  },
+  ':focus': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)"
   }
 });
 const warningInteractiveStyles = xcss({
@@ -166,6 +178,15 @@ const dangerStyles = xcss({
   color: 'color.text.inverse',
   ':visited': {
     color: 'color.text.inverse'
+  },
+  ':hover': {
+    color: 'color.text.inverse'
+  },
+  ':active': {
+    color: 'color.text.inverse'
+  },
+  ':focus': {
+    color: 'color.text.inverse'
   }
 });
 const dangerInteractiveStyles = xcss({
@@ -183,6 +204,15 @@ const discoveryStyles = xcss({
   color: 'color.text.inverse',
   ':visited': {
     color: 'color.text.inverse'
+  },
+  ':hover': {
+    color: 'color.text.inverse'
+  },
+  ':active': {
+    color: 'color.text.inverse'
+  },
+  ':focus': {
+    color: 'color.text.inverse'
   }
 });
 const discoveryInteractiveStyles = xcss({
@@ -202,6 +232,18 @@ const subtleStyles = xcss({
   ':visited': {
     // @ts-expect-error
     color: "var(--ds-text, #42526E)"
+  },
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  },
+  ':focus': {
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
   }
 });
 const subtleRefreshedStyles = xcss({
@@ -209,6 +251,15 @@ const subtleRefreshedStyles = xcss({
   color: 'color.text.subtle',
   ':visited': {
     color: 'color.text.subtle'
+  },
+  ':hover': {
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    color: 'color.text.subtle'
+  },
+  ':focus': {
+    color: 'color.text.subtle'
   }
 });
 const subtleInteractiveStyles = xcss({
@@ -234,8 +285,10 @@ const subtleInteractiveRefreshedStyles = xcss({
   }
 });
 
-// Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
-const linkDecorationUnsetStyles = xcss({
+// Reinforce existing styles with higher specificity
+// to defend against global anchor styles from products,
+// preventing issues in Jira and Confluence.
+const linkDefensiveStyles = xcss({
   textDecoration: 'none',
   ':hover': {
     textDecoration: 'none'
@@ -245,28 +298,34 @@ const linkDecorationUnsetStyles = xcss({
   },
   ':focus': {
     textDecoration: 'none'
+  },
+  ':visited': {
+    textDecoration: 'none'
   }
 });
 const disabledStyles = xcss({
   cursor: 'not-allowed',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: `var(--ds-background-disabled, ${colors.N20A})`,
-  // @ts-expect-error
-  color: "var(--ds-text-disabled, #091E424F)",
+  color: 'color.text.disabled',
+  '::after': {
+    content: 'none'
+  },
+  ':visited': {
+    color: 'color.text.disabled'
+  },
   ':hover': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-disabled, ${colors.N20A})`,
-    // @ts-expect-error
-    color: "var(--ds-text-disabled, #091E424F)"
+    color: 'color.text.disabled'
   },
   ':active': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-disabled, ${colors.N20A})`,
-    // @ts-expect-error
-    color: "var(--ds-text-disabled, #091E424F)"
+    color: 'color.text.disabled'
   },
-  '::after': {
-    content: 'none'
+  ':focus': {
+    color: 'color.text.disabled'
   }
 });
 const selectedStyles = xcss({
@@ -279,6 +338,21 @@ const selectedStyles = xcss({
     // @ts-expect-error
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-selected, ${colors.N20})`
+  },
+  ':hover': {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    color: `var(--ds-text-selected, ${colors.N20})`
+  },
+  ':active': {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    color: `var(--ds-text-selected, ${colors.N20})`
+  },
+  ':focus': {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    color: `var(--ds-text-selected, ${colors.N20})`
   }
 });
 const selectedRefreshedStyles = xcss({
@@ -290,6 +364,15 @@ const selectedRefreshedStyles = xcss({
   },
   ':visited': {
     color: 'color.text.selected'
+  },
+  ':hover': {
+    color: 'color.text.selected'
+  },
+  ':active': {
+    color: 'color.text.selected'
+  },
+  ':focus': {
+    color: 'color.text.selected'
   }
 });
 const selectedInsideSplitButtonStyles = xcss({
@@ -380,17 +463,7 @@ const selectedDiscoveryStyles = xcss({
     background: "var(--ds-background-selected, #403294)"
   }
 });
-
-// If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
 const spacingCompactStyles = xcss({
-  columnGap: 'space.050',
-  height: `${24 / 14}em`,
-  paddingBlock: 'space.025',
-  paddingInlineEnd: 'space.150',
-  paddingInlineStart: 'space.150',
-  verticalAlign: 'middle'
-});
-const spacingCompactStylesWithRem = xcss({
   columnGap: 'space.050',
   height: '1.5rem',
   paddingBlock: 'space.025',
@@ -407,25 +480,13 @@ const fullWidthStyles = xcss({
 const loadingStyles = xcss({
   cursor: 'progress'
 });
-// If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
 const iconButtonStyles = xcss({
-  height: `${32 / 14}em`,
-  width: `${32 / 14}em`,
-  paddingInlineEnd: 'space.0',
-  paddingInlineStart: 'space.0'
-});
-const iconButtonStylesWithRem = xcss({
   height: '2rem',
   width: '2rem',
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
-// If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
 const iconButtonCompactStyles = xcss({
-  width: `${24 / 14}em`,
-  height: `${24 / 14}em`
-});
-const iconButtonCompactStylesWithRem = xcss({
   width: '1.5rem',
   height: '1.5rem'
 });
@@ -473,6 +534,7 @@ const loadingOverlayStyles = xcss({
 const useButtonBase = ({
   appearance: propAppearance = 'default',
   autoFocus = false,
+  buttonType,
   isDisabled: propIsDisabled = false,
   isLoading = false,
   isSelected: propIsSelected = false,
@@ -516,13 +578,13 @@ const useButtonBase = ({
   useAutoFocus(localRef, autoFocus);
   return {
     ref: mergeRefs([localRef, ref]),
-    xcss: [fg('platform_dst_button_replace_em_with_rem') ? buttonStylesWithRem : buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), buttonType === 'link' && linkDefensiveStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? spacingCompactStylesWithRem : spacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonStylesWithRem : iconButtonStyles), isIconButton && spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonCompactStylesWithRem : iconButtonCompactStyles), shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
       value: undefined

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

@@ -119,7 +119,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref)
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "21.0.0",
+    packageVersion: "21.1.1",
     analyticsData: analyticsContext
   });
 

package/dist/esm/new-button/containers/split-button/split-button.js

@@ -57,14 +57,6 @@ var dividerRefreshedOffsetStyles = css({
   marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
 });
 var dividerHeight = {
-  default: css({
-    height: "".concat(32 / 14, "em")
-  }),
-  compact: css({
-    height: "".concat(24 / 14, "em")
-  })
-};
-var dividerHeightWithRem = {
   default: css({
     height: '2rem'
   }),
@@ -73,17 +65,6 @@ var dividerHeightWithRem = {
   })
 };
 var defaultDividerHeight = {
-  // The divider height is calculated by subtracting twice the border width from the button height.
-  // This ensures the divider does not intersect with the button's border, avoiding visual issues
-  // caused by overlapping alpha colors (color.border) at the intersection.
-  default: css({
-    height: "calc(".concat(32 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
-  }),
-  compact: css({
-    height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
-  })
-};
-var defaultDividerHeightWithRem = {
   // The divider height is calculated by subtracting twice the border width from the button height.
   // This ensures the divider does not intersect with the button's border, avoiding visual issues
   // caused by overlapping alpha colors (color.border) at the intersection.
@@ -102,13 +83,10 @@ export var Divider = function Divider(_ref) {
     spacing = _ref.spacing,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
-  // Pulling these out of the below `css` prop to avoid nested ternaries
-  var defaultDividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
-  var dividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeightStyles[spacing] : dividerHeightStyles[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

package/dist/esm/new-button/variants/shared/use-button-base.js

@@ -13,38 +13,7 @@ import { SplitButtonContext, useSplitButtonContext } from '../../containers/spli
 import blockEvents from './block-events';
 import { LOADING_LABEL } from './constants';
 import renderLoadingOverlay from './loading-overlay';
-// If updating `buttonStyles`, also update `buttonStylesWithRem`.
 var buttonStyles = xcss({
-  display: 'inline-flex',
-  boxSizing: 'border-box',
-  width: 'auto',
-  maxWidth: '100%',
-  position: 'relative',
-  alignItems: 'baseline',
-  justifyContent: 'center',
-  columnGap: 'space.050',
-  borderRadius: 'border.radius.100',
-  borderWidth: 'border.width.0',
-  flexShrink: 0,
-  height: "".concat(32 / 14, "em"),
-  font: 'font.body',
-  fontWeight: 'font.weight.medium',
-  paddingBlock: 'space.075',
-  paddingInlineEnd: 'space.150',
-  paddingInlineStart: 'space.150',
-  textAlign: 'center',
-  transition: 'background 0.1s ease-out',
-  verticalAlign: 'middle',
-  '::after': {
-    borderRadius: 'inherit',
-    inset: 'space.0',
-    borderStyle: 'solid',
-    borderWidth: "var(--ds-border-width, 1px)",
-    pointerEvents: 'none',
-    position: 'absolute'
-  }
-});
-var buttonStylesWithRem = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
   width: 'auto',
@@ -109,6 +78,21 @@ var defaultStyles = xcss({
     // @ts-expect-error
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text, ".concat(colors.N500, ")")
+  },
+  ':hover': {
+    // @ts-expect-error — using tokens for explicit fallback usage.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
+    color: "var(--ds-text, ".concat(colors.N500, ")")
+  },
+  ':active': {
+    // @ts-expect-error — using tokens for explicit fallback usage.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
+    color: "var(--ds-text, ".concat(colors.N500, ")")
+  },
+  ':focus': {
+    // @ts-expect-error — using tokens for explicit fallback usage.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values --  -- Ignored via go/DSP-18766
+    color: "var(--ds-text, ".concat(colors.N500, ")")
   }
 });
 var defaultRefreshedStyles = xcss({
@@ -120,15 +104,31 @@ var defaultRefreshedStyles = xcss({
   },
   ':visited': {
     color: 'color.text.subtle'
+  },
+  ':hover': {
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    color: 'color.text.subtle'
+  },
+  ':focus': {
+    color: 'color.text.subtle'
   }
 });
 var primaryStyles = xcss({
   background: "var(--ds-background-brand-bold, #0052CC)",
-  // @ts-expect-error
-  color: "var(--ds-text-inverse, #FFFFFF)",
+  color: 'color.text.inverse',
   ':visited': {
-    // @ts-expect-error
-    color: "var(--ds-text-inverse, #FFFFFF)"
+    color: 'color.text.inverse'
+  },
+  ':hover': {
+    color: 'color.text.inverse'
+  },
+  ':active': {
+    color: 'color.text.inverse'
+  },
+  ':focus': {
+    color: 'color.text.inverse'
   }
 });
 var primaryInteractiveStyles = xcss({
@@ -150,6 +150,18 @@ var warningStyles = xcss({
   ':visited': {
     // @ts-expect-error
     color: "var(--ds-text-warning-inverse, #172B4D)"
+  },
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  },
+  ':focus': {
+    // @ts-expect-error
+    color: "var(--ds-text-warning-inverse, #172B4D)"
   }
 });
 var warningInteractiveStyles = xcss({
@@ -169,6 +181,15 @@ var dangerStyles = xcss({
   color: 'color.text.inverse',
   ':visited': {
     color: 'color.text.inverse'
+  },
+  ':hover': {
+    color: 'color.text.inverse'
+  },
+  ':active': {
+    color: 'color.text.inverse'
+  },
+  ':focus': {
+    color: 'color.text.inverse'
   }
 });
 var dangerInteractiveStyles = xcss({
@@ -186,6 +207,15 @@ var discoveryStyles = xcss({
   color: 'color.text.inverse',
   ':visited': {
     color: 'color.text.inverse'
+  },
+  ':hover': {
+    color: 'color.text.inverse'
+  },
+  ':active': {
+    color: 'color.text.inverse'
+  },
+  ':focus': {
+    color: 'color.text.inverse'
   }
 });
 var discoveryInteractiveStyles = xcss({
@@ -205,6 +235,18 @@ var subtleStyles = xcss({
   ':visited': {
     // @ts-expect-error
     color: "var(--ds-text, #42526E)"
+  },
+  ':hover': {
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  },
+  ':active': {
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
+  },
+  ':focus': {
+    // @ts-expect-error
+    color: "var(--ds-text, #42526E)"
   }
 });
 var subtleRefreshedStyles = xcss({
@@ -212,6 +254,15 @@ var subtleRefreshedStyles = xcss({
   color: 'color.text.subtle',
   ':visited': {
     color: 'color.text.subtle'
+  },
+  ':hover': {
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    color: 'color.text.subtle'
+  },
+  ':focus': {
+    color: 'color.text.subtle'
   }
 });
 var subtleInteractiveStyles = xcss({
@@ -237,8 +288,10 @@ var subtleInteractiveRefreshedStyles = xcss({
   }
 });
 
-// Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
-var linkDecorationUnsetStyles = xcss({
+// Reinforce existing styles with higher specificity
+// to defend against global anchor styles from products,
+// preventing issues in Jira and Confluence.
+var linkDefensiveStyles = xcss({
   textDecoration: 'none',
   ':hover': {
     textDecoration: 'none'
@@ -248,28 +301,34 @@ var linkDecorationUnsetStyles = xcss({
   },
   ':focus': {
     textDecoration: 'none'
+  },
+  ':visited': {
+    textDecoration: 'none'
   }
 });
 var disabledStyles = xcss({
   cursor: 'not-allowed',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-  // @ts-expect-error
-  color: "var(--ds-text-disabled, #091E424F)",
+  color: 'color.text.disabled',
+  '::after': {
+    content: 'none'
+  },
+  ':visited': {
+    color: 'color.text.disabled'
+  },
   ':hover': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-    // @ts-expect-error
-    color: "var(--ds-text-disabled, #091E424F)"
+    color: 'color.text.disabled'
   },
   ':active': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-    // @ts-expect-error
-    color: "var(--ds-text-disabled, #091E424F)"
+    color: 'color.text.disabled'
   },
-  '::after': {
-    content: 'none'
+  ':focus': {
+    color: 'color.text.disabled'
   }
 });
 var selectedStyles = xcss({
@@ -282,6 +341,21 @@ var selectedStyles = xcss({
     // @ts-expect-error
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: "var(--ds-text-selected, ".concat(colors.N20, ")")
+  },
+  ':hover': {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")")
+  },
+  ':active': {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")")
+  },
+  ':focus': {
+    // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    color: "var(--ds-text-selected, ".concat(colors.N20, ")")
   }
 });
 var selectedRefreshedStyles = xcss({
@@ -293,6 +367,15 @@ var selectedRefreshedStyles = xcss({
   },
   ':visited': {
     color: 'color.text.selected'
+  },
+  ':hover': {
+    color: 'color.text.selected'
+  },
+  ':active': {
+    color: 'color.text.selected'
+  },
+  ':focus': {
+    color: 'color.text.selected'
   }
 });
 var selectedInsideSplitButtonStyles = xcss({
@@ -383,17 +466,7 @@ var selectedDiscoveryStyles = xcss({
     background: "var(--ds-background-selected, #403294)"
   }
 });
-
-// If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
 var spacingCompactStyles = xcss({
-  columnGap: 'space.050',
-  height: "".concat(24 / 14, "em"),
-  paddingBlock: 'space.025',
-  paddingInlineEnd: 'space.150',
-  paddingInlineStart: 'space.150',
-  verticalAlign: 'middle'
-});
-var spacingCompactStylesWithRem = xcss({
   columnGap: 'space.050',
   height: '1.5rem',
   paddingBlock: 'space.025',
@@ -410,25 +483,13 @@ var fullWidthStyles = xcss({
 var loadingStyles = xcss({
   cursor: 'progress'
 });
-// If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
 var iconButtonStyles = xcss({
-  height: "".concat(32 / 14, "em"),
-  width: "".concat(32 / 14, "em"),
-  paddingInlineEnd: 'space.0',
-  paddingInlineStart: 'space.0'
-});
-var iconButtonStylesWithRem = xcss({
   height: '2rem',
   width: '2rem',
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
-// If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
 var iconButtonCompactStyles = xcss({
-  width: "".concat(24 / 14, "em"),
-  height: "".concat(24 / 14, "em")
-});
-var iconButtonCompactStylesWithRem = xcss({
   width: '1.5rem',
   height: '1.5rem'
 });
@@ -478,6 +539,7 @@ var useButtonBase = function useButtonBase(_ref) {
     propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    buttonType = _ref.buttonType,
     _ref$isDisabled = _ref.isDisabled,
     propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isLoading = _ref.isLoading,
@@ -527,13 +589,13 @@ var useButtonBase = function useButtonBase(_ref) {
   useAutoFocus(localRef, autoFocus);
   return _objectSpread({
     ref: mergeRefs([localRef, ref]),
-    xcss: [fg('platform_dst_button_replace_em_with_rem') ? buttonStylesWithRem : buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), buttonType === 'link' && linkDefensiveStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? spacingCompactStylesWithRem : spacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonStylesWithRem : iconButtonStyles), isIconButton && spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonCompactStylesWithRem : iconButtonCompactStyles), shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
       value: undefined

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

@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "21.0.0",
+    packageVersion: "21.1.1",
     analyticsData: analyticsContext
   });
 

package/dist/types/new-button/variants/shared/use-button-base.d.ts

@@ -42,5 +42,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts

@@ -42,5 +42,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "21.0.0",
+	"version": "21.1.1",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -87,13 +87,13 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/focus-ring": "^3.0.0",
-		"@atlaskit/icon": "^24.0.0",
+		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/interaction-context": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tokens": "^4.2.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/visually-hidden": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -107,7 +107,7 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/app-provider": "^2.0.0",
-		"@atlaskit/checkbox": "^16.0.0",
+		"@atlaskit/checkbox": "^17.0.0",
 		"@atlaskit/docs": "*",
 		"@atlaskit/dropdown-menu": "^13.0.0",
 		"@atlaskit/form": "^12.0.0",
@@ -116,7 +116,7 @@
 		"@atlaskit/logo": "^16.0.0",
 		"@atlaskit/modal-dialog": "^13.0.0",
 		"@atlaskit/section-message": "*",
-		"@atlaskit/select": "^19.0.0",
+		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/visual-regression": "*",
@@ -132,9 +132,6 @@
 	"platform-feature-flags": {
 		"platform-component-visual-refresh": {
 			"type": "boolean"
-		},
-		"platform_dst_button_replace_em_with_rem": {
-			"type": "boolean"
 		}
 	}
 }