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

const Bar = props => (
  <div>
    <style>{`
      .bar {
        margin: ${core.layout.spacingXSmall} 0;
        height: 5px;
        background: ${core.colors.gradientHorz};
      }
    `}</style>
  </div>
)

onMouseOut={this.handleMouseOut}
      >
        {item.title}
        <div>
          
          
          
        </div>
        <style>{`
          .task {
            text-decoration: none;
            color: inherit;
            display: block;
            width: 100%;
            margin: calc(${core.layout.spacingMedium} / 2);
            background: ${core.colors.bone};
            padding: ${core.layout.spacingMedium};
            border-radius: 12px;
            border: 2px solid transparent;
            transition: all ${core.motion.speedNormal};
            overflow: hidden;
          }
          .task:focus,
          .task:hover {
            border: 2px solid ${core.colors.gray01};
            outline: none;
            background: ${core.colors.white};
          }
          .meta {
            display: flex;
          }
          @media screen and (min-width: 1000px) {</style>

}
          .value,
          .example {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
          }
          .value {
            background: ${core.colors.bone};
            border-radius: 12px 0 0 12px;
            font-size: ${core.type.fontSizeLarge};
            color: ${core.colors.gray04};
          }
          .example {
            background: ${core.colors.gray04};
            border-radius: 0 12px 12px 0;
            padding: 0 ${core.layout.spacingMedium};
          }
          .exampleNumber {
            padding-left: ${core.layout.spacingSmall};
            width: 3em;
          }
        `}
      
    )
  }
}

decorator: ({ themeName }) => {
    const base = css({
      overflow: 'auto',
      width: '100%',
      height: '100vh',
      transition: `background ${core.motion.speedNormal}`,
      backgroundSize: 'cover',
      background: 'transparent'
    })

    const theme = css(
      themeName === names.dark && { background: core.colors.gray06 },
      themeName === names.light && { background: core.colors.bone }
    )

    return compose(
      base,
      theme
    )
  }
}

<div>{props.row.value}</div>
    
    
      <div>{props.row.description}</div>
    
    
      <div>{props.row.defaultValue}</div>
    
    <style>{`
      .nameCode {
        color: ${core.colors.pink};
      }
      .maybeCode :global(code) {
        white-space: normal;
        color: ${core.colors.blue};
      }
    `}</style>
  
)
PropTypesRow.propTypes = {

const ExampleDrawerBase = () => (
  <div>
    }
    /&gt;
    <style>{`
      .image-placeholder {
        width: 100%;
        height: 100%;
        background: ${core.colors.gray03};
      }
    `}</style>
  </div>
)

'&:focus': { outline: 'none' }
  },
  '.psds-switch--disabled': {
    opacity: '0.4',
    cursor: 'default'
  },
  [`.psds-switch--labelAlign-${vars.labelAligns.right}`]: {
    flexDirection: 'row'
  },
  [`.psds-switch--labelAlign-${vars.labelAligns.left}`]: {
    flexDirection: 'row-reverse'
  },

  [`.psds-switch__track`]: {
    position: 'relative',
    backgroundColor: core.colors.gray03,
    transition: `background-color ${core.motion.speedFast} ease-in-out`
  },
  [`.psds-switch__track.psds-switch__track--size-${vars.sizes.small}`]: {
    height: '12px',
    width: '24px',
    borderRadius: '6px'
  },
  [`.psds-switch__track.psds-switch__track--size-${vars.sizes.large}`]: {
    height: '24px',
    width: '48px',
    borderRadius: '12px',
    padding: '1px'
  },
  [`.psds-switch__track--checked.psds-switch__track--color-${vars.colors.blue}`]: {
    backgroundColor: core.colors.blue
  },

const Relative = _ => (
  <div>
    <img src="/static/img/motionSpeedScale.png" srcset="/static/img/motionSpeedScale.png,
              /static/img/motionSpeedScale@2x.png 1.5x" alt="Use slower animations for larger objects or longer distances.">
    <style>{`
      .relative {
        padding: ${core.layout.spacingLarge} ${core.layout.spacingXLarge};
        background: ${core.colors.bone};
        border-radius: 12px;
        overflow: hidden;
        text-align: center;
      }
      .scaleImg {
        max-width: 100%;
      }
    `}</style>
  </div>
)

]
  const [isOpen, setIsOpen] = React.useState(false)
  const [selected, select] = React.useState({})

  function handleSelect(evt, value, label) {
    select({ value, label })
    setIsOpen(false)
  }

  return (
    
      <style>{`
        .example {
          padding: ${core.layout.spacingLarge};
          background: ${core.colors.gray06};
          color: ${core.colors.white};
          min-height: 200px;
        }
        .label {
          padding: ${core.layout.spacingLarge} 0;
          font-size: ${core.type.fontSizeMedium};
        }
      `}</style>

      
        <div>
          
                </div>

export default props => (
  <div>
    
      REACT
      HTML
    
    <style>{`
      .switcher {
        color: ${core.colors.white};
        margin-bottom: ${core.layout.spacingXLarge};
      }
    `}</style>
  </div>
)