@vaneui/ui 0.3.1-alpha.20251222154252.88fa4ba → 0.3.1-alpha.20251223092345.7b8ce70

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 (19) hide show
  1. package/dist/components/themeContext.d.ts +2 -2
  2. package/dist/components/themeContext.d.ts.map +1 -1
  3. package/dist/components/ui/classes/appearanceClasses.d.ts.map +1 -1
  4. package/dist/components/ui/classes/typographyClasses.d.ts.map +1 -1
  5. package/dist/components/ui/props/appearanceProps.d.ts +0 -2
  6. package/dist/components/ui/props/appearanceProps.d.ts.map +1 -1
  7. package/dist/components/ui/props/keys.d.ts +1 -1
  8. package/dist/components/ui/theme/appearance/linkVariantTheme.d.ts +17 -0
  9. package/dist/components/ui/theme/appearance/linkVariantTheme.d.ts.map +1 -0
  10. package/dist/components/ui/theme/defaults.d.ts.map +1 -1
  11. package/dist/components/ui/theme/typographyTheme.d.ts +12 -1
  12. package/dist/components/ui/theme/typographyTheme.d.ts.map +1 -1
  13. package/dist/index.esm.js +29 -25
  14. package/dist/index.esm.js.map +1 -1
  15. package/dist/index.js +29 -25
  16. package/dist/index.js.map +1 -1
  17. package/dist/ui.css +69 -127
  18. package/dist/vars.css +57 -58
  19. package/package.json +1 -1
package/dist/ui.css CHANGED
@@ -51,6 +51,7 @@
51
51
  --color-indigo-700: oklch(45.7% 0.24 277.023);
52
52
  --color-violet-400: oklch(70.2% 0.183 293.541);
53
53
  --color-violet-600: oklch(54.1% 0.281 293.009);
54
+ --color-purple-100: oklch(94.6% 0.033 307.174);
54
55
  --color-purple-600: oklch(55.8% 0.288 302.321);
55
56
  --color-purple-700: oklch(49.6% 0.265 301.924);
56
57
  --color-pink-600: oklch(59.2% 0.249 0.584);
@@ -118,10 +119,14 @@
118
119
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
119
120
  --default-font-family: var(--font-sans);
120
121
  --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;
122
+ --lightness-hover-outline: 0.02;
123
+ --lightness-active-outline: 0.04;
124
+ --lightness-hover-filled: 0.03;
125
+ --lightness-active-filled: 0.06;
126
+ --chroma-boost-hover-outline: 3.2;
127
+ --chroma-boost-active-outline: 5.2;
128
+ --chroma-boost-hover-filled: 1.1;
129
+ --chroma-boost-active-filled: 1.15;
125
130
  --color-text-default: var(--color-gray-900);
126
131
  --color-text-primary: var(--color-blue-600);
127
132
  --color-text-secondary: var(--color-gray-600);
@@ -151,27 +156,24 @@
151
156
  --color-bg-danger: var(--color-red-50);
152
157
  --color-bg-warning: var(--color-amber-50);
153
158
  --color-bg-info: var(--color-cyan-50);
154
- --color-bg-link: var(--color-blue-50);
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);
159
+ --color-bg-hover-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
160
+ --color-bg-hover-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
161
+ --color-bg-hover-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
162
+ --color-bg-hover-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
163
+ --color-bg-hover-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
164
+ --color-bg-hover-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
165
+ --color-bg-hover-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
166
+ --color-bg-hover-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
167
+ --color-bg-hover-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
168
+ --color-bg-active-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
169
+ --color-bg-active-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
170
+ --color-bg-active-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
171
+ --color-bg-active-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
172
+ --color-bg-active-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
173
+ --color-bg-active-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
174
+ --color-bg-active-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
175
+ --color-bg-active-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
176
+ --color-bg-active-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
175
177
  --color-bg-filled-default: var(--color-gray-800);
176
178
  --color-bg-filled-primary: var(--color-blue-600);
177
179
  --color-bg-filled-secondary: var(--color-gray-600);
@@ -181,27 +183,24 @@
181
183
  --color-bg-filled-danger: var(--color-red-600);
182
184
  --color-bg-filled-warning: var(--color-amber-600);
183
185
  --color-bg-filled-info: var(--color-cyan-600);
184
- --color-bg-filled-link: var(--color-blue-600);
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);
186
+ --color-bg-filled-hover-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
187
+ --color-bg-filled-hover-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
188
+ --color-bg-filled-hover-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
189
+ --color-bg-filled-hover-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
190
+ --color-bg-filled-hover-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
191
+ --color-bg-filled-hover-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
192
+ --color-bg-filled-hover-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
193
+ --color-bg-filled-hover-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
194
+ --color-bg-filled-hover-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
195
+ --color-bg-filled-active-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
196
+ --color-bg-filled-active-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
197
+ --color-bg-filled-active-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
198
+ --color-bg-filled-active-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
199
+ --color-bg-filled-active-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
200
+ --color-bg-filled-active-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
201
+ --color-bg-filled-active-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
202
+ --color-bg-filled-active-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
203
+ --color-bg-filled-active-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
205
204
  --color-bg-layout-default: var(--color-white);
206
205
  --color-bg-layout-primary: var(--color-white);
207
206
  --color-bg-layout-secondary: var(--color-gray-50);
@@ -211,7 +210,6 @@
211
210
  --color-bg-layout-danger: var(--color-red-50);
212
211
  --color-bg-layout-warning: var(--color-yellow-50);
213
212
  --color-bg-layout-info: var(--color-blue-50);
214
- --color-bg-layout-link: var(--color-blue-50);
215
213
  --color-bg-filled-layout-default: var(--color-gray-700);
216
214
  --color-bg-filled-layout-primary: var(--color-blue-800);
217
215
  --color-bg-filled-layout-secondary: var(--color-gray-800);
@@ -221,12 +219,10 @@
221
219
  --color-bg-filled-layout-danger: var(--color-red-700);
222
220
  --color-bg-filled-layout-warning: var(--color-yellow-800);
223
221
  --color-bg-filled-layout-info: var(--color-blue-700);
224
- --color-bg-filled-layout-link: var(--color-blue-700);
225
222
  --color-border-default: var(--color-gray-200);
226
223
  --color-border-primary: var(--color-blue-200);
227
224
  --color-border-secondary: var(--color-gray-200);
228
225
  --color-border-tertiary: var(--color-gray-300);
229
- --color-border-link: var(--color-blue-200);
230
226
  --color-border-accent: var(--color-rose-200);
231
227
  --color-border-success: var(--color-green-200);
232
228
  --color-border-danger: var(--color-red-200);
@@ -241,7 +237,6 @@
241
237
  --color-border-filled-danger: var(--color-red-600);
242
238
  --color-border-filled-warning: var(--color-yellow-600);
243
239
  --color-border-filled-info: var(--color-blue-600);
244
- --color-border-filled-link: var(--color-blue-600);
245
240
  --layout-spacing: var(--spacing);
246
241
  --ui-spacing: var(--spacing);
247
242
  --br-base: var(--spacing);
@@ -475,6 +470,12 @@
475
470
  .mb-2 {
476
471
  margin-bottom: calc(var(--spacing) * 2);
477
472
  }
473
+ .mb-3 {
474
+ margin-bottom: calc(var(--spacing) * 3);
475
+ }
476
+ .mb-6 {
477
+ margin-bottom: calc(var(--spacing) * 6);
478
+ }
478
479
  .block {
479
480
  display: block;
480
481
  }
@@ -515,6 +516,9 @@
515
516
  width: var(--ui-size);
516
517
  height: var(--ui-size);
517
518
  }
519
+ .h-10 {
520
+ height: calc(var(--spacing) * 10);
521
+ }
518
522
  .h-\[calc\(var\(--lh\)\*var\(--fs\)\)\] {
519
523
  height: calc(var(--lh) * var(--fs));
520
524
  }
@@ -599,6 +603,9 @@
599
603
  .grid-cols-1 {
600
604
  grid-template-columns: repeat(1, minmax(0, 1fr));
601
605
  }
606
+ .grid-cols-6 {
607
+ grid-template-columns: repeat(6, minmax(0, 1fr));
608
+ }
602
609
  .flex-col {
603
610
  flex-direction: column;
604
611
  }
@@ -802,9 +809,6 @@
802
809
  .border-\(--color-border-filled-info\) {
803
810
  border-color: var(--color-border-filled-info);
804
811
  }
805
- .border-\(--color-border-filled-link\) {
806
- border-color: var(--color-border-filled-link);
807
- }
808
812
  .border-\(--color-border-filled-primary\) {
809
813
  border-color: var(--color-border-filled-primary);
810
814
  }
@@ -823,9 +827,6 @@
823
827
  .border-\(--color-border-info\) {
824
828
  border-color: var(--color-border-info);
825
829
  }
826
- .border-\(--color-border-link\) {
827
- border-color: var(--color-border-link);
828
- }
829
830
  .border-\(--color-border-primary\) {
830
831
  border-color: var(--color-border-primary);
831
832
  }
@@ -892,9 +893,6 @@
892
893
  .bg-\(--color-bg-filled-layout-info\) {
893
894
  background-color: var(--color-bg-filled-layout-info);
894
895
  }
895
- .bg-\(--color-bg-filled-layout-link\) {
896
- background-color: var(--color-bg-filled-layout-link);
897
- }
898
896
  .bg-\(--color-bg-filled-layout-primary\) {
899
897
  background-color: var(--color-bg-filled-layout-primary);
900
898
  }
@@ -910,9 +908,6 @@
910
908
  .bg-\(--color-bg-filled-layout-warning\) {
911
909
  background-color: var(--color-bg-filled-layout-warning);
912
910
  }
913
- .bg-\(--color-bg-filled-link\) {
914
- background-color: var(--color-bg-filled-link);
915
- }
916
911
  .bg-\(--color-bg-filled-primary\) {
917
912
  background-color: var(--color-bg-filled-primary);
918
913
  }
@@ -943,9 +938,6 @@
943
938
  .bg-\(--color-bg-layout-info\) {
944
939
  background-color: var(--color-bg-layout-info);
945
940
  }
946
- .bg-\(--color-bg-layout-link\) {
947
- background-color: var(--color-bg-layout-link);
948
- }
949
941
  .bg-\(--color-bg-layout-primary\) {
950
942
  background-color: var(--color-bg-layout-primary);
951
943
  }
@@ -961,9 +953,6 @@
961
953
  .bg-\(--color-bg-layout-warning\) {
962
954
  background-color: var(--color-bg-layout-warning);
963
955
  }
964
- .bg-\(--color-bg-link\) {
965
- background-color: var(--color-bg-link);
966
- }
967
956
  .bg-\(--color-bg-primary\) {
968
957
  background-color: var(--color-bg-primary);
969
958
  }
@@ -991,9 +980,6 @@
991
980
  .bg-\(--color-border-info\) {
992
981
  background-color: var(--color-border-info);
993
982
  }
994
- .bg-\(--color-border-link\) {
995
- background-color: var(--color-border-link);
996
- }
997
983
  .bg-\(--color-border-primary\) {
998
984
  background-color: var(--color-border-primary);
999
985
  }
@@ -1294,6 +1280,12 @@
1294
1280
  .text-blue-500 {
1295
1281
  color: var(--color-blue-500);
1296
1282
  }
1283
+ .text-gray-500 {
1284
+ color: var(--color-gray-500);
1285
+ }
1286
+ .text-gray-700 {
1287
+ color: var(--color-gray-700);
1288
+ }
1297
1289
  .text-green-500 {
1298
1290
  color: var(--color-green-500);
1299
1291
  }
@@ -1303,6 +1295,12 @@
1303
1295
  .text-pink-600 {
1304
1296
  color: var(--color-pink-600);
1305
1297
  }
1298
+ .text-purple-100 {
1299
+ color: var(--color-purple-100);
1300
+ }
1301
+ .text-purple-600 {
1302
+ color: var(--color-purple-600);
1303
+ }
1306
1304
  .text-red-500 {
1307
1305
  color: var(--color-red-500);
1308
1306
  }
@@ -1369,9 +1367,6 @@
1369
1367
  .accent-\(--color-bg-filled-info\) {
1370
1368
  accent-color: var(--color-bg-filled-info);
1371
1369
  }
1372
- .accent-\(--color-bg-filled-link\) {
1373
- accent-color: var(--color-bg-filled-link);
1374
- }
1375
1370
  .accent-\(--color-bg-filled-primary\) {
1376
1371
  accent-color: var(--color-bg-filled-primary);
1377
1372
  }
@@ -1390,9 +1385,6 @@
1390
1385
  .accent-\(--color-bg-info\) {
1391
1386
  accent-color: var(--color-bg-info);
1392
1387
  }
1393
- .accent-\(--color-bg-link\) {
1394
- accent-color: var(--color-bg-link);
1395
- }
1396
1388
  .accent-\(--color-bg-primary\) {
1397
1389
  accent-color: var(--color-bg-primary);
1398
1390
  }
@@ -1486,9 +1478,6 @@
1486
1478
  .ring-\(--color-border-filled-info\) {
1487
1479
  --tw-ring-color: var(--color-border-filled-info);
1488
1480
  }
1489
- .ring-\(--color-border-filled-link\) {
1490
- --tw-ring-color: var(--color-border-filled-link);
1491
- }
1492
1481
  .ring-\(--color-border-filled-primary\) {
1493
1482
  --tw-ring-color: var(--color-border-filled-primary);
1494
1483
  }
@@ -1507,9 +1496,6 @@
1507
1496
  .ring-\(--color-border-info\) {
1508
1497
  --tw-ring-color: var(--color-border-info);
1509
1498
  }
1510
- .ring-\(--color-border-link\) {
1511
- --tw-ring-color: var(--color-border-link);
1512
- }
1513
1499
  .ring-\(--color-border-primary\) {
1514
1500
  --tw-ring-color: var(--color-border-primary);
1515
1501
  }
@@ -1816,11 +1802,6 @@
1816
1802
  background-color: var(--color-bg-filled-info);
1817
1803
  }
1818
1804
  }
1819
- .checked\:bg-\(--color-bg-filled-link\) {
1820
- &:checked {
1821
- background-color: var(--color-bg-filled-link);
1822
- }
1823
- }
1824
1805
  .checked\:bg-\(--color-bg-filled-primary\) {
1825
1806
  &:checked {
1826
1807
  background-color: var(--color-bg-filled-primary);
@@ -1851,11 +1832,6 @@
1851
1832
  background-color: var(--color-bg-info);
1852
1833
  }
1853
1834
  }
1854
- .checked\:bg-\(--color-bg-link\) {
1855
- &:checked {
1856
- background-color: var(--color-bg-link);
1857
- }
1858
- }
1859
1835
  .checked\:bg-\(--color-bg-primary\) {
1860
1836
  &:checked {
1861
1837
  background-color: var(--color-bg-primary);
@@ -1931,13 +1907,6 @@
1931
1907
  }
1932
1908
  }
1933
1909
  }
1934
- .hover\:bg-\(--color-bg-filled-hover-link\) {
1935
- &:hover {
1936
- @media (hover: hover) {
1937
- background-color: var(--color-bg-filled-hover-link);
1938
- }
1939
- }
1940
- }
1941
1910
  .hover\:bg-\(--color-bg-filled-hover-primary\) {
1942
1911
  &:hover {
1943
1912
  @media (hover: hover) {
@@ -2001,13 +1970,6 @@
2001
1970
  }
2002
1971
  }
2003
1972
  }
2004
- .hover\:bg-\(--color-bg-hover-link\) {
2005
- &:hover {
2006
- @media (hover: hover) {
2007
- background-color: var(--color-bg-hover-link);
2008
- }
2009
- }
2010
- }
2011
1973
  .hover\:bg-\(--color-bg-hover-primary\) {
2012
1974
  &:hover {
2013
1975
  @media (hover: hover) {
@@ -2193,11 +2155,6 @@
2193
2155
  outline-color: var(--color-border-filled-info);
2194
2156
  }
2195
2157
  }
2196
- .focus-visible\:outline-\(--color-border-filled-link\) {
2197
- &:focus-visible {
2198
- outline-color: var(--color-border-filled-link);
2199
- }
2200
- }
2201
2158
  .focus-visible\:outline-\(--color-border-filled-primary\) {
2202
2159
  &:focus-visible {
2203
2160
  outline-color: var(--color-border-filled-primary);
@@ -2228,11 +2185,6 @@
2228
2185
  outline-color: var(--color-border-info);
2229
2186
  }
2230
2187
  }
2231
- .focus-visible\:outline-\(--color-border-link\) {
2232
- &:focus-visible {
2233
- outline-color: var(--color-border-link);
2234
- }
2235
- }
2236
2188
  .focus-visible\:outline-\(--color-border-primary\) {
2237
2189
  &:focus-visible {
2238
2190
  outline-color: var(--color-border-primary);
@@ -2288,11 +2240,6 @@
2288
2240
  background-color: var(--color-bg-active-info);
2289
2241
  }
2290
2242
  }
2291
- .active\:bg-\(--color-bg-active-link\) {
2292
- &:active {
2293
- background-color: var(--color-bg-active-link);
2294
- }
2295
- }
2296
2243
  .active\:bg-\(--color-bg-active-primary\) {
2297
2244
  &:active {
2298
2245
  background-color: var(--color-bg-active-primary);
@@ -2338,11 +2285,6 @@
2338
2285
  background-color: var(--color-bg-filled-active-info);
2339
2286
  }
2340
2287
  }
2341
- .active\:bg-\(--color-bg-filled-active-link\) {
2342
- &:active {
2343
- background-color: var(--color-bg-filled-active-link);
2344
- }
2345
- }
2346
2288
  .active\:bg-\(--color-bg-filled-active-primary\) {
2347
2289
  &:active {
2348
2290
  background-color: var(--color-bg-filled-active-primary);
package/dist/vars.css CHANGED
@@ -2,12 +2,21 @@
2
2
  /* Lightness Adjustment Variables for Hover/Active States */
3
3
  /* These control how much darker elements become on interaction */
4
4
  /* Outline/Default variants (light backgrounds - darken on interaction) */
5
- --lightness-hover-outline: 0.05;
6
- --lightness-active-outline: 0.10;
5
+ --lightness-hover-outline: 0.02;
6
+ --lightness-active-outline: 0.04;
7
7
 
8
8
  /* Filled variants (dark backgrounds - darken on interaction) */
9
- --lightness-hover-filled: 0.05;
10
- --lightness-active-filled: 0.10;
9
+ --lightness-hover-filled: 0.03;
10
+ --lightness-active-filled: 0.06;
11
+
12
+ /* Chroma Boost Variables - increase saturation to maintain vibrancy when darkening */
13
+ /* Outline/Default variants */
14
+ --chroma-boost-hover-outline: 3.2;
15
+ --chroma-boost-active-outline: 5.2;
16
+
17
+ /* Filled variants */
18
+ --chroma-boost-hover-filled: 1.1;
19
+ --chroma-boost-active-filled: 1.15;
11
20
 
12
21
  /* Text Colors */
13
22
  --color-text-default: var(--color-gray-900);
@@ -44,31 +53,28 @@
44
53
  --color-bg-danger: var(--color-red-50);
45
54
  --color-bg-warning: var(--color-amber-50);
46
55
  --color-bg-info: var(--color-cyan-50);
47
- --color-bg-link: var(--color-blue-50);
48
-
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);
56
+
57
+ /* UI Background Hover Colors - Calculated from base using oklch with chroma boost */
58
+ --color-bg-hover-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
59
+ --color-bg-hover-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
60
+ --color-bg-hover-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
61
+ --color-bg-hover-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
62
+ --color-bg-hover-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
63
+ --color-bg-hover-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
64
+ --color-bg-hover-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
65
+ --color-bg-hover-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
66
+ --color-bg-hover-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
67
+
68
+ /* UI Background Active Colors - Calculated from base using oklch with chroma boost */
69
+ --color-bg-active-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
70
+ --color-bg-active-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
71
+ --color-bg-active-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
72
+ --color-bg-active-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
73
+ --color-bg-active-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
74
+ --color-bg-active-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
75
+ --color-bg-active-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
76
+ --color-bg-active-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
77
+ --color-bg-active-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
72
78
 
73
79
  /* Filled UI Background Colors */
74
80
  --color-bg-filled-default: var(--color-gray-800);
@@ -80,31 +86,28 @@
80
86
  --color-bg-filled-danger: var(--color-red-600);
81
87
  --color-bg-filled-warning: var(--color-amber-600);
82
88
  --color-bg-filled-info: var(--color-cyan-600);
83
- --color-bg-filled-link: var(--color-blue-600);
84
-
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);
89
+
90
+ /* Filled UI Hover Background Colors - Calculated from base using oklch with chroma boost */
91
+ --color-bg-filled-hover-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
92
+ --color-bg-filled-hover-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
93
+ --color-bg-filled-hover-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
94
+ --color-bg-filled-hover-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
95
+ --color-bg-filled-hover-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
96
+ --color-bg-filled-hover-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
97
+ --color-bg-filled-hover-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
98
+ --color-bg-filled-hover-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
99
+ --color-bg-filled-hover-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
100
+
101
+ /* Filled UI Active Background Colors - Calculated from base using oklch with chroma boost */
102
+ --color-bg-filled-active-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
103
+ --color-bg-filled-active-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
104
+ --color-bg-filled-active-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
105
+ --color-bg-filled-active-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
106
+ --color-bg-filled-active-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
107
+ --color-bg-filled-active-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
108
+ --color-bg-filled-active-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
109
+ --color-bg-filled-active-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
110
+ --color-bg-filled-active-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
108
111
 
109
112
  /* Layout Background Colors */
110
113
  --color-bg-layout-default: var(--color-white);
@@ -117,7 +120,6 @@
117
120
  --color-bg-layout-warning: var(--color-yellow-50);
118
121
  --color-bg-layout-info: var(--color-blue-50);
119
122
  --color-bg-layout-transparent: transparent;
120
- --color-bg-layout-link: var(--color-blue-50);
121
123
 
122
124
  /* Layout Filled Background Colors */
123
125
  --color-bg-filled-layout-default: var(--color-gray-700);
@@ -130,14 +132,12 @@
130
132
  --color-bg-filled-layout-warning: var(--color-yellow-800);
131
133
  --color-bg-filled-layout-info: var(--color-blue-700);
132
134
  --color-bg-filled-layout-transparent: transparent;
133
- --color-bg-filled-layout-link: var(--color-blue-700);
134
135
 
135
136
  /* Border Colors */
136
137
  --color-border-default: var(--color-gray-200);
137
138
  --color-border-primary: var(--color-blue-200);
138
139
  --color-border-secondary: var(--color-gray-200);
139
140
  --color-border-tertiary: var(--color-gray-300);
140
- --color-border-link: var(--color-blue-200);
141
141
  --color-border-accent: var(--color-rose-200);
142
142
  --color-border-success: var(--color-green-200);
143
143
  --color-border-danger: var(--color-red-200);
@@ -154,7 +154,6 @@
154
154
  --color-border-filled-danger: var(--color-red-600);
155
155
  --color-border-filled-warning: var(--color-yellow-600);
156
156
  --color-border-filled-info: var(--color-blue-600);
157
- --color-border-filled-link: var(--color-blue-600);
158
157
 
159
158
  --layout-spacing: var(--spacing);
160
159
  --ui-spacing: var(--spacing);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.3.1-alpha.20251222154252.88fa4ba",
3
+ "version": "0.3.1-alpha.20251223092345.7b8ce70",
4
4
  "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
5
5
  "author": "",
6
6
  "license": "ISC",