comark-colors 0.8.2 → 0.9.1

package/dist/{client-BoNiDu4Z.mjs → client-Brl16Aea.mjs}

@@ -1,4 +1,4 @@
-import { t as css } from "./styles-B1MZYd1F.mjs";
+import { t as css } from "./styles-B9x56xx_.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

package/dist/client.mjs

@@ -1,3 +1,3 @@
-import { t as css } from "./styles-B1MZYd1F.mjs";
-import { t as addStyles } from "./client-BoNiDu4Z.mjs";
+import { t as css } from "./styles-B9x56xx_.mjs";
+import { t as addStyles } from "./client-Brl16Aea.mjs";
 export { addStyles, css };

package/dist/html.mjs

@@ -1,5 +1,5 @@
 import { n as src_default, t as isColor } from "./src-CGLpBNQy.mjs";
-import { t as css } from "./styles-B1MZYd1F.mjs";
+import { t as css } from "./styles-B9x56xx_.mjs";
 import { escapeHtml } from "comark/utils";
 //#region ../../shared/text.ts
 /**

package/dist/react.mjs

@@ -1,5 +1,5 @@
 import { n as src_default, t as isColor } from "./src-CGLpBNQy.mjs";
-import { t as addStyles } from "./client-BoNiDu4Z.mjs";
+import { t as addStyles } from "./client-Brl16Aea.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/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: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}}}
+@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(:not(.light,.light *)):is(: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(.dark,.dark *):is(: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-B1MZYd1F.mjs → styles-B9x56xx_.mjs}

@@ -112,10 +112,18 @@ const chain = (token, scheme) => {
 };
 const resolve = (list, scheme) => list.map((token) => `--_comark-${token[0]}:${chain(token, scheme)}`).join(";");
 /**
+* `declarations` on `selector` in dark mode: the system's, unless a `.light` class sits on the element or above it, or
+* a `.dark` class there whatever the system says. Either class pins a page's scheme.
+*/
+function dark(selector, declarations) {
+	return `@media (prefers-color-scheme:dark){:where(:not(.light,.light *)):is(${selector}){${declarations}}}:where(.dark,.dark *):is(${selector}){${declarations}}`;
+}
+/**
 * 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.
+* They resolve on the component rather than `:root`, so a `--comark-*` set on any ancestor still inherits down.
+* `:where()` keeps them at zero specificity. The neutral theme follows the system's color mode, and a `.light` or
+* `.dark` class on the component or above it pins one (see `dark()`).
 *
 * Every block gets the core tokens. Name `"status"` for `--comark-success`, `-danger`, `-warning`, and `-info`,
 * `"primary"` for `--comark-primary`, `-primary-foreground`, and `-secondary`, and `"shadow"` for `--comark-shadow`, so
@@ -123,11 +131,8 @@ const resolve = (list, scheme) => list.map((token) => `--_comark-${token[0]}:${c
 */
 function theme(selector, ...extras) {
 	const where = `:where(${selector})`;
-	const added = extras.flatMap((name) => groups[name]);
-	const list = [...tokens, ...added];
-	const schemed = added.filter((token) => token[3] !== token[4]);
-	const classes = schemed.length ? `:where(.light,.light *)${where}{${resolve(schemed, 3)}}:where(.dark,.dark *)${where}{${resolve(schemed, 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;
+	const list = [...tokens, ...extras.flatMap((name) => groups[name])];
+	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))}` + dark(where, resolve(list, 4));
 }
 //#endregion
 //#region src/styles.ts

package/dist/vue.mjs

@@ -1,5 +1,5 @@
 import { n as src_default, t as isColor } from "./src-CGLpBNQy.mjs";
-import { t as addStyles } from "./client-BoNiDu4Z.mjs";
+import { t as addStyles } from "./client-Brl16Aea.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.8.2",
+  "version": "0.9.1",
   "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.8.2"
+    "comark-zoom": "0.9.1"
   },
   "peerDependencies": {
     "@comark/html": "^0.8.0",