@atlaskit/button/dist/es2019/old-button/custom-theme-button/theme.js

A button triggers an event or action. They let users know what will happen next.

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

import { createTheme } from '@atlaskit/theme/components';
import { getCss } from '../shared/css';
const stateToSelectorMap = {
  focus: '&:focus',
  focusSelected: '&:focus',
  hover: '&:hover',
  active: '&:active',
  disabled: '&[disabled]'
};

// Mapping the new clean css back to the legacy theme format.
// The legacy theme format has all styles at the top level (no nested selectors)
// and uses `getSpecifiers()` to apply the style to all pseudo states
export function getCustomCss({
  appearance = 'default',
  spacing = 'default',
  isSelected = false,
  shouldFitContainer = false,
  iconIsOnlyChild = false,
  isLoading = false,
  state
}) {
  let result = getCss({
    appearance,
    spacing,
    isSelected,
    shouldFitContainer,
    isOnlySingleIcon: iconIsOnlyChild
  });

  // we need to disable the default browser focus styles always
  // this is because we are not expressing that we can have two pseudo states at a time
  result.outline = 'none';

  // Pulling relevant styles up to the top level
  const selector = stateToSelectorMap[state];
  if (selector) {
    result = {
      ...result,
      ...result[selector]
    };
  }
  if (isLoading) {
    result = {
      ...result,
      // Pull overlay styles up to the top
      ...result['&[data-has-overlay="true"]']
    };
  }

  // Delete all selectors and just keep root styles
  Object.keys(result).forEach(key => {
    // want to keep this one
    if (key === '&::-moz-focus-inner') {
      return;
    }

    // Not using .startsWith for ie11
    if (key.indexOf('&') === 0) {
      delete result[key];
    }
  });
  return result;
}

// This styling approach works by generating a 'style' and applying with maximum specificity
// To do this we are overwriting all pseudo selectors
export function getSpecifiers(styles) {
  return {
    '&, &:hover, &:active, &:focus, &:focus-visible, &:visited, &:disabled, &[disabled]': styles
  };
}
export function defaultThemeFn(current, values) {
  return current(values);
}
const Theme = createTheme(themeProps => ({
  buttonStyles: getCustomCss(themeProps),
  // No styles being applied directly to spinner by default
  // Keeping this for legacy compat. We could remove it, but given
  // that we are changing theme soon there is no point
  spinnerStyles: {}
}));

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default Theme;