vlite3 1.4.12 → 1.4.15
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.
- package/components/CategoryManager/CategoryManager.vue2.js +1 -1
- package/components/ColorPicker/ColorIro.vue3.js +2 -2
- package/components/ColorPicker/ColorPicker.vue.js +2 -2
- package/components/CommandPalette/CommandPaletteContent.vue2.js +1 -1
- package/components/CommandPalette/{CommandPaletteItem.vue.js → CommandPaletteItem.vue2.js} +1 -1
- package/components/Dropdown/DropdownMenu.vue.js +1 -1
- package/components/NavbarCommandPalette.vue.js +1 -1
- package/components/Screen/ScreenFilter.vue.js +1 -1
- package/components/ThemeProvider/ThemeProvider.vue.js +26 -24
- package/components/ThemeProvider/themeVars.d.ts +20 -11
- package/components/ThemeProvider/themeVars.js +81 -91
- package/components/ThemeProvider/types.d.ts +1 -1
- package/package.json +1 -1
- /package/components/ColorPicker/{ColorIro.vue2.js → ColorIro.vue.js} +0 -0
- /package/components/Dropdown/{DropdownMenu.vue2.js → DropdownMenu.vue3.js} +0 -0
|
@@ -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.
|
|
11
|
-
/* empty css
|
|
10
|
+
import _ from "./ColorIro.vue.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.
|
|
7
|
+
import ee from "./CommandPaletteItem.vue2.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",
|
|
@@ -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: {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { buildThemeVariables as k, buildThemeStyleBlock as
|
|
3
|
-
import { THEME_STYLES_KEY as
|
|
4
|
-
import { isDarkColor as
|
|
5
|
-
const V = /* @__PURE__ */
|
|
1
|
+
import { defineComponent as m, useId as c, computed as o, provide as v, openBlock as i, createElementBlock as f, normalizeStyle as p, normalizeClass as C, createBlock as h, resolveDynamicComponent as y, withCtx as S, createTextVNode as b, toDisplayString as g, renderSlot as T } from "vue";
|
|
2
|
+
import { buildThemeVariables as k, buildThemeStyleBlock as B, buildCardOverrideStyles as _ } from "./themeVars.js";
|
|
3
|
+
import { THEME_STYLES_KEY as E } from "../../composables/useThemeStyles.js";
|
|
4
|
+
import { isDarkColor as x } from "../../utils/colorUtils.js";
|
|
5
|
+
const V = /* @__PURE__ */ m({
|
|
6
6
|
__name: "ThemeProvider",
|
|
7
7
|
props: {
|
|
8
8
|
bgColor: { default: void 0 },
|
|
@@ -12,32 +12,34 @@ 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:
|
|
15
|
+
rootClass: { default: void 0 }
|
|
16
16
|
},
|
|
17
17
|
setup(r) {
|
|
18
|
-
const e = r,
|
|
19
|
-
() =>
|
|
20
|
-
),
|
|
21
|
-
() => e.bgColor ? _(e.bgColor,
|
|
18
|
+
const e = r, t = `vlite-theme-provider-${c()}`, a = o(() => e.bgColor ? x(e.bgColor) : !1), l = o(() => k(e)), d = o(
|
|
19
|
+
() => B(l.value, t)
|
|
20
|
+
), s = o(
|
|
21
|
+
() => e.bgColor ? _(e.bgColor, a.value, `#${t}`) : ""
|
|
22
|
+
), n = o(
|
|
23
|
+
() => [d.value, s.value].filter(Boolean).join(`
|
|
24
|
+
`)
|
|
22
25
|
);
|
|
23
|
-
return
|
|
24
|
-
id:
|
|
25
|
-
class:
|
|
26
|
-
|
|
26
|
+
return v(E, l), (u, D) => (i(), f("div", {
|
|
27
|
+
id: t,
|
|
28
|
+
class: C([
|
|
29
|
+
"vlite-theme-provider",
|
|
30
|
+
r.rootClass,
|
|
31
|
+
"transition-colors duration-300",
|
|
32
|
+
{ dark: a.value }
|
|
33
|
+
]),
|
|
34
|
+
style: p(l.value)
|
|
27
35
|
}, [
|
|
28
|
-
(
|
|
29
|
-
default:
|
|
30
|
-
|
|
36
|
+
(i(), h(y("style"), null, {
|
|
37
|
+
default: S(() => [
|
|
38
|
+
b(g(n.value), 1)
|
|
31
39
|
]),
|
|
32
40
|
_: 1
|
|
33
41
|
})),
|
|
34
|
-
(
|
|
35
|
-
default: n(() => [
|
|
36
|
-
u(m(v.value), 1)
|
|
37
|
-
]),
|
|
38
|
-
_: 1
|
|
39
|
-
})),
|
|
40
|
-
g(f.$slots, "default")
|
|
42
|
+
T(u.$slots, "default")
|
|
41
43
|
], 6));
|
|
42
44
|
}
|
|
43
45
|
});
|
|
@@ -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,21 +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
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
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;
|
|
43
42
|
/**
|
|
44
|
-
*
|
|
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.
|
|
45
51
|
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
-
|
|
50
|
-
|
|
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
|
+
*/
|
|
56
|
+
/**
|
|
57
|
+
* Compute the full theme-styles record from a {@link ThemeProviderProps}.
|
|
51
58
|
*
|
|
52
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.
|
|
53
62
|
*/
|
|
54
63
|
export declare function buildThemeVariables(props: ThemeProviderProps): ThemeStyles;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { hexToHSL as
|
|
2
|
-
const
|
|
1
|
+
import { hexToHSL as s, mixColorHex as a } from "../../utils/colorUtils.js";
|
|
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
5
|
}, w = (r, o) => {
|
|
6
6
|
const l = Number(r);
|
|
7
7
|
return Number.isFinite(l) && l >= 0 ? l : o;
|
|
8
|
-
},
|
|
8
|
+
}, i = (r) => Number.parseFloat(r.toFixed(8)).toString(), E = [
|
|
9
9
|
"0.5",
|
|
10
10
|
"1",
|
|
11
11
|
"1.5",
|
|
@@ -120,25 +120,25 @@ const s = 16, k = 1.25, y = 8, F = 1440, g = (r, o) => {
|
|
|
120
120
|
"--font-weight-extrabold": "800",
|
|
121
121
|
"--font-weight-black": "900"
|
|
122
122
|
}, _ = (r, o, l) => {
|
|
123
|
-
const
|
|
124
|
-
r["font-size"] = `${o}px`, r["--font-size-base"] = `${o}px`, C.forEach(([
|
|
125
|
-
const u = t *
|
|
126
|
-
r[`--text-${
|
|
127
|
-
}), Object.entries(B).forEach(([
|
|
128
|
-
r[`--text--fs-${
|
|
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
|
-
const
|
|
131
|
-
E.forEach((
|
|
132
|
-
const n = 1 + (T[
|
|
133
|
-
r[`--text-fs-${
|
|
130
|
+
const f = l / k;
|
|
131
|
+
E.forEach((c) => {
|
|
132
|
+
const n = 1 + (T[c] - 1) * f;
|
|
133
|
+
r[`--text-fs-${c}`] = `${i(n)}em`;
|
|
134
134
|
});
|
|
135
135
|
}, S = (r, o) => {
|
|
136
|
-
const l = o /
|
|
137
|
-
r["--radius"] = `${
|
|
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
138
|
}, A = (r, o) => {
|
|
139
139
|
if (typeof o == "string") {
|
|
140
|
-
const
|
|
141
|
-
r["--shop-max-width"] =
|
|
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) {
|
|
@@ -255,9 +255,9 @@ const s = 16, k = 1.25, y = 8, F = 1440, g = (r, o) => {
|
|
|
255
255
|
chart: ["#818cf8", "#34d399", "#fbbf24", "#fb7185", "#60a5fa", "#f472b6"]
|
|
256
256
|
}, I = (r, o) => {
|
|
257
257
|
const l = o ? D : N;
|
|
258
|
-
["danger", "warning", "info", "success"].forEach((
|
|
259
|
-
const t = l[
|
|
260
|
-
r[`--color-${
|
|
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,95 +266,93 @@ const s = 16, k = 1.25, y = 8, F = 1440, g = (r, o) => {
|
|
|
266
266
|
"orange",
|
|
267
267
|
"pink",
|
|
268
268
|
"cyan"
|
|
269
|
-
].forEach((
|
|
270
|
-
const t = l[
|
|
271
|
-
r[`--color-${
|
|
272
|
-
}), l.chart.forEach((
|
|
273
|
-
r[`--color-chart-${t + 1}`] =
|
|
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 R(r, o) {
|
|
276
|
+
function R(r, o, l = ".vlite-theme-provider") {
|
|
277
277
|
if (!r) return "";
|
|
278
278
|
if (o) {
|
|
279
|
-
const
|
|
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
|
-
.
|
|
282
|
-
--color-body: ${
|
|
283
|
-
--color-white: ${
|
|
284
|
-
--color-mixture-1: ${
|
|
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: ${
|
|
286
|
+
background-color: ${t} !important;
|
|
287
287
|
}
|
|
288
|
-
.
|
|
289
|
-
--color-body: ${
|
|
290
|
-
--color-white: ${
|
|
291
|
-
--color-mixture-1: ${
|
|
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: ${
|
|
293
|
+
background-color: ${u} !important;
|
|
294
294
|
}
|
|
295
|
-
.
|
|
295
|
+
${l}.dark .bg-card .bg-card .bg-card {
|
|
296
296
|
--color-body: ${d} !important;
|
|
297
297
|
--color-white: ${d} !important;
|
|
298
298
|
--color-mixture-1: ${v} !important;
|
|
299
299
|
--color-mixture-2: #000000;
|
|
300
300
|
background-color: ${d} !important;
|
|
301
301
|
}
|
|
302
|
-
.
|
|
303
|
-
--color-body: ${m} !important;
|
|
304
|
-
--color-white: ${m} !important;
|
|
305
|
-
--color-mixture-1: ${p} !important;
|
|
306
|
-
--color-mixture-2: #ffffff !important;
|
|
307
|
-
background-color: ${m} !important;
|
|
308
|
-
}
|
|
309
|
-
.vlite-theme-provider.dark .bg-card .bg-card-light {
|
|
302
|
+
${l}.dark .bg-card-light {
|
|
310
303
|
--color-body: ${b} !important;
|
|
311
304
|
--color-white: ${b} !important;
|
|
312
305
|
--color-mixture-1: ${$} !important;
|
|
313
|
-
--color-mixture-2: #
|
|
306
|
+
--color-mixture-2: #ffffff !important;
|
|
314
307
|
background-color: ${b} !important;
|
|
315
308
|
}
|
|
309
|
+
${l}.dark .bg-card .bg-card-light {
|
|
310
|
+
--color-body: ${m} !important;
|
|
311
|
+
--color-white: ${m} !important;
|
|
312
|
+
--color-mixture-1: ${y} !important;
|
|
313
|
+
--color-mixture-2: #000000;
|
|
314
|
+
background-color: ${m} !important;
|
|
315
|
+
}
|
|
316
316
|
`;
|
|
317
317
|
}
|
|
318
|
-
const
|
|
318
|
+
const e = a(r, "#000000", 0.03), f = a(r, "#000000", 0.055), c = a(r, "#000000", 0.09);
|
|
319
319
|
return `
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
--color-body: ${
|
|
323
|
-
--color-white: ${
|
|
324
|
-
--color-mixture-1: ${
|
|
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: ${
|
|
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
|
-
|
|
330
|
-
|
|
329
|
+
${l} .bg-card .bg-card,
|
|
330
|
+
${l} .bg-card-light .bg-card-light {
|
|
331
|
+
--color-body: ${f} !important;
|
|
332
|
+
--color-white: ${f} !important;
|
|
333
|
+
--color-mixture-1: ${f};
|
|
334
|
+
--color-mixture-2: #000000;
|
|
335
|
+
background-color: ${f} !important;
|
|
336
|
+
}
|
|
337
|
+
${l} .bg-card .bg-card .bg-card,
|
|
338
|
+
${l} .bg-card-light .bg-card-light .bg-card-light {
|
|
331
339
|
--color-body: ${c} !important;
|
|
332
340
|
--color-white: ${c} !important;
|
|
333
341
|
--color-mixture-1: ${c};
|
|
334
342
|
--color-mixture-2: #000000;
|
|
335
343
|
background-color: ${c} !important;
|
|
336
344
|
}
|
|
337
|
-
.vlite-theme-provider .bg-card .bg-card .bg-card,
|
|
338
|
-
.vlite-theme-provider .bg-card-light .bg-card-light .bg-card-light {
|
|
339
|
-
--color-body: ${a} !important;
|
|
340
|
-
--color-white: ${a} !important;
|
|
341
|
-
--color-mixture-1: ${a};
|
|
342
|
-
--color-mixture-2: #000000;
|
|
343
|
-
background-color: ${a} !important;
|
|
344
|
-
}
|
|
345
345
|
`;
|
|
346
346
|
}
|
|
347
|
-
const
|
|
347
|
+
const O = (r) => r.replace(/[{};]/g, "");
|
|
348
348
|
function U(r, o) {
|
|
349
349
|
if (!o) return "";
|
|
350
350
|
const l = [];
|
|
351
|
-
for (const [
|
|
352
|
-
if (!
|
|
353
|
-
const
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
l.push(
|
|
357
|
-
t ? ` ${c}: ${e};` : ` ${c}: ${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(
|
|
355
|
+
c.includes("!important") ? ` ${e}: ${c};` : ` ${e}: ${c} !important;`
|
|
358
356
|
);
|
|
359
357
|
}
|
|
360
358
|
return l.length === 0 ? "" : `#${o} {
|
|
@@ -363,38 +361,30 @@ ${l.join(`
|
|
|
363
361
|
}
|
|
364
362
|
`;
|
|
365
363
|
}
|
|
366
|
-
|
|
367
|
-
const o = r.trim().replace(/\s*!important\s*$/i, "");
|
|
368
|
-
return `${h(o)} !important`;
|
|
369
|
-
};
|
|
370
|
-
function j(r) {
|
|
364
|
+
function z(r) {
|
|
371
365
|
const o = {};
|
|
372
366
|
if (o["--color-white"] = r.bgColor ?? "#ffffff", o["--color-black"] = "#000000", r.bgColor) {
|
|
373
367
|
o["--color-background"] = r.bgColor, o["--color-body"] = r.bgColor;
|
|
374
|
-
const
|
|
375
|
-
|
|
368
|
+
const l = s(r.bgColor).l < 50;
|
|
369
|
+
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);
|
|
376
370
|
}
|
|
377
371
|
if (r.primaryColor) {
|
|
378
372
|
o["--color-primary"] = r.primaryColor;
|
|
379
|
-
const { l
|
|
380
|
-
o["--color-primary-foreground"] =
|
|
373
|
+
const { l } = s(r.primaryColor), e = l > 50 ? "#171717" : "#fafafa";
|
|
374
|
+
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"];
|
|
381
375
|
}
|
|
382
|
-
r.footerBgColor && (o["--color-footer"] = r.footerBgColor), o["--spacing"] = "0.25rem", Object.assign(o, L), _(
|
|
376
|
+
return r.footerBgColor && (o["--color-footer"] = r.footerBgColor), o["--spacing"] = "0.25rem", Object.assign(o, L), _(
|
|
383
377
|
o,
|
|
384
|
-
g(r.baseFontSize,
|
|
378
|
+
g(r.baseFontSize, x),
|
|
385
379
|
g(r.headingScale, k)
|
|
386
|
-
), S(o, w(r.borderRadius,
|
|
387
|
-
const l = {};
|
|
388
|
-
for (const [c, a] of Object.entries(o))
|
|
389
|
-
l[c] = O(a);
|
|
390
|
-
return l;
|
|
380
|
+
), 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;
|
|
391
381
|
}
|
|
392
382
|
export {
|
|
393
|
-
|
|
394
|
-
|
|
383
|
+
x as DEFAULT_BASE_FONT_SIZE,
|
|
384
|
+
p as DEFAULT_BORDER_RADIUS,
|
|
395
385
|
k as DEFAULT_HEADING_SCALE,
|
|
396
386
|
F as DEFAULT_MAX_WIDTH,
|
|
397
387
|
R as buildCardOverrideStyles,
|
|
398
388
|
U as buildThemeStyleBlock,
|
|
399
|
-
|
|
389
|
+
z as buildThemeVariables
|
|
400
390
|
};
|
|
@@ -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.
|
|
37
|
+
/** Optional extra root class. The provider always includes `vlite-theme-provider`. */
|
|
38
38
|
rootClass?: string;
|
|
39
39
|
}
|
|
40
40
|
/**
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|