@vaneui/ui 0.2.1-alpha.20250830140007.8b4cce3 → 0.2.1-alpha.20250901145552.64cbaea

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.
Files changed (10) hide show
  1. package/dist/components/ui/classes/appearanceClasses.d.ts +1 -0
  2. package/dist/components/ui/theme/appearance/appearanceTheme.d.ts +0 -1
  3. package/dist/components/ui/theme/appearance/genericVariantTheme.d.ts +1 -0
  4. package/dist/index.esm.js +102 -91
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.js +102 -91
  7. package/dist/index.js.map +1 -1
  8. package/dist/ui.css +87 -3
  9. package/dist/vars.css +32 -6
  10. package/package.json +2 -3
package/dist/ui.css CHANGED
@@ -25,11 +25,13 @@
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-800: oklch(47.6% 0.114 61.907);
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);
31
32
  --color-green-600: oklch(62.7% 0.194 149.214);
32
33
  --color-green-700: oklch(52.7% 0.154 150.069);
34
+ --color-green-800: oklch(44.8% 0.119 151.328);
33
35
  --color-emerald-50: oklch(97.9% 0.021 166.113);
34
36
  --color-emerald-100: oklch(95% 0.052 163.051);
35
37
  --color-emerald-200: oklch(90.5% 0.093 164.15);
@@ -56,6 +58,7 @@
56
58
  --color-indigo-100: oklch(93% 0.034 272.788);
57
59
  --color-indigo-400: oklch(67.3% 0.182 276.935);
58
60
  --color-indigo-500: oklch(58.5% 0.233 277.117);
61
+ --color-indigo-800: oklch(39.8% 0.195 277.366);
59
62
  --color-violet-400: oklch(70.2% 0.183 293.541);
60
63
  --color-violet-600: oklch(54.1% 0.281 293.009);
61
64
  --color-purple-600: oklch(55.8% 0.288 302.321);
@@ -134,6 +137,17 @@
134
137
  --text-color-danger: var(--color-red-600, #dc2626);
135
138
  --text-color-warning: var(--color-amber-600, #d97706);
136
139
  --text-color-info: var(--color-cyan-600, #0891b2);
140
+ --filled-text-color-default: #ffffff;
141
+ --filled-text-color-primary: var(--color-blue-100, #dbeafe);
142
+ --filled-text-color-secondary: var(--color-gray-100, #f3f4f6);
143
+ --filled-text-color-tertiary: var(--color-gray-200, #e5e7eb);
144
+ --filled-text-color-link: var(--color-blue-100, #dbeafe);
145
+ --filled-text-color-accent: var(--color-rose-100, #fdf2f8);
146
+ --filled-text-color-success: var(--color-emerald-100, #d1fae5);
147
+ --filled-text-color-danger: var(--color-red-100, #fee2e2);
148
+ --filled-text-color-warning: var(--color-amber-100, #fef3c7);
149
+ --filled-text-color-info: var(--color-cyan-100, #cffafe);
150
+ --filled-text-color-transparent: transparent;
137
151
  --background-color-default: var(--color-white, #ffffff);
138
152
  --background-color-primary: var(--color-blue-50, #eff6ff);
139
153
  --background-color-secondary: var(--color-gray-50, #f9fafb);
@@ -204,6 +218,16 @@
204
218
  --layout-background-warning: var(--color-yellow-50, #fefce8);
205
219
  --layout-background-info: var(--color-blue-50, #eff6ff);
206
220
  --layout-background-link: var(--color-blue-50, #eff6ff);
221
+ --layout-filled-background-color-default: var(--color-gray-800, #4b5563);
222
+ --layout-filled-background-color-primary: var(--color-blue-800, #2563eb);
223
+ --layout-filled-background-color-secondary: var(--color-gray-800, #4b5563);
224
+ --layout-filled-background-color-tertiary: var(--color-gray-800, #6b7280);
225
+ --layout-filled-background-color-accent: var(--color-indigo-800, #4f46e5);
226
+ --layout-filled-background-color-success: var(--color-green-800, #16a34a);
227
+ --layout-filled-background-color-danger: var(--color-red-800, #dc2626);
228
+ --layout-filled-background-color-warning: var(--color-yellow-800, #ca8a04);
229
+ --layout-filled-background-color-info: var(--color-blue-800, #2563eb);
230
+ --layout-filled-background-color-link: var(--color-blue-800, #2563eb);
207
231
  --border-color-default: var(--color-gray-200, #d1d5db);
208
232
  --border-color-primary: var(--color-blue-200, #93c5fd);
209
233
  --border-color-secondary: var(--color-gray-200, #d1d5db);
@@ -990,6 +1014,36 @@
990
1014
  .bg-\(--layout-background-warning\) {
991
1015
  background-color: var(--layout-background-warning);
992
1016
  }
1017
+ .bg-\(--layout-filled-background-color-accent\) {
1018
+ background-color: var(--layout-filled-background-color-accent);
1019
+ }
1020
+ .bg-\(--layout-filled-background-color-danger\) {
1021
+ background-color: var(--layout-filled-background-color-danger);
1022
+ }
1023
+ .bg-\(--layout-filled-background-color-default\) {
1024
+ background-color: var(--layout-filled-background-color-default);
1025
+ }
1026
+ .bg-\(--layout-filled-background-color-info\) {
1027
+ background-color: var(--layout-filled-background-color-info);
1028
+ }
1029
+ .bg-\(--layout-filled-background-color-link\) {
1030
+ background-color: var(--layout-filled-background-color-link);
1031
+ }
1032
+ .bg-\(--layout-filled-background-color-primary\) {
1033
+ background-color: var(--layout-filled-background-color-primary);
1034
+ }
1035
+ .bg-\(--layout-filled-background-color-secondary\) {
1036
+ background-color: var(--layout-filled-background-color-secondary);
1037
+ }
1038
+ .bg-\(--layout-filled-background-color-success\) {
1039
+ background-color: var(--layout-filled-background-color-success);
1040
+ }
1041
+ .bg-\(--layout-filled-background-color-tertiary\) {
1042
+ background-color: var(--layout-filled-background-color-tertiary);
1043
+ }
1044
+ .bg-\(--layout-filled-background-color-warning\) {
1045
+ background-color: var(--layout-filled-background-color-warning);
1046
+ }
993
1047
  .bg-blue-500 {
994
1048
  background-color: var(--color-blue-500);
995
1049
  }
@@ -1256,6 +1310,39 @@
1256
1310
  .whitespace-nowrap {
1257
1311
  white-space: nowrap;
1258
1312
  }
1313
+ .text-\(--filled-text-color-accent\) {
1314
+ color: var(--filled-text-color-accent);
1315
+ }
1316
+ .text-\(--filled-text-color-danger\) {
1317
+ color: var(--filled-text-color-danger);
1318
+ }
1319
+ .text-\(--filled-text-color-default\) {
1320
+ color: var(--filled-text-color-default);
1321
+ }
1322
+ .text-\(--filled-text-color-info\) {
1323
+ color: var(--filled-text-color-info);
1324
+ }
1325
+ .text-\(--filled-text-color-link\) {
1326
+ color: var(--filled-text-color-link);
1327
+ }
1328
+ .text-\(--filled-text-color-primary\) {
1329
+ color: var(--filled-text-color-primary);
1330
+ }
1331
+ .text-\(--filled-text-color-secondary\) {
1332
+ color: var(--filled-text-color-secondary);
1333
+ }
1334
+ .text-\(--filled-text-color-success\) {
1335
+ color: var(--filled-text-color-success);
1336
+ }
1337
+ .text-\(--filled-text-color-tertiary\) {
1338
+ color: var(--filled-text-color-tertiary);
1339
+ }
1340
+ .text-\(--filled-text-color-transparent\) {
1341
+ color: var(--filled-text-color-transparent);
1342
+ }
1343
+ .text-\(--filled-text-color-warning\) {
1344
+ color: var(--filled-text-color-warning);
1345
+ }
1259
1346
  .text-\(--text-color-accent\) {
1260
1347
  color: var(--text-color-accent);
1261
1348
  }
@@ -1310,9 +1397,6 @@
1310
1397
  .text-violet-600 {
1311
1398
  color: var(--color-violet-600);
1312
1399
  }
1313
- .text-white {
1314
- color: var(--color-white);
1315
- }
1316
1400
  .text-yellow-100 {
1317
1401
  color: var(--color-yellow-100);
1318
1402
  }
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
- /* Background Colors */
14
+ /* Filled Text Colors */
15
+ --filled-text-color-default: #ffffff;
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 Button Background Colors */
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 Button Hover Background Colors */
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 Button Active Background Colors */
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-800, #4b5563);
114
+ --layout-filled-background-color-primary: var(--color-blue-800, #2563eb);
115
+ --layout-filled-background-color-secondary: var(--color-gray-800, #4b5563);
116
+ --layout-filled-background-color-tertiary: var(--color-gray-800, #6b7280);
117
+ --layout-filled-background-color-accent: var(--color-indigo-800, #4f46e5);
118
+ --layout-filled-background-color-success: var(--color-green-800, #16a34a);
119
+ --layout-filled-background-color-danger: var(--color-red-800, #dc2626);
120
+ --layout-filled-background-color-warning: var(--color-yellow-800, #ca8a04);
121
+ --layout-filled-background-color-info: var(--color-blue-800, #2563eb);
122
+ --layout-filled-background-color-transparent: transparent;
123
+ --layout-filled-background-color-link: var(--color-blue-800, #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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.2.1-alpha.20250830140007.8b4cce3",
3
+ "version": "0.2.1-alpha.20250901145552.64cbaea",
4
4
  "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
5
5
  "author": "",
6
6
  "license": "ISC",
@@ -49,8 +49,7 @@
49
49
  "build:css:ui": "npx @tailwindcss/cli -i src/components/index.css -o ./dist/ui.css",
50
50
  "build": "npm run clean && npm run build:js && npm run build:css:ui && npm run build:css:vars",
51
51
  "test": "tsc --noEmit && node node_modules/jest/bin/jest.js",
52
- "playground": "npm run build && cd playground && npm run dev",
53
- "playground:dev": "cd playground && npm run dev"
52
+ "playground": "npm run build:css:ui && npm run build:css:vars && concurrently --kill-others --raw \"npx @tailwindcss/cli -i src/components/css/vars.css -o ./dist/vars.css --watch\" \"npx @tailwindcss/cli -i src/components/index.css -o ./dist/ui.css --watch\" \"cd playground && npm run dev\""
54
53
  },
55
54
  "peerDependencies": {
56
55
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",