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

flex: 1,
    flexDirection: 'column',
    alignSelf: 'center',
    minWidth: 0
  },

  // __title
  '.psds-row__title': {
    display: 'block',
    fontWeight: core.type.fontWeightMedium,
    textAlign: 'left'
  },
  [`.psds-row__title.psds-theme--${themeDefaultName}`]: {
    color: core.colors.white
  },
  [`.psds-row__title.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray06
  },
  [`.psds-row__title--size-${vars.sizes.small}`]: {
    fontSize: core.type.fontSizeSmall,
    lineHeight: core.type.lineHeightTight
  },
  [`.psds-row__title--size-${vars.sizes.medium}`]: {
    fontSize: core.type.fontSizeMedium,
    lineHeight: core.type.lineHeightStandard
  },

  // __image-link
  '.psds-row__image-link': {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',

color: 'inherit',
      cursor: 'pointer',
      textDecoration: 'none',

      '&:hover, &:active': {
        textDecoration: 'underline',
        transition: `all ${core.motion.speedNormal}`
      }
    }
  },
  [`.psds-card__text-link--theme-${themeNames.dark}`]: {
    '&:hover, &:active': {
      color: core.colors.white
    }
  },
  [`.psds-card__text-link--theme-${themeNames.light}`]: {
    '&:hover, &:active': {
      color: core.colors.gray03
    }
  },

  // __overlays
  '.psds-card__overlays': {
    position: 'relative',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    background: core.colors.gray05,

    // TODO: target child
    '&:hover div, &:active div': {
      opacity: 1

background: `linear-gradient(to left, transparent, ${transparentize(
      0.1,
      core.colors.gray05
    )} 50%)`,
    paddingLeft: core.layout.spacingMedium
  },
  '.psds-tab__overflow-button--right': {
    right: 0,
    justifyContent: 'flex-end',
    background: `linear-gradient(to right, transparent, ${transparentize(
      0.1,
      core.colors.gray05
    )} 50%)`,
    paddingRight: core.layout.spacingMedium
  },
  [`.psds-tab__overflow-button.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray06,

    // __icon
    '&:hover > div': {
      background: core.colors.gray01
    }
  },
  [`.psds-tab__overflow-button--left.psds-theme--${themeNames.light}`]: {
    background: `linear-gradient(to left, transparent, ${transparentize(
      0.1,
      core.colors.white
    )} 50%)`
  },
  [`.psds-tab__overflow-button--right.psds-theme--${themeNames.light}`]: {
    background: `linear-gradient(to right, transparent, ${transparentize(
      0.1,

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

export default {
  '.psds-linearprogress__bg': {
    minWidth: '96px',
    width: '100%',
    height: '8px',
    borderRadius: '4px'
  },
  [`.psds-linearprogress__bg.psds-theme--${themeDefaultName}`]: {
    backgroundColor: transparentize(0.8, core.colors.bone)
  },
  [`.psds-linearprogress__bg.psds-theme--${themeNames.light}`]: {
    backgroundColor: core.colors.gray01
  },
  '.psds-linearprogress__fg': {
    height: '8px',
    borderRadius: '4px',
    transition: `width ${core.motion.speedNormal} linear`
  },
  [`.psds-linearprogress__fg.psds-theme--${themeDefaultName}`]: {
    backgroundColor: core.colors.white
  },
  [`.psds-linearprogress__fg.psds-theme--${themeNames.light}`]: {
    backgroundColor: core.colors.gray04
  },
  '.psds-linearprogress__fg--complete': {
    backgroundColor: core.colors.green
  }

[`${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]}`]: {
    '&:after': {
      top: '-4px',
      bottom: '-4px',
      left: '-4px',
      right: '-4px'
    }
  },
  [`${BASE_CLASSNAME}--gap-size-small${themeClasses[themeNames.light]}`]: {

right: '-7px',
    bottom: '-7px'
  },
  '.psds-checkbox__square:focus:before': {
    background: core.colors.gray05
  },
  '.psds-checkbox__square:focus:after': {
    background: core.colors.blue
  },
  [`.psds-checkbox__square.psds-theme--${themeNames.light}:focus:before`]: {
    background: core.colors.bone
  },
  '.psds-checkbox__square--error:before': {
    background: core.colors.gray05
  },
  [`.psds-checkbox__square--error.psds-theme--${themeNames.light}:before`]: {
    background: core.colors.bone
  },
  '.psds-checkbox__square--error:after': {
    background: core.colors.red
  },
  '.psds-checkbox__square--active': {
    background: core.colors.blue,
    border: 'none'
  },
  '.psds-checkbox__square--active:focus:before, .psds-checkbox__square--active--error:before': {
    top: '-1px',
    left: '-1px',
    right: '-1px',
    bottom: '-1px'
  },
  [`.psds-checkbox__square--active.psds-theme--${themeNames.light}:focus:before, .psds-checkbox__square--active--error.psds-theme--${themeNames.light}:before`]: {

borderLeft: `1px solid ${core.colors.gray01}`
  },
  '.psds-datawell__label': {
    margin: 0,
    fontSize: core.type.fontSizeXSmall,
    lineHeight: '16px'
  },
  '.psds-datawell__data': {
    fontWeight: core.type.fontWeightMedium,
    fontSize: core.type.fontSizeXXLarge,
    lineHeight: core.type.lineHeightHuge,
    color: core.colors.white,
    marginBottom: core.layout.spacingMedium,
    wordWrap: 'break-word'
  },
  [`.psds-datawell__data.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray06
  },
  '.psds-datawell__sublabel': {
    fontSize: core.type.fontSizeXSmall,
    lineHeight: '16px',
    color: core.colors.gray02
  },
  [`.psds-datawell__sublabel.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray03
  }
}

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,
      pointerEvents: 'none',