@vaneui/ui 0.3.1-alpha.20250917170051.b819c80 → 0.3.1-alpha.20250921204254.9cfeae4
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/ui/classes/layoutClasses.d.ts +2 -4
- package/dist/components/ui/classes/layoutClasses.d.ts.map +1 -1
- package/dist/components/ui/theme/cardTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/colTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/containerTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/gridTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/rowTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/sectionTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/size/pxTheme.d.ts +4 -1
- package/dist/components/ui/theme/size/pxTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/size/pyTheme.d.ts +2 -0
- package/dist/components/ui/theme/size/pyTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/stackTheme.d.ts.map +1 -1
- package/dist/index.esm.js +103 -44
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +103 -44
- package/dist/index.js.map +1 -1
- package/dist/ui.css +90 -122
- package/dist/vars.css +20 -41
- package/package.json +1 -1
package/dist/ui.css
CHANGED
|
@@ -249,12 +249,12 @@
|
|
|
249
249
|
--color-border-filled-warning: var(--color-yellow-600);
|
|
250
250
|
--color-border-filled-info: var(--color-blue-600);
|
|
251
251
|
--color-border-filled-link: var(--color-blue-600);
|
|
252
|
-
--ui-br-
|
|
253
|
-
--ui-br-xs: calc(1 * var(--ui-br-
|
|
254
|
-
--ui-br-sm: calc(2 * var(--ui-br-
|
|
255
|
-
--ui-br-md: calc(3 * var(--ui-br-
|
|
256
|
-
--ui-br-lg: calc(4 * var(--ui-br-
|
|
257
|
-
--ui-br-xl: calc(5 * var(--ui-br-
|
|
252
|
+
--ui-br-unit: 0.125rem;
|
|
253
|
+
--ui-br-xs: calc(1 * var(--ui-br-unit));
|
|
254
|
+
--ui-br-sm: calc(2 * var(--ui-br-unit));
|
|
255
|
+
--ui-br-md: calc(3 * var(--ui-br-unit));
|
|
256
|
+
--ui-br-lg: calc(4 * var(--ui-br-unit));
|
|
257
|
+
--ui-br-xl: calc(5 * var(--ui-br-unit));
|
|
258
258
|
--layout-br-spacing: 0.25rem;
|
|
259
259
|
--layout-br-xs: calc(3 * var(--layout-br-spacing));
|
|
260
260
|
--layout-br-sm: calc(4 * var(--layout-br-spacing));
|
|
@@ -262,31 +262,6 @@
|
|
|
262
262
|
--layout-br-lg: calc(6 * var(--layout-br-spacing));
|
|
263
263
|
--layout-br-xl: calc(7 * var(--layout-br-spacing));
|
|
264
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));
|
|
270
|
-
--layout-px-xs: calc(2 * var(--layout-spacing));
|
|
271
|
-
--layout-px-sm: calc(3 * var(--layout-spacing));
|
|
272
|
-
--layout-px-md: calc(4 * var(--layout-spacing));
|
|
273
|
-
--layout-px-lg: calc(5 * var(--layout-spacing));
|
|
274
|
-
--layout-px-xl: calc(6 * var(--layout-spacing));
|
|
275
|
-
--layout-py-xs: calc(2 * var(--layout-spacing));
|
|
276
|
-
--layout-py-sm: calc(3 * var(--layout-spacing));
|
|
277
|
-
--layout-py-md: calc(4 * var(--layout-spacing));
|
|
278
|
-
--layout-py-lg: calc(5 * var(--layout-spacing));
|
|
279
|
-
--layout-py-xl: calc(6 * var(--layout-spacing));
|
|
280
|
-
--section-px-xs: calc(5 * var(--layout-spacing));
|
|
281
|
-
--section-px-sm: calc(6 * var(--layout-spacing));
|
|
282
|
-
--section-px-md: calc(7 * var(--layout-spacing));
|
|
283
|
-
--section-px-lg: calc(8 * var(--layout-spacing));
|
|
284
|
-
--section-px-xl: calc(9 * var(--layout-spacing));
|
|
285
|
-
--section-py-xs: calc(4 * var(--layout-spacing));
|
|
286
|
-
--section-py-sm: calc(8 * var(--layout-spacing));
|
|
287
|
-
--section-py-md: calc(12 * var(--layout-spacing));
|
|
288
|
-
--section-py-lg: calc(16 * var(--layout-spacing));
|
|
289
|
-
--section-py-xl: calc(20 * var(--layout-spacing));
|
|
290
265
|
}
|
|
291
266
|
}
|
|
292
267
|
@layer base {
|
|
@@ -552,9 +527,6 @@
|
|
|
552
527
|
.h-px {
|
|
553
528
|
height: 1px;
|
|
554
529
|
}
|
|
555
|
-
.w-1\/3 {
|
|
556
|
-
width: calc(1/3 * 100%);
|
|
557
|
-
}
|
|
558
530
|
.w-3 {
|
|
559
531
|
width: calc(var(--spacing) * 3);
|
|
560
532
|
}
|
|
@@ -684,20 +656,8 @@
|
|
|
684
656
|
.justify-stretch {
|
|
685
657
|
justify-content: stretch;
|
|
686
658
|
}
|
|
687
|
-
.gap-\(--
|
|
688
|
-
gap: var(--
|
|
689
|
-
}
|
|
690
|
-
.gap-\(--layout-gap-md\) {
|
|
691
|
-
gap: var(--layout-gap-md);
|
|
692
|
-
}
|
|
693
|
-
.gap-\(--layout-gap-sm\) {
|
|
694
|
-
gap: var(--layout-gap-sm);
|
|
695
|
-
}
|
|
696
|
-
.gap-\(--layout-gap-xl\) {
|
|
697
|
-
gap: var(--layout-gap-xl);
|
|
698
|
-
}
|
|
699
|
-
.gap-\(--layout-gap-xs\) {
|
|
700
|
-
gap: var(--layout-gap-xs);
|
|
659
|
+
.gap-\(--gap\) {
|
|
660
|
+
gap: var(--gap);
|
|
701
661
|
}
|
|
702
662
|
.gap-0 {
|
|
703
663
|
gap: calc(var(--spacing) * 0);
|
|
@@ -720,15 +680,6 @@
|
|
|
720
680
|
.gap-3 {
|
|
721
681
|
gap: calc(var(--spacing) * 3);
|
|
722
682
|
}
|
|
723
|
-
.gap-4 {
|
|
724
|
-
gap: calc(var(--spacing) * 4);
|
|
725
|
-
}
|
|
726
|
-
.gap-5 {
|
|
727
|
-
gap: calc(var(--spacing) * 5);
|
|
728
|
-
}
|
|
729
|
-
.gap-6 {
|
|
730
|
-
gap: calc(var(--spacing) * 6);
|
|
731
|
-
}
|
|
732
683
|
.space-y-2 {
|
|
733
684
|
:where(& > :not(:last-child)) {
|
|
734
685
|
--tw-space-y-reverse: 0;
|
|
@@ -1145,35 +1096,8 @@
|
|
|
1145
1096
|
.p-0 {
|
|
1146
1097
|
padding: calc(var(--spacing) * 0);
|
|
1147
1098
|
}
|
|
1148
|
-
.px-\(--
|
|
1149
|
-
padding-inline: var(--
|
|
1150
|
-
}
|
|
1151
|
-
.px-\(--layout-px-md\) {
|
|
1152
|
-
padding-inline: var(--layout-px-md);
|
|
1153
|
-
}
|
|
1154
|
-
.px-\(--layout-px-sm\) {
|
|
1155
|
-
padding-inline: var(--layout-px-sm);
|
|
1156
|
-
}
|
|
1157
|
-
.px-\(--layout-px-xl\) {
|
|
1158
|
-
padding-inline: var(--layout-px-xl);
|
|
1159
|
-
}
|
|
1160
|
-
.px-\(--layout-px-xs\) {
|
|
1161
|
-
padding-inline: var(--layout-px-xs);
|
|
1162
|
-
}
|
|
1163
|
-
.px-\(--section-px-lg\) {
|
|
1164
|
-
padding-inline: var(--section-px-lg);
|
|
1165
|
-
}
|
|
1166
|
-
.px-\(--section-px-md\) {
|
|
1167
|
-
padding-inline: var(--section-px-md);
|
|
1168
|
-
}
|
|
1169
|
-
.px-\(--section-px-sm\) {
|
|
1170
|
-
padding-inline: var(--section-px-sm);
|
|
1171
|
-
}
|
|
1172
|
-
.px-\(--section-px-xl\) {
|
|
1173
|
-
padding-inline: var(--section-px-xl);
|
|
1174
|
-
}
|
|
1175
|
-
.px-\(--section-px-xs\) {
|
|
1176
|
-
padding-inline: var(--section-px-xs);
|
|
1099
|
+
.px-\(--px\) {
|
|
1100
|
+
padding-inline: var(--px);
|
|
1177
1101
|
}
|
|
1178
1102
|
.px-1 {
|
|
1179
1103
|
padding-inline: calc(var(--spacing) * 1);
|
|
@@ -1202,41 +1126,8 @@
|
|
|
1202
1126
|
.px-6 {
|
|
1203
1127
|
padding-inline: calc(var(--spacing) * 6);
|
|
1204
1128
|
}
|
|
1205
|
-
.
|
|
1206
|
-
padding-
|
|
1207
|
-
}
|
|
1208
|
-
.px-10 {
|
|
1209
|
-
padding-inline: calc(var(--spacing) * 10);
|
|
1210
|
-
}
|
|
1211
|
-
.py-\(--layout-py-lg\) {
|
|
1212
|
-
padding-block: var(--layout-py-lg);
|
|
1213
|
-
}
|
|
1214
|
-
.py-\(--layout-py-md\) {
|
|
1215
|
-
padding-block: var(--layout-py-md);
|
|
1216
|
-
}
|
|
1217
|
-
.py-\(--layout-py-sm\) {
|
|
1218
|
-
padding-block: var(--layout-py-sm);
|
|
1219
|
-
}
|
|
1220
|
-
.py-\(--layout-py-xl\) {
|
|
1221
|
-
padding-block: var(--layout-py-xl);
|
|
1222
|
-
}
|
|
1223
|
-
.py-\(--layout-py-xs\) {
|
|
1224
|
-
padding-block: var(--layout-py-xs);
|
|
1225
|
-
}
|
|
1226
|
-
.py-\(--section-py-lg\) {
|
|
1227
|
-
padding-block: var(--section-py-lg);
|
|
1228
|
-
}
|
|
1229
|
-
.py-\(--section-py-md\) {
|
|
1230
|
-
padding-block: var(--section-py-md);
|
|
1231
|
-
}
|
|
1232
|
-
.py-\(--section-py-sm\) {
|
|
1233
|
-
padding-block: var(--section-py-sm);
|
|
1234
|
-
}
|
|
1235
|
-
.py-\(--section-py-xl\) {
|
|
1236
|
-
padding-block: var(--section-py-xl);
|
|
1237
|
-
}
|
|
1238
|
-
.py-\(--section-py-xs\) {
|
|
1239
|
-
padding-block: var(--section-py-xs);
|
|
1129
|
+
.py-\(--py\) {
|
|
1130
|
+
padding-block: var(--py);
|
|
1240
1131
|
}
|
|
1241
1132
|
.py-0 {
|
|
1242
1133
|
padding-block: calc(var(--spacing) * 0);
|
|
@@ -1717,6 +1608,72 @@
|
|
|
1717
1608
|
--tw-duration: 200ms;
|
|
1718
1609
|
transition-duration: 200ms;
|
|
1719
1610
|
}
|
|
1611
|
+
.\[--aspect-ratio\:1\.5\] {
|
|
1612
|
+
--aspect-ratio: 1.5;
|
|
1613
|
+
}
|
|
1614
|
+
.\[--aspect-ratio\:1\.6\] {
|
|
1615
|
+
--aspect-ratio: 1.6;
|
|
1616
|
+
}
|
|
1617
|
+
.\[--aspect-ratio\:1\.75\] {
|
|
1618
|
+
--aspect-ratio: 1.75;
|
|
1619
|
+
}
|
|
1620
|
+
.\[--aspect-ratio\:2\.5\] {
|
|
1621
|
+
--aspect-ratio: 2.5;
|
|
1622
|
+
}
|
|
1623
|
+
.\[--aspect-ratio\:2\] {
|
|
1624
|
+
--aspect-ratio: 2;
|
|
1625
|
+
}
|
|
1626
|
+
.\[--gap-unit\:1\.5\] {
|
|
1627
|
+
--gap-unit: 1.5;
|
|
1628
|
+
}
|
|
1629
|
+
.\[--gap-unit\:1\] {
|
|
1630
|
+
--gap-unit: 1;
|
|
1631
|
+
}
|
|
1632
|
+
.\[--gap-unit\:2\.5\] {
|
|
1633
|
+
--gap-unit: 2.5;
|
|
1634
|
+
}
|
|
1635
|
+
.\[--gap-unit\:2\] {
|
|
1636
|
+
--gap-unit: 2;
|
|
1637
|
+
}
|
|
1638
|
+
.\[--gap-unit\:3\] {
|
|
1639
|
+
--gap-unit: 3;
|
|
1640
|
+
}
|
|
1641
|
+
.\[--gap-unit\:4\] {
|
|
1642
|
+
--gap-unit: 4;
|
|
1643
|
+
}
|
|
1644
|
+
.\[--gap-unit\:5\] {
|
|
1645
|
+
--gap-unit: 5;
|
|
1646
|
+
}
|
|
1647
|
+
.\[--gap-unit\:6\] {
|
|
1648
|
+
--gap-unit: 6;
|
|
1649
|
+
}
|
|
1650
|
+
.\[--h-unit\:2\] {
|
|
1651
|
+
--h-unit: 2;
|
|
1652
|
+
}
|
|
1653
|
+
.\[--h-unit\:3\] {
|
|
1654
|
+
--h-unit: 3;
|
|
1655
|
+
}
|
|
1656
|
+
.\[--h-unit\:4\] {
|
|
1657
|
+
--h-unit: 4;
|
|
1658
|
+
}
|
|
1659
|
+
.\[--h-unit\:5\] {
|
|
1660
|
+
--h-unit: 5;
|
|
1661
|
+
}
|
|
1662
|
+
.\[--h-unit\:6\] {
|
|
1663
|
+
--h-unit: 6;
|
|
1664
|
+
}
|
|
1665
|
+
.\[--h-unit\:8\] {
|
|
1666
|
+
--h-unit: 8;
|
|
1667
|
+
}
|
|
1668
|
+
.\[--h-unit\:12\] {
|
|
1669
|
+
--h-unit: 12;
|
|
1670
|
+
}
|
|
1671
|
+
.\[--h-unit\:16\] {
|
|
1672
|
+
--h-unit: 16;
|
|
1673
|
+
}
|
|
1674
|
+
.\[--h-unit\:20\] {
|
|
1675
|
+
--h-unit: 20;
|
|
1676
|
+
}
|
|
1720
1677
|
.ring-inset {
|
|
1721
1678
|
--tw-ring-inset: inset;
|
|
1722
1679
|
}
|
|
@@ -2491,7 +2448,18 @@
|
|
|
2491
2448
|
}
|
|
2492
2449
|
}
|
|
2493
2450
|
}
|
|
2494
|
-
@layer theme
|
|
2451
|
+
@layer theme {
|
|
2452
|
+
@layer base {
|
|
2453
|
+
:where(*) {
|
|
2454
|
+
--gap-unit: 1;
|
|
2455
|
+
--gap: calc(var(--gap-unit) * var(--layout-spacing));
|
|
2456
|
+
--aspect-ratio: 1;
|
|
2457
|
+
--px: calc(var(--aspect-ratio) * var(--h-unit) * var(--layout-spacing));
|
|
2458
|
+
--h-unit: 1;
|
|
2459
|
+
--py: calc(var(--h-unit) * var(--layout-spacing));
|
|
2460
|
+
}
|
|
2461
|
+
}
|
|
2462
|
+
}
|
|
2495
2463
|
@property --tw-rotate-x {
|
|
2496
2464
|
syntax: "*";
|
|
2497
2465
|
inherits: false;
|
package/dist/vars.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@theme
|
|
1
|
+
@theme {
|
|
2
2
|
/* Text Colors */
|
|
3
3
|
--color-text-default: var(--color-gray-900);
|
|
4
4
|
--color-text-primary: var(--color-blue-600);
|
|
@@ -147,12 +147,12 @@
|
|
|
147
147
|
--color-border-filled-link: var(--color-blue-600);
|
|
148
148
|
|
|
149
149
|
/* UI Component Border Radius Sizes */
|
|
150
|
-
--ui-br-
|
|
151
|
-
--ui-br-xs: calc(1 * var(--ui-br-
|
|
152
|
-
--ui-br-sm: calc(2 * var(--ui-br-
|
|
153
|
-
--ui-br-md: calc(3 * var(--ui-br-
|
|
154
|
-
--ui-br-lg: calc(4 * var(--ui-br-
|
|
155
|
-
--ui-br-xl: calc(5 * var(--ui-br-
|
|
150
|
+
--ui-br-unit: 0.125rem;
|
|
151
|
+
--ui-br-xs: calc(1 * var(--ui-br-unit));
|
|
152
|
+
--ui-br-sm: calc(2 * var(--ui-br-unit));
|
|
153
|
+
--ui-br-md: calc(3 * var(--ui-br-unit));
|
|
154
|
+
--ui-br-lg: calc(4 * var(--ui-br-unit));
|
|
155
|
+
--ui-br-xl: calc(5 * var(--ui-br-unit));
|
|
156
156
|
|
|
157
157
|
/* Layout Component Border Radius Sizes */
|
|
158
158
|
--layout-br-spacing: 0.25rem;
|
|
@@ -162,39 +162,18 @@
|
|
|
162
162
|
--layout-br-lg: calc(6 * var(--layout-br-spacing));
|
|
163
163
|
--layout-br-xl: calc(7 * var(--layout-br-spacing));
|
|
164
164
|
|
|
165
|
-
/* Layout Component Gap Sizes */
|
|
166
165
|
--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));
|
|
172
|
-
|
|
173
|
-
/* Layout Component Horizontal Padding Sizes */
|
|
174
|
-
--layout-px-xs: calc(2 * var(--layout-spacing));
|
|
175
|
-
--layout-px-sm: calc(3 * var(--layout-spacing));
|
|
176
|
-
--layout-px-md: calc(4 * var(--layout-spacing));
|
|
177
|
-
--layout-px-lg: calc(5 * var(--layout-spacing));
|
|
178
|
-
--layout-px-xl: calc(6 * var(--layout-spacing));
|
|
179
|
-
|
|
180
|
-
/* Layout Component Vertical Padding Sizes */
|
|
181
|
-
--layout-py-xs: calc(2 * var(--layout-spacing));
|
|
182
|
-
--layout-py-sm: calc(3 * var(--layout-spacing));
|
|
183
|
-
--layout-py-md: calc(4 * var(--layout-spacing));
|
|
184
|
-
--layout-py-lg: calc(5 * var(--layout-spacing));
|
|
185
|
-
--layout-py-xl: calc(6 * var(--layout-spacing));
|
|
186
|
-
|
|
187
|
-
/* Section Component Horizontal Padding Sizes */
|
|
188
|
-
--section-px-xs: calc(5 * var(--layout-spacing));
|
|
189
|
-
--section-px-sm: calc(6 * var(--layout-spacing));
|
|
190
|
-
--section-px-md: calc(7 * var(--layout-spacing));
|
|
191
|
-
--section-px-lg: calc(8 * var(--layout-spacing));
|
|
192
|
-
--section-px-xl: calc(9 * var(--layout-spacing));
|
|
193
|
-
|
|
194
|
-
/* Section Component Vertical Padding Sizes */
|
|
195
|
-
--section-py-xs: calc(4 * var(--layout-spacing));
|
|
196
|
-
--section-py-sm: calc(8 * var(--layout-spacing));
|
|
197
|
-
--section-py-md: calc(12 * var(--layout-spacing));
|
|
198
|
-
--section-py-lg: calc(16 * var(--layout-spacing));
|
|
199
|
-
--section-py-xl: calc(20 * var(--layout-spacing));
|
|
200
166
|
}
|
|
167
|
+
|
|
168
|
+
@layer base {
|
|
169
|
+
:where(*) {
|
|
170
|
+
/* Layout Gap: the --gap-unit variable is set depending on component and it's size */
|
|
171
|
+
--gap-unit: 1;
|
|
172
|
+
--gap: calc(var(--gap-unit) * var(--layout-spacing));
|
|
173
|
+
|
|
174
|
+
--aspect-ratio: 1;
|
|
175
|
+
--px: calc(var(--aspect-ratio) * var(--h-unit) * var(--layout-spacing));
|
|
176
|
+
--h-unit: 1;
|
|
177
|
+
--py: calc(var(--h-unit) * var(--layout-spacing));
|
|
178
|
+
}
|
|
179
|
+
}
|
package/package.json
CHANGED