message: use variant for label sizing
diff: import PropTypes from 'prop-types'
  import styled from 'styled-components'
  +import {variant} from 'styled-system'
  import theme, {colors} from './theme'
  import {COMMON} from './constants'
  -const sizeMap = {
  - small: `padding 0.125em ${theme.space[1]}px; font-size: ${theme.fontSizes[0]}px;`,
  - medium: `padding: 3px ${theme.space[1]}px; font-size: ${theme.fontSizes[0]}px;`,
  - large: `padding: 4px ${theme.space[2]}px; ${theme.fontSizes[1]}px;`,
  - xl: `padding: ${theme.space[1]}px; ${theme.space[2]}px; ${theme.fontSizes[2]}px;`
  -}
  -
  const outlineStyles = `
  margin-top: -1px; // offsets the 1px border
  margin-bottom: -1px; // offsets the 1px border
  @@ -20,6 +14,32 @@ const outlineStyles = `
  box-shadow: none;
  `
  +const sizeVariant = variant({
  + prop: 'size',
  + variants: {
  + small: {
  + fontSize: 0,
  + px: '0.125em',
  + py: 1
  + },
  + medium: {
  + fontSize: 0,
  + px: '3px',
  + py: 1
  + },
  + large: {
  + fontSize: 1,
  + px: 1,
  + py: 2
  + },
  + xl: {
  + fontSize: 2,
  + px: 1,
  + py: 2
  + }
  + }
  +})
  +
  const Label = styled('span')`
  display: inline-block;
  font-weight: 600;
  @@ -29,8 +49,8 @@ const Label = styled('span')`
  &:hover {
  text-decoration: none;
  }
  + ${sizeVariant}
  ${COMMON} ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')};
  - ${props => sizeMap[props.size]};
  ${props => (props.outline ? outlineStyles : '')}; // must be last to override other values
  `
  