@atlaskit/button 17.12.0 → 17.12.2

package/dist/cjs/new-button/variants/shared/colors.js

@@ -1,145 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-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 && Object.prototype.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; }
-var values = {
-  // Default appearance
-  background: {
-    default: {
-      /**
-       * Some colors need specific fallback colors specified
-       * to match the original Button when no theme is active.
-       *
-       * This is because the `xcss` automatic token fallbacks use
-       * the legacy themes, which do not match original colors.
-       */
-      // @ts-expect-error
-      default: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
-      hover: 'color.background.neutral.hovered',
-      active: 'color.background.neutral.pressed',
-      // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
-    },
-    primary: {
-      default: 'color.background.brand.bold',
-      hover: 'color.background.brand.bold.hovered',
-      active: 'color.background.brand.bold.pressed',
-      // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
-    },
-    warning: {
-      default: 'color.background.warning.bold',
-      hover: 'color.background.warning.bold.hovered',
-      active: 'color.background.warning.bold.pressed',
-      // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      selected: {
-        // @ts-expect-error
-        default: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
-        // @ts-expect-error
-        hover: "var(--ds-background-selected-hovered, ".concat(colors.Y400, ")"),
-        // @ts-expect-error
-        active: "var(--ds-background-selected-pressed, ".concat(colors.Y400, ")")
-      }
-    },
-    danger: {
-      default: 'color.background.danger.bold',
-      hover: 'color.background.danger.bold.hovered',
-      active: 'color.background.danger.bold.pressed',
-      // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      selected: {
-        // @ts-expect-error
-        default: "var(--ds-background-selected, ".concat(colors.R500, ")"),
-        // @ts-expect-error
-        hover: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
-        // @ts-expect-error
-        active: "var(--ds-background-selected-pressed, ".concat(colors.R500, ")")
-      }
-    },
-    link: {
-      default: 'color.background.neutral.subtle'
-    },
-    subtle: {
-      default: 'color.background.neutral.subtle',
-      hover: 'color.background.neutral.subtle.hovered',
-      active: 'color.background.neutral.subtle.pressed',
-      // @ts-expect-error
-      disabled: "var(--ds-background-neutral-subtle, none)"
-    },
-    'subtle-link': {
-      default: 'color.background.neutral.subtle'
-    },
-    selected: {
-      // @ts-expect-error
-      default: "var(--ds-background-selected, ".concat(colors.N700, ")"),
-      // @ts-expect-error
-      hover: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
-      // @ts-expect-error
-      active: "var(--ds-background-selected-pressed, ".concat(colors.N700, ")")
-    }
-  },
-  color: {
-    default: {
-      // @ts-expect-error
-      default: "var(--ds-text, ".concat(colors.N500, ")"),
-      // @ts-expect-error
-      active: "var(--ds-text, ".concat(colors.B400, ")"),
-      disabled: 'color.text.disabled'
-    },
-    primary: {
-      default: 'color.text.inverse',
-      disabled: 'color.text.disabled'
-    },
-    warning: {
-      default: 'color.text.warning.inverse',
-      disabled: 'color.text.disabled',
-      selected: {
-        // @ts-expect-error
-        default: "var(--ds-text-selected, ".concat(colors.N800, ")")
-      }
-    },
-    danger: {
-      default: 'color.text.inverse',
-      disabled: 'color.text.disabled',
-      selected: {
-        // @ts-expect-error
-        default: "var(--ds-text-selected, ".concat(colors.N0, ")")
-      }
-    },
-    link: {
-      default: 'color.link',
-      // @ts-expect-error
-      hover: "var(--ds-link, ".concat(colors.B300, ")"),
-      active: 'color.link.pressed',
-      disabled: 'color.text.disabled'
-    },
-    subtle: {
-      // @ts-expect-error
-      default: "var(--ds-text, ".concat(colors.N500, ")"),
-      // @ts-expect-error
-      active: "var(--ds-text, ".concat(colors.B400, ")"),
-      disabled: 'color.text.disabled'
-    },
-    'subtle-link': {
-      // @ts-expect-error
-      default: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
-      // @ts-expect-error
-      hover: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
-      // @ts-expect-error
-      active: "var(--ds-text, ".concat(colors.N400, ")"),
-      disabled: 'color.text.disabled'
-    },
-    selected: {
-      // @ts-expect-error
-      default: "var(--ds-text-selected, ".concat(colors.N20, ")")
-    }
-  }
-};
-var _default = exports.default = values;

package/dist/cjs/new-button/variants/shared/xcss.js

@@ -1,198 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getXCSS = getXCSS;
-exports.heights = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _primitives = require("@atlaskit/primitives");
-var _constants = require("@atlaskit/theme/constants");
-var _colors = _interopRequireDefault(require("./colors"));
-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; }
-var fontSize = (0, _constants.fontSize)();
-var heights = exports.heights = {
-  default: "".concat(32 / fontSize, "em"),
-  compact: "".concat(24 / fontSize, "em"),
-  none: 'auto'
-};
-var lineHeights = {
-  default: heights.default,
-  compact: heights.compact,
-  none: 'inherit'
-};
-var paddingInline = {
-  default: {
-    default: 'space.150',
-    withIcon: 'space.100'
-  },
-  compact: {
-    default: 'space.150',
-    withIcon: 'space.100'
-  },
-  none: {
-    default: 'space.0',
-    withIcon: 'space.0'
-  }
-};
-var gap = {
-  compact: 'space.050',
-  default: 'space.050',
-  none: 'space.0'
-};
-var verticalAlign = {
-  default: 'middle',
-  compact: 'middle',
-  none: 'baseline'
-};
-var splitBorderStyles = {
-  ':focus-visible': {
-    zIndex: 1
-  }
-};
-function getColor(_ref) {
-  var group = _ref.group,
-    key = _ref.key;
-  return group[key] || group.default;
-}
-function getColors(_ref2) {
-  var appearance = _ref2.appearance,
-    _ref2$interactionStat = _ref2.interactionState,
-    interactionState = _ref2$interactionStat === void 0 ? 'default' : _ref2$interactionStat,
-    isDisabled = _ref2.isDisabled,
-    isSelected = _ref2.isSelected,
-    isHighlighted = _ref2.isHighlighted,
-    isActiveOverSelected = _ref2.isActiveOverSelected,
-    hasOverlay = _ref2.hasOverlay;
-  var showSelectedState = (isSelected || isHighlighted) && !isDisabled && !isActiveOverSelected;
-  var key = interactionState;
-  // Overlay does not change color on interaction, revert to 'default' or resting state
-  key = hasOverlay ? 'default' : key;
-  key = showSelectedState && isActiveOverSelected ? 'active' : key;
-
-  // Disabled colors overrule everything else
-  key = isDisabled ? 'disabled' : key;
-  return {
-    backgroundColor: getColor({
-      group: showSelectedState && _colors.default.background[appearance]['selected'] || _colors.default.background[showSelectedState ? 'selected' : appearance],
-      key: key
-    }),
-    color: getColor({
-      group: showSelectedState && _colors.default.color[appearance]['selected'] || _colors.default.color[showSelectedState ? 'selected' : appearance],
-      key: key
-    })
-  };
-}
-function getXCSS(_ref3) {
-  var appearance = _ref3.appearance,
-    spacing = _ref3.spacing,
-    isDisabled = _ref3.isDisabled,
-    isSelected = _ref3.isSelected,
-    isLoading = _ref3.isLoading,
-    isHighlighted = _ref3.isHighlighted,
-    isActiveOverSelected = _ref3.isActiveOverSelected,
-    isIconButton = _ref3.isIconButton,
-    isCircle = _ref3.isCircle,
-    shouldFitContainer = _ref3.shouldFitContainer,
-    isLink = _ref3.isLink,
-    isSplit = _ref3.isSplit,
-    isNavigationSplit = _ref3.isNavigationSplit,
-    hasOverlay = _ref3.hasOverlay,
-    hasIconBefore = _ref3.hasIconBefore,
-    hasIconAfter = _ref3.hasIconAfter;
-  var baseColors = getColors({
-    appearance: appearance,
-    isSelected: isSelected,
-    isHighlighted: isHighlighted,
-    isActiveOverSelected: isActiveOverSelected,
-    isDisabled: isDisabled
-  });
-  var combinedBaseColorStyles = isLink ? _objectSpread(_objectSpread({}, baseColors), {}, {
-    textDecoration: 'none',
-    // Disabling visited styles (by re-declaring the base colors)
-    ':visited': baseColors
-  }) : isNavigationSplit && !isSelected ? _objectSpread(_objectSpread({}, baseColors), {}, {
-    backgroundColor: 'color.background.neutral.subtle'
-  }) : baseColors;
-  var height = heights[spacing];
-  var width = shouldFitContainer ? '100%' : 'auto';
-  width = isIconButton ? isNavigationSplit ? '24px' : height : width;
-  var defaultPaddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
-  var defaultPaddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
-  var splitButtonStyles = isSplit ? splitBorderStyles : {};
-  var getNavigationSplitButtonPaddings = function getNavigationSplitButtonPaddings() {
-    if (isNavigationSplit) {
-      return {
-        paddingInlineStart: 'space.075',
-        paddingInlineEnd: 'space.075'
-      };
-    }
-    return {
-      paddingInlineStart: isIconButton ? 'space.0' : defaultPaddingInlineStart,
-      paddingInlineEnd: isIconButton ? 'space.0' : defaultPaddingInlineEnd
-    };
-  };
-  var _getNavigationSplitBu = getNavigationSplitButtonPaddings(),
-    paddingInlineStart = _getNavigationSplitBu.paddingInlineStart,
-    paddingInlineEnd = _getNavigationSplitBu.paddingInlineEnd;
-  return (0, _primitives.xcss)(_objectSpread(_objectSpread(_objectSpread({
-    alignItems: 'baseline',
-    borderWidth: 'border.width.0',
-    borderRadius: isCircle && !isSplit ? 'border.radius.circle' : 'border.radius.100',
-    boxSizing: 'border-box',
-    display: 'inline-flex',
-    fontSize: 'inherit',
-    fontStyle: 'normal',
-    fontFamily: 'inherit',
-    fontWeight: 500,
-    maxWidth: '100%',
-    // Needed to position overlay
-    position: 'relative',
-    textAlign: 'center',
-    transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
-    whiteSpace: 'nowrap',
-    height: height,
-    lineHeight: lineHeights[spacing],
-    paddingBlock: 'space.0',
-    paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd,
-    columnGap: gap[spacing],
-    verticalAlign: verticalAlign[spacing],
-    width: width,
-    // justifyContent required for shouldFitContainer buttons with an icon inside
-    justifyContent: 'center'
-  }, combinedBaseColorStyles), isDisabled || hasOverlay || isLoading ? {
-    cursor: isLoading ? 'progress' : 'not-allowed'
-  } : {}), {}, {
-    ':hover': _objectSpread(_objectSpread({}, getColors({
-      appearance: appearance,
-      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
-      isActiveOverSelected: isActiveOverSelected,
-      isDisabled: isDisabled,
-      interactionState: 'hover',
-      hasOverlay: hasOverlay
-    })), {}, {
-      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none',
-      // background, box-shadow
-      transitionDuration: '0s, 0.15s'
-    }),
-    ':active': _objectSpread(_objectSpread({}, getColors({
-      appearance: appearance,
-      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
-      isActiveOverSelected: isActiveOverSelected,
-      isDisabled: isDisabled,
-      interactionState: 'active',
-      hasOverlay: hasOverlay
-    })), {}, {
-      // background, box-shadow
-      transitionDuration: '0s, 0s'
-    }),
-    ':focus': {
-      // Required due to Jira's AUI CSS reset
-      // See https://product-fabric.atlassian.net/browse/DSP-15687
-      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none'
-    }
-  }, splitButtonStyles));
-}

package/dist/es2019/new-button/variants/shared/colors.js

@@ -1,136 +0,0 @@
-import * as colors from '@atlaskit/theme/colors';
-const values = {
-  // Default appearance
-  background: {
-    default: {
-      /**
-       * Some colors need specific fallback colors specified
-       * to match the original Button when no theme is active.
-       *
-       * This is because the `xcss` automatic token fallbacks use
-       * the legacy themes, which do not match original colors.
-       */
-      // @ts-expect-error
-      default: `var(--ds-background-neutral, ${colors.N20A})`,
-      hover: 'color.background.neutral.hovered',
-      active: 'color.background.neutral.pressed',
-      // @ts-expect-error
-      disabled: `var(--ds-background-disabled, ${colors.N20A})`
-    },
-    primary: {
-      default: 'color.background.brand.bold',
-      hover: 'color.background.brand.bold.hovered',
-      active: 'color.background.brand.bold.pressed',
-      // @ts-expect-error
-      disabled: `var(--ds-background-disabled, ${colors.N20A})`
-    },
-    warning: {
-      default: 'color.background.warning.bold',
-      hover: 'color.background.warning.bold.hovered',
-      active: 'color.background.warning.bold.pressed',
-      // @ts-expect-error
-      disabled: `var(--ds-background-disabled, ${colors.N20A})`,
-      selected: {
-        // @ts-expect-error
-        default: `var(--ds-background-selected, ${colors.Y400})`,
-        // @ts-expect-error
-        hover: `var(--ds-background-selected-hovered, ${colors.Y400})`,
-        // @ts-expect-error
-        active: `var(--ds-background-selected-pressed, ${colors.Y400})`
-      }
-    },
-    danger: {
-      default: 'color.background.danger.bold',
-      hover: 'color.background.danger.bold.hovered',
-      active: 'color.background.danger.bold.pressed',
-      // @ts-expect-error
-      disabled: `var(--ds-background-disabled, ${colors.N20A})`,
-      selected: {
-        // @ts-expect-error
-        default: `var(--ds-background-selected, ${colors.R500})`,
-        // @ts-expect-error
-        hover: `var(--ds-background-selected-hovered, ${colors.R500})`,
-        // @ts-expect-error
-        active: `var(--ds-background-selected-pressed, ${colors.R500})`
-      }
-    },
-    link: {
-      default: 'color.background.neutral.subtle'
-    },
-    subtle: {
-      default: 'color.background.neutral.subtle',
-      hover: 'color.background.neutral.subtle.hovered',
-      active: 'color.background.neutral.subtle.pressed',
-      // @ts-expect-error
-      disabled: "var(--ds-background-neutral-subtle, none)"
-    },
-    'subtle-link': {
-      default: 'color.background.neutral.subtle'
-    },
-    selected: {
-      // @ts-expect-error
-      default: `var(--ds-background-selected, ${colors.N700})`,
-      // @ts-expect-error
-      hover: `var(--ds-background-selected-hovered, ${colors.N700})`,
-      // @ts-expect-error
-      active: `var(--ds-background-selected-pressed, ${colors.N700})`
-    }
-  },
-  color: {
-    default: {
-      // @ts-expect-error
-      default: `var(--ds-text, ${colors.N500})`,
-      // @ts-expect-error
-      active: `var(--ds-text, ${colors.B400})`,
-      disabled: 'color.text.disabled'
-    },
-    primary: {
-      default: 'color.text.inverse',
-      disabled: 'color.text.disabled'
-    },
-    warning: {
-      default: 'color.text.warning.inverse',
-      disabled: 'color.text.disabled',
-      selected: {
-        // @ts-expect-error
-        default: `var(--ds-text-selected, ${colors.N800})`
-      }
-    },
-    danger: {
-      default: 'color.text.inverse',
-      disabled: 'color.text.disabled',
-      selected: {
-        // @ts-expect-error
-        default: `var(--ds-text-selected, ${colors.N0})`
-      }
-    },
-    link: {
-      default: 'color.link',
-      // @ts-expect-error
-      hover: `var(--ds-link, ${colors.B300})`,
-      active: 'color.link.pressed',
-      disabled: 'color.text.disabled'
-    },
-    subtle: {
-      // @ts-expect-error
-      default: `var(--ds-text, ${colors.N500})`,
-      // @ts-expect-error
-      active: `var(--ds-text, ${colors.B400})`,
-      disabled: 'color.text.disabled'
-    },
-    'subtle-link': {
-      // @ts-expect-error
-      default: `var(--ds-text-subtle, ${colors.N200})`,
-      // @ts-expect-error
-      hover: `var(--ds-text-subtle, ${colors.N90})`,
-      // @ts-expect-error
-      active: `var(--ds-text, ${colors.N400})`,
-      disabled: 'color.text.disabled'
-    },
-    selected: {
-      // @ts-expect-error
-      default: `var(--ds-text-selected, ${colors.N20})`
-    }
-  }
-};
-export default values;

package/dist/es2019/new-button/variants/shared/xcss.js

@@ -1,196 +0,0 @@
-import { xcss } from '@atlaskit/primitives';
-import { fontSize as getFontSize } from '@atlaskit/theme/constants';
-import colors from './colors';
-const fontSize = getFontSize();
-export const heights = {
-  default: `${32 / fontSize}em`,
-  compact: `${24 / fontSize}em`,
-  none: 'auto'
-};
-const lineHeights = {
-  default: heights.default,
-  compact: heights.compact,
-  none: 'inherit'
-};
-const paddingInline = {
-  default: {
-    default: 'space.150',
-    withIcon: 'space.100'
-  },
-  compact: {
-    default: 'space.150',
-    withIcon: 'space.100'
-  },
-  none: {
-    default: 'space.0',
-    withIcon: 'space.0'
-  }
-};
-const gap = {
-  compact: 'space.050',
-  default: 'space.050',
-  none: 'space.0'
-};
-const verticalAlign = {
-  default: 'middle',
-  compact: 'middle',
-  none: 'baseline'
-};
-const splitBorderStyles = {
-  ':focus-visible': {
-    zIndex: 1
-  }
-};
-function getColor({
-  group,
-  key
-}) {
-  return group[key] || group.default;
-}
-function getColors({
-  appearance,
-  interactionState = 'default',
-  isDisabled,
-  isSelected,
-  isHighlighted,
-  isActiveOverSelected,
-  hasOverlay
-}) {
-  const showSelectedState = (isSelected || isHighlighted) && !isDisabled && !isActiveOverSelected;
-  let key = interactionState;
-  // Overlay does not change color on interaction, revert to 'default' or resting state
-  key = hasOverlay ? 'default' : key;
-  key = showSelectedState && isActiveOverSelected ? 'active' : key;
-
-  // Disabled colors overrule everything else
-  key = isDisabled ? 'disabled' : key;
-  return {
-    backgroundColor: getColor({
-      group: showSelectedState && colors.background[appearance]['selected'] || colors.background[showSelectedState ? 'selected' : appearance],
-      key
-    }),
-    color: getColor({
-      group: showSelectedState && colors.color[appearance]['selected'] || colors.color[showSelectedState ? 'selected' : appearance],
-      key
-    })
-  };
-}
-export function getXCSS({
-  appearance,
-  spacing,
-  isDisabled,
-  isSelected,
-  isLoading,
-  isHighlighted,
-  isActiveOverSelected,
-  isIconButton,
-  isCircle,
-  shouldFitContainer,
-  isLink,
-  isSplit,
-  isNavigationSplit,
-  hasOverlay,
-  hasIconBefore,
-  hasIconAfter
-}) {
-  const baseColors = getColors({
-    appearance,
-    isSelected,
-    isHighlighted,
-    isActiveOverSelected,
-    isDisabled
-  });
-  const combinedBaseColorStyles = isLink ? {
-    ...baseColors,
-    textDecoration: 'none',
-    // Disabling visited styles (by re-declaring the base colors)
-    ':visited': baseColors
-  } : isNavigationSplit && !isSelected ? {
-    ...baseColors,
-    backgroundColor: 'color.background.neutral.subtle'
-  } : baseColors;
-  const height = heights[spacing];
-  let width = shouldFitContainer ? '100%' : 'auto';
-  width = isIconButton ? isNavigationSplit ? '24px' : height : width;
-  const defaultPaddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
-  const defaultPaddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
-  const splitButtonStyles = isSplit ? splitBorderStyles : {};
-  const getNavigationSplitButtonPaddings = () => {
-    if (isNavigationSplit) {
-      return {
-        paddingInlineStart: 'space.075',
-        paddingInlineEnd: 'space.075'
-      };
-    }
-    return {
-      paddingInlineStart: isIconButton ? 'space.0' : defaultPaddingInlineStart,
-      paddingInlineEnd: isIconButton ? 'space.0' : defaultPaddingInlineEnd
-    };
-  };
-  const {
-    paddingInlineStart,
-    paddingInlineEnd
-  } = getNavigationSplitButtonPaddings();
-  return xcss({
-    alignItems: 'baseline',
-    borderWidth: 'border.width.0',
-    borderRadius: isCircle && !isSplit ? 'border.radius.circle' : 'border.radius.100',
-    boxSizing: 'border-box',
-    display: 'inline-flex',
-    fontSize: 'inherit',
-    fontStyle: 'normal',
-    fontFamily: 'inherit',
-    fontWeight: 500,
-    maxWidth: '100%',
-    // Needed to position overlay
-    position: 'relative',
-    textAlign: 'center',
-    transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
-    whiteSpace: 'nowrap',
-    height,
-    lineHeight: lineHeights[spacing],
-    paddingBlock: 'space.0',
-    paddingInlineStart,
-    paddingInlineEnd,
-    columnGap: gap[spacing],
-    verticalAlign: verticalAlign[spacing],
-    width,
-    // justifyContent required for shouldFitContainer buttons with an icon inside
-    justifyContent: 'center',
-    ...combinedBaseColorStyles,
-    ...(isDisabled || hasOverlay || isLoading ? {
-      cursor: isLoading ? 'progress' : 'not-allowed'
-    } : {}),
-    ':hover': {
-      ...getColors({
-        appearance,
-        isSelected: isNavigationSplit && !isSelected ? false : isSelected,
-        isActiveOverSelected,
-        isDisabled,
-        interactionState: 'hover',
-        hasOverlay
-      }),
-      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none',
-      // background, box-shadow
-      transitionDuration: '0s, 0.15s'
-    },
-    ':active': {
-      ...getColors({
-        appearance,
-        isSelected: isNavigationSplit && !isSelected ? false : isSelected,
-        isActiveOverSelected,
-        isDisabled,
-        interactionState: 'active',
-        hasOverlay
-      }),
-      // background, box-shadow
-      transitionDuration: '0s, 0s'
-    },
-    ':focus': {
-      // Required due to Jira's AUI CSS reset
-      // See https://product-fabric.atlassian.net/browse/DSP-15687
-      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none'
-    },
-    ...splitButtonStyles
-  });
-}