@vaneui/ui 0.3.1-alpha.20250914210126.5142197 → 0.3.1-alpha.20250916140129.7475230

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 (13) hide show
  1. package/dist/components/ui/classes/gapClasses.d.ts +3 -0
  2. package/dist/components/ui/classes/gapClasses.d.ts.map +1 -0
  3. package/dist/components/ui/theme/containerTheme.d.ts.map +1 -1
  4. package/dist/components/ui/theme/gridTheme.d.ts.map +1 -1
  5. package/dist/components/ui/theme/size/gapTheme.d.ts +5 -5
  6. package/dist/components/ui/theme/size/gapTheme.d.ts.map +1 -1
  7. package/dist/index.esm.js +20 -24
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +20 -24
  10. package/dist/index.js.map +1 -1
  11. package/dist/ui.css +57 -74
  12. package/dist/vars.css +35 -25
  13. package/package.json +1 -1
package/dist/ui.css CHANGED
@@ -16,7 +16,6 @@
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
18
  --color-red-800: oklch(44.4% 0.177 26.899);
19
- --color-red-900: oklch(39.6% 0.141 25.723);
20
19
  --color-orange-500: oklch(70.5% 0.213 47.604);
21
20
  --color-amber-50: oklch(98.7% 0.022 95.277);
22
21
  --color-amber-100: oklch(96.2% 0.059 95.617);
@@ -27,15 +26,13 @@
27
26
  --color-yellow-50: oklch(98.7% 0.026 102.212);
28
27
  --color-yellow-100: oklch(97.3% 0.071 103.193);
29
28
  --color-yellow-200: oklch(94.5% 0.129 101.54);
29
+ --color-yellow-600: oklch(68.1% 0.162 75.834);
30
30
  --color-yellow-800: oklch(47.6% 0.114 61.907);
31
- --color-yellow-900: oklch(42.1% 0.095 57.708);
32
31
  --color-green-50: oklch(98.2% 0.018 155.826);
33
32
  --color-green-200: oklch(92.5% 0.084 155.995);
34
33
  --color-green-500: oklch(72.3% 0.219 149.579);
35
34
  --color-green-600: oklch(62.7% 0.194 149.214);
36
35
  --color-green-700: oklch(52.7% 0.154 150.069);
37
- --color-green-800: oklch(44.8% 0.119 151.328);
38
- --color-green-900: oklch(39.3% 0.095 152.535);
39
36
  --color-emerald-50: oklch(97.9% 0.021 166.113);
40
37
  --color-emerald-100: oklch(95% 0.052 163.051);
41
38
  --color-emerald-200: oklch(90.5% 0.093 164.15);
@@ -62,7 +59,7 @@
62
59
  --color-indigo-100: oklch(93% 0.034 272.788);
63
60
  --color-indigo-400: oklch(67.3% 0.182 276.935);
64
61
  --color-indigo-500: oklch(58.5% 0.233 277.117);
65
- --color-indigo-800: oklch(39.8% 0.195 277.366);
62
+ --color-indigo-700: oklch(45.7% 0.24 277.023);
66
63
  --color-violet-400: oklch(70.2% 0.183 293.541);
67
64
  --color-violet-600: oklch(54.1% 0.281 293.009);
68
65
  --color-purple-600: oklch(55.8% 0.288 302.321);
@@ -74,7 +71,6 @@
74
71
  --color-rose-600: oklch(58.6% 0.253 17.585);
75
72
  --color-rose-700: oklch(51.4% 0.222 16.935);
76
73
  --color-rose-800: oklch(45.5% 0.188 13.697);
77
- --color-rose-900: oklch(41% 0.159 10.272);
78
74
  --color-gray-50: oklch(98.5% 0.002 247.839);
79
75
  --color-gray-100: oklch(96.7% 0.003 264.542);
80
76
  --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -87,6 +83,7 @@
87
83
  --color-gray-950: oklch(13% 0.028 261.692);
88
84
  --color-white: #fff;
89
85
  --spacing: 0.25rem;
86
+ --container-md: 28rem;
90
87
  --container-3xl: 48rem;
91
88
  --container-4xl: 56rem;
92
89
  --container-5xl: 64rem;
@@ -226,12 +223,12 @@
226
223
  --color-bg-filled-layout-primary: var(--color-blue-800);
227
224
  --color-bg-filled-layout-secondary: var(--color-gray-800);
228
225
  --color-bg-filled-layout-tertiary: var(--color-gray-900);
229
- --color-bg-filled-layout-accent: var(--color-indigo-800);
230
- --color-bg-filled-layout-success: var(--color-green-800);
231
- --color-bg-filled-layout-danger: var(--color-red-800);
226
+ --color-bg-filled-layout-accent: var(--color-indigo-700);
227
+ --color-bg-filled-layout-success: var(--color-green-700);
228
+ --color-bg-filled-layout-danger: var(--color-red-700);
232
229
  --color-bg-filled-layout-warning: var(--color-yellow-800);
233
- --color-bg-filled-layout-info: var(--color-blue-800);
234
- --color-bg-filled-layout-link: var(--color-blue-800);
230
+ --color-bg-filled-layout-info: var(--color-blue-700);
231
+ --color-bg-filled-layout-link: var(--color-blue-700);
235
232
  --color-border-default: var(--color-gray-200);
236
233
  --color-border-primary: var(--color-blue-200);
237
234
  --color-border-secondary: var(--color-gray-200);
@@ -242,26 +239,34 @@
242
239
  --color-border-danger: var(--color-red-200);
243
240
  --color-border-warning: var(--color-yellow-200);
244
241
  --color-border-info: var(--color-blue-200);
245
- --color-border-filled-default: var(--color-gray-900);
246
- --color-border-filled-primary: var(--color-blue-900);
247
- --color-border-filled-secondary: var(--color-gray-900);
248
- --color-border-filled-tertiary: var(--color-gray-950);
249
- --color-border-filled-accent: var(--color-rose-900);
250
- --color-border-filled-success: var(--color-green-900);
251
- --color-border-filled-danger: var(--color-red-900);
252
- --color-border-filled-warning: var(--color-yellow-900);
253
- --color-border-filled-info: var(--color-blue-900);
254
- --color-border-filled-link: var(--color-blue-900);
255
- --ui-br-xs: 0.125rem;
256
- --ui-br-sm: 0.25rem;
257
- --ui-br-md: 0.375rem;
258
- --ui-br-lg: 0.5rem;
259
- --ui-br-xl: 0.625rem;
260
- --layout-br-xs: 0.375rem;
261
- --layout-br-sm: 0.5rem;
262
- --layout-br-md: 0.625rem;
263
- --layout-br-lg: 0.75rem;
264
- --layout-br-xl: 0.875rem;
242
+ --color-border-filled-default: var(--color-gray-600);
243
+ --color-border-filled-primary: var(--color-blue-600);
244
+ --color-border-filled-secondary: var(--color-gray-700);
245
+ --color-border-filled-tertiary: var(--color-gray-800);
246
+ --color-border-filled-accent: var(--color-rose-600);
247
+ --color-border-filled-success: var(--color-green-600);
248
+ --color-border-filled-danger: var(--color-red-600);
249
+ --color-border-filled-warning: var(--color-yellow-600);
250
+ --color-border-filled-info: var(--color-blue-600);
251
+ --color-border-filled-link: var(--color-blue-600);
252
+ --ui-br-spacing: 0.125rem;
253
+ --ui-br-xs: calc(1 * var(--ui-br-spacing));
254
+ --ui-br-sm: calc(2 * var(--ui-br-spacing));
255
+ --ui-br-md: calc(3 * var(--ui-br-spacing));
256
+ --ui-br-lg: calc(4 * var(--ui-br-spacing));
257
+ --ui-br-xl: calc(5 * var(--ui-br-spacing));
258
+ --layout-br-spacing: 0.25rem;
259
+ --layout-br-xs: calc(3 * var(--layout-br-spacing));
260
+ --layout-br-sm: calc(4 * var(--layout-br-spacing));
261
+ --layout-br-md: calc(5 * var(--layout-br-spacing));
262
+ --layout-br-lg: calc(6 * var(--layout-br-spacing));
263
+ --layout-br-xl: calc(7 * var(--layout-br-spacing));
264
+ --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.375rem);
265
+ --layout-gap-xs: calc(2 * var(--layout-spacing));
266
+ --layout-gap-sm: calc(3 * var(--layout-spacing));
267
+ --layout-gap-md: calc(4 * var(--layout-spacing));
268
+ --layout-gap-lg: calc(5 * var(--layout-spacing));
269
+ --layout-gap-xl: calc(6 * var(--layout-spacing));
265
270
  }
266
271
  }
267
272
  @layer base {
@@ -527,6 +532,9 @@
527
532
  .h-px {
528
533
  height: 1px;
529
534
  }
535
+ .w-1\/3 {
536
+ width: calc(1/3 * 100%);
537
+ }
530
538
  .w-3 {
531
539
  width: calc(var(--spacing) * 3);
532
540
  }
@@ -563,6 +571,9 @@
563
571
  .max-w-7xl {
564
572
  max-width: var(--container-7xl);
565
573
  }
574
+ .max-w-md {
575
+ max-width: var(--container-md);
576
+ }
566
577
  .transform {
567
578
  transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
568
579
  }
@@ -653,6 +664,21 @@
653
664
  .justify-stretch {
654
665
  justify-content: stretch;
655
666
  }
667
+ .gap-\(--layout-gap-lg\) {
668
+ gap: var(--layout-gap-lg);
669
+ }
670
+ .gap-\(--layout-gap-md\) {
671
+ gap: var(--layout-gap-md);
672
+ }
673
+ .gap-\(--layout-gap-sm\) {
674
+ gap: var(--layout-gap-sm);
675
+ }
676
+ .gap-\(--layout-gap-xl\) {
677
+ gap: var(--layout-gap-xl);
678
+ }
679
+ .gap-\(--layout-gap-xs\) {
680
+ gap: var(--layout-gap-xs);
681
+ }
656
682
  .gap-0 {
657
683
  gap: calc(var(--spacing) * 0);
658
684
  }
@@ -686,9 +712,6 @@
686
712
  .gap-8 {
687
713
  gap: calc(var(--spacing) * 8);
688
714
  }
689
- .gap-10 {
690
- gap: calc(var(--spacing) * 10);
691
- }
692
715
  .gap-12 {
693
716
  gap: calc(var(--spacing) * 12);
694
717
  }
@@ -2290,11 +2313,6 @@
2290
2313
  flex-direction: column;
2291
2314
  }
2292
2315
  }
2293
- .max-lg\:gap-1 {
2294
- @media (width < 64rem) {
2295
- gap: calc(var(--spacing) * 1);
2296
- }
2297
- }
2298
2316
  .max-lg\:gap-2 {
2299
2317
  @media (width < 64rem) {
2300
2318
  gap: calc(var(--spacing) * 2);
@@ -2315,26 +2333,6 @@
2315
2333
  gap: calc(var(--spacing) * 5);
2316
2334
  }
2317
2335
  }
2318
- .max-lg\:gap-6 {
2319
- @media (width < 64rem) {
2320
- gap: calc(var(--spacing) * 6);
2321
- }
2322
- }
2323
- .max-lg\:gap-7 {
2324
- @media (width < 64rem) {
2325
- gap: calc(var(--spacing) * 7);
2326
- }
2327
- }
2328
- .max-lg\:gap-8 {
2329
- @media (width < 64rem) {
2330
- gap: calc(var(--spacing) * 8);
2331
- }
2332
- }
2333
- .max-lg\:gap-9 {
2334
- @media (width < 64rem) {
2335
- gap: calc(var(--spacing) * 9);
2336
- }
2337
- }
2338
2336
  .max-lg\:px-4 {
2339
2337
  @media (width < 64rem) {
2340
2338
  padding-inline: calc(var(--spacing) * 4);
@@ -2436,11 +2434,6 @@
2436
2434
  flex-direction: column;
2437
2435
  }
2438
2436
  }
2439
- .max-md\:gap-2 {
2440
- @media (width < 48rem) {
2441
- gap: calc(var(--spacing) * 2);
2442
- }
2443
- }
2444
2437
  .max-md\:gap-3 {
2445
2438
  @media (width < 48rem) {
2446
2439
  gap: calc(var(--spacing) * 3);
@@ -2451,16 +2444,6 @@
2451
2444
  gap: calc(var(--spacing) * 4);
2452
2445
  }
2453
2446
  }
2454
- .max-md\:gap-6 {
2455
- @media (width < 48rem) {
2456
- gap: calc(var(--spacing) * 6);
2457
- }
2458
- }
2459
- .max-md\:gap-8 {
2460
- @media (width < 48rem) {
2461
- gap: calc(var(--spacing) * 8);
2462
- }
2463
- }
2464
2447
  .max-md\:px-3 {
2465
2448
  @media (width < 48rem) {
2466
2449
  padding-inline: calc(var(--spacing) * 3);
package/dist/vars.css CHANGED
@@ -114,13 +114,13 @@
114
114
  --color-bg-filled-layout-primary: var(--color-blue-800);
115
115
  --color-bg-filled-layout-secondary: var(--color-gray-800);
116
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);
117
+ --color-bg-filled-layout-accent: var(--color-indigo-700);
118
+ --color-bg-filled-layout-success: var(--color-green-700);
119
+ --color-bg-filled-layout-danger: var(--color-red-700);
120
120
  --color-bg-filled-layout-warning: var(--color-yellow-800);
121
- --color-bg-filled-layout-info: var(--color-blue-800);
121
+ --color-bg-filled-layout-info: var(--color-blue-700);
122
122
  --color-bg-filled-layout-transparent: transparent;
123
- --color-bg-filled-layout-link: var(--color-blue-800);
123
+ --color-bg-filled-layout-link: var(--color-blue-700);
124
124
 
125
125
  /* Border Colors */
126
126
  --color-border-default: var(--color-gray-200);
@@ -135,28 +135,38 @@
135
135
  --color-border-info: var(--color-blue-200);
136
136
 
137
137
  /* Filled Button Border Colors */
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);
138
+ --color-border-filled-default: var(--color-gray-600);
139
+ --color-border-filled-primary: var(--color-blue-600);
140
+ --color-border-filled-secondary: var(--color-gray-700);
141
+ --color-border-filled-tertiary: var(--color-gray-800);
142
+ --color-border-filled-accent: var(--color-rose-600);
143
+ --color-border-filled-success: var(--color-green-600);
144
+ --color-border-filled-danger: var(--color-red-600);
145
+ --color-border-filled-warning: var(--color-yellow-600);
146
+ --color-border-filled-info: var(--color-blue-600);
147
+ --color-border-filled-link: var(--color-blue-600);
148
148
 
149
149
  /* UI Component Border Radius Sizes */
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;
150
+ --ui-br-spacing: 0.125rem;
151
+ --ui-br-xs: calc(1 * var(--ui-br-spacing));
152
+ --ui-br-sm: calc(2 * var(--ui-br-spacing));
153
+ --ui-br-md: calc(3 * var(--ui-br-spacing));
154
+ --ui-br-lg: calc(4 * var(--ui-br-spacing));
155
+ --ui-br-xl: calc(5 * var(--ui-br-spacing));
155
156
 
156
157
  /* Layout Component Border Radius Sizes */
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;
158
+ --layout-br-spacing: 0.25rem;
159
+ --layout-br-xs: calc(3 * var(--layout-br-spacing));
160
+ --layout-br-sm: calc(4 * var(--layout-br-spacing));
161
+ --layout-br-md: calc(5 * var(--layout-br-spacing));
162
+ --layout-br-lg: calc(6 * var(--layout-br-spacing));
163
+ --layout-br-xl: calc(7 * var(--layout-br-spacing));
164
+
165
+ /* Layout Component Gap Sizes */
166
+ --layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.375rem);
167
+ --layout-gap-xs: calc(2 * var(--layout-spacing));
168
+ --layout-gap-sm: calc(3 * var(--layout-spacing));
169
+ --layout-gap-md: calc(4 * var(--layout-spacing));
170
+ --layout-gap-lg: calc(5 * var(--layout-spacing));
171
+ --layout-gap-xl: calc(6 * var(--layout-spacing));
162
172
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.3.1-alpha.20250914210126.5142197",
3
+ "version": "0.3.1-alpha.20250916140129.7475230",
4
4
  "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
5
5
  "author": "",
6
6
  "license": "ISC",