How to use the @pluralsight/ps-design-system-theme/react.names.light function in @pluralsight/ps-design-system-theme

import core from '@pluralsight/ps-design-system-core'
import {
  defaultName as themeDefaultName,
  names as themeNames
} from '@pluralsight/ps-design-system-theme/react'
import { transparentize } from '@pluralsight/ps-design-system-util/color'

import * as vars from '../vars/index.js'

export default {
  [`.psds-drawer.psds-theme--${themeNames.light}`]: {
    borderTop: `1px solid ${core.colors.gray01}`
  },
  [`.psds-drawer.psds-theme--${themeDefaultName}`]: {
    borderTop: `1px solid ${core.colors.gray04}`
  },

  // __base
  [`.psds-drawer__base`]: {
    position: 'relative',
    paddingRight: vars.toggleAreaWidth,
    cursor: 'pointer',
    transition: `background ${core.motion.speedNormal}`,

    [`&:hover`]: {
      background: transparentize(0.9, core.colors.gray02)
    }

fill: 'transparent',
    strokeWidth: `${vars.style.strokeWidth}px`,
    transition: 'stroke-dashoffset 1s'
  },
  [`.psds-circularprogress__fg.psds-theme--${themeNames.light}`]: {
    stroke: core.colors.gray04
  },
  [`.psds-circularprogress__fg.psds-theme--${themeDefaultName}`]: {
    stroke: core.colors.white
  },
  // __bg
  [`.psds-circularprogress__bg`]: {
    fill: 'transparent',
    strokeWidth: `${vars.style.strokeWidth}px`
  },
  [`.psds-circularprogress__bg.psds-theme--${themeNames.light}`]: {
    stroke: transparentize(0.8, core.colors.gray04)
  },
  [`.psds-circularprogress__bg.psds-theme--${themeDefaultName}`]: {
    stroke: core.colors.gray04
  }
}

decorator: ({ themeName }) => {
    const base = css({
      overflow: 'auto',
      width: '100%',
      height: '100vh',
      transition: `background ${core.motion.speedNormal}`,
      backgroundSize: 'cover',
      background: 'transparent'
    })

    const theme = css(
      themeName === names.dark && { background: core.colors.gray06 },
      themeName === names.light && { background: core.colors.bone }
    )

    return compose(
      base,
      theme
    )
  }
}

},
  [`.psds-text__heading.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray06
  },
  [`.psds-text__heading.psds-theme--${themeDefaultName}`]: {
    color: core.colors.white
  },
  [`.psds-text__heading--size-${vars.headingSizes.smallCaps}`]: {
    textTransform: 'uppercase',
    fontSize: core.type.fontSizeXSmall,
    letterSpacing: core.type.letterSpacingXSmall,
    lineHeight: core.type.lineHeighTight,
    fontWeight: core.type.fontWeightMedium
  },
  [`.psds-text__heading--size-${vars.headingSizes.smallCaps}.psds-theme--${
    themeNames.light
  }`]: {
    color: core.colors.gray03
  },
  [`.psds-text__heading--size-${
    vars.headingSizes.smallCaps
  }.psds-theme--${themeDefaultName}`]: {
    color: core.colors.gray02
  },
  [`.psds-text__heading--size-${vars.headingSizes.medium}`]: {
    fontSize: core.type.fontSizeMedium,
    letterSpacing: core.type.letterSpacingMedium,
    lineHeight: core.type.lineHeightStandard,
    fontWeight: core.type.fontWeightMedium
  },
  [`.psds-text__heading--size-${vars.headingSizes.large}`]: {
    fontSize: core.type.fontSizeLarge,