@veltra/styles 1.15.1 → 1.15.2
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/dist/theme/component-css-vars.d.ts +0 -2
- package/dist/theme/component-css-vars.js +1 -2
- package/dist/theme/helper.d.ts +0 -2
- package/dist/theme/helper.js +1 -2
- package/dist/theme/load-theme.d.ts +0 -2
- package/dist/theme/load-theme.js +1 -2
- package/dist/theme/presets/ancient.d.ts +0 -2
- package/dist/theme/presets/ancient.js +1 -2
- package/dist/theme/presets/dark.d.ts +0 -2
- package/dist/theme/presets/dark.js +1 -2
- package/dist/theme/presets/glass.d.ts +0 -2
- package/dist/theme/presets/glass.js +1 -2
- package/dist/theme/presets/hero.d.ts +0 -2
- package/dist/theme/presets/hero.js +1 -2
- package/dist/theme/presets/light.d.ts +0 -2
- package/dist/theme/presets/light.js +1 -2
- package/dist/theme/presets/midnight.d.ts +0 -2
- package/dist/theme/presets/midnight.js +1 -2
- package/dist/theme/presets/neon.d.ts +0 -2
- package/dist/theme/presets/neon.js +1 -2
- package/dist/theme/presets/ocean.d.ts +0 -2
- package/dist/theme/presets/ocean.js +1 -2
- package/dist/theme/presets/sakura.d.ts +0 -2
- package/dist/theme/presets/sakura.js +1 -2
- package/dist/theme/type.d.ts +0 -2
- package/dist/theme/ui-theme.d.ts +0 -2
- package/dist/theme/ui-theme.js +1 -2
- package/package.json +1 -1
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
//#region src/theme/component-css-vars.d.ts
|
|
2
1
|
/**
|
|
3
2
|
* 桌面组件级 `--u-*` token,随 `UITheme.render()` 按主题系列(light/dark)注入 `html`。
|
|
4
3
|
* 修改此处即可在 TS 侧统一调整组件外观,无需在各组件 `style.scss` 重复声明。
|
|
@@ -28,5 +27,4 @@ export declare function navSidebarTokens(series: 'light' | 'dark', variant: NavS
|
|
|
28
27
|
export declare function navSurfaceTokens(series: 'light' | 'dark', variant: NavSidebarVariant): Record<string, string>;
|
|
29
28
|
/** 解析某主题系列 + 侧栏变体下的 nav token 声明列表 */
|
|
30
29
|
export declare function resolveNavSidebarDecls(series: 'light' | 'dark', variant: NavSidebarVariant): string[];
|
|
31
|
-
//#endregion
|
|
32
30
|
//# sourceMappingURL=component-css-vars.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// src/theme/component-css-vars.ts
|
|
2
2
|
/**
|
|
3
3
|
* 桌面组件级 `--u-*` token,随 `UITheme.render()` 按主题系列(light/dark)注入 `html`。
|
|
4
4
|
* 修改此处即可在 TS 侧统一调整组件外观,无需在各组件 `style.scss` 重复声明。
|
|
@@ -298,7 +298,6 @@ function navSurfaceTokens(series, variant) {
|
|
|
298
298
|
function resolveNavSidebarDecls(series, variant) {
|
|
299
299
|
return recordToDeclList(navSidebarCssVars[series][variant]);
|
|
300
300
|
}
|
|
301
|
-
//#endregion
|
|
302
301
|
export { componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, navSidebarTokens, navSurfaceTokens, navSurfaceTone, resolveNavSidebarDecls, themeTokenVar };
|
|
303
302
|
|
|
304
303
|
//# sourceMappingURL=component-css-vars.js.map
|
package/dist/theme/helper.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { RGBColor } from "./type.js";
|
|
2
|
-
//#region src/theme/helper.d.ts
|
|
3
2
|
/** 实现十六进制颜色转RGB颜色,包括透明度 */
|
|
4
3
|
export declare function HEXToRGB(color: string): RGBColor;
|
|
5
4
|
/**
|
|
@@ -24,5 +23,4 @@ export declare function defineBySize(variable: Record<'small' | 'default' | 'lar
|
|
|
24
23
|
* @param prop - 与 Theme 结构对应的连字符路径,如 `text-color-title`、`bg-color-hover`
|
|
25
24
|
*/
|
|
26
25
|
export declare function cssVar(prop: string): string;
|
|
27
|
-
//#endregion
|
|
28
26
|
//# sourceMappingURL=helper.d.ts.map
|
package/dist/theme/helper.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// src/theme/helper.ts
|
|
2
2
|
/** 实现十六进制颜色转RGB颜色,包括透明度 */
|
|
3
3
|
function HEXToRGB(color) {
|
|
4
4
|
let hex = color.replace(/^#/, "");
|
|
@@ -70,7 +70,6 @@ function defineBySize(variable) {
|
|
|
70
70
|
function cssVar(prop) {
|
|
71
71
|
return `var(--u-${prop})`;
|
|
72
72
|
}
|
|
73
|
-
//#endregion
|
|
74
73
|
export { HEXToRGB, cssVar, defineBySize, hexRgbOnly, hexWithAlpha, isHexColor, mixColor, mixColorWithAlpha };
|
|
75
74
|
|
|
76
75
|
//# sourceMappingURL=helper.js.map
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { UITheme } from "./ui-theme.js";
|
|
2
2
|
import { ShallowRef } from "vue";
|
|
3
|
-
//#region src/theme/load-theme.d.ts
|
|
4
3
|
export declare const currentTheme: ShallowRef<UITheme | undefined>;
|
|
5
4
|
/**
|
|
6
5
|
* @description 加载主题, 如果你是 SSR 环境,
|
|
@@ -11,5 +10,4 @@ export declare const currentTheme: ShallowRef<UITheme | undefined>;
|
|
|
11
10
|
* 同系列的组件级 token,并把 `html[data-theme]` 置为对应系列。
|
|
12
11
|
*/
|
|
13
12
|
export declare function loadTheme(theme?: UITheme): void;
|
|
14
|
-
//#endregion
|
|
15
13
|
//# sourceMappingURL=load-theme.d.ts.map
|
package/dist/theme/load-theme.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { lightTheme } from "./presets/light.js";
|
|
2
2
|
import { shallowRef } from "vue";
|
|
3
3
|
import { useConfig } from "@veltra/compositions";
|
|
4
|
-
|
|
4
|
+
// src/theme/load-theme.ts
|
|
5
5
|
const currentTheme = shallowRef();
|
|
6
6
|
const SIZES = [
|
|
7
7
|
"small",
|
|
@@ -25,7 +25,6 @@ function loadTheme(theme = lightTheme) {
|
|
|
25
25
|
classList.add(config.size);
|
|
26
26
|
theme.render();
|
|
27
27
|
}
|
|
28
|
-
//#endregion
|
|
29
28
|
export { currentTheme, loadTheme };
|
|
30
29
|
|
|
31
30
|
//# sourceMappingURL=load-theme.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { mixColor } from "../helper.js";
|
|
2
2
|
import { lightTheme } from "./light.js";
|
|
3
|
-
|
|
3
|
+
// src/theme/presets/ancient.ts
|
|
4
4
|
/** 古风(松烟绿 + 宣纸底),天生适合浅色 */
|
|
5
5
|
const ancientTheme = lightTheme.new({
|
|
6
6
|
color: { primary: "#3d6b58" },
|
|
@@ -36,7 +36,6 @@ const ancientTheme = lightTheme.new({
|
|
|
36
36
|
},
|
|
37
37
|
nav: { variants: { dark: { "bg-color": mixColor("#2b2a26", "#3d6b58", .28) } } }
|
|
38
38
|
});
|
|
39
|
-
//#endregion
|
|
40
39
|
export { ancientTheme };
|
|
41
40
|
|
|
42
41
|
//# sourceMappingURL=ancient.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { lightTheme } from "./light.js";
|
|
2
|
-
|
|
2
|
+
// src/theme/presets/dark.ts
|
|
3
3
|
const darkTheme = lightTheme.new({
|
|
4
4
|
color: {
|
|
5
5
|
primary: "#3b82f6",
|
|
@@ -47,7 +47,6 @@ const darkTheme = lightTheme.new({
|
|
|
47
47
|
lg: "0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.35)"
|
|
48
48
|
}
|
|
49
49
|
}, { series: "dark" });
|
|
50
|
-
//#endregion
|
|
51
50
|
export { darkTheme };
|
|
52
51
|
|
|
53
52
|
//# sourceMappingURL=dark.js.map
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { UITheme } from "../ui-theme.js";
|
|
2
2
|
import "../index.js";
|
|
3
|
-
//#region src/theme/presets/glass.d.ts
|
|
4
3
|
/**
|
|
5
4
|
* 玻璃拟态,天生适合深色(半透明背景 + 背景模糊在深色下层次最好)。
|
|
6
5
|
* 背景为 rgba() 时派生 token(kbd / batch-edit 混合色)无法自动推导,
|
|
7
6
|
* 需通过组件级扩展键显式声明。
|
|
8
7
|
*/
|
|
9
8
|
export declare const glassTheme: UITheme;
|
|
10
|
-
//#endregion
|
|
11
9
|
//# sourceMappingURL=glass.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { lightTheme } from "./light.js";
|
|
2
|
-
|
|
2
|
+
// src/theme/presets/glass.ts
|
|
3
3
|
/**
|
|
4
4
|
* 玻璃拟态,天生适合深色(半透明背景 + 背景模糊在深色下层次最好)。
|
|
5
5
|
* 背景为 rgba() 时派生 token(kbd / batch-edit 混合色)无法自动推导,
|
|
@@ -60,7 +60,6 @@ const glassTheme = lightTheme.new({
|
|
|
60
60
|
},
|
|
61
61
|
"batch-edit": { "form-header-bg": "rgba(15, 23, 42, 0.8)" }
|
|
62
62
|
}, { series: "dark" });
|
|
63
|
-
//#endregion
|
|
64
63
|
export { glassTheme };
|
|
65
64
|
|
|
66
65
|
//# sourceMappingURL=glass.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { lightTheme } from "./light.js";
|
|
2
|
-
|
|
2
|
+
// src/theme/presets/hero.ts
|
|
3
3
|
/** HeroUI 风格,天生适合浅色 */
|
|
4
4
|
const heroTheme = lightTheme.new({
|
|
5
5
|
color: {
|
|
@@ -41,7 +41,6 @@ const heroTheme = lightTheme.new({
|
|
|
41
41
|
button: { "default-bg": "#ebebec" },
|
|
42
42
|
nav: { variant: "light" }
|
|
43
43
|
});
|
|
44
|
-
//#endregion
|
|
45
44
|
export { heroTheme };
|
|
46
45
|
|
|
47
46
|
//# sourceMappingURL=hero.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineBySize } from "../helper.js";
|
|
2
2
|
import { UITheme } from "../ui-theme.js";
|
|
3
|
-
|
|
3
|
+
// src/theme/presets/light.ts
|
|
4
4
|
const lightTheme = new UITheme({
|
|
5
5
|
color: {
|
|
6
6
|
primary: "#2563eb",
|
|
@@ -95,7 +95,6 @@ const lightTheme = new UITheme({
|
|
|
95
95
|
},
|
|
96
96
|
button: { "default-bg": "var(--u-bg-color-top)" }
|
|
97
97
|
}, { reactive: false });
|
|
98
|
-
//#endregion
|
|
99
98
|
export { lightTheme };
|
|
100
99
|
|
|
101
100
|
//# sourceMappingURL=light.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { darkTheme } from "./dark.js";
|
|
2
|
-
|
|
2
|
+
// src/theme/presets/midnight.ts
|
|
3
3
|
/** 午夜(靛蓝 + 深空底,宽松间距、舒缓缓动),天生适合深色 */
|
|
4
4
|
const midnightTheme = darkTheme.new({
|
|
5
5
|
color: {
|
|
@@ -49,7 +49,6 @@ const midnightTheme = darkTheme.new({
|
|
|
49
49
|
ease: "cubic-bezier(0.33, 1, 0.68, 1)"
|
|
50
50
|
}
|
|
51
51
|
});
|
|
52
|
-
//#endregion
|
|
53
52
|
export { midnightTheme };
|
|
54
53
|
|
|
55
54
|
//# sourceMappingURL=midnight.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { darkTheme } from "./dark.js";
|
|
2
|
-
|
|
2
|
+
// src/theme/presets/neon.ts
|
|
3
3
|
/** 霓虹(品红 + 夜紫底 + 辉光阴影,小圆角、急速缓动),天生适合深色 */
|
|
4
4
|
const neonTheme = darkTheme.new({
|
|
5
5
|
color: {
|
|
@@ -49,7 +49,6 @@ const neonTheme = darkTheme.new({
|
|
|
49
49
|
ease: "cubic-bezier(0.85, 0, 0.15, 1)"
|
|
50
50
|
}
|
|
51
51
|
});
|
|
52
|
-
//#endregion
|
|
53
52
|
export { neonTheme };
|
|
54
53
|
|
|
55
54
|
//# sourceMappingURL=neon.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { mixColor } from "../helper.js";
|
|
2
2
|
import { lightTheme } from "./light.js";
|
|
3
|
-
|
|
3
|
+
// src/theme/presets/ocean.ts
|
|
4
4
|
/** 海盐(松石青 + 冷白底,利落的快缓动),天生适合浅色 */
|
|
5
5
|
const oceanTheme = lightTheme.new({
|
|
6
6
|
color: {
|
|
@@ -51,7 +51,6 @@ const oceanTheme = lightTheme.new({
|
|
|
51
51
|
},
|
|
52
52
|
nav: { variants: { dark: { "bg-color": mixColor("#16302e", "#0d9488", .25) } } }
|
|
53
53
|
});
|
|
54
|
-
//#endregion
|
|
55
54
|
export { oceanTheme };
|
|
56
55
|
|
|
57
56
|
//# sourceMappingURL=ocean.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { mixColor } from "../helper.js";
|
|
2
2
|
import { lightTheme } from "./light.js";
|
|
3
|
-
|
|
3
|
+
// src/theme/presets/sakura.ts
|
|
4
4
|
/** 樱花(柔粉 + 花瓣底,大圆角、弹性缓动),天生适合浅色 */
|
|
5
5
|
const sakuraTheme = lightTheme.new({
|
|
6
6
|
color: {
|
|
@@ -53,7 +53,6 @@ const sakuraTheme = lightTheme.new({
|
|
|
53
53
|
transition: { easeOut: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
|
|
54
54
|
nav: { variants: { dark: { "bg-color": mixColor("#43272f", "#e64980", .22) } } }
|
|
55
55
|
});
|
|
56
|
-
//#endregion
|
|
57
56
|
export { sakuraTheme };
|
|
58
57
|
|
|
59
58
|
//# sourceMappingURL=sakura.js.map
|
package/dist/theme/type.d.ts
CHANGED
package/dist/theme/ui-theme.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { Theme } from "./type.js";
|
|
2
2
|
import { NavSidebarVariant } from "./component-css-vars.js";
|
|
3
|
-
//#region src/theme/ui-theme.d.ts
|
|
4
3
|
type RecursivePartial<T> = { [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P]; };
|
|
5
4
|
/** 主题系列:浅色或深色。决定组件级 token 与 html[data-theme] */
|
|
6
5
|
export type ThemeSeries = 'light' | 'dark';
|
|
@@ -71,6 +70,5 @@ export declare class UITheme {
|
|
|
71
70
|
series?: ThemeSeries;
|
|
72
71
|
}): UITheme;
|
|
73
72
|
}
|
|
74
|
-
//#endregion
|
|
75
73
|
export {};
|
|
76
74
|
//# sourceMappingURL=ui-theme.d.ts.map
|
package/dist/theme/ui-theme.js
CHANGED
|
@@ -3,7 +3,7 @@ import { hexRgbOnly, hexWithAlpha, isHexColor, mixColor } from "./helper.js";
|
|
|
3
3
|
import { isObj, str } from "@cat-kit/core";
|
|
4
4
|
import { withUnit } from "@veltra/utils";
|
|
5
5
|
import { reactive, toRaw, watch } from "vue";
|
|
6
|
-
|
|
6
|
+
// src/theme/ui-theme.ts
|
|
7
7
|
var UITheme = class UITheme {
|
|
8
8
|
static themeID = "ultra-ui-theme";
|
|
9
9
|
static adoptedSheet = null;
|
|
@@ -307,7 +307,6 @@ var UITheme = class UITheme {
|
|
|
307
307
|
});
|
|
308
308
|
}
|
|
309
309
|
};
|
|
310
|
-
//#endregion
|
|
311
310
|
export { UITheme };
|
|
312
311
|
|
|
313
312
|
//# sourceMappingURL=ui-theme.js.map
|