npm - @noirmd/previewer - Versions diffs - 2.0.0 → 2.0.1 - Mend

@noirmd/previewer 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/variables.css CHANGED Viewed

@@ -3,6 +3,24 @@
    Override-friendly design tokens. Host themes can win by
    defining --color-* variables; fallbacks are used otherwise.
+   Fallback chain per token:
+     1. daisyUI v5 / Tailwind v4 theme var  (--color-primary, ...)
+     2. App-specific --color-* var          (--color-accent-primary, ...)
+     3. daisyUI v4 theme var                (--p, --b1, --bc, ... — raw
+        components wrapped in oklch(); v4 normalizes every input
+        format to oklch, so this is safe)
+     4. NoirMD default
+   Tokens are defined on BOTH :root and .nr-prose:
+   - :root makes them resolve everywhere, including elements
+     teleported to <body> (modals/card dialogs render outside
+     .nr-prose), on any host page regardless of how the host
+     scopes .nr-prose.
+   - .nr-prose re-declares them redundantly so tokens always
+     resolve inside prose even if the host overrides :root.
+   The module never defines --color-* itself, so host themes
+   always win.
    ============================================================ */
 /* ── Material Icons Round (self-hosted) ────────────────────
@@ -35,18 +53,37 @@
   -webkit-font-smoothing: antialiased;
 }
+/* ── Design tokens ───────────────────────────────────────── */
+:root {
+  --nr-bg: var(--color-base-100, var(--color-background-primary, oklch(var(--b1, 15% 0.01 260) / 1)));
+  --nr-bg-secondary: var(--color-base-200, var(--color-background-secondary-solid, oklch(var(--b2, 20% 0.02 260) / 1)));
+  --nr-text: var(--color-base-content, var(--color-text-primary, oklch(var(--bc, 92% 0.02 260) / 1)));
+  --nr-text-secondary: color-mix(in oklab, var(--color-base-content, var(--color-text-secondary, oklch(var(--bc, 92% 0.02 260) / 1))) 72%, transparent);
+  --nr-border: var(--color-base-300, var(--color-border, oklch(var(--b3, 25% 0.03 260) / 1)));
+  --nr-accent: var(--color-primary, var(--color-accent, var(--color-accent-primary, oklch(var(--p, 55% 0.3 240) / 1))));
+  --nr-accent-hover: color-mix(in oklab, var(--nr-accent) 85%, white);
+  --nr-info: var(--color-info, oklch(var(--in, 70% 0.2 220) / 1));
+  --nr-warning: var(--color-warning, oklch(var(--wa, 80% 0.25 80) / 1));
+  --nr-danger: var(--color-error, oklch(var(--er, 65% 0.3 30) / 1));
+  --nr-success: var(--color-success, oklch(var(--su, 65% 0.25 140) / 1));
+  --nr-radius: 1rem;
+  --nr-radius-sm: 0.5rem;
+  --nr-radius-lg: 1.5rem;
+}
 .nr-prose {
-  --nr-bg: var(--color-background-primary, #0f172a);
-  --nr-bg-secondary: var(--color-background-secondary-solid, #1e293b);
-  --nr-text: var(--color-text-primary, #e2e8f0);
-  --nr-text-secondary: var(--color-text-secondary, #94a3b8);
-  --nr-border: var(--color-border, #334155);
-  --nr-accent: var(--color-accent-primary, #0ea5e9);
-  --nr-accent-hover: var(--color-accent-hover, #38bdf8);
-  --nr-info: #3b82f6;
-  --nr-warning: #f59e0b;
-  --nr-danger: #ef4444;
-  --nr-success: #22c55e;
+  --nr-bg: var(--color-base-100, var(--color-background-primary, oklch(var(--b1, 15% 0.01 260) / 1)));
+  --nr-bg-secondary: var(--color-base-200, var(--color-background-secondary-solid, oklch(var(--b2, 20% 0.02 260) / 1)));
+  --nr-text: var(--color-base-content, var(--color-text-primary, oklch(var(--bc, 92% 0.02 260) / 1)));
+  --nr-text-secondary: color-mix(in oklab, var(--color-base-content, var(--color-text-secondary, oklch(var(--bc, 92% 0.02 260) / 1))) 72%, transparent);
+  --nr-border: var(--color-base-300, var(--color-border, oklch(var(--b3, 25% 0.03 260) / 1)));
+  --nr-accent: var(--color-primary, var(--color-accent, var(--color-accent-primary, oklch(var(--p, 55% 0.3 240) / 1))));
+  --nr-accent-hover: color-mix(in oklab, var(--nr-accent) 85%, white);
+  --nr-info: var(--color-info, oklch(var(--in, 70% 0.2 220) / 1));
+  --nr-warning: var(--color-warning, oklch(var(--wa, 80% 0.25 80) / 1));
+  --nr-danger: var(--color-error, oklch(var(--er, 65% 0.3 30) / 1));
+  --nr-success: var(--color-success, oklch(var(--su, 65% 0.25 140) / 1));
   --nr-radius: 1rem;
   --nr-radius-sm: 0.5rem;
   --nr-radius-lg: 1.5rem;

package/dist/vue.cjs CHANGED Viewed

@@ -11335,7 +11335,10 @@ var modalDirective = ({ props, renderSlot }) => {
   const dialog = createModal(modalTitle);
   const body = dialog.querySelector(".nr-modal__body");
   if (body) {
-    body.appendChild(renderSlot("default"));
+    const prose = document.createElement("div");
+    prose.className = "nr-prose";
+    prose.appendChild(renderSlot("default"));
+    body.appendChild(prose);
   }
   btn.addEventListener("click", () => {
     if (!dialog.open) {
@@ -11489,8 +11492,10 @@ var cardDirective = ({
     const dialog = createModal(title || "Detalles");
     const modalBody = dialog.querySelector(".nr-modal__body");
     if (modalBody) {
-      const contentSlot = renderSlot("content") || renderSlot("default");
-      modalBody.appendChild(contentSlot);
+      const prose = document.createElement("div");
+      prose.className = "nr-prose";
+      prose.appendChild(renderSlot("content") || renderSlot("default"));
+      modalBody.appendChild(prose);
     }
     card.addEventListener("click", () => {
       if (!dialog.open) {
@@ -11847,6 +11852,75 @@ function renderDirective(element, ctx, allElements) {
 // vue/useTailwindCDN.ts
 var import_vue = require("vue");
+// vanilla/tailwindTheme.ts
+var THEME_STYLE_ID = "nr-tailwind-theme";
+var NR_THEME_CSS = `
+@theme {
+  --color-primary: var(--color-accent-primary, oklch(var(--p, 55% 0.3 240) / 1));
+  --color-primary-content: #ffffff;
+  --color-secondary: oklch(var(--s, 55% 0.25 200) / 1);
+  --color-secondary-content: #ffffff;
+  --color-accent: var(--color-accent-primary, oklch(var(--a, 65% 0.25 160) / 1));
+  --color-accent-content: #ffffff;
+  --color-neutral: oklch(var(--n, 50% 0.05 240) / 1);
+  --color-neutral-content: var(--color-text-primary, oklch(var(--nc, 92% 0.02 240) / 1));
+  --color-base-100: var(--color-background-primary, oklch(var(--b1, 15% 0.01 260) / 1));
+  --color-base-200: var(--color-background-secondary-solid, oklch(var(--b2, 20% 0.02 260) / 1));
+  --color-base-300: var(--color-border, oklch(var(--b3, 25% 0.03 260) / 1));
+  --color-base-content: var(--color-text-primary, oklch(var(--bc, 92% 0.02 260) / 1));
+  --color-info: oklch(var(--in, 70% 0.2 220) / 1);
+  --color-info-content: #ffffff;
+  --color-success: oklch(var(--su, 65% 0.25 140) / 1);
+  --color-success-content: #ffffff;
+  --color-warning: oklch(var(--wa, 80% 0.25 80) / 1);
+  --color-warning-content: #1f2937;
+  --color-error: oklch(var(--er, 65% 0.3 30) / 1);
+  --color-error-content: #ffffff;
+}
+`;
+function getVar(root, name) {
+  return getComputedStyle(root).getPropertyValue(name).trim();
+}
+function stylesheetHasTheme() {
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules = null;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (!rules) continue;
+    for (const rule of Array.from(rules)) {
+      const css2 = rule.cssText || "";
+      if (css2.includes("@theme") || css2.includes('@plugin "daisyui"')) return true;
+    }
+  }
+  return false;
+}
+function hasHostTheme() {
+  if (typeof window === "undefined" || typeof document === "undefined") return true;
+  if (getVar(document.documentElement, "--color-primary")) return true;
+  if (getVar(document.documentElement, "--color-base-100")) return true;
+  if (document.body && (getVar(document.body, "--color-primary") || getVar(document.body, "--color-base-100"))) return true;
+  return stylesheetHasTheme();
+}
+function injectNRTailwindTheme() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(THEME_STYLE_ID)) return;
+  if (hasHostTheme()) return;
+  const style = document.createElement("style");
+  style.id = THEME_STYLE_ID;
+  style.setAttribute("type", "text/tailwindcss");
+  style.textContent = NR_THEME_CSS;
+  document.head.appendChild(style);
+}
+function removeNRTailwindTheme() {
+  if (typeof document === "undefined") return;
+  document.getElementById(THEME_STYLE_ID)?.remove();
+}
+// vue/useTailwindCDN.ts
 var CDN_URL = "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4";
 var SCRIPT_ID = "tailwind-cdn-v4-runtime";
 var CONFIG_ID = "tailwind-cdn-v4-config";
@@ -11869,6 +11943,7 @@ function useLazyTailwindCDN(enabled) {
       configScript.textContent = TAILWIND_CDN_CONFIG;
       document.head.appendChild(configScript);
     }
+    injectNRTailwindTheme();
     if (!document.getElementById(SCRIPT_ID)) {
       const script = document.createElement("script");
       script.id = SCRIPT_ID;
@@ -11882,6 +11957,7 @@ function useLazyTailwindCDN(enabled) {
     if ((window.__twCDNRefs ?? 0) <= 0) {
       document.getElementById(SCRIPT_ID)?.remove();
       document.getElementById(CONFIG_ID)?.remove();
+      removeNRTailwindTheme();
       window.__twCDNRefs = 0;
     }
   };
@@ -11918,6 +11994,7 @@ function preloadTailwindCDN() {
       configScript.textContent = TAILWIND_CDN_CONFIG;
       document.head.appendChild(configScript);
     }
+    injectNRTailwindTheme();
     const script = document.createElement("script");
     script.id = SCRIPT_ID;
     script.src = CDN_URL;