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

// up to the higher-order component. Otherwise it's managed inside the component.
    const expanded = !!(onPrimaryNavExpandedChange
      ? primaryNavExpanded
      : this.state.expanded)
    const secondaryVisible = showSecondary && !expanded
    const dark = this.props.dark && !expanded

    const opaque = this.state.opaque || expanded
    const barStyle = opaque ? merge(styles.bar, styles.barOpaque) : styles.bar

    const bgStyle = opaque
      ? {
          backgroundColor: dark ? colors.negative.primaryBg : '#fff'
        }
      : undefined
    const hrColor = dark ? colors.negative.containerBg : colors.divider
    const hrColorStyle = {
      color: hrColor,
      backgroundColor: hrColor
    }
    const textFill = dark ? colors.negative.text : colors.text
    const logoFill = dark ? colors.logoDark || '#fff' : colors.logo || '#000'

    const toggleExpanded = () => {
      if (onPrimaryNavExpandedChange) {
        onPrimaryNavExpandedChange(!expanded)
      } else {
        this.setState({ expanded: !expanded })
      }
    }
    const closeHandler = () => {
      if (expanded) {

margin: `0 0 30px -${SIDEBAR_WIDTH + MARGIN_WIDTH}px`,
      width: SIDEBAR_WIDTH,
      '& > div': {
        width: SIDEBAR_WIDTH
      }
    }
  }),
  label: css({
    padding: '8px 0',
    borderTop: '1px solid #000',
    backgroundColor: '#fff',
    zIndex: ZINDEX_FEED_STICKY_SECTION_LABEL
  }),
  sticky: css({
    top: HEADER_HEIGHT_MOBILE - 1,
    borderBottom: `0.5px solid ${colors.divider}`,
    [mediaQueries.mUp]: {
      top: HEADER_HEIGHT - 1
    },
    [mediaQueries.lUp]: {
      borderBottom: 'none'
    }
  })
}

class StickySection extends Component {
  constructor(props) {
    super(props)
    this.state = {
      sticky: false,
      isMedium: false,
      isSmall: false,

import React, { Component } from 'react'
import { Link } from '../../lib/routes'
import { css, merge } from 'glamor'
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({

import React, { Component } from 'react'
import { Link } from '../../server/routes'
import { css, merge } from 'glamor'
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({

import React, { Component } from 'react'
import { gql, graphql } from 'react-apollo'
import { css } from 'glamor'

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

const styles = {
  list: css({
    listStyleType: 'none',
    margin: 0,
    maxHeight: '300px',
    overflow: 'scroll',
    padding: 0
  }),
  change: css({
    borderBottom: `1px solid ${colors.divider}`,
    fontSize: '13px',
    padding: '5px 0',
    position: 'relative'
  }),
  empty: css({
    fontSize: '13px',
    padding: '10px',
    textAlign: 'center'
  })
}

const query = gql`
  query uncommittedChanges(
    $login: String!
    $repository: String!
    $filename: String!

height: 0,
    overflow: 'visible'
  }),
  ui: css({
    position: 'absolute',
    zIndex: 10,
    margin: 0,
    padding: 0,
    top: 0,
    left: 0,
    right: 0,
    overflow: 'hidden'
  }),
  uiInlineRow: css({
    backgroundColor: '#fff',
    border: `1px solid ${colors.divider}`,
    padding: '5px',
    display: 'inline-block',
    margin: 0
  })
}

const cloneWithRepoData = options => (node, repoData) => {
  const {
    titleModule,
    subjectModule,
    leadModule,
    formatModule,
    paragraphModule,
    linkModule
  } = getSubmodules(options)

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

const timeFormat = swissTime.format('%d. %B %Y, %H:%M Uhr')

const styles = {
  commits: css({
    borderBottom: `1px dotted ${colors.divider}`,
    borderTop: `1px dotted ${colors.divider}`,
    listStyleType: 'none',
    margin: '5px 0 20px',
    maxHeight: '300px',
    overflow: 'scroll',
    padding: 0
  }),
  commit: css({
    borderBottom: `1px solid ${colors.divider}`,
    fontSize: '13px',
    padding: '5px 0',
    position: 'relative'
  }),
  date: css({
    display: 'block',
    fontSize: '11px'
  })
}

const query = gql`
  query tree($login: String!, $repository: String!, $filename: String!) {
    repository(owner: $login, name: $repository) {
      name
      owner {
        id

import MSSQuestion from './MSSQuestion'
import { HEADER_HEIGHT, HEADER_HEIGHT_MOBILE } from '../constants'
import withT from '../../lib/withT'
import withAuthorization from '../Auth/withAuthorization'
import { errorToString } from '../../lib/utils/errors'
import StatusError from '../StatusError'

const { Headline, P } = Interaction

const styles = {
  count: css({
    background: '#fff',
    zIndex: 10,
    position: 'sticky',
    padding: '10px 0',
    borderBottom: `0.5px solid ${colors.divider}`,
    minHeight: 55,
    top: HEADER_HEIGHT - 1,
    [mediaQueries.onlyS]: {
      top: HEADER_HEIGHT_MOBILE - 1
    }
  }),
  reset: css({
    textAlign: 'center',
    marginTop: 10
  }),
  strong: css({
    fontFamily: fontFamilies.sansSerifMedium
  }),
  error: css({
    color: colors.error,
    fontFamily: fontFamilies.sansSerifMedium

':visited': {
        color: colors.secondary
      },
      ':hover': {
        color: colors.primary
      }
    }
  }),
  title: css({
    fontFamily: fontFamilies.sansSerifMedium
  }),
  hr: css({
    marginTop: 20,
    marginBottom: 20,
    border: 'none',
    borderBottom: `1px solid ${colors.divider}`
  })
}

class Footer extends Component {
  componentDidMount () {
    const {me} = this.props
    track(['setUserId', me ? me.email : false])
  }
  componentWillReceiveProps ({me}) {
    if (
      me !== this.props.me &&
      !(
        me &&
        this.props.me &&
        me.email === this.props.me.email
      )

CommentBodyParagraph,
  Editorial,
  Interaction,
  HR,
  mediaQueries
} from '@project-r/styleguide'

import { PUBLIC_BASE_URL, CDN_FRONTEND_BASE_URL } from '../lib/constants'

const { P, A, Emphasis, Cursive, StrikeThrough } = Editorial

const styles = {
  table: css({
    width: '100%',
    '& th': {
      borderBottom: `1px solid ${colors.divider}`,
      padding: '0 40px 20px 0',
      textAlign: 'left'
    },
    '& td': {
      padding: '20px 10px 0 0',
      [mediaQueries.mUp]: {
        paddingRight: 40
      }
    }
  })
}

export default compose(
  withT,
  withRouter
)(({ router, t }) => {