@veltra/styles 1.0.15 → 2.0.0

package/dist/_mixins.scss

@@ -74,6 +74,18 @@
   }
 }
 
+@mixin is-not($types...) {
+  $selector: '&';
+
+  @each $type in $types {
+    $selector: '#{$selector}:not(.is-#{$type})';
+  }
+
+  #{$selector} {
+    @content;
+  }
+}
+
 @mixin bem($b, $e: null, $m: null) {
   $b: '.' + vars.$namespace + $b;
 

package/dist/theme/dark.js

@@ -19,8 +19,8 @@ const darkTheme = lightTheme.new({
 			black: "#000000"
 		},
 		filter: {
-			blur: "blur(16px)",
-			saturate: "saturate(180%)"
+			blur: "none",
+			saturate: "none"
 		}
 	},
 	"text-color": {
@@ -38,7 +38,8 @@ const darkTheme = lightTheme.new({
 		x: 0,
 		y: 2,
 		blur: 8,
-		spread: 0
+		spread: 0,
+		emboss: "none"
 	}
 });
 //#endregion

package/dist/theme/dark.js.map

@@ -1 +1 @@
-{"version":3,"file":"dark.js","names":[],"sources":["../../src/theme/dark.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const darkTheme = lightTheme.new({\n  color: {\n    primary: '#4f8ff7',\n    success: '#52c41a',\n    warning: '#faad14',\n    danger: '#ff4d4f',\n    info: '#13c2c2',\n    disabled: '#212020',\n    default: '#595959'\n  },\n\n  bg: {\n    color: {\n      bottom: '#0f0f0f',\n      middle: '#1a1a1a',\n      top: '#262626',\n      hover: '#303030',\n      black: '#000000'\n    },\n    filter: { blur: 'blur(16px)', saturate: 'saturate(180%)' }\n  },\n\n  'text-color': {\n    title: '#f0f0f0',\n    main: '#d9d9d9',\n    second: '#a6a6a6',\n    placeholder: '#737373',\n    assist: '#595959',\n    disabled: '#434343',\n    white: '#ffffff'\n  },\n\n  border: { color: '#404040' },\n\n  shadow: { color: 'rgba(255, 255, 255, 0.2)', x: 0, y: 2, blur: 8, spread: 0 }\n})\n"],"mappings":";;AAEA,MAAa,YAAY,WAAW,IAAI;CACtC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;EACV;CAED,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;GACR;EACD,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;EAC3D;CAED,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CAED,QAAQ,EAAE,OAAO,WAAW;CAE5B,QAAQ;EAAE,OAAO;EAA4B,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG;CAC9E,CAAC"}
+{"version":3,"file":"dark.js","names":[],"sources":["../../src/theme/dark.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const darkTheme = lightTheme.new({\n  color: {\n    primary: '#4f8ff7',\n    success: '#52c41a',\n    warning: '#faad14',\n    danger: '#ff4d4f',\n    info: '#13c2c2',\n    disabled: '#212020',\n    default: '#595959'\n  },\n\n  bg: {\n    color: {\n      bottom: '#0f0f0f',\n      middle: '#1a1a1a',\n      top: '#262626',\n      hover: '#303030',\n      black: '#000000'\n    },\n    filter: { blur: 'none', saturate: 'none' }\n  },\n\n  'text-color': {\n    title: '#f0f0f0',\n    main: '#d9d9d9',\n    second: '#a6a6a6',\n    placeholder: '#737373',\n    assist: '#595959',\n    disabled: '#434343',\n    white: '#ffffff'\n  },\n\n  border: { color: '#404040' },\n\n  shadow: { color: 'rgba(255, 255, 255, 0.2)', x: 0, y: 2, blur: 8, spread: 0, emboss: 'none' }\n})\n"],"mappings":";;AAEA,MAAa,YAAY,WAAW,IAAI;CACtC,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;EACV;CAED,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;GACR;EACD,QAAQ;GAAE,MAAM;GAAQ,UAAU;GAAQ;EAC3C;CAED,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CAED,QAAQ,EAAE,OAAO,WAAW;CAE5B,QAAQ;EAAE,OAAO;EAA4B,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;EAAQ;CAC9F,CAAC"}

package/dist/theme/glass.d.ts

@@ -0,0 +1,8 @@
+import { UITheme } from "./ui-theme.js";
+
+//#region src/theme/glass.d.ts
+declare const glassLightTheme: UITheme;
+declare const glassDarkTheme: UITheme;
+//#endregion
+export { glassDarkTheme, glassLightTheme };
+//# sourceMappingURL=glass.d.ts.map

package/dist/theme/glass.js

@@ -0,0 +1,89 @@
+import { lightTheme } from "./light.js";
+//#region src/theme/glass.ts
+const glassLightTheme = lightTheme.new({
+	color: {
+		primary: "#3B82F6",
+		success: "#10B981",
+		warning: "#F59E0B",
+		danger: "#EF4444",
+		info: "#06B6D4",
+		disabled: "#E5E7EB",
+		default: "#F3F4F6"
+	},
+	bg: {
+		color: {
+			bottom: "rgba(255, 255, 255, 0.45)",
+			middle: "rgba(255, 255, 255, 0.55)",
+			top: "rgba(255, 255, 255, 0.6)",
+			hover: "rgba(255, 255, 255, 0.75)",
+			black: "#000000"
+		},
+		filter: {
+			blur: "blur(24px)",
+			saturate: "saturate(180%)"
+		}
+	},
+	border: {
+		color: "rgba(255, 255, 255, 0.5)",
+		width: 1,
+		style: "solid"
+	},
+	"text-color": {
+		title: "#1E293B",
+		main: "#334155",
+		placeholder: "#94A3B8",
+		second: "#64748B",
+		assist: "#CBD5E1",
+		disabled: "#94A3B8",
+		white: "#FFFFFF"
+	},
+	shadow: {
+		color: "rgba(0, 0, 0, 0.08)",
+		x: 0,
+		y: 4,
+		blur: 24,
+		spread: 0,
+		emboss: "none"
+	}
+});
+const glassDarkTheme = glassLightTheme.new({
+	color: {
+		disabled: "#374151",
+		default: "#1E293B"
+	},
+	bg: {
+		color: {
+			bottom: "rgba(15, 23, 42, 0.6)",
+			middle: "rgba(15, 23, 42, 0.7)",
+			top: "rgba(15, 23, 42, 0.75)",
+			hover: "rgba(30, 41, 59, 0.85)",
+			black: "#000000"
+		},
+		filter: {
+			blur: "blur(20px)",
+			saturate: "saturate(200%)"
+		}
+	},
+	border: { color: "rgba(255, 255, 255, 0.12)" },
+	"text-color": {
+		title: "#F8FAFC",
+		main: "#F1F5F9",
+		second: "#94A3B8",
+		placeholder: "#64748B",
+		assist: "#64748B",
+		disabled: "#475569",
+		white: "#ffffff"
+	},
+	shadow: {
+		color: "rgba(0, 0, 0, 0.35)",
+		x: 0,
+		y: 4,
+		blur: 32,
+		spread: 0,
+		emboss: "none"
+	}
+});
+//#endregion
+export { glassDarkTheme, glassLightTheme };
+
+//# sourceMappingURL=glass.js.map

package/dist/theme/glass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass.js","names":[],"sources":["../../src/theme/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: { color: 'rgba(255, 255, 255, 0.5)', width: 1, style: 'solid' },\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: 'rgba(0, 0, 0, 0.08)', 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.12)' },\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: { color: 'rgba(0, 0, 0, 0.35)', x: 0, y: 4, blur: 32, spread: 0, emboss: 'none' }\n})\n"],"mappings":";;AAEA,MAAa,kBAAkB,WAAW,IAAI;CAC5C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;EACV;CACD,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;GACR;EACD,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;EAC3D;CACD,QAAQ;EAAE,OAAO;EAA4B,OAAO;EAAG,OAAO;EAAS;CACvE,cAAc;EACZ,OAAO;EACP,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACD,QAAQ;EAAE,OAAO;EAAuB,GAAG;EAAG,GAAG;EAAG,MAAM;EAAI,QAAQ;EAAG,QAAQ;EAAQ;CAC1F,CAAC;AAEF,MAAa,iBAAiB,gBAAgB,IAAI;CAChD,OAAO;EAAE,UAAU;EAAW,SAAS;EAAW;CAClD,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;GACR;EACD,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;EAC3D;CACD,QAAQ,EAAE,OAAO,6BAA6B;CAC9C,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACD,QAAQ;EAAE,OAAO;EAAuB,GAAG;EAAG,GAAG;EAAG,MAAM;EAAI,QAAQ;EAAG,QAAQ;EAAQ;CAC1F,CAAC"}

package/dist/theme/hero.d.ts

@@ -0,0 +1,8 @@
+import { UITheme } from "./ui-theme.js";
+
+//#region src/theme/hero.d.ts
+declare const heroLightTheme: UITheme;
+declare const heroDarkTheme: UITheme;
+//#endregion
+export { heroDarkTheme, heroLightTheme };
+//# sourceMappingURL=hero.d.ts.map

package/dist/theme/hero.js

@@ -0,0 +1,75 @@
+import { lightTheme } from "./light.js";
+//#region src/theme/hero.ts
+const heroLightTheme = lightTheme.new({
+	color: {
+		primary: "#7828c8",
+		success: "#17c964",
+		warning: "#f5a524",
+		danger: "#f31260",
+		info: "#006fee",
+		disabled: "#f4f4f5",
+		default: "#f4f4f5"
+	},
+	border: {
+		width: 2,
+		color: "#00000000"
+	},
+	"text-color": {
+		title: "#11181C",
+		main: "#11181C",
+		second: "#71717A",
+		placeholder: "#A1A1AA",
+		assist: "#A1A1AA",
+		disabled: "#A1A1AA",
+		white: "#FFFFFF"
+	},
+	radius: {
+		small: 8,
+		default: 12,
+		large: 14
+	},
+	shadow: {
+		color: "rgba(0, 0, 0, 0.08)",
+		x: 0,
+		y: 4,
+		blur: 14,
+		spread: 0,
+		emboss: "0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 3px 0px #0000000f"
+	}
+});
+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" },
+	"text-color": {
+		title: "#ECEDEE",
+		main: "#ECEDEE",
+		second: "#A1A1AA",
+		placeholder: "#71717A",
+		assist: "#71717A",
+		disabled: "#71717A",
+		white: "#000000"
+	},
+	shadow: {
+		color: "rgba(0, 0, 0, 0.2)",
+		x: 0,
+		y: 4,
+		blur: 14,
+		spread: 0,
+		emboss: "0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 1px 0 #0000000f"
+	}
+});
+//#endregion
+export { heroDarkTheme, heroLightTheme };
+
+//# sourceMappingURL=hero.js.map

package/dist/theme/hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.js","names":[],"sources":["../../src/theme/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: '#00000000' },\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: 'rgba(0, 0, 0, 0.08)',\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})\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' },\n  'text-color': {\n    title: '#ECEDEE',\n    main: '#ECEDEE',\n    second: '#A1A1AA',\n    placeholder: '#71717A',\n    assist: '#71717A',\n    disabled: '#71717A',\n    white: '#000000'\n  },\n  shadow: {\n    color: 'rgba(0, 0, 0, 0.2)',\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  }\n})\n"],"mappings":";;AAEA,MAAa,iBAAiB,WAAW,IAAI;CAC3C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;EACV;CACD,QAAQ;EAAE,OAAO;EAAG,OAAO;EAAa;CACxC,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACD,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAI,OAAO;EAAI;CAC5C,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACT;CACF,CAAC;AAEF,MAAa,gBAAgB,eAAe,IAAI;CAC9C,OAAO;EAAE,SAAS;EAAW,UAAU;EAAW,SAAS;EAAW;CACtE,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;EACR,EACF;CACD,QAAQ,EAAE,OAAO,WAAW;CAC5B,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACD,QAAQ;EACN,OAAO;EACP,GAAG;EACH,GAAG;EACH,MAAM;EACN,QAAQ;EACR,QAAQ;EACT;CACF,CAAC"}

package/dist/theme/index.d.ts

@@ -3,6 +3,9 @@ import { RGBColor, Theme } from "./type.js";
 import { UITheme } from "./ui-theme.js";
 import { lightTheme } from "./light.js";
 import { darkTheme } from "./dark.js";
+import { shadcnDarkTheme, shadcnLightTheme } from "./shadcn.js";
+import { heroDarkTheme, heroLightTheme } from "./hero.js";
+import { glassDarkTheme, glassLightTheme } from "./glass.js";
 import { HEXToRGB, cssVar, defineBySize, mixColor } from "./helper.js";
 import { currentTheme, loadTheme, setTheme } from "../load-theme.js";
-export { HEXToRGB, RGBColor, Theme, UITheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, lightTheme, loadTheme, mixColor, setTheme, themeTokenVar };
+export { HEXToRGB, RGBColor, Theme, UITheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, mixColor, setTheme, shadcnDarkTheme, shadcnLightTheme, themeTokenVar };

package/dist/theme/index.js

@@ -3,5 +3,8 @@ import { HEXToRGB, cssVar, defineBySize, mixColor } from "./helper.js";
 import { UITheme } from "./ui-theme.js";
 import { lightTheme } from "./light.js";
 import { darkTheme } from "./dark.js";
+import { shadcnDarkTheme, shadcnLightTheme } from "./shadcn.js";
+import { heroDarkTheme, heroLightTheme } from "./hero.js";
+import { glassDarkTheme, glassLightTheme } from "./glass.js";
 import { currentTheme, loadTheme, setTheme } from "../load-theme.js";
-export { HEXToRGB, UITheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, lightTheme, loadTheme, mixColor, setTheme, themeTokenVar };
+export { HEXToRGB, UITheme, componentCssVarsDark, componentCssVarsDarkDecls, componentCssVarsLight, componentCssVarsLightDecls, cssVar, currentTheme, darkTheme, defineBySize, glassDarkTheme, glassLightTheme, heroDarkTheme, heroLightTheme, lightTheme, loadTheme, mixColor, setTheme, shadcnDarkTheme, shadcnLightTheme, themeTokenVar };

package/dist/theme/light.js

@@ -20,8 +20,8 @@ const lightTheme = new UITheme({
 			black: "#000000"
 		},
 		filter: {
-			blur: "blur(16px)",
-			saturate: "saturate(180%)"
+			blur: "none",
+			saturate: "none"
 		}
 	},
 	border: {
@@ -69,7 +69,8 @@ const lightTheme = new UITheme({
 		x: 0,
 		y: 0,
 		blur: 4,
-		spread: 1
+		spread: 1,
+		emboss: "none"
 	},
 	gap: defineBySize({
 		small: 6,

package/dist/theme/light.js.map

@@ -1 +1 @@
-{"version":3,"file":"light.js","names":[],"sources":["../../src/theme/light.ts"],"sourcesContent":["import { defineBySize } from './helper'\nimport { UITheme } from './ui-theme'\n\nexport const lightTheme: UITheme = new UITheme(\n  {\n    color: {\n      primary: '#1E88E5',\n      success: '#2ba471',\n      warning: '#e37318',\n      danger: '#d54941',\n      info: '#009688',\n      disabled: '#f5f7fa',\n      default: '#f1f5f9'\n    },\n\n    bg: {\n      color: {\n        bottom: '#f5f5f5',\n        middle: '#fafafa',\n        top: '#ffffff',\n        hover: '#f5f7fa',\n        black: '#000000'\n      },\n\n      filter: { blur: 'blur(16px)', saturate: 'saturate(180%)' }\n    },\n\n    border: { color: '#dcdfe6', width: 1, style: 'solid' },\n\n    'text-color': {\n      title: '#303133',\n      main: '#606266',\n      placeholder: '#a8abb2',\n      second: '#979797',\n      assist: '#c0c4cc',\n      disabled: '#a8abb2',\n      white: '#fff'\n    },\n\n    radius: defineBySize({ small: 4, default: 6, large: 8 }),\n\n    'form-component-height': defineBySize({ small: 24, default: 32, large: 40 }),\n\n    'font-family':\n      'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif',\n\n    'font-size-title': defineBySize({ small: 16, default: 16, large: 18 }),\n\n    'font-size-main': defineBySize({ small: 12, default: 14, large: 16 }),\n\n    'font-size-assist': defineBySize({ small: 12, default: 12, large: 14 }),\n\n    shadow: { color: '#0000001a', x: 0, y: 0, blur: 4, spread: 1 },\n\n    gap: defineBySize({ small: 6, default: 8, large: 12 }),\n\n    breakpoint: { xs: 600, sm: 960, md: 1280, lg: 1920 }\n  },\n  { reactive: false }\n)\n"],"mappings":";;;AAGA,MAAa,aAAsB,IAAI,QACrC;CACE,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;EACV;CAED,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;GACR;EAED,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;EAC3D;CAED,QAAQ;EAAE,OAAO;EAAW,OAAO;EAAG,OAAO;EAAS;CAEtD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CAED,QAAQ,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;EAAG,CAAC;CAExD,yBAAyB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAE5E,eACE;CAEF,mBAAmB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAEtE,kBAAkB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAErE,oBAAoB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAEvE,QAAQ;EAAE,OAAO;EAAa,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG;CAE9D,KAAK,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;EAAI,CAAC;CAEtD,YAAY;EAAE,IAAI;EAAK,IAAI;EAAK,IAAI;EAAM,IAAI;EAAM;CACrD,EACD,EAAE,UAAU,OAAO,CACpB"}
+{"version":3,"file":"light.js","names":[],"sources":["../../src/theme/light.ts"],"sourcesContent":["import { defineBySize } from './helper'\nimport { UITheme } from './ui-theme'\n\nexport const lightTheme: UITheme = new UITheme(\n  {\n    color: {\n      primary: '#1E88E5',\n      success: '#2ba471',\n      warning: '#e37318',\n      danger: '#d54941',\n      info: '#009688',\n      disabled: '#f5f7fa',\n      default: '#f1f5f9'\n    },\n\n    bg: {\n      color: {\n        bottom: '#f5f5f5',\n        middle: '#fafafa',\n        top: '#ffffff',\n        hover: '#f5f7fa',\n        black: '#000000'\n      },\n\n      filter: { blur: 'none', saturate: 'none' }\n    },\n\n    border: { color: '#dcdfe6', width: 1, style: 'solid' },\n\n    'text-color': {\n      title: '#303133',\n      main: '#606266',\n      placeholder: '#a8abb2',\n      second: '#979797',\n      assist: '#c0c4cc',\n      disabled: '#a8abb2',\n      white: '#fff'\n    },\n\n    radius: defineBySize({ small: 4, default: 6, large: 8 }),\n\n    'form-component-height': defineBySize({ small: 24, default: 32, large: 40 }),\n\n    'font-family':\n      'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif',\n\n    'font-size-title': defineBySize({ small: 16, default: 16, large: 18 }),\n\n    'font-size-main': defineBySize({ small: 12, default: 14, large: 16 }),\n\n    'font-size-assist': defineBySize({ small: 12, default: 12, large: 14 }),\n\n    shadow: { color: '#0000001a', x: 0, y: 0, blur: 4, spread: 1, emboss: 'none' },\n\n    gap: defineBySize({ small: 6, default: 8, large: 12 }),\n\n    breakpoint: { xs: 600, sm: 960, md: 1280, lg: 1920 }\n  },\n  { reactive: false }\n)\n"],"mappings":";;;AAGA,MAAa,aAAsB,IAAI,QACrC;CACE,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;EACV;CAED,IAAI;EACF,OAAO;GACL,QAAQ;GACR,QAAQ;GACR,KAAK;GACL,OAAO;GACP,OAAO;GACR;EAED,QAAQ;GAAE,MAAM;GAAQ,UAAU;GAAQ;EAC3C;CAED,QAAQ;EAAE,OAAO;EAAW,OAAO;EAAG,OAAO;EAAS;CAEtD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CAED,QAAQ,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;EAAG,CAAC;CAExD,yBAAyB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAE5E,eACE;CAEF,mBAAmB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAEtE,kBAAkB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAErE,oBAAoB,aAAa;EAAE,OAAO;EAAI,SAAS;EAAI,OAAO;EAAI,CAAC;CAEvE,QAAQ;EAAE,OAAO;EAAa,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;EAAQ;CAE9E,KAAK,aAAa;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;EAAI,CAAC;CAEtD,YAAY;EAAE,IAAI;EAAK,IAAI;EAAK,IAAI;EAAM,IAAI;EAAM;CACrD,EACD,EAAE,UAAU,OAAO,CACpB"}

package/dist/theme/shadcn.d.ts

@@ -0,0 +1,8 @@
+import { UITheme } from "./ui-theme.js";
+
+//#region src/theme/shadcn.d.ts
+declare const shadcnLightTheme: UITheme;
+declare const shadcnDarkTheme: UITheme;
+//#endregion
+export { shadcnDarkTheme, shadcnLightTheme };
+//# sourceMappingURL=shadcn.d.ts.map

package/dist/theme/shadcn.js

@@ -0,0 +1,71 @@
+import { lightTheme } from "./light.js";
+//#region src/theme/shadcn.ts
+const shadcnLightTheme = lightTheme.new({
+	color: {
+		primary: "#18181b",
+		success: "#22c55e",
+		warning: "#f59e0b",
+		danger: "#ef4444",
+		info: "#3b82f6",
+		disabled: "#f4f4f5",
+		default: "#fafafa"
+	},
+	bg: { color: {
+		bottom: "#f4f4f5",
+		middle: "#fafafa",
+		top: "#ffffff",
+		hover: "#f4f4f5",
+		black: "#000000"
+	} },
+	border: { color: "#e4e4e7" },
+	"text-color": {
+		title: "#09090b",
+		main: "#09090b",
+		second: "#71717a",
+		placeholder: "#a1a1aa",
+		assist: "#a1a1aa",
+		disabled: "#a1a1aa",
+		white: "#ffffff"
+	},
+	radius: {
+		small: 4,
+		default: 6,
+		large: 8
+	},
+	shadow: {
+		color: "rgba(0, 0, 0, 0.05)",
+		x: 0,
+		y: 1,
+		blur: 2,
+		spread: 0,
+		emboss: "none"
+	}
+});
+const shadcnDarkTheme = shadcnLightTheme.new({
+	color: {
+		primary: "#fafafa",
+		disabled: "#27272a",
+		default: "#18181b"
+	},
+	bg: { color: {
+		bottom: "#09090b",
+		middle: "#18181b",
+		top: "#27272a",
+		hover: "#27272a",
+		black: "#000000"
+	} },
+	border: { color: "#27272a" },
+	"text-color": {
+		title: "#fafafa",
+		main: "#fafafa",
+		second: "#a1a1aa",
+		placeholder: "#71717a",
+		assist: "#71717a",
+		disabled: "#71717a",
+		white: "#000000"
+	}
+});
+//#endregion
+export { shadcnDarkTheme, shadcnLightTheme };
+
+//# sourceMappingURL=shadcn.js.map

package/dist/theme/shadcn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadcn.js","names":[],"sources":["../../src/theme/shadcn.ts"],"sourcesContent":["import { lightTheme } from './light'\n\nexport const shadcnLightTheme = lightTheme.new({\n  color: {\n    primary: '#18181b', // zinc-900\n    success: '#22c55e',\n    warning: '#f59e0b',\n    danger: '#ef4444',\n    info: '#3b82f6',\n    disabled: '#f4f4f5',\n    default: '#fafafa'\n  },\n  bg: {\n    color: {\n      bottom: '#f4f4f5',\n      middle: '#fafafa',\n      top: '#ffffff',\n      hover: '#f4f4f5',\n      black: '#000000'\n    }\n  },\n  border: { color: '#e4e4e7' },\n  'text-color': {\n    title: '#09090b',\n    main: '#09090b',\n    second: '#71717a',\n    placeholder: '#a1a1aa',\n    assist: '#a1a1aa',\n    disabled: '#a1a1aa',\n    white: '#ffffff'\n  },\n  radius: { small: 4, default: 6, large: 8 },\n  shadow: { color: 'rgba(0, 0, 0, 0.05)', x: 0, y: 1, blur: 2, spread: 0, emboss: 'none' }\n})\n\nexport const shadcnDarkTheme = shadcnLightTheme.new({\n  color: {\n    primary: '#fafafa', // zinc-50\n    disabled: '#27272a',\n    default: '#18181b'\n  },\n  bg: {\n    color: {\n      bottom: '#09090b',\n      middle: '#18181b',\n      top: '#27272a',\n      hover: '#27272a',\n      black: '#000000'\n    }\n  },\n  border: { color: '#27272a' },\n  'text-color': {\n    title: '#fafafa',\n    main: '#fafafa',\n    second: '#a1a1aa',\n    placeholder: '#71717a',\n    assist: '#71717a',\n    disabled: '#71717a',\n    white: '#000000'\n  }\n})\n"],"mappings":";;AAEA,MAAa,mBAAmB,WAAW,IAAI;CAC7C,OAAO;EACL,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;EACN,UAAU;EACV,SAAS;EACV;CACD,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;EACR,EACF;CACD,QAAQ,EAAE,OAAO,WAAW;CAC5B,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACD,QAAQ;EAAE,OAAO;EAAG,SAAS;EAAG,OAAO;EAAG;CAC1C,QAAQ;EAAE,OAAO;EAAuB,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;EAAQ;CACzF,CAAC;AAEF,MAAa,kBAAkB,iBAAiB,IAAI;CAClD,OAAO;EACL,SAAS;EACT,UAAU;EACV,SAAS;EACV;CACD,IAAI,EACF,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;EACP,OAAO;EACR,EACF;CACD,QAAQ,EAAE,OAAO,WAAW;CAC5B,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACF,CAAC"}

package/dist/theme/type.d.ts

@@ -72,7 +72,8 @@ type Theme = {
     x: number; /** 阴影垂直偏移 */
     y: number; /** 阴影模糊半径 */
     blur: number; /** 阴影扩散半径 */
-    spread: number;
+    spread: number; /** 浮雕阴影：非浮雕主题为 'none'，浮雕主题为完整 box-shadow 值 */
+    emboss: string;
   }; /** 间距 */
   gap: {
     /** 小间距 */small: number; /** 默认间距 */

package/dist/theme/ui-theme.js

@@ -67,7 +67,7 @@ var UITheme = class UITheme {
 	}
 	renderBGFilter(theme) {
 		const { filter } = theme.bg;
-		return `--u-bg-filter: ${filter.blur} ${filter.saturate}`;
+		return `--u-bg-filter: ${filter.blur === "none" ? "none" : `${filter.blur} ${filter.saturate}`}`;
 	}
 	/** 主题变量声明列表，均为 `--u-` 前缀的 CSS 自定义属性 */
 	themeToDeclarationList(theme) {

package/dist/theme/ui-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-theme.js","names":[],"sources":["../../src/theme/ui-theme.ts"],"sourcesContent":["import { isObj, o, str } from '@cat-kit/core'\nimport { withUnit } from '@veltra/utils'\nimport { reactive, toRaw, watch } from 'vue'\n\nimport { componentCssVarsDarkDecls, componentCssVarsLightDecls } from './component-css-vars'\nimport { mixColor } from './helper'\nimport type { Theme } from './type'\n\ntype RecursivePartial<T> = {\n  [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P]\n}\n\nexport class UITheme {\n  static themeID = 'ultra-ui-theme'\n\n  private static adoptedSheet: CSSStyleSheet | null = null\n\n  readonly theme: Theme\n\n  private readonly reactiveEnabled: boolean\n\n  constructor(theme: Theme, options?: { reactive?: boolean }) {\n    this.reactiveEnabled = options?.reactive !== false\n    this.theme = reactive(theme) as Theme\n    if (this.reactiveEnabled) {\n      watch(this.theme, () => this.render(), { deep: true })\n    }\n  }\n\n  static setTheme(mode: 'light' | 'dark' | 'auto'): void {\n    if (typeof document === 'undefined') return\n    const el = document.documentElement\n    if (mode === 'auto') {\n      delete el.dataset.theme\n    } else {\n      el.dataset.theme = mode\n    }\n  }\n\n  private renderBase(\n    theme: Record<string, unknown>,\n    themeRules: string[] = [],\n    parentKey = '--u'\n  ): string[] {\n    Object.keys(theme).forEach((key) => {\n      const value = theme[key]\n      const varKey = `${parentKey.startsWith('-') ? parentKey : str(parentKey).kebabCase()}-${str(key).kebabCase()}`\n      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n        this.renderBase(value as Record<string, unknown>, themeRules, varKey)\n      } else {\n        if (value || value === 0) {\n          const v = withUnit(value as number | string, 'px')\n          if (v !== undefined) {\n            themeRules.push(`${varKey}: ${v}`)\n          }\n        }\n      }\n    })\n\n    return themeRules\n  }\n\n  private renderBorder(theme: Theme): string {\n    const border = Object.keys(theme.border)\n      .map((key) => `var(--u-border-${key})`)\n      .join(' ')\n\n    return `--u-border: ${border}`\n  }\n\n  private renderTypeColor(theme: Theme): string {\n    const { color } = theme\n\n    const types = Object.keys(color)\n    const rates = [1, 3, 5, 7, 9]\n\n    return types\n      .map((type) => {\n        const colorValue = color[type as keyof typeof color]! as `#${string}`\n\n        return rates\n          .map((rate) => {\n            const light = `--u-color-${type}-light-${rate}: ${mixColor(\n              colorValue,\n              '#fff',\n              rate / 10\n            )}`\n            const dark = `--u-color-${type}-dark-${rate}: ${mixColor(\n              colorValue,\n              '#000',\n              rate / 10\n            )}`\n            return `${light};${dark}`\n          })\n          .join(';')\n      })\n      .join(';')\n  }\n\n  private renderShadow(_theme: Theme): string {\n    const shadow = ['x', 'y', 'blur', 'spread', 'color']\n      .map((k) => `var(--u-shadow-${k})`)\n      .join(' ')\n\n    return `--u-shadow: ${shadow}`\n  }\n\n  private renderBGColorAlpha(theme: Theme): string {\n    const { color } = theme.bg\n    return Object.keys(color)\n      .map((type) => `--u-bg-color-${type}-alpha: ${color[type as keyof typeof color]}aa`)\n      .join(';')\n  }\n\n  private renderBGFilter(theme: Theme): string {\n    const { filter } = theme.bg\n    return `--u-bg-filter: ${filter.blur} ${filter.saturate}`\n  }\n\n  /** 主题变量声明列表，均为 `--u-` 前缀的 CSS 自定义属性 */\n  themeToDeclarationList(theme: Theme): string[] {\n    const raw = theme as unknown as Record<string, unknown>\n    const lines: string[] = [...this.renderBase(raw)]\n    const chunks = [\n      this.renderTypeColor(theme),\n      this.renderShadow(theme),\n      this.renderBGColorAlpha(theme),\n      this.renderBGFilter(theme),\n      this.renderBorder(theme)\n    ]\n    for (const c of chunks) {\n      lines.push(\n        ...c\n          .split(';')\n          .map((s) => s.trim())\n          .filter(Boolean)\n      )\n    }\n    return lines\n  }\n\n  private static declarationBlock(decls: string[]): string {\n    return decls.join(';')\n  }\n\n  private static removeExistingStyleTag(doc: Document): void {\n    const el = doc.getElementById(UITheme.themeID)\n    if (el?.parentNode) {\n      el.parentNode.removeChild(el)\n    }\n  }\n\n  private static applyGlobalCSS(css: string): void {\n    const doc = typeof document !== 'undefined' ? document : undefined\n    if (!doc) return\n\n    const canAdopt =\n      typeof CSSStyleSheet !== 'undefined' && 'adoptedStyleSheets' in Document.prototype\n\n    if (canAdopt) {\n      UITheme.removeExistingStyleTag(doc)\n      if (!UITheme.adoptedSheet) {\n        UITheme.adoptedSheet = new CSSStyleSheet()\n        doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, UITheme.adoptedSheet]\n      }\n      UITheme.adoptedSheet.replaceSync(css)\n    } else {\n      if (UITheme.adoptedSheet) {\n        UITheme.adoptedSheet = null\n      }\n      let style = doc.getElementById(UITheme.themeID)\n      if (!style) {\n        style = doc.createElement('style')\n        style.id = UITheme.themeID\n        doc.head.appendChild(style)\n      }\n      style.textContent = css\n    }\n  }\n\n  /** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */\n  static injectBuiltInThemes(light: UITheme, dark: UITheme): void {\n    const lightDecls = [\n      ...light.themeToDeclarationList(toRaw(light.theme)),\n      ...componentCssVarsLightDecls\n    ]\n    const darkDecls = [\n      ...dark.themeToDeclarationList(toRaw(dark.theme)),\n      ...componentCssVarsDarkDecls\n    ]\n    const lightBlock = UITheme.declarationBlock(lightDecls)\n    const darkBlock = UITheme.declarationBlock(darkDecls)\n\n    const css = [\n      `html { ${lightBlock} }`,\n      `@media (prefers-color-scheme: dark) {`,\n      `  html:not([data-theme=\"light\"]) { ${darkBlock} }`,\n      `}`,\n      `html[data-theme=\"light\"] { ${lightBlock} }`,\n      `html[data-theme=\"dark\"] { ${darkBlock} }`\n    ].join('\\n')\n\n    UITheme.applyGlobalCSS(css)\n  }\n\n  render(): void {\n    const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentCssVarsLightDecls]\n    const block = UITheme.declarationBlock(decls)\n    const css = `html { ${block} }`\n    UITheme.applyGlobalCSS(css)\n  }\n\n  new(customTheme: RecursivePartial<Theme> = {}): UITheme {\n    function delEmpty(obj: Record<string, unknown>) {\n      Object.keys(obj).forEach((key) => {\n        const value = obj[key]\n        if (isObj(value)) {\n          return delEmpty(value as Record<string, unknown>)\n        }\n        if (!value && value !== 0) {\n          delete obj[key]\n        }\n      })\n    }\n\n    delEmpty(customTheme as Record<string, unknown>)\n\n    const base = JSON.parse(JSON.stringify(toRaw(this.theme))) as Record<string, any>\n    o(base).deepExtend(customTheme as Record<string, any>)\n    return new UITheme(base as Theme, { reactive: this.reactiveEnabled })\n  }\n}\n"],"mappings":";;;;;;AAYA,IAAa,UAAb,MAAa,QAAQ;CACnB,OAAO,UAAU;CAEjB,OAAe,eAAqC;CAEpD;CAEA;CAEA,YAAY,OAAc,SAAkC;AAC1D,OAAK,kBAAkB,SAAS,aAAa;AAC7C,OAAK,QAAQ,SAAS,MAAM;AAC5B,MAAI,KAAK,gBACP,OAAM,KAAK,aAAa,KAAK,QAAQ,EAAE,EAAE,MAAM,MAAM,CAAC;;CAI1D,OAAO,SAAS,MAAuC;AACrD,MAAI,OAAO,aAAa,YAAa;EACrC,MAAM,KAAK,SAAS;AACpB,MAAI,SAAS,OACX,QAAO,GAAG,QAAQ;MAElB,IAAG,QAAQ,QAAQ;;CAIvB,WACE,OACA,aAAuB,EAAE,EACzB,YAAY,OACF;AACV,SAAO,KAAK,MAAM,CAAC,SAAS,QAAQ;GAClC,MAAM,QAAQ,MAAM;GACpB,MAAM,SAAS,GAAG,UAAU,WAAW,IAAI,GAAG,YAAY,IAAI,UAAU,CAAC,WAAW,CAAC,GAAG,IAAI,IAAI,CAAC,WAAW;AAC5G,OAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,MAAM,CACtE,MAAK,WAAW,OAAkC,YAAY,OAAO;YAEjE,SAAS,UAAU,GAAG;IACxB,MAAM,IAAI,SAAS,OAA0B,KAAK;AAClD,QAAI,MAAM,KAAA,EACR,YAAW,KAAK,GAAG,OAAO,IAAI,IAAI;;IAIxC;AAEF,SAAO;;CAGT,aAAqB,OAAsB;AAKzC,SAAO,eAJQ,OAAO,KAAK,MAAM,OAAO,CACrC,KAAK,QAAQ,kBAAkB,IAAI,GAAG,CACtC,KAAK,IAEoB;;CAG9B,gBAAwB,OAAsB;EAC5C,MAAM,EAAE,UAAU;EAElB,MAAM,QAAQ,OAAO,KAAK,MAAM;EAChC,MAAM,QAAQ;GAAC;GAAG;GAAG;GAAG;GAAG;GAAE;AAE7B,SAAO,MACJ,KAAK,SAAS;GACb,MAAM,aAAa,MAAM;AAEzB,UAAO,MACJ,KAAK,SAAS;AAWb,WAAO,GAAG,aAViB,KAAK,SAAS,KAAK,IAAI,SAChD,YACA,QACA,OAAO,GACR,GAMe,GAAG,aALO,KAAK,QAAQ,KAAK,IAAI,SAC9C,YACA,QACA,OAAO,GACR;KAED,CACD,KAAK,IAAI;IACZ,CACD,KAAK,IAAI;;CAGd,aAAqB,QAAuB;AAK1C,SAAO,eAJQ;GAAC;GAAK;GAAK;GAAQ;GAAU;GAAQ,CACjD,KAAK,MAAM,kBAAkB,EAAE,GAAG,CAClC,KAAK,IAEoB;;CAG9B,mBAA2B,OAAsB;EAC/C,MAAM,EAAE,UAAU,MAAM;AACxB,SAAO,OAAO,KAAK,MAAM,CACtB,KAAK,SAAS,gBAAgB,KAAK,UAAU,MAAM,MAA4B,IAAI,CACnF,KAAK,IAAI;;CAGd,eAAuB,OAAsB;EAC3C,MAAM,EAAE,WAAW,MAAM;AACzB,SAAO,kBAAkB,OAAO,KAAK,GAAG,OAAO;;;CAIjD,uBAAuB,OAAwB;EAC7C,MAAM,MAAM;EACZ,MAAM,QAAkB,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC;EACjD,MAAM,SAAS;GACb,KAAK,gBAAgB,MAAM;GAC3B,KAAK,aAAa,MAAM;GACxB,KAAK,mBAAmB,MAAM;GAC9B,KAAK,eAAe,MAAM;GAC1B,KAAK,aAAa,MAAM;GACzB;AACD,OAAK,MAAM,KAAK,OACd,OAAM,KACJ,GAAG,EACA,MAAM,IAAI,CACV,KAAK,MAAM,EAAE,MAAM,CAAC,CACpB,OAAO,QAAQ,CACnB;AAEH,SAAO;;CAGT,OAAe,iBAAiB,OAAyB;AACvD,SAAO,MAAM,KAAK,IAAI;;CAGxB,OAAe,uBAAuB,KAAqB;EACzD,MAAM,KAAK,IAAI,eAAe,QAAQ,QAAQ;AAC9C,MAAI,IAAI,WACN,IAAG,WAAW,YAAY,GAAG;;CAIjC,OAAe,eAAe,KAAmB;EAC/C,MAAM,MAAM,OAAO,aAAa,cAAc,WAAW,KAAA;AACzD,MAAI,CAAC,IAAK;AAKV,MAFE,OAAO,kBAAkB,eAAe,wBAAwB,SAAS,WAE7D;AACZ,WAAQ,uBAAuB,IAAI;AACnC,OAAI,CAAC,QAAQ,cAAc;AACzB,YAAQ,eAAe,IAAI,eAAe;AAC1C,QAAI,qBAAqB,CAAC,GAAG,IAAI,oBAAoB,QAAQ,aAAa;;AAE5E,WAAQ,aAAa,YAAY,IAAI;SAChC;AACL,OAAI,QAAQ,aACV,SAAQ,eAAe;GAEzB,IAAI,QAAQ,IAAI,eAAe,QAAQ,QAAQ;AAC/C,OAAI,CAAC,OAAO;AACV,YAAQ,IAAI,cAAc,QAAQ;AAClC,UAAM,KAAK,QAAQ;AACnB,QAAI,KAAK,YAAY,MAAM;;AAE7B,SAAM,cAAc;;;;CAKxB,OAAO,oBAAoB,OAAgB,MAAqB;EAC9D,MAAM,aAAa,CACjB,GAAG,MAAM,uBAAuB,MAAM,MAAM,MAAM,CAAC,EACnD,GAAG,2BACJ;EACD,MAAM,YAAY,CAChB,GAAG,KAAK,uBAAuB,MAAM,KAAK,MAAM,CAAC,EACjD,GAAG,0BACJ;EACD,MAAM,aAAa,QAAQ,iBAAiB,WAAW;EACvD,MAAM,YAAY,QAAQ,iBAAiB,UAAU;EAErD,MAAM,MAAM;GACV,UAAU,WAAW;GACrB;GACA,sCAAsC,UAAU;GAChD;GACA,8BAA8B,WAAW;GACzC,6BAA6B,UAAU;GACxC,CAAC,KAAK,KAAK;AAEZ,UAAQ,eAAe,IAAI;;CAG7B,SAAe;EACb,MAAM,QAAQ,CAAC,GAAG,KAAK,uBAAuB,MAAM,KAAK,MAAM,CAAC,EAAE,GAAG,2BAA2B;EAEhG,MAAM,MAAM,UADE,QAAQ,iBAAiB,MACZ,CAAC;AAC5B,UAAQ,eAAe,IAAI;;CAG7B,IAAI,cAAuC,EAAE,EAAW;EACtD,SAAS,SAAS,KAA8B;AAC9C,UAAO,KAAK,IAAI,CAAC,SAAS,QAAQ;IAChC,MAAM,QAAQ,IAAI;AAClB,QAAI,MAAM,MAAM,CACd,QAAO,SAAS,MAAiC;AAEnD,QAAI,CAAC,SAAS,UAAU,EACtB,QAAO,IAAI;KAEb;;AAGJ,WAAS,YAAuC;EAEhD,MAAM,OAAO,KAAK,MAAM,KAAK,UAAU,MAAM,KAAK,MAAM,CAAC,CAAC;AAC1D,IAAE,KAAK,CAAC,WAAW,YAAmC;AACtD,SAAO,IAAI,QAAQ,MAAe,EAAE,UAAU,KAAK,iBAAiB,CAAC"}
+{"version":3,"file":"ui-theme.js","names":[],"sources":["../../src/theme/ui-theme.ts"],"sourcesContent":["import { isObj, o, str } from '@cat-kit/core'\nimport { withUnit } from '@veltra/utils'\nimport { reactive, toRaw, watch } from 'vue'\n\nimport { componentCssVarsDarkDecls, componentCssVarsLightDecls } from './component-css-vars'\nimport { mixColor } from './helper'\nimport type { Theme } from './type'\n\ntype RecursivePartial<T> = {\n  [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P]\n}\n\nexport class UITheme {\n  static themeID = 'ultra-ui-theme'\n\n  private static adoptedSheet: CSSStyleSheet | null = null\n\n  readonly theme: Theme\n\n  private readonly reactiveEnabled: boolean\n\n  constructor(theme: Theme, options?: { reactive?: boolean }) {\n    this.reactiveEnabled = options?.reactive !== false\n    this.theme = reactive(theme) as Theme\n    if (this.reactiveEnabled) {\n      watch(this.theme, () => this.render(), { deep: true })\n    }\n  }\n\n  static setTheme(mode: 'light' | 'dark' | 'auto'): void {\n    if (typeof document === 'undefined') return\n    const el = document.documentElement\n    if (mode === 'auto') {\n      delete el.dataset.theme\n    } else {\n      el.dataset.theme = mode\n    }\n  }\n\n  private renderBase(\n    theme: Record<string, unknown>,\n    themeRules: string[] = [],\n    parentKey = '--u'\n  ): string[] {\n    Object.keys(theme).forEach((key) => {\n      const value = theme[key]\n      const varKey = `${parentKey.startsWith('-') ? parentKey : str(parentKey).kebabCase()}-${str(key).kebabCase()}`\n      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n        this.renderBase(value as Record<string, unknown>, themeRules, varKey)\n      } else {\n        if (value || value === 0) {\n          const v = withUnit(value as number | string, 'px')\n          if (v !== undefined) {\n            themeRules.push(`${varKey}: ${v}`)\n          }\n        }\n      }\n    })\n\n    return themeRules\n  }\n\n  private renderBorder(theme: Theme): string {\n    const border = Object.keys(theme.border)\n      .map((key) => `var(--u-border-${key})`)\n      .join(' ')\n\n    return `--u-border: ${border}`\n  }\n\n  private renderTypeColor(theme: Theme): string {\n    const { color } = theme\n\n    const types = Object.keys(color)\n    const rates = [1, 3, 5, 7, 9]\n\n    return types\n      .map((type) => {\n        const colorValue = color[type as keyof typeof color]! as `#${string}`\n\n        return rates\n          .map((rate) => {\n            const light = `--u-color-${type}-light-${rate}: ${mixColor(\n              colorValue,\n              '#fff',\n              rate / 10\n            )}`\n            const dark = `--u-color-${type}-dark-${rate}: ${mixColor(\n              colorValue,\n              '#000',\n              rate / 10\n            )}`\n            return `${light};${dark}`\n          })\n          .join(';')\n      })\n      .join(';')\n  }\n\n  private renderShadow(_theme: Theme): string {\n    const shadow = ['x', 'y', 'blur', 'spread', 'color']\n      .map((k) => `var(--u-shadow-${k})`)\n      .join(' ')\n\n    return `--u-shadow: ${shadow}`\n  }\n\n  private renderBGColorAlpha(theme: Theme): string {\n    const { color } = theme.bg\n    return Object.keys(color)\n      .map((type) => `--u-bg-color-${type}-alpha: ${color[type as keyof typeof color]}aa`)\n      .join(';')\n  }\n\n  private renderBGFilter(theme: Theme): string {\n    const { filter } = theme.bg\n    const value = filter.blur === 'none' ? 'none' : `${filter.blur} ${filter.saturate}`\n    return `--u-bg-filter: ${value}`\n  }\n\n  /** 主题变量声明列表，均为 `--u-` 前缀的 CSS 自定义属性 */\n  themeToDeclarationList(theme: Theme): string[] {\n    const raw = theme as unknown as Record<string, unknown>\n    const lines: string[] = [...this.renderBase(raw)]\n    const chunks = [\n      this.renderTypeColor(theme),\n      this.renderShadow(theme),\n      this.renderBGColorAlpha(theme),\n      this.renderBGFilter(theme),\n      this.renderBorder(theme)\n    ]\n    for (const c of chunks) {\n      lines.push(\n        ...c\n          .split(';')\n          .map((s) => s.trim())\n          .filter(Boolean)\n      )\n    }\n    return lines\n  }\n\n  private static declarationBlock(decls: string[]): string {\n    return decls.join(';')\n  }\n\n  private static removeExistingStyleTag(doc: Document): void {\n    const el = doc.getElementById(UITheme.themeID)\n    if (el?.parentNode) {\n      el.parentNode.removeChild(el)\n    }\n  }\n\n  private static applyGlobalCSS(css: string): void {\n    const doc = typeof document !== 'undefined' ? document : undefined\n    if (!doc) return\n\n    const canAdopt =\n      typeof CSSStyleSheet !== 'undefined' && 'adoptedStyleSheets' in Document.prototype\n\n    if (canAdopt) {\n      UITheme.removeExistingStyleTag(doc)\n      if (!UITheme.adoptedSheet) {\n        UITheme.adoptedSheet = new CSSStyleSheet()\n        doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, UITheme.adoptedSheet]\n      }\n      UITheme.adoptedSheet.replaceSync(css)\n    } else {\n      if (UITheme.adoptedSheet) {\n        UITheme.adoptedSheet = null\n      }\n      let style = doc.getElementById(UITheme.themeID)\n      if (!style) {\n        style = doc.createElement('style')\n        style.id = UITheme.themeID\n        doc.head.appendChild(style)\n      }\n      style.textContent = css\n    }\n  }\n\n  /** 内置 light/dark：支持 data-theme 与 prefers-color-scheme */\n  static injectBuiltInThemes(light: UITheme, dark: UITheme): void {\n    const lightDecls = [\n      ...light.themeToDeclarationList(toRaw(light.theme)),\n      ...componentCssVarsLightDecls\n    ]\n    const darkDecls = [\n      ...dark.themeToDeclarationList(toRaw(dark.theme)),\n      ...componentCssVarsDarkDecls\n    ]\n    const lightBlock = UITheme.declarationBlock(lightDecls)\n    const darkBlock = UITheme.declarationBlock(darkDecls)\n\n    const css = [\n      `html { ${lightBlock} }`,\n      `@media (prefers-color-scheme: dark) {`,\n      `  html:not([data-theme=\"light\"]) { ${darkBlock} }`,\n      `}`,\n      `html[data-theme=\"light\"] { ${lightBlock} }`,\n      `html[data-theme=\"dark\"] { ${darkBlock} }`\n    ].join('\\n')\n\n    UITheme.applyGlobalCSS(css)\n  }\n\n  render(): void {\n    const decls = [...this.themeToDeclarationList(toRaw(this.theme)), ...componentCssVarsLightDecls]\n    const block = UITheme.declarationBlock(decls)\n    const css = `html { ${block} }`\n    UITheme.applyGlobalCSS(css)\n  }\n\n  new(customTheme: RecursivePartial<Theme> = {}): UITheme {\n    function delEmpty(obj: Record<string, unknown>) {\n      Object.keys(obj).forEach((key) => {\n        const value = obj[key]\n        if (isObj(value)) {\n          return delEmpty(value as Record<string, unknown>)\n        }\n        if (!value && value !== 0) {\n          delete obj[key]\n        }\n      })\n    }\n\n    delEmpty(customTheme as Record<string, unknown>)\n\n    const base = JSON.parse(JSON.stringify(toRaw(this.theme))) as Record<string, any>\n    o(base).deepExtend(customTheme as Record<string, any>)\n    return new UITheme(base as Theme, { reactive: this.reactiveEnabled })\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/styles",
-  "version": "1.0.15",
+  "version": "2.0.0",
   "files": [
     "dist",
     "src"
@@ -60,8 +60,8 @@
   },
   "dependencies": {
     "@cat-kit/core": "^1.1.3",
-    "@veltra/compositions": "1.0.15",
-    "@veltra/utils": "1.0.15"
+    "@veltra/compositions": "2.0.0",
+    "@veltra/utils": "2.0.0"
   },
   "peerDependencies": {
     "vue": "^3.5.33"

package/src/__test__/mixins.test.ts

@@ -0,0 +1,39 @@
+import { compileString } from 'sass-embedded'
+import { describe, expect, it } from 'vitest'
+
+const compileScss = (source: string) =>
+  compileString(source, { syntax: 'scss', url: new URL('./__test__.scss', import.meta.url) }).css
+
+describe('mixins', () => {
+  it('is-not appends a negated state selector to the current selector', () => {
+    const css = compileScss(`
+      @use '../mixins' as m;
+
+      .u-input {
+        @include m.is-not(disabled) {
+          &:hover {
+            border-color: red;
+          }
+        }
+      }
+    `)
+
+    expect(css).toContain('.u-input:not(.is-disabled):hover')
+  })
+
+  it('is-not supports multiple negated state selectors', () => {
+    const css = compileScss(`
+      @use '../mixins' as m;
+
+      .u-expression-editor {
+        @include m.is-not(disabled, readonly) {
+          &:focus-within {
+            border-color: red;
+          }
+        }
+      }
+    `)
+
+    expect(css).toContain('.u-expression-editor:not(.is-disabled):not(.is-readonly):focus-within')
+  })
+})

package/src/_mixins.scss

@@ -74,6 +74,18 @@
   }
 }
 
+@mixin is-not($types...) {
+  $selector: '&';
+
+  @each $type in $types {
+    $selector: '#{$selector}:not(.is-#{$type})';
+  }
+
+  #{$selector} {
+    @content;
+  }
+}
+
 @mixin bem($b, $e: null, $m: null) {
   $b: '.' + vars.$namespace + $b;
 

package/src/theme/dark.ts

@@ -19,7 +19,7 @@ export const darkTheme = lightTheme.new({
       hover: '#303030',
       black: '#000000'
     },
-    filter: { blur: 'blur(16px)', saturate: 'saturate(180%)' }
+    filter: { blur: 'none', saturate: 'none' }
   },
 
   'text-color': {
@@ -34,5 +34,5 @@ export const darkTheme = lightTheme.new({
 
   border: { color: '#404040' },
 
-  shadow: { color: 'rgba(255, 255, 255, 0.2)', x: 0, y: 2, blur: 8, spread: 0 }
+  shadow: { color: 'rgba(255, 255, 255, 0.2)', x: 0, y: 2, blur: 8, spread: 0, emboss: 'none' }
 })

package/src/theme/glass.ts

@@ -0,0 +1,59 @@
+import { lightTheme } from './light'
+
+export const glassLightTheme = lightTheme.new({
+  color: {
+    primary: '#3B82F6',
+    success: '#10B981',
+    warning: '#F59E0B',
+    danger: '#EF4444',
+    info: '#06B6D4',
+    disabled: '#E5E7EB',
+    default: '#F3F4F6'
+  },
+  bg: {
+    color: {
+      bottom: 'rgba(255, 255, 255, 0.45)',
+      middle: 'rgba(255, 255, 255, 0.55)',
+      top: 'rgba(255, 255, 255, 0.6)',
+      hover: 'rgba(255, 255, 255, 0.75)',
+      black: '#000000'
+    },
+    filter: { blur: 'blur(24px)', saturate: 'saturate(180%)' }
+  },
+  border: { color: 'rgba(255, 255, 255, 0.5)', width: 1, style: 'solid' },
+  'text-color': {
+    title: '#1E293B',
+    main: '#334155',
+    placeholder: '#94A3B8',
+    second: '#64748B',
+    assist: '#CBD5E1',
+    disabled: '#94A3B8',
+    white: '#FFFFFF'
+  },
+  shadow: { color: 'rgba(0, 0, 0, 0.08)', x: 0, y: 4, blur: 24, spread: 0, emboss: 'none' }
+})
+
+export const glassDarkTheme = glassLightTheme.new({
+  color: { disabled: '#374151', default: '#1E293B' },
+  bg: {
+    color: {
+      bottom: 'rgba(15, 23, 42, 0.6)',
+      middle: 'rgba(15, 23, 42, 0.7)',
+      top: 'rgba(15, 23, 42, 0.75)',
+      hover: 'rgba(30, 41, 59, 0.85)',
+      black: '#000000'
+    },
+    filter: { blur: 'blur(20px)', saturate: 'saturate(200%)' }
+  },
+  border: { color: 'rgba(255, 255, 255, 0.12)' },
+  'text-color': {
+    title: '#F8FAFC',
+    main: '#F1F5F9',
+    second: '#94A3B8',
+    placeholder: '#64748B',
+    assist: '#64748B',
+    disabled: '#475569',
+    white: '#ffffff'
+  },
+  shadow: { color: 'rgba(0, 0, 0, 0.35)', x: 0, y: 4, blur: 32, spread: 0, emboss: 'none' }
+})

package/src/theme/hero.ts

@@ -0,0 +1,63 @@
+import { lightTheme } from './light'
+
+export const heroLightTheme = lightTheme.new({
+  color: {
+    primary: '#7828c8', // purple
+    success: '#17c964',
+    warning: '#f5a524',
+    danger: '#f31260',
+    info: '#006fee',
+    disabled: '#f4f4f5',
+    default: '#f4f4f5'
+  },
+  border: { width: 2, color: '#00000000' },
+  'text-color': {
+    title: '#11181C',
+    main: '#11181C',
+    second: '#71717A',
+    placeholder: '#A1A1AA',
+    assist: '#A1A1AA',
+    disabled: '#A1A1AA',
+    white: '#FFFFFF'
+  },
+  radius: { small: 8, default: 12, large: 14 },
+  shadow: {
+    color: 'rgba(0, 0, 0, 0.08)',
+    x: 0,
+    y: 4,
+    blur: 14,
+    spread: 0,
+    emboss: '0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 3px 0px #0000000f'
+  }
+})
+
+export 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' },
+  'text-color': {
+    title: '#ECEDEE',
+    main: '#ECEDEE',
+    second: '#A1A1AA',
+    placeholder: '#71717A',
+    assist: '#71717A',
+    disabled: '#71717A',
+    white: '#000000'
+  },
+  shadow: {
+    color: 'rgba(0, 0, 0, 0.2)',
+    x: 0,
+    y: 4,
+    blur: 14,
+    spread: 0,
+    emboss: '0 2px 4px 0 #0000000a,0 1px 2px 0 #0000000f,0 0 1px 0 #0000000f'
+  }
+})

package/src/theme/index.ts

@@ -8,6 +8,9 @@ export {
 export { UITheme } from './ui-theme'
 export { lightTheme } from './light'
 export { darkTheme } from './dark'
+export { shadcnLightTheme, shadcnDarkTheme } from './shadcn'
+export { heroLightTheme, heroDarkTheme } from './hero'
+export { glassLightTheme, glassDarkTheme } from './glass'
 export type * from './type'
 export { cssVar, defineBySize, HEXToRGB, mixColor } from './helper'
 export { currentTheme, loadTheme, setTheme } from '../load-theme'

package/src/theme/light.ts

@@ -22,7 +22,7 @@ export const lightTheme: UITheme = new UITheme(
         black: '#000000'
       },
 
-      filter: { blur: 'blur(16px)', saturate: 'saturate(180%)' }
+      filter: { blur: 'none', saturate: 'none' }
     },
 
     border: { color: '#dcdfe6', width: 1, style: 'solid' },
@@ -50,7 +50,7 @@ export const lightTheme: UITheme = new UITheme(
 
     'font-size-assist': defineBySize({ small: 12, default: 12, large: 14 }),
 
-    shadow: { color: '#0000001a', x: 0, y: 0, blur: 4, spread: 1 },
+    shadow: { color: '#0000001a', x: 0, y: 0, blur: 4, spread: 1, emboss: 'none' },
 
     gap: defineBySize({ small: 6, default: 8, large: 12 }),
 

package/src/theme/shadcn.ts

@@ -0,0 +1,61 @@
+import { lightTheme } from './light'
+
+export const shadcnLightTheme = lightTheme.new({
+  color: {
+    primary: '#18181b', // zinc-900
+    success: '#22c55e',
+    warning: '#f59e0b',
+    danger: '#ef4444',
+    info: '#3b82f6',
+    disabled: '#f4f4f5',
+    default: '#fafafa'
+  },
+  bg: {
+    color: {
+      bottom: '#f4f4f5',
+      middle: '#fafafa',
+      top: '#ffffff',
+      hover: '#f4f4f5',
+      black: '#000000'
+    }
+  },
+  border: { color: '#e4e4e7' },
+  'text-color': {
+    title: '#09090b',
+    main: '#09090b',
+    second: '#71717a',
+    placeholder: '#a1a1aa',
+    assist: '#a1a1aa',
+    disabled: '#a1a1aa',
+    white: '#ffffff'
+  },
+  radius: { small: 4, default: 6, large: 8 },
+  shadow: { color: 'rgba(0, 0, 0, 0.05)', x: 0, y: 1, blur: 2, spread: 0, emboss: 'none' }
+})
+
+export const shadcnDarkTheme = shadcnLightTheme.new({
+  color: {
+    primary: '#fafafa', // zinc-50
+    disabled: '#27272a',
+    default: '#18181b'
+  },
+  bg: {
+    color: {
+      bottom: '#09090b',
+      middle: '#18181b',
+      top: '#27272a',
+      hover: '#27272a',
+      black: '#000000'
+    }
+  },
+  border: { color: '#27272a' },
+  'text-color': {
+    title: '#fafafa',
+    main: '#fafafa',
+    second: '#a1a1aa',
+    placeholder: '#71717a',
+    assist: '#71717a',
+    disabled: '#71717a',
+    white: '#000000'
+  }
+})

package/src/theme/type.ts

@@ -132,6 +132,8 @@ export type Theme = {
     blur: number
     /** 阴影扩散半径 */
     spread: number
+    /** 浮雕阴影：非浮雕主题为 'none'，浮雕主题为完整 box-shadow 值 */
+    emboss: string
   }
   /** 间距 */
   gap: {

package/src/theme/ui-theme.ts

@@ -114,7 +114,8 @@ export class UITheme {
 
   private renderBGFilter(theme: Theme): string {
     const { filter } = theme.bg
-    return `--u-bg-filter: ${filter.blur} ${filter.saturate}`
+    const value = filter.blur === 'none' ? 'none' : `${filter.blur} ${filter.saturate}`
+    return `--u-bg-filter: ${value}`
   }
 
   /** 主题变量声明列表，均为 `--u-` 前缀的 CSS 自定义属性 */