How to use the @pluralsight/ps-design-system-core.colors.white function in @pluralsight/ps-design-system-core

},

  // __field-container
  '.psds-date-picker__field-container': {
    position: 'relative',
    display: 'flex',
    borderRadius: '2px',
    alignItems: 'center',
    width: '100%',
    height: '40px',
    minWidth: `calc(192px + ${iconWidths.medium} + ${layout.spacingXSmall})`,
    padding: `0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall}) 0 ${layout.spacingMedium}`,
    background: colors.bone
  },
  [`.psds-date-picker__field-container.psds-theme--${themeNames.light}`]: {
    background: colors.white,
    border: `1px solid ${colors.gray02}`
  },
  [`.psds-date-picker__field-container--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01,
    background: colors.gray06,
    border: `1px solid ${colors.gray03}`
  },

  // __icon
  '.psds-date-picker__icon': {
    position: 'absolute',
    top: '0',
    left: 'auto',
    right: layout.spacingXSmall,
    display: 'flex',
    alignItems: 'center',

import {colors, layout, type} from '@pluralsight/ps-design-system-core'
import { names as themeNames } from '@pluralsight/ps-design-system-theme'
import { widths as iconWidths } from '@pluralsight/ps-design-system-icon'

export default {
  '.psds-error-page': {
    maxWidth: '500px',
    margin: '0 auto',
    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}`]: {
    background: colors.white,
    color: colors.gray03
  },
  '.psds-error-page__search__icon': {
    position: 'absolute',
    left: layout.spacingXSmall,
    width: iconWidths.medium,
    height: iconWidths.medium,
    fill: colors.gray02
  },
  '.psds-error-page__search__input': {
    position: 'relative',
    height: '40px',
    padding: `0 ${layout.spacingXSmall} 0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall})`,
    color: colors.gray02,
    fontSize: type.fontSizeSmall,
    lineHeight: type.lineHeightStandard,

'.psds-date-picker__calendar__day': {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    ...dayDimensions,
    borderRadius: '50%',
    lineHeight: '1em',
    fontWeight: type.fontWeightMedium,
    background: 'none',
    cursor: 'pointer',

    '&:hover': { border: `3px solid ${colors.blue}` }
  },
  '.psds-date-picker__calendar__day--selected': {
    background: colors.blue,
    color: colors.white,

    '&:hover': { border: '3px solid transparent' }
  },

  // __calendar__skipped-day
  '.psds-date-picker__calendar__skipped-day': dayDimensions,

  // __calendar__switcher
  '.psds-date-picker__calendar__switcher': {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: layout.spacingMedium
  },

  // __calendar__switcher__month

'.psds-text-input__field-input': {
    width: '100%',
    background: 'none',
    border: 'none',
    color: 'inherit',
    fontSize: type.fontSizeSmall,
    lineHeight: type.lineHeightStandard,
    outline: 'none',
    padding: 0,

    '&:focus': {
      outline: 'none'
    }
  },
  [`.psds-text-input__field.psds-theme--${themeNames.light}`]: {
    background: colors.white,
    border: `1px solid ${colors.gray02}`,

    '&:focus': {
      border: '1px solid transparent'
    }
  },

  [`.psds-text-input__field--error.psds-theme--${themeNames.light}`]: {
    border: '1px solid transparent'
  },
  [`.psds-text-input__field--appearance-${vars.appearances.subtle}`]: {
    color: colors.gray01,
    background: colors.gray06,
    border: `1px solid ${colors.gray03}`
  },
  [`.psds-text-input__field--appearance-${vars.appearances.subtle}.psds-theme--${themeNames.light}`]: {

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,
    paddingBottom: layout.spacingXSmall

'.psds-date-picker__calendar': ({ slide }) => ({
    position: 'relative',
    zIndex: '0',
    width: '286px',
    maxHeight: '352px',
    background: colors.white,
    color: colors.gray03,
    borderRadius: '2px',
    padding: `${layout.spacingMedium} ${layout.spacingLarge}`,
    fontSize: type.fontSizeXSmall,
    fontWeight: type.fontWeightMedium,
    boxShadow: `0 2px 4px ${transparentize(0.5, colors.black)}`,
    opacity: 0,
    transform: `translateY(calc(-1 * ${layout.spacingXSmall}))`,
    animation: `${slide || 'psds-date-picker__calendar__keyframes__slide'} ${
      motion.speedNormal
    } forwards`
  }),