tldraw/components/style-panel/color-picker.tsx

import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { Square } from 'react-feather'
import styled from 'styles'

interface Props {
  label: string
  color: string
  colors: Record<string, string>
  onChange: (color: string) => void
}

export default function ColorPicker({ label, color, colors, onChange }: Props) {
  return (
    <DropdownMenu.Root>
      <CurrentColor>
        <label>{label}</label>
        <ColorIcon color={color} />
      </CurrentColor>
      <Colors sideOffset={4}>
        {Object.entries(colors).map(([name, color]) => (
          <ColorButton key={name} title={name} onSelect={() => onChange(color)}>
            <ColorIcon color={color} />
          </ColorButton>
        ))}
      </Colors>
    </DropdownMenu.Root>
  )
}

function ColorIcon({ color }: { color: string }) {
  return (
    <Square fill={color} strokeDasharray={color === 'none' ? '2, 3' : 'none'} />
  )
}

const Colors = styled(DropdownMenu.Content, {
  display: 'grid',
  padding: 4,
  gridTemplateColumns: 'repeat(6, 1fr)',
  border: '1px solid $border',
  backgroundColor: '$panel',
  borderRadius: 4,
  boxShadow: '0px 5px 15px -5px hsla(206,22%,7%,.15)',
})

const ColorButton = styled(DropdownMenu.Item, {
  position: 'relative',
  cursor: 'pointer',
  height: 32,
  width: 32,
  border: 'none',
  padding: 'none',
  background: 'none',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',

  '&::before': {
    content: "''",
    position: 'absolute',
    top: 4,
    left: 4,
    right: 4,
    bottom: 4,
    pointerEvents: 'none',
    zIndex: 0,
  },

  '&:hover::before': {
    backgroundColor: '$hover',
    borderRadius: 4,
  },

  '& svg': {
    position: 'relative',
    stroke: 'rgba(0,0,0,.2)',
    strokeWidth: 1,
    zIndex: 1,
  },
})

const CurrentColor = styled(DropdownMenu.Trigger, {
  position: 'relative',
  display: 'flex',
  width: '100%',
  background: 'none',
  border: 'none',
  cursor: 'pointer',
  outline: 'none',
  alignItems: 'center',
  justifyContent: 'space-between',
  padding: '4px 6px 4px 12px',

  '&::before': {
    content: "''",
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    pointerEvents: 'none',
    zIndex: -1,
  },

  '&:hover::before': {
    backgroundColor: '$hover',
    borderRadius: 4,
  },

  '& label': {
    fontFamily: '$ui',
    fontSize: '$2',
    fontWeight: '$1',
    margin: 0,
    padding: 0,
  },

  '& svg': {
    position: 'relative',
    stroke: 'rgba(0,0,0,.2)',
    strokeWidth: 1,
    zIndex: 1,
  },
})