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

import { IconExpandList } from '@apollo/space-kit/icons/IconExpandList'
import { Link, withPrefix } from 'gatsby'
import { colors } from 'gatsby-theme-apollo-core/src/utils/colors'
import { size } from 'polished'
import { smallCaps } from 'gatsby-theme-apollo-core/src/utils/typography'
import wpgqlColors from '../../../utils/colors'

const StyledList = styled.ul({
  marginLeft: 0,
  listStyle: 'none',
})

const listItemStyles = {
  color: 'inherit',
  ':hover': {
    opacity: colors.hoverOpacity,
  },
}

const StyledListItem = styled.li({
  fontSize: '1rem',
  lineHeight: 'inherit',
  a: {
    ...listItemStyles,
    textDecoration: 'none',
    '&.active': {
      color: wpgqlColors.primary,
      pointerEvents: 'none',
    },
  },
})

},
  '&.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,
    },
  },
})

const StyledLink = styled(Link)(headingStyles, {
  textDecoration: 'none',
})

export default function Category(props) {
  const Icon = props.expanded ? IconArrowUp : IconArrowDown
  const contents = (
    
      <h6>{props.title}</h6>