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

{icons.filter(Boolean).map((props, i) => (
          
            
          
        ))}
        {displayConsumptionMinutes > 1 && (

progress={percent}
          stroke={fill}
          strokePlaceholder='#e9e9e9'
          radius={9}
          strokeWidth={2}
        />
      
      <span fill="" style="{{">
        {text || `${percent}%`}
      </span>
    
  )
}

UserProgress.defaultProps = {
  fill: colors.lightText
}

UserProgress.propTypes = {
  userProgress: PropTypes.object.isRequired,
  style: PropTypes.object
}

export default compose(withT)(UserProgress)

flexFlow: 'row wrap'
  }),
  input: css({
    marginRight: 10,
    marginBottom: 0,
    width: '58%',
    flexGrow: 1
  }),
  button: css({
    width: 160,
    textAlign: 'center',
    marginBottom: 15
  }),
  hint: css({
    marginTop: -5,
    color: colors.lightText,
    display: 'block',
    lineHeight: '20px'
  }),
  hintA: css({
    textDecoration: 'underline',
    textDecorationSkip: 'ink',
    color: colors.lightText,
    ':hover': {
      color: colors.text
    }
  })
}

const checkEmail = ({ value, shouldValidate, t }) => ({
  email: value,
  error: (

color: colors.disabled
    },
    '@media (hover)': {
      ':hover': {
        color: colors.primary
      }
    }
  }),
  linkFadedDark: css({
    color: colors.disabled,
    ':visited': {
      color: colors.disabled
    },
    '@media (hover)': {
      ':hover': {
        color: colors.lightText
      }
    }
  })
}

const NavLink = ({ route, label, params, isActive, isFaded, dark }) => {
  if (isActive) {
    return (
      <a> {
          e.preventDefault()
          Router.replaceRoute(route, params).then(() =&gt; {
            window.scroll(0, 0)
          })</a>

const styles = {
  wrapper: css({
    lineHeight: 1.4,
    background: colors.secondaryBg,
    textAlign: 'center',
    marginBottom: 15,
    padding: 15,
    [mediaQueries.mUp]: {
      float: 'right',
      width: '33%',
      margin: '0 0 5px 10px'
    }
  }),
  number: css({
    color: colors.lightText,
    paddingBottom: 4,
    ...fontStyles.sansSerifMedium58
  })
}

const VoteCounter = ({ data, vt, hasEnded }) =>
   {
    const votingsAndElections = [
      ...ELECTIONS,
      ...VOTINGS
    ].map(({ slug }) => data[slug])

    const counts = votingsAndElections.map(d => d.turnout.submitted)
    const minSubmitted = Math.min(...counts)

    return (

}),
  button: css({
    width: 160,
    textAlign: 'center',
    marginBottom: 15
  }),
  hint: css({
    marginTop: -5,
    color: colors.lightText,
    display: 'block',
    lineHeight: '20px'
  }),
  hintA: css({
    textDecoration: 'underline',
    textDecorationSkip: 'ink',
    color: colors.lightText,
    ':hover': {
      color: colors.text
    }
  })
}

const checkEmail = ({ value, shouldValidate, t }) => ({
  email: value,
  error: (
    (value.trim().length <= 0 && t('signIn/email/error/empty')) ||
    (!isEmail(value) && t('signIn/email/error/invalid'))
  ),
  dirty: shouldValidate
})

class SignIn extends Component {

description: t('questionnaire/crowd/description'),
  image: `${CDN_FRONTEND_BASE_URL}/static/social-media/logo.png`,
  facebookTitle: t('pages/meta/questionnaire/crowd/socialTitle'),
  twitterTitle: t('pages/meta/questionnaire/crowd/socialTitle')
}

const gifLink = `${CDN_FRONTEND_BASE_URL}/static/social-media/umfrage/crowd/schade.gif`

const styles = {
  intro: css({
    margin: '35px 0 70px'
  }),
  arrow: css({
    marginRight: 15,
    minWidth: 16,
    color: colors.lightText
  }),
  thankYouItem: css({
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'left',
    alignItems: 'center',
    marginBottom: 20
  }),
  socialButtons: css({
    marginLeft: 30,
    marginTop: 30
  })
}

const getValues = me => {
  let addressState = {}

paddingBottom: 0
  }),
  cta: css({
    marginTop: 10
  }),
  actions: css({
    display: 'flex',
    flexDirection: 'column',
    [mediaQueries.mUp]: {
      alignItems: 'center',
      flexDirection: 'row'
    }
  }),
  aside: css({
    marginTop: 15,
    color: colors.lightText,
    ...fontStyles.sansSerifRegular16,
    '& a': linkRule,
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular18,
      marginLeft: 30,
      marginTop: 0
    }
  })
}

const memberShipQuery = gql`
  query payNoteMembershipStats {
    membershipStats {
      count
    }
  }

const PTiny = ({ children, note }) => (
  <div>
    {children}
  </div>
)

}),
  textArea: css({
    width: '100%',
    minWidth: '100%',
    maxWidth: '100%',
    minHeight: '60px',
    padding: 0,
    background: 'transparent',
    border: 'none',
    outline: 'none',
    boxSizing: 'border-box',
    ...fontStyles.sansSerifRegular21,
    color: colors.text
  }),
  textAreaEmpty: css({
    color: colors.lightText,
    '::-webkit-input-placeholder': {
      color: colors.lightText
    }
  }),
  maxLength: css({
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'flex-end',
    marginBottom: '-10px',
    padding: '0 12px'
  }),
  remaining: css({
    ...fontStyles.sansSerifRegular14,
    lineHeight: '20px',
    padding: '0 5px'
  })