How to use the gatsby-theme-apollo-core.colors.divider function in gatsby-theme-apollo-core

function getStylesForVariant(variant, color) {
  const isBranded = color === 'branded';
  switch (variant) {
    case 'hidden':
    case 'flat': {
      const backgroundColor = [
        colors.background,
        colors.background2,
        colors.divider
      ];
      if (variant === 'hidden') {
        backgroundColor.unshift('transparent');
      }

      return {
        color: isBranded ? colors.primary : colors.text2,
        backgroundColor: backgroundColor[0],
        ':active': {
          backgroundColor: backgroundColor[2]
        },
        ':not(:active)': {
          ':focus': {
            boxShadow: getButtonShadow('focused')
          },
          ':hover': {

import { ReactComponent as SpectrumLogo } from 'gatsby-theme-apollo-docs/src/assets/logos/spectrum.svg'
import { withPrefix } from 'gatsby'

const Container = styled.div({
  display: 'flex',
  alignItems: 'flex-start',
  maxWidth: 1200,
})

const MainContent = styled.div({
  flexGrow: 1,
  width: 0,
  maxWidth: '100ch',
})

const tableBorder = `1px solid ${colors.divider}`
const table = {
  marginBottom: '1.45rem',
  border: tableBorder,
  borderSpacing: 0,
  borderRadius: 4,
  [['th', 'td']]: {
    padding: 16,
    borderBottom: tableBorder,
  },
  'tbody tr:last-child td': {
    border: 0,
  },
  th: {
    ...smallCaps,
    fontSize: 13,
    fontWeight: 'normal',

import PropTypes from 'prop-types';
import React, {Component, Fragment, createContext} from 'react';
import extend from 'lodash/extend';
import partition from 'lodash/partition';
import remark from 'remark';
import remark2react from 'remark-react';
import styled from '@emotion/styled';
import withProps from 'recompose/withProps';
import {colors, smallCaps} from 'gatsby-theme-apollo-core';

const Container = styled.div({
  border: `1px solid ${colors.divider}`,
  borderRadius: 4,
  margin: '1.5em 0',
  overflow: 'hidden'
});

const Header = styled.div({
  padding: '1.25rem',
  backgroundColor: colors.background
});

const MainHeading = styled.h4({
  marginBottom: 0
});

const StyledCode = styled.code({
  padding: '0 !important',

}
  }

  return <a>;
}

CustomLink.propTypes = {
  href: PropTypes.string
};

const TableWrapper = styled.div({
  overflow: 'auto',
  marginBottom: '1.45rem'
});

const tableBorder = `1px solid ${colors.divider}`;
const StyledTable = styled.table({
  border: tableBorder,
  borderSpacing: 0,
  borderRadius: 4,
  [['th', 'td']]: {
    padding: 16,
    borderBottom: tableBorder
  },
  'tbody tr:last-child td': {
    border: 0
  },
  th: {
    ...smallCaps,
    fontSize: 13,
    fontWeight: 'normal',
    color: colors.text2,</a>

borderRadius: 4,
  border: `1px solid ${colors.divider}`,
  boxShadow,
  backgroundColor: 'white',
  position: 'absolute',
  top: '100%',
  left: '50%',
  transform: 'translateX(-50%)'
});

const SubpagesTriangle = styled.div(
  triangle({
    pointingDirection: 'top',
    width: 16,
    height: 8,
    foregroundColor: colors.divider
  }),
  {
    position: 'absolute',
    bottom: 0,
    left: '50%',
    transform: 'translateX(-50%)'
  }
);

const SubpagesTriangleInner = styled(SubpagesTriangle)({
  borderBottomColor: 'white',
  bottom: -2
});

const subpageElements = [Subpages, SubpagesTriangle, SubpagesTriangleInner];
const Container = styled.div(props => ({

import PropTypes from 'prop-types';
import React, {Fragment} from 'react';
import styled from '@emotion/styled';
import {boxShadow} from '../search';
import {colors} from 'gatsby-theme-apollo-core';
import {triangle} from 'polished';

const Subpages = styled.div({
  padding: '20px 24px',
  borderRadius: 4,
  border: `1px solid ${colors.divider}`,
  boxShadow,
  backgroundColor: 'white',
  position: 'absolute',
  top: '100%',
  left: '50%',
  transform: 'translateX(-50%)'
});

const SubpagesTriangle = styled.div(
  triangle({
    pointingDirection: 'top',
    width: 16,
    height: 8,
    foregroundColor: colors.divider
  }),
  {

display: 'none'
      },
      '[class^=ds-dataset-]': {
        maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 32px)`,
        padding: 0,
        border,
        borderRadius: 'inherit'
      },
      '.ds-suggestions': {
        marginTop: 0
      },
      '.ds-suggestion': {
        padding: '20px 32px',
        borderBottom: `1px solid ${colors.divider}`,
        '&.ds-cursor': {
          backgroundColor: transparentize(0.5, colors.divider)
        }
      }
    },
    '.algolia-docsearch-suggestion': {
      padding: 0,
      color: 'inherit',
      background: 'none',
      textDecoration: 'none',
      [['&--wrapper', '&--subcategory-column', '&--content']]: {
        width: 'auto',
        float: 'none'
      },
      '&--wrapper': {
        paddingTop: 0
      },
      '&--category-header': {

boxShadow,
      '&::before': {
        display: 'none'
      },
      '[class^=ds-dataset-]': {
        maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 32px)`,
        padding: 0,
        border,
        borderRadius: 'inherit'
      },
      '.ds-suggestions': {
        marginTop: 0
      },
      '.ds-suggestion': {
        padding: '20px 32px',
        borderBottom: `1px solid ${colors.divider}`,
        '&.ds-cursor': {
          backgroundColor: transparentize(0.5, colors.divider)
        }
      }
    },
    '.algolia-docsearch-suggestion': {
      padding: 0,
      color: 'inherit',
      background: 'none',
      textDecoration: 'none',
      [['&--wrapper', '&--subcategory-column', '&--content']]: {
        width: 'auto',
        float: 'none'
      },
      '&--wrapper': {
        paddingTop: 0

} from './multi-code-block';
import {Select} from './select';
import {colors} from 'gatsby-theme-apollo-core';

const Container = styled.div({
  marginBottom: '1.45rem',
  border: `1px solid ${colors.divider}`,
  borderRadius: 4
});

const Header = styled.div({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'flex-end',
  padding: 10,
  borderBottom: `1px solid ${colors.divider}`
});

const StyledSelect = styled(Select)({
  marginRight: 8
});

const InnerContainer = styled.div({
  padding: 15,
  backgroundColor: colors.background,
  overflow: 'auto'
});

export default function CodeBlock(props) {
  const code = useRef();
  const [copied, copyToClipboard] = useCopyToClipboard();