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

const styles = {
  row: css({
    position: 'relative',
    width: '100%',
    marginRight: 0
  }),
  statement: css({
    [mediaQueries.onlyS]: {
      marginBottom: 10,
      ...fontStyles.serifTitle22
    },
    ...fontStyles.serifTitle26
  }),
  summaryWrapper: css({
    padding: '13px 20px 15px 20px',
    background: colors.secondaryBg,
    marginTop: 8,
    marginBottom: 8,
    // marginLeft: -26,
    marginRight: 0
  }),
  summary: css({
    width: '100%',
    display: 'flex',
    ...fontStyles.sansSerifRegular16,
    lineHeight: 1.3,
    overflowWrap: 'break-word',
    '& div:nth-child(1)': {
      width: '30%'
    },
    '& div:nth-child(2)': {
      width: '10%'

th: css({
    textAlign: 'left',
    fontWeight: 'normal',
    padding: 8,
    borderTop: `1px solid ${colors.divider}`,
    borderBottom: `1px solid ${colors.divider}`,
    ':first-child': {
      paddingLeft: 0
    },
    ':last-child': {
      paddingRight: 0
    }
  }, fontStyles.label),
  tr: css({
    ':nth-child(even)': {
      backgroundColor: colors.secondaryBg
    }
  }),
  td: css({
    padding: 8,
    ':first-child': {
      paddingLeft: 0
    },
    ':last-child': {
      paddingRight: 0
    }
  }),
  num: css({
    // textAlign: 'right',
    fontFeatureSettings: '"tnum" 1, "kern" 1'
  }),
  order: css({

import withT from '../../../../lib/withT'
import slugify from '../../../../lib/utils/slug'

import MetaForm from './MetaForm'
import SlugField from './SlugField'
import FBPreview from './FBPreview'
import TwitterPreview from './TwitterPreview'
import RepoSelect from './RepoSelect'
import SeriesForm from './SeriesForm'
import UIForm from './UIForm'

const styles = {
  container: css({
    marginTop: 100,
    backgroundColor: colors.secondaryBg,
    padding: 30
  }),
  center: css({
    maxWidth: 640,
    margin: '0 auto'
  })
}

const getWidth = key =>
  key.match(/title|feed|emailSubject/i) ? '100%' : ''

const MetaData = ({
  value,
  editor,
  mdastSchema,
  contextMeta,

} from '@project-r/styleguide'
import { css } from 'glamor'
import { countFormat } from '../../lib/utils/format'
import {
  ELECTIONS,
  VOTINGS
} from './constants'
import {
  ELECTION_STATS_POLL_INTERVAL
} from '../../lib/constants'
import voteT from './voteT'

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
  })
}

linkRule,
    css({
      color: colors.text,
      textDecoration: 'none',
      display: 'flex',
      alignItems: 'center',
      width: '100%',
      textAlign: 'left',
      padding: '10px 0',
      cursor: 'pointer',
      '& ~ &': {
        borderTop: `1px solid ${colors.divider}`
      },
      '@media(hover)': {
        '&:hover': {
          background: colors.secondaryBg,
          margin: '0 -15px',
          padding: '10px 15px',
          width: 'calc(100% + 30px)'
        },
        '&:hover + &': {
          borderColor: 'transparent'
        },
        '& + &:hover': {
          borderColor: 'transparent'
        }
      },
      ...fontStyles.sansSerifRegular18,
      [mediaQueries.mUp]: {
        ...fontStyles.sansSerifRegular21
      }
    })

import questionStyles from './questionStyles'

const thumbSize = 24

const thumbStyle = {
  borderWidth: 0,
  borderRadius: '50%',
  width: thumbSize,
  height: thumbSize,
  background: colors.primary,
  outline: 'none'
}

const trackStyle = {
  background: colors.secondaryBg,
  height: 5
}

const styles = {
  sliderWrapper: css({
    position: 'relative',
    minHeight: 30,
    maxHeight: 50,
    width: '100%'
  }),
  slider: css({
    WebkitAppearance: 'none',
    width: '100%',
    background: 'transparent',
    outline: 'none',
    ':focus': {

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

const styles = {
  tab: css({
    backgroundColor: '#f0f0f0',
    border: `1px solid ${colors.divider}`,
    borderRightWidth: 0,
    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: {

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

const styles = {
  tab: css({
    backgroundColor: '#f0f0f0',
    border: `1px solid ${colors.divider}`,
    borderRightWidth: 0,
    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: {

import withT from '../../../../lib/withT'
import slugify from '../../../../lib/utils/slug'

import MetaForm from '../../utils/MetaForm'
import SlugField from '../../utils/SlugField'
import FBPreview from './FBPreview'
import TwitterPreview from './TwitterPreview'
import RepoSelect from './RepoSelect'
import SeriesForm from './SeriesForm'
import AudioForm from './AudioForm'
import UIForm from '../../UIForm'

const styles = {
  container: css({
    marginTop: 100,
    backgroundColor: colors.secondaryBg,
    padding: 30
  }),
  center: css({
    maxWidth: 640,
    margin: '0 auto'
  }),
  bool: css({
    clear: 'left',
    margin: '10px 0'
  })
}

const getWidth = key => (key.match(/title|feed|emailSubject/i) ? '100%' : '')

const MetaData = ({
  value,

import withT from '../../../../lib/withT'
import slugify from '../../../../lib/utils/slug'

import MetaForm from '../../utils/MetaForm'
import SlugField from '../../utils/SlugField'
import FBPreview from './FBPreview'
import TwitterPreview from './TwitterPreview'
import RepoSelect from './RepoSelect'
import SeriesForm from './SeriesForm'
import AudioForm from './AudioForm'
import UIForm from '../../UIForm'

const styles = {
  container: css({
    marginTop: 100,
    backgroundColor: colors.secondaryBg,
    padding: 30
  }),
  center: css({
    maxWidth: 640,
    margin: '0 auto'
  }),
  bool: css({
    clear: 'left',
    margin: '10px 0'
  })
}

const getWidth = key => key.match(/title|feed|emailSubject/i) ? '100%' : ''

const MetaData = ({ value, editor, mdastSchema, contextMeta, series, additionalFields = [], customFields = [], teaser: Teaser, t }) => {
  const node = value.document