vlite3 1.4.11 → 1.4.14

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 (5) hide show
  1. package/components/ThemeProvider/ThemeProvider.vue.js +19 -14
  2. package/components/ThemeProvider/themeVars.d.ts +21 -5
  3. package/components/ThemeProvider/themeVars.js +86 -86
  4. package/components/ThemeProvider/types.d.ts +1 -1
  5. package/package.json +1 -1
package/components/ThemeProvider/ThemeProvider.vue.js CHANGED
@@ -1,8 +1,8 @@
1
- import { defineComponent as p, useId as C, computed as o, provide as h, openBlock as l, createElementBlock as y, normalizeStyle as b, normalizeClass as S, createBlock as d, resolveDynamicComponent as s, withCtx as n, createTextVNode as u, toDisplayString as m, renderSlot as g } from "vue";
1
+ import { defineComponent as p, useId as C, computed as o, provide as h, openBlock as r, createElementBlock as y, normalizeStyle as b, normalizeClass as S, createBlock as d, resolveDynamicComponent as s, withCtx as n, createTextVNode as u, toDisplayString as m, renderSlot as g } from "vue";
2
2
  import { buildThemeVariables as k, buildThemeStyleBlock as T, buildCardOverrideStyles as _ } from "./themeVars.js";
3
3
  import { THEME_STYLES_KEY as B } from "../../composables/useThemeStyles.js";
4
4
  import { isDarkColor as E } from "../../utils/colorUtils.js";
5
- const V = /* @__PURE__ */ p({
5
+ const P = /* @__PURE__ */ p({
6
6
  __name: "ThemeProvider",
7
7
  props: {
8
8
  bgColor: { default: void 0 },
@@ -12,26 +12,31 @@ const V = /* @__PURE__ */ p({
12
12
  headingScale: { default: void 0 },
13
13
  borderRadius: { default: void 0 },
14
14
  maxWidth: { default: void 0 },
15
- rootClass: { default: "vlite-theme-provider" }
15
+ rootClass: { default: void 0 }
16
16
  },
17
- setup(r) {
18
- const e = r, a = `vlite-theme-provider-${C()}`, i = o(() => e.bgColor ? E(e.bgColor) : !1), t = o(() => k(e)), c = o(
19
- () => T(t.value, a)
17
+ setup(a) {
18
+ const e = a, t = `vlite-theme-provider-${C()}`, i = o(() => e.bgColor ? E(e.bgColor) : !1), l = o(() => k(e)), c = o(
19
+ () => T(l.value, t)
20
20
  ), v = o(
21
- () => e.bgColor ? _(e.bgColor, i.value) : ""
21
+ () => e.bgColor ? _(e.bgColor, i.value, `#${t}`) : ""
22
22
  );
23
- return h(B, t), (f, x) => (l(), y("div", {
24
- id: a,
25
- class: S([r.rootClass, "transition-colors duration-300", { dark: i.value }]),
26
- style: b(t.value)
23
+ return h(B, l), (f, x) => (r(), y("div", {
24
+ id: t,
25
+ class: S([
26
+ "vlite-theme-provider",
27
+ a.rootClass,
28
+ "transition-colors duration-300",
29
+ { dark: i.value }
30
+ ]),
31
+ style: b(l.value)
27
32
  }, [
28
- (l(), d(s("style"), null, {
33
+ (r(), d(s("style"), null, {
29
34
  default: n(() => [
30
35
  u(m(c.value), 1)
31
36
  ]),
32
37
  _: 1
33
38
  })),
34
- (l(), d(s("style"), null, {
39
+ (r(), d(s("style"), null, {
35
40
  default: n(() => [
36
41
  u(m(v.value), 1)
37
42
  ]),
@@ -42,5 +47,5 @@ const V = /* @__PURE__ */ p({
42
47
  }
43
48
  });
44
49
  export {
45
- V as default
50
+ P as default
46
51
  };
package/components/ThemeProvider/themeVars.d.ts CHANGED
@@ -8,7 +8,7 @@ export declare const DEFAULT_MAX_WIDTH = 1440;
8
8
  * has to inject it as a real `<style>` block (it targets descendant
9
9
  * `.bg-card .bg-card` selectors which cannot be expressed as inline variables).
10
10
  */
11
- export declare function buildCardOverrideStyles(bg: string, isDark: boolean): string;
11
+ export declare function buildCardOverrideStyles(bg: string, isDark: boolean, scope?: string): string;
12
12
  /**
13
13
  * Build a `<style>` text block that re-applies every generated CSS custom
14
14
  * property with `!important`, scoped to a unique `#id` selector.
@@ -34,14 +34,30 @@ export declare function buildCardOverrideStyles(bg: string, isDark: boolean): st
34
34
  * Pure: no DOM, no Vue. Returns a CSS string ready to be dropped
35
35
  * inside a `<component :is="'style'">{{ block }}</component>` block.
36
36
  *
37
- * Only CSS custom properties (keys starting with `--`) are emitted;
38
- * real CSS properties like `font-size` are intentionally skipped to
39
- * avoid forcing `!important` on properties that affect layout
40
- * inheritance globally.
37
+ * CSS custom properties (keys starting with `--`) are emitted, plus the
38
+ * provider root `font-size` that drives the same inherited base-size behavior
39
+ * as `ShopThemeProvider`.
41
40
  */
42
41
  export declare function buildThemeStyleBlock(vars: ThemeStyles, id: string): string;
42
+ /**
43
+ * Note: We previously tried to stamp `!important` directly onto every value
44
+ * in the theme variables object, so that Vue inline bindings (`:style="themeStyles"`)
45
+ * would carry the `!important` flag.
46
+ *
47
+ * However, Vue's DOM patching (`style.setProperty(key, value)`) strictly rejects
48
+ * the `value` argument if it contains `!important`. Thus, any inline style
49
+ * object with `!important` silently fails and drops the styles entirely in SPA
50
+ * environments.
51
+ *
52
+ * Therefore, we provide the raw variables (without `!important`) to `useThemeStyles()`
53
+ * consumers, and rely exclusively on the `<style>` block generated by
54
+ * `buildThemeStyleBlock` to enforce `!important` overrides across the application.
55
+ */
43
56
  /**
44
57
  * Compute the full theme-styles record from a {@link ThemeProviderProps}.
58
+ *
45
59
  * Pure: no DOM, no Vue. Re-usable from tests and from server-side code.
60
+ * The returned record does NOT contain `!important`. `!important` is injected
61
+ * by `buildThemeStyleBlock` when generating the high-priority style block.
46
62
  */
47
63
  export declare function buildThemeVariables(props: ThemeProviderProps): ThemeStyles;
package/components/ThemeProvider/themeVars.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { hexToHSL as s, mixColorHex as a } from "../../utils/colorUtils.js";
2
- const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
2
+ const x = 16, k = 1.25, p = 8, F = 1440, g = (r, o) => {
3
3
  const l = Number(r);
4
4
  return Number.isFinite(l) && l > 0 ? l : o;
5
- }, F = (r, o) => {
5
+ }, w = (r, o) => {
6
6
  const l = Number(r);
7
7
  return Number.isFinite(l) && l >= 0 ? l : o;
8
- }, i = (r) => Number.parseFloat(r.toFixed(8)).toString(), w = [
8
+ }, i = (r) => Number.parseFloat(r.toFixed(8)).toString(), E = [
9
9
  "0.5",
10
10
  "1",
11
11
  "1.5",
@@ -46,7 +46,7 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
46
46
  "19",
47
47
  "19.5",
48
48
  "20"
49
- ], E = {
49
+ ], B = {
50
50
  1: 0.95,
51
51
  "1.5": 0.91,
52
52
  2: 0.85,
@@ -58,7 +58,7 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
58
58
  6: 0.55,
59
59
  7: 0.5,
60
60
  8: 0.45
61
- }, B = {
61
+ }, T = {
62
62
  "0.5": 1,
63
63
  1: 1.03030303,
64
64
  "1.5": 1.06060606,
@@ -99,7 +99,7 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
99
99
  19: 2.95,
100
100
  "19.5": 3,
101
101
  20: 3.05
102
- }, T = [
102
+ }, C = [
103
103
  ["xs", 0.75, 1],
104
104
  ["sm", 0.875, 1.25],
105
105
  ["base", 1, 1.5],
@@ -110,7 +110,7 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
110
110
  ["4xl", 2.25, 2.5],
111
111
  ["5xl", 3, 3],
112
112
  ["6xl", 3.75, 3.75]
113
- ], C = {
113
+ ], L = {
114
114
  "--font-weight-extralight": "200",
115
115
  "--font-weight-light": "300",
116
116
  "--font-weight-normal": "400",
@@ -119,35 +119,35 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
119
119
  "--font-weight-bold": "700",
120
120
  "--font-weight-extrabold": "800",
121
121
  "--font-weight-black": "900"
122
- }, L = (r, o, l) => {
123
- const t = o / x;
124
- r["font-size"] = `${o}px`, r["--font-size-base"] = `${o}px`, T.forEach(([e, c, n]) => {
125
- const u = c * t;
126
- r[`--text-${e}`] = `${i(u)}rem`, r[`--text-${e}--line-height`] = n === c ? "1" : `calc(${i(n * t)} / ${i(u)})`;
127
- }), Object.entries(E).forEach(([e, c]) => {
128
- r[`--text--fs-${e}`] = `${i(c)}em`;
122
+ }, _ = (r, o, l) => {
123
+ const e = o / x;
124
+ r["font-size"] = `${o}px`, r["--font-size-base"] = `${o}px`, C.forEach(([c, t, n]) => {
125
+ const u = t * e;
126
+ r[`--text-${c}`] = `${i(u)}rem`, r[`--text-${c}--line-height`] = n === t ? "1" : `calc(${i(n * e)} / ${i(u)})`;
127
+ }), Object.entries(B).forEach(([c, t]) => {
128
+ r[`--text--fs-${c}`] = `${i(t)}em`;
129
129
  });
130
130
  const f = l / k;
131
- w.forEach((e) => {
132
- const n = 1 + (B[e] - 1) * f;
133
- r[`--text-fs-${e}`] = `${i(n)}em`;
131
+ E.forEach((c) => {
132
+ const n = 1 + (T[c] - 1) * f;
133
+ r[`--text-fs-${c}`] = `${i(n)}em`;
134
134
  });
135
- }, _ = (r, o) => {
135
+ }, S = (r, o) => {
136
136
  const l = o / x;
137
137
  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`;
138
- }, S = (r, o) => {
138
+ }, A = (r, o) => {
139
139
  if (typeof o == "string") {
140
- const t = o.trim().toLowerCase();
141
- r["--shop-max-width"] = t === "full" || t === "none" ? "none" : o;
140
+ const e = o.trim().toLowerCase();
141
+ r["--shop-max-width"] = e === "full" || e === "none" ? "none" : o;
142
142
  return;
143
143
  }
144
144
  if (o === 0) {
145
145
  r["--shop-max-width"] = "none";
146
146
  return;
147
147
  }
148
- const l = g(o ?? void 0, $);
148
+ const l = g(o ?? void 0, F);
149
149
  r["--shop-max-width"] = `${l}px`;
150
- }, A = {
150
+ }, N = {
151
151
  danger: {
152
152
  light: "#ffeeee",
153
153
  default: "#ff3b30",
@@ -200,7 +200,7 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
200
200
  pink: { subtle: "#fdebf3", subtleFg: "#be185d", subtleBorder: "#f8c6db" },
201
201
  cyan: { subtle: "#E1F8F8", subtleFg: "#0e7490", subtleBorder: "#c2ecf5" },
202
202
  chart: ["#6366f1", "#22c55e", "#f59e0b", "#ef4444", "#3b82f6", "#ec4899"]
203
- }, N = {
203
+ }, D = {
204
204
  danger: {
205
205
  light: "#391413",
206
206
  default: "#7F1D1D",
@@ -253,11 +253,11 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
253
253
  pink: { subtle: "#2a0f1c", subtleFg: "#f472b6", subtleBorder: "#9d174d" },
254
254
  cyan: { subtle: "#0e242a", subtleFg: "#22d3ee", subtleBorder: "#0e7490" },
255
255
  chart: ["#818cf8", "#34d399", "#fbbf24", "#fb7185", "#60a5fa", "#f472b6"]
256
- }, D = (r, o) => {
257
- const l = o ? N : A;
258
- ["danger", "warning", "info", "success"].forEach((e) => {
259
- const c = l[e];
260
- r[`--color-${e}-light`] = c.light, r[`--color-${e}`] = c.default, r[`--color-${e}-dark`] = c.dark, r[`--color-${e}-fg`] = c.fg, r[`--color-${e}-fg-light`] = c.fgLight, r[`--color-${e}-subtle`] = c.subtle, r[`--color-${e}-subtle-fg`] = c.subtleFg, r[`--color-${e}-subtle-border`] = c.subtleBorder, e === "danger" && (r["--color-destructive"] = c.default, r["--color-destructive-foreground"] = c.fg);
256
+ }, I = (r, o) => {
257
+ const l = o ? D : N;
258
+ ["danger", "warning", "info", "success"].forEach((c) => {
259
+ const t = l[c];
260
+ r[`--color-${c}-light`] = t.light, r[`--color-${c}`] = t.default, r[`--color-${c}-dark`] = t.dark, r[`--color-${c}-fg`] = t.fg, r[`--color-${c}-fg-light`] = t.fgLight, r[`--color-${c}-subtle`] = t.subtle, r[`--color-${c}-subtle-fg`] = t.subtleFg, r[`--color-${c}-subtle-border`] = t.subtleBorder, c === "danger" && (r["--color-destructive"] = t.default, r["--color-destructive-foreground"] = t.fg);
261
261
  }), [
262
262
  "secondary",
263
263
  "purple",
@@ -266,92 +266,92 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
266
266
  "orange",
267
267
  "pink",
268
268
  "cyan"
269
- ].forEach((e) => {
270
- const c = l[e];
271
- r[`--color-${e}-subtle`] = c.subtle, r[`--color-${e}-subtle-fg`] = c.subtleFg, r[`--color-${e}-subtle-border`] = c.subtleBorder;
272
- }), l.chart.forEach((e, c) => {
273
- r[`--color-chart-${c + 1}`] = e;
269
+ ].forEach((c) => {
270
+ const t = l[c];
271
+ r[`--color-${c}-subtle`] = t.subtle, r[`--color-${c}-subtle-fg`] = t.subtleFg, r[`--color-${c}-subtle-border`] = t.subtleBorder;
272
+ }), l.chart.forEach((c, t) => {
273
+ r[`--color-chart-${t + 1}`] = c;
274
274
  });
275
275
  };
276
- function V(r, o) {
276
+ function R(r, o, l = ".vlite-theme-provider") {
277
277
  if (!r) return "";
278
278
  if (o) {
279
- const e = a(r, "#ffffff", 0.07), c = 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);
279
+ const t = a(r, "#ffffff", 0.07), n = a(r, "#ffffff", 0.12), u = a(r, "#ffffff", 0.1), h = a(r, "#ffffff", 0.14), d = a(r, "#ffffff", 0.13), v = a(r, "#ffffff", 0.16), b = a(r, "#ffffff", 0.07), $ = a(r, "#ffffff", 0.11), m = a(r, "#ffffff", 0.1), y = a(r, "#ffffff", 0.14);
280
280
  return `
281
- .vlite-theme-provider.dark .bg-card {
282
- --color-body: ${e} !important;
283
- --color-white: ${e} !important;
284
- --color-mixture-1: ${c} !important;
281
+ ${l}.dark .bg-card {
282
+ --color-body: ${t} !important;
283
+ --color-white: ${t} !important;
284
+ --color-mixture-1: ${n} !important;
285
285
  --color-mixture-2: #ffffff !important;
286
- background-color: ${e} !important;
286
+ background-color: ${t} !important;
287
287
  }
288
- .vlite-theme-provider.dark .bg-card .bg-card {
289
- --color-body: ${n} !important;
290
- --color-white: ${n} !important;
291
- --color-mixture-1: ${u} !important;
288
+ ${l}.dark .bg-card .bg-card {
289
+ --color-body: ${u} !important;
290
+ --color-white: ${u} !important;
291
+ --color-mixture-1: ${h} !important;
292
292
  --color-mixture-2: #000000;
293
- background-color: ${n} !important;
293
+ background-color: ${u} !important;
294
294
  }
295
- .vlite-theme-provider.dark .bg-card .bg-card .bg-card {
295
+ ${l}.dark .bg-card .bg-card .bg-card {
296
296
  --color-body: ${d} !important;
297
297
  --color-white: ${d} !important;
298
- --color-mixture-1: ${h} !important;
298
+ --color-mixture-1: ${v} !important;
299
299
  --color-mixture-2: #000000;
300
300
  background-color: ${d} !important;
301
301
  }
302
- .vlite-theme-provider.dark .bg-card-light {
302
+ ${l}.dark .bg-card-light {
303
303
  --color-body: ${b} !important;
304
304
  --color-white: ${b} !important;
305
- --color-mixture-1: ${v} !important;
305
+ --color-mixture-1: ${$} !important;
306
306
  --color-mixture-2: #ffffff !important;
307
307
  background-color: ${b} !important;
308
308
  }
309
- .vlite-theme-provider.dark .bg-card .bg-card-light {
309
+ ${l}.dark .bg-card .bg-card-light {
310
310
  --color-body: ${m} !important;
311
311
  --color-white: ${m} !important;
312
- --color-mixture-1: ${p} !important;
312
+ --color-mixture-1: ${y} !important;
313
313
  --color-mixture-2: #000000;
314
314
  background-color: ${m} !important;
315
315
  }
316
316
  `;
317
317
  }
318
- const l = a(r, "#000000", 0.03), t = a(r, "#000000", 0.055), f = a(r, "#000000", 0.09);
318
+ const e = a(r, "#000000", 0.03), f = a(r, "#000000", 0.055), c = a(r, "#000000", 0.09);
319
319
  return `
320
- .vlite-theme-provider .bg-card,
321
- .vlite-theme-provider .bg-card-light {
322
- --color-body: ${l} !important;
323
- --color-white: ${l} !important;
324
- --color-mixture-1: ${l} !important;
320
+ ${l} .bg-card,
321
+ ${l} .bg-card-light {
322
+ --color-body: ${e} !important;
323
+ --color-white: ${e} !important;
324
+ --color-mixture-1: ${e} !important;
325
325
  --color-mixture-2: #000000 !important;
326
- background-color: ${l} !important;
326
+ background-color: ${e} !important;
327
327
  border-color: color-mix(in oklab, var(--color-mixture-1) 94%, var(--color-mixture-2));
328
328
  }
329
- .vlite-theme-provider .bg-card .bg-card,
330
- .vlite-theme-provider .bg-card-light .bg-card-light {
331
- --color-body: ${t} !important;
332
- --color-white: ${t} !important;
333
- --color-mixture-1: ${t};
334
- --color-mixture-2: #000000;
335
- background-color: ${t} !important;
336
- }
337
- .vlite-theme-provider .bg-card .bg-card .bg-card,
338
- .vlite-theme-provider .bg-card-light .bg-card-light .bg-card-light {
329
+ ${l} .bg-card .bg-card,
330
+ ${l} .bg-card-light .bg-card-light {
339
331
  --color-body: ${f} !important;
340
332
  --color-white: ${f} !important;
341
333
  --color-mixture-1: ${f};
342
334
  --color-mixture-2: #000000;
343
335
  background-color: ${f} !important;
344
336
  }
337
+ ${l} .bg-card .bg-card .bg-card,
338
+ ${l} .bg-card-light .bg-card-light .bg-card-light {
339
+ --color-body: ${c} !important;
340
+ --color-white: ${c} !important;
341
+ --color-mixture-1: ${c};
342
+ --color-mixture-2: #000000;
343
+ background-color: ${c} !important;
344
+ }
345
345
  `;
346
346
  }
347
- const I = (r) => r.replace(/[{};]/g, "");
348
- function R(r, o) {
347
+ const O = (r) => r.replace(/[{};]/g, "");
348
+ function U(r, o) {
349
349
  if (!o) return "";
350
350
  const l = [];
351
- for (const [t, f] of Object.entries(r)) {
352
- if (!t.startsWith("--")) continue;
353
- const e = I(f);
354
- e && l.push(` ${t}: ${e} !important;`);
351
+ for (const [e, f] of Object.entries(r)) {
352
+ if (!e.startsWith("--") && e !== "font-size") continue;
353
+ const c = O(f);
354
+ c && l.push(` ${e}: ${c} !important;`);
355
355
  }
356
356
  return l.length === 0 ? "" : `#${o} {
357
357
  ${l.join(`
@@ -359,30 +359,30 @@ ${l.join(`
359
359
  }
360
360
  `;
361
361
  }
362
- function U(r) {
362
+ function z(r) {
363
363
  const o = {};
364
364
  if (o["--color-white"] = r.bgColor ?? "#ffffff", o["--color-black"] = "#000000", r.bgColor) {
365
365
  o["--color-background"] = r.bgColor, o["--color-body"] = r.bgColor;
366
366
  const l = s(r.bgColor).l < 50;
367
- l ? (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"), D(o, l);
367
+ l ? (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, l);
368
368
  }
369
369
  if (r.primaryColor) {
370
370
  o["--color-primary"] = r.primaryColor;
371
- const { l } = s(r.primaryColor), t = l > 50 ? "#171717" : "#fafafa";
372
- o["--color-primary-foreground"] = t, o["--color-primary-fg"] = t, o["--color-primary-dark"] = `color-mix(in oklab, ${r.primaryColor} 80%, #000000)`, o["--color-primary-light"] = `color-mix(in oklab, ${t} 92%, ${r.primaryColor})`, o["--color-primary-fg-light"] = o["--color-primary-dark"];
371
+ const { l } = s(r.primaryColor), e = l > 50 ? "#171717" : "#fafafa";
372
+ o["--color-primary-foreground"] = e, o["--color-primary-fg"] = e, o["--color-primary-dark"] = `color-mix(in oklab, ${r.primaryColor} 80%, #000000)`, o["--color-primary-light"] = `color-mix(in oklab, ${e} 92%, ${r.primaryColor})`, o["--color-primary-fg-light"] = o["--color-primary-dark"];
373
373
  }
374
- return r.footerBgColor && (o["--color-footer"] = r.footerBgColor), o["--spacing"] = "0.25rem", Object.assign(o, C), L(
374
+ return r.footerBgColor && (o["--color-footer"] = r.footerBgColor), o["--spacing"] = "0.25rem", Object.assign(o, L), _(
375
375
  o,
376
376
  g(r.baseFontSize, x),
377
377
  g(r.headingScale, k)
378
- ), _(o, F(r.borderRadius, y)), S(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)", o;
378
+ ), S(o, w(r.borderRadius, p)), 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)", o;
379
379
  }
380
380
  export {
381
381
  x as DEFAULT_BASE_FONT_SIZE,
382
- y as DEFAULT_BORDER_RADIUS,
382
+ p as DEFAULT_BORDER_RADIUS,
383
383
  k as DEFAULT_HEADING_SCALE,
384
- $ as DEFAULT_MAX_WIDTH,
385
- V as buildCardOverrideStyles,
386
- R as buildThemeStyleBlock,
387
- U as buildThemeVariables
384
+ F as DEFAULT_MAX_WIDTH,
385
+ R as buildCardOverrideStyles,
386
+ U as buildThemeStyleBlock,
387
+ z as buildThemeVariables
388
388
  };
package/components/ThemeProvider/types.d.ts CHANGED
@@ -34,7 +34,7 @@ export interface ThemeProviderProps {
34
34
  * - any other string is passed through verbatim
35
35
  */
36
36
  maxWidth?: ThemeMaxWidth;
37
- /** Optional root class. Defaults to `'vlite-theme-provider'`. */
37
+ /** Optional extra root class. The provider always includes `vlite-theme-provider`. */
38
38
  rootClass?: string;
39
39
  }
40
40
  /**
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "private": false,
4
4
  "description": "A Vue 3 UI component library built with Tailwind CSS.",
5
5
  "license": "MIT",
6
- "version": "1.4.11",
6
+ "version": "1.4.14",
7
7
  "type": "module",
8
8
  "main": "index.js",
9
9
  "module": "index.js",