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

<br>
                
                <div>
                  {error ? (
                    <p>{errorToString(error)}</p>
                  ) : (
                    &lt;&gt;
                      <p>
                        {t('questionnaire/header', {
                          questionCount,
                          userAnswerCount
                        })}
                      </p>
                      {questionCount === userAnswerCount ? (
                        <div>
                          
                        </div>
                      ) : updating || submitting ? (
                        <div style="{{">
                          
                        </div>
                      ) : null}
                    
                  )}
                </div>
                {questions.map(q =&gt;
                  React.createElement(QUESTION_TYPES[q.__typename], {
                    onChange: this.createHandleChange(q.id),
                    question: q,
                    key: q.id,
                    disabled: userHasSubmitted
                  })

import DiscussionIconLink from './DiscussionIconLink'

import { shouldIgnoreClick } from '../Link/utils'
import sharedStyles from '../sharedStyles'

import { SmallParagraph, Finance } from './Shared'

import { rgb } from 'd3-color'

export const MEDIUM_MIN_WIDTH = 360

const PADDING = 15

const mdCheckProps = {
  style: { marginTop: -4, marginLeft: 5 },
  fill: colors.primary
}

export const styles = {
  card: css({
    position: 'absolute',
    width: '100vw',
    top: 20,
    bottom: 80,
    minHeight: 340,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }),
  cardInner: css({
    position: 'relative',
    userSelect: 'none',

top: HEADER_HEIGHT - 1,
    [mediaQueries.onlyS]: {
      top: HEADER_HEIGHT_MOBILE - 1
    }
  }),
  tabBar: css({
    padding: '10px 0px 20px 0px',
    borderTop: `0.5px solid ${colors.divider}`
  }),
  tab: css({
    marginRight: 20,
    display: 'inline-block'
  }),
  count: css({
    marginLeft: 10,
    color: colors.primary,
    ...fontStyles.sansSerifMedium16
  })
}

const DiscussionPage = ({ router, data, vt }) => {
  const meta = {
    title: vt('info/title'),
    description: vt('info/description')
  }

  return (
    
       {

':last-child': {
      paddingRight: 0
    },
    '@media print': {
      display: 'none'
    }
  }),
  text: css({
    position: 'absolute',
    top: 4 + 2,
    left: 5,
    right: 4,
    textAlign: 'center',
    display: 'inline-block',
    overflow: 'hidden',
    color: colors.primary,
    ...fontStyles.sansSerifMedium,
    fontFeatureSettings: '"tnum" 1, "kern" 1',
    fontSize: 14,
    lineHeight: 1
  }),
  icon: css({
    position: 'relative',
    display: 'inline-block',
    verticalAlign: 'middle'
  })
}

const IconLink = ({ href, onClick, count, style, small }) => {
  const length = String(count).length
  const aw = 4 + (length - 1) * 7
  return (

const { userAnswerSet, userInvertedAnswerSet } = answerSets || {}
          const { error, submitting, updating } = this.state
          const questionCount = questions.filter(Boolean).length
          const userAnswerCount = questions.map(q => q.userAnswer).filter(Boolean).length
          return (
            <div>
              Mainstream-Score
              <div>
                { error
                  ? <p>{errorToString(error)}</p>
                  : &lt;&gt;
                    <div style="{{">
                      <p>{t('questionnaire/header', { questionCount, userAnswerCount })}</p>
                      {
                        questionCount === userAnswerCount
                          ? <div></div>
                          : (updating || submitting)
                            ? <div style="{{"></div>
                            : null
                      }
                    </div>
                  
                }
              </div>
              {
                questions.map(q =&gt;
                  React.createElement(
                    MSSQuestion,
                    {
                      onChange: this.createHandleChange(q.id),
                      question: q,
                      key: q.id</div>

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

import { matchBlock } from '../../utils'
import { gray2x1 } from '../../utils/placeholder'
import MarkdownSerializer from 'slate-mdast-serializer'

const styles = {
  border: css({
    display: 'inline-block',
    outline: `4px solid transparent`,
    width: '100%',
    lineHeight: 0,
    transition: 'outline-color 0.2s',
    '&[data-active="true"]': {
      outlineColor: colors.primary
    }
  })
}

export default ({ rule, subModules, TYPE }) => {
  const Image = rule.component

  const figureImage = {
    match: matchBlock(TYPE),
    matchMdast: node => node.type === 'image',
    fromMdast: node => {
      return {
        kind: 'block',
        type: TYPE,
        data: {
          alt: node.alt,

const IconLink = ({ href, onClick, count, style, small }) => {
  const length = String(count).length
  const aw = 4 + (length - 1) * 7
  return (
    <a style="{style}" href="{href}">
      <span>
        
        <span>{count}</span>
      </span>
    </a>
  )
}

display: 'inline-block',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    marginTop: 5
  }),
  mobileOnly: css({
    [mediaQueries.mUp]: {
      display: 'none'
    }
  }),
  solid: css({
    position: 'absolute',
    top: 0.5,
    left: 0,
    borderRadius: '50%',
    backgroundColor: colors.primary,
    animation: [
      `${solidScaleframes} 1.8s cubic-bezier(0.8, 0, 0.8, 1) alternate both`,
      `${solidOpacityKeyframes} 1.3s cubic-bezier(0.8, 0, 0.8, 1) both`
    ].join(',')
  })
}

const ICONS = {
  copyLink: CopyLinkIcon,
  audio: AudioIcon,
  chart: ChartIcon,
  discussion: DiscussionIcon,
  download: DownloadIcon,
  facebook: FacebookIcon,
  dossier: FolderIcon,
  link: LinkIcon,

backgroundColor: 'rgba(0, 0, 0, 0.6)',
    cursor: 'pointer',
    transition: 'opacity 200ms'
  }),
  play: css({
    position: 'absolute',
    top: '50%',
    left: '5%',
    right: '5%',
    marginTop: -18,
    textAlign: 'center',
    transition: 'opacity 200ms'
  }),
  progress: css({
    position: 'absolute',
    backgroundColor: colors.primary,
    bottom: -PROGRESS_HEIGHT,
    left: 0,
    height: PROGRESS_HEIGHT
  }),
  icons: css({
    position: 'absolute',
    zIndex: ZINDEX_VIDEOPLAYER_ICONS,
    right: 10,
    bottom: 10,
    cursor: 'pointer'
  }),
  scrub: css({
    zIndex: ZINDEX_VIDEOPLAYER_SCRUB,
    position: 'absolute',
    height: '10%',
    bottom: -PROGRESS_HEIGHT,

import React, { Component } from 'react'
import Router from 'next/router'

import { css } from 'glamor'
import { colors } from '@project-r/styleguide'
import { ZINDEX_LOADINGBAR } from '../constants'

const styles = {
  loadingBar: css({
    position: 'fixed',
    zIndex: ZINDEX_LOADINGBAR,
    top: 0,
    left: 0,
    height: 2,
    backgroundColor: colors.primary,
    transition: 'width 200ms linear, opacity 200ms linear'
  })
}

class LoadingBar extends Component {
  constructor(props) {
    super(props)

    this.state = {
      loading: false,
      progress: 0
    }
  }
  onRouteChangeStart = url => {
    clearTimeout(this.timeout)
    this.setState({ loading: true, progress: 0.02 })