vlite3 1.4.11 → 1.4.12

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.
@@ -17,7 +17,7 @@ import "v-datepicker-lite";
17
17
  import "v-datepicker-lite/style.css";
18
18
  import "@jaames/iro";
19
19
  import "@vueuse/core";
20
- /* empty css */
20
+ /* empty css */
21
21
  import qe from "../IconPicker.vue.js";
22
22
  /* empty css */
23
23
  /* empty css */
@@ -1,5 +1,5 @@
1
- import o from "./ColorIro.vue.js";
2
- /* empty css */
1
+ import o from "./ColorIro.vue2.js";
2
+ /* empty css */
3
3
  export {
4
4
  o as default
5
5
  };
@@ -7,8 +7,8 @@ import "../../core/config.js";
7
7
  /* empty css */
8
8
  /* empty css */
9
9
  import E from "../Button.vue.js";
10
- import _ from "./ColorIro.vue.js";
11
- /* empty css */
10
+ import _ from "./ColorIro.vue2.js";
11
+ /* empty css */
12
12
  import { useEyeDropper as I } from "@vueuse/core";
13
13
  const N = { class: "absolute left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center z-20 pointer-events-none" }, j = {
14
14
  key: 0,
@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
4
4
  import { $t as E } from "../../utils/i18n.js";
5
5
  import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
6
6
  import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
7
- import ee from "./CommandPaletteItem.vue2.js";
7
+ import ee from "./CommandPaletteItem.vue.js";
8
8
  const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/80 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
9
9
  key: 0,
10
10
  class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",
@@ -1,5 +1,5 @@
1
1
  import t from "./CommandPaletteItem.vue3.js";
2
- /* empty css */
2
+ /* empty css */
3
3
  import o from "../../_virtual/_plugin-vue_export-helper.js";
4
4
  const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
5
5
  export {
@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
3
3
  import v from "./Modal.vue.js";
4
4
  import N from "./CommandPalette/CommandPaletteContent.vue.js";
5
5
  import { $t as U } from "../utils/i18n.js";
6
- /* empty css */
6
+ /* empty css */
7
7
  const V = { class: "block truncate -text-fs-1.5" }, S = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, A = /* @__PURE__ */ x({
8
8
  __name: "NavbarCommandPalette",
9
9
  props: {
@@ -15,7 +15,7 @@ import "v-datepicker-lite";
15
15
  import "v-datepicker-lite/style.css";
16
16
  import "@jaames/iro";
17
17
  import "@vueuse/core";
18
- /* empty css */
18
+ /* empty css */
19
19
  import "iconify-icon-picker";
20
20
  import "iconify-icon-picker/style.css";
21
21
  /* empty css */
@@ -42,6 +42,13 @@ export declare function buildCardOverrideStyles(bg: string, isDark: boolean): st
42
42
  export declare function buildThemeStyleBlock(vars: ThemeStyles, id: string): string;
43
43
  /**
44
44
  * Compute the full theme-styles record from a {@link ThemeProviderProps}.
45
+ *
46
+ * Every value in the returned record is suffixed with `!important` so the
47
+ * theme cannot be overridden by host-app globals, Tailwind preflight, or
48
+ * any third-party CSS. The `useThemeStyles()` composable hands the same
49
+ * record to descendants, so consumers that re-bind it to `:style` also
50
+ * get the same protection.
51
+ *
45
52
  * Pure: no DOM, no Vue. Re-usable from tests and from server-side code.
46
53
  */
47
54
  export declare function buildThemeVariables(props: ThemeProviderProps): ThemeStyles;
@@ -1,11 +1,11 @@
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) => {
1
+ import { hexToHSL as x, mixColorHex as i } from "../../utils/colorUtils.js";
2
+ const s = 16, k = 1.25, y = 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
+ }, f = (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 c = o / s;
124
+ r["font-size"] = `${o}px`, r["--font-size-base"] = `${o}px`, C.forEach(([e, t, n]) => {
125
+ const u = t * c;
126
+ r[`--text-${e}`] = `${f(u)}rem`, r[`--text-${e}--line-height`] = n === t ? "1" : `calc(${f(n * c)} / ${f(u)})`;
127
+ }), Object.entries(B).forEach(([e, t]) => {
128
+ r[`--text--fs-${e}`] = `${f(t)}em`;
129
129
  });
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`;
130
+ const a = l / k;
131
+ E.forEach((e) => {
132
+ const n = 1 + (T[e] - 1) * a;
133
+ r[`--text-fs-${e}`] = `${f(n)}em`;
134
134
  });
135
- }, _ = (r, o) => {
136
- const l = o / x;
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
135
  }, S = (r, o) => {
136
+ const l = o / s;
137
+ r["--radius"] = `${f(l)}rem`, r["--radius-sm"] = `${f(l * 0.8)}rem`, r["--radius-md"] = `${f(l)}rem`, r["--radius-lg"] = `${f(l * 1.34)}rem`, r["--radius-xl"] = `${f(l * 1.6)}rem`, r["--radius-2xl"] = `${f(l * 2)}rem`, r["--radius-3xl"] = `${f(l * 3)}rem`;
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 c = o.trim().toLowerCase();
141
+ r["--shop-max-width"] = c === "full" || c === "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;
256
+ }, I = (r, o) => {
257
+ const l = o ? D : N;
258
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);
259
+ const t = l[e];
260
+ r[`--color-${e}-light`] = t.light, r[`--color-${e}`] = t.default, r[`--color-${e}-dark`] = t.dark, r[`--color-${e}-fg`] = t.fg, r[`--color-${e}-fg-light`] = t.fgLight, r[`--color-${e}-subtle`] = t.subtle, r[`--color-${e}-subtle-fg`] = t.subtleFg, r[`--color-${e}-subtle-border`] = t.subtleBorder, e === "danger" && (r["--color-destructive"] = t.default, r["--color-destructive-foreground"] = t.fg);
261
261
  }), [
262
262
  "secondary",
263
263
  "purple",
@@ -267,21 +267,21 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
267
267
  "pink",
268
268
  "cyan"
269
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;
270
+ const t = l[e];
271
+ r[`--color-${e}-subtle`] = t.subtle, r[`--color-${e}-subtle-fg`] = t.subtleFg, r[`--color-${e}-subtle-border`] = t.subtleBorder;
272
+ }), l.chart.forEach((e, t) => {
273
+ r[`--color-chart-${t + 1}`] = e;
274
274
  });
275
275
  };
276
- function V(r, o) {
276
+ function R(r, o) {
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 e = i(r, "#ffffff", 0.07), t = i(r, "#ffffff", 0.12), n = i(r, "#ffffff", 0.1), u = i(r, "#ffffff", 0.14), d = i(r, "#ffffff", 0.13), v = i(r, "#ffffff", 0.16), m = i(r, "#ffffff", 0.07), p = i(r, "#ffffff", 0.11), b = i(r, "#ffffff", 0.1), $ = i(r, "#ffffff", 0.14);
280
280
  return `
281
281
  .vlite-theme-provider.dark .bg-card {
282
282
  --color-body: ${e} !important;
283
283
  --color-white: ${e} !important;
284
- --color-mixture-1: ${c} !important;
284
+ --color-mixture-1: ${t} !important;
285
285
  --color-mixture-2: #ffffff !important;
286
286
  background-color: ${e} !important;
287
287
  }
@@ -295,27 +295,27 @@ function V(r, o) {
295
295
  .vlite-theme-provider.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
302
  .vlite-theme-provider.dark .bg-card-light {
303
- --color-body: ${b} !important;
304
- --color-white: ${b} !important;
305
- --color-mixture-1: ${v} !important;
306
- --color-mixture-2: #ffffff !important;
307
- background-color: ${b} !important;
308
- }
309
- .vlite-theme-provider.dark .bg-card .bg-card-light {
310
303
  --color-body: ${m} !important;
311
304
  --color-white: ${m} !important;
312
305
  --color-mixture-1: ${p} !important;
313
- --color-mixture-2: #000000;
306
+ --color-mixture-2: #ffffff !important;
314
307
  background-color: ${m} !important;
315
308
  }
309
+ .vlite-theme-provider.dark .bg-card .bg-card-light {
310
+ --color-body: ${b} !important;
311
+ --color-white: ${b} !important;
312
+ --color-mixture-1: ${$} !important;
313
+ --color-mixture-2: #000000;
314
+ background-color: ${b} !important;
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 l = i(r, "#000000", 0.03), c = i(r, "#000000", 0.055), a = i(r, "#000000", 0.09);
319
319
  return `
320
320
  .vlite-theme-provider .bg-card,
321
321
  .vlite-theme-provider .bg-card-light {
@@ -328,30 +328,34 @@ function V(r, o) {
328
328
  }
329
329
  .vlite-theme-provider .bg-card .bg-card,
330
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};
331
+ --color-body: ${c} !important;
332
+ --color-white: ${c} !important;
333
+ --color-mixture-1: ${c};
334
334
  --color-mixture-2: #000000;
335
- background-color: ${t} !important;
335
+ background-color: ${c} !important;
336
336
  }
337
337
  .vlite-theme-provider .bg-card .bg-card .bg-card,
338
338
  .vlite-theme-provider .bg-card-light .bg-card-light .bg-card-light {
339
- --color-body: ${f} !important;
340
- --color-white: ${f} !important;
341
- --color-mixture-1: ${f};
339
+ --color-body: ${a} !important;
340
+ --color-white: ${a} !important;
341
+ --color-mixture-1: ${a};
342
342
  --color-mixture-2: #000000;
343
- background-color: ${f} !important;
343
+ background-color: ${a} !important;
344
344
  }
345
345
  `;
346
346
  }
347
- const I = (r) => r.replace(/[{};]/g, "");
348
- function R(r, o) {
347
+ const h = (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 [c, a] of Object.entries(r)) {
352
+ if (!c.startsWith("--")) continue;
353
+ const e = h(a);
354
+ if (!e) continue;
355
+ const t = /!important\s*$/i.test(e);
356
+ l.push(
357
+ t ? ` ${c}: ${e};` : ` ${c}: ${e} !important;`
358
+ );
355
359
  }
356
360
  return l.length === 0 ? "" : `#${o} {
357
361
  ${l.join(`
@@ -359,30 +363,38 @@ ${l.join(`
359
363
  }
360
364
  `;
361
365
  }
362
- function U(r) {
366
+ const O = (r) => {
367
+ const o = r.trim().replace(/\s*!important\s*$/i, "");
368
+ return `${h(o)} !important`;
369
+ };
370
+ function j(r) {
363
371
  const o = {};
364
372
  if (o["--color-white"] = r.bgColor ?? "#ffffff", o["--color-black"] = "#000000", r.bgColor) {
365
373
  o["--color-background"] = r.bgColor, o["--color-body"] = r.bgColor;
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);
374
+ const c = x(r.bgColor).l < 50;
375
+ c ? (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, c);
368
376
  }
369
377
  if (r.primaryColor) {
370
378
  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"];
379
+ const { l: c } = x(r.primaryColor), a = c > 50 ? "#171717" : "#fafafa";
380
+ o["--color-primary-foreground"] = a, o["--color-primary-fg"] = a, o["--color-primary-dark"] = `color-mix(in oklab, ${r.primaryColor} 80%, #000000)`, o["--color-primary-light"] = `color-mix(in oklab, ${a} 92%, ${r.primaryColor})`, o["--color-primary-fg-light"] = o["--color-primary-dark"];
373
381
  }
374
- return r.footerBgColor && (o["--color-footer"] = r.footerBgColor), o["--spacing"] = "0.25rem", Object.assign(o, C), L(
382
+ r.footerBgColor && (o["--color-footer"] = r.footerBgColor), o["--spacing"] = "0.25rem", Object.assign(o, L), _(
375
383
  o,
376
- g(r.baseFontSize, x),
384
+ g(r.baseFontSize, s),
377
385
  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;
386
+ ), 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)";
387
+ const l = {};
388
+ for (const [c, a] of Object.entries(o))
389
+ l[c] = O(a);
390
+ return l;
379
391
  }
380
392
  export {
381
- x as DEFAULT_BASE_FONT_SIZE,
393
+ s as DEFAULT_BASE_FONT_SIZE,
382
394
  y as DEFAULT_BORDER_RADIUS,
383
395
  k as DEFAULT_HEADING_SCALE,
384
- $ as DEFAULT_MAX_WIDTH,
385
- V as buildCardOverrideStyles,
386
- R as buildThemeStyleBlock,
387
- U as buildThemeVariables
396
+ F as DEFAULT_MAX_WIDTH,
397
+ R as buildCardOverrideStyles,
398
+ U as buildThemeStyleBlock,
399
+ j as buildThemeVariables
388
400
  };
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.12",
7
7
  "type": "module",
8
8
  "main": "index.js",
9
9
  "module": "index.js",