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

renderNode({ node, children, editor: { value }, attributes }) {
          if (!zone.match(node)) return

          const active = value.blocks.some(block => block.key === node.key)
          return (
            <div style="{{">
              {node.data.get('identifier') || 'Special'}
            </div>
          )
        },
        schema: {

bottom: 0,
    color: '#000',
    cursor: 'pointer',
    display: 'inline-block',
    padding: '10px 20px',
    textAlign: 'center',
    textDecoration: 'none',
    ':hover': {
      backgroundColor: colors.secondaryBg
    },
    ':last-child': {
      borderRightWidth: '1px'
    }
  }),
  tabSelected: css({
    backgroundColor: colors.primaryBg
  })
}

const menu = {
  edit: {
    label: 'Edit',
    basePath: '/stories/edit/'
  },
  meta: {
    label: 'Meta',
    basePath: '/stories/meta/'
  },
  tree: {
    label: 'Tree',
    basePath: '/stories/tree/'
  },

import { css } from 'glamor'

import withT from '../../lib/withT'
import { timeFormat } from '../../lib/utils/format'

import { colors, Interaction, Label, fontStyles } from '@project-r/styleguide'

const styles = {
  item: css({
    padding: 10,
    marginLeft: -10,
    marginRight: -10,
    marginBottom: 30
  }),
  itemHighlighted: css({
    backgroundColor: colors.primaryBg
  }),
  p: css({
    margin: 0,
    ...fontStyles.sansSerifRegular16
  })
}

const { H3 } = Interaction

const hourFormat = timeFormat('%H:%M')
const dayFormat = timeFormat('%d. %B %Y')

export const Item = withT(
  ({ t, highlighted, title, createdAt, children, compact }) => (

}
  }),
  reset: css({
    textAlign: 'center',
    marginTop: 10
  }),
  strong: css({
    fontFamily: fontFamilies.sansSerifMedium
  }),
  error: css({
    color: colors.error,
    fontFamily: fontFamilies.sansSerifMedium
  }),
  closed: css({
    marginTop: 35,
    background: colors.primaryBg,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 30,
    textAlign: 'center',
    marginBottom: 30
  }),
  progressIcon: css({
    marginLeft: 5,
    marginTop: 3,
    minHeight: 30
  })
}

class Page extends Component {
  constructor (props) {

minHeight: 55,
    top: HEADER_HEIGHT - 1,
    [mediaQueries.onlyS]: {
      top: HEADER_HEIGHT_MOBILE - 1
    }
  }),
  strong: css({
    fontFamily: fontFamilies.sansSerifMedium
  }),
  error: css({
    color: colors.error,
    fontFamily: fontFamilies.sansSerifMedium
  }),
  closed: css({
    marginTop: 35,
    background: colors.primaryBg,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 30,
    textAlign: 'center',
    marginBottom: 30
  }),
  progressIcon: css({
    marginLeft: 5,
    marginTop: 3,
    minHeight: 30
  })
}

export const actionStyles = css({
  textAlign: 'center',

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { css } from 'glamor'
import { colors } from '@project-r/styleguide'

const panelWidthPx = 250
const transitionDurationMs = 300

const styles = {
  container: css({
    position: 'absolute',
    top: 0,
    right: '10px'
  }),
  toolbar: {
    backgroundColor: colors.primaryBg,
    borderColor: '#222',
    borderRadius: '2px 0 0 2px',
    width: `${panelWidthPx}px`,
    opacity: 1,
    padding: '0 10px 10px',
    position: 'absolute',
    right: 0,
    top: 0,
    transition: `right ${transitionDurationMs}ms`,
    zIndex: 1
  },
  closeButton: css({
    position: 'absolute',
    right: '10px',
    top: '10px'
  }),

import { HEADER_HEIGHT, HEADER_HEIGHT_MOBILE } from '../constants'

import {
  NarrowContainer,
  fontFamilies,
  mediaQueries,
  colors
} from '@project-r/styleguide'

const styles = {
  cover: css({
    position: 'fixed',
    left: 0,
    right: 0,
    fontFamily: fontFamilies.sansSerifMedium,
    backgroundColor: colors.primaryBg,
    top: HEADER_HEIGHT_MOBILE,
    height: 220,
    paddingTop: 20,
    fontSize: 150,
    [mediaQueries.mUp]: {
      top: HEADER_HEIGHT,
      height: 420,
      fontSize: 300
    }
  }),
  headline: css({
    position: 'absolute',
    left: 0,
    right: 0,
    textAlign: 'center'
  }),

anchor: css({
    display: 'block',
    position: 'relative',
    visibility: 'hidden',
    top: -HEADER_HEIGHT_MOBILE,
    [mediaQueries.lUp]: {
      top: -HEADER_HEIGHT
    }
  }),
  image: css({
    margin: '25px 0'
  }),
  thankyou: css({
    marginTop: 25,
    padding: 25,
    background: colors.primaryBg
  })
}

class VotePage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      president: []
    }

    this.onVoteChange = field => value => {
      this.setState({ [field]: value })
    }
  }

  render() {

import { Link } from '../../lib/routes'
import { timeFormat } from '../../lib/utils/format'

const styles = {
  box: css({
    padding: 15
  }),
  singleLine: css({
    textAlign: 'center',
    fontSize: 13,
    [mediaQueries.mUp]: {
      fontSize: 16
    }
  }),
  boxLight: css({
    backgroundColor: colors.primaryBg
  }),
  boxDark: css({
    backgroundColor: colors.negative.primaryBg,
    color: '#fff'
  })
}

const SingleLine = ({ children }) => (
  <div>{children}</div>
)

const dayFormat = timeFormat('%d.&nbsp;%B&nbsp;%Y')

const ProlongBox = ({
  t,
  prolongBeforeDate,

fontFamily: fontFamilies.sansSerifRegular,
    paddingTop: 10,
    paddingBottom: 15,
    borderBottom: `1px solid ${colors.divider}`,
    borderTop: `1px solid ${colors.divider}`
  }),
  packageHighlighted: css({
    position: 'relative',
    zIndex: 1,
    marginBottom: -1,
    marginLeft: -10,
    marginRight: -10,
    paddingLeft: 10,
    paddingRight: 10,
    width: 'calc(100% + 20px)',
    backgroundColor: colors.primaryBg,
    borderBottom: 'none',
    paddingBottom: 16,
    borderTop: 'none',
    paddingTop: 11
  }),
  packageTitle: css({
    fontFamily: fontFamilies.sansSerifMedium,
    fontSize: 20,
    lineHeight: '26px'
  }),
  packagePrice: css({
    marginTop: 0,
    color: colors.primary,
    lineHeight: '26px',
    fontSize: 20
  }),