@weasel-js/theme 1.9.2 → 1.9.4

package/dist/{chunk-CAMHNPQN.js → chunk-EFGZ56CE.js}

@@ -1,4 +1,5 @@
-import { themeAxes, fullSelection, selectionKey, resolveTheme, themeChain, isByAxis, generate, DEFAULT_CONSTRAINTS } from './chunk-NUILKH2Z.js';
+import { themeAxes, fullSelection, resolveTheme, themeChain, isByAxis, generate, DEFAULT_CONSTRAINTS } from './chunk-7LCRXZDY.js';
+import { isPlainObject } from '@weasel-js/registry';
 
 // src/generated/themes.ts
 var THEMES = {
@@ -62,6 +63,12 @@ var THEMES = {
         "--wzl-secondary-fg": "#dc9d15",
         "--wzl-fg-inverse": "#0e0f12",
         "--wzl-shadow": "rgba(0, 0, 0, 0.6)",
+        "--wzl-code-keyword": "#955cf9",
+        "--wzl-code-string": "#48e628",
+        "--wzl-code-number": "#e69628",
+        "--wzl-code-constant": "#3ee1cb",
+        "--wzl-code-property": "#36bff2",
+        "--wzl-code-name": "#fa4590",
         "--wzl-panel-surface": "#25272c",
         "--wzl-panel-border-color": "#25272c",
         "--wzl-panel-border-style": "solid",
@@ -139,8 +146,8 @@ var THEMES = {
         "--wzl-slider-thumb-size": "8px",
         "--wzl-slider-track-slop": "6px",
         "--wzl-slider-thumb-slop": "6px",
-        "--wzl-slider-track-mix": "18%",
-        "--wzl-slider-thumb-mix": "70%",
+        "--wzl-slider-track-mix": "40%",
+        "--wzl-slider-thumb-mix": "100%",
         "--wzl-handle-size": "9px",
         "--wzl-handle-size-sm": "7px",
         "--wzl-handle-size-lg": "10px",
@@ -234,6 +241,12 @@ var THEMES = {
         "--wzl-secondary-fg": "#dc9d15",
         "--wzl-fg-inverse": "#0e0f12",
         "--wzl-shadow": "rgba(0, 0, 0, 0.6)",
+        "--wzl-code-keyword": "#955cf9",
+        "--wzl-code-string": "#48e628",
+        "--wzl-code-number": "#e69628",
+        "--wzl-code-constant": "#3ee1cb",
+        "--wzl-code-property": "#36bff2",
+        "--wzl-code-name": "#fa4590",
         "--wzl-panel-surface": "#25272c",
         "--wzl-panel-border-color": "#25272c",
         "--wzl-panel-border-style": "solid",
@@ -311,8 +324,8 @@ var THEMES = {
         "--wzl-slider-thumb-size": "8px",
         "--wzl-slider-track-slop": "6px",
         "--wzl-slider-thumb-slop": "6px",
-        "--wzl-slider-track-mix": "18%",
-        "--wzl-slider-thumb-mix": "70%",
+        "--wzl-slider-track-mix": "40%",
+        "--wzl-slider-thumb-mix": "100%",
         "--wzl-handle-size": "9px",
         "--wzl-handle-size-sm": "7px",
         "--wzl-handle-size-lg": "10px",
@@ -406,6 +419,12 @@ var THEMES = {
         "--wzl-secondary-fg": "#dc9d15",
         "--wzl-fg-inverse": "#0e0f12",
         "--wzl-shadow": "rgba(0, 0, 0, 0.6)",
+        "--wzl-code-keyword": "#955cf9",
+        "--wzl-code-string": "#48e628",
+        "--wzl-code-number": "#e69628",
+        "--wzl-code-constant": "#3ee1cb",
+        "--wzl-code-property": "#36bff2",
+        "--wzl-code-name": "#fa4590",
         "--wzl-panel-surface": "#25272c",
         "--wzl-panel-border-color": "#25272c",
         "--wzl-panel-border-style": "solid",
@@ -483,8 +502,8 @@ var THEMES = {
         "--wzl-slider-thumb-size": "8px",
         "--wzl-slider-track-slop": "6px",
         "--wzl-slider-thumb-slop": "6px",
-        "--wzl-slider-track-mix": "18%",
-        "--wzl-slider-thumb-mix": "70%",
+        "--wzl-slider-track-mix": "40%",
+        "--wzl-slider-thumb-mix": "100%",
         "--wzl-handle-size": "9px",
         "--wzl-handle-size-sm": "7px",
         "--wzl-handle-size-lg": "10px",
@@ -578,6 +597,12 @@ var THEMES = {
         "--wzl-secondary-fg": "#016458",
         "--wzl-fg-inverse": "#f5f5f6",
         "--wzl-shadow": "rgba(0, 0, 0, 0.18)",
+        "--wzl-code-keyword": "#6d28d9",
+        "--wzl-code-string": "#15803d",
+        "--wzl-code-number": "#b45309",
+        "--wzl-code-constant": "#0f766e",
+        "--wzl-code-property": "#0369a1",
+        "--wzl-code-name": "#be123c",
         "--wzl-panel-surface": "#e6e7e9",
         "--wzl-panel-border-color": "#c9cbcf",
         "--wzl-panel-border-style": "solid",
@@ -750,6 +775,12 @@ var THEMES = {
         "--wzl-secondary-fg": "#016458",
         "--wzl-fg-inverse": "#f5f5f6",
         "--wzl-shadow": "rgba(0, 0, 0, 0.18)",
+        "--wzl-code-keyword": "#6d28d9",
+        "--wzl-code-string": "#15803d",
+        "--wzl-code-number": "#b45309",
+        "--wzl-code-constant": "#0f766e",
+        "--wzl-code-property": "#0369a1",
+        "--wzl-code-name": "#be123c",
         "--wzl-panel-surface": "#e6e7e9",
         "--wzl-panel-border-color": "#c9cbcf",
         "--wzl-panel-border-style": "solid",
@@ -922,6 +953,12 @@ var THEMES = {
         "--wzl-secondary-fg": "#016458",
         "--wzl-fg-inverse": "#f5f5f6",
         "--wzl-shadow": "rgba(0, 0, 0, 0.18)",
+        "--wzl-code-keyword": "#6d28d9",
+        "--wzl-code-string": "#15803d",
+        "--wzl-code-number": "#b45309",
+        "--wzl-code-constant": "#0f766e",
+        "--wzl-code-property": "#0369a1",
+        "--wzl-code-name": "#be123c",
         "--wzl-panel-surface": "#e6e7e9",
         "--wzl-panel-border-color": "#c9cbcf",
         "--wzl-panel-border-style": "solid",
@@ -1396,6 +1433,78 @@ var THEME_SOURCES = {
           "value": "rgba(0, 0, 0, 0.18)",
           "type": "color"
         }
+      },
+      "code-keyword": {
+        "by": "mode",
+        "dark": {
+          "ref": "swatch-violet",
+          "type": "color",
+          "description": "Keywords in highlighted code."
+        },
+        "light": {
+          "value": "#6d28d9",
+          "type": "color"
+        }
+      },
+      "code-string": {
+        "by": "mode",
+        "dark": {
+          "ref": "swatch-green",
+          "type": "color",
+          "description": "String literals in highlighted code."
+        },
+        "light": {
+          "value": "#15803d",
+          "type": "color"
+        }
+      },
+      "code-number": {
+        "by": "mode",
+        "dark": {
+          "ref": "swatch-amber",
+          "type": "color",
+          "description": "Numbers in highlighted code."
+        },
+        "light": {
+          "value": "#b45309",
+          "type": "color"
+        }
+      },
+      "code-constant": {
+        "by": "mode",
+        "dark": {
+          "ref": "swatch-teal",
+          "type": "color",
+          "description": "true, false, null and undefined in highlighted code."
+        },
+        "light": {
+          "value": "#0f766e",
+          "type": "color"
+        }
+      },
+      "code-property": {
+        "by": "mode",
+        "dark": {
+          "ref": "swatch-sky",
+          "type": "color",
+          "description": "Property keys and attribute names in highlighted code."
+        },
+        "light": {
+          "value": "#0369a1",
+          "type": "color"
+        }
+      },
+      "code-name": {
+        "by": "mode",
+        "dark": {
+          "ref": "swatch-rose",
+          "type": "color",
+          "description": "Functions, classes and other names in highlighted code."
+        },
+        "light": {
+          "value": "#be123c",
+          "type": "color"
+        }
       }
     },
     "components": {
@@ -1904,14 +2013,30 @@ var THEME_SOURCES = {
         "description": "How far past a range thumb's edge a press still grabs the thumb rather than landing on the track. Sits over the track's own slop."
       },
       "slider-track-mix": {
-        "value": "18%",
-        "type": "dimension",
-        "description": "Accent proportion in a range track, as a color-mix percentage \u2014 not a color. Mixed into a real property, never into another custom property."
+        "by": "mode",
+        "dark": {
+          "value": "40%",
+          "type": "dimension",
+          "description": "Proportion of accent-fg in a range track, as a color-mix percentage \u2014 not a color. Mixed into a real property, never into another custom property. Higher in dark mode, where a light tint of the accent sinks into the surface."
+        },
+        "light": {
+          "value": "18%",
+          "type": "dimension",
+          "description": "Proportion of accent-fg in a range track, as a color-mix percentage \u2014 not a color."
+        }
       },
       "slider-thumb-mix": {
-        "value": "70%",
-        "type": "dimension",
-        "description": "Accent proportion in a range thumb, as a color-mix percentage \u2014 not a color."
+        "by": "mode",
+        "dark": {
+          "value": "100%",
+          "type": "dimension",
+          "description": "Proportion of accent-fg in a range thumb, as a color-mix percentage \u2014 not a color. Solid in dark mode."
+        },
+        "light": {
+          "value": "70%",
+          "type": "dimension",
+          "description": "Proportion of accent-fg in a range thumb, as a color-mix percentage \u2014 not a color."
+        }
       },
       "handle-size": {
         "value": "9px",
@@ -2645,6 +2770,78 @@ var BAKED_THEMES = {
           "value": "rgba(0, 0, 0, 0.18)"
         }
       },
+      "code-keyword": {
+        "by": "mode",
+        "dark": {
+          "type": "color",
+          "value": "{swatch-violet}",
+          "description": "Keywords in highlighted code."
+        },
+        "light": {
+          "type": "color",
+          "value": "#6d28d9"
+        }
+      },
+      "code-string": {
+        "by": "mode",
+        "dark": {
+          "type": "color",
+          "value": "{swatch-green}",
+          "description": "String literals in highlighted code."
+        },
+        "light": {
+          "type": "color",
+          "value": "#15803d"
+        }
+      },
+      "code-number": {
+        "by": "mode",
+        "dark": {
+          "type": "color",
+          "value": "{swatch-amber}",
+          "description": "Numbers in highlighted code."
+        },
+        "light": {
+          "type": "color",
+          "value": "#b45309"
+        }
+      },
+      "code-constant": {
+        "by": "mode",
+        "dark": {
+          "type": "color",
+          "value": "{swatch-teal}",
+          "description": "true, false, null and undefined in highlighted code."
+        },
+        "light": {
+          "type": "color",
+          "value": "#0f766e"
+        }
+      },
+      "code-property": {
+        "by": "mode",
+        "dark": {
+          "type": "color",
+          "value": "{swatch-sky}",
+          "description": "Property keys and attribute names in highlighted code."
+        },
+        "light": {
+          "type": "color",
+          "value": "#0369a1"
+        }
+      },
+      "code-name": {
+        "by": "mode",
+        "dark": {
+          "type": "color",
+          "value": "{swatch-rose}",
+          "description": "Functions, classes and other names in highlighted code."
+        },
+        "light": {
+          "type": "color",
+          "value": "#be123c"
+        }
+      },
       "panel-surface": {
         "type": "color",
         "value": "{surface-raised}",
@@ -3032,14 +3229,30 @@ var BAKED_THEMES = {
         "description": "How far past a range thumb's edge a press still grabs the thumb rather than landing on the track. Sits over the track's own slop."
       },
       "slider-track-mix": {
-        "type": "dimension",
-        "value": "18%",
-        "description": "Accent proportion in a range track, as a color-mix percentage \u2014 not a color. Mixed into a real property, never into another custom property."
+        "by": "mode",
+        "dark": {
+          "type": "dimension",
+          "value": "40%",
+          "description": "Proportion of accent-fg in a range track, as a color-mix percentage \u2014 not a color. Mixed into a real property, never into another custom property. Higher in dark mode, where a light tint of the accent sinks into the surface."
+        },
+        "light": {
+          "type": "dimension",
+          "value": "18%",
+          "description": "Proportion of accent-fg in a range track, as a color-mix percentage \u2014 not a color."
+        }
       },
       "slider-thumb-mix": {
-        "type": "dimension",
-        "value": "70%",
-        "description": "Accent proportion in a range thumb, as a color-mix percentage \u2014 not a color."
+        "by": "mode",
+        "dark": {
+          "type": "dimension",
+          "value": "100%",
+          "description": "Proportion of accent-fg in a range thumb, as a color-mix percentage \u2014 not a color. Solid in dark mode."
+        },
+        "light": {
+          "type": "dimension",
+          "value": "70%",
+          "description": "Proportion of accent-fg in a range thumb, as a color-mix percentage \u2014 not a color."
+        }
       },
       "handle-size": {
         "type": "dimension",
@@ -3312,9 +3525,7 @@ var BAKED_THEMES = {
     }
   }
 };
-
-// src/theme.ts
-var isPinObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v) && "value" in v;
+var isPinObject = (v) => isPlainObject(v) && "value" in v;
 function toRaw(v) {
   if (isByAxis(v)) {
     const out = { by: v.by };
@@ -3355,45 +3566,94 @@ function defineTheme(input) {
   };
 }
 
-// src/applyTheme.ts
+// src/themeSheet.ts
 var STYLE_ID = "wzl-themes";
-var emitted = /* @__PURE__ */ new Map();
-var sheet = null;
-var styleEl = null;
-function canAdopt() {
-  return typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype && Array.isArray(document.adoptedStyleSheets);
+var sheets = /* @__PURE__ */ new WeakMap();
+function styleRootOf(el) {
+  const root = el.getRootNode();
+  return root instanceof (el.ownerDocument.defaultView?.ShadowRoot ?? ShadowRoot) ? root : el.ownerDocument;
 }
-function flushRules() {
-  const css = [...emitted.values()].join("\n");
-  if (canAdopt()) {
-    if (!sheet) {
-      sheet = new CSSStyleSheet();
-      document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+var documentOf = (root) => "host" in root ? root.ownerDocument : root;
+var only = (id) => id === 0 ? "" : `:where([data-wzl-variant='${id}'])`;
+function write(root, held) {
+  const css = [...held.rules].flatMap(([selector, variants]) => (
+    // The bare rule first: it matches a variant's elements too, and the variant's has to win the tie.
+    [...variants].sort((a, b) => a.id - b.id).map((v) => `${selector}${only(v.id)} { ${v.body} }`)
+  )).join("\n");
+  const win = documentOf(root).defaultView;
+  const Sheet = win?.CSSStyleSheet;
+  if (Sheet && "replaceSync" in Sheet.prototype && Array.isArray(root.adoptedStyleSheets)) {
+    if (!held.sheet) {
+      held.sheet = new Sheet();
+      root.adoptedStyleSheets = [...root.adoptedStyleSheets, held.sheet];
     }
-    sheet.replaceSync(css);
+    held.sheet.replaceSync(css);
     return;
   }
-  if (!styleEl) {
-    styleEl = document.createElement("style");
-    styleEl.id = STYLE_ID;
-    document.head.appendChild(styleEl);
+  if (!held.styleEl) {
+    held.styleEl = documentOf(root).createElement("style");
+    held.styleEl.id = STYLE_ID;
+    ("host" in root ? root : root.head).appendChild(held.styleEl);
+  }
+  held.styleEl.textContent = css;
+}
+function holdRule(root, selector, body) {
+  let held = sheets.get(root);
+  if (!held) sheets.set(root, held = { rules: /* @__PURE__ */ new Map(), sheet: null, styleEl: null });
+  const variants = held.rules.get(selector) ?? [];
+  let variant = variants.find((v) => v.body === body);
+  if (variant) {
+    variant.holds++;
+  } else {
+    let id = 0;
+    while (variants.some((v) => v.id === id)) id++;
+    variant = { id, body, holds: 1 };
+    held.rules.set(selector, [...variants, variant]);
+    write(root, held);
   }
-  styleEl.textContent = css;
+  const mine = variant;
+  const sheet = held;
+  let released = false;
+  return {
+    variant: mine.id,
+    release: () => {
+      if (released) return;
+      released = true;
+      if (--mine.holds > 0) return;
+      const left = (sheet.rules.get(selector) ?? []).filter((v) => v !== mine);
+      if (left.length > 0) sheet.rules.set(selector, left);
+      else sheet.rules.delete(selector);
+      write(root, sheet);
+    }
+  };
 }
+
+// src/applyTheme.ts
+var holds = /* @__PURE__ */ new WeakMap();
 function applyTheme(el, theme, selection = {}) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined") return () => {
+  };
   const axes = themeAxes(theme);
   const sel = fullSelection(axes, selection);
-  const key = `${theme.name}::${selectionKey(axes, sel)}`;
   const body = Object.entries(resolveTheme(theme, sel)).map(([name, value]) => `${name}: ${value};`).join(" ");
-  const attrs = Object.keys(axes).map((a) => `[data-wzl-${a}='${sel[a]}']`).join("");
-  const rule = `[data-wzl-theme='${theme.name}']${attrs} { ${body} }`;
-  if (emitted.get(key) !== rule) {
-    emitted.set(key, rule);
-    flushRules();
-  }
+  const names = Object.keys(axes);
+  const selector = `[data-wzl-theme='${theme.name}']${names.map((a) => `[data-wzl-${a}='${sel[a]}']`).join("")}`;
+  const { variant, release: releaseRule } = holdRule(styleRootOf(el), selector, body);
+  holds.get(el)?.();
   el.setAttribute("data-wzl-theme", theme.name);
-  for (const a of Object.keys(axes)) el.setAttribute(`data-wzl-${a}`, sel[a]);
+  for (const a of names) el.setAttribute(`data-wzl-${a}`, sel[a]);
+  if (variant === 0) el.removeAttribute("data-wzl-variant");
+  else el.setAttribute("data-wzl-variant", String(variant));
+  const letGo = () => {
+    holds.delete(el);
+    releaseRule();
+  };
+  holds.set(el, letGo);
+  return () => {
+    if (holds.get(el) !== letGo) return;
+    letGo();
+    for (const a of ["theme", "variant", ...names]) el.removeAttribute(`data-wzl-${a}`);
+  };
 }
 
 // src/colorMode.ts
@@ -3449,5 +3709,5 @@ function colorCount(list, ctx = defaultContext()) {
 }
 
 export { BAKED_THEMES, THEMES, THEME_SOURCES, applyTheme, colorAt, colorCount, colorCssAt, defineTheme, isColorModePreference, rampSteps, themeTones, weaselTheme };
-//# sourceMappingURL=chunk-CAMHNPQN.js.map
-//# sourceMappingURL=chunk-CAMHNPQN.js.map
+//# sourceMappingURL=chunk-EFGZ56CE.js.map
+//# sourceMappingURL=chunk-EFGZ56CE.js.map