@vaneui/ui 0.2.1-alpha.20250830124557.3818ff4 → 0.2.1-alpha.20250831120721.fd71f6f
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/components/ui/classes/appearanceClasses.d.ts +1 -0
- package/dist/components/ui/img.d.ts +2 -0
- package/dist/components/ui/label.d.ts +2 -0
- package/dist/components/ui/props/keys.d.ts +11 -11
- package/dist/components/ui/theme/appearance/appearanceTheme.d.ts +0 -1
- package/dist/components/ui/theme/appearance/genericVariantTheme.d.ts +1 -0
- package/dist/components/ui/theme/cardTheme.d.ts +5 -4
- package/dist/components/ui/theme/colTheme.d.ts +2 -2
- package/dist/components/ui/theme/containerTheme.d.ts +4 -4
- package/dist/components/ui/theme/gridTheme.d.ts +3 -2
- package/dist/components/ui/theme/labelTheme.d.ts +2 -1
- package/dist/components/ui/theme/rowTheme.d.ts +2 -2
- package/dist/components/ui/theme/stackTheme.d.ts +2 -2
- package/dist/components/ui/theme/typographyTheme.d.ts +3 -2
- package/dist/components/ui/typography.d.ts +2 -0
- package/dist/index.esm.js +131 -120
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +131 -120
- package/dist/index.js.map +1 -1
- package/dist/ui.css +86 -3
- package/dist/vars.css +32 -6
- package/package.json +1 -1
package/dist/ui.css
CHANGED
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
--color-amber-800: oklch(47.3% 0.137 46.201);
|
|
26
26
|
--color-yellow-50: oklch(98.7% 0.026 102.212);
|
|
27
27
|
--color-yellow-100: oklch(97.3% 0.071 103.193);
|
|
28
|
+
--color-yellow-600: oklch(68.1% 0.162 75.834);
|
|
28
29
|
--color-green-50: oklch(98.2% 0.018 155.826);
|
|
29
30
|
--color-green-200: oklch(92.5% 0.084 155.995);
|
|
30
31
|
--color-green-500: oklch(72.3% 0.219 149.579);
|
|
@@ -56,6 +57,7 @@
|
|
|
56
57
|
--color-indigo-100: oklch(93% 0.034 272.788);
|
|
57
58
|
--color-indigo-400: oklch(67.3% 0.182 276.935);
|
|
58
59
|
--color-indigo-500: oklch(58.5% 0.233 277.117);
|
|
60
|
+
--color-indigo-600: oklch(51.1% 0.262 276.966);
|
|
59
61
|
--color-violet-400: oklch(70.2% 0.183 293.541);
|
|
60
62
|
--color-violet-600: oklch(54.1% 0.281 293.009);
|
|
61
63
|
--color-purple-600: oklch(55.8% 0.288 302.321);
|
|
@@ -134,6 +136,17 @@
|
|
|
134
136
|
--text-color-danger: var(--color-red-600, #dc2626);
|
|
135
137
|
--text-color-warning: var(--color-amber-600, #d97706);
|
|
136
138
|
--text-color-info: var(--color-cyan-600, #0891b2);
|
|
139
|
+
--filled-text-color-default: var(--color-gray-100, #f3f4f6);
|
|
140
|
+
--filled-text-color-primary: var(--color-blue-100, #dbeafe);
|
|
141
|
+
--filled-text-color-secondary: var(--color-gray-100, #f3f4f6);
|
|
142
|
+
--filled-text-color-tertiary: var(--color-gray-200, #e5e7eb);
|
|
143
|
+
--filled-text-color-link: var(--color-blue-100, #dbeafe);
|
|
144
|
+
--filled-text-color-accent: var(--color-rose-100, #fdf2f8);
|
|
145
|
+
--filled-text-color-success: var(--color-emerald-100, #d1fae5);
|
|
146
|
+
--filled-text-color-danger: var(--color-red-100, #fee2e2);
|
|
147
|
+
--filled-text-color-warning: var(--color-amber-100, #fef3c7);
|
|
148
|
+
--filled-text-color-info: var(--color-cyan-100, #cffafe);
|
|
149
|
+
--filled-text-color-transparent: transparent;
|
|
137
150
|
--background-color-default: var(--color-white, #ffffff);
|
|
138
151
|
--background-color-primary: var(--color-blue-50, #eff6ff);
|
|
139
152
|
--background-color-secondary: var(--color-gray-50, #f9fafb);
|
|
@@ -204,6 +217,16 @@
|
|
|
204
217
|
--layout-background-warning: var(--color-yellow-50, #fefce8);
|
|
205
218
|
--layout-background-info: var(--color-blue-50, #eff6ff);
|
|
206
219
|
--layout-background-link: var(--color-blue-50, #eff6ff);
|
|
220
|
+
--layout-filled-background-color-default: var(--color-gray-600, #4b5563);
|
|
221
|
+
--layout-filled-background-color-primary: var(--color-blue-600, #2563eb);
|
|
222
|
+
--layout-filled-background-color-secondary: var(--color-gray-600, #4b5563);
|
|
223
|
+
--layout-filled-background-color-tertiary: var(--color-gray-500, #6b7280);
|
|
224
|
+
--layout-filled-background-color-accent: var(--color-indigo-600, #4f46e5);
|
|
225
|
+
--layout-filled-background-color-success: var(--color-green-600, #16a34a);
|
|
226
|
+
--layout-filled-background-color-danger: var(--color-red-600, #dc2626);
|
|
227
|
+
--layout-filled-background-color-warning: var(--color-yellow-600, #ca8a04);
|
|
228
|
+
--layout-filled-background-color-info: var(--color-blue-600, #2563eb);
|
|
229
|
+
--layout-filled-background-color-link: var(--color-blue-600, #2563eb);
|
|
207
230
|
--border-color-default: var(--color-gray-200, #d1d5db);
|
|
208
231
|
--border-color-primary: var(--color-blue-200, #93c5fd);
|
|
209
232
|
--border-color-secondary: var(--color-gray-200, #d1d5db);
|
|
@@ -990,6 +1013,36 @@
|
|
|
990
1013
|
.bg-\(--layout-background-warning\) {
|
|
991
1014
|
background-color: var(--layout-background-warning);
|
|
992
1015
|
}
|
|
1016
|
+
.bg-\(--layout-filled-background-color-accent\) {
|
|
1017
|
+
background-color: var(--layout-filled-background-color-accent);
|
|
1018
|
+
}
|
|
1019
|
+
.bg-\(--layout-filled-background-color-danger\) {
|
|
1020
|
+
background-color: var(--layout-filled-background-color-danger);
|
|
1021
|
+
}
|
|
1022
|
+
.bg-\(--layout-filled-background-color-default\) {
|
|
1023
|
+
background-color: var(--layout-filled-background-color-default);
|
|
1024
|
+
}
|
|
1025
|
+
.bg-\(--layout-filled-background-color-info\) {
|
|
1026
|
+
background-color: var(--layout-filled-background-color-info);
|
|
1027
|
+
}
|
|
1028
|
+
.bg-\(--layout-filled-background-color-link\) {
|
|
1029
|
+
background-color: var(--layout-filled-background-color-link);
|
|
1030
|
+
}
|
|
1031
|
+
.bg-\(--layout-filled-background-color-primary\) {
|
|
1032
|
+
background-color: var(--layout-filled-background-color-primary);
|
|
1033
|
+
}
|
|
1034
|
+
.bg-\(--layout-filled-background-color-secondary\) {
|
|
1035
|
+
background-color: var(--layout-filled-background-color-secondary);
|
|
1036
|
+
}
|
|
1037
|
+
.bg-\(--layout-filled-background-color-success\) {
|
|
1038
|
+
background-color: var(--layout-filled-background-color-success);
|
|
1039
|
+
}
|
|
1040
|
+
.bg-\(--layout-filled-background-color-tertiary\) {
|
|
1041
|
+
background-color: var(--layout-filled-background-color-tertiary);
|
|
1042
|
+
}
|
|
1043
|
+
.bg-\(--layout-filled-background-color-warning\) {
|
|
1044
|
+
background-color: var(--layout-filled-background-color-warning);
|
|
1045
|
+
}
|
|
993
1046
|
.bg-blue-500 {
|
|
994
1047
|
background-color: var(--color-blue-500);
|
|
995
1048
|
}
|
|
@@ -1256,6 +1309,39 @@
|
|
|
1256
1309
|
.whitespace-nowrap {
|
|
1257
1310
|
white-space: nowrap;
|
|
1258
1311
|
}
|
|
1312
|
+
.text-\(--filled-text-color-accent\) {
|
|
1313
|
+
color: var(--filled-text-color-accent);
|
|
1314
|
+
}
|
|
1315
|
+
.text-\(--filled-text-color-danger\) {
|
|
1316
|
+
color: var(--filled-text-color-danger);
|
|
1317
|
+
}
|
|
1318
|
+
.text-\(--filled-text-color-default\) {
|
|
1319
|
+
color: var(--filled-text-color-default);
|
|
1320
|
+
}
|
|
1321
|
+
.text-\(--filled-text-color-info\) {
|
|
1322
|
+
color: var(--filled-text-color-info);
|
|
1323
|
+
}
|
|
1324
|
+
.text-\(--filled-text-color-link\) {
|
|
1325
|
+
color: var(--filled-text-color-link);
|
|
1326
|
+
}
|
|
1327
|
+
.text-\(--filled-text-color-primary\) {
|
|
1328
|
+
color: var(--filled-text-color-primary);
|
|
1329
|
+
}
|
|
1330
|
+
.text-\(--filled-text-color-secondary\) {
|
|
1331
|
+
color: var(--filled-text-color-secondary);
|
|
1332
|
+
}
|
|
1333
|
+
.text-\(--filled-text-color-success\) {
|
|
1334
|
+
color: var(--filled-text-color-success);
|
|
1335
|
+
}
|
|
1336
|
+
.text-\(--filled-text-color-tertiary\) {
|
|
1337
|
+
color: var(--filled-text-color-tertiary);
|
|
1338
|
+
}
|
|
1339
|
+
.text-\(--filled-text-color-transparent\) {
|
|
1340
|
+
color: var(--filled-text-color-transparent);
|
|
1341
|
+
}
|
|
1342
|
+
.text-\(--filled-text-color-warning\) {
|
|
1343
|
+
color: var(--filled-text-color-warning);
|
|
1344
|
+
}
|
|
1259
1345
|
.text-\(--text-color-accent\) {
|
|
1260
1346
|
color: var(--text-color-accent);
|
|
1261
1347
|
}
|
|
@@ -1310,9 +1396,6 @@
|
|
|
1310
1396
|
.text-violet-600 {
|
|
1311
1397
|
color: var(--color-violet-600);
|
|
1312
1398
|
}
|
|
1313
|
-
.text-white {
|
|
1314
|
-
color: var(--color-white);
|
|
1315
|
-
}
|
|
1316
1399
|
.text-yellow-100 {
|
|
1317
1400
|
color: var(--color-yellow-100);
|
|
1318
1401
|
}
|
package/dist/vars.css
CHANGED
|
@@ -11,7 +11,20 @@
|
|
|
11
11
|
--text-color-warning: var(--color-amber-600, #d97706);
|
|
12
12
|
--text-color-info: var(--color-cyan-600, #0891b2);
|
|
13
13
|
|
|
14
|
-
/*
|
|
14
|
+
/* Filled Text Colors */
|
|
15
|
+
--filled-text-color-default: var(--color-gray-100, #f3f4f6);
|
|
16
|
+
--filled-text-color-primary: var(--color-blue-100, #dbeafe);
|
|
17
|
+
--filled-text-color-secondary: var(--color-gray-100, #f3f4f6);
|
|
18
|
+
--filled-text-color-tertiary: var(--color-gray-200, #e5e7eb);
|
|
19
|
+
--filled-text-color-link: var(--color-blue-100, #dbeafe);
|
|
20
|
+
--filled-text-color-accent: var(--color-rose-100, #fdf2f8);
|
|
21
|
+
--filled-text-color-success: var(--color-emerald-100, #d1fae5);
|
|
22
|
+
--filled-text-color-danger: var(--color-red-100, #fee2e2);
|
|
23
|
+
--filled-text-color-warning: var(--color-amber-100, #fef3c7);
|
|
24
|
+
--filled-text-color-info: var(--color-cyan-100, #cffafe);
|
|
25
|
+
--filled-text-color-transparent: transparent;
|
|
26
|
+
|
|
27
|
+
/* UI Background Colors */
|
|
15
28
|
--background-color-default: var(--color-white, #ffffff);
|
|
16
29
|
--background-color-primary: var(--color-blue-50, #eff6ff);
|
|
17
30
|
--background-color-secondary: var(--color-gray-50, #f9fafb);
|
|
@@ -23,7 +36,7 @@
|
|
|
23
36
|
--background-color-info: var(--color-cyan-50, #ecfeff);
|
|
24
37
|
--background-color-link: var(--color-blue-50, #eff6ff);
|
|
25
38
|
|
|
26
|
-
/* Background Hover Colors */
|
|
39
|
+
/* UI Background Hover Colors */
|
|
27
40
|
--background-color-hover-default: var(--color-gray-50, #f3f4f6);
|
|
28
41
|
--background-color-hover-primary: var(--color-blue-100, #dbeafe);
|
|
29
42
|
--background-color-hover-secondary: var(--color-gray-100, #f3f4f6);
|
|
@@ -35,7 +48,7 @@
|
|
|
35
48
|
--background-color-hover-info: var(--color-cyan-100, #cffafe);
|
|
36
49
|
--background-color-hover-link: var(--color-blue-100, #dbeafe);
|
|
37
50
|
|
|
38
|
-
/* Background Active Colors */
|
|
51
|
+
/* UI Background Active Colors */
|
|
39
52
|
--background-color-active-default: var(--color-gray-100, #e5e7eb);
|
|
40
53
|
--background-color-active-primary: var(--color-blue-200, #bfdbfe);
|
|
41
54
|
--background-color-active-secondary: var(--color-gray-200, #e5e7eb);
|
|
@@ -47,7 +60,7 @@
|
|
|
47
60
|
--background-color-active-info: var(--color-cyan-200, #a5f3fc);
|
|
48
61
|
--background-color-active-link: var(--color-blue-200, #bfdbfe);
|
|
49
62
|
|
|
50
|
-
/* Filled
|
|
63
|
+
/* Filled UI Background Colors */
|
|
51
64
|
--filled-background-color-default: var(--color-gray-800, #1f2937);
|
|
52
65
|
--filled-background-color-primary: var(--color-blue-600, #2563eb);
|
|
53
66
|
--filled-background-color-secondary: var(--color-gray-600, #4b5563);
|
|
@@ -59,7 +72,7 @@
|
|
|
59
72
|
--filled-background-color-info: var(--color-cyan-600, #0891b2);
|
|
60
73
|
--filled-background-color-link: var(--color-blue-600, #2563eb);
|
|
61
74
|
|
|
62
|
-
/* Filled
|
|
75
|
+
/* Filled UI Hover Background Colors */
|
|
63
76
|
--filled-background-color-hover-default: var(--color-gray-900, #111827);
|
|
64
77
|
--filled-background-color-hover-primary: var(--color-blue-700, #1d4ed8);
|
|
65
78
|
--filled-background-color-hover-secondary: var(--color-gray-700, #374151);
|
|
@@ -71,7 +84,7 @@
|
|
|
71
84
|
--filled-background-color-hover-info: var(--color-cyan-700, #0e7490);
|
|
72
85
|
--filled-background-color-hover-link: var(--color-blue-700, #1d4ed8);
|
|
73
86
|
|
|
74
|
-
/* Filled
|
|
87
|
+
/* Filled UI Active Background Colors */
|
|
75
88
|
--filled-background-color-active-default: var(--color-gray-950, #030712);
|
|
76
89
|
--filled-background-color-active-primary: var(--color-blue-800, #1e40af);
|
|
77
90
|
--filled-background-color-active-secondary: var(--color-gray-800, #1f2937);
|
|
@@ -96,6 +109,19 @@
|
|
|
96
109
|
--layout-background-transparent: transparent;
|
|
97
110
|
--layout-background-link: var(--color-blue-50, #eff6ff);
|
|
98
111
|
|
|
112
|
+
/* Layout Filled Background Colors */
|
|
113
|
+
--layout-filled-background-color-default: var(--color-gray-600, #4b5563);
|
|
114
|
+
--layout-filled-background-color-primary: var(--color-blue-600, #2563eb);
|
|
115
|
+
--layout-filled-background-color-secondary: var(--color-gray-600, #4b5563);
|
|
116
|
+
--layout-filled-background-color-tertiary: var(--color-gray-500, #6b7280);
|
|
117
|
+
--layout-filled-background-color-accent: var(--color-indigo-600, #4f46e5);
|
|
118
|
+
--layout-filled-background-color-success: var(--color-green-600, #16a34a);
|
|
119
|
+
--layout-filled-background-color-danger: var(--color-red-600, #dc2626);
|
|
120
|
+
--layout-filled-background-color-warning: var(--color-yellow-600, #ca8a04);
|
|
121
|
+
--layout-filled-background-color-info: var(--color-blue-600, #2563eb);
|
|
122
|
+
--layout-filled-background-color-transparent: transparent;
|
|
123
|
+
--layout-filled-background-color-link: var(--color-blue-600, #2563eb);
|
|
124
|
+
|
|
99
125
|
/* Border Colors */
|
|
100
126
|
--border-color-default: var(--color-gray-200, #d1d5db);
|
|
101
127
|
--border-color-primary: var(--color-blue-200, #93c5fd);
|
package/package.json
CHANGED