@atlaskit/button 17.20.0 → 17.22.0

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

@@ -20,27 +20,25 @@ const buttonStyles = xcss({
   alignItems: 'baseline',
   justifyContent: 'center',
   columnGap: 'space.050',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  background: `var(--ds-background-neutral, ${colors.N20A})`,
   borderRadius: 'border.radius.100',
   borderWidth: 'border.width.0',
-  // @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})`,
   flexShrink: 0,
   height: `${32 / fontSize}em`,
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   textAlign: 'center',
-  transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+  transition: 'background 0.1s ease-out',
   verticalAlign: 'middle',
-  ':visited': {
-    // @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})`
+  '::after': {
+    borderRadius: 'inherit',
+    inset: 'space.0',
+    borderStyle: 'solid',
+    borderWidth: "var(--ds-border-width, 1px)",
+    pointerEvents: 'none',
+    position: 'absolute'
   }
 });
-const baseButtonStyles = xcss({
+const hardCodedButtonStyles = xcss({
   fontFamily: 'inherit',
   fontSize: 'inherit',
   fontStyle: 'normal',
@@ -58,16 +56,46 @@ const defaultInteractiveStyles = xcss({
     background: "var(--ds-background-neutral-hovered, #091e4214)",
     // @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})`,
-    transitionDuration: '0s, 0.15s'
+    color: `var(--ds-text, ${colors.N500})`
   },
   ':active': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-neutral-pressed, ${colors.B75})`,
     // @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.B400})`,
-    transitionDuration: '0s, 0s'
+    color: `var(--ds-text, ${colors.B400})`
+  }
+});
+const defaultInteractiveRefreshedStyles = xcss({
+  ':hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    background: "var(--ds-background-neutral-subtle-pressed, #091E4224)",
+    color: 'color.text.subtle'
+  }
+});
+const defaultStyles = xcss({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  background: `var(--ds-background-neutral, ${colors.N20A})`,
+  // @ts-expect-error — using tokens for explicit fallback usage.
+  color: `var(--ds-text, ${colors.N500})`,
+  ':visited': {
+    // @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})`
+  }
+});
+const defaultRefreshedStyles = xcss({
+  background: "var(--ds-background-neutral-subtle, #00000000)",
+  color: 'color.text.subtle',
+  '::after': {
+    content: '""',
+    borderColor: 'color.border'
+  },
+  ':visited': {
+    color: 'color.text.subtle'
   }
 });
 const primaryStyles = xcss({
@@ -155,6 +183,13 @@ const subtleStyles = xcss({
     color: "var(--ds-text, #42526E)"
   }
 });
+const subtleRefreshedStyles = xcss({
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  color: 'color.text.subtle',
+  ':visited': {
+    color: 'color.text.subtle'
+  }
+});
 const subtleInteractiveStyles = xcss({
   ':hover': {
     background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
@@ -167,6 +202,16 @@ const subtleInteractiveStyles = xcss({
     color: "var(--ds-text, #42526E)"
   }
 });
+const subtleInteractiveRefreshedStyles = xcss({
+  ':hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
+    color: 'color.text.subtle'
+  }
+});
 const linkStyles = xcss({
   // @ts-expect-error
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -252,6 +297,9 @@ const disabledStyles = xcss({
     background: `var(--ds-background-disabled, ${colors.N20A})`,
     // @ts-expect-error
     color: "var(--ds-text-disabled, #091E424F)"
+  },
+  '::after': {
+    content: 'none'
   }
 });
 const selectedStyles = xcss({
@@ -266,6 +314,17 @@ const selectedStyles = xcss({
     color: `var(--ds-text-selected, ${colors.N20})`
   }
 });
+const selectedRefreshedStyles = xcss({
+  background: "var(--ds-background-selected, #E9F2FF)",
+  color: 'color.text.selected',
+  '::after': {
+    content: '""',
+    borderColor: 'color.border.selected'
+  },
+  ':visited': {
+    color: 'color.text.selected'
+  }
+});
 const selectedInteractiveStyles = xcss({
   ':hover': {
     // @ts-expect-error
@@ -440,7 +499,7 @@ const useButtonBase = ({
   autoFocus = false,
   isDisabled: propIsDisabled = false,
   isLoading = false,
-  isSelected = false,
+  isSelected: propIsSelected = false,
   // TODO: Separate Icon Button styling from button base
   isIconButton = false,
   isCircle = false,
@@ -474,16 +533,18 @@ const useButtonBase = ({
   });
   const isSplitButton = Boolean(splitButtonContext);
   const isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
-  const appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
+  const isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
+  const appearance = getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
   const spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
   const isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
   const hasOverlay = Boolean(overlay);
   const isInteractive = !isDisabled && !isLoading && !hasOverlay;
   const isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  const isSelected = propIsSelected && !isDisabled;
   useAutoFocus(localRef, autoFocus);
   return {
     ref: mergeRefs([localRef, ref]),
-    xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : baseButtonStyles, buttonStyles, appearance === 'default' && isInteractive && 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' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? 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' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks

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

@@ -119,7 +119,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.20.0",
+    packageVersion: "17.22.0",
     analyticsData: analyticsContext
   });
 

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

@@ -5,6 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 var fontSize = getFontSize();
 var heights = {
@@ -16,7 +17,7 @@ import { SplitButtonContext } from './split-button-context';
 import { getActions } from './utils';
 var baseDividerStyles = css({
   display: 'inline-flex',
-  width: '1px',
+  width: "var(--ds-border-width, 1px)",
   position: 'relative',
   zIndex: 2
 });
@@ -49,6 +50,9 @@ var dividerAppearance = {
   }),
   navigation: navigationDividerStyles
 };
+var dividerRefreshedOffsetStyles = css({
+  marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
+});
 var dividerHeight = {
   default: defaultDividerStyles,
   compact: compactDividerStyles
@@ -64,7 +68,7 @@ export var Divider = function Divider(_ref) {
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined]
+      css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined, getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
     })
   );
 };
@@ -88,13 +92,22 @@ var secondaryButtonStyles = css({
     borderStartStartRadius: 0
   }
 });
+var defaultAppearanceContainerStyles = css({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  outlineColor: "var(--ds-border, #091E4224)",
+  outlineOffset: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")"),
+  outlineStyle: 'solid',
+  outlineWidth: "var(--ds-border-width, 1px)"
+});
+
 /**
  * TODO: Add JSdoc
  */
 export var SplitButtonContainer = function SplitButtonContainer(_ref2) {
-  var children = _ref2.children;
+  var appearance = _ref2.appearance,
+    children = _ref2.children;
   return jsx("div", {
-    css: splitButtonStyles
+    css: [getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && appearance === 'default' && defaultAppearanceContainerStyles, splitButtonStyles]
   }, children);
 };
 
@@ -118,7 +131,9 @@ export var SplitButton = function SplitButton(_ref3) {
   var _getActions = getActions(children),
     PrimaryAction = _getActions.PrimaryAction,
     SecondaryAction = _getActions.SecondaryAction;
-  return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
+  return jsx(SplitButtonContainer, {
+    appearance: appearance
+  }, jsx(SplitButtonContext.Provider, {
     value: {
       appearance: appearance,
       spacing: spacing,
@@ -146,7 +161,9 @@ export var SplitButtonWithSlots = function SplitButtonWithSlots(_ref4) {
     spacing = _ref4$spacing === void 0 ? 'default' : _ref4$spacing,
     _ref4$isDisabled = _ref4.isDisabled,
     isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
-  return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
+  return jsx(SplitButtonContainer, {
+    appearance: appearance
+  }, jsx(SplitButtonContext.Provider, {
     value: {
       appearance: appearance,
       spacing: spacing,

package/dist/esm/new-button/variants/default/use-default-button.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import Content from '../shared/content';
+import IconRenderer from '../shared/icon-renderer';
 import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
@@ -19,8 +20,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
     children = _ref.children,
-    IconAfter = _ref.iconAfter,
-    IconBefore = _ref.iconBefore,
+    iconAfter = _ref.iconAfter,
+    iconBefore = _ref.iconBefore,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     _ref$isLoading = _ref.isLoading,
@@ -51,24 +52,22 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     buttonType: buttonType,
-    children: /*#__PURE__*/React.createElement(Fragment, null, IconBefore && /*#__PURE__*/React.createElement(Content, {
+    children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "before",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(IconBefore, {
-      label: "",
-      size: UNSAFE_iconBefore_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: iconBefore,
+      size: UNSAFE_iconBefore_size
     })), children && /*#__PURE__*/React.createElement(Content, {
       hasOverlay: hasOverlay
-    }, children), IconAfter && /*#__PURE__*/React.createElement(Content, {
+    }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "after",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(IconAfter, {
-      label: "",
-      size: UNSAFE_iconAfter_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: iconAfter,
+      size: UNSAFE_iconAfter_size
     }))),
     interactionName: interactionName,
     isDisabled: isDisabled,
@@ -94,8 +93,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
-    hasIconBefore: Boolean(IconBefore),
-    hasIconAfter: Boolean(IconAfter)
+    hasIconBefore: Boolean(iconBefore),
+    hasIconAfter: Boolean(iconAfter)
   });
   return baseProps;
 };

package/dist/esm/new-button/variants/icon/use-icon-button.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Content from '../shared/content';
+import IconRenderer from '../shared/icon-renderer';
 import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
@@ -19,7 +20,7 @@ var useIconButton = function useIconButton(_ref) {
     ariaLabelledBy = _ref.ariaLabelledBy,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
-    Icon = _ref.icon,
+    icon = _ref.icon,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isLoading = _ref.isLoading,
@@ -54,10 +55,9 @@ var useIconButton = function useIconButton(_ref) {
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       hasOverlay: hasOverlay
-    }, /*#__PURE__*/React.createElement(Icon, {
-      label: "",
-      size: UNSAFE_size,
-      color: 'currentColor'
+    }, /*#__PURE__*/React.createElement(IconRenderer, {
+      icon: icon,
+      size: UNSAFE_size
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,

package/dist/esm/new-button/variants/shared/icon-renderer.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+function isIconRenderProp(func) {
+  return !func.displayName &&
+  // most function components and class components have a displayName, negate them
+  !func.render &&
+  // forwardRef doesn't require a display name, however it does include a render function, negate them
+  typeof func === 'function' // at the very least we need to be a function
+  ;
+}
+
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ *
+ */
+var IconRenderer = function IconRenderer(_ref) {
+  var Icon = _ref.icon,
+    size = _ref.size;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getBooleanFF('platform.design-system-team.button-render-prop-fix_lyo55') && isIconRenderProp(Icon) ? Icon({
+    label: '',
+    size: size,
+    color: 'currentColor'
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    label: "",
+    size: size,
+    color: 'currentColor'
+  }));
+};
+export default IconRenderer;

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

@@ -23,27 +23,25 @@ var buttonStyles = xcss({
   alignItems: 'baseline',
   justifyContent: 'center',
   columnGap: 'space.050',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
   borderRadius: 'border.radius.100',
   borderWidth: 'border.width.0',
-  // @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, ")"),
   flexShrink: 0,
   height: "".concat(32 / fontSize, "em"),
   paddingInlineEnd: 'space.150',
   paddingInlineStart: 'space.150',
   textAlign: 'center',
-  transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+  transition: 'background 0.1s ease-out',
   verticalAlign: 'middle',
-  ':visited': {
-    // @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, ")")
+  '::after': {
+    borderRadius: 'inherit',
+    inset: 'space.0',
+    borderStyle: 'solid',
+    borderWidth: "var(--ds-border-width, 1px)",
+    pointerEvents: 'none',
+    position: 'absolute'
   }
 });
-var baseButtonStyles = xcss({
+var hardCodedButtonStyles = xcss({
   fontFamily: 'inherit',
   fontSize: 'inherit',
   fontStyle: 'normal',
@@ -61,16 +59,46 @@ var defaultInteractiveStyles = xcss({
     background: "var(--ds-background-neutral-hovered, #091e4214)",
     // @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, ")"),
-    transitionDuration: '0s, 0.15s'
+    color: "var(--ds-text, ".concat(colors.N500, ")")
   },
   ':active': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: "var(--ds-background-neutral-pressed, ".concat(colors.B75, ")"),
     // @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.B400, ")"),
-    transitionDuration: '0s, 0s'
+    color: "var(--ds-text, ".concat(colors.B400, ")")
+  }
+});
+var defaultInteractiveRefreshedStyles = xcss({
+  ':hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    background: "var(--ds-background-neutral-subtle-pressed, #091E4224)",
+    color: 'color.text.subtle'
+  }
+});
+var defaultStyles = xcss({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+  background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
+  // @ts-expect-error — using tokens for explicit fallback usage.
+  color: "var(--ds-text, ".concat(colors.N500, ")"),
+  ':visited': {
+    // @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, ")")
+  }
+});
+var defaultRefreshedStyles = xcss({
+  background: "var(--ds-background-neutral-subtle, #00000000)",
+  color: 'color.text.subtle',
+  '::after': {
+    content: '""',
+    borderColor: 'color.border'
+  },
+  ':visited': {
+    color: 'color.text.subtle'
   }
 });
 var primaryStyles = xcss({
@@ -158,6 +186,13 @@ var subtleStyles = xcss({
     color: "var(--ds-text, #42526E)"
   }
 });
+var subtleRefreshedStyles = xcss({
+  background: "var(--ds-background-neutral-subtle, transparent)",
+  color: 'color.text.subtle',
+  ':visited': {
+    color: 'color.text.subtle'
+  }
+});
 var subtleInteractiveStyles = xcss({
   ':hover': {
     background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
@@ -170,6 +205,16 @@ var subtleInteractiveStyles = xcss({
     color: "var(--ds-text, #42526E)"
   }
 });
+var subtleInteractiveRefreshedStyles = xcss({
+  ':hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
+    color: 'color.text.subtle'
+  },
+  ':active': {
+    background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
+    color: 'color.text.subtle'
+  }
+});
 var linkStyles = xcss({
   // @ts-expect-error
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -255,6 +300,9 @@ var disabledStyles = xcss({
     background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
     // @ts-expect-error
     color: "var(--ds-text-disabled, #091E424F)"
+  },
+  '::after': {
+    content: 'none'
   }
 });
 var selectedStyles = xcss({
@@ -269,6 +317,17 @@ var selectedStyles = xcss({
     color: "var(--ds-text-selected, ".concat(colors.N20, ")")
   }
 });
+var selectedRefreshedStyles = xcss({
+  background: "var(--ds-background-selected, #E9F2FF)",
+  color: 'color.text.selected',
+  '::after': {
+    content: '""',
+    borderColor: 'color.border.selected'
+  },
+  ':visited': {
+    color: 'color.text.selected'
+  }
+});
 var selectedInteractiveStyles = xcss({
   ':hover': {
     // @ts-expect-error
@@ -448,7 +507,7 @@ var useButtonBase = function useButtonBase(_ref) {
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    propIsSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
     isIconButton = _ref$isIconButton === void 0 ? false : _ref$isIconButton,
     _ref$isCircle = _ref.isCircle,
@@ -485,16 +544,18 @@ var useButtonBase = function useButtonBase(_ref) {
   });
   var isSplitButton = Boolean(splitButtonContext);
   var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
-  var appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
+  var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
+  var appearance = getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
   var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
   var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
   var hasOverlay = Boolean(overlay);
   var isInteractive = !isDisabled && !isLoading && !hasOverlay;
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  var isSelected = propIsSelected && !isDisabled;
   useAutoFocus(localRef, autoFocus);
   return _objectSpread({
     ref: mergeRefs([localRef, ref]),
-    xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : baseButtonStyles, buttonStyles, appearance === 'default' && isInteractive && 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' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? 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' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks

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

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

package/dist/types/new-button/containers/split-button/split-button.d.ts

@@ -17,7 +17,8 @@ export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps
 /**
  * TODO: Add JSdoc
  */
-export declare const SplitButtonContainer: ({ children }: {
+export declare const SplitButtonContainer: ({ appearance, children, }: {
+    appearance: SplitButtonAppearance;
     children: ReactNode;
 }) => jsx.JSX.Element;
 /**

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

@@ -12,5 +12,5 @@ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>
  *
  * @private
  */
-declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter: IconAfter, iconBefore: IconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
+declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
 export default useDefaultButton;

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

@@ -12,5 +12,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon: Icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shape, shouldFitContainer, spacing, testId, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shape, shouldFitContainer, spacing, testId, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

package/dist/types/new-button/variants/shared/icon-renderer.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type IconProps, type UNSAFE_NewIconProps } from '@atlaskit/icon/types';
+import { type IconProp } from '../types';
+/**
+ * __Icon renderer__
+ *
+ * Used to support render props with icons.
+ *
+ */
+declare const IconRenderer: ({ icon: Icon, size, }: {
+    icon: IconProp;
+    size: IconProps['size'] | UNSAFE_NewIconProps['LEGACY_size'];
+}) => JSX.Element;
+export default IconRenderer;

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, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+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, overlay, ref, shouldFitContainer, spacing: propSpacing, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts

@@ -17,7 +17,8 @@ export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps
 /**
  * TODO: Add JSdoc
  */
-export declare const SplitButtonContainer: ({ children }: {
+export declare const SplitButtonContainer: ({ appearance, children, }: {
+    appearance: SplitButtonAppearance;
     children: ReactNode;
 }) => jsx.JSX.Element;
 /**