message: refactor Octicon + use theme values
diff: import React from 'react'
  import PropTypes from 'prop-types'
  import styled from 'react-emotion'
  -import {colors} from './theme'
  +import theme, {colors} from './theme'
  import {withSystemProps, COMMON} from './system-props'
  import Box from './Box'
  import Octicon from './Octicon'
  @@ -10,14 +10,17 @@ const schemeMap = {
  red: colors.red[6],
  yellow: colors.yellow[7],
  purple: colors.purple[5],
  - green: colors.green[5],
  + green: '#2cbe4e', // This was generated by a sass function in Primer, so using a hex here
  gray: colors.gray[5]
  }
  -function StateLabel({className, icon, scheme, small, children}) {
  +const getOcticon = (icon, small) =>
  + small ? <Octicon mr={1} width='1em' icon={icon} /> : <Octicon mr={1} icon={icon} />
  +
  +function StateLabel({className, icon, scheme, small = false, children}) {
  return (
  <span className={className}>
  - {icon && <Octicon mr={1} icon={icon} />}
  + {icon && getOcticon(icon, small)}
  {children}
  </span>
  )
  @@ -26,11 +29,11 @@ function StateLabel({className, icon, scheme, small, children}) {
  const styledLabel = styled(StateLabel)`
  display: inline-flex;
  align-items: center;
  - padding: ${props => (props.small ? '0.125em 4px' : '4px 8px')};
  + padding: ${props => (props.small ? `0.125em ${theme.space[1]}px` : `${theme.space[1]}px ${theme.space[2]}px`)};
  font-weight: 600;
  line-height: 20px;
  color: #fff;
  - font-size: ${props => (props.small ? '12px' : '16px')}
  + font-size: ${props => (props.small ? `${theme.fontSizes[0]}px` : `${theme.fontSizes[1]}px`)};
  text-align: center;
  background-color: ${props => (props.scheme ? schemeMap[props.scheme] : schemeMap.gray)};
  border-radius: 3px;
  