@atlaskit/button 21.0.0 → 21.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/button
 
+## 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',
@@ -393,17 +362,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 +379,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'
 });
@@ -537,13 +484,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), linkDecorationUnsetStyles, 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.0",
     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',
@@ -380,17 +349,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 +366,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'
 });
@@ -516,13 +463,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), linkDecorationUnsetStyles, 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.0",
     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',
@@ -383,17 +352,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 +369,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'
 });
@@ -527,13 +474,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), linkDecorationUnsetStyles, 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.0",
     analyticsData: analyticsContext
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "21.0.0",
+	"version": "21.1.0",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -93,7 +93,7 @@
 		"@atlaskit/primitives": "^14.0.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tokens": "^4.1.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/visually-hidden": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -132,9 +132,6 @@
 	"platform-feature-flags": {
 		"platform-component-visual-refresh": {
 			"type": "boolean"
-		},
-		"platform_dst_button_replace_em_with_rem": {
-			"type": "boolean"
 		}
 	}
 }