comark-colors 0.7.5 → 0.8.0

package/README.md

@@ -35,7 +35,7 @@ The plugin adds every problem with a palette to `meta.issues`: no list, content
 
 | Renderer | Import |
 | --- | --- |
-| `@comark/html` | `comark-colors/html`: the styles are inlined once per document |
+| `@comark/html` | `comark-colors/html`: the styles are inlined |
 | `@comark/vue` | `comark-colors/vue` |
 | `@comark/react` | `comark-colors/react` |
 | `@comark/svelte` | `comark-colors/svelte` |

package/dist/client-B1HZxnNI.mjs

@@ -0,0 +1,20 @@
+import { t as css } from "./styles-CZQmWAzs.mjs";
+//#region ../../shared/styles.ts
+/**
+* Adds a package's styles to the page once, unless the page already carries them as a `style` or a `link` with
+* `data-comark-<name>`, which is how the HTML renderer inlines them and how an app that imports `style.css` marks them.
+*/
+function addStyles$1(name, css) {
+	const attribute = `data-comark-${name}`;
+	if (document.querySelector(`style[${attribute}],link[${attribute}]`)) return;
+	const style = document.createElement("style");
+	style.setAttribute(attribute, "");
+	style.textContent = css;
+	document.head.append(style);
+}
+//#endregion
+//#region src/client.ts
+/** Adds the colors styles to the page once. The Vue, React, and Svelte components call it when they mount. */
+const addStyles = () => addStyles$1("colors", css);
+//#endregion
+export { addStyles as t };

package/dist/client.d.mts

@@ -8,5 +8,5 @@ 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;
+export declare const addStyles: () => void;
 //#endregion

package/dist/client.mjs

@@ -1,12 +1,3 @@
-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
+import { t as css } from "./styles-CZQmWAzs.mjs";
+import { t as addStyles } from "./client-B1HZxnNI.mjs";
 export { addStyles, css };

package/dist/html.mjs

@@ -1,18 +1,38 @@
-import src_default, { isColor } from "./index.mjs";
-import { t as css } from "./styles-gTSbKJ8j.mjs";
+import { n as src_default, t as isColor } from "./src-CGLpBNQy.mjs";
+import { t as css } from "./styles-CZQmWAzs.mjs";
 import { escapeHtml } from "comark/utils";
+//#region ../../shared/text.ts
+/**
+* A prop value as text. Comark writes strings, numbers, and booleans, so an object, array, function, or missing value
+* is no text. The `typeof` check, unlike `instanceof`, can't throw on a revoked proxy.
+*/
+function scalar(value) {
+	switch (typeof value) {
+		case "string": return value;
+		case "number":
+		case "boolean":
+		case "bigint":
+		case "symbol": return String(value);
+		default: return;
+	}
+}
+/** A prop value as text exactly as written, or empty when it has none. */
+const rawText = (value) => scalar(value) ?? "";
+//#endregion
+//#region ../../shared/html.ts
+/** A value as the inside of a double-quoted HTML attribute. */
+const attr = (value) => escapeHtml(rawText(value), { "\"": """ });
+//#endregion
 //#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);
+	const value = rawText(attrs.value);
+	const name = rawText(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>`;

package/dist/index.mjs

@@ -1,100 +1 @@
-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 };
+export { n as default, t as isColor } from "./src-CGLpBNQy.mjs";

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import src_default, { isColor } from "./index.mjs";
-import { addStyles } from "./client.mjs";
+import { n as src_default, t as isColor } from "./src-CGLpBNQy.mjs";
+import { t as addStyles } from "./client-B1HZxnNI.mjs";
 import { createElement, useEffect } from "react";
 //#region src/react.ts
 /** A color in inline code, or a line of a `::palette`, for `@comark/react`. */

package/dist/src-CGLpBNQy.mjs

@@ -0,0 +1,102 @@
+import { defineComarkPlugin } from "comark";
+import { textContent } from "comark/utils";
+//#region ../../shared/nodes.ts
+const isElement = (node) => Array.isArray(node) && node[0] !== null;
+const childrenOf = ([, , ...rest]) => rest;
+//#endregion
+//#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 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 n, isColor as t };

package/dist/style.css

@@ -1 +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}}}
+@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:calc(var(--_comark-radius) - 7px);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 → styles-CZQmWAzs.mjs}

@@ -43,16 +43,66 @@ const tokens = [
 		"#737373"
 	]
 ];
-const resolve = (scheme) => tokens.map((token) => `--_comark-${token[0]}:var(--comark-${token[0]},var(--${token[1]},var(--${token[2]},${token[scheme]})))`).join(";");
+const groups = {
+	status: Object.values({
+		success: [
+			"success",
+			"ui-success",
+			"success",
+			"#259f56",
+			"#59d38c"
+		],
+		danger: [
+			"danger",
+			"ui-error",
+			"destructive",
+			"#ee3533",
+			"#fd736d"
+		],
+		warning: [
+			"warning",
+			"ui-warning",
+			"",
+			"#d97706",
+			"#fbbf24"
+		],
+		info: [
+			"info",
+			"ui-info",
+			"",
+			"#2563eb",
+			"#60a5fa"
+		]
+	}),
+	shadow: [[
+		"shadow",
+		"",
+		"",
+		"0 4px 12px rgb(0 0 0/.12)",
+		"0 4px 12px rgb(0 0 0/.5)"
+	]]
+};
+const chain = (token, scheme) => {
+	const shadcn = token[2] ? `var(--${token[2]},${token[scheme]})` : token[scheme];
+	const nuxt = token[1] ? `var(--${token[1]},${shadcn})` : shadcn;
+	return `var(--comark-${token[0]},${nuxt})`;
+};
+const resolve = (list, scheme) => list.map((token) => `--_comark-${token[0]}:${chain(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.
+*
+* Every block gets the core tokens. Name `"status"` for `--comark-success`, `-danger`, `-warning`, and `-info`, and
+* `"shadow"` for `--comark-shadow`, so a block that never draws them doesn't carry them.
 */
-function theme(selector) {
+function theme(selector, ...extras) {
 	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)}}}`;
+	const added = extras.flatMap((name) => groups[name]);
+	const list = [...tokens, ...added];
+	const classes = added.length ? `:where(.light,.light *)${where}{${resolve(added, 3)}}:where(.dark,.dark *)${where}{${resolve(added, 4)}}` : "";
+	return `${where}{${resolve(list, 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(list, 4)}}}` + classes;
 }
 //#endregion
 //#region src/styles.ts
@@ -65,7 +115,7 @@ const fill = "background:linear-gradient(var(--cco),var(--cco)),repeating-conic-
 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-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:calc(var(--_comark-radius) - 7px);${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}}`,

package/dist/vue.mjs

@@ -1,5 +1,5 @@
-import src_default, { isColor } from "./index.mjs";
-import { addStyles } from "./client.mjs";
+import { n as src_default, t as isColor } from "./src-CGLpBNQy.mjs";
+import { t as addStyles } from "./client-B1HZxnNI.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`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comark-colors",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "description": "Color swatches next to inline code that holds a color, like GitLab, and ::palette grids of named colors. A Comark plugin.",
   "keywords": [
     "color",
@@ -56,7 +56,7 @@
     "react-dom": "^19.3.1",
     "svelte": "^5.57.2",
     "vue": "^3.5.44",
-    "comark-zoom": "0.7.5"
+    "comark-zoom": "0.8.0"
   },
   "peerDependencies": {
     "@comark/html": "^0.8.0",