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

paddingTop: 10
  }),
  linkBlockStyle: css({
    color: 'inherit',
    textDecoration: 'none',
    '& em': {
      background: colors.primaryBg,
      fontStyle: 'normal'
    }
  }),
  link: css({
    ...fontStyles.link,
    color: colors.text,
    cursor: 'pointer',
    '&:visited': {
      color: colors.text
    }
  })
}
const CommentLink = ({
  displayAuthor,
  commentId,
  children,
  discussion,
  tab,
  ...props
}) => {
  if (displayAuthor && displayAuthor.username) {
    return (

top: 3,
      left: 2
    },
    '[aria-expanded=true] > & span:nth-child(2)': {
      width: 0,
      opacity: 0
    },
    '[aria-expanded=true] > & span:nth-child(3)': {
      transform: 'rotate(-45deg)',
      top: 20,
      left: 2
    }
  }),
  light: css({
    '& span': {
      backgroundColor: colors.text,
      '@media (hover)': {
        ':hover': {
          backgroundColor: colors.text
        }
      }
    }
  }),
  dark: css({
    '& span': {
      backgroundColor: colors.negative.text,
      '@media (hover)': {
        ':hover': {
          backgroundColor: colors.negative.text
        }
      }
    }

const icons = [
    dossier && {
      icon: 'dossier',
      title: t('feed/actionbar/dossier')
    },
    indicateGallery && {
      icon: 'gallery',
      title: t('feed/actionbar/gallery'),
      size: 20,
      color: colors.text
    },
    hasAudio && {
      icon: 'audio',
      title: t('feed/actionbar/audio'),
      size: 22,
      color: colors.text
    },
    indicateVideo && {
      icon: 'video',
      title: t('feed/actionbar/video'),
      size: 17,
      style: { marginTop: '-3px' }
    },
    indicateChart && {
      icon: 'chart',
      title: t('feed/actionbar/chart'),
      size: 18,
      style: { marginTop: '-2px' }
    }
  ]

  const {

fontSize: 15,
    lineHeight: '18px',
    textDecoration: 'none',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    cursor: 'pointer',
    [mediaQueries.mUp]: {
      fontSize: 18,
      lineHeight: '22px',
      minWidth: '25%',
      textAlign: 'center'
    }
  }),
  linkLight: css({
    color: colors.text,
    ':visited': {
      color: colors.text
    },
    '@media (hover)': {
      ':hover': {
        color: colors.primary
      }
    }
  }),
  linkDark: css({
    color: negativeColors.text,
    ':visited': {
      color: negativeColors.text
    },
    '@media (hover)': {
      ':hover': {

import React from 'react'
import { css } from 'glamor'

import { colors } from '@project-r/styleguide'

const styles = {
  box: css({
    paddingTop: 30,
    paddingBottom: 30,
    backgroundColor: colors.primaryBg,
    color: colors.text
  })
}

const Box = ({ children, style }) => (
  <div style="{style}">
    {children}
  </div>
)

export default Box

'linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1) 100%)',
    bottom: 0,
    display: 'none',
    position: 'absolute',
    right: '-1px',
    top: 0,
    width: 15,
    [mediaQueries.onlyS]: {
      display: 'block'
    }
  }),
  button: css({
    ...fontStyles.sansSerifRegular18,
    display: 'inline-block',
    outline: 'none',
    color: colors.text,
    WebkitAppearance: 'none',
    background: '#f2f2f2',
    border: 'none',
    padding: '1px 10px 2px 10px',
    cursor: 'pointer',
    margin: '0 10px 10px 0',
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular21
    }
  }),
  count: css({
    ...fontStyles.sansSerifMedium14,
    marginLeft: 5,
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifMedium16
    }

const listItemStyle = css({
  [mediaQueries.onlyS]: {
    lineHeight: '30px',
    paddingLeft: 0
  },
  [mediaQueries.mUp]: {
    float: 'left',
    marginRight: 16,
    position: 'relative'
  }
})

const linkStyle = css({
  textDecoration: 'none',
  color: colors.text,
  ':visited': {
    color: colors.text
  },
  ':hover': {
    color: '#ccc'
  }
})
const linkActiveStyle = css({
  color: '#ccc',
  ':visited': {
    color: '#ccc'
  },
  [mediaQueries.onlyS]: {
    display: 'none'
  }
})

} from '@project-r/styleguide'

const styles = {
  h2: css({
    ...fontStyles.serifBold,
    fontSize: 22,
    lineHeight: 1.2,
    margin: '36px 0 8px 0',
    [mediaQueries.mUp]: {
      fontSize: 30,
      lineHeight: 1.2,
      margin: '46px 0 12px 0'
    }
  }),
  p: css({
    color: colors.text,
    margin: '20px 0 20px 0',
    ...convertStyleToRem(fontStyles.serifRegular17),
    [mediaQueries.mUp]: {
      ...convertStyleToRem(fontStyles.serifRegular21)
    },
    ':first-child': {
      marginTop: 0
    },
    ':last-child': {
      marginBottom: 0
    },
    'h2 + &': {
      marginTop: 0
    }
  }),
  list: css({

'&[data-visible="false"]': {
    display: 'none'
  }
}

const format = {
  ...base,
  '&[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
  }
}

const action = {
  ...base,
  '&[data-disabled="true"]': {
    opacity: 0.3,
    color: colors.secondary
  },
  '&[data-disabled="false"]:hover': {
    color: colors.text
  }
}

export default {
  base: css(base),

const Credential = ({ description, verified, t, textColor }) => (
  <span style="{" title="{">
    {description}
    {verified &amp;&amp; (
      
    )}
  </span>
)