How to use the gatsby-theme-apollo-core/src/utils/colors.colors.primary function in gatsby-theme-apollo-core

outline: 'none',
  h6: {
    margin: 0,
    fontWeight: 'bold',
    ...smallCaps,
    color: 'inherit',
  },
  svg: {
    display: 'block',
    width: iconSize,
    height: iconSize,
    marginLeft: 'auto',
    fill: 'currentColor',
  },
  '&.active': {
    color: colors.primary,
  },
}

const Container = styled.div(props => ({
  borderTop: !props.first && `1px solid ${colors.divider}`,
  marginTop: props.first && headingPadding / -2,
}))

const StyledButton = styled.button(headingStyles, {
  ':not([disabled])': {
    cursor: 'pointer',
    ':hover': {
      opacity: colors.hoverOpacity,
    },
  },
})

'gatsby-remark-autolink-headers',
    {
      resolve: 'gatsby-remark-copy-linked-files',
      options: {
        ignoreFileExtensions: []
      }
    },
    {
      resolve: 'gatsby-remark-mermaid',
      options: {
        mermaidOptions: {
          themeCSS: `
            .node rect,
            .node circle {
              stroke-width: 2px;
              stroke: ${colors.primary};
              fill: ${colors.background};
            }
            .node.secondary rect,
            .node.secondary circle,
            .node.tertiary rect,
            .node.tertiary circle {
              fill: white;
            }
            .node.secondary rect,
            .node.secondary circle {
              stroke: ${colors.secondary};
            }
            .node.tertiary rect,
            .node.tertiary circle {
              stroke: ${colors.tertiaryLight};
            }