vlite3 1.4.8 → 1.4.10

package/components/ThemeProvider/themeVars.js

@@ -0,0 +1,376 @@
+import { hexToHSL as s, mixColorHex as a } from "../../utils/colorUtils.js";
+const x = 16, k = 1.25, y = 8, $ = 1440, F = (r) => `${r} !important`, g = (r, o) => {
+  const l = Number(r);
+  return Number.isFinite(l) && l > 0 ? l : o;
+}, w = (r, o) => {
+  const l = Number(r);
+  return Number.isFinite(l) && l >= 0 ? l : o;
+}, i = (r) => Number.parseFloat(r.toFixed(8)).toString(), E = [
+  "0.5",
+  "1",
+  "1.5",
+  "2",
+  "2.5",
+  "3",
+  "3.5",
+  "4",
+  "4.5",
+  "5",
+  "5.5",
+  "6",
+  "6.5",
+  "7",
+  "7.5",
+  "8",
+  "8.5",
+  "9",
+  "9.5",
+  "10",
+  "10.5",
+  "11",
+  "11.5",
+  "12",
+  "12.5",
+  "13",
+  "13.5",
+  "14",
+  "14.5",
+  "15",
+  "15.5",
+  "16",
+  "16.5",
+  "17",
+  "17.5",
+  "18",
+  "18.5",
+  "19",
+  "19.5",
+  "20"
+], B = {
+  1: 0.95,
+  "1.5": 0.91,
+  2: 0.85,
+  "2.5": 0.8,
+  3: 0.75,
+  "3.5": 0.7,
+  4: 0.65,
+  5: 0.6,
+  6: 0.55,
+  7: 0.5,
+  8: 0.45
+}, T = {
+  "0.5": 1,
+  1: 1.03030303,
+  "1.5": 1.06060606,
+  2: 1.1030303,
+  "2.5": 1.13333333,
+  3: 1.16363636,
+  "3.5": 1.19393939,
+  4: 1.2242424242424241,
+  "4.5": 1.31515152,
+  5: 1.39393939,
+  "5.5": 1.48484848,
+  6: 1.57575758,
+  "6.5": 1.63636364,
+  7: 1.6969697,
+  "7.5": 1.75757576,
+  8: 1.81818182,
+  "8.5": 1.87878788,
+  9: 1.93939394,
+  "9.5": 2,
+  10: 2.06060606,
+  "10.5": 2.1,
+  11: 2.15,
+  "11.5": 2.2,
+  12: 2.25,
+  "12.5": 2.3,
+  13: 2.35,
+  "13.5": 2.4,
+  14: 2.45,
+  "14.5": 2.5,
+  15: 2.55,
+  "15.5": 2.6,
+  16: 2.65,
+  "16.5": 2.7,
+  17: 2.75,
+  "17.5": 2.8,
+  18: 2.85,
+  "18.5": 2.9,
+  19: 2.95,
+  "19.5": 3,
+  20: 3.05
+}, C = [
+  ["xs", 0.75, 1],
+  ["sm", 0.875, 1.25],
+  ["base", 1, 1.5],
+  ["lg", 1.125, 1.75],
+  ["xl", 1.25, 1.75],
+  ["2xl", 1.5, 2],
+  ["3xl", 1.875, 2.25],
+  ["4xl", 2.25, 2.5],
+  ["5xl", 3, 3],
+  ["6xl", 3.75, 3.75]
+], L = {
+  "--font-weight-extralight": "200",
+  "--font-weight-light": "300",
+  "--font-weight-normal": "400",
+  "--font-weight-medium": "500",
+  "--font-weight-semibold": "600",
+  "--font-weight-bold": "700",
+  "--font-weight-extrabold": "800",
+  "--font-weight-black": "900"
+}, _ = (r, o, l) => {
+  const t = o / x;
+  r["font-size"] = `${o}px`, r["--font-size-base"] = `${o}px`, C.forEach(([c, e, n]) => {
+    const u = e * t;
+    r[`--text-${c}`] = `${i(u)}rem`, r[`--text-${c}--line-height`] = n === e ? "1" : `calc(${i(n * t)} / ${i(u)})`;
+  }), Object.entries(B).forEach(([c, e]) => {
+    r[`--text--fs-${c}`] = `${i(e)}em`;
+  });
+  const f = l / k;
+  E.forEach((c) => {
+    const n = 1 + (T[c] - 1) * f;
+    r[`--text-fs-${c}`] = `${i(n)}em`;
+  });
+}, S = (r, o) => {
+  const l = o / x;
+  r["--radius"] = `${i(l)}rem`, r["--radius-sm"] = `${i(l * 0.8)}rem`, r["--radius-md"] = `${i(l)}rem`, r["--radius-lg"] = `${i(l * 1.34)}rem`, r["--radius-xl"] = `${i(l * 1.6)}rem`, r["--radius-2xl"] = `${i(l * 2)}rem`, r["--radius-3xl"] = `${i(l * 3)}rem`;
+}, A = (r, o) => {
+  if (typeof o == "string") {
+    const t = o.trim().toLowerCase();
+    r["--shop-max-width"] = t === "full" || t === "none" ? "none" : o;
+    return;
+  }
+  if (o === 0) {
+    r["--shop-max-width"] = "none";
+    return;
+  }
+  const l = g(o ?? void 0, $);
+  r["--shop-max-width"] = `${l}px`;
+}, N = {
+  danger: {
+    light: "#ffeeee",
+    default: "#ff3b30",
+    dark: "#ee392e",
+    fg: "#ffffff",
+    fgLight: "#d70015",
+    subtle: "#fdecea",
+    subtleFg: "#b42318",
+    subtleBorder: "#f5c2c0"
+  },
+  warning: {
+    light: "#fbf4e6",
+    default: "#ff9500",
+    dark: "#ee8b06",
+    fg: "#ffffff",
+    fgLight: "#c95100",
+    subtle: "#fef7e6",
+    subtleFg: "#8a4b08",
+    subtleBorder: "#f6d8a8"
+  },
+  info: {
+    light: "#e3eeff",
+    default: "#007aff",
+    dark: "#0e72ee",
+    fg: "#ffffff",
+    fgLight: "#0051a8",
+    subtle: "#e8f0fe",
+    subtleFg: "#1a56db",
+    subtleBorder: "#c3dafe"
+  },
+  success: {
+    light: "#e1ede6",
+    default: "#007E51",
+    dark: "#06764c",
+    fg: "#ffffff",
+    fgLight: "#248a3d",
+    subtle: "#ECF8EB",
+    subtleFg: "#216e39",
+    subtleBorder: "#b7e1c1"
+  },
+  secondary: {
+    subtle: "#f1f1ef",
+    subtleFg: "#37352f",
+    subtleBorder: "#e3e2df"
+  },
+  purple: { subtle: "#f3ecff", subtleFg: "#6941c6", subtleBorder: "#e4d7ff" },
+  teal: { subtle: "#e6f6f5", subtleFg: "#0f766e", subtleBorder: "#bfe8e5" },
+  indigo: { subtle: "#e7e6fd", subtleFg: "#4338ca", subtleBorder: "#d6dcff" },
+  orange: { subtle: "#fff1e6", subtleFg: "#c2410c", subtleBorder: "#ffd6bf" },
+  pink: { subtle: "#fdebf3", subtleFg: "#be185d", subtleBorder: "#f8c6db" },
+  cyan: { subtle: "#E1F8F8", subtleFg: "#0e7490", subtleBorder: "#c2ecf5" },
+  chart: ["#6366f1", "#22c55e", "#f59e0b", "#ef4444", "#3b82f6", "#ec4899"]
+}, D = {
+  danger: {
+    light: "#391413",
+    default: "#7F1D1D",
+    dark: "#882d28",
+    fg: "#ffffff",
+    fgLight: "#FCFCFC",
+    subtle: "#2a1111",
+    subtleFg: "#FF4B4B",
+    subtleBorder: "#991b1b"
+  },
+  warning: {
+    light: "#34220a",
+    default: "#95600E",
+    dark: "#9e6a23",
+    fg: "#ffffff",
+    fgLight: "#ff9f0a",
+    subtle: "#2a1c07",
+    subtleFg: "#fbbf24",
+    subtleBorder: "#92400e"
+  },
+  info: {
+    light: "#112039",
+    default: "#1a4298",
+    dark: "#3360d2",
+    fg: "#ffffff",
+    fgLight: "#93c5fd",
+    subtle: "#0f1e33",
+    subtleFg: "#d2e6ff",
+    subtleBorder: "#1e40af"
+  },
+  success: {
+    light: "#112815",
+    default: "#0e4d2e",
+    dark: "#235a3b",
+    fg: "#ffffff",
+    fgLight: "#6ee7b7",
+    subtle: "#0f2419",
+    subtleFg: "#e2f5e9",
+    subtleBorder: "#1f7a4c"
+  },
+  secondary: {
+    subtle: "#1f1f1f",
+    subtleFg: "#e4e4e7",
+    subtleBorder: "#3f3f46"
+  },
+  purple: { subtle: "#1d1333", subtleFg: "#c084fc", subtleBorder: "#6b21a8" },
+  teal: { subtle: "#0f2a28", subtleFg: "#2dd4bf", subtleBorder: "#0f766e" },
+  indigo: { subtle: "#1c0a49", subtleFg: "#dcd1ff", subtleBorder: "#3730a3" },
+  orange: { subtle: "#2a1709", subtleFg: "#fb923c", subtleBorder: "#9a3412" },
+  pink: { subtle: "#2a0f1c", subtleFg: "#f472b6", subtleBorder: "#9d174d" },
+  cyan: { subtle: "#0e242a", subtleFg: "#22d3ee", subtleBorder: "#0e7490" },
+  chart: ["#818cf8", "#34d399", "#fbbf24", "#fb7185", "#60a5fa", "#f472b6"]
+}, I = (r, o) => {
+  const l = o ? D : N;
+  ["danger", "warning", "info", "success"].forEach((c) => {
+    const e = l[c];
+    r[`--color-${c}-light`] = e.light, r[`--color-${c}`] = e.default, r[`--color-${c}-dark`] = e.dark, r[`--color-${c}-fg`] = e.fg, r[`--color-${c}-fg-light`] = e.fgLight, r[`--color-${c}-subtle`] = e.subtle, r[`--color-${c}-subtle-fg`] = e.subtleFg, r[`--color-${c}-subtle-border`] = e.subtleBorder, c === "danger" && (r["--color-destructive"] = e.default, r["--color-destructive-foreground"] = e.fg);
+  }), [
+    "secondary",
+    "purple",
+    "teal",
+    "indigo",
+    "orange",
+    "pink",
+    "cyan"
+  ].forEach((c) => {
+    const e = l[c];
+    r[`--color-${c}-subtle`] = e.subtle, r[`--color-${c}-subtle-fg`] = e.subtleFg, r[`--color-${c}-subtle-border`] = e.subtleBorder;
+  }), l.chart.forEach((c, e) => {
+    r[`--color-chart-${e + 1}`] = c;
+  });
+};
+function R(r, o) {
+  if (!r) return "";
+  if (o) {
+    const c = a(r, "#ffffff", 0.07), e = a(r, "#ffffff", 0.12), n = a(r, "#ffffff", 0.1), u = a(r, "#ffffff", 0.14), d = a(r, "#ffffff", 0.13), h = a(r, "#ffffff", 0.16), b = a(r, "#ffffff", 0.07), v = a(r, "#ffffff", 0.11), m = a(r, "#ffffff", 0.1), p = a(r, "#ffffff", 0.14);
+    return `
+.vlite-theme-provider.dark .bg-card {
+  --color-body: ${c} !important;
+  --color-white: ${c} !important;
+  --color-mixture-1: ${e} !important;
+  --color-mixture-2: #ffffff !important;
+  background-color: ${c} !important;
+}
+.vlite-theme-provider.dark .bg-card .bg-card {
+  --color-body: ${n} !important;
+  --color-white: ${n} !important;
+  --color-mixture-1: ${u} !important;
+  --color-mixture-2: #000000;
+  background-color: ${n} !important;
+}
+.vlite-theme-provider.dark .bg-card .bg-card .bg-card {
+  --color-body: ${d} !important;
+  --color-white: ${d} !important;
+  --color-mixture-1: ${h} !important;
+  --color-mixture-2: #000000;
+  background-color: ${d} !important;
+}
+.vlite-theme-provider.dark .bg-card-light {
+  --color-body: ${b} !important;
+  --color-white: ${b} !important;
+  --color-mixture-1: ${v} !important;
+  --color-mixture-2: #ffffff !important;
+  background-color: ${b} !important;
+}
+.vlite-theme-provider.dark .bg-card .bg-card-light {
+  --color-body: ${m} !important;
+  --color-white: ${m} !important;
+  --color-mixture-1: ${p} !important;
+  --color-mixture-2: #000000;
+  background-color: ${m} !important;
+}
+`;
+  }
+  const l = a(r, "#000000", 0.03), t = a(r, "#000000", 0.055), f = a(r, "#000000", 0.09);
+  return `
+.vlite-theme-provider .bg-card,
+.vlite-theme-provider .bg-card-light {
+  --color-body: ${l} !important;
+  --color-white: ${l} !important;
+  --color-mixture-1: ${l} !important;
+  --color-mixture-2: #000000 !important;
+  background-color: ${l} !important;
+  border-color: color-mix(in oklab, var(--color-mixture-1) 94%, var(--color-mixture-2));
+}
+.vlite-theme-provider .bg-card .bg-card,
+.vlite-theme-provider .bg-card-light .bg-card-light {
+  --color-body: ${t} !important;
+  --color-white: ${t} !important;
+  --color-mixture-1: ${t};
+  --color-mixture-2: #000000;
+  background-color: ${t} !important;
+}
+.vlite-theme-provider .bg-card .bg-card .bg-card,
+.vlite-theme-provider .bg-card-light .bg-card-light .bg-card-light {
+  --color-body: ${f} !important;
+  --color-white: ${f} !important;
+  --color-mixture-1: ${f};
+  --color-mixture-2: #000000;
+  background-color: ${f} !important;
+}
+`;
+}
+function U(r) {
+  const o = {};
+  if (o["--color-white"] = r.bgColor ?? "#ffffff", o["--color-black"] = "#000000", r.bgColor) {
+    o["--color-background"] = r.bgColor, o["--color-body"] = r.bgColor;
+    const t = s(r.bgColor).l < 50;
+    t ? (o["--color-mixture-1"] = "#0c0c0c", o["--color-mixture-2"] = "#ffffff", o["--color-white"] = r.bgColor, o["--color-black"] = "#ffffff", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 96.5%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 94.5%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 90.5%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 86.5%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 82.5%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 79.5%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 70%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 74%, #ffffff)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 70%, #ffffff)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 94%, #ffffff)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 96%, #ffffff)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 87.5%, #ffffff)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 92.5%, #ffffff)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 95%, #ffffff)", o["--color-muted-foreground"] = "var(--color-gray-600)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 90%, #ffffff)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #ffffff)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #ffffff)", o["--shadow-sm"] = "none", o["--shadow-DEFAULT"] = "none", o["--shadow-md"] = "none", o["--shadow-lg"] = "none", o["--shadow-xl"] = "none") : (o["--color-mixture-1"] = "#ffffff", o["--color-mixture-2"] = "#000000", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 98%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 97%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 96%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 94%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 92%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 86%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 80%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 88%, #000000)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 87%, #000000)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 96%, #000000)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 98%, #000000)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 94.8%, #000000)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 94%, #000000)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 97%, #000000)", o["--color-muted-foreground"] = "color-mix(in oklab, var(--color-background) 10%, #000000)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 95%, #000000)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #000000)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #000000)", o["--shadow-sm"] = "rgba(95, 97, 100, 0.07) 0px 15px 90px 0px, rgba(0, 0, 0, 0.02) 0.2px 0.2px 1px 0px", o["--shadow-DEFAULT"] = "rgba(55, 59, 74, 0.074) 0px 10px 55px 3px", o["--shadow-md"] = "var(--shadow-DEFAULT)", o["--shadow-lg"] = "rgba(100, 100, 111, 0.15) 0px 7px 40px -1px", o["--shadow-xl"] = "rgba(0, 0, 0, 0.2) 0px 15px 50px -12px"), I(o, t);
+  }
+  if (r.primaryColor) {
+    o["--color-primary"] = r.primaryColor;
+    const { l: t } = s(r.primaryColor), f = t > 50 ? "#171717" : "#fafafa";
+    o["--color-primary-foreground"] = f, o["--color-primary-fg"] = f, o["--color-primary-dark"] = `color-mix(in oklab, ${r.primaryColor} 80%, #000000)`, o["--color-primary-light"] = `color-mix(in oklab, ${f} 92%, ${r.primaryColor})`, o["--color-primary-fg-light"] = o["--color-primary-dark"];
+  }
+  r.footerBgColor && (o["--color-footer"] = r.footerBgColor), o["--spacing"] = "0.25rem", Object.assign(o, L), _(
+    o,
+    g(r.baseFontSize, x),
+    g(r.headingScale, k)
+  ), S(o, w(r.borderRadius, y)), A(o, r.maxWidth), o["--tooltip-bg"] = "var(--color-background)", o["--tooltip-text"] = "var(--color-foreground)", o["--tooltip-border"] = "color-mix(in oklab, var(--color-mixture-1) 90%, var(--color-mixture-2))", o["--tooltip-radius"] = "var(--radius)", o["--tooltip-shadow"] = "var(--shadow-DEFAULT)", o["--tooltip-arrow-size"] = "0.5em", o["--tooltip-z-index"] = "50", o["--date-picker-border"] = "var(--color-border)", o["--date-picker-radius"] = "var(--radius)", o["--timer-picker-bg"] = "var(--color-background)", o["--iconPicker-border"] = "var(--color-border)";
+  const l = {};
+  for (const t of Object.keys(o))
+    l[t] = F(o[t]);
+  return l;
+}
+export {
+  x as DEFAULT_BASE_FONT_SIZE,
+  y as DEFAULT_BORDER_RADIUS,
+  k as DEFAULT_HEADING_SCALE,
+  $ as DEFAULT_MAX_WIDTH,
+  R as buildCardOverrideStyles,
+  U as buildThemeVariables
+};

package/components/ThemeProvider/types.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Public type surface for {@link ThemeProvider}.
+ *
+ * The provider is intentionally **data-driven**: it accepts plain theme tokens
+ * (colors, sizing, scale) and produces the matching set of CSS variables
+ * (`--color-*`, `--text-*`, `--radius-*`, `--shop-max-width`, …). Downstream
+ * app code can then map any domain object (shop theme, blog theme, dashboard
+ * theme) onto this single shape.
+ *
+ * Generic over `unknown` because the provider never reads the data itself —
+ * it just forwards the props to its computed style block.
+ */
+export type ThemeMaxWidth = number | string | null | undefined;
+export interface ThemeProviderProps {
+    /**
+     * Page background color. Used to derive the full set of `--color-*` tokens
+     * (foreground, border, card, muted, accent, scrollbar, …).
+     */
+    bgColor?: string;
+    /** Brand / primary color. Generates `--color-primary*` variants. */
+    primaryColor?: string;
+    /** Optional footer background. Surfaced as `--color-footer` if provided. */
+    footerBgColor?: string;
+    /** Base font size in `px`. Default `16`. Drives `--text-*` scale. */
+    baseFontSize?: number;
+    /** Heading ratio relative to the default `1.25` step. Default `1.25`. */
+    headingScale?: number;
+    /** Border radius in `px`. Default `8`. Drives `--radius*` family. */
+    borderRadius?: number;
+    /**
+     * Maximum content width:
+     *   - `number`  → emitted as `${n}px`
+     *   - `'full' | 'none' | 0` → emitted as `none`
+     *   - any other string is passed through verbatim
+     */
+    maxWidth?: ThemeMaxWidth;
+    /** Optional root class. Defaults to `'vlite-theme-provider'`. */
+    rootClass?: string;
+}
+/**
+ * The flat key/value record of CSS variables produced by
+ * {@link buildThemeVariables}. Consumers that need to read the resolved
+ * theme (e.g. a side panel that wants to read `--color-background`) can
+ * inject this from a parent `ThemeProvider`.
+ */
+export type ThemeStyles = Record<string, string>;

package/composables/useThemeStyles.d.ts

@@ -0,0 +1,8 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { ThemeStyles } from '../components/ThemeProvider/types';
+export declare const THEME_STYLES_KEY: InjectionKey<ComputedRef<ThemeStyles>>;
+/**
+ * Inject the reactive theme-styles computed ref produced by the nearest
+ * `<ThemeProvider>` ancestor. Returns `undefined` if no provider is present.
+ */
+export declare function useThemeStyles(): ComputedRef<ThemeStyles> | undefined;

package/composables/useThemeStyles.js

@@ -0,0 +1,9 @@
+import { inject as e } from "vue";
+const t = /* @__PURE__ */ Symbol("vlite-theme-styles");
+function i() {
+  return e(t, void 0);
+}
+export {
+  t as THEME_STYLES_KEY,
+  i as useThemeStyles
+};

package/index.d.ts

@@ -62,6 +62,9 @@ export * from './components/Rating';
 export * from './components/AsyncSelect';
 export * from './components/ImageComparison';
 export { default as ImageMagnifier } from './components/ImageMagnifier.vue';
+export * from './components/ThemeProvider';
+export * from './components/ScaleGenerator';
+export { THEME_STYLES_KEY, useThemeStyles } from './composables/useThemeStyles';
 export { default as Icon } from './components/Icon.vue';
 export { default as Logo } from './components/Logo.vue';
 export { default as Alert } from './components/Alert.vue';