Colors

import * as React from "react"
import {
  formatColor,
  isInGamut,
  parseColor,
  toGamut,
  type Color,
  type ColorFormat,
} from "@ui-sdk/core/color"
import { Field, FieldControl, FieldLabel } from "@ui-sdk/react/field"

const formats: [ColorFormat, string][] = [
  ["hex", "Hex"],
  ["srgb", "RGB"],
  ["hsl", "HSL"],
  ["oklch", "OKLCH"],
  ["display-p3", "Display P3"],
]

function gamutOf(fitsSrgb: boolean, fitsP3: boolean) {
  if (fitsSrgb) {
    return "Every screen shows this color."
  }
  if (fitsP3) {
    return "Outside sRGB, inside P3. Hex, RGB and HSL show the closest sRGB color."
  }
  return "Outside sRGB and P3. Each format shows the closest color it holds."
}

const fitted = (color: Color, format: ColorFormat) =>
  format === "oklch"
    ? color
    : toGamut(color, format === "display-p3" ? "p3" : "srgb")

function Example() {
  const [text, setText] = React.useState("oklch(0.7 0.25 150)")
  const color = parseColor(text)
  return (
    <div data-slot="stack">
      <Field invalid={!color}>
        <FieldLabel>Color</FieldLabel>
        <div data-slot="color-field">
          <span
            data-slot="color-swatch"
            style={{ background: color ? formatColor(color) : undefined }}
          />
          <FieldControl
            value={text}
            spellCheck={false}
            onChange={(event) => setText(event.target.value)}
          />
        </div>
      </Field>
      {color ? (
        <>
          <dl data-slot="color-formats">
            {formats.map(([format, label]) => (
              <React.Fragment key={format}>
                <dt>{label}</dt>
                <dd data-format={format}>
                  {formatColor(fitted(color, format), format)}
                </dd>
              </React.Fragment>
            ))}
          </dl>
          <p data-gamut data-slot="hint">
            {gamutOf(isInGamut(color), isInGamut(color, "p3"))}
          </p>
        </>
      ) : (
        <p data-gamut data-slot="hint">
          Not a color
        </p>
      )}
    </div>
  )
}

export { Example }

import * as React from "react"
import {
  formatColor,
  mixColor,
  parseColor,
  type ColorSpace,
} from "@ui-sdk/core/color"

const spaces: [ColorSpace, string][] = [
  ["oklab", "Oklab"],
  ["oklch", "OKLCH"],
  ["srgb", "sRGB"],
]

const steps = [0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1]

function Example() {
  const [from, setFrom] = React.useState("#2563eb")
  const [to, setTo] = React.useState("#facc15")
  const [space, setSpace] = React.useState<ColorSpace>("oklab")
  const mixes = steps.map((step) =>
    mixColor(parseColor(from)!, parseColor(to)!, step, { space })
  )
  return (
    <div data-slot="stack">
      <div data-slot="controls">
        <label data-slot="label">
          <input
            type="color"
            value={from}
            onChange={(event) => setFrom(event.target.value)}
          />
          From
        </label>
        <label data-slot="label">
          <input
            type="color"
            value={to}
            onChange={(event) => setTo(event.target.value)}
          />
          To
        </label>
        <select
          aria-label="Space"
          value={space}
          onChange={(event) => setSpace(event.target.value as ColorSpace)}
        >
          {spaces.map(([value, label]) => (
            <option key={value} value={value}>
              {label}
            </option>
          ))}
        </select>
      </div>
      <ol data-slot="color-steps">
        {mixes.map((mix, index) => (
          <li
            key={index}
            title={formatColor(mix, "hex")}
            style={{ background: formatColor(mix) }}
          />
        ))}
      </ol>
    </div>
  )
}

export { Example }

import * as React from "react"
import { contrastRatio, parseColor } from "@ui-sdk/core/color"

function verdictOf(ratio: number) {
  if (ratio >= 4.5) {
    return "Passes for all text"
  }
  if (ratio >= 3) {
    return "Passes for large text only"
  }
  return "Fails for text"
}

function Example() {
  const [text, setText] = React.useState("#8a8a8a")
  const [background, setBackground] = React.useState("#ffffff")
  const ratio = contrastRatio(parseColor(text)!, parseColor(background)!)
  return (
    <div data-slot="stack">
      <div data-slot="controls">
        <label data-slot="label">
          <input
            type="color"
            value={text}
            onChange={(event) => setText(event.target.value)}
          />
          Text
        </label>
        <label data-slot="label">
          <input
            type="color"
            value={background}
            onChange={(event) => setBackground(event.target.value)}
          />
          Background
        </label>
      </div>
      <p data-slot="contrast-preview" style={{ color: text, background }}>
        Your order ships tomorrow.
      </p>
      <p data-ratio data-slot="hint">
        {ratio.toFixed(2)}:1, {verdictOf(ratio)}
      </p>
    </div>
  )
}

export { Example }