@veltra/styles 1.6.6 → 1.7.1

package/dist/theme/presets/glass.js.map

@@ -1 +1 @@
-{"version":3,"file":"glass.js","names":[],"sources":["../../../src/theme/presets/glass.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const glassLightTheme = lightTheme.new({\n  color: {\n    primary: '#3B82F6',\n    success: '#10B981',\n    warning: '#F59E0B',\n    danger: '#EF4444',\n    info: '#06B6D4',\n    disabled: '#E5E7EB',\n    default: '#F3F4F6'\n  },\n  bg: {\n    color: {\n      bottom: 'rgba(255, 255, 255, 0.45)',\n      middle: 'rgba(255, 255, 255, 0.55)',\n      top: 'rgba(255, 255, 255, 0.6)',\n      hover: 'rgba(255, 255, 255, 0.75)',\n      black: '#000000'\n    },\n    filter: { blur: 'blur(24px)', saturate: 'saturate(180%)' }\n  },\n  border: {\n    color: 'rgba(15, 23, 42, 0.14)',\n    mutedColor: 'rgba(15, 23, 42, 0.08)',\n    width: 1,\n    style: 'solid'\n  },\n  'text-color': {\n    title: '#1E293B',\n    main: '#334155',\n    placeholder: '#94A3B8',\n    second: '#64748B',\n    assist: '#CBD5E1',\n    disabled: '#94A3B8',\n    white: '#FFFFFF'\n  },\n  shadow: { color: '#00000014', x: 0, y: 4, blur: 24, spread: 0, emboss: 'none' }\n})\n\nexport const glassDarkTheme = glassLightTheme.new({\n  color: { disabled: '#374151', default: '#1E293B' },\n  bg: {\n    color: {\n      bottom: 'rgba(15, 23, 42, 0.6)',\n      middle: 'rgba(15, 23, 42, 0.7)',\n      top: 'rgba(15, 23, 42, 0.75)',\n      hover: 'rgba(30, 41, 59, 0.85)',\n      black: '#000000'\n    },\n    filter: { blur: 'blur(20px)', saturate: 'saturate(200%)' }\n  },\n  border: { color: 'rgba(255, 255, 255, 0.18)', mutedColor: 'rgba(255, 255, 255, 0.1)' },\n  'text-color': {\n    title: '#F8FAFC',\n    main: '#F1F5F9',\n    second: '#94A3B8',\n    placeholder: '#64748B',\n    assist: '#64748B',\n    disabled: '#475569',\n    white: '#ffffff'\n  },\n  shadow: {\n    color: '#00000059',\n    x: 0,\n    y: 4,\n    blur: 32,\n    spread: 0,\n    emboss: 'none',\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',\n    lg: '0 8px 24px 0 rgba(0, 0, 0, 0.55), 0 2px 6px 0 rgba(0, 0, 0, 0.35)'\n  }\n})\n"],"mappings":";;AAEA,MAAa,kBAAkB,WAAW,IAAI;CAC5C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;EACT;EACA,QAAQ;GAAE,MAAM;GAAc,UAAU;EAAiB;CAC3D;CACA,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,OAAO;EACP,OAAO;CACT;CACA,cAAc;EACZ,OAAO;EACP,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EAAE,OAAO;EAAa,GAAG;EAAG,GAAG;EAAG,MAAM;EAAI,QAAQ;EAAG,QAAQ;CAAO;AAChF,CAAC;AAED,MAAa,iBAAiB,gBAAgB,IAAI;CAChD,OAAO;EAAE,UAAU;EAAW,SAAS;CAAU;CACjD,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;EACT;EACA,QAAQ;GAAE,MAAM;GAAc,UAAU;EAAiB;CAC3D;CACA,QAAQ;EAAE,OAAO;EAA6B,YAAY;CAA2B;CACrF,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;AACF,CAAC"}
+{"version":3,"file":"glass.js","names":[],"sources":["../../../src/theme/presets/glass.ts"],"sourcesContent":["import { lightTheme } from './light'\n\n/**\n * 玻璃拟态，天生适合深色（半透明背景 + 背景模糊在深色下层次最好）。\n * 背景为 rgba() 时派生 token（kbd / batch-edit 混合色）无法自动推导，\n * 需通过组件级扩展键显式声明。\n */\nexport const glassTheme = lightTheme.new(\n  {\n    color: {\n      primary: '#3B82F6',\n      success: '#10B981',\n      warning: '#F59E0B',\n      danger: '#EF4444',\n      info: '#06B6D4',\n      disabled: '#374151',\n      default: '#1E293B'\n    },\n    bg: {\n      color: {\n        bottom: 'rgba(15, 23, 42, 0.6)',\n        middle: 'rgba(15, 23, 42, 0.7)',\n        top: 'rgba(15, 23, 42, 0.75)',\n        hover: 'rgba(30, 41, 59, 0.85)',\n        black: '#000000'\n      },\n      filter: { blur: 'blur(20px)', saturate: 'saturate(200%)' }\n    },\n    border: {\n      color: 'rgba(255, 255, 255, 0.18)',\n      mutedColor: 'rgba(255, 255, 255, 0.1)',\n      width: 1,\n      style: 'solid'\n    },\n    'text-color': {\n      title: '#F8FAFC',\n      main: '#F1F5F9',\n      second: '#94A3B8',\n      placeholder: '#64748B',\n      assist: '#64748B',\n      disabled: '#475569',\n      white: '#ffffff'\n    },\n    shadow: {\n      color: '#00000059',\n      x: 0,\n      y: 4,\n      blur: 32,\n      spread: 0,\n      emboss: 'none',\n      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',\n      lg: '0 8px 24px 0 rgba(0, 0, 0, 0.55), 0 2px 6px 0 rgba(0, 0, 0, 0.35)'\n    },\n    kbd: {\n      'inset-shadow': 'rgba(0, 0, 0, 0.5)',\n      'border-shadow': 'rgba(255, 255, 255, 0.09)',\n      'drop-shadow': 'rgba(0, 0, 0, 0.6)'\n    },\n    'batch-edit': { 'form-header-bg': 'rgba(15, 23, 42, 0.8)' }\n  },\n  { series: 'dark' }\n)\n"],"mappings":";;;;;;;AAOA,MAAa,aAAa,WAAW,IACnC;CACE,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;EACT;EACA,QAAQ;GAAE,MAAM;GAAc,UAAU;EAAiB;CAC3D;CACA,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,OAAO;EACP,OAAO;CACT;CACA,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CACA,KAAK;EACH,gBAAgB;EAChB,iBAAiB;EACjB,eAAe;CACjB;CACA,cAAc,EAAE,kBAAkB,wBAAwB;AAC5D,GACA,EAAE,QAAQ,OAAO,CACnB"}

package/dist/theme/presets/hero.d.ts

@@ -1,8 +1,8 @@
 import { UITheme } from "../ui-theme.js";
 import "../index.js";
 //#region src/theme/presets/hero.d.ts
-declare const heroLightTheme: UITheme;
-declare const heroDarkTheme: UITheme;
+/** HeroUI 风格，天生适合浅色 */
+declare const heroTheme: UITheme;
 //#endregion
-export { heroDarkTheme, heroLightTheme };
+export { heroTheme };
 //# sourceMappingURL=hero.d.ts.map

package/dist/theme/presets/hero.js

@@ -1,6 +1,7 @@
 import { lightTheme } from "./light.js";
 //#region src/theme/presets/hero.ts
-const heroLightTheme = lightTheme.new({
+/** HeroUI 风格，天生适合浅色 */
+const heroTheme = lightTheme.new({
 	color: {
 		primary: "#7828c8",
 		success: "#17c964",
@@ -37,47 +38,10 @@ const heroLightTheme = lightTheme.new({
 		spread: 0,
 		emboss: "0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 3px 0px #0000000f"
 	},
-	button: { "default-bg": "#ebebec" }
-});
-const heroDarkTheme = heroLightTheme.new({
-	color: {
-		primary: "#9353d3",
-		disabled: "#27272a",
-		default: "#27272a"
-	},
-	bg: { color: {
-		bottom: "#000000",
-		middle: "#18181b",
-		top: "#27272a",
-		hover: "#3f3f46",
-		black: "#000000"
-	} },
-	border: {
-		color: "#3f3f46",
-		mutedColor: "#3f3f46"
-	},
-	"text-color": {
-		title: "#ECEDEE",
-		main: "#ECEDEE",
-		second: "#A1A1AA",
-		placeholder: "#71717A",
-		assist: "#71717A",
-		disabled: "#71717A",
-		white: "#FFFFFF"
-	},
-	shadow: {
-		color: "#00000033",
-		x: 0,
-		y: 4,
-		blur: 14,
-		spread: 0,
-		emboss: "0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 1px 0 #0000000f",
-		sm: "0 1px 2px 0 rgba(0, 0, 0, 0.4)",
-		lg: "0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.35)"
-	},
-	button: { "default-bg": "var(--u-bg-color-top)" }
+	button: { "default-bg": "#ebebec" },
+	nav: { variant: "light" }
 });
 //#endregion
-export { heroDarkTheme, heroLightTheme };
+export { heroTheme };
 
 //# sourceMappingURL=hero.js.map

package/dist/theme/presets/hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"hero.js","names":[],"sources":["../../../src/theme/presets/hero.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const heroLightTheme = lightTheme.new({\n  color: {\n    primary: '#7828c8', // purple\n    success: '#17c964',\n    warning: '#f5a524',\n    danger: '#f31260',\n    info: '#006fee',\n    disabled: '#f4f4f5',\n    default: '#f4f4f5'\n  },\n  border: { width: 2, color: '#dcdfe6', mutedColor: '#e4e4e7' },\n  'text-color': {\n    title: '#11181C',\n    main: '#11181C',\n    second: '#71717A',\n    placeholder: '#A1A1AA',\n    assist: '#A1A1AA',\n    disabled: '#A1A1AA',\n    white: '#FFFFFF'\n  },\n  radius: { small: 8, default: 12, large: 14 },\n  shadow: {\n    color: '#00000014',\n    x: 0,\n    y: 4,\n    blur: 14,\n    spread: 0,\n    emboss: '0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 3px 0px #0000000f'\n  },\n  button: { 'default-bg': '#ebebec' }\n})\n\nexport const heroDarkTheme = heroLightTheme.new({\n  color: { primary: '#9353d3', disabled: '#27272a', default: '#27272a' },\n  bg: {\n    color: {\n      bottom: '#000000',\n      middle: '#18181b',\n      top: '#27272a',\n      hover: '#3f3f46',\n      black: '#000000'\n    }\n  },\n  border: { color: '#3f3f46', mutedColor: '#3f3f46' },\n  'text-color': {\n    title: '#ECEDEE',\n    main: '#ECEDEE',\n    second: '#A1A1AA',\n    placeholder: '#71717A',\n    assist: '#71717A',\n    disabled: '#71717A',\n    white: '#FFFFFF'\n  },\n  shadow: {\n    color: '#00000033',\n    x: 0,\n    y: 4,\n    blur: 14,\n    spread: 0,\n    emboss: '0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 1px 0 #0000000f',\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.4)',\n    lg: '0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 0 rgba(0, 0, 0, 0.35)'\n  },\n  button: { 'default-bg': 'var(--u-bg-color-top)' }\n})\n"],"mappings":";;AAEA,MAAa,iBAAiB,WAAW,IAAI;CAC3C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;CAAU;CAC5D,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;CAAG;CAC3C,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;CACV;CACA,QAAQ,EAAE,cAAc,UAAU;AACpC,CAAC;AAED,MAAa,gBAAgB,eAAe,IAAI;CAC9C,OAAO;EAAE,SAAS;EAAW,UAAU;EAAW,SAAS;CAAU;CACrE,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;CACT,EACF;CACA,QAAQ;EAAE,OAAO;EAAW,YAAY;CAAU;CAClD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CACA,QAAQ,EAAE,cAAc,wBAAwB;AAClD,CAAC"}
+{"version":3,"file":"hero.js","names":[],"sources":["../../../src/theme/presets/hero.ts"],"sourcesContent":["import { lightTheme } from './light'\n\n/** HeroUI 风格，天生适合浅色 */\nexport const heroTheme = lightTheme.new({\n  color: {\n    primary: '#7828c8', // purple\n    success: '#17c964',\n    warning: '#f5a524',\n    danger: '#f31260',\n    info: '#006fee',\n    disabled: '#f4f4f5',\n    default: '#f4f4f5'\n  },\n  border: { width: 2, color: '#dcdfe6', mutedColor: '#e4e4e7' },\n  'text-color': {\n    title: '#11181C',\n    main: '#11181C',\n    second: '#71717A',\n    placeholder: '#A1A1AA',\n    assist: '#A1A1AA',\n    disabled: '#A1A1AA',\n    white: '#FFFFFF'\n  },\n  radius: { small: 8, default: 12, large: 14 },\n  shadow: {\n    color: '#00000014',\n    x: 0,\n    y: 4,\n    blur: 14,\n    spread: 0,\n    emboss: '0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 3px 0px #0000000f'\n  },\n  button: { 'default-bg': '#ebebec' },\n  // HeroUI 风浅灰侧栏（演示浅色变体）\n  nav: { variant: 'light' }\n})\n"],"mappings":";;;AAGA,MAAa,YAAY,WAAW,IAAI;CACtC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;CAAU;CAC5D,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;CACT;CACA,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;CAAG;CAC3C,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;CACV;CACA,QAAQ,EAAE,cAAc,UAAU;CAElC,KAAK,EAAE,SAAS,QAAQ;AAC1B,CAAC"}

package/dist/theme/presets/midnight.d.ts

@@ -0,0 +1,8 @@
+import { UITheme } from "../ui-theme.js";
+import "../index.js";
+//#region src/theme/presets/midnight.d.ts
+/** 午夜（靛蓝 + 深空底，宽松间距、舒缓缓动），天生适合深色 */
+declare const midnightTheme: UITheme;
+//#endregion
+export { midnightTheme };
+//# sourceMappingURL=midnight.d.ts.map

package/dist/theme/presets/midnight.js

@@ -0,0 +1,55 @@
+import { darkTheme } from "./dark.js";
+//#region src/theme/presets/midnight.ts
+/** 午夜（靛蓝 + 深空底，宽松间距、舒缓缓动），天生适合深色 */
+const midnightTheme = darkTheme.new({
+	color: {
+		primary: "#6f78ee",
+		success: "#34d399",
+		warning: "#fbbf24",
+		danger: "#f87171",
+		info: "#38bdf8",
+		disabled: "#232d4a",
+		default: "#232d4a"
+	},
+	bg: { color: {
+		bottom: "#0a0f1e",
+		middle: "#101731",
+		top: "#182242",
+		hover: "#212d54"
+	} },
+	"text-color": {
+		title: "#e8ecff",
+		main: "#c3cbf0",
+		second: "#8d97c6",
+		placeholder: "#7d8ab8",
+		assist: "#5b6895",
+		disabled: "#576493"
+	},
+	border: {
+		color: "#36457a",
+		mutedColor: "#52619a"
+	},
+	gap: {
+		small: 8,
+		default: 10,
+		large: 14
+	},
+	shadow: {
+		color: "#00000080",
+		x: 0,
+		y: 2,
+		blur: 8,
+		spread: 0,
+		emboss: "none",
+		sm: "0 1px 2px 0 rgba(0, 0, 0, 0.5)",
+		lg: "0 8px 24px 0 rgba(0, 0, 0, 0.6), 0 2px 6px 0 rgba(0, 0, 0, 0.4)"
+	},
+	transition: {
+		slow: "0.4s",
+		ease: "cubic-bezier(0.33, 1, 0.68, 1)"
+	}
+});
+//#endregion
+export { midnightTheme };
+
+//# sourceMappingURL=midnight.js.map

package/dist/theme/presets/midnight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"midnight.js","names":[],"sources":["../../../src/theme/presets/midnight.ts"],"sourcesContent":["import { darkTheme } from './dark'\n\n/** 午夜（靛蓝 + 深空底，宽松间距、舒缓缓动），天生适合深色 */\nexport const midnightTheme = darkTheme.new({\n  color: {\n    primary: '#6f78ee', // 星靛（白字对比 3.75:1）\n    success: '#34d399',\n    warning: '#fbbf24',\n    danger: '#f87171',\n    info: '#38bdf8',\n    disabled: '#232d4a',\n    default: '#232d4a'\n  },\n  bg: {\n    color: {\n      bottom: '#0a0f1e', // 深空\n      middle: '#101731',\n      top: '#182242',\n      hover: '#212d54'\n    }\n  },\n  'text-color': {\n    title: '#e8ecff', // 月光\n    main: '#c3cbf0',\n    second: '#8d97c6',\n    placeholder: '#7d8ab8',\n    assist: '#5b6895',\n    disabled: '#576493'\n  },\n  // mutedColor 与卡片底对比 2.6:1，保证输入控件清晰可见\n  border: { color: '#36457a', mutedColor: '#52619a' },\n  // 更宽松的间距，配合深空的呼吸感\n  gap: { small: 8, default: 10, large: 14 },\n  shadow: {\n    color: '#00000080',\n    x: 0,\n    y: 2,\n    blur: 8,\n    spread: 0,\n    emboss: 'none',\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.5)',\n    lg: '0 8px 24px 0 rgba(0, 0, 0, 0.6), 0 2px 6px 0 rgba(0, 0, 0, 0.4)'\n  },\n  transition: { slow: '0.4s', ease: 'cubic-bezier(0.33, 1, 0.68, 1)' }\n})\n"],"mappings":";;;AAGA,MAAa,gBAAgB,UAAU,IAAI;CACzC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;CACT,EACF;CACA,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;CACZ;CAEA,QAAQ;EAAE,OAAO;EAAW,YAAY;CAAU;CAElD,KAAK;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;CAAG;CACxC,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CACA,YAAY;EAAE,MAAM;EAAQ,MAAM;CAAiC;AACrE,CAAC"}

package/dist/theme/presets/neon.d.ts

@@ -0,0 +1,8 @@
+import { UITheme } from "../ui-theme.js";
+import "../index.js";
+//#region src/theme/presets/neon.d.ts
+/** 霓虹（品红 + 夜紫底 + 辉光阴影，小圆角、急速缓动），天生适合深色 */
+declare const neonTheme: UITheme;
+//#endregion
+export { neonTheme };
+//# sourceMappingURL=neon.d.ts.map

package/dist/theme/presets/neon.js

@@ -0,0 +1,55 @@
+import { darkTheme } from "./dark.js";
+//#region src/theme/presets/neon.ts
+/** 霓虹（品红 + 夜紫底 + 辉光阴影，小圆角、急速缓动），天生适合深色 */
+const neonTheme = darkTheme.new({
+	color: {
+		primary: "#c026d3",
+		success: "#4ade80",
+		warning: "#facc15",
+		danger: "#fb7185",
+		info: "#22d3ee",
+		disabled: "#241532",
+		default: "#241532"
+	},
+	bg: { color: {
+		bottom: "#0c0612",
+		middle: "#130a1d",
+		top: "#1c102a",
+		hover: "#28163d"
+	} },
+	"text-color": {
+		title: "#f6efff",
+		main: "#d9cdee",
+		second: "#a08bc4",
+		placeholder: "#8f74b8",
+		assist: "#6b4f94",
+		disabled: "#63498a"
+	},
+	border: {
+		color: "#503480",
+		mutedColor: "#684a9e"
+	},
+	radius: {
+		small: 2,
+		default: 4,
+		large: 8
+	},
+	shadow: {
+		color: "rgba(192, 38, 211, 0.3)",
+		x: 0,
+		y: 0,
+		blur: 12,
+		spread: 0,
+		emboss: "none",
+		sm: "0 1px 2px 0 rgba(0, 0, 0, 0.5)",
+		lg: "0 0 24px 0 rgba(192, 38, 211, 0.25), 0 8px 24px 0 rgba(0, 0, 0, 0.5)"
+	},
+	transition: {
+		fast: "0.1s",
+		ease: "cubic-bezier(0.85, 0, 0.15, 1)"
+	}
+});
+//#endregion
+export { neonTheme };
+
+//# sourceMappingURL=neon.js.map

package/dist/theme/presets/neon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"neon.js","names":[],"sources":["../../../src/theme/presets/neon.ts"],"sourcesContent":["import { darkTheme } from './dark'\n\n/** 霓虹（品红 + 夜紫底 + 辉光阴影，小圆角、急速缓动），天生适合深色 */\nexport const neonTheme = darkTheme.new({\n  color: {\n    primary: '#c026d3', // 霓红\n    success: '#4ade80',\n    warning: '#facc15',\n    danger: '#fb7185',\n    info: '#22d3ee',\n    disabled: '#241532',\n    default: '#241532'\n  },\n  bg: {\n    color: {\n      bottom: '#0c0612', // 夜紫\n      middle: '#130a1d',\n      top: '#1c102a',\n      hover: '#28163d'\n    }\n  },\n  'text-color': {\n    title: '#f6efff',\n    main: '#d9cdee',\n    second: '#a08bc4',\n    placeholder: '#8f74b8',\n    assist: '#6b4f94',\n    disabled: '#63498a'\n  },\n  // mutedColor 与卡片底对比 2.65:1，输入控件带清晰的紫色描边\n  border: { color: '#503480', mutedColor: '#684a9e' },\n  // 赛博感：小圆角 + 品红辉光\n  radius: { small: 2, default: 4, large: 8 },\n  shadow: {\n    color: 'rgba(192, 38, 211, 0.3)',\n    x: 0,\n    y: 0,\n    blur: 12,\n    spread: 0,\n    emboss: 'none',\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.5)',\n    lg: '0 0 24px 0 rgba(192, 38, 211, 0.25), 0 8px 24px 0 rgba(0, 0, 0, 0.5)'\n  },\n  transition: { fast: '0.1s', ease: 'cubic-bezier(0.85, 0, 0.15, 1)' }\n})\n"],"mappings":";;;AAGA,MAAa,YAAY,UAAU,IAAI;CACrC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;CACT,EACF;CACA,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;CACZ;CAEA,QAAQ;EAAE,OAAO;EAAW,YAAY;CAAU;CAElD,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;CAAE;CACzC,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CACA,YAAY;EAAE,MAAM;EAAQ,MAAM;CAAiC;AACrE,CAAC"}

package/dist/theme/presets/ocean.d.ts

@@ -0,0 +1,8 @@
+import { UITheme } from "../ui-theme.js";
+import "../index.js";
+//#region src/theme/presets/ocean.d.ts
+/** 海盐（松石青 + 冷白底，利落的快缓动），天生适合浅色 */
+declare const oceanTheme: UITheme;
+//#endregion
+export { oceanTheme };
+//# sourceMappingURL=ocean.d.ts.map

package/dist/theme/presets/ocean.js

@@ -0,0 +1,57 @@
+import { mixColor } from "../helper.js";
+import { lightTheme } from "./light.js";
+//#region src/theme/presets/ocean.ts
+/** 海盐（松石青 + 冷白底，利落的快缓动），天生适合浅色 */
+const oceanTheme = lightTheme.new({
+	color: {
+		primary: "#0d9488",
+		success: "#16a34a",
+		warning: "#d97706",
+		danger: "#dc2626",
+		info: "#0284c7",
+		disabled: "#eff6f5",
+		default: "#eff6f5"
+	},
+	bg: { color: {
+		bottom: "#eef6f5",
+		middle: "#f5fafa",
+		top: "#ffffff",
+		hover: "#e0efee"
+	} },
+	"text-color": {
+		title: "#16302e",
+		main: "#2f4a48",
+		second: "#5b7875",
+		assist: "#c3d6d4",
+		placeholder: "#7fa19e",
+		disabled: "#a3bab7"
+	},
+	border: {
+		width: 1,
+		color: "#c2dedb",
+		mutedColor: "#8fbcb7"
+	},
+	radius: {
+		small: 6,
+		default: 10,
+		large: 14
+	},
+	shadow: {
+		color: "rgba(21, 94, 89, 0.12)",
+		x: 0,
+		y: 2,
+		blur: 10,
+		spread: -1,
+		sm: "0 1px 2px 0 rgba(21, 94, 89, 0.08)",
+		lg: "0 8px 24px 0 rgba(21, 94, 89, 0.12), 0 2px 6px 0 rgba(21, 94, 89, 0.06)"
+	},
+	transition: {
+		fast: "0.12s",
+		ease: "cubic-bezier(0.22, 1, 0.36, 1)"
+	},
+	nav: { "bg-color": mixColor("#16302e", "#0d9488", .25) }
+});
+//#endregion
+export { oceanTheme };
+
+//# sourceMappingURL=ocean.js.map

package/dist/theme/presets/ocean.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ocean.js","names":[],"sources":["../../../src/theme/presets/ocean.ts"],"sourcesContent":["import { mixColor } from '../helper'\nimport { lightTheme } from './light'\n\n/** 海盐（松石青 + 冷白底，利落的快缓动），天生适合浅色 */\nexport const oceanTheme = lightTheme.new({\n  color: {\n    primary: '#0d9488', // 松石青\n    success: '#16a34a',\n    warning: '#d97706',\n    danger: '#dc2626',\n    info: '#0284c7',\n    disabled: '#eff6f5',\n    default: '#eff6f5'\n  },\n  bg: { color: { bottom: '#eef6f5', middle: '#f5fafa', top: '#ffffff', hover: '#e0efee' } },\n  'text-color': {\n    title: '#16302e', // 深礁\n    main: '#2f4a48',\n    second: '#5b7875',\n    assist: '#c3d6d4',\n    placeholder: '#7fa19e',\n    disabled: '#a3bab7'\n  },\n  border: { width: 1, color: '#c2dedb', mutedColor: '#8fbcb7' },\n  radius: { small: 6, default: 10, large: 14 },\n  shadow: {\n    color: 'rgba(21, 94, 89, 0.12)',\n    x: 0,\n    y: 2,\n    blur: 10,\n    spread: -1,\n    sm: '0 1px 2px 0 rgba(21, 94, 89, 0.08)',\n    lg: '0 8px 24px 0 rgba(21, 94, 89, 0.12), 0 2px 6px 0 rgba(21, 94, 89, 0.06)'\n  },\n  transition: { fast: '0.12s', ease: 'cubic-bezier(0.22, 1, 0.36, 1)' },\n  nav: {\n    // 深海礁侧栏：深礁 + 松石青调和\n    'bg-color': mixColor('#16302e', '#0d9488', 0.25)\n  }\n})\n"],"mappings":";;;;AAIA,MAAa,aAAa,WAAW,IAAI;CACvC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI,EAAE,OAAO;EAAE,QAAQ;EAAW,QAAQ;EAAW,KAAK;EAAW,OAAO;CAAU,EAAE;CACxF,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;CACZ;CACA,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;CAAU;CAC5D,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;CAAG;CAC3C,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CACA,YAAY;EAAE,MAAM;EAAS,MAAM;CAAiC;CACpE,KAAK,EAEH,YAAY,SAAS,WAAW,WAAW,GAAI,EACjD;AACF,CAAC"}

package/dist/theme/presets/sakura.d.ts

@@ -0,0 +1,8 @@
+import { UITheme } from "../ui-theme.js";
+import "../index.js";
+//#region src/theme/presets/sakura.d.ts
+/** 樱花（柔粉 + 花瓣底，大圆角、弹性缓动），天生适合浅色 */
+declare const sakuraTheme: UITheme;
+//#endregion
+export { sakuraTheme };
+//# sourceMappingURL=sakura.d.ts.map

package/dist/theme/presets/sakura.js

@@ -0,0 +1,59 @@
+import { mixColor } from "../helper.js";
+import { lightTheme } from "./light.js";
+//#region src/theme/presets/sakura.ts
+/** 樱花（柔粉 + 花瓣底，大圆角、弹性缓动），天生适合浅色 */
+const sakuraTheme = lightTheme.new({
+	color: {
+		primary: "#e64980",
+		success: "#2f9e6e",
+		warning: "#e8890c",
+		danger: "#e03131",
+		info: "#7c6cf0",
+		disabled: "#faf0f3",
+		default: "#faf0f3"
+	},
+	bg: { color: {
+		bottom: "#fdf1f5",
+		middle: "#fef6f9",
+		top: "#ffffff",
+		hover: "#fbe4ec"
+	} },
+	"text-color": {
+		title: "#43272f",
+		main: "#5f3d46",
+		second: "#92616d",
+		assist: "#dcc0c7",
+		placeholder: "#b58694",
+		disabled: "#c4a0aa"
+	},
+	border: {
+		width: 1,
+		color: "#f0c3d4",
+		mutedColor: "#e09db6"
+	},
+	radius: {
+		small: 8,
+		default: 12,
+		large: 16
+	},
+	"form-component-height": {
+		small: 26,
+		default: 34,
+		large: 42
+	},
+	shadow: {
+		color: "rgba(173, 58, 105, 0.12)",
+		x: 0,
+		y: 4,
+		blur: 14,
+		spread: -2,
+		sm: "0 1px 2px 0 rgba(173, 58, 105, 0.08)",
+		lg: "0 8px 24px 0 rgba(173, 58, 105, 0.14), 0 2px 6px 0 rgba(173, 58, 105, 0.08)"
+	},
+	transition: { easeOut: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+	nav: { "bg-color": mixColor("#43272f", "#e64980", .22) }
+});
+//#endregion
+export { sakuraTheme };
+
+//# sourceMappingURL=sakura.js.map

package/dist/theme/presets/sakura.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sakura.js","names":[],"sources":["../../../src/theme/presets/sakura.ts"],"sourcesContent":["import { mixColor } from '../helper'\nimport { lightTheme } from './light'\n\n/** 樱花（柔粉 + 花瓣底，大圆角、弹性缓动），天生适合浅色 */\nexport const sakuraTheme = lightTheme.new({\n  color: {\n    primary: '#e64980', // 樱粉\n    success: '#2f9e6e',\n    warning: '#e8890c',\n    danger: '#e03131',\n    info: '#7c6cf0',\n    disabled: '#faf0f3',\n    default: '#faf0f3'\n  },\n  bg: { color: { bottom: '#fdf1f5', middle: '#fef6f9', top: '#ffffff', hover: '#fbe4ec' } },\n  'text-color': {\n    title: '#43272f', // 樱墨\n    main: '#5f3d46',\n    second: '#92616d',\n    assist: '#dcc0c7',\n    placeholder: '#b58694',\n    disabled: '#c4a0aa'\n  },\n  border: { width: 1, color: '#f0c3d4', mutedColor: '#e09db6' },\n  radius: { small: 8, default: 12, large: 16 },\n  // 更宽松的表单控件，配合大圆角的柔和感\n  'form-component-height': { small: 26, default: 34, large: 42 },\n  shadow: {\n    color: 'rgba(173, 58, 105, 0.12)',\n    x: 0,\n    y: 4,\n    blur: 14,\n    spread: -2,\n    sm: '0 1px 2px 0 rgba(173, 58, 105, 0.08)',\n    lg: '0 8px 24px 0 rgba(173, 58, 105, 0.14), 0 2px 6px 0 rgba(173, 58, 105, 0.08)'\n  },\n  transition: { easeOut: 'cubic-bezier(0.34, 1.56, 0.64, 1)' },\n  nav: {\n    // 深酒红侧栏：樱墨 + 樱粉调和\n    'bg-color': mixColor('#43272f', '#e64980', 0.22)\n  }\n})\n"],"mappings":";;;;AAIA,MAAa,cAAc,WAAW,IAAI;CACxC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;CACX;CACA,IAAI,EAAE,OAAO;EAAE,QAAQ;EAAW,QAAQ;EAAW,KAAK;EAAW,OAAO;CAAU,EAAE;CACxF,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,aAAa;EACb,UAAU;CACZ;CACA,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAW,YAAY;CAAU;CAC5D,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;CAAG;CAE3C,yBAAyB;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;CAAG;CAC7D,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,IAAI;EACJ,IAAI;CACN;CACA,YAAY,EAAE,SAAS,oCAAoC;CAC3D,KAAK,EAEH,YAAY,SAAS,WAAW,WAAW,GAAI,EACjD;AACF,CAAC"}

package/dist/theme/type.d.ts

@@ -176,6 +176,16 @@ type Theme = {
     'default-bg'?: string;
     [key: string]: any;
   };
+  /**
+   * 侧栏导航（nav / dual-nav / group-nav）组件级变量。
+   * variant 选择深/浅侧栏外观，其余键覆盖同名 `--u-nav-*` token
+   * （如 `'bg-color'` → `--u-nav-bg-color`），覆盖优先级高于 variant 内置值。
+   */
+  nav?: {
+    /** 侧栏外观：dark 深底浅字 / light 浅底深字，默认 dark */
+    variant?: 'dark' | 'light';
+    [key: string]: any;
+  };
   /** 折叠面板组件级变量 */
   collapse?: {
     /** 折叠项标题文字颜色 */

package/dist/theme/ui-theme.d.ts

@@ -1,15 +1,22 @@
 import { Theme } from "./type.js";
 //#region src/theme/ui-theme.d.ts
 type RecursivePartial<T> = { [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P]; };
+/** 主题系列：浅色或深色。决定组件级 token 与 html[data-theme] */
+type ThemeSeries = 'light' | 'dark';
+interface UIThemeOptions {
+  /** 主题变更时是否自动重渲染，默认 true */
+  reactive?: boolean;
+  /** 主题所属系列，默认 'light' */
+  series?: ThemeSeries;
+}
 declare class UITheme {
   static themeID: string;
   private static adoptedSheet;
   readonly theme: Theme;
+  /** 主题所属系列：浅色 / 深色 */
+  series: ThemeSeries;
   private readonly reactiveEnabled;
-  constructor(theme: Theme, options?: {
-    reactive?: boolean;
-  });
-  static setTheme(mode: 'light' | 'dark' | 'auto'): void;
+  constructor(theme: Theme, options?: UIThemeOptions);
   private renderBase;
   private renderBorder;
   private renderTypeColor;
@@ -23,13 +30,19 @@ declare class UITheme {
   /** 主题变量声明列表，均为 `--u-` 前缀的 CSS 自定义属性 */
   themeToDeclarationList(theme: Theme): string[];
   private static declarationBlock;
+  /**
+   * nav 侧栏外观声明：按主题 `nav.variant`（默认 dark）取内置深/浅侧栏 token，
+   * 主题 `nav` 的其余键作为 `--u-nav-*` 覆盖追加在最后（同规则后者生效）。
+   */
+  navSidebarDecls(theme: Theme): string[];
   private static removeExistingStyleTag;
   private static applyGlobalCSS;
-  /** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */
-  static injectBuiltInThemes(light: UITheme, dark: UITheme): void;
+  /** 注入主题：全局 token + 与主题系列匹配的组件级 token + nav 侧栏外观，并写入 html[data-theme] */
   render(): void;
-  new(customTheme?: RecursivePartial<Theme>): UITheme;
+  new(customTheme?: RecursivePartial<Theme>, options?: {
+    series?: ThemeSeries;
+  }): UITheme;
 }
 //#endregion
-export { UITheme };
+export { ThemeSeries, UITheme, UIThemeOptions };
 //# sourceMappingURL=ui-theme.d.ts.map

package/dist/theme/ui-theme.js

@@ -1,4 +1,4 @@
-import { componentCssVarsDarkDecls, componentCssVarsLightDecls } from "./component-css-vars.js";
+import { componentCssVarsDarkDecls, componentCssVarsLightDecls, resolveNavSidebarDecls } from "./component-css-vars.js";
 import { hexRgbOnly, hexWithAlpha, isHexColor, mixColor } from "./helper.js";
 import { isObj, str } from "@cat-kit/core";
 import { withUnit } from "@veltra/utils";
@@ -8,20 +8,18 @@ var UITheme = class UITheme {
 	static themeID = "ultra-ui-theme";
 	static adoptedSheet = null;
 	theme;
+	/** 主题所属系列：浅色 / 深色 */
+	series;
 	reactiveEnabled;
 	constructor(theme, options) {
 		this.reactiveEnabled = options?.reactive !== false;
+		this.series = options?.series ?? "light";
 		this.theme = reactive(theme);
 		if (this.reactiveEnabled) watch(this.theme, () => this.render(), { deep: true });
 	}
-	static setTheme(mode) {
-		if (typeof document === "undefined") return;
-		const el = document.documentElement;
-		if (mode === "auto") delete el.dataset.theme;
-		else el.dataset.theme = mode;
-	}
 	renderBase(theme, themeRules = [], parentKey = "--u") {
 		Object.keys(theme).forEach((key) => {
+			if (parentKey === "--u" && key === "nav") return;
 			const value = theme[key];
 			const varKey = `${parentKey.startsWith("-") ? parentKey : str(parentKey).kebabCase()}-${str(key).kebabCase()}`;
 			if (typeof value === "object" && value !== null && !Array.isArray(value)) this.renderBase(value, themeRules, varKey);
@@ -160,6 +158,17 @@ var UITheme = class UITheme {
 	static declarationBlock(decls) {
 		return decls.join(";");
 	}
+	/**
+	* nav 侧栏外观声明：按主题 `nav.variant`（默认 dark）取内置深/浅侧栏 token，
+	* 主题 `nav` 的其余键作为 `--u-nav-*` 覆盖追加在最后（同规则后者生效）。
+	*/
+	navSidebarDecls(theme) {
+		const nav = theme.nav ?? {};
+		const variant = nav.variant === "light" ? "light" : "dark";
+		const decls = resolveNavSidebarDecls(this.series, variant);
+		const overrides = Object.keys(nav).filter((key) => key !== "variant" && typeof nav[key] === "string" && nav[key]).map((key) => `--u-nav-${str(key).kebabCase()}: ${nav[key]}`);
+		return [...decls, ...overrides];
+	}
 	static removeExistingStyleTag(doc) {
 		const el = doc.getElementById(UITheme.themeID);
 		if (el?.parentNode) el.parentNode.removeChild(el);
@@ -185,29 +194,20 @@ var UITheme = class UITheme {
 			style.textContent = css;
 		}
 	}
-	/** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */
-	static injectBuiltInThemes(light, dark) {
-		const lightDecls = [...light.themeToDeclarationList(toRaw(light.theme)), ...componentCssVarsLightDecls];
-		const darkDecls = [...dark.themeToDeclarationList(toRaw(dark.theme)), ...componentCssVarsDarkDecls];
-		const lightBlock = UITheme.declarationBlock(lightDecls);
-		const darkBlock = UITheme.declarationBlock(darkDecls);
-		const css = [
-			`html { ${lightBlock} }`,
-			`@media (prefers-color-scheme: dark) {`,
-			`  html:not([data-theme="light"]) { ${darkBlock} }`,
-			`}`,
-			`html[data-theme="light"] { ${lightBlock} }`,
-			`html[data-theme="dark"] { ${darkBlock} }`
-		].join("\n");
-		UITheme.applyGlobalCSS(css);
-	}
+	/** 注入主题：全局 token + 与主题系列匹配的组件级 token + nav 侧栏外观，并写入 html[data-theme] */
 	render() {
-		const componentDecls = typeof document !== "undefined" && document.documentElement.dataset.theme === "dark" ? componentCssVarsDarkDecls : componentCssVarsLightDecls;
-		const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentDecls];
+		const componentDecls = this.series === "dark" ? componentCssVarsDarkDecls : componentCssVarsLightDecls;
+		const raw = toRaw(this.theme);
+		const decls = [
+			...this.themeToDeclarationList(raw),
+			...componentDecls,
+			...this.navSidebarDecls(raw)
+		];
 		const css = `html { ${UITheme.declarationBlock(decls)} }`;
 		UITheme.applyGlobalCSS(css);
+		if (typeof document !== "undefined") document.documentElement.dataset.theme = this.series;
 	}
-	new(customTheme = {}) {
+	new(customTheme = {}, options) {
 		function delEmpty(obj) {
 			Object.keys(obj).forEach((key) => {
 				const value = obj[key];
@@ -228,7 +228,10 @@ var UITheme = class UITheme {
 			});
 		}
 		deepMerge(base, customTheme);
-		return new UITheme(base, { reactive: this.reactiveEnabled });
+		return new UITheme(base, {
+			reactive: this.reactiveEnabled,
+			series: options?.series ?? this.series
+		});
 	}
 };
 //#endregion