How to use the @project-r/styleguide.colors.secondary function in @project-r/styleguide

))}
    
  )
}

ShareButtons.propTypes = {
  url: PropTypes.string.isRequired,
  tweet: PropTypes.string.isRequired,
  emailSubject: PropTypes.string.isRequired,
  emailBody: PropTypes.string.isRequired,
  emailAttachUrl: PropTypes.bool.isRequired,
  fill: PropTypes.string
}

ShareButtons.defaultProps = {
  fill: colors.secondary,
  tweet: '',
  emailBody: '',
  emailAttachUrl: true
}

export default ShareButtons

fontSize: '16px',
    lineHeight: '25px',
    [mediaQueries.mUp]: {
      marginTop: '20px',
      fontSize: '23px',
      lineHeight: '28px'
    },
    '& a': {
      color: colors.text,
      textDecoration: 'underline'
    },
    '& a:hover': {
      color: colors.secondary
    },
    '& a:focus': {
      color: colors.secondary
    },
    '& a:active': {
      color: colors.primary
    }
  })
}

const GET_COMMUNITY_LIST = gql`
query members {
  statements(first: 100) {
    totalCount
    nodes {
      id
      username
      name
      portrait

backgroundColor: '#fff',
  fontFamily: fontFamilies.sansSerifRegular,
  border: `1px solid ${colors.secondary}`,
  borderRadius: 0,
  color: colors.secondary,
  cursor: 'pointer',
  '@media (hover)': {
    ':hover': {
      backgroundColor: colors.primary,
      borderColor: colors.primary,
      color: '#fff'
    }
  },
  ':active': {
    backgroundColor: colors.secondary,
    borderColor: colors.secondary,
    color: '#fff'
  },
  ':disabled, [disabled]': {
    backgroundColor: '#fff',
    color: colors.disabled,
    borderColor: colors.disabled,
    cursor: 'default'
  }
})

const primaryStyle = css({
  backgroundColor: colors.primary,
  borderColor: colors.primary,
  color: '#fff',
  '@media(hover)': {
    ':hover': {

import React from 'react'
import { colors, P, H1, H2, Lead } from '@project-r/styleguide'
import { css } from 'glamor'
import Placeholder from '../../components/Placeholder'
import BoldIcon from 'react-icons/lib/fa/bold'
import ItalicIcon from 'react-icons/lib/fa/italic'
import UnderlineIcon from 'react-icons/lib/fa/underline'
import StrikethroughIcon from 'react-icons/lib/fa/strikethrough'

const styles = {
  markButton: {
    textAlign: 'center',
    display: 'inline-block',
    width: '30px',
    cursor: 'pointer',
    color: colors.secondary,
    transition: 'color 0.1s, opacity 0.1s',
    '&[data-active="true"]': {
      color: colors.primary
    },
    '&[data-disabled="true"]': {
      opacity: 0.3,
      color: colors.secondary
    },
    '&[data-active="false"][data-disabled="false"]:hover': {
      color: colors.text
    }
  },
  blockButton: {
    display: 'block',
    cursor: 'pointer',
    color: colors.secondary,

position: 'absolute',
    top: 0,
    left: 0,
    height: HEIGHT,
    backgroundColor: 'transparent',
    borderRight: `2px solid ${BAR_COLOR}`
  }),
  currentGoal: css({
    borderRight: 'none'
  }),
  goalNumber: css({
    color: colors.secondary,
    fontFamiliy: fontFamilies.sansSerifMedium,
    fontSize: 14,
    lineHeight: '14px',
    borderRight: `1px solid ${colors.secondary}`,
    textAlign: 'right',
    paddingTop: 12,
    paddingRight: 4
  }),
  goalBar: css({
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: colors.secondary,
    height: 8
  }),
  box: css({
    position: 'absolute',
    top: 40,
    left: 5,
    right: 5,

paddingTop: 12,
    paddingRight: 4
  }),
  goalBar: css({
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: colors.secondary,
    height: 8
  }),
  box: css({
    position: 'absolute',
    top: 40,
    left: 5,
    right: 5,
    backgroundColor: colors.secondary,
    color: '#fff',
    fontFamiliy: fontFamilies.sansSerifMedium,
    fontSize: 14,
    lineHeight: '19px',
    padding: '12px 17px'
  }),
  arrow: css({
    position: 'absolute',
    top: 32,
    right: 15,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderWidth: '0 4px 8px 4px',
    borderColor: `transparent transparent ${colors.secondary} transparent`
  }),

':disabled, [disabled]': {
    backgroundColor: '#fff',
    color: colors.disabled,
    borderColor: colors.disabled,
    cursor: 'default'
  }
})

const primaryStyle = css({
  backgroundColor: colors.primary,
  borderColor: colors.primary,
  color: '#fff',
  '@media(hover)': {
    ':hover': {
      backgroundColor: colors.secondary,
      borderColor: colors.secondary
    }
  },
  ':active': {
    backgroundColor: '#000',
    borderColor: '#000',
    color: '#fff'
  }
})

export const buttonStyles = {
  standard: buttonStyle,
  primary: merge(buttonStyle, primaryStyle)
}

export const sharedStyles = {
  headline: css({

fontFamily: fontFamilies.sansSerifRegular,
    color: colors.secondary,
    float: 'left',
    width: '50%',
    [mediaQueries.mUp]: {
      fontSize: 17,
      lineHeight: '25px',
      paddingLeft: COL_PADDING_M / 2,
      paddingRight: COL_PADDING_M / 2,
      width: '25%'
    },
    '& a': {
      textDecoration: 'none',
      color: colors.secondary,
      ':visited': {
        color: colors.secondary
      },
      ':hover': {
        color: colors.primary
      }
    }
  }),
  title: css({
    fontFamily: fontFamilies.sansSerifMedium
  }),
  hr: css({
    marginTop: 20,
    marginBottom: 20,
    border: 'none',
    borderBottom: `1px solid ${colors.divider}`
  })
}

backgroundColor: colors.primary,
    height: '100%'
  }),
  goal: css({
    position: 'absolute',
    top: 0,
    left: 0,
    height: HEIGHT,
    backgroundColor: 'transparent',
    borderRight: `2px solid ${BAR_COLOR}`
  }),
  currentGoal: css({
    borderRight: 'none'
  }),
  goalNumber: css({
    color: colors.secondary,
    fontFamiliy: fontFamilies.sansSerifMedium,
    fontSize: 14,
    lineHeight: '14px',
    borderRight: `1px solid ${colors.secondary}`,
    textAlign: 'right',
    paddingTop: 12,
    paddingRight: 4
  }),
  goalBar: css({
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: colors.secondary,
    height: 8
  }),
  box: css({

backgroundColor: 'transparent',
    boxSizing: 'content-box',
    borderRight: `2px solid ${BAR_COLOR}`
  }),
  currentGoal: css({
    borderRight: 'none'
  }),
  lowerGoal: css({
    borderRight: '2px solid #fff'
  }),
  goalNumber: css({
    color: colors.secondary,
    fontFamiliy: fontFamilies.sansSerifMedium,
    fontSize: 14,
    lineHeight: '14px',
    borderRight: `1px solid ${colors.secondary}`,
    textAlign: 'right',
    paddingTop: 12,
    paddingRight: 4
  }),
  goalBar: css({
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: colors.secondary,
    height: 8
  }),
  box: css({
    position: 'absolute',
    top: 40,
    left: 5,
    right: 5,