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

[`.psds-card__title-container--size-${vars.sizes.medium}`]: {
    fontSize: core.type.fontSizeSmall,
    lineHeight: core.type.lineHeightTight
  },
  [`.psds-card__title-container--size-${vars.sizes.large}`]: {
    fontSize: core.type.fontSizeMedium,
    lineHeight: core.type.lineHeightStandard
  },
  // __title
  '.psds-card__title': {
    display: 'block',
    paddingTop: core.layout.spacingXSmall,
    fontWeight: core.type.fontWeightMedium,
    overflow: 'hidden'
  },
  [`.psds-card__title--theme-${themeNames.dark}`]: {
    color: core.colors.white
  },
  [`.psds-card__title--theme-${themeNames.light}`]: {
    color: core.colors.gray06
  },

  // __metadata
  '.psds-card__metadata': {
    display: 'flex',
    alignItems: 'center',
    fontWeight: core.type.fontWeightBook,
    lineHeight: core.type.lineHeightTight,
    maxWidth: '100%'
  },
  [`.psds-card__metadata--theme-${themeNames.dark}`]: {
    color: core.colors.gray02

[`${BASE_CLASSNAME}--visible`]: {
    '&:after': {
      visibility: 'visible',
      borderColor: core.colors.blue
    }
  },

  [`${BASE_CLASSNAME}--visible-on-focus`]: {
    '&:focus-within:after, &[focus-within]:after': {
      visibility: 'visible',
      borderColor: core.colors.blue
    }
  },

  [`${BASE_CLASSNAME}--gap-size-default${themeClasses[themeNames.dark]}`]: {
    '&:after': {
      top: '-4px',
      bottom: '-4px',
      left: '-4px',
      right: '-4px'
    }
  },
  [`${BASE_CLASSNAME}--gap-size-default${themeClasses[themeNames.light]}`]: {
    '&:after': {
      top: '-5px',
      bottom: '-5px',
      left: '-5px',
      right: '-5px'
    }
  },
  [`${BASE_CLASSNAME}--gap-size-small${themeClasses[themeNames.dark]}`]: {

import core from '@pluralsight/ps-design-system-core'
import { names as themeNames } from '@pluralsight/ps-design-system-theme/vars'

export const BASE_CLASSNAME = '.psds-halo'

export const themeClasses = {
  [themeNames.dark]: `.psds-theme--dark`,
  [themeNames.light]: `.psds-theme--light`
}

export default {
  [BASE_CLASSNAME]: {
    position: 'relative',
    display: 'inline-block',
    lineHeight: 0,
    flex: '1 1 100%',

    '&:after': {
      content: ' ',
      position: 'absolute',
      borderWidth: '3px',
      borderStyle: 'solid',
      borderColor: core.colors.blue,