@maz-ui/themes 4.0.0-beta.0

package/dist/utils/css-generator.js

@@ -0,0 +1,166 @@
+import { generateColorScale as C } from "./color-utils.js";
+const h = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "success",
+  "success-foreground",
+  "warning",
+  "warning-foreground",
+  "info",
+  "info-foreground",
+  "contrast",
+  "contrast-foreground",
+  "muted",
+  "shadow",
+  "border"
+], b = [
+  "radius",
+  "font-family",
+  "base-font-size",
+  "border-width"
+], S = ["primary", "secondary", "accent", "destructive", "success", "warning", "info", "contrast", "background", "foreground", "border", "muted", "overlay", "shadow"];
+function O(r, o = {}) {
+  const {
+    criticalColors: e = h,
+    criticalFoundation: c = b,
+    mode: n = "both",
+    darkSelectorStrategy: a = "class",
+    prefix: i = "maz"
+  } = o, d = m(r.colors.light, e), s = m(r.colors.dark, e), l = y(r.foundation, c);
+  let t = `@layer maz-ui-theme {
+`;
+  return (n === "light" || n === "both") && (t += f({
+    selector: ":root",
+    colors: d,
+    foundation: l,
+    prefix: i
+  })), (n === "dark" || n === "both") && (t += f({
+    selector: a === "media" ? ":root" : ".dark",
+    mediaQuery: a === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
+    colors: s,
+    foundation: l,
+    prefix: i
+  })), t += `}
+`, t;
+}
+function j(r, o = {}) {
+  const {
+    excludeCritical: e = h,
+    mode: c = "both",
+    darkSelectorStrategy: n = "class",
+    prefix: a = "maz",
+    includeColorScales: i = !0
+  } = o, d = g(r.colors.light, e), s = g(r.colors.dark, e), l = k(r.foundation, b);
+  let t = `@layer maz-ui-theme {
+`;
+  return (c === "light" || c === "both") && (t += f({
+    selector: ":root",
+    colors: d,
+    foundation: l,
+    prefix: a,
+    includeScales: i,
+    preset: r
+  })), (c === "dark" || c === "both") && (t += f({
+    selector: n === "media" ? ":root" : ".dark",
+    mediaQuery: n === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
+    colors: s,
+    foundation: c === "dark" ? l : void 0,
+    // Appearance only if dark mode only
+    prefix: a,
+    includeScales: i,
+    preset: r,
+    isDark: !0
+  })), t += `}
+`, t;
+}
+function m(r, o) {
+  return Object.fromEntries(
+    o.filter((e) => r[e]).map((e) => [e, r[e]])
+  );
+}
+function y(r, o) {
+  return r ? Object.fromEntries(
+    o.filter((e) => r[e]).map((e) => [e, r[e]])
+  ) : {};
+}
+function g(r, o) {
+  return Object.fromEntries(
+    Object.entries(r).filter(([e]) => !o.includes(e))
+  );
+}
+function k(r, o) {
+  return r ? Object.fromEntries(
+    Object.entries(r).filter(([e]) => !o.includes(e))
+  ) : {};
+}
+function f({
+  selector: r,
+  mediaQuery: o,
+  colors: e,
+  foundation: c,
+  prefix: n,
+  includeScales: a = !1,
+  preset: i,
+  isDark: d = !1
+}) {
+  const s = [];
+  if (e && Object.entries(e).forEach(([t, u]) => {
+    u && s.push(`  --${n}-${t}: ${u};`);
+  }), c && Object.entries(c).forEach(([t, u]) => {
+    u && s.push(`  --${n}-${t}: ${u};`);
+  }), a && i) {
+    const t = d ? i.colors.dark : i.colors.light, u = E(t, n);
+    s.push(...u);
+  }
+  const l = s.join(`
+`);
+  return o ? `
+  ${o} {
+    ${r} {
+${l.replace(/^/gm, "  ")}
+    }
+  }
+` : `
+  ${r} {
+${l}
+  }
+`;
+}
+function E(r, o) {
+  const e = [];
+  return S.forEach((c) => {
+    const n = r[c];
+    if (n) {
+      const a = C(n);
+      Object.entries(a).forEach(([i, d]) => {
+        e.push(`  --${o}-${c}-${i}: ${d};`);
+      });
+    }
+  }), e;
+}
+function p(r, o = "maz-theme-vars") {
+  if (typeof document > "u")
+    return;
+  let e = document.getElementById(o);
+  e || (e = document.createElement("style"), e.id = o, document.head.appendChild(e)), e.textContent = r;
+}
+function v(r = "maz-theme-vars") {
+  if (typeof document > "u")
+    return;
+  const o = document.getElementById(r);
+  o && o.remove();
+}
+export {
+  O as generateCriticalCSS,
+  j as generateFullCSS,
+  p as injectCSS,
+  v as removeCSS
+};

package/dist/utils/get-color-mode.js

@@ -0,0 +1,14 @@
+import { getCookie as t } from "./cookie-storage.js";
+function o(e) {
+  if (e && ["light", "dark"].includes(e))
+    return e;
+  const r = t("maz-color-mode");
+  return r && ["light", "dark"].includes(r) ? r : i();
+}
+function i() {
+  return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+export {
+  o as getColorMode,
+  i as getSystemPrefersDark
+};

package/dist/utils/get-preset.js

@@ -0,0 +1,28 @@
+function t(i) {
+  return typeof i == "object" && i !== null && !!i.name;
+}
+async function o(i) {
+  if (t(i))
+    return i;
+  if (i === "mazUi" || !i || i === "maz-ui") {
+    const { mazUi: n } = await import("../presets/mazUi.js");
+    return n;
+  }
+  if (i === "ocean") {
+    const { ocean: n } = await import("../presets/ocean.js");
+    return n;
+  }
+  if (i === "pristine") {
+    const { pristine: n } = await import("../presets/pristine.js");
+    return n;
+  }
+  if (i === "obsidian") {
+    const { obsidian: n } = await import("../presets/obsidian.js");
+    return n;
+  }
+  throw new TypeError(`[@maz-ui/themes] Preset ${i} not found`);
+}
+export {
+  o as getPreset,
+  t as isPresetObject
+};

package/dist/utils/index.js

@@ -0,0 +1,22 @@
+import { adjustColorLightness as o, formatHSL as t, generateColorScale as s, getContrastColor as C, parseHSL as S } from "./color-utils.js";
+import { getCookie as g, setCookie as m } from "./cookie-storage.js";
+import { generateCriticalCSS as l, generateFullCSS as p, injectCSS as f, removeCSS as n } from "./css-generator.js";
+import { getPreset as c, isPresetObject as j } from "./get-preset.js";
+import { deepMerge as P, mergePresets as d } from "./preset-merger.js";
+export {
+  o as adjustColorLightness,
+  P as deepMerge,
+  t as formatHSL,
+  s as generateColorScale,
+  l as generateCriticalCSS,
+  p as generateFullCSS,
+  C as getContrastColor,
+  g as getCookie,
+  c as getPreset,
+  f as injectCSS,
+  j as isPresetObject,
+  d as mergePresets,
+  S as parseHSL,
+  n as removeCSS,
+  m as setCookie
+};

package/dist/utils/preset-merger.js

@@ -0,0 +1,34 @@
+function f(n, o) {
+  return {
+    name: o.name || n.name,
+    foundation: {
+      ...n.foundation,
+      ...o.foundation
+    },
+    colors: {
+      light: u(n.colors.light, o.colors?.light),
+      dark: u(n.colors.dark, o.colors?.dark)
+    }
+  };
+}
+function u(n, o) {
+  return o ? {
+    ...n,
+    ...o
+  } : n;
+}
+function l(n, o) {
+  const t = { ...n };
+  for (const r in o) {
+    const c = o[r], e = t[r];
+    c !== void 0 && (i(c) && i(e) ? t[r] = l(e, c) : t[r] = c);
+  }
+  return t;
+}
+function i(n) {
+  return n !== null && typeof n == "object" && !Array.isArray(n);
+}
+export {
+  l as deepMerge,
+  f as mergePresets
+};

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@maz-ui/themes",
+  "type": "module",
+  "version": "4.0.0-beta.0",
+  "description": "Theme system for Maz-UI with TypeScript support and CSS variables",
+  "author": "Louis Mazel <me@loicmazuel.com>",
+  "license": "MIT",
+  "homepage": "https://maz-ui.com/guide/themes",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LouisMazel/maz-ui.git"
+  },
+  "bugs": "https://github.com/LouisMazel/maz-ui/issues",
+  "keywords": [
+    "vue",
+    "theme",
+    "css-variables",
+    "typescript",
+    "maz-ui"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./presets": {
+      "types": "./dist/types/presets/index.d.ts",
+      "import": "./dist/presets/index.js"
+    },
+    "./presets/*": {
+      "types": "./dist/types/presets/*.d.ts",
+      "import": "./dist/presets/*.js"
+    },
+    "./composables": {
+      "types": "./dist/types/composables/index.d.ts",
+      "import": "./dist/composables/index.js"
+    },
+    "./composables/*": {
+      "types": "./dist/types/composables/*.d.ts",
+      "import": "./dist/composables/*.js"
+    },
+    "./utils": {
+      "types": "./dist/types/utils/index.d.ts",
+      "import": "./dist/utils/index.js"
+    },
+    "./utils/*": {
+      "types": "./dist/types/utils/*.d.ts",
+      "import": "./dist/utils/*.js"
+    },
+    "./build": {
+      "types": "./dist/types/build/index.d.ts",
+      "import": "./dist/build/index.js"
+    },
+    "./build/*": {
+      "types": "./dist/types/build/*.d.ts",
+      "import": "./dist/build/*.js"
+    },
+    "./plugin": {
+      "types": "./dist/types/plugin.d.ts",
+      "import": "./dist/plugin/index.js"
+    },
+    "./*": "./*"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "LICENSE",
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "vite:dev": "vite build --watch",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "pre-commit": "lint-staged",
+    "test": "vitest",
+    "test:unit": "vitest",
+    "test:unit:watch": "vitest watch",
+    "test:unit:coverage": "vitest run --coverage",
+    "test:unit:coverage:watch": "vitest watch --coverage",
+    "test:unit:coverage:master": "vitest run --coverage --changed master"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "glob": "catalog:",
+    "typescript": "^5.8.3",
+    "vue": "catalog:",
+    "vue-tsc": "^2.2.10"
+  },
+  "lint-staged": {
+    "*.{js,ts,vue,mjs,mts,cjs,md}": "cross-env NODE_ENV=production eslint --fix"
+  },
+  "gitHead": "9ef7beb4feeee0b0cb44e7df8af7115d5d5ef334"
+}