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

['.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
  },
  ['.psds-emptystate__caption' + themeClasses[themeDefaultName]]: {
    color: core.colors.gray01
  },
  ['.psds-emptystate__caption' + themeClasses[themeNames.light]]: {
    color: core.colors.gray04
  },

  // __heading,
  '.psds-emptystate__heading': {
    marginBottom: core.layout.spacingLarge,
    letterSpacing: core.type.letterSpacingLarge,
    fontWeight: core.type.fontWeightBook,

},

  // __tag
  '.psds-card__tag': {
    display: 'flex',
    alignItems: 'center',
    position: 'absolute',
    top: core.layout.spacingSmall,
    left: 0,
    padding: `${core.layout.spacingXXSmall} ${core.layout.spacingXSmall}`,
    background: transparentize(0.1, core.colors.white),
    borderRadius: '0 2px 2px 0',
    color: core.colors.gray06,
    textTransform: 'uppercase',
    fontSize: core.type.fontSizeXSmall,
    fontWeight: core.type.fontWeightBold,
    lineHeight: '16px',
    boxShadow: `0 1px 4px 0 ${transparentize(0.5, core.colors.black)}`,
    maxWidth: '75%'
  },

  // __tag__icon
  '.psds-card__tag__icon': {
    display: 'flex',
    alignItems: 'center',
    marginRight: core.layout.spacingXSmall
  },
  // __tag__text
  '.psds-card__tag__text': {
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap'

width: '100%',
    fill: core.colors.white
  },

  // __input
  '.psds-checkbox__input': {
    display: 'none'
  },

  // __label
  '.psds-checkbox__label': {
    marginLeft: core.layout.spacingSmall,
    color: core.colors.bone,
    fontSize: core.type.fontSizeSmall,
    lineHeight: core.type.lineHeightStandard,
    fontWeight: core.type.fontWeightMedium
  },
  [`.psds-checkbox__label.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray04
  }
}

.option {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: ${cssVars.innerHeight};
  line-height: calc(${cssVars.innerHeight} - 1px);
  font-size: 10px; /* TODO: size not in design system, ok? */
  color: ${core.colors.white};
  padding: 0 13px;
  border: none;
  background: none;
  border-radius: calc(${cssVars.innerHeight} / 2);
  cursor: pointer;
  transition: all .4s;
  font-weight: ${core.type.fontWeightMedium};
}
`

class List extends React.Component {
  constructor(props) {
    super(props)
    this.state = { selectedOption: {} }
    this.handleSelect = this.handleSelect.bind(this)
  }
  setSelectedOption(node) {
    this.setState({
      selectedOption: node
    })
  }
  handleSelect(value, node) {
    this.setSelectedOption(node)

onMouseEnter={_ => setHovered(true)}
        onMouseOut={_ => setHovered(false)}
      >
        Hover me
      
    
  )
}`}

      <style>{`
        .examples {
          display: flex;
          padding: ${core.layout.spacingLarge};
          padding-bottom: 88px;
          color: ${core.colors.gray02};
          font-weight: ${core.type.fontWeightMedium};
          background: ${core.colors.gray06};
        }
        .example {
          margin-right: calc(${core.layout.spacingLarge} * 2);
        }
        .text {
          display: inline-block;
        }
        .example:last-child {
          margin-right: 0;
        }
      `}</style>
    
  )
}

borderStyle: 'solid'
  },
  [`.psds-verticaltabs__divider.psds-theme--${themeNames.light}`]: {
    borderColor: core.colors.gray01
  },
  [`.psds-verticaltabs__divider.psds-theme--${themeDefaultName}`]: {
    borderColor: core.colors.gray03
  },
  '.psds-verticaltabs__item': {
    boxSizing: 'border-box',
    display: 'flex',
    alignItems: 'center'
  },
  '.psds-verticaltabs__tier1': {
    lineHeight: '24px',
    fontSize: core.type.fontSizeSmall,
    fontWeight: core.type.fontWeightMedium,
    paddingLeft: '20px',
    paddingRight: '24px',
    borderLeftWidth: '4px',
    borderLeftStyle: 'solid',
    borderLeftColor: 'transparent',
    height: '40px'
  },
  [`.psds-verticaltabs__tier1.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray04,
    '&[data-active]': {
      color: core.colors.gray06,
      borderLeftColor: core.colors.gray04
    }
  },
  [`.psds-verticaltabs__tier1.psds-theme--${themeDefaultName}`]: {

height: 'calc(100% - 4px)',
    width: 'calc(100% - 4px)',
    margin: '2px',
    borderRadius: '50%',
    background: core.colors.blue
  },

  '.psds-radio-button__input': {
    display: 'none'
  },

  '.psds-radio-button__label': {
    color: core.colors.bone,
    fontSize: core.type.fontSizeSmall,
    lineHeight: core.type.lineHeightStandard,
    fontWeight: core.type.fontWeightMedium
  },
  [`.psds-radio-button__label.psds-theme--${themeNames.light}`]: {
    color: core.colors.gray04
  }
}

display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          padding: 72px 0;
        }
        .box:hover {
          text-decoration: none !important;
        }
        .text {
          margin: 0;
        }
        .textCompany {
          display: block;
          letter-spacing: 0.15em;
          font-size: ${core.type.fontSizeXSmall};
          font-weight: ${core.type.fontWeightMedium};
          color: ${core.colors.black};
          font-family: ${core.type.fontFamily};
          text-transform: uppercase;
        }
        .textTitle {
          display: block;
          font-size: 8px;
          color: ${core.colors.gray03};
          font-weight: ${core.type.fontWeightMedium};
          text-transform: uppercase;
        }
      }
    `}
  
)

Task.Title = props => (
  <div>
    {props.children}
    <style>{`
      .title {
        margin: 0 0 ${core.layout.spacingSmall} 0;
        font-size: ${core.type.fontSizeMedium};
        font-weight: ${core.type.fontWeightMedium};
      }
    `}</style>
  </div>
)
Task.Title.propTypes = {

const Box = React.forwardRef((props, forwardedRef) => {
  const ref = React.useRef()
  React.useImperativeHandle(forwardedRef, () => ref.current)

  const className = css({
    alignItems: 'center',
    border: `4px dashed ${core.colors.pink}`,
    color: core.colors.pink,
    display: 'flex',
    fontSize: core.type.fontSizeMedium,
    fontWeight: core.type.fontWeightBold,
    height: '200px',
    justifyContent: 'center',
    textAlign: 'center',
    width: '200px'
  })

  return <div>
})
</div>