@vaneui/ui 0.3.1-alpha.20250930162311.b66aed0 → 0.3.1-alpha.20250930203841.cec91ca
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/theme/checkboxTheme.d.ts +2 -1
- package/dist/components/ui/theme/checkboxTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/labelTheme.d.ts +2 -2
- package/dist/components/ui/theme/labelTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/size/sizeTheme.d.ts +3 -1
- package/dist/components/ui/theme/size/sizeTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/typography/fontSizeTheme.d.ts +21 -0
- package/dist/components/ui/theme/typography/fontSizeTheme.d.ts.map +1 -0
- package/dist/components/ui/theme/typographyTheme.d.ts +4 -5
- package/dist/components/ui/theme/typographyTheme.d.ts.map +1 -1
- package/dist/index.esm.js +89 -39
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +89 -39
- package/dist/index.js.map +1 -1
- package/dist/ui.css +39 -72
- package/dist/vars.css +5 -1
- package/package.json +1 -1
package/dist/ui.css
CHANGED
|
@@ -251,6 +251,7 @@
|
|
|
251
251
|
--ui-spacing: var(--spacing);
|
|
252
252
|
--br-base: 0.25rem;
|
|
253
253
|
--ui-br-base: 0.125rem;
|
|
254
|
+
--fs-base: 0.125rem;
|
|
254
255
|
}
|
|
255
256
|
}
|
|
256
257
|
@layer base {
|
|
@@ -1277,6 +1278,9 @@
|
|
|
1277
1278
|
.text-\(--color-text-warning\) {
|
|
1278
1279
|
color: var(--color-text-warning);
|
|
1279
1280
|
}
|
|
1281
|
+
.text-\(--fs\) {
|
|
1282
|
+
color: var(--fs);
|
|
1283
|
+
}
|
|
1280
1284
|
.text-blue-200 {
|
|
1281
1285
|
color: var(--color-blue-200);
|
|
1282
1286
|
}
|
|
@@ -1568,6 +1572,39 @@
|
|
|
1568
1572
|
.\[--br-unit\:7\] {
|
|
1569
1573
|
--br-unit: 7;
|
|
1570
1574
|
}
|
|
1575
|
+
.\[--fs-unit\:6\] {
|
|
1576
|
+
--fs-unit: 6;
|
|
1577
|
+
}
|
|
1578
|
+
.\[--fs-unit\:7\] {
|
|
1579
|
+
--fs-unit: 7;
|
|
1580
|
+
}
|
|
1581
|
+
.\[--fs-unit\:8\] {
|
|
1582
|
+
--fs-unit: 8;
|
|
1583
|
+
}
|
|
1584
|
+
.\[--fs-unit\:9\] {
|
|
1585
|
+
--fs-unit: 9;
|
|
1586
|
+
}
|
|
1587
|
+
.\[--fs-unit\:10\] {
|
|
1588
|
+
--fs-unit: 10;
|
|
1589
|
+
}
|
|
1590
|
+
.\[--fs-unit\:12\] {
|
|
1591
|
+
--fs-unit: 12;
|
|
1592
|
+
}
|
|
1593
|
+
.\[--fs-unit\:15\] {
|
|
1594
|
+
--fs-unit: 15;
|
|
1595
|
+
}
|
|
1596
|
+
.\[--fs-unit\:18\] {
|
|
1597
|
+
--fs-unit: 18;
|
|
1598
|
+
}
|
|
1599
|
+
.\[--fs-unit\:24\] {
|
|
1600
|
+
--fs-unit: 24;
|
|
1601
|
+
}
|
|
1602
|
+
.\[--fs-unit\:30\] {
|
|
1603
|
+
--fs-unit: 30;
|
|
1604
|
+
}
|
|
1605
|
+
.\[--fs-unit\:36\] {
|
|
1606
|
+
--fs-unit: 36;
|
|
1607
|
+
}
|
|
1571
1608
|
.\[--gap-unit\:1\.5\] {
|
|
1572
1609
|
--gap-unit: 1.5;
|
|
1573
1610
|
}
|
|
@@ -2301,42 +2338,6 @@
|
|
|
2301
2338
|
flex-direction: column;
|
|
2302
2339
|
}
|
|
2303
2340
|
}
|
|
2304
|
-
.max-lg\:text-2xl {
|
|
2305
|
-
@media (width < 64rem) {
|
|
2306
|
-
font-size: var(--text-2xl);
|
|
2307
|
-
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
2308
|
-
}
|
|
2309
|
-
}
|
|
2310
|
-
.max-lg\:text-3xl {
|
|
2311
|
-
@media (width < 64rem) {
|
|
2312
|
-
font-size: var(--text-3xl);
|
|
2313
|
-
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
2314
|
-
}
|
|
2315
|
-
}
|
|
2316
|
-
.max-lg\:text-4xl {
|
|
2317
|
-
@media (width < 64rem) {
|
|
2318
|
-
font-size: var(--text-4xl);
|
|
2319
|
-
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
|
2320
|
-
}
|
|
2321
|
-
}
|
|
2322
|
-
.max-lg\:text-5xl {
|
|
2323
|
-
@media (width < 64rem) {
|
|
2324
|
-
font-size: var(--text-5xl);
|
|
2325
|
-
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
|
2326
|
-
}
|
|
2327
|
-
}
|
|
2328
|
-
.max-lg\:text-6xl {
|
|
2329
|
-
@media (width < 64rem) {
|
|
2330
|
-
font-size: var(--text-6xl);
|
|
2331
|
-
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
|
2332
|
-
}
|
|
2333
|
-
}
|
|
2334
|
-
.max-lg\:text-xl {
|
|
2335
|
-
@media (width < 64rem) {
|
|
2336
|
-
font-size: var(--text-xl);
|
|
2337
|
-
line-height: var(--tw-leading, var(--text-xl--line-height));
|
|
2338
|
-
}
|
|
2339
|
-
}
|
|
2340
2341
|
.max-md\:hidden {
|
|
2341
2342
|
@media (width < 48rem) {
|
|
2342
2343
|
display: none;
|
|
@@ -2347,42 +2348,6 @@
|
|
|
2347
2348
|
flex-direction: column;
|
|
2348
2349
|
}
|
|
2349
2350
|
}
|
|
2350
|
-
.max-md\:text-2xl {
|
|
2351
|
-
@media (width < 48rem) {
|
|
2352
|
-
font-size: var(--text-2xl);
|
|
2353
|
-
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
2354
|
-
}
|
|
2355
|
-
}
|
|
2356
|
-
.max-md\:text-3xl {
|
|
2357
|
-
@media (width < 48rem) {
|
|
2358
|
-
font-size: var(--text-3xl);
|
|
2359
|
-
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
2360
|
-
}
|
|
2361
|
-
}
|
|
2362
|
-
.max-md\:text-4xl {
|
|
2363
|
-
@media (width < 48rem) {
|
|
2364
|
-
font-size: var(--text-4xl);
|
|
2365
|
-
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
|
2366
|
-
}
|
|
2367
|
-
}
|
|
2368
|
-
.max-md\:text-5xl {
|
|
2369
|
-
@media (width < 48rem) {
|
|
2370
|
-
font-size: var(--text-5xl);
|
|
2371
|
-
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
|
2372
|
-
}
|
|
2373
|
-
}
|
|
2374
|
-
.max-md\:text-lg {
|
|
2375
|
-
@media (width < 48rem) {
|
|
2376
|
-
font-size: var(--text-lg);
|
|
2377
|
-
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
2378
|
-
}
|
|
2379
|
-
}
|
|
2380
|
-
.max-md\:text-xl {
|
|
2381
|
-
@media (width < 48rem) {
|
|
2382
|
-
font-size: var(--text-xl);
|
|
2383
|
-
line-height: var(--tw-leading, var(--text-xl--line-height));
|
|
2384
|
-
}
|
|
2385
|
-
}
|
|
2386
2351
|
.max-sm\:hidden {
|
|
2387
2352
|
@media (width < 40rem) {
|
|
2388
2353
|
display: none;
|
|
@@ -2446,6 +2411,8 @@
|
|
|
2446
2411
|
--ui-br: calc(var(--br-unit) * var(--ui-br-base));
|
|
2447
2412
|
--lh-unit: 1.5;
|
|
2448
2413
|
--lh: var(--lh-unit);
|
|
2414
|
+
--fs-unit: 8;
|
|
2415
|
+
--fs: calc(var(--fs-unit) * var(--fs-base));
|
|
2449
2416
|
}
|
|
2450
2417
|
}
|
|
2451
2418
|
}
|
package/dist/vars.css
CHANGED
|
@@ -146,15 +146,16 @@
|
|
|
146
146
|
--color-border-filled-info: var(--color-blue-600);
|
|
147
147
|
--color-border-filled-link: var(--color-blue-600);
|
|
148
148
|
|
|
149
|
+
|
|
149
150
|
--layout-spacing: clamp(0.1rem, 0.16rem + 0.4vw, 0.3rem);
|
|
150
151
|
--ui-spacing: var(--spacing);
|
|
151
152
|
--br-base: 0.25rem;
|
|
152
153
|
--ui-br-base: 0.125rem;
|
|
154
|
+
--fs-base: 0.125rem;
|
|
153
155
|
}
|
|
154
156
|
|
|
155
157
|
@layer base {
|
|
156
158
|
:where(*) {
|
|
157
|
-
/* Layout Gap: the --gap-unit variable is set depending on component and it's size */
|
|
158
159
|
--gap-unit: 1;
|
|
159
160
|
--gap: calc(var(--gap-unit) * var(--layout-spacing));
|
|
160
161
|
--ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
|
|
@@ -172,5 +173,8 @@
|
|
|
172
173
|
|
|
173
174
|
--lh-unit: 1.5;
|
|
174
175
|
--lh: var(--lh-unit);
|
|
176
|
+
|
|
177
|
+
--fs-unit: 8; /* Default to text-base (1rem = 8 * 0.125rem) */
|
|
178
|
+
--fs: calc(var(--fs-unit) * var(--fs-base));
|
|
175
179
|
}
|
|
176
180
|
}
|
package/package.json
CHANGED