@vaneui/ui 0.3.1-alpha.20251215181324.24aaf05 → 0.3.1-alpha.20251222154252.88fa4ba

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 (3) hide show
  1. package/dist/ui.css +44 -52
  2. package/dist/vars.css +57 -47
  3. package/package.json +1 -1
package/dist/ui.css CHANGED
@@ -15,14 +15,10 @@
15
15
  --color-red-500: oklch(63.7% 0.237 25.331);
16
16
  --color-red-600: oklch(57.7% 0.245 27.325);
17
17
  --color-red-700: oklch(50.5% 0.213 27.518);
18
- --color-red-800: oklch(44.4% 0.177 26.899);
19
18
  --color-orange-500: oklch(70.5% 0.213 47.604);
20
19
  --color-amber-50: oklch(98.7% 0.022 95.277);
21
20
  --color-amber-100: oklch(96.2% 0.059 95.617);
22
- --color-amber-200: oklch(92.4% 0.12 95.746);
23
21
  --color-amber-600: oklch(66.6% 0.179 58.318);
24
- --color-amber-700: oklch(55.5% 0.163 48.998);
25
- --color-amber-800: oklch(47.3% 0.137 46.201);
26
22
  --color-yellow-50: oklch(98.7% 0.026 102.212);
27
23
  --color-yellow-100: oklch(97.3% 0.071 103.193);
28
24
  --color-yellow-200: oklch(94.5% 0.129 101.54);
@@ -35,17 +31,11 @@
35
31
  --color-green-700: oklch(52.7% 0.154 150.069);
36
32
  --color-emerald-50: oklch(97.9% 0.021 166.113);
37
33
  --color-emerald-100: oklch(95% 0.052 163.051);
38
- --color-emerald-200: oklch(90.5% 0.093 164.15);
39
34
  --color-emerald-500: oklch(69.6% 0.17 162.48);
40
35
  --color-emerald-600: oklch(59.6% 0.145 163.225);
41
- --color-emerald-700: oklch(50.8% 0.118 165.612);
42
- --color-emerald-800: oklch(43.2% 0.095 166.913);
43
36
  --color-cyan-50: oklch(98.4% 0.019 200.873);
44
37
  --color-cyan-100: oklch(95.6% 0.045 203.388);
45
- --color-cyan-200: oklch(91.7% 0.08 205.041);
46
38
  --color-cyan-600: oklch(60.9% 0.126 221.723);
47
- --color-cyan-700: oklch(52% 0.105 223.128);
48
- --color-cyan-800: oklch(45% 0.085 224.283);
49
39
  --color-blue-50: oklch(97% 0.014 254.604);
50
40
  --color-blue-100: oklch(93.2% 0.032 255.585);
51
41
  --color-blue-200: oklch(88.2% 0.059 254.128);
@@ -69,7 +59,6 @@
69
59
  --color-rose-200: oklch(89.2% 0.058 10.001);
70
60
  --color-rose-600: oklch(58.6% 0.253 17.585);
71
61
  --color-rose-700: oklch(51.4% 0.222 16.935);
72
- --color-rose-800: oklch(45.5% 0.188 13.697);
73
62
  --color-gray-50: oklch(98.5% 0.002 247.839);
74
63
  --color-gray-100: oklch(96.7% 0.003 264.542);
75
64
  --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -79,7 +68,6 @@
79
68
  --color-gray-700: oklch(37.3% 0.034 259.733);
80
69
  --color-gray-800: oklch(27.8% 0.033 256.848);
81
70
  --color-gray-900: oklch(21% 0.034 264.665);
82
- --color-gray-950: oklch(13% 0.028 261.692);
83
71
  --color-white: #fff;
84
72
  --spacing: 0.25rem;
85
73
  --container-sm: 24rem;
@@ -130,6 +118,10 @@
130
118
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
131
119
  --default-font-family: var(--font-sans);
132
120
  --default-mono-font-family: var(--font-mono);
121
+ --lightness-hover-outline: 0.05;
122
+ --lightness-active-outline: 0.10;
123
+ --lightness-hover-filled: 0.05;
124
+ --lightness-active-filled: 0.10;
133
125
  --color-text-default: var(--color-gray-900);
134
126
  --color-text-primary: var(--color-blue-600);
135
127
  --color-text-secondary: var(--color-gray-600);
@@ -160,26 +152,26 @@
160
152
  --color-bg-warning: var(--color-amber-50);
161
153
  --color-bg-info: var(--color-cyan-50);
162
154
  --color-bg-link: var(--color-blue-50);
163
- --color-bg-hover-default: var(--color-gray-50);
164
- --color-bg-hover-primary: var(--color-blue-100);
165
- --color-bg-hover-secondary: var(--color-gray-100);
166
- --color-bg-hover-tertiary: var(--color-gray-200);
167
- --color-bg-hover-accent: var(--color-rose-100);
168
- --color-bg-hover-success: var(--color-emerald-100);
169
- --color-bg-hover-danger: var(--color-red-100);
170
- --color-bg-hover-warning: var(--color-amber-100);
171
- --color-bg-hover-info: var(--color-cyan-100);
172
- --color-bg-hover-link: var(--color-blue-100);
173
- --color-bg-active-default: var(--color-gray-100);
174
- --color-bg-active-primary: var(--color-blue-200);
175
- --color-bg-active-secondary: var(--color-gray-200);
176
- --color-bg-active-tertiary: var(--color-gray-300);
177
- --color-bg-active-accent: var(--color-rose-200);
178
- --color-bg-active-success: var(--color-emerald-200);
179
- --color-bg-active-danger: var(--color-red-200);
180
- --color-bg-active-warning: var(--color-amber-200);
181
- --color-bg-active-info: var(--color-cyan-200);
182
- --color-bg-active-link: var(--color-blue-200);
155
+ --color-bg-hover-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-hover-outline)) c h);
156
+ --color-bg-hover-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-hover-outline)) c h);
157
+ --color-bg-hover-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-hover-outline)) c h);
158
+ --color-bg-hover-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-hover-outline)) c h);
159
+ --color-bg-hover-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-hover-outline)) c h);
160
+ --color-bg-hover-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-hover-outline)) c h);
161
+ --color-bg-hover-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-hover-outline)) c h);
162
+ --color-bg-hover-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-hover-outline)) c h);
163
+ --color-bg-hover-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-hover-outline)) c h);
164
+ --color-bg-hover-link: oklch(from var(--color-bg-link) calc(l - var(--lightness-hover-outline)) c h);
165
+ --color-bg-active-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-active-outline)) c h);
166
+ --color-bg-active-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-active-outline)) c h);
167
+ --color-bg-active-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-active-outline)) c h);
168
+ --color-bg-active-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-active-outline)) c h);
169
+ --color-bg-active-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-active-outline)) c h);
170
+ --color-bg-active-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-active-outline)) c h);
171
+ --color-bg-active-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-active-outline)) c h);
172
+ --color-bg-active-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-active-outline)) c h);
173
+ --color-bg-active-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-active-outline)) c h);
174
+ --color-bg-active-link: oklch(from var(--color-bg-link) calc(l - var(--lightness-active-outline)) c h);
183
175
  --color-bg-filled-default: var(--color-gray-800);
184
176
  --color-bg-filled-primary: var(--color-blue-600);
185
177
  --color-bg-filled-secondary: var(--color-gray-600);
@@ -190,26 +182,26 @@
190
182
  --color-bg-filled-warning: var(--color-amber-600);
191
183
  --color-bg-filled-info: var(--color-cyan-600);
192
184
  --color-bg-filled-link: var(--color-blue-600);
193
- --color-bg-filled-hover-default: var(--color-gray-900);
194
- --color-bg-filled-hover-primary: var(--color-blue-700);
195
- --color-bg-filled-hover-secondary: var(--color-gray-700);
196
- --color-bg-filled-hover-tertiary: var(--color-gray-600);
197
- --color-bg-filled-hover-accent: var(--color-rose-700);
198
- --color-bg-filled-hover-success: var(--color-emerald-700);
199
- --color-bg-filled-hover-danger: var(--color-red-700);
200
- --color-bg-filled-hover-warning: var(--color-amber-700);
201
- --color-bg-filled-hover-info: var(--color-cyan-700);
202
- --color-bg-filled-hover-link: var(--color-blue-700);
203
- --color-bg-filled-active-default: var(--color-gray-950);
204
- --color-bg-filled-active-primary: var(--color-blue-800);
205
- --color-bg-filled-active-secondary: var(--color-gray-800);
206
- --color-bg-filled-active-tertiary: var(--color-gray-700);
207
- --color-bg-filled-active-accent: var(--color-rose-800);
208
- --color-bg-filled-active-success: var(--color-emerald-800);
209
- --color-bg-filled-active-danger: var(--color-red-800);
210
- --color-bg-filled-active-warning: var(--color-amber-800);
211
- --color-bg-filled-active-info: var(--color-cyan-800);
212
- --color-bg-filled-active-link: var(--color-blue-800);
185
+ --color-bg-filled-hover-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-hover-filled)) c h);
186
+ --color-bg-filled-hover-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-hover-filled)) c h);
187
+ --color-bg-filled-hover-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-hover-filled)) c h);
188
+ --color-bg-filled-hover-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-hover-filled)) c h);
189
+ --color-bg-filled-hover-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-hover-filled)) c h);
190
+ --color-bg-filled-hover-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-hover-filled)) c h);
191
+ --color-bg-filled-hover-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-hover-filled)) c h);
192
+ --color-bg-filled-hover-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-hover-filled)) c h);
193
+ --color-bg-filled-hover-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-hover-filled)) c h);
194
+ --color-bg-filled-hover-link: oklch(from var(--color-bg-filled-link) calc(l - var(--lightness-hover-filled)) c h);
195
+ --color-bg-filled-active-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-active-filled)) c h);
196
+ --color-bg-filled-active-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-active-filled)) c h);
197
+ --color-bg-filled-active-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-active-filled)) c h);
198
+ --color-bg-filled-active-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-active-filled)) c h);
199
+ --color-bg-filled-active-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-active-filled)) c h);
200
+ --color-bg-filled-active-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-active-filled)) c h);
201
+ --color-bg-filled-active-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-active-filled)) c h);
202
+ --color-bg-filled-active-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-active-filled)) c h);
203
+ --color-bg-filled-active-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-active-filled)) c h);
204
+ --color-bg-filled-active-link: oklch(from var(--color-bg-filled-link) calc(l - var(--lightness-active-filled)) c h);
213
205
  --color-bg-layout-default: var(--color-white);
214
206
  --color-bg-layout-primary: var(--color-white);
215
207
  --color-bg-layout-secondary: var(--color-gray-50);
package/dist/vars.css CHANGED
@@ -1,4 +1,14 @@
1
1
  @theme {
2
+ /* Lightness Adjustment Variables for Hover/Active States */
3
+ /* These control how much darker elements become on interaction */
4
+ /* Outline/Default variants (light backgrounds - darken on interaction) */
5
+ --lightness-hover-outline: 0.05;
6
+ --lightness-active-outline: 0.10;
7
+
8
+ /* Filled variants (dark backgrounds - darken on interaction) */
9
+ --lightness-hover-filled: 0.05;
10
+ --lightness-active-filled: 0.10;
11
+
2
12
  /* Text Colors */
3
13
  --color-text-default: var(--color-gray-900);
4
14
  --color-text-primary: var(--color-blue-600);
@@ -36,29 +46,29 @@
36
46
  --color-bg-info: var(--color-cyan-50);
37
47
  --color-bg-link: var(--color-blue-50);
38
48
 
39
- /* UI Background Hover Colors */
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
-
51
- /* UI Background Active Colors */
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);
49
+ /* UI Background Hover Colors - Calculated from base using oklch */
50
+ --color-bg-hover-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-hover-outline)) c h);
51
+ --color-bg-hover-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-hover-outline)) c h);
52
+ --color-bg-hover-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-hover-outline)) c h);
53
+ --color-bg-hover-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-hover-outline)) c h);
54
+ --color-bg-hover-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-hover-outline)) c h);
55
+ --color-bg-hover-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-hover-outline)) c h);
56
+ --color-bg-hover-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-hover-outline)) c h);
57
+ --color-bg-hover-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-hover-outline)) c h);
58
+ --color-bg-hover-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-hover-outline)) c h);
59
+ --color-bg-hover-link: oklch(from var(--color-bg-link) calc(l - var(--lightness-hover-outline)) c h);
60
+
61
+ /* UI Background Active Colors - Calculated from base using oklch */
62
+ --color-bg-active-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-active-outline)) c h);
63
+ --color-bg-active-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-active-outline)) c h);
64
+ --color-bg-active-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-active-outline)) c h);
65
+ --color-bg-active-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-active-outline)) c h);
66
+ --color-bg-active-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-active-outline)) c h);
67
+ --color-bg-active-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-active-outline)) c h);
68
+ --color-bg-active-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-active-outline)) c h);
69
+ --color-bg-active-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-active-outline)) c h);
70
+ --color-bg-active-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-active-outline)) c h);
71
+ --color-bg-active-link: oklch(from var(--color-bg-link) calc(l - var(--lightness-active-outline)) c h);
62
72
 
63
73
  /* Filled UI Background Colors */
64
74
  --color-bg-filled-default: var(--color-gray-800);
@@ -72,29 +82,29 @@
72
82
  --color-bg-filled-info: var(--color-cyan-600);
73
83
  --color-bg-filled-link: var(--color-blue-600);
74
84
 
75
- /* Filled UI Hover Background Colors */
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
-
87
- /* Filled UI Active Background Colors */
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);
85
+ /* Filled UI Hover Background Colors - Calculated from base using oklch */
86
+ --color-bg-filled-hover-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-hover-filled)) c h);
87
+ --color-bg-filled-hover-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-hover-filled)) c h);
88
+ --color-bg-filled-hover-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-hover-filled)) c h);
89
+ --color-bg-filled-hover-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-hover-filled)) c h);
90
+ --color-bg-filled-hover-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-hover-filled)) c h);
91
+ --color-bg-filled-hover-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-hover-filled)) c h);
92
+ --color-bg-filled-hover-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-hover-filled)) c h);
93
+ --color-bg-filled-hover-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-hover-filled)) c h);
94
+ --color-bg-filled-hover-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-hover-filled)) c h);
95
+ --color-bg-filled-hover-link: oklch(from var(--color-bg-filled-link) calc(l - var(--lightness-hover-filled)) c h);
96
+
97
+ /* Filled UI Active Background Colors - Calculated from base using oklch */
98
+ --color-bg-filled-active-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-active-filled)) c h);
99
+ --color-bg-filled-active-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-active-filled)) c h);
100
+ --color-bg-filled-active-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-active-filled)) c h);
101
+ --color-bg-filled-active-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-active-filled)) c h);
102
+ --color-bg-filled-active-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-active-filled)) c h);
103
+ --color-bg-filled-active-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-active-filled)) c h);
104
+ --color-bg-filled-active-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-active-filled)) c h);
105
+ --color-bg-filled-active-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-active-filled)) c h);
106
+ --color-bg-filled-active-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-active-filled)) c h);
107
+ --color-bg-filled-active-link: oklch(from var(--color-bg-filled-link) calc(l - var(--lightness-active-filled)) c h);
98
108
 
99
109
  /* Layout Background Colors */
100
110
  --color-bg-layout-default: var(--color-white);
@@ -182,4 +192,4 @@
182
192
 
183
193
  --fs: calc(var(--fs-unit) * var(--fs-base));
184
194
  }
185
- }
195
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.3.1-alpha.20251215181324.24aaf05",
3
+ "version": "0.3.1-alpha.20251222154252.88fa4ba",
4
4
  "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
5
5
  "author": "",
6
6
  "license": "ISC",