Color Picker

1import { ColorPicker } from '@/ui/Input'23<Field label="Brand colour" description="Used for buttons, links and focus rings.">4  <ColorPicker5    value={brand}6    onChange={setBrand}7    swatches={BRAND_SWATCHES}       // most choices land here8    showContrast={{ against: '#ffffff', level: 'AA' }}9  />10</Field>1112// Parse loosely: shorthand, missing hash, uppercase are all the same colour.13function parseHex(input: string): string | null {14  const s = input.trim().replace(/^#/, '').toLowerCase()15  if (/^[0-9a-f]{3}$/.test(s)) return '#' + s.split('').map((c) => c + c).join('')16  if (/^[0-9a-f]{6}$/.test(s)) return '#' + s17  return null18}1920// Real contrast, not eyeballed. This is the whole reason to show a readout.21function contrastRatio(a: string, b: string) {22  const lum = (hex: string) => {23    const n = hex.slice(1)24    const [r, g, bl] = [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16) / 255)25    const f = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)26    return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(bl)27  }28  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x)29  return (hi + 0.05) / (lo + 0.05)30}3132// Feature-detect: a dead eyedropper button is worse than a missing one.33const hasEyeDropper = typeof window !== 'undefined' && 'EyeDropper' in window34async function pick() {35  const { sRGBHex } = await new (window as any).EyeDropper().open()36  onChange(sRGBHex)37}

<div class="ds-colorpicker">
  <!-- One value, mutually exclusive: a radiogroup, not eight buttons. -->
  <div role="radiogroup" aria-label="Preset colours" class="ds-swatches">
    <button type="button" role="radio" aria-checked="true"
            aria-label="Indigo #6366f1" style="--swatch: #6366f1" tabindex="0">
      <svg aria-hidden="true">…</svg>
    </button>
    <button type="button" role="radio" aria-checked="false"
            aria-label="Violet #8b5cf6" style="--swatch: #8b5cf6" tabindex="-1"></button>
  </div>

  <!-- Keyboard-adjustable: WCAG 2.5.7 needs a non-dragging path. -->
  <div class="ds-spectrum">
    <div role="slider" aria-label="Hue" aria-valuemin="0" aria-valuemax="360"
         aria-valuenow="243" aria-valuetext="243 degrees" tabindex="0"></div>
  </div>

  <label for="hex" class="sr-only">Hex value</label>
  <input id="hex" type="text" value="#6366F1" spellcheck="false"
         autocapitalize="off" class="ds-hex" />

  <p role="status" aria-live="polite">4.8 to 1 on white, passes AA for text</p>
</div>

.ds-swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.ds-swatches button {
  inline-size: 24px;
  block-size: 24px;
  border-radius: var(--radius-sm);
  background: var(--swatch);
  /* Every swatch needs an edge that survives its own lightness: a white
     swatch on a white panel is otherwise invisible. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}

/* A ring, not a border: a border changes the box size and the whole row
   jumps as the selection moves. */
.ds-swatches [aria-checked='true'] {
  outline: 2px solid var(--ds-fg);
  outline-offset: 2px;
}

.ds-spectrum {
  block-size: 80px;                  /* secondary by design */
  border-radius: var(--radius-md);
  background:
    linear-gradient(to right, #fff, var(--hue)),
    linear-gradient(to bottom, transparent, #000);
  background-blend-mode: multiply;
}

.ds-hex {
  /* 0 and O must be distinguishable in a value people transcribe. */
  font-family: var(--font-mono);
  text-transform: uppercase;
}

@media (pointer: coarse) {
  /* 44px targets mean six per row, not twelve. */
  .ds-swatches { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .ds-swatches button { inline-size: 44px; block-size: 44px; }
}