comark-colors 0.0.0 → 0.7.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 onmax
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,45 @@
 # comark-colors
 
-Placeholder. The first release is published from https://github.com/onmax/comark-plugins.
+[![npm version](https://comark-ui.onmax.me/badge.svg?source=npm-version&package=comark-colors&icon=npm)](https://npmx.dev/package/comark-colors)
+[![npm downloads](https://comark-ui.onmax.me/badge.svg?source=npm-downloads&package=comark-colors&period=month&icon=npm)](https://npmx.dev/package/comark-colors)
+[![license](https://comark-ui.onmax.me/badge.svg?label=license&value=MIT)](https://npmx.dev/package/comark-colors)
+[![docs](https://comark-ui.onmax.me/badge.svg?label=docs&value=comark-ui.onmax.me)](https://comark-ui.onmax.me/colors/)
+
+A swatch before inline code that holds a color, as GitLab draws it, and `::palette` grids of named colors. A [Comark](https://comark.dev) plugin for HTML, Vue, React, and Svelte.
+
+```sh
+pnpm add comark comark-colors
+```
+
+```ts
+import { createHtmlRenderer } from "@comark/html";
+import colors, { components } from "comark-colors/html";
+
+const render = createHtmlRenderer({ plugins: [colors()], components });
+```
+
+```md
+The button moves from `#3b82f6` to `oklch(0.55 0.2 264)`.
+
+::palette
+- Primary: `#3b82f6`
+- Danger: #dc2626
+::
+```
+
+Inline code that holds one literal hex, `rgb()`, `hsl()`, `hwb()`, `lab()`, `lch()`, `oklab()`, or `oklch()` color gets a swatch, with no new syntax. Calculated components such as `calc()` are left as code. A `::palette` holds one list of `name: color` lines and draws a tile for each.
+
+The plugin adds every problem with a palette to `meta.issues`: no list, content beside it, a line with no name or color, and a color it can't draw. Each issue names its palette and says how to fix it.
+
+## Renderers
+
+| Renderer | Import |
+| --- | --- |
+| `@comark/html` | `comark-colors/html`: the styles are inlined once per document |
+| `@comark/vue` | `comark-colors/vue` |
+| `@comark/react` | `comark-colors/react` |
+| `@comark/svelte` | `comark-colors/svelte` |
+
+Each entry exports the parse plugin as `default` and the renderer's `components`. The Vue, React, and Svelte components add the styles when they mount; import `comark-colors/style.css` with your styles so a server-rendered page doesn't shift.
+
+The styles follow shadcn/ui: they read its CSS variables, such as `--background` and `--border`, when the page has them, and use its neutral theme otherwise. Set the shared `--comark-*` tokens to theme every plugin at once; the rules sit in a `comark` CSS layer, so any plain rule of your own wins.

package/dist/client.d.mts

@@ -0,0 +1,12 @@
+//#region src/styles.d.ts
+/**
+ * A swatch inside inline code, and palettes as a grid of tiles in the style of shadcn/ui's Card, on the shared
+ * `--comark-*` tokens. Override `--cco-tile-width` and `--cco-tile-height` to size a palette's tiles. The rules sit in
+ * the `comark` layer, so any unlayered rule of the host's wins.
+ */
+export declare const css: string;
+//#endregion
+//#region src/client.d.ts
+/** Adds the colors styles to the page once. The Vue, React, and Svelte components call it when they mount. */
+export declare function addStyles(): void;
+//#endregion

package/dist/client.mjs

@@ -0,0 +1,12 @@
+import { t as css } from "./styles-gTSbKJ8j.mjs";
+//#region src/client.ts
+/** Adds the colors styles to the page once. The Vue, React, and Svelte components call it when they mount. */
+function addStyles() {
+	if (document.querySelector("style[data-comark-colors]")) return;
+	const style = document.createElement("style");
+	style.dataset.comarkColors = "";
+	style.textContent = css;
+	document.head.append(style);
+}
+//#endregion
+export { addStyles, css };

package/dist/html.d.mts

@@ -0,0 +1,7 @@
+import _default, { ColorAttributes, ColorsMeta, isColor } from "./index.mjs";
+import { NodeHandler } from "comark";
+//#region src/html.d.ts
+/** The HTML renderer for colors and `::palette`. Pass it as `components`; it inlines the styles once per document. */
+export declare const components: Record<"color" | "palette", NodeHandler>;
+//#endregion
+export { type ColorAttributes, type ColorsMeta, _default as default, isColor };

package/dist/html.mjs

@@ -0,0 +1,27 @@
+import src_default, { isColor } from "./index.mjs";
+import { t as css } from "./styles-gTSbKJ8j.mjs";
+import { escapeHtml } from "comark/utils";
+//#region src/html.ts
+const styled = /* @__PURE__ */ new WeakSet();
+const attr = (value) => escapeHtml(value, { "\"": """ });
+const str = (value) => value === void 0 ? "" : String(value);
+const styles = (state) => {
+	const tag = styled.has(state.context) ? "" : `<style data-comark-colors>${css}</style>`;
+	styled.add(state.context);
+	return tag;
+};
+const color = ([, attrs], state) => {
+	const value = str(attrs.value);
+	const name = str(attrs.name);
+	if (!value) return "";
+	if (name) return `<li><span class="cco-tile" style="--cco:${attr(value)}"></span><span class="cco-name">${attr(name)}</span><span class="cco-value">${attr(value)}</span></li>`;
+	return `${styles(state)}<code class="cco"><span class="cco-swatch" style="--cco:${attr(value)}" aria-hidden="true"></span>${attr(value)}</code>`;
+};
+const palette = async ([, , ...children], state) => `${styles(state)}<ul class="cco-palette">${(await Promise.all(children.map((child) => state.one(child, state)))).join("")}</ul>`;
+/** The HTML renderer for colors and `::palette`. Pass it as `components`; it inlines the styles once per document. */
+const components = {
+	color,
+	palette
+};
+//#endregion
+export { components, src_default as default, isColor };

package/dist/index.d.mts

@@ -0,0 +1,24 @@
+//#region src/index.d.ts
+export type ColorsMeta = {
+  /** One readable sentence per problem with a `::palette`. Empty when the document has none. Other plugins add theirs too. */
+  issues: string[];
+  /** The comark-linter rule of each issue, by its sentence, so the linter reports it under its own code. */
+  issueRules: Record<string, string>;
+};
+/**
+ * What a color becomes, and all its renderers read. Inline code that holds a color has only `value`; a `::palette` line
+ * has its `name` too.
+ */
+export type ColorAttributes = {
+  value?: string;
+  name?: string;
+};
+/** Whether `value` is a hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), or oklch() color. */
+export declare const isColor: (value: string) => boolean;
+/**
+ * Puts a swatch before inline code that holds a color, such as `#3b82f6` or `oklch(0.62 0.19 260)`, and turns a
+ * `::palette` of `name: color` lines into a grid of swatches. Problems are added to `meta.issues`.
+ */
+declare const _default: import("comark").ComarkPluginFactory<void, ColorsMeta, {}>;
+//#endregion
+export { _default as default };

package/dist/index.mjs

@@ -0,0 +1,100 @@
+import { defineComarkPlugin } from "comark";
+import { textContent } from "comark/utils";
+//#region src/index.ts
+const NUMBER = String.raw`[+-]?(?:\d+(?:\.\d+)?|\.\d+)(?:e[+-]?\d+)?`;
+const PERCENT = String.raw`${NUMBER}%`;
+const ANGLE = String.raw`${NUMBER}(?:deg|grad|rad|turn)`;
+const NONE = String.raw`none`;
+const CSS_WS = String.raw`(?:[ \t\r\n\f]|/\*(?:[^"'<>]|\r?\n)*?\*/)`;
+const ALPHA = String.raw`(?:${NUMBER}|${PERCENT}|${NONE})`;
+const RGB_CHANNEL = String.raw`(?:${NUMBER}|${PERCENT}|${NONE})`;
+const HSL_HUE = String.raw`(?:${NUMBER}|${ANGLE}|${NONE})`;
+const HSL_PERCENT = String.raw`(?:${PERCENT}|${NONE})`;
+const LAB_CHANNEL = String.raw`(?:${NUMBER}|${PERCENT}|${NONE})`;
+const LEGACY_RGB = String.raw`(?:${NUMBER}${CSS_WS}*,${CSS_WS}*${NUMBER}${CSS_WS}*,${CSS_WS}*${NUMBER}|${PERCENT}${CSS_WS}*,${CSS_WS}*${PERCENT}${CSS_WS}*,${CSS_WS}*${PERCENT})(?:${CSS_WS}*,${CSS_WS}*(?:${NUMBER}|${PERCENT}))?`;
+const LEGACY_HSL = String.raw`(?:${NUMBER}|${ANGLE})`;
+const MODERN = (a, b, c) => String.raw`${a}${CSS_WS}+${b}${CSS_WS}+${c}(?:${CSS_WS}*/${CSS_WS}*${ALPHA})?`;
+const COLOR = new RegExp(String.raw`^(?:#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})|(?:rgb|rgba)\(${CSS_WS}*(?:${MODERN(RGB_CHANNEL, RGB_CHANNEL, RGB_CHANNEL)}|${LEGACY_RGB})${CSS_WS}*\)|(?:hsl|hsla)\(${CSS_WS}*(?:${MODERN(HSL_HUE, HSL_PERCENT, HSL_PERCENT)}|${LEGACY_HSL}${CSS_WS}*,${CSS_WS}*${PERCENT}${CSS_WS}*,${CSS_WS}*${PERCENT}(?:${CSS_WS}*,${CSS_WS}*(?:${NUMBER}|${PERCENT}))?)${CSS_WS}*\)|hwb\(${CSS_WS}*${MODERN(HSL_HUE, HSL_PERCENT, HSL_PERCENT)}${CSS_WS}*\)|lab\(${CSS_WS}*${MODERN(LAB_CHANNEL, LAB_CHANNEL, LAB_CHANNEL)}${CSS_WS}*\)|lch\(${CSS_WS}*${MODERN(LAB_CHANNEL, LAB_CHANNEL, HSL_HUE)}${CSS_WS}*\)|oklab\(${CSS_WS}*${MODERN(LAB_CHANNEL, LAB_CHANNEL, LAB_CHANNEL)}${CSS_WS}*\)|oklch\(${CSS_WS}*${MODERN(LAB_CHANNEL, LAB_CHANNEL, HSL_HUE)}${CSS_WS}*\))$`, "i");
+const EXAMPLE = "`- Primary: #3b82f6`";
+/** Whether `value` is a hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), or oklch() color. */
+const isColor = (value) => COLOR.test(value);
+const isElement = (node) => Array.isArray(node) && node[0] !== null;
+const childrenOf = ([, , ...rest]) => rest;
+const isContent = (node) => Array.isArray(node) ? node[0] !== null : node.trim() !== "";
+function palette(node, number, issues) {
+	const name = `\`::palette\` ${number}`;
+	for (const key of Object.keys(node[1])) {
+		const prop = key.replace(/^:/, "");
+		if (prop !== "id" && prop !== "class") issues.push({
+			rule: "comark/colors/unknown-prop",
+			message: `${name}: \`${prop}\` isn't a prop of \`::palette\`, which has none, so it's ignored. Remove it.`
+		});
+	}
+	const content = childrenOf(node).filter(isContent);
+	const lists = content.filter((child) => isElement(child) && (child[0] === "ul" || child[0] === "ol"));
+	if (!lists.length) {
+		issues.push({
+			rule: "comark/colors/missing-list",
+			message: `${name} needs a list of \`name: color\` lines, such as ${EXAMPLE}.`
+		});
+		return ["palette", {}];
+	}
+	if (lists.length < content.length) issues.push({
+		rule: "comark/colors/content-dropped",
+		message: `${name} drops everything but its list. Move the rest outside the block.`
+	});
+	const colors = [];
+	for (const item of lists.flatMap(childrenOf).filter(isElement)) {
+		const line = textContent(item).trim();
+		const [, label, value = ""] = /^(.*\S)\s*:\s*(\S.*)$/s.exec(line) ?? [];
+		if (!label) issues.push({
+			rule: "comark/colors/unreadable-line",
+			message: `${name}: "${line}" needs a name and a color, such as ${EXAMPLE}.`
+		});
+		else if (!isColor(value.trim())) issues.push({
+			rule: "comark/colors/invalid-color",
+			message: `${name}: "${value.trim()}" for ${label} isn't a color it can draw. Write a hex color or an rgb(), hsl(), hwb(), lab(), lch(), oklab(), or oklch() color.`
+		});
+		else colors.push(["color", {
+			name: label,
+			value: value.trim()
+		}]);
+	}
+	return [
+		"palette",
+		{},
+		...colors
+	];
+}
+/**
+* Puts a swatch before inline code that holds a color, such as `#3b82f6` or `oklch(0.62 0.19 260)`, and turns a
+* `::palette` of `name: color` lines into a grid of swatches. Problems are added to `meta.issues`.
+*/
+var src_default = defineComarkPlugin(() => ({
+	name: "comark-colors",
+	post(state) {
+		const { tree } = state;
+		const issues = [];
+		let count = 0;
+		const walk = (nodes, start) => {
+			for (let index = start; index < nodes.length; index++) {
+				const node = nodes[index];
+				if (!node || !isElement(node) || node[0] === "pre") continue;
+				if (node[0] === "palette") nodes[index] = palette(node, ++count, issues);
+				else if (node[0] !== "code") walk(node, 2);
+				else {
+					const [value, ...rest] = childrenOf(node);
+					if (value !== void 0 && !Array.isArray(value) && !rest.length && isColor(value.trim())) nodes[index] = ["color", { value: value.trim() }];
+				}
+			}
+		};
+		walk(tree.nodes, 0);
+		tree.meta.issues = [...tree.meta.issues ?? [], ...issues.map((issue) => issue.message)];
+		tree.meta.issueRules = {
+			...tree.meta.issueRules,
+			...Object.fromEntries(issues.map((issue) => [issue.message, issue.rule]))
+		};
+	}
+}));
+//#endregion
+export { src_default as default, isColor };

package/dist/react.d.mts

@@ -0,0 +1,20 @@
+import _default, { ColorAttributes, ColorsMeta, isColor } from "./index.mjs";
+import { ReactNode } from "react";
+//#region src/react.d.ts
+/** A color in inline code, or a line of a `::palette`, for `@comark/react`. */
+export declare function Color({ value, name }: ColorAttributes): import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLElement>, HTMLElement> | import("react").DetailedReactHTMLElement<{
+  className: string;
+}, HTMLElement> | null;
+/** `::palette` for `@comark/react`. */
+export declare function Palette({ children }: {
+  children?: ReactNode;
+}): import("react").DetailedReactHTMLElement<{
+  className: string;
+}, HTMLElement>;
+/** Pass these as `components` to `@comark/react`. */
+export declare const components: {
+  Color: typeof Color;
+  Palette: typeof Palette;
+};
+//#endregion
+export { type ColorAttributes, type ColorsMeta, _default as default, isColor };

package/dist/react.mjs

@@ -0,0 +1,31 @@
+import src_default, { isColor } from "./index.mjs";
+import { addStyles } from "./client.mjs";
+import { createElement, useEffect } from "react";
+//#region src/react.ts
+/** A color in inline code, or a line of a `::palette`, for `@comark/react`. */
+function Color({ value, name }) {
+	useEffect(addStyles, []);
+	if (!value) return null;
+	const style = { "--cco": value };
+	if (name) return createElement("li", null, createElement("span", {
+		className: "cco-tile",
+		style
+	}), createElement("span", { className: "cco-name" }, name), createElement("span", { className: "cco-value" }, value));
+	return createElement("code", { className: "cco" }, createElement("span", {
+		className: "cco-swatch",
+		style,
+		"aria-hidden": true
+	}), value);
+}
+/** `::palette` for `@comark/react`. */
+function Palette({ children }) {
+	useEffect(addStyles, []);
+	return createElement("ul", { className: "cco-palette" }, children);
+}
+/** Pass these as `components` to `@comark/react`. */
+const components = {
+	Color,
+	Palette
+};
+//#endregion
+export { Color, Palette, components, src_default as default, isColor };

package/dist/style.css

@@ -0,0 +1 @@
+@layer comark{:where(.cco-palette,.cco){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){:where(.cco-palette,.cco){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)))}}:where(.cco-palette){--cco-tile-width:9rem;--cco-tile-height:4rem}.cco-swatch{display:inline-block;box-sizing:border-box;width:.8em;height:.8em;margin-inline-end:.35em;vertical-align:-.05em;border:1px solid var(--_comark-border);border-radius:.2em;background:linear-gradient(var(--cco),var(--cco)),repeating-conic-gradient(color-mix(in srgb,var(--_comark-muted) 35%,var(--_comark-background)) 0 25%,var(--_comark-background) 0 50%) 0 0/8px 8px}.cco-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cco-tile-width),1fr));gap:.75rem;margin:1.5rem 0;padding:0;list-style:none;font-family:var(--_comark-font)}.cco-palette>li{margin:0!important;padding:0!important;overflow:hidden;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-background);color:var(--_comark-foreground)}.cco-tile{display:block;height:var(--cco-tile-height);border-bottom:1px solid var(--_comark-border);background:linear-gradient(var(--cco),var(--cco)),repeating-conic-gradient(color-mix(in srgb,var(--_comark-muted) 35%,var(--_comark-background)) 0 25%,var(--_comark-background) 0 50%) 0 0/8px 8px}.cco-name,.cco-value{display:block;padding:0 .75rem;line-height:1.25rem;overflow-wrap:anywhere}.cco-name{padding-top:.5rem;font-size:.875rem;font-weight:500}.cco-value{padding-bottom:.5rem;color:var(--_comark-muted);font:.75rem/1.25rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.cco-swatch,.cco-tile{-webkit-print-color-adjust:exact;print-color-adjust:exact}@media print{.cco-palette>li{break-inside:avoid}}}

package/dist/styles-gTSbKJ8j.mjs

@@ -0,0 +1,79 @@
+//#region ../zoom/dist/theme.mjs
+const tokens = [
+	[
+		"background",
+		"ui-bg",
+		"background",
+		"#fff",
+		"#0a0a0a"
+	],
+	[
+		"foreground",
+		"ui-text-highlighted",
+		"foreground",
+		"#0a0a0a",
+		"#fafafa"
+	],
+	[
+		"muted",
+		"ui-text-muted",
+		"muted-foreground",
+		"#737373",
+		"#a1a1a1"
+	],
+	[
+		"border",
+		"ui-border",
+		"border",
+		"#e5e5e5",
+		"rgb(255 255 255/.1)"
+	],
+	[
+		"accent",
+		"ui-bg-elevated",
+		"accent",
+		"#f5f5f5",
+		"#262626"
+	],
+	[
+		"ring",
+		"ui-primary",
+		"ring",
+		"#a1a1a1",
+		"#737373"
+	]
+];
+const resolve = (scheme) => tokens.map((token) => `--_comark-${token[0]}:var(--comark-${token[0]},var(--${token[1]},var(--${token[2]},${token[scheme]})))`).join(";");
+/**
+* Resolves the `--comark-*` tokens on `selector`, falling back to Nuxt UI's variables, then shadcn/ui's, then shadcn's
+* neutral theme. Nuxt UI's corners are twice its `--ui-radius`, so the radius halves shadcn's to double it back.
+* They resolve on the component rather than `:root`, so a `.dark` class anywhere above it switches the theme, and a
+* `--comark-*` set on any ancestor still inherits down. `:where()` keeps them at zero specificity.
+*/
+function theme(selector) {
+	const where = `:where(${selector})`;
+	return `${where}{${resolve(3)};--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){${where}{${resolve(4)}}}`;
+}
+//#endregion
+//#region src/styles.ts
+const fill = "background:linear-gradient(var(--cco),var(--cco)),repeating-conic-gradient(color-mix(in srgb,var(--_comark-muted) 35%,var(--_comark-background)) 0 25%,var(--_comark-background) 0 50%) 0 0/8px 8px";
+/**
+* A swatch inside inline code, and palettes as a grid of tiles in the style of shadcn/ui's Card, on the shared
+* `--comark-*` tokens. Override `--cco-tile-width` and `--cco-tile-height` to size a palette's tiles. The rules sit in
+* the `comark` layer, so any unlayered rule of the host's wins.
+*/
+const css = `@layer comark{${[
+	theme(".cco-palette,.cco"),
+	":where(.cco-palette){--cco-tile-width:9rem;--cco-tile-height:4rem}",
+	`.cco-swatch{display:inline-block;box-sizing:border-box;width:.8em;height:.8em;margin-inline-end:.35em;vertical-align:-.05em;border:1px solid var(--_comark-border);border-radius:.2em;${fill}}`,
+	".cco-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cco-tile-width),1fr));gap:.75rem;margin:1.5rem 0;padding:0;list-style:none;font-family:var(--_comark-font)}",
+	".cco-palette>li{margin:0!important;padding:0!important;overflow:hidden;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-background);color:var(--_comark-foreground)}",
+	`.cco-tile{display:block;height:var(--cco-tile-height);border-bottom:1px solid var(--_comark-border);${fill}}`,
+	".cco-name,.cco-value{display:block;padding:0 .75rem;line-height:1.25rem;overflow-wrap:anywhere}",
+	".cco-name{padding-top:.5rem;font-size:.875rem;font-weight:500}",
+	".cco-value{padding-bottom:.5rem;color:var(--_comark-muted);font:.75rem/1.25rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}",
+	".cco-swatch,.cco-tile{-webkit-print-color-adjust:exact;print-color-adjust:exact}",
+	"@media print{.cco-palette>li{break-inside:avoid}}"
+].join("")}}`;
+//#endregion
+export { css as t };

package/dist/svelte/Color.svelte

@@ -0,0 +1,14 @@
+<!-- A color in inline code, or a line of a `::palette`, for `@comark/svelte`. -->
+<script>
+  import { onMount } from "svelte";
+  import { addStyles } from "comark-colors/client";
+
+  let { value = undefined, name = undefined } = $props();
+  onMount(addStyles);
+</script>
+
+{#if value && name}
+  <li><span class="cco-tile" style:--cco={value}></span><span class="cco-name">{name}</span><span class="cco-value">{value}</span></li>
+{:else if value}
+  <code class="cco"><span class="cco-swatch" style:--cco={value} aria-hidden="true"></span>{value}</code>
+{/if}

package/dist/svelte/Palette.svelte

@@ -0,0 +1,10 @@
+<!-- `::palette` for `@comark/svelte`. -->
+<script>
+  import { onMount } from "svelte";
+  import { addStyles } from "comark-colors/client";
+
+  let { children } = $props();
+  onMount(addStyles);
+</script>
+
+<ul class="cco-palette">{@render children?.()}</ul>

package/dist/svelte/index.d.ts

@@ -0,0 +1,9 @@
+import type { Component, Snippet } from "svelte";
+import type { ColorAttributes } from "comark-colors";
+
+export { default, isColor } from "comark-colors";
+export type { ColorAttributes, ColorsMeta } from "comark-colors";
+
+export declare const Color: Component<ColorAttributes>;
+export declare const Palette: Component<{ children?: Snippet }>;
+export declare const components: { Color: typeof Color; Palette: typeof Palette };

package/dist/svelte/index.js

@@ -0,0 +1,7 @@
+// Colors and `::palette` for `@comark/svelte`. Pass `components` to it; the parse plugin comes from `comark-colors`.
+import Color from "./Color.svelte";
+import Palette from "./Palette.svelte";
+
+export { default, isColor } from "comark-colors";
+export { Color, Palette };
+export const components = { Color, Palette };

package/dist/vue.d.mts

@@ -0,0 +1,33 @@
+import _default, { ColorAttributes, ColorsMeta, isColor } from "./index.mjs";
+//#region src/vue.d.ts
+/** A color in inline code, or a line of a `::palette`, for `@comark/vue`. */
+export declare const Color: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  value: StringConstructor;
+  name: StringConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  value: StringConstructor;
+  name: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** `::palette` for `@comark/vue`. */
+export declare const Palette: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Pass these as `components` to `@comark/vue`. */
+export declare const components: {
+  Color: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: StringConstructor;
+    name: StringConstructor;
+  }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+  }> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: StringConstructor;
+    name: StringConstructor;
+  }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+  Palette: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+//#endregion
+export { type ColorAttributes, type ColorsMeta, _default as default, isColor };

package/dist/vue.mjs

@@ -0,0 +1,49 @@
+import src_default, { isColor } from "./index.mjs";
+import { addStyles } from "./client.mjs";
+import { defineComponent, h, onMounted } from "vue";
+//#region src/vue.ts
+/** A color in inline code, or a line of a `::palette`, for `@comark/vue`. */
+const Color = defineComponent({
+	name: "Color",
+	inheritAttrs: false,
+	props: {
+		value: String,
+		name: String
+	},
+	setup(props) {
+		onMounted(addStyles);
+		return () => {
+			if (!props.value) return null;
+			const style = { "--cco": props.value };
+			if (props.name) return h("li", [
+				h("span", {
+					class: "cco-tile",
+					style
+				}),
+				h("span", { class: "cco-name" }, props.name),
+				h("span", { class: "cco-value" }, props.value)
+			]);
+			return h("code", { class: "cco" }, [h("span", {
+				class: "cco-swatch",
+				style,
+				"aria-hidden": "true"
+			}), props.value]);
+		};
+	}
+});
+/** `::palette` for `@comark/vue`. */
+const Palette = defineComponent({
+	name: "Palette",
+	inheritAttrs: false,
+	setup(_, { slots }) {
+		onMounted(addStyles);
+		return () => h("ul", { class: "cco-palette" }, slots.default?.());
+	}
+});
+/** Pass these as `components` to `@comark/vue`. */
+const components = {
+	Color,
+	Palette
+};
+//#endregion
+export { Color, Palette, components, src_default as default, isColor };

package/package.json

@@ -1,12 +1,90 @@
 {
   "name": "comark-colors",
-  "version": "0.0.0",
-  "description": "Placeholder. The first release is published from https://github.com/onmax/comark-plugins.",
+  "version": "0.7.2",
+  "description": "Color swatches next to inline code that holds a color, like GitLab, and ::palette grids of named colors. A Comark plugin.",
+  "keywords": [
+    "color",
+    "comark",
+    "markdown",
+    "mdc",
+    "palette",
+    "plugin",
+    "swatch"
+  ],
+  "homepage": "https://comark-ui.onmax.me/colors",
+  "bugs": "https://github.com/onmax/comark-ui/issues",
   "license": "MIT",
   "author": "onmax",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/onmax/comark-plugins.git",
+    "url": "git+https://github.com/onmax/comark-ui.git",
     "directory": "packages/colors"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./client": "./dist/client.mjs",
+    "./html": "./dist/html.mjs",
+    "./react": "./dist/react.mjs",
+    "./style.css": "./dist/style.css",
+    "./svelte": {
+      "types": "./dist/svelte/index.d.ts",
+      "svelte": "./dist/svelte/index.js",
+      "default": "./dist/svelte/index.js"
+    },
+    "./vue": "./dist/vue.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "devDependencies": {
+    "@comark/html": "^0.8.1",
+    "@comark/react": "^0.8.1",
+    "@comark/vue": "^0.8.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "comark": "^0.8.1",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "svelte": "^5.57.2",
+    "vue": "^3.5.44",
+    "comark-zoom": "0.7.2"
+  },
+  "peerDependencies": {
+    "@comark/html": "^0.8.0",
+    "comark": "^0.8.0",
+    "react": ">=18",
+    "svelte": ">=5",
+    "vue": ">=3.5"
+  },
+  "peerDependenciesMeta": {
+    "@comark/html": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "doctor": "vite-doctor . --no-cache --max-warnings 0 --format text"
   }
-}
+}