@vaneui/ui 0.0.19 → 0.1.0
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/theme/components/ui/classes/appearanceClasses.d.ts +1 -1
- package/dist/components/theme/components/ui/props/keys.d.ts +16 -14
- package/dist/components/theme/components/ui/props/props.d.ts +4 -3
- package/dist/components/theme/components/ui/theme/common/ComponentTheme.d.ts +9 -1
- package/dist/components/theme/components/ui/theme/containerTheme.d.ts +2 -0
- package/dist/components/theme/components/ui/theme/layout/displayTheme.d.ts +9 -0
- package/dist/components/theme/components/utils/componentUtils.d.ts +1 -1
- package/dist/components/theme/index.js +2893 -137
- package/dist/components/theme/index.js.map +1 -1
- package/dist/components/ui/classes/appearanceClasses.d.ts +1 -1
- package/dist/components/ui/col.d.ts +0 -7
- package/dist/components/ui/props/keys.d.ts +16 -14
- package/dist/components/ui/props/props.d.ts +4 -3
- package/dist/components/ui/theme/common/ComponentTheme.d.ts +9 -1
- package/dist/components/ui/theme/containerTheme.d.ts +2 -0
- package/dist/components/ui/theme/layout/displayTheme.d.ts +9 -0
- package/dist/components/utils/buildComponent.d.ts +6 -7
- package/dist/components/utils/componentUtils.d.ts +1 -1
- package/dist/index.esm.js +3327 -3311
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +3326 -3310
- package/dist/index.js.map +1 -1
- package/dist/ui.css +24 -0
- package/dist/vars.css +121 -128
- package/package.json +5 -20
- package/dist/complex.css +0 -2025
- package/dist/components/theme/components/ui/classes/layoutClasses.d.ts +0 -13
- package/dist/components/ui/classes/layoutClasses.d.ts +0 -13
package/dist/ui.css
CHANGED
|
@@ -403,15 +403,39 @@
|
|
|
403
403
|
.mx-auto {
|
|
404
404
|
margin-inline: auto;
|
|
405
405
|
}
|
|
406
|
+
.block {
|
|
407
|
+
display: block;
|
|
408
|
+
}
|
|
409
|
+
.contents {
|
|
410
|
+
display: contents;
|
|
411
|
+
}
|
|
406
412
|
.flex {
|
|
407
413
|
display: flex;
|
|
408
414
|
}
|
|
409
415
|
.grid {
|
|
410
416
|
display: grid;
|
|
411
417
|
}
|
|
418
|
+
.hidden {
|
|
419
|
+
display: none;
|
|
420
|
+
}
|
|
421
|
+
.inline {
|
|
422
|
+
display: inline;
|
|
423
|
+
}
|
|
424
|
+
.inline-block {
|
|
425
|
+
display: inline-block;
|
|
426
|
+
}
|
|
412
427
|
.inline-flex {
|
|
413
428
|
display: inline-flex;
|
|
414
429
|
}
|
|
430
|
+
.inline-grid {
|
|
431
|
+
display: inline-grid;
|
|
432
|
+
}
|
|
433
|
+
.table {
|
|
434
|
+
display: table;
|
|
435
|
+
}
|
|
436
|
+
.table-cell {
|
|
437
|
+
display: table-cell;
|
|
438
|
+
}
|
|
415
439
|
.h-fit {
|
|
416
440
|
height: fit-content;
|
|
417
441
|
}
|
package/dist/vars.css
CHANGED
|
@@ -1,139 +1,132 @@
|
|
|
1
1
|
@theme {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
/* Text Colors */
|
|
3
|
+
--text-color-default: var(--color-gray-900, #111827);
|
|
4
|
+
--text-color-primary: var(--color-blue-600, #2563eb);
|
|
5
|
+
--text-color-secondary: var(--color-gray-600, #4b5563);
|
|
6
|
+
--text-color-tertiary: var(--color-gray-500, #6b7280);
|
|
7
|
+
--text-color-muted: var(--color-gray-400, #9ca3af);
|
|
8
|
+
--text-color-link: var(--color-blue-600, #2563eb);
|
|
9
|
+
--text-color-accent: var(--color-rose-700, #9333ea);
|
|
10
|
+
--text-color-success: var(--color-emerald-600, #059669);
|
|
11
|
+
--text-color-danger: var(--color-red-600, #dc2626);
|
|
12
|
+
--text-color-warning: var(--color-amber-600, #d97706);
|
|
13
|
+
--text-color-info: var(--color-cyan-600, #0891b2);
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
15
|
+
/* Background Colors */
|
|
16
|
+
--background-color-default: var(--color-white, #ffffff);
|
|
17
|
+
--background-color-primary: var(--color-blue-50, #eff6ff);
|
|
18
|
+
--background-color-secondary: var(--color-gray-50, #f9fafb);
|
|
19
|
+
--background-color-tertiary: var(--color-gray-100, #f3f4f6);
|
|
20
|
+
--background-color-accent: var(--color-rose-50, #faf5ff);
|
|
21
|
+
--background-color-success: var(--color-emerald-50, #ecfdf5);
|
|
22
|
+
--background-color-danger: var(--color-red-50, #fef2f2);
|
|
23
|
+
--background-color-warning: var(--color-amber-50, #fffbeb);
|
|
24
|
+
--background-color-info: var(--color-cyan-50, #ecfeff);
|
|
25
|
+
--background-color-muted: var(--color-gray-50, #f9fafb);
|
|
26
|
+
--background-color-link: var(--color-blue-50, #eff6ff);
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
28
|
+
/* Background Hover Colors */
|
|
29
|
+
--background-color-hover-default: var(--color-gray-50, #f3f4f6);
|
|
30
|
+
--background-color-hover-primary: var(--color-blue-100, #dbeafe);
|
|
31
|
+
--background-color-hover-secondary: var(--color-gray-100, #f3f4f6);
|
|
32
|
+
--background-color-hover-tertiary: var(--color-gray-200, #e5e7eb);
|
|
33
|
+
--background-color-hover-accent: var(--color-rose-100, #f5d0fe);
|
|
34
|
+
--background-color-hover-success: var(--color-emerald-100, #d1fae5);
|
|
35
|
+
--background-color-hover-danger: var(--color-red-100, #fee2e2);
|
|
36
|
+
--background-color-hover-warning: var(--color-amber-100, #fef3c7);
|
|
37
|
+
--background-color-hover-info: var(--color-cyan-100, #cffafe);
|
|
38
|
+
--background-color-hover-muted: var(--color-gray-100, #f3f4f6);
|
|
39
|
+
--background-color-hover-link: var(--color-blue-100, #dbeafe);
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
41
|
+
/* Background Active Colors */
|
|
42
|
+
--background-color-active-default: var(--color-gray-100, #e5e7eb);
|
|
43
|
+
--background-color-active-primary: var(--color-blue-200, #bfdbfe);
|
|
44
|
+
--background-color-active-secondary: var(--color-gray-200, #e5e7eb);
|
|
45
|
+
--background-color-active-tertiary: var(--color-gray-300, #d1d5db);
|
|
46
|
+
--background-color-active-accent: var(--color-rose-200, #fbcfe8);
|
|
47
|
+
--background-color-active-success: var(--color-emerald-200, #a7f3d0);
|
|
48
|
+
--background-color-active-danger: var(--color-red-200, #fecaca);
|
|
49
|
+
--background-color-active-warning: var(--color-amber-200, #fde68a);
|
|
50
|
+
--background-color-active-info: var(--color-cyan-200, #a5f3fc);
|
|
51
|
+
--background-color-active-muted: var(--color-gray-200, #e5e7eb);
|
|
52
|
+
--background-color-active-link: var(--color-blue-200, #bfdbfe);
|
|
53
53
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
54
|
+
/* Filled Button Background Colors */
|
|
55
|
+
--filled-background-color-default: var(--color-gray-800, #1f2937);
|
|
56
|
+
--filled-background-color-primary: var(--color-blue-600, #2563eb);
|
|
57
|
+
--filled-background-color-secondary: var(--color-gray-600, #4b5563);
|
|
58
|
+
--filled-background-color-tertiary: var(--color-gray-500, #6b7280);
|
|
59
|
+
--filled-background-color-accent: var(--color-rose-600, #e11d48);
|
|
60
|
+
--filled-background-color-success: var(--color-emerald-600, #059669);
|
|
61
|
+
--filled-background-color-danger: var(--color-red-600, #dc2626);
|
|
62
|
+
--filled-background-color-warning: var(--color-amber-600, #d97706);
|
|
63
|
+
--filled-background-color-info: var(--color-cyan-600, #0891b2);
|
|
64
|
+
--filled-background-color-muted: var(--color-gray-500, #6b7280);
|
|
65
|
+
--filled-background-color-link: var(--color-blue-600, #2563eb);
|
|
66
66
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
67
|
+
/* Filled Button Hover Background Colors */
|
|
68
|
+
--filled-background-color-hover-default: var(--color-gray-900, #111827);
|
|
69
|
+
--filled-background-color-hover-primary: var(--color-blue-700, #1d4ed8);
|
|
70
|
+
--filled-background-color-hover-secondary: var(--color-gray-700, #374151);
|
|
71
|
+
--filled-background-color-hover-tertiary: var(--color-gray-600, #4b5563);
|
|
72
|
+
--filled-background-color-hover-accent: var(--color-rose-700, #be123c);
|
|
73
|
+
--filled-background-color-hover-success: var(--color-emerald-700, #047857);
|
|
74
|
+
--filled-background-color-hover-danger: var(--color-red-700, #b91c1c);
|
|
75
|
+
--filled-background-color-hover-warning: var(--color-amber-700, #b45309);
|
|
76
|
+
--filled-background-color-hover-info: var(--color-cyan-700, #0e7490);
|
|
77
|
+
--filled-background-color-hover-muted: var(--color-gray-600, #4b5563);
|
|
78
|
+
--filled-background-color-hover-link: var(--color-blue-700, #1d4ed8);
|
|
79
79
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
80
|
+
/* Filled Button Active Background Colors */
|
|
81
|
+
--filled-background-color-active-default: var(--color-gray-950, #030712);
|
|
82
|
+
--filled-background-color-active-primary: var(--color-blue-800, #1e40af);
|
|
83
|
+
--filled-background-color-active-secondary: var(--color-gray-800, #1f2937);
|
|
84
|
+
--filled-background-color-active-tertiary: var(--color-gray-700, #374151);
|
|
85
|
+
--filled-background-color-active-accent: var(--color-rose-800, #9f1239);
|
|
86
|
+
--filled-background-color-active-success: var(--color-emerald-800, #065f46);
|
|
87
|
+
--filled-background-color-active-danger: var(--color-red-800, #991b1b);
|
|
88
|
+
--filled-background-color-active-warning: var(--color-amber-800, #92400e);
|
|
89
|
+
--filled-background-color-active-info: var(--color-cyan-800, #155e75);
|
|
90
|
+
--filled-background-color-active-muted: var(--color-gray-700, #374151);
|
|
91
|
+
--filled-background-color-active-link: var(--color-blue-800, #1e40af);
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
93
|
+
/* Layout Background Colors */
|
|
94
|
+
--layout-background-default: var(--color-white, #ffffff);
|
|
95
|
+
--layout-background-primary: var(--color-white, #ffffff);
|
|
96
|
+
--layout-background-secondary: var(--color-gray-50, #f9fafb);
|
|
97
|
+
--layout-background-tertiary: var(--color-gray-100, #f3f4f6);
|
|
98
|
+
--layout-background-accent: var(--color-indigo-50, #eef2ff);
|
|
99
|
+
--layout-background-success: var(--color-green-50, #f0fdf4);
|
|
100
|
+
--layout-background-danger: var(--color-red-50, #fef2f2);
|
|
101
|
+
--layout-background-warning: var(--color-yellow-50, #fefce8);
|
|
102
|
+
--layout-background-info: var(--color-blue-50, #eff6ff);
|
|
103
|
+
--layout-background-transparent: transparent;
|
|
104
|
+
--layout-background-muted: var(--color-gray-50, #f9fafb);
|
|
105
|
+
--layout-background-link: var(--color-blue-50, #eff6ff);
|
|
106
106
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
107
|
+
/* Border Colors */
|
|
108
|
+
--border-color-default: var(--color-gray-200, #d1d5db);
|
|
109
|
+
--border-color-primary: var(--color-blue-200, #93c5fd);
|
|
110
|
+
--border-color-secondary: var(--color-gray-200, #d1d5db);
|
|
111
|
+
--border-color-tertiary: var(--color-gray-200, #e5e7eb);
|
|
112
|
+
--border-color-muted: var(--color-gray-200, #e5e7eb);
|
|
113
|
+
--border-color-link: var(--color-blue-200, #93c5fd);
|
|
114
|
+
--border-color-accent: var(--color-rose-200, #d8b4fe);
|
|
115
|
+
--border-color-success: var(--color-emerald-200, #6ee7b7);
|
|
116
|
+
--border-color-danger: var(--color-red-200, #fca5a5);
|
|
117
|
+
--border-color-warning: var(--color-amber-200, #fcd34d);
|
|
118
|
+
--border-color-info: var(--color-cyan-200, #67e8f9);
|
|
119
119
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
/* Accent / Action Colors */
|
|
134
|
-
--accent-color-default: var(--color-rose-600, #7c3aed);
|
|
135
|
-
--accent-color-hover: var(--color-rose-700, #6d28d9);
|
|
136
|
-
|
|
137
|
-
/* Additional Colors */
|
|
138
|
-
--overlay-color: rgba(0, 0, 0, 0.5);
|
|
120
|
+
/* Filled Button Border Colors */
|
|
121
|
+
--filled-border-color-default: var(--color-gray-800, #1f2937);
|
|
122
|
+
--filled-border-color-primary: var(--color-blue-600, #2563eb);
|
|
123
|
+
--filled-border-color-secondary: var(--color-gray-600, #4b5563);
|
|
124
|
+
--filled-border-color-tertiary: var(--color-gray-500, #6b7280);
|
|
125
|
+
--filled-border-color-accent: var(--color-rose-600, #e11d48);
|
|
126
|
+
--filled-border-color-success: var(--color-emerald-600, #059669);
|
|
127
|
+
--filled-border-color-danger: var(--color-red-600, #dc2626);
|
|
128
|
+
--filled-border-color-warning: var(--color-amber-600, #d97706);
|
|
129
|
+
--filled-border-color-info: var(--color-cyan-600, #0891b2);
|
|
130
|
+
--filled-border-color-muted: var(--color-gray-500, #6b7280);
|
|
131
|
+
--filled-border-color-link: var(--color-blue-600, #2563eb);
|
|
139
132
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaneui/ui",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -15,15 +15,6 @@
|
|
|
15
15
|
"require": "./dist/index.js",
|
|
16
16
|
"types": "./dist/index.d.ts"
|
|
17
17
|
},
|
|
18
|
-
"./theme": {
|
|
19
|
-
"import": "./dist/components/theme/index.js",
|
|
20
|
-
"types": "./dist/components/theme/index.d.ts"
|
|
21
|
-
},
|
|
22
|
-
"./complex": {
|
|
23
|
-
"import": "./dist/components/complex/index.js",
|
|
24
|
-
"require": "./dist/components/complex/index.js",
|
|
25
|
-
"types": "./dist/components/complex/index.d.ts"
|
|
26
|
-
},
|
|
27
18
|
"./vars": {
|
|
28
19
|
"import": "./dist/vars.css",
|
|
29
20
|
"default": "./dist/vars.css"
|
|
@@ -31,10 +22,6 @@
|
|
|
31
22
|
"./css": {
|
|
32
23
|
"import": "./dist/ui.css",
|
|
33
24
|
"default": "./dist/ui.css"
|
|
34
|
-
},
|
|
35
|
-
"./css/complex": {
|
|
36
|
-
"import": "./dist/complex.css",
|
|
37
|
-
"default": "./dist/complex.css"
|
|
38
25
|
}
|
|
39
26
|
},
|
|
40
27
|
"scripts": {
|
|
@@ -42,13 +29,11 @@
|
|
|
42
29
|
"type-check": "tsc --noEmit",
|
|
43
30
|
"build:js": "npm run type-check && npm run clean && rollup -c --bundleConfigAsCjs",
|
|
44
31
|
"build:css:vars": "npx @tailwindcss/cli -i ./src/components/theme/vars.css -o ./dist/vars.css",
|
|
45
|
-
"build:css:ui": "npx @tailwindcss/cli -i
|
|
46
|
-
"build:css:complex": "npx @tailwindcss/cli -i ./src/components/complex/index.css -o ./dist/complex.css",
|
|
32
|
+
"build:css:ui": "npx @tailwindcss/cli -i src/components/index.css -o ./dist/ui.css",
|
|
47
33
|
"watch:css:vars": "npx @tailwindcss/cli --watch -i ./src/components/theme/vars.css -o ./dist/vars.css",
|
|
48
|
-
"watch:css:ui": "npx @tailwindcss/cli --watch -i
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"watch": "npm run clean && concurrently \"rollup -c --bundleConfigAsCjs -w\" \"npm run watch:css:ui\" \"npm run watch:css:vars\" \"npm run watch:css:complex\"",
|
|
34
|
+
"watch:css:ui": "npx @tailwindcss/cli --watch -i src/components/index.css -o ./dist/ui.css",
|
|
35
|
+
"build": "npm run clean && npm run build:js && npm run build:css:ui && npm run build:css:vars",
|
|
36
|
+
"watch": "npm run clean && concurrently \"rollup -c --bundleConfigAsCjs -w\" \"npm run watch:css:ui\" \"npm run watch:css:vars\"",
|
|
52
37
|
"prepublishOnly": "npm run build",
|
|
53
38
|
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
|
|
54
39
|
},
|