@veltra/styles 1.1.1 → 1.1.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/_vars.scss +1 -0
- package/dist/theme/dark.js +4 -1
- package/dist/theme/dark.js.map +1 -1
- package/dist/theme/glass.js +5 -1
- package/dist/theme/glass.js.map +1 -1
- package/dist/theme/hero.js +6 -2
- package/dist/theme/hero.js.map +1 -1
- package/dist/theme/light.js +1 -0
- package/dist/theme/light.js.map +1 -1
- package/dist/theme/shadcn.js +8 -2
- package/dist/theme/shadcn.js.map +1 -1
- package/dist/theme/type.d.ts +2 -1
- package/dist/theme/ui-theme.js +1 -1
- package/dist/theme/ui-theme.js.map +1 -1
- package/package.json +3 -3
- package/src/_vars.scss +1 -0
- package/src/theme/dark.ts +1 -1
- package/src/theme/glass.ts +7 -2
- package/src/theme/hero.ts +2 -2
- package/src/theme/light.ts +1 -1
- package/src/theme/shadcn.ts +2 -2
- package/src/theme/type.ts +3 -1
- package/src/theme/ui-theme.ts +9 -5
package/dist/_vars.scss
CHANGED
|
@@ -6,6 +6,7 @@ $namespace: 'u-';
|
|
|
6
6
|
$color-primary: var(--u-color-primary);
|
|
7
7
|
$text-color-main: var(--u-text-color-main);
|
|
8
8
|
$border-color: var(--u-border-color);
|
|
9
|
+
$border-muted-color: var(--u-border-muted-color);
|
|
9
10
|
$bg-color-top: var(--u-bg-color-top);
|
|
10
11
|
|
|
11
12
|
// 定义size映射的函数, 保证尺寸的统一性, size-vars(small, default, large)
|
package/dist/theme/dark.js
CHANGED
package/dist/theme/dark.js.map
CHANGED
|
@@ -1 +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: '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
|
|
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: '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', mutedColor: '#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;EAAW,YAAY;EAAW;CAEnD,QAAQ;EAAE,OAAO;EAA4B,GAAG;EAAG,GAAG;EAAG,MAAM;EAAG,QAAQ;EAAG,QAAQ;EAAQ;CAC9F,CAAC"}
|
package/dist/theme/glass.js
CHANGED
|
@@ -25,6 +25,7 @@ const glassLightTheme = lightTheme.new({
|
|
|
25
25
|
},
|
|
26
26
|
border: {
|
|
27
27
|
color: "rgba(255, 255, 255, 0.5)",
|
|
28
|
+
mutedColor: "rgba(255, 255, 255, 0.5)",
|
|
28
29
|
width: 1,
|
|
29
30
|
style: "solid"
|
|
30
31
|
},
|
|
@@ -64,7 +65,10 @@ const glassDarkTheme = glassLightTheme.new({
|
|
|
64
65
|
saturate: "saturate(200%)"
|
|
65
66
|
}
|
|
66
67
|
},
|
|
67
|
-
border: {
|
|
68
|
+
border: {
|
|
69
|
+
color: "rgba(255, 255, 255, 0.12)",
|
|
70
|
+
mutedColor: "rgba(255, 255, 255, 0.12)"
|
|
71
|
+
},
|
|
68
72
|
"text-color": {
|
|
69
73
|
title: "#F8FAFC",
|
|
70
74
|
main: "#F1F5F9",
|
package/dist/theme/glass.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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: {
|
|
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: {\n color: 'rgba(255, 255, 255, 0.5)',\n mutedColor: 'rgba(255, 255, 255, 0.5)',\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: '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)', mutedColor: '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;EACN,OAAO;EACP,YAAY;EACZ,OAAO;EACP,OAAO;EACR;CACD,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;EAA6B,YAAY;EAA6B;CACvF,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.js
CHANGED
|
@@ -12,7 +12,8 @@ const heroLightTheme = lightTheme.new({
|
|
|
12
12
|
},
|
|
13
13
|
border: {
|
|
14
14
|
width: 2,
|
|
15
|
-
color: "#
|
|
15
|
+
color: "#dcdfe6",
|
|
16
|
+
mutedColor: "transparent"
|
|
16
17
|
},
|
|
17
18
|
"text-color": {
|
|
18
19
|
title: "#11181C",
|
|
@@ -50,7 +51,10 @@ const heroDarkTheme = heroLightTheme.new({
|
|
|
50
51
|
hover: "#3f3f46",
|
|
51
52
|
black: "#000000"
|
|
52
53
|
} },
|
|
53
|
-
border: {
|
|
54
|
+
border: {
|
|
55
|
+
color: "#3f3f46",
|
|
56
|
+
mutedColor: "transparent"
|
|
57
|
+
},
|
|
54
58
|
"text-color": {
|
|
55
59
|
title: "#ECEDEE",
|
|
56
60
|
main: "#ECEDEE",
|
package/dist/theme/hero.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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: '#
|
|
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: '#dcdfe6', mutedColor: 'transparent' },\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', mutedColor: 'transparent' },\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;EAAW,YAAY;EAAe;CACjE,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;EAAW,YAAY;EAAe;CACvD,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/light.js
CHANGED
package/dist/theme/light.js.map
CHANGED
|
@@ -1 +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: '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;
|
|
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: 'none', saturate: 'none' }\n },\n\n border: { color: '#dcdfe6', mutedColor: '#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,YAAY;EAAW,OAAO;EAAG,OAAO;EAAS;CAE7E,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.js
CHANGED
|
@@ -17,7 +17,10 @@ const shadcnLightTheme = lightTheme.new({
|
|
|
17
17
|
hover: "#f4f4f5",
|
|
18
18
|
black: "#000000"
|
|
19
19
|
} },
|
|
20
|
-
border: {
|
|
20
|
+
border: {
|
|
21
|
+
color: "#e4e4e7",
|
|
22
|
+
mutedColor: "#e4e4e7"
|
|
23
|
+
},
|
|
21
24
|
"text-color": {
|
|
22
25
|
title: "#09090b",
|
|
23
26
|
main: "#09090b",
|
|
@@ -54,7 +57,10 @@ const shadcnDarkTheme = shadcnLightTheme.new({
|
|
|
54
57
|
hover: "#27272a",
|
|
55
58
|
black: "#000000"
|
|
56
59
|
} },
|
|
57
|
-
border: {
|
|
60
|
+
border: {
|
|
61
|
+
color: "#27272a",
|
|
62
|
+
mutedColor: "#27272a"
|
|
63
|
+
},
|
|
58
64
|
"text-color": {
|
|
59
65
|
title: "#fafafa",
|
|
60
66
|
main: "#fafafa",
|
package/dist/theme/shadcn.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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', mutedColor: '#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', mutedColor: '#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;EAAW,YAAY;EAAW;CACnD,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;EAAW,YAAY;EAAW;CACnD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACb,QAAQ;EACR,UAAU;EACV,OAAO;EACR;CACF,CAAC"}
|
package/dist/theme/type.d.ts
CHANGED
package/dist/theme/ui-theme.js
CHANGED
|
@@ -33,7 +33,7 @@ var UITheme = class UITheme {
|
|
|
33
33
|
return themeRules;
|
|
34
34
|
}
|
|
35
35
|
renderBorder(theme) {
|
|
36
|
-
return `--u-border: ${Object.keys(theme.border).map((key) => `var(--u-border-${key})`).join(" ")}
|
|
36
|
+
return [`--u-border: ${Object.keys(theme.border).filter((key) => key !== "mutedColor").map((key) => `var(--u-border-${key})`).join(" ")}`, `--u-border-muted: var(--u-border-muted-color) var(--u-border-width) var(--u-border-style)`].join(";");
|
|
37
37
|
}
|
|
38
38
|
renderTypeColor(theme) {
|
|
39
39
|
const { color } = theme;
|
|
@@ -1 +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 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":";;;;;;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;AAEzB,SAAO,kBADO,OAAO,SAAS,SAAS,SAAS,GAAG,OAAO,KAAK,GAAG,OAAO;;;CAK3E,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"}
|
|
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 shorthandKeys = (Object.keys(theme.border) as Array<keyof typeof theme.border>).filter(\n (key) => key !== 'mutedColor'\n )\n const border = shorthandKeys.map((key) => `var(--u-border-${key})`).join(' ')\n\n return [\n `--u-border: ${border}`,\n `--u-border-muted: var(--u-border-muted-color) var(--u-border-width) var(--u-border-style)`\n ].join(';')\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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veltra/styles",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"src"
|
|
@@ -61,8 +61,8 @@
|
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
63
|
"@cat-kit/core": "^1.1.3",
|
|
64
|
-
"@veltra/compositions": "1.1.
|
|
65
|
-
"@veltra/utils": "1.1.
|
|
64
|
+
"@veltra/compositions": "1.1.2",
|
|
65
|
+
"@veltra/utils": "1.1.2"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|
|
68
68
|
"vue": "^3.5.33"
|
package/src/_vars.scss
CHANGED
|
@@ -6,6 +6,7 @@ $namespace: 'u-';
|
|
|
6
6
|
$color-primary: var(--u-color-primary);
|
|
7
7
|
$text-color-main: var(--u-text-color-main);
|
|
8
8
|
$border-color: var(--u-border-color);
|
|
9
|
+
$border-muted-color: var(--u-border-muted-color);
|
|
9
10
|
$bg-color-top: var(--u-bg-color-top);
|
|
10
11
|
|
|
11
12
|
// 定义size映射的函数, 保证尺寸的统一性, size-vars(small, default, large)
|
package/src/theme/dark.ts
CHANGED
|
@@ -32,7 +32,7 @@ export const darkTheme = lightTheme.new({
|
|
|
32
32
|
white: '#ffffff'
|
|
33
33
|
},
|
|
34
34
|
|
|
35
|
-
border: { color: '#404040' },
|
|
35
|
+
border: { color: '#404040', mutedColor: '#404040' },
|
|
36
36
|
|
|
37
37
|
shadow: { color: 'rgba(255, 255, 255, 0.2)', x: 0, y: 2, blur: 8, spread: 0, emboss: 'none' }
|
|
38
38
|
})
|
package/src/theme/glass.ts
CHANGED
|
@@ -20,7 +20,12 @@ export const glassLightTheme = lightTheme.new({
|
|
|
20
20
|
},
|
|
21
21
|
filter: { blur: 'blur(24px)', saturate: 'saturate(180%)' }
|
|
22
22
|
},
|
|
23
|
-
border: {
|
|
23
|
+
border: {
|
|
24
|
+
color: 'rgba(255, 255, 255, 0.5)',
|
|
25
|
+
mutedColor: 'rgba(255, 255, 255, 0.5)',
|
|
26
|
+
width: 1,
|
|
27
|
+
style: 'solid'
|
|
28
|
+
},
|
|
24
29
|
'text-color': {
|
|
25
30
|
title: '#1E293B',
|
|
26
31
|
main: '#334155',
|
|
@@ -45,7 +50,7 @@ export const glassDarkTheme = glassLightTheme.new({
|
|
|
45
50
|
},
|
|
46
51
|
filter: { blur: 'blur(20px)', saturate: 'saturate(200%)' }
|
|
47
52
|
},
|
|
48
|
-
border: { color: 'rgba(255, 255, 255, 0.12)' },
|
|
53
|
+
border: { color: 'rgba(255, 255, 255, 0.12)', mutedColor: 'rgba(255, 255, 255, 0.12)' },
|
|
49
54
|
'text-color': {
|
|
50
55
|
title: '#F8FAFC',
|
|
51
56
|
main: '#F1F5F9',
|
package/src/theme/hero.ts
CHANGED
|
@@ -10,7 +10,7 @@ export const heroLightTheme = lightTheme.new({
|
|
|
10
10
|
disabled: '#f4f4f5',
|
|
11
11
|
default: '#f4f4f5'
|
|
12
12
|
},
|
|
13
|
-
border: { width: 2, color: '#
|
|
13
|
+
border: { width: 2, color: '#dcdfe6', mutedColor: 'transparent' },
|
|
14
14
|
'text-color': {
|
|
15
15
|
title: '#11181C',
|
|
16
16
|
main: '#11181C',
|
|
@@ -42,7 +42,7 @@ export const heroDarkTheme = heroLightTheme.new({
|
|
|
42
42
|
black: '#000000'
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
|
-
border: { color: '#3f3f46' },
|
|
45
|
+
border: { color: '#3f3f46', mutedColor: 'transparent' },
|
|
46
46
|
'text-color': {
|
|
47
47
|
title: '#ECEDEE',
|
|
48
48
|
main: '#ECEDEE',
|
package/src/theme/light.ts
CHANGED
|
@@ -25,7 +25,7 @@ export const lightTheme: UITheme = new UITheme(
|
|
|
25
25
|
filter: { blur: 'none', saturate: 'none' }
|
|
26
26
|
},
|
|
27
27
|
|
|
28
|
-
border: { color: '#dcdfe6', width: 1, style: 'solid' },
|
|
28
|
+
border: { color: '#dcdfe6', mutedColor: '#dcdfe6', width: 1, style: 'solid' },
|
|
29
29
|
|
|
30
30
|
'text-color': {
|
|
31
31
|
title: '#303133',
|
package/src/theme/shadcn.ts
CHANGED
|
@@ -19,7 +19,7 @@ export const shadcnLightTheme = lightTheme.new({
|
|
|
19
19
|
black: '#000000'
|
|
20
20
|
}
|
|
21
21
|
},
|
|
22
|
-
border: { color: '#e4e4e7' },
|
|
22
|
+
border: { color: '#e4e4e7', mutedColor: '#e4e4e7' },
|
|
23
23
|
'text-color': {
|
|
24
24
|
title: '#09090b',
|
|
25
25
|
main: '#09090b',
|
|
@@ -48,7 +48,7 @@ export const shadcnDarkTheme = shadcnLightTheme.new({
|
|
|
48
48
|
black: '#000000'
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
|
-
border: { color: '#27272a' },
|
|
51
|
+
border: { color: '#27272a', mutedColor: '#27272a' },
|
|
52
52
|
'text-color': {
|
|
53
53
|
title: '#fafafa',
|
|
54
54
|
main: '#fafafa',
|
package/src/theme/type.ts
CHANGED
package/src/theme/ui-theme.ts
CHANGED
|
@@ -61,11 +61,15 @@ export class UITheme {
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
private renderBorder(theme: Theme): string {
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
const shorthandKeys = (Object.keys(theme.border) as Array<keyof typeof theme.border>).filter(
|
|
65
|
+
(key) => key !== 'mutedColor'
|
|
66
|
+
)
|
|
67
|
+
const border = shorthandKeys.map((key) => `var(--u-border-${key})`).join(' ')
|
|
68
|
+
|
|
69
|
+
return [
|
|
70
|
+
`--u-border: ${border}`,
|
|
71
|
+
`--u-border-muted: var(--u-border-muted-color) var(--u-border-width) var(--u-border-style)`
|
|
72
|
+
].join(';')
|
|
69
73
|
}
|
|
70
74
|
|
|
71
75
|
private renderTypeColor(theme: Theme): string {
|