Colors

<p>
  Use semantic tokens by purpose. Values below are resolved from the
  actual theme; translucent colors show their alpha. Built-in data
  palettes are cataloged below; custom user colors remain configurable.
</p>
<TextInput
  aria-label="Find a color token"
  placeholder="Search tokens or usage…"
  value={query}
  onInput={(event) => setQuery(event.currentTarget.value)}
/>
<p role="status" aria-label="Semantic color results">
  {count} color roles{swatchCount ? ` · ${swatchCount} swatches` : ''}
</p>
<div class="colors-palettes">
  <ThemePalette theme="light" query={query} />
  <ThemePalette theme="dark" query={query} />
</div>

<p>
  Shared picker values used by product color palettes and Charts color
  labels. Chart series keep their own default palette.
</p>
<dl class="colors-roles" aria-label="Selectable color swatch values">
  {DEFAULT_COLOR_PALETTE_OPTIONS.map(({ value, label }) => (
    <div
      key={value}
      class="colors-role"
      hidden={
        !`${value} ${label}`
          .toLowerCase()
          .includes(query.trim().toLowerCase())
      }
    >
      <dt>
        <span
          class="colors-swatch"
          style={{ backgroundColor: value }}
          aria-hidden="true"
        />
        {label}
      </dt>
      <dd>
        <code>{value}</code>
      </dd>
    </div>
  ))}
</dl>

<p>
  These fixed palettes preserve product appearance, data meaning, and
  portable export colors. Products import their values from UI.
  Theme-aware interface colors remain in the semantic palette above.
</p>
<TextInput
  aria-label="Find a built-in palette"
  value={query}
  placeholder="Search palettes, usage, color names, or values…"
  onInput={(event) => setQuery(event.currentTarget.value)}
/>
<p role="status" aria-label="Built-in palette results">
  {palettes.length} named palettes
</p>
<div class="builtin-palettes">
  {palettes.map((palette) => (
    <article
      key={palette.id}
      class="builtin-palette"
      data-built-in-palette={palette.id}
    >
      <h3>{palette.title}</h3>
      <p>{palette.usage}</p>
      <p class="builtin-consumers">
        <strong>Used by:</strong> {palette.consumers.join(', ')}
      </p>
      <details open={search ? true : undefined}>
        <summary>
          {Object.keys(palette.colors).length} color values{' '}
          <code>{palette.id}</code>
        </summary>
        <dl class="builtin-color-grid">
          {Object.entries(palette.colors).map(([name, value]) => (
            <div
              key={name}
              class="builtin-color"
              data-built-in-color={name}
            >
              <dt>
                <span
                  class="colors-swatch"
                  aria-hidden="true"
                  style={{ background: value }}
                />
                <code>{name}</code>
              </dt>
              <dd>
                <code>{value}</code>
              </dd>
            </div>
          ))}
        </dl>
      </details>
    </article>
  ))}
</div>