carbon/components/ColorPicker.js

import React from 'react'
import SketchPicker from 'react-color/lib/Sketch'

import { COLORS } from '../lib/constants'

const pickerStyle = {
  backgroundColor: COLORS.BLACK,
  padding: '8px 8px 0',
  margin: '0 auto 1px',
}

export default function ColorPicker(props) {
  const [color, setColor] = React.useState(props.color)
  const { onChange = () => {}, presets, style, disableAlpha } = props

  return (
    <React.Fragment>
      <SketchPicker
        styles={{ picker: style || pickerStyle }}
        onChange={setColor}
        color={color}
        onChangeComplete={onChange}
        presetColors={presets}
        disableAlpha={disableAlpha}
      />
      <style jsx>
        {`
            /* react-color overrides */
            :global(.sketch-picker > div:nth-child(3) > div > div > span) {
              color: ${COLORS.SECONDARY} !important
            }

            :global(.sketch-picker > div:nth-child(3) > div > div > input) {
              width: 100% !important
              box-shadow: none
              outline: none
              border-radius: 2px
              background: ${COLORS.DARK_GRAY}
              color: #fff !important
            }

            :global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
              background: #fff
            }
          `}
      </style>
    </React.Fragment>
  )
}