Function getButtonStyles

packages/react/src/Button/styles.ts:301–342

(theme?: Theme)

})

export const getButtonStyles = (theme?: Theme) => {
  const styles = {
    ...getBaseStyles(theme),
    '&[data-block="block"]': {
      width: '100%',
    },
    '&[data-inactive]:not([disabled])': {
      backgroundColor: `var(--button-inactive-bgColor, ${theme?.colors.btn.inactive.bg})`,
      borderColor: `var(--button-inactive-bgColor, ${theme?.colors.btn.inactive.bg})`,
      color: `var(--button-inactive-fgColor, ${theme?.colors.btn.inactive.text})`,
    },
    '&[data-inactive]:not([disabled]):focus-visible': {
      boxShadow: 'none',
    },
    '[data-component="leadingVisual"]': {
      gridArea: 'leadingVisual',
    },
    '[data-component="text"]': {
      gridArea: 'text',
      lineHeight: 'calc(20/14)',
      whiteSpace: 'nowrap',
    },
    '[data-component="trailingVisual"]': {
      gridArea: 'trailingVisual',
    },
    '[data-component="trailingAction"]': {
      marginRight: '-4px',
    },
    '[data-component="buttonContent"]': {
      flex: '1 0 auto',
      display: 'grid',
      gridTemplateAreas: '"leadingVisual text trailingVisual"',
      gridTemplateColumns: 'min-content minmax(0, auto) min-content',
      alignItems: 'center',
      alignContent: 'center',
    },
    '[data-component="buttonContent"] > :not(:last-child)': {
      mr: '8px',
    },
  }
  return styles
}

export const getAlignContentSize = (alignContent: AlignContent = 'center') => ({
  justifyContent: alignContent === 'center' ? 'center' : 'flex-start',