Colors

The button moves from `#3b82f6` to `oklch(0.55 0.2 264)`, and its hover from `rgb(37 99 235)` to `hsl(226 71% 40%)`.

::palette
- Background: `#fafaf9`
- Foreground: `#1c1917`
- Primary: `oklch(0.55 0.2 264)`
- Danger: `#dc2626`
- Overlay: `rgb(0 0 0 / 40%)`
::

There's no new syntax for a single color: any inline code that holds exactly one hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), or oklch() color gets a swatch before it, and the document still reads the same without the plugin. A swatch sits on a checkerboard, so a translucent color shows as translucent.

Links use `#3b82f6`, and visited ones `oklch(0.5 0.2 300 / 90%)`.

Inline code that holds one color and nothing else gets a swatch before it. Code blocks are left alone, and so is inline code with anything else in it, such as `color: #fff`.

Named colors such as red aren't read, since a word in code is far more often a name in a program than a color. Nor are var(), color(), and color-mix(), whose color depends on the page.

::palette
- Primary: `#3b82f6`
- Danger: #dc2626
::

A ::palette holds one list, bulleted or numbered, of name: color lines, and draws each as a tile with its name and its value. The color can be in inline code or not. Close the block with ::.

The plugin adds every problem to meta.issues, as Validation describes: a palette with no list, content beside the list (it's dropped), a line with no name or color, a color it can't draw (the line is left out), and a prop, which a palette doesn't have. Each issue names its palette and says how to fix it. Each one has its own rule in Doctor.

A pull request that changes design tokens reads best with the old and new values side by side. Write them in inline code and each one shows its color:

| Token | Before | After |
| --- | --- | --- |
| `--primary` | `#3b82f6` | `oklch(0.55 0.2 264)` |
| `--ring` | `#93c5fd` | `oklch(0.7 0.12 260)` |

For the whole set, a ::palette per theme shows them as a reviewer would see them on a page.

The plugin takes no options. In comarkUi(), colors: false turns it off.

Every entry also exports isColor(), the test the plugin runs on inline code, for a host that wants to check a value the same way.

comark-ui brings comark-colors and registers it. To use it alone, install it and pass the renderer's components:

pnpm add comark @comark/html comark-colors

import { createHtmlRenderer } from "@comark/html";
import colors, { components } from "comark-colors/html";

const render = createHtmlRenderer({ plugins: [colors()], components });

For Vue, React, or Svelte, import from comark-colors/vue, comark-colors/react, or comark-colors/svelte; the components add the styles when they mount. Import comark-colors/style.css with your styles so a server-rendered page doesn't shift. Renderers covers using it with other plugins.

Swatches and tiles read the shared tokens: --comark-border for their outlines, --comark-background and --comark-foreground for a tile's card, --comark-muted for its value and, mixed with --comark-background, the checkerboard under a translucent color, --comark-radius for its corners, and --comark-font for its name. The value is in the system's monospace font. The rules sit in a comark CSS layer, so any plain rule of your own wins.

Swatches print with their colors, since a swatch is nothing but its background.