@vaneui/ui 0.2.2-alpha.20250907183237.5f63365 → 0.2.2-alpha.20250913214402.427a7ea
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/README.md +2 -2
- package/dist/index.esm.js +1007 -410
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1169 -409
- package/dist/index.js.map +1 -1
- package/dist/src/components/tests/grid5.test.d.ts +1 -0
- package/dist/src/components/tests/grid6.test.d.ts +1 -0
- package/dist/src/components/tests/input.test.d.ts +1 -0
- package/dist/src/components/tests/transparent-key-behavior.test.d.ts +1 -0
- package/dist/src/components/themeContext.d.ts +11 -1
- package/dist/src/components/ui/card.d.ts +126 -2
- package/dist/src/components/ui/checkbox.d.ts +2 -0
- package/dist/src/components/ui/classes/appearanceClasses.d.ts +20 -18
- package/dist/src/components/ui/classes/typographyClasses.d.ts +3 -3
- package/dist/src/components/ui/code.d.ts +2 -0
- package/dist/src/components/ui/col.d.ts +93 -2
- package/dist/src/components/ui/container.d.ts +93 -2
- package/dist/src/components/ui/grid.d.ts +420 -4
- package/dist/src/components/ui/img.d.ts +2 -0
- package/dist/src/components/ui/input.d.ts +123 -0
- package/dist/src/components/ui/layout.d.ts +1 -1
- package/dist/src/components/ui/props/appearance.d.ts +22 -0
- package/dist/src/components/ui/props/border.d.ts +6 -0
- package/dist/src/components/ui/props/breakpoint.d.ts +12 -0
- package/dist/src/components/ui/props/display.d.ts +24 -0
- package/dist/src/components/ui/props/flexDirection.d.ts +10 -0
- package/dist/src/components/ui/props/focusVisible.d.ts +6 -0
- package/dist/src/components/ui/props/fontFamily.d.ts +8 -0
- package/dist/src/components/ui/props/fontStyle.d.ts +6 -0
- package/dist/src/components/ui/props/fontWeight.d.ts +20 -0
- package/dist/src/components/ui/props/gap.d.ts +6 -0
- package/dist/src/components/ui/props/hide.d.ts +12 -0
- package/dist/src/components/ui/props/items.d.ts +12 -0
- package/dist/src/components/ui/props/justify.d.ts +18 -0
- package/dist/src/components/ui/props/keys.d.ts +143 -16
- package/dist/src/components/ui/props/listStyle.d.ts +6 -0
- package/dist/src/components/ui/props/mode.d.ts +21 -0
- package/dist/src/components/ui/props/overflow.d.ts +32 -0
- package/dist/src/components/ui/props/padding.d.ts +6 -0
- package/dist/src/components/ui/props/position.d.ts +12 -0
- package/dist/src/components/ui/props/props.d.ts +25 -8
- package/dist/src/components/ui/props/reverse.d.ts +4 -0
- package/dist/src/components/ui/props/ring.d.ts +6 -0
- package/dist/src/components/ui/props/shadow.d.ts +6 -0
- package/dist/src/components/ui/props/shape.d.ts +8 -0
- package/dist/src/components/ui/props/size.d.ts +12 -0
- package/dist/src/components/ui/props/textAlign.d.ts +10 -0
- package/dist/src/components/ui/props/textDecoration.d.ts +10 -0
- package/dist/src/components/ui/props/textTransform.d.ts +10 -0
- package/dist/src/components/ui/props/transparent.d.ts +4 -0
- package/dist/src/components/ui/props/variant.d.ts +6 -0
- package/dist/src/components/ui/props/wrap.d.ts +8 -0
- package/dist/src/components/ui/row.d.ts +98 -2
- package/dist/src/components/ui/section.d.ts +100 -2
- package/dist/src/components/ui/stack.d.ts +100 -2
- package/dist/src/components/ui/theme/appearance/appearanceTheme.d.ts +3 -2
- package/dist/src/components/ui/theme/appearance/genericVariantTheme.d.ts +5 -0
- package/dist/src/components/ui/theme/appearance/shadowAppearanceTheme.d.ts +5 -5
- package/dist/src/components/ui/theme/badgeTheme.d.ts +3 -0
- package/dist/src/components/ui/theme/buttonTheme.d.ts +3 -0
- package/dist/src/components/ui/theme/checkboxTheme.d.ts +11 -2
- package/dist/src/components/ui/theme/chipTheme.d.ts +3 -0
- package/dist/src/components/ui/theme/codeTheme.d.ts +3 -0
- package/dist/src/components/ui/theme/common/ComponentTheme.d.ts +3 -3
- package/dist/src/components/ui/theme/gridTheme.d.ts +2 -0
- package/dist/src/components/ui/theme/imgTheme.d.ts +4 -0
- package/dist/src/components/ui/theme/inputTheme.d.ts +40 -0
- package/dist/src/components/ui/theme/layout/borderTheme.d.ts +2 -0
- package/dist/src/components/ui/theme/layout/focusVisibleTheme.d.ts +11 -0
- package/dist/src/components/ui/theme/layout/ringTheme.d.ts +2 -0
- package/dist/src/index.d.ts +2 -1
- package/dist/ui.css +690 -566
- package/dist/vars.css +134 -134
- package/package.json +1 -1
package/dist/vars.css
CHANGED
|
@@ -1,162 +1,162 @@
|
|
|
1
|
-
@theme {
|
|
1
|
+
@theme inline {
|
|
2
2
|
/* Text Colors */
|
|
3
|
-
--text-
|
|
4
|
-
--text-
|
|
5
|
-
--text-
|
|
6
|
-
--text-
|
|
7
|
-
--text-
|
|
8
|
-
--text-
|
|
9
|
-
--text-
|
|
10
|
-
--text-
|
|
11
|
-
--text-
|
|
12
|
-
--text-
|
|
3
|
+
--color-text-default: var(--color-gray-900);
|
|
4
|
+
--color-text-primary: var(--color-blue-600);
|
|
5
|
+
--color-text-secondary: var(--color-gray-600);
|
|
6
|
+
--color-text-tertiary: var(--color-gray-500);
|
|
7
|
+
--color-text-link: var(--color-blue-600);
|
|
8
|
+
--color-text-accent: var(--color-rose-700);
|
|
9
|
+
--color-text-success: var(--color-emerald-600);
|
|
10
|
+
--color-text-danger: var(--color-red-600);
|
|
11
|
+
--color-text-warning: var(--color-amber-600);
|
|
12
|
+
--color-text-info: var(--color-cyan-600);
|
|
13
13
|
|
|
14
14
|
/* Filled Text Colors */
|
|
15
|
-
--
|
|
16
|
-
--
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
15
|
+
--color-text-filled-default: var(--color-white);
|
|
16
|
+
--color-text-filled-primary: var(--color-blue-100);
|
|
17
|
+
--color-text-filled-secondary: var(--color-gray-200);
|
|
18
|
+
--color-text-filled-tertiary: var(--color-gray-300);
|
|
19
|
+
--color-text-filled-link: var(--color-blue-100);
|
|
20
|
+
--color-text-filled-accent: var(--color-rose-100);
|
|
21
|
+
--color-text-filled-success: var(--color-emerald-100);
|
|
22
|
+
--color-text-filled-danger: var(--color-red-100);
|
|
23
|
+
--color-text-filled-warning: var(--color-amber-100);
|
|
24
|
+
--color-text-filled-info: var(--color-cyan-100);
|
|
25
|
+
--color-text-filled-transparent: transparent;
|
|
26
26
|
|
|
27
27
|
/* UI Background Colors */
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
28
|
+
--color-bg-default: var(--color-white);
|
|
29
|
+
--color-bg-primary: var(--color-blue-50);
|
|
30
|
+
--color-bg-secondary: var(--color-gray-50);
|
|
31
|
+
--color-bg-tertiary: var(--color-gray-100);
|
|
32
|
+
--color-bg-accent: var(--color-rose-50);
|
|
33
|
+
--color-bg-success: var(--color-emerald-50);
|
|
34
|
+
--color-bg-danger: var(--color-red-50);
|
|
35
|
+
--color-bg-warning: var(--color-amber-50);
|
|
36
|
+
--color-bg-info: var(--color-cyan-50);
|
|
37
|
+
--color-bg-link: var(--color-blue-50);
|
|
38
38
|
|
|
39
39
|
/* UI Background Hover Colors */
|
|
40
|
-
--
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--
|
|
47
|
-
--
|
|
48
|
-
--
|
|
49
|
-
--
|
|
40
|
+
--color-bg-hover-default: var(--color-gray-50);
|
|
41
|
+
--color-bg-hover-primary: var(--color-blue-100);
|
|
42
|
+
--color-bg-hover-secondary: var(--color-gray-100);
|
|
43
|
+
--color-bg-hover-tertiary: var(--color-gray-200);
|
|
44
|
+
--color-bg-hover-accent: var(--color-rose-100);
|
|
45
|
+
--color-bg-hover-success: var(--color-emerald-100);
|
|
46
|
+
--color-bg-hover-danger: var(--color-red-100);
|
|
47
|
+
--color-bg-hover-warning: var(--color-amber-100);
|
|
48
|
+
--color-bg-hover-info: var(--color-cyan-100);
|
|
49
|
+
--color-bg-hover-link: var(--color-blue-100);
|
|
50
50
|
|
|
51
51
|
/* UI Background Active Colors */
|
|
52
|
-
--
|
|
53
|
-
--
|
|
54
|
-
--
|
|
55
|
-
--
|
|
56
|
-
--
|
|
57
|
-
--
|
|
58
|
-
--
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--
|
|
52
|
+
--color-bg-active-default: var(--color-gray-100);
|
|
53
|
+
--color-bg-active-primary: var(--color-blue-200);
|
|
54
|
+
--color-bg-active-secondary: var(--color-gray-200);
|
|
55
|
+
--color-bg-active-tertiary: var(--color-gray-300);
|
|
56
|
+
--color-bg-active-accent: var(--color-rose-200);
|
|
57
|
+
--color-bg-active-success: var(--color-emerald-200);
|
|
58
|
+
--color-bg-active-danger: var(--color-red-200);
|
|
59
|
+
--color-bg-active-warning: var(--color-amber-200);
|
|
60
|
+
--color-bg-active-info: var(--color-cyan-200);
|
|
61
|
+
--color-bg-active-link: var(--color-blue-200);
|
|
62
62
|
|
|
63
63
|
/* Filled UI Background Colors */
|
|
64
|
-
--
|
|
65
|
-
--
|
|
66
|
-
--
|
|
67
|
-
--
|
|
68
|
-
--
|
|
69
|
-
--
|
|
70
|
-
--
|
|
71
|
-
--
|
|
72
|
-
--
|
|
73
|
-
--
|
|
64
|
+
--color-bg-filled-default: var(--color-gray-800);
|
|
65
|
+
--color-bg-filled-primary: var(--color-blue-600);
|
|
66
|
+
--color-bg-filled-secondary: var(--color-gray-600);
|
|
67
|
+
--color-bg-filled-tertiary: var(--color-gray-500);
|
|
68
|
+
--color-bg-filled-accent: var(--color-rose-600);
|
|
69
|
+
--color-bg-filled-success: var(--color-emerald-600);
|
|
70
|
+
--color-bg-filled-danger: var(--color-red-600);
|
|
71
|
+
--color-bg-filled-warning: var(--color-amber-600);
|
|
72
|
+
--color-bg-filled-info: var(--color-cyan-600);
|
|
73
|
+
--color-bg-filled-link: var(--color-blue-600);
|
|
74
74
|
|
|
75
75
|
/* Filled UI Hover Background Colors */
|
|
76
|
-
--
|
|
77
|
-
--
|
|
78
|
-
--
|
|
79
|
-
--
|
|
80
|
-
--
|
|
81
|
-
--
|
|
82
|
-
--
|
|
83
|
-
--
|
|
84
|
-
--
|
|
85
|
-
--
|
|
76
|
+
--color-bg-filled-hover-default: var(--color-gray-900);
|
|
77
|
+
--color-bg-filled-hover-primary: var(--color-blue-700);
|
|
78
|
+
--color-bg-filled-hover-secondary: var(--color-gray-700);
|
|
79
|
+
--color-bg-filled-hover-tertiary: var(--color-gray-600);
|
|
80
|
+
--color-bg-filled-hover-accent: var(--color-rose-700);
|
|
81
|
+
--color-bg-filled-hover-success: var(--color-emerald-700);
|
|
82
|
+
--color-bg-filled-hover-danger: var(--color-red-700);
|
|
83
|
+
--color-bg-filled-hover-warning: var(--color-amber-700);
|
|
84
|
+
--color-bg-filled-hover-info: var(--color-cyan-700);
|
|
85
|
+
--color-bg-filled-hover-link: var(--color-blue-700);
|
|
86
86
|
|
|
87
87
|
/* Filled UI Active Background Colors */
|
|
88
|
-
--
|
|
89
|
-
--
|
|
90
|
-
--
|
|
91
|
-
--
|
|
92
|
-
--
|
|
93
|
-
--
|
|
94
|
-
--
|
|
95
|
-
--
|
|
96
|
-
--
|
|
97
|
-
--
|
|
88
|
+
--color-bg-filled-active-default: var(--color-gray-950);
|
|
89
|
+
--color-bg-filled-active-primary: var(--color-blue-800);
|
|
90
|
+
--color-bg-filled-active-secondary: var(--color-gray-800);
|
|
91
|
+
--color-bg-filled-active-tertiary: var(--color-gray-700);
|
|
92
|
+
--color-bg-filled-active-accent: var(--color-rose-800);
|
|
93
|
+
--color-bg-filled-active-success: var(--color-emerald-800);
|
|
94
|
+
--color-bg-filled-active-danger: var(--color-red-800);
|
|
95
|
+
--color-bg-filled-active-warning: var(--color-amber-800);
|
|
96
|
+
--color-bg-filled-active-info: var(--color-cyan-800);
|
|
97
|
+
--color-bg-filled-active-link: var(--color-blue-800);
|
|
98
98
|
|
|
99
99
|
/* Layout Background Colors */
|
|
100
|
-
--layout-
|
|
101
|
-
--layout-
|
|
102
|
-
--layout-
|
|
103
|
-
--layout-
|
|
104
|
-
--layout-
|
|
105
|
-
--layout-
|
|
106
|
-
--layout-
|
|
107
|
-
--layout-
|
|
108
|
-
--layout-
|
|
109
|
-
--layout-
|
|
110
|
-
--layout-
|
|
100
|
+
--color-bg-layout-default: var(--color-white);
|
|
101
|
+
--color-bg-layout-primary: var(--color-white);
|
|
102
|
+
--color-bg-layout-secondary: var(--color-gray-50);
|
|
103
|
+
--color-bg-layout-tertiary: var(--color-gray-100);
|
|
104
|
+
--color-bg-layout-accent: var(--color-indigo-50);
|
|
105
|
+
--color-bg-layout-success: var(--color-green-50);
|
|
106
|
+
--color-bg-layout-danger: var(--color-red-50);
|
|
107
|
+
--color-bg-layout-warning: var(--color-yellow-50);
|
|
108
|
+
--color-bg-layout-info: var(--color-blue-50);
|
|
109
|
+
--color-bg-layout-transparent: transparent;
|
|
110
|
+
--color-bg-layout-link: var(--color-blue-50);
|
|
111
111
|
|
|
112
112
|
/* Layout Filled Background Colors */
|
|
113
|
-
--
|
|
114
|
-
--
|
|
115
|
-
--
|
|
116
|
-
--
|
|
117
|
-
--
|
|
118
|
-
--
|
|
119
|
-
--
|
|
120
|
-
--
|
|
121
|
-
--
|
|
122
|
-
--
|
|
123
|
-
--
|
|
113
|
+
--color-bg-filled-layout-default: var(--color-gray-700);
|
|
114
|
+
--color-bg-filled-layout-primary: var(--color-blue-800);
|
|
115
|
+
--color-bg-filled-layout-secondary: var(--color-gray-800);
|
|
116
|
+
--color-bg-filled-layout-tertiary: var(--color-gray-900);
|
|
117
|
+
--color-bg-filled-layout-accent: var(--color-indigo-800);
|
|
118
|
+
--color-bg-filled-layout-success: var(--color-green-800);
|
|
119
|
+
--color-bg-filled-layout-danger: var(--color-red-800);
|
|
120
|
+
--color-bg-filled-layout-warning: var(--color-yellow-800);
|
|
121
|
+
--color-bg-filled-layout-info: var(--color-blue-800);
|
|
122
|
+
--color-bg-filled-layout-transparent: transparent;
|
|
123
|
+
--color-bg-filled-layout-link: var(--color-blue-800);
|
|
124
124
|
|
|
125
125
|
/* Border Colors */
|
|
126
|
-
--border-
|
|
127
|
-
--border-
|
|
128
|
-
--border-
|
|
129
|
-
--border-
|
|
130
|
-
--border-
|
|
131
|
-
--border-
|
|
132
|
-
--border-
|
|
133
|
-
--border-
|
|
134
|
-
--border-
|
|
135
|
-
--border-
|
|
126
|
+
--color-border-default: var(--color-gray-200);
|
|
127
|
+
--color-border-primary: var(--color-blue-200);
|
|
128
|
+
--color-border-secondary: var(--color-gray-200);
|
|
129
|
+
--color-border-tertiary: var(--color-gray-300);
|
|
130
|
+
--color-border-link: var(--color-blue-200);
|
|
131
|
+
--color-border-accent: var(--color-rose-200);
|
|
132
|
+
--color-border-success: var(--color-green-200);
|
|
133
|
+
--color-border-danger: var(--color-red-200);
|
|
134
|
+
--color-border-warning: var(--color-yellow-200);
|
|
135
|
+
--color-border-info: var(--color-blue-200);
|
|
136
136
|
|
|
137
137
|
/* Filled Button Border Colors */
|
|
138
|
-
--
|
|
139
|
-
--
|
|
140
|
-
--
|
|
141
|
-
--
|
|
142
|
-
--
|
|
143
|
-
--
|
|
144
|
-
--
|
|
145
|
-
--
|
|
146
|
-
--
|
|
147
|
-
--
|
|
138
|
+
--color-border-filled-default: var(--color-gray-900);
|
|
139
|
+
--color-border-filled-primary: var(--color-blue-900);
|
|
140
|
+
--color-border-filled-secondary: var(--color-gray-900);
|
|
141
|
+
--color-border-filled-tertiary: var(--color-gray-950);
|
|
142
|
+
--color-border-filled-accent: var(--color-rose-900);
|
|
143
|
+
--color-border-filled-success: var(--color-green-900);
|
|
144
|
+
--color-border-filled-danger: var(--color-red-900);
|
|
145
|
+
--color-border-filled-warning: var(--color-yellow-900);
|
|
146
|
+
--color-border-filled-info: var(--color-blue-900);
|
|
147
|
+
--color-border-filled-link: var(--color-blue-900);
|
|
148
148
|
|
|
149
149
|
/* UI Component Border Radius Sizes */
|
|
150
|
-
--ui-
|
|
151
|
-
--ui-
|
|
152
|
-
--ui-
|
|
153
|
-
--ui-
|
|
154
|
-
--ui-
|
|
150
|
+
--ui-br-xs: 0.125rem;
|
|
151
|
+
--ui-br-sm: 0.25rem;
|
|
152
|
+
--ui-br-md: 0.375rem;
|
|
153
|
+
--ui-br-lg: 0.5rem;
|
|
154
|
+
--ui-br-xl: 0.625rem;
|
|
155
155
|
|
|
156
156
|
/* Layout Component Border Radius Sizes */
|
|
157
|
-
--layout-
|
|
158
|
-
--layout-
|
|
159
|
-
--layout-
|
|
160
|
-
--layout-
|
|
161
|
-
--layout-
|
|
157
|
+
--layout-br-xs: 0.375rem;
|
|
158
|
+
--layout-br-sm: 0.5rem;
|
|
159
|
+
--layout-br-md: 0.625rem;
|
|
160
|
+
--layout-br-lg: 0.75rem;
|
|
161
|
+
--layout-br-xl: 0.875rem;
|
|
162
162
|
}
|
package/package.json
CHANGED