How to use the @primer/components.themeGet function in @primer/components

import {themeGet} from '@primer/components'
import styled from 'styled-components'
import {space, fontWeight, fontSize} from 'styled-system'

const NavSubitem = styled.a`
  display: block;
  font-size: ${themeGet('fontSizes.1')}px;
  padding: ${themeGet('space.2')}px ${themeGet('space.4')}px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
//   color: ${themeGet('colors.blue.5')};

  &:hover {
    background-color: ${themeGet('colors.gray.1')};
  }

  &.active {
    color: ${themeGet('colors.blue.5')};
    // box-shadow: inset 3px 0 ${themeGet('colors.blue.5')};
  }

  ${space};
  ${fontWeight};
  ${fontSize};
`

export default NavSubitem

// This code needs to run at build-time so it can access the file system.
const repositoryUrl = preval`
  const readPkgUp = require('read-pkg-up')
  const getPkgRepo = require('get-pkg-repo')
  try {
    const repo = getPkgRepo(readPkgUp.sync().package)
    module.exports = \`https://github.com/\${repo.user}/\${repo.project}\`
  } catch (error) {
    module.exports = ''
  }
`

const NavLink = styled(Link)`
  &.active {
    font-weight: ${themeGet('fontWeights.bold')};
    color: ${themeGet('colors.gray.8')};
  }
`

function NavItems({items}) {
  return (
    <>
      {items.map(item => (

import {themeGet} from '@primer/components'
import styled from 'styled-components'
import {space, fontWeight, fontSize} from 'styled-system'

const NavSubitem = styled.a`
  display: block;
  font-size: ${themeGet('fontSizes.1')}px;
  padding: ${themeGet('space.2')}px ${themeGet('space.4')}px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
//   color: ${themeGet('colors.blue.5')};

  &:hover {
    background-color: ${themeGet('colors.gray.1')};
  }

  &.active {
    color: ${themeGet('colors.blue.5')};
    // box-shadow: inset 3px 0 ${themeGet('colors.blue.5')};
  }

  ${space};
  ${fontWeight};
  ${fontSize};
`

export default NavSubitem

// Extends Link from primer/components to make color primitives available. Ideally I'd use defaultProps here but because we use !important on utilities the theme colors won't override. We could probably add a function to handle this.

import {Link, themeGet} from '@primer/components'
import {display} from 'styled-system'
import styled from 'styled-components'

const LinkDark = styled(Link)`
  color: ${themeGet('colors.black')} !important;
  ${display};
  &:hover {
    color: ${themeGet('colors.gray.8')};
  }
`

export default LinkDark

import {themeGet} from '@primer/components'
import styled from 'styled-components'
import {space, fontWeight, fontSize} from 'styled-system'

const NavSubitem = styled.a`
  display: block;
  font-size: ${themeGet('fontSizes.1')}px;
  padding: ${themeGet('space.2')}px ${themeGet('space.4')}px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
//   color: ${themeGet('colors.blue.5')};

  &:hover {
    background-color: ${themeGet('colors.gray.1')};
  }

  &.active {
    color: ${themeGet('colors.blue.5')};
    // box-shadow: inset 3px 0 ${themeGet('colors.blue.5')};
  }

  ${space};
  ${fontWeight};

import {themeGet} from '@primer/components'
import styled from 'styled-components'
import {space, fontWeight} from 'styled-system'

const NavItem = styled.a`
  display: block;
  padding-top: ${themeGet('space.2')}px;
  padding-bottom: ${themeGet('space.2')}px;
  padding-left: calc(${props => props.depth * 16}px + ${themeGet('space.4')}px);
  padding-right: ${themeGet('space.4')}px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;

  &:hover {
    background-color: ${themeGet('colors.gray.2')};
  }

  &.active {
    color: ${themeGet('colors.blue.5')};
    box-shadow: inset 3px 0 ${themeGet('colors.blue.5')};
  }

  ${space};
  ${fontWeight};

const A = styled(Box)`
  position: relative;
  display: inline-block;
  clip-path: url("#clip-${props => props.shape}");
  &:after {
    content: '';
    transition: opacity 0.8s ease;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top left, ${themeGet('colors.blue.4')}, transparent),
    radial-gradient(ellipse at bottom right, ${themeGet('colors.orange.4')}, transparent),
    linear-gradient(to right, ${themeGet('colors.orange.5')} 50%, transparent),
    linear-gradient(to left, ${themeGet('colors.blue.6')} 50%, transparent);
    mix-blend-mode: multiply;
    opacity: 0;
  }
  &:hover:after {
    opacity: 1;
  }
`

const ShapeOutline = styled(Link)`
  padding: 2px;
  position: relative;
  background: transparent !important;
  display: block;
  &:before {
    content: '';
    clip-path: url("#clip-${props => props.shape}");

`

const A = styled(Box)`
  position: relative;
  display: inline-block;
  clip-path: url("#clip-${props => props.shape}");
  &:after {
    content: '';
    transition: opacity 0.8s ease;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top left, ${themeGet('colors.blue.4')}, transparent),
    radial-gradient(ellipse at bottom right, ${themeGet('colors.orange.4')}, transparent),
    linear-gradient(to right, ${themeGet('colors.orange.5')} 50%, transparent),
    linear-gradient(to left, ${themeGet('colors.blue.6')} 50%, transparent);
    mix-blend-mode: multiply;
    opacity: 0;
  }
  &:hover:after {
    opacity: 1;
  }
`

const ShapeOutline = styled(Link)`
  padding: 2px;
  position: relative;
  background: transparent !important;
  display: block;
  &:before {

    color: ${props => themeGet(props.selected ? 'colors.blue.2' : 'colors.blue.3')};
    text-decoration: ${props => (props.selected ? 'none' : 'underline')};

)}
    
  )
}

export const NavDropdownItem = styled.a`
  display: block;
  padding: ${themeGet('space.2')} ${themeGet('space.3')};
  color: inherit;
  text-decoration: none;

  &:hover {
    color: ${themeGet('colors.white')};
    background-color: ${themeGet('colors.blue.5')};
    text-decoration: none;
  }
`

export default NavDropdown