src/themes/default/components/button.js

const baseStyle = {
  fontFamily: 'fontFamilies.ui',
  border: '1px solid transparent',
  borderRadius: 'radii.1',
  color: (theme, { color }) => theme.colors[color] || color || 'colors.default',
  transition: 'box-shadow 80ms ease-in-out',

  selectors: {
    _focus: {
      boxShadow: 'shadows.focusRing'
    },

    _disabled: {
      cursor: 'not-allowed',
      pointerEvents: 'none'
    }
  }
}

const colorKeyForAppearanceOrIntent = (appearance, intent) => {
  if (appearance === 'destructive') {
    return 'red'
  }

  switch (intent) {
    case 'success':
      return 'green'
    case 'danger':
      return 'red'
    default:
      return 'blue'
  }
}

const colorKeyForIntent = intent => {
  if (intent === 'danger') {
    return `red500`
  } else if (intent === 'success') {
    return `green500`
  } else {
    return `gray800`
  }
}

const borderColorForIntent = (intent, isHover) => {
  if (intent === 'danger') {
    return `red${isHover ? 500 : 300}`
  } else if (intent === 'success') {
    return `green${isHover ? 400 : 300}`
  } else {
    return `gray${isHover ? 600 : 500}`
  }
}

const getPrimaryButtonAppearance = (appearance, intent, textColor, theme) => {
  const color = colorKeyForAppearanceOrIntent(appearance, intent)
  return {
    backgroundColor: `colors.${color}500`,
    borderColor: `colors.${color}500`,
    color: textColor || 'white',

    selectors: {
      _hover: {
        backgroundColor: `colors.${color}600`,
        borderColor: `colors.${color}600`
      },
      _disabled: {
        backgroundColor: `colors.${color}100`,
        borderColor: `colors.${color}100`
      },
      _focus: {
        backgroundColor: `colors.${color}500`,
        boxShadow: `0 0 0 2px ${theme && theme.colors[`${color}100`]}`,
        borderColor: `colors.${color}500`
      },
      _active: {
        backgroundColor: `colors.${color}700`,
        borderColor: `colors.${color}700`
      }
    }
  }
}

const appearances = {
  primary: (theme, { appearance, color, intent }) => getPrimaryButtonAppearance(appearance, intent, color, theme),
  default: {
    backgroundColor: 'white',
    border: (theme, props) => `1px solid ${theme.colors[borderColorForIntent(props.intent)]}`,
    color: (theme, props) => props.color || theme.colors[colorKeyForIntent(props.intent)],

    selectors: {
      _disabled: {
        color: 'colors.gray500',
        borderColor: 'colors.gray300'
      },

      _hover: {
        border: (theme, props) => `1px solid ${theme.colors[borderColorForIntent(props.intent, true)]}`,
        backgroundColor: 'colors.gray50'
      },

      _active: {
        backgroundColor: 'colors.gray100'
      }
    }
  },
  minimal: {
    backgroundColor: 'transparent',
    color: (theme, props) => props.color || theme.colors[colorKeyForIntent(props.intent)],

    selectors: {
      _disabled: {
        color: 'colors.gray500',
        opacity: 0.6
      },

      _hover: {
        backgroundColor: 'colors.gray100'
      },

      _active: {
        backgroundColor: 'colors.gray200'
      }
    }
  },
  destructive: getPrimaryButtonAppearance('destructive')
}

const sizes = {
  small: {
    height: 24,
    minWidth: 24,
    fontSize: 'fontSizes.1',
    lineHeight: '24px',
    paddingLeft: 12,
    paddingRight: 12
  },
  medium: {
    height: 32,
    minWidth: 32,
    fontSize: 'fontSizes.1',
    lineHeight: '32px',
    paddingLeft: 16,
    paddingRight: 16
  },
  large: {
    height: 40,
    minWidth: 40,
    fontSize: 'fontSizes.2',
    lineHeight: '40px',
    paddingLeft: 20,
    paddingRight: 20
  }
}

export default {
  baseStyle,
  appearances,
  sizes
}