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

}
  },

  [`.psds-table__cell.psds-theme--${themeNames.light}`]: {
    '& a': {
      '&:active, &:focus, &:hover': {
        color: core.colors.black
      }
    }
  },

  '.psds-table__cell--emphasis': {
    color: core.colors.white,
    fontWeight: core.type.fontWeightMedium
  },
  [`.psds-table__cell--emphasis.psds-theme--${themeNames.light}`]: {
    color: core.colors.black
  },
  [`.psds-table__cell--align-${vars.aligns.left}`]: {
    justifyContent: 'left',
    textAlign: 'left'
  },
  [`.psds-table__cell--align-${vars.aligns.right}`]: {
    justifyContent: 'flex-end',
    textAlign: 'right'
  },
  [`.psds-table__cell--align-${vars.aligns.center}`]: {
    justifyContent: 'center',
    textAlign: 'center'
  },

  // __column-header

padding: `${layout.spacingXLarge} ${layout.spacingLarge}`,
    textAlign: 'center',
    color: colors.white
  },
  [`.psds-error-page.psds-theme--${themeNames.light}`]: {
    color: colors.gray06
  },

  // __icon
  '.psds-error-page__icon': {
    margin: '0 auto',
    fill: 'currentColor',
    height: '128px',
    width: '128px'
  },
  [`.psds-error-page__icon.psds-theme--${themeNames.light}`]: {
    color: colors.gray04
  },

  // __code
  '.psds-error-page__code': {
    padding: `4px 0 ${layout.spacingSmall} 0`
  },

  // __search
  '.psds-error-page__search': {
    position: 'relative',
    display: 'inline-flex',
    alignItems: 'center',
    color: colors.gray02
  },
  [`.psds-error-page__search.psds-theme--${themeNames.light}`]: {

margin: '0 auto',
    padding: `${core.layout.spacingXLarge} ${core.layout.spacingLarge}`,
    textAlign: 'center',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    transition: `opacity ${core.motion.speedXFast} ${core.motion.speedNormal}`
  },
  '.psds-emptystate--hidden': {
    opacity: 0
  },
  ['.psds-emptystate' + themeClasses[themeDefaultName]]: {
    color: core.colors.white
  },
  ['.psds-emptystate' + themeClasses[themeNames.light]]: {
    color: core.colors.gray06
  },

  // __actions
  '.psds-emptystate__actions': {
    maxWidth: 500
  },

  // __caption
  '.psds-emptystate__caption': {
    marginBottom: core.layout.spacingLarge,
    fontSize: core.type.fontSizeSmall,
    letterSpacing: core.type.letterSpacingSmall,
    lineHeight: core.type.lineHeightStandard,
    maxWidth: 500
  },

alignItems: 'center',
    width: '100%',
    maxWidth: '100%',
  },

  // __icon
  '.psds-dropdown__icon': {
    position: 'absolute',
    left: 'auto',
    right: core.layout.spacingXSmall,
    display: 'flex',
    alignItems: 'center',
    color: core.colors.gray03,
    cursor: 'pointer'
  },
  [`.psds-dropdown__icon.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray03
  },
  [`.psds-dropdown__icon--appearance-${vars.appearances.subtle}`]: {
    color: core.colors.gray01
  },

  // __label
  '.psds-dropdown__label': {
    color: core.colors.bone,
    fontSize: core.type.fontSizeSmall,
    lineHeight: '16px',
    fontWeight: core.type.fontWeightMedium,
    paddingBottom: core.layout.spacingXSmall
  },
  [`.psds-dropdown__label.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray05

// __icon
  '.psds-date-picker__icon': {
    position: 'absolute',
    top: '0',
    left: 'auto',
    right: layout.spacingXSmall,
    display: 'flex',
    alignItems: 'center',
    height: '100%',
    color: colors.gray03,
    cursor: 'pointer',
    background: 'none',
    border: 'none'
  },
  [`.psds-date-picker__icon.psds-theme--${themeNames.light}`]: {
    color: colors.gray02
  },
  [`.psds-date-picker__icon--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray02
  },

  // __label
  '.psds-date-picker__label': {
    color: colors.bone,
    fontSize: type.fontSizeSmall,
    lineHeight: '16px',
    fontWeight: type.fontWeightMedium,
    paddingBottom: layout.spacingXSmall
  },
  [`.psds-date-picker__label.psds-theme--${themeNames.light}`]: {
    color: colors.gray05

const ClearButton = props => (
  <div>
    
      <button>}
        iconOnly
        size={Button.sizes.small}
        {...props}
      /&gt;
    
  </button></div>
)
ClearButton.propTypes = {

export default {
  [base]: {
    position: 'relative',
    display: 'inline-flex',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    borderRadius: '16px',
    fontWeight: core.type.fontWeightMedium,
    textDecoration: 'none',
    border: '1px solid transparent',
    color: core.colors.bone,
    backgroundColor: core.colors.gray03,
    transition: `background-color ${core.motion.speedXFast} linear, color ${core.motion.speedXFast} linear`
  },
  [base + '.psds-theme--' + themeNames.light]: {
    backgroundColor: core.colors.white,
    borderColor: core.colors.gray02,
    color: core.colors.gray06
  },

  [base + '--clickable']: {
    '&:hover, &:focus': {
      backgroundColor: core.colors.gray02,
      color: core.colors.black,
      cursor: 'pointer',
      outline: 'none'
    }
  },
  [base + '--clickable' + '.psds-theme--' + themeNames.light]: {
    '&:hover, &:focus': {
      backgroundColor: core.colors.bone,

lineHeight: type.lineHeightStandard,
    fontWeight: type.fontWeightBook,
    color: colors.gray03,
    padding: `${layout.spacingXSmall} ${layout.spacingMedium}`,
    border: 'none'
  },
  '.psds-text-area__field:focus': {
    outline: 'none'
  },
  [`.psds-text-area__field.psds-theme--${themeNames.light}:focus`]: {
    border: '1px solid transparent'
  },
  [`.psds-text-area__field--error.psds-theme--${themeNames.light}`]: {
    border: '1px solid transparent'
  },
  [`.psds-text-area__field.psds-theme--${themeNames.light}`]: {
    background: colors.white,
    border: `1px solid ${colors.gray02}`
  },

  '.psds-text-area__field-container': {
    position: 'relative',
    display: 'flex',
    alignItems: 'center'
  },

  '.psds-text-area__label': {
    width: '100%',
    color: colors.bone,
    fontSize: type.fontSizeSmall,
    lineHeight: '16px',
    fontWeight: type.fontWeightMedium,

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

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

export const sizeClasses = {
  [vars.sizes.small]: '.psds-emptystate--size-small',
  [vars.sizes.large]: '.psds-emptystate--size-large'
}

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

export default {
  '.psds-emptystate': {
    margin: '0 auto',
    padding: `${core.layout.spacingXLarge} ${core.layout.spacingLarge}`,
    textAlign: 'center',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    transition: `opacity ${core.motion.speedXFast} ${core.motion.speedNormal}`
  },
  '.psds-emptystate--hidden': {
    opacity: 0
  },

borderLeftColor: core.colors.gray03,
    '&[data-active]': {
      color: core.colors.white,
      borderLeftColor: core.colors.white
    }
  },
  '.pds-verticaltabs__tier2__header': {
    display: 'block',
    overflowWrap: 'break-word',
    width: '100%'
  },
  '.psds-verticaltabs__item__icon': {
    flex: 'none',
    marginRight: core.layout.spacingSmall
  },
  [`.psds-verticaltabs__item__icon.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray03,
    '&[data-active]': {
      color: core.colors.gray06
    }
  },
  [`.psds-verticaltabs__item__icon.psds-theme--${themeDefaultName}`]: {
    color: core.colors.gray01,
    '&[data-active]': {
      color: core.colors.bone
    }
  },
  '.psds-verticaltabs__item__link': {
    textDecoration: 'none',
    cursor: 'pointer',
    color: 'inherit',
    font: 'inherit'