@vaneui/ui 0.3.1-alpha.20251001144233.cfeb345 → 0.3.1-alpha.20251002111935.e184ae6
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/size/lineHeightTheme.d.ts.map +1 -1
- package/dist/index.esm.js +35 -35
- package/dist/index.js +35 -35
- package/dist/ui.css +48 -58
- package/dist/vars.css +9 -8
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lineHeightTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/theme/size/lineHeightTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,qBAAa,eAAgB,SAAQ,SAAU,YAAW,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAC/E,oEAAoE;IACpE,EAAE,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"lineHeightTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/theme/size/lineHeightTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,qBAAa,eAAgB,SAAQ,SAAU,YAAW,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAC/E,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAkB;IAC5B,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAkB;IAC5B,iEAAiE;IACjE,EAAE,EAAE,MAAM,CAAgB;IAC1B,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAkB;IAC5B,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAgB;gBAEd,aAAa,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC;IAWnD,UAAU,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,EAAE;IAQlD,MAAM,CAAC,aAAa,IAAI,eAAe;IAKvC,MAAM,CAAC,qBAAqB,IAAI,eAAe;IAU/C,MAAM,CAAC,kBAAkB,IAAI,eAAe;IAU5C,MAAM,CAAC,cAAc,IAAI,eAAe;CASzC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -3707,15 +3707,15 @@ class LineHeightTheme extends BaseTheme {
|
|
|
3707
3707
|
constructor(customMapping) {
|
|
3708
3708
|
super();
|
|
3709
3709
|
/** Extra-small line height - matches text-xs default line height */
|
|
3710
|
-
this.xs = "[--lh
|
|
3710
|
+
this.xs = "[--lh:1.333]"; // calc(1 / 0.75) ≈ 1.333
|
|
3711
3711
|
/** Small line height - matches text-sm default line height */
|
|
3712
|
-
this.sm = "[--lh
|
|
3712
|
+
this.sm = "[--lh:1.429]"; // calc(1.25 / 0.875) ≈ 1.429
|
|
3713
3713
|
/** Medium line height - matches text-base default line height */
|
|
3714
|
-
this.md = "[--lh
|
|
3714
|
+
this.md = "[--lh:1.5]"; // calc(1.5 / 1) = 1.5
|
|
3715
3715
|
/** Large line height - matches text-lg default line height */
|
|
3716
|
-
this.lg = "[--lh
|
|
3716
|
+
this.lg = "[--lh:1.556]"; // calc(1.75 / 1.125) ≈ 1.556
|
|
3717
3717
|
/** Extra-large line height - matches text-xl default line height */
|
|
3718
|
-
this.xl = "[--lh
|
|
3718
|
+
this.xl = "[--lh:1.4]"; // calc(1.75 / 1.25) = 1.4
|
|
3719
3719
|
if (customMapping) {
|
|
3720
3720
|
this.xs = customMapping.xs || this.xs;
|
|
3721
3721
|
this.sm = customMapping.sm || this.sm;
|
|
@@ -3737,29 +3737,29 @@ class LineHeightTheme extends BaseTheme {
|
|
|
3737
3737
|
// Static factory methods for different text size ranges
|
|
3738
3738
|
static createForSectionTitle() {
|
|
3739
3739
|
return new LineHeightTheme({
|
|
3740
|
-
xs: "[--lh
|
|
3741
|
-
sm: "[--lh
|
|
3742
|
-
md: "[--lh
|
|
3743
|
-
lg: "[--lh
|
|
3744
|
-
xl: "[--lh
|
|
3740
|
+
xs: "[--lh:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
|
|
3741
|
+
sm: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
|
|
3742
|
+
md: "[--lh:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
|
|
3743
|
+
lg: "[--lh:1]", // text-5xl: 1
|
|
3744
|
+
xl: "[--lh:1]" // text-6xl+: 1
|
|
3745
3745
|
});
|
|
3746
3746
|
}
|
|
3747
3747
|
static createForPageTitle() {
|
|
3748
3748
|
return new LineHeightTheme({
|
|
3749
|
-
xs: "[--lh
|
|
3750
|
-
sm: "[--lh
|
|
3751
|
-
md: "[--lh
|
|
3752
|
-
lg: "[--lh
|
|
3753
|
-
xl: "[--lh
|
|
3749
|
+
xs: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
|
|
3750
|
+
sm: "[--lh:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
|
|
3751
|
+
md: "[--lh:1]", // text-5xl: 1
|
|
3752
|
+
lg: "[--lh:1]", // text-6xl: 1
|
|
3753
|
+
xl: "[--lh:1]" // text-7xl: 1
|
|
3754
3754
|
});
|
|
3755
3755
|
}
|
|
3756
3756
|
static createForTitle() {
|
|
3757
3757
|
return new LineHeightTheme({
|
|
3758
|
-
xs: "[--lh
|
|
3759
|
-
sm: "[--lh
|
|
3760
|
-
md: "[--lh
|
|
3761
|
-
lg: "[--lh
|
|
3762
|
-
xl: "[--lh
|
|
3758
|
+
xs: "[--lh:1.556]", // text-lg: calc(1.75 / 1.125) ≈ 1.556
|
|
3759
|
+
sm: "[--lh:1.4]", // text-xl: calc(1.75 / 1.25) = 1.4
|
|
3760
|
+
md: "[--lh:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
|
|
3761
|
+
lg: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
|
|
3762
|
+
xl: "[--lh:1.111]" // text-4xl: calc(2.5 / 2.25) ≈ 1.111
|
|
3763
3763
|
});
|
|
3764
3764
|
}
|
|
3765
3765
|
}
|
|
@@ -4878,11 +4878,11 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
|
|
|
4878
4878
|
gap: new GapTheme(true),
|
|
4879
4879
|
text: new FontSizeTheme(),
|
|
4880
4880
|
lineHeight: new LineHeightTheme({
|
|
4881
|
-
xs: "[--lh
|
|
4882
|
-
sm: "[--lh
|
|
4883
|
-
md: "[--lh
|
|
4884
|
-
lg: "[--lh
|
|
4885
|
-
xl: "[--lh
|
|
4881
|
+
xs: "[--lh:1.3]",
|
|
4882
|
+
sm: "[--lh:1.3]",
|
|
4883
|
+
md: "[--lh:1.3]",
|
|
4884
|
+
lg: "[--lh:1.3]",
|
|
4885
|
+
xl: "[--lh:1.3]"
|
|
4886
4886
|
}),
|
|
4887
4887
|
},
|
|
4888
4888
|
appearance: {
|
|
@@ -5449,11 +5449,11 @@ var _a, _b, _c;
|
|
|
5449
5449
|
const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-start-1 cursor-pointer appearance-none ring-transparent", {
|
|
5450
5450
|
size: {
|
|
5451
5451
|
size: new SizeTheme({
|
|
5452
|
-
xs: '
|
|
5453
|
-
sm: '
|
|
5454
|
-
md: '
|
|
5455
|
-
lg: '
|
|
5456
|
-
xl: '
|
|
5452
|
+
xs: 'size-(--ui-size) [--size-unit:3]',
|
|
5453
|
+
sm: 'size-(--ui-size) [--size-unit:3.5]',
|
|
5454
|
+
md: 'size-(--ui-size) [--size-unit:4]',
|
|
5455
|
+
lg: 'size-(--ui-size) [--size-unit:4.5]',
|
|
5456
|
+
xl: 'size-(--ui-size) [--size-unit:5]'
|
|
5457
5457
|
}),
|
|
5458
5458
|
text: new FontSizeTheme()
|
|
5459
5459
|
},
|
|
@@ -5488,11 +5488,11 @@ const defaultCheckTheme = new ComponentTheme("span", "invisible col-start-1 row-
|
|
|
5488
5488
|
const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
|
|
5489
5489
|
size: {
|
|
5490
5490
|
height: new SizeTheme({
|
|
5491
|
-
xs: 'h-
|
|
5492
|
-
sm: 'h-
|
|
5493
|
-
md: 'h-
|
|
5494
|
-
lg: 'h-
|
|
5495
|
-
xl: 'h-
|
|
5491
|
+
xs: 'h-[calc(var(--lh)*var(--fs))]',
|
|
5492
|
+
sm: 'h-[calc(var(--lh)*var(--fs))]',
|
|
5493
|
+
md: 'h-[calc(var(--lh)*var(--fs))]',
|
|
5494
|
+
lg: 'h-[calc(var(--lh)*var(--fs))]',
|
|
5495
|
+
xl: 'h-[calc(var(--lh)*var(--fs))]'
|
|
5496
5496
|
})
|
|
5497
5497
|
},
|
|
5498
5498
|
layout: {
|
package/dist/index.js
CHANGED
|
@@ -3709,15 +3709,15 @@ class LineHeightTheme extends BaseTheme {
|
|
|
3709
3709
|
constructor(customMapping) {
|
|
3710
3710
|
super();
|
|
3711
3711
|
/** Extra-small line height - matches text-xs default line height */
|
|
3712
|
-
this.xs = "[--lh
|
|
3712
|
+
this.xs = "[--lh:1.333]"; // calc(1 / 0.75) ≈ 1.333
|
|
3713
3713
|
/** Small line height - matches text-sm default line height */
|
|
3714
|
-
this.sm = "[--lh
|
|
3714
|
+
this.sm = "[--lh:1.429]"; // calc(1.25 / 0.875) ≈ 1.429
|
|
3715
3715
|
/** Medium line height - matches text-base default line height */
|
|
3716
|
-
this.md = "[--lh
|
|
3716
|
+
this.md = "[--lh:1.5]"; // calc(1.5 / 1) = 1.5
|
|
3717
3717
|
/** Large line height - matches text-lg default line height */
|
|
3718
|
-
this.lg = "[--lh
|
|
3718
|
+
this.lg = "[--lh:1.556]"; // calc(1.75 / 1.125) ≈ 1.556
|
|
3719
3719
|
/** Extra-large line height - matches text-xl default line height */
|
|
3720
|
-
this.xl = "[--lh
|
|
3720
|
+
this.xl = "[--lh:1.4]"; // calc(1.75 / 1.25) = 1.4
|
|
3721
3721
|
if (customMapping) {
|
|
3722
3722
|
this.xs = customMapping.xs || this.xs;
|
|
3723
3723
|
this.sm = customMapping.sm || this.sm;
|
|
@@ -3739,29 +3739,29 @@ class LineHeightTheme extends BaseTheme {
|
|
|
3739
3739
|
// Static factory methods for different text size ranges
|
|
3740
3740
|
static createForSectionTitle() {
|
|
3741
3741
|
return new LineHeightTheme({
|
|
3742
|
-
xs: "[--lh
|
|
3743
|
-
sm: "[--lh
|
|
3744
|
-
md: "[--lh
|
|
3745
|
-
lg: "[--lh
|
|
3746
|
-
xl: "[--lh
|
|
3742
|
+
xs: "[--lh:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
|
|
3743
|
+
sm: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
|
|
3744
|
+
md: "[--lh:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
|
|
3745
|
+
lg: "[--lh:1]", // text-5xl: 1
|
|
3746
|
+
xl: "[--lh:1]" // text-6xl+: 1
|
|
3747
3747
|
});
|
|
3748
3748
|
}
|
|
3749
3749
|
static createForPageTitle() {
|
|
3750
3750
|
return new LineHeightTheme({
|
|
3751
|
-
xs: "[--lh
|
|
3752
|
-
sm: "[--lh
|
|
3753
|
-
md: "[--lh
|
|
3754
|
-
lg: "[--lh
|
|
3755
|
-
xl: "[--lh
|
|
3751
|
+
xs: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
|
|
3752
|
+
sm: "[--lh:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
|
|
3753
|
+
md: "[--lh:1]", // text-5xl: 1
|
|
3754
|
+
lg: "[--lh:1]", // text-6xl: 1
|
|
3755
|
+
xl: "[--lh:1]" // text-7xl: 1
|
|
3756
3756
|
});
|
|
3757
3757
|
}
|
|
3758
3758
|
static createForTitle() {
|
|
3759
3759
|
return new LineHeightTheme({
|
|
3760
|
-
xs: "[--lh
|
|
3761
|
-
sm: "[--lh
|
|
3762
|
-
md: "[--lh
|
|
3763
|
-
lg: "[--lh
|
|
3764
|
-
xl: "[--lh
|
|
3760
|
+
xs: "[--lh:1.556]", // text-lg: calc(1.75 / 1.125) ≈ 1.556
|
|
3761
|
+
sm: "[--lh:1.4]", // text-xl: calc(1.75 / 1.25) = 1.4
|
|
3762
|
+
md: "[--lh:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
|
|
3763
|
+
lg: "[--lh:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
|
|
3764
|
+
xl: "[--lh:1.111]" // text-4xl: calc(2.5 / 2.25) ≈ 1.111
|
|
3765
3765
|
});
|
|
3766
3766
|
}
|
|
3767
3767
|
}
|
|
@@ -4880,11 +4880,11 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
|
|
|
4880
4880
|
gap: new GapTheme(true),
|
|
4881
4881
|
text: new FontSizeTheme(),
|
|
4882
4882
|
lineHeight: new LineHeightTheme({
|
|
4883
|
-
xs: "[--lh
|
|
4884
|
-
sm: "[--lh
|
|
4885
|
-
md: "[--lh
|
|
4886
|
-
lg: "[--lh
|
|
4887
|
-
xl: "[--lh
|
|
4883
|
+
xs: "[--lh:1.3]",
|
|
4884
|
+
sm: "[--lh:1.3]",
|
|
4885
|
+
md: "[--lh:1.3]",
|
|
4886
|
+
lg: "[--lh:1.3]",
|
|
4887
|
+
xl: "[--lh:1.3]"
|
|
4888
4888
|
}),
|
|
4889
4889
|
},
|
|
4890
4890
|
appearance: {
|
|
@@ -5451,11 +5451,11 @@ var _a, _b, _c;
|
|
|
5451
5451
|
const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-start-1 cursor-pointer appearance-none ring-transparent", {
|
|
5452
5452
|
size: {
|
|
5453
5453
|
size: new SizeTheme({
|
|
5454
|
-
xs: '
|
|
5455
|
-
sm: '
|
|
5456
|
-
md: '
|
|
5457
|
-
lg: '
|
|
5458
|
-
xl: '
|
|
5454
|
+
xs: 'size-(--ui-size) [--size-unit:3]',
|
|
5455
|
+
sm: 'size-(--ui-size) [--size-unit:3.5]',
|
|
5456
|
+
md: 'size-(--ui-size) [--size-unit:4]',
|
|
5457
|
+
lg: 'size-(--ui-size) [--size-unit:4.5]',
|
|
5458
|
+
xl: 'size-(--ui-size) [--size-unit:5]'
|
|
5459
5459
|
}),
|
|
5460
5460
|
text: new FontSizeTheme()
|
|
5461
5461
|
},
|
|
@@ -5490,11 +5490,11 @@ const defaultCheckTheme = new ComponentTheme("span", "invisible col-start-1 row-
|
|
|
5490
5490
|
const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
|
|
5491
5491
|
size: {
|
|
5492
5492
|
height: new SizeTheme({
|
|
5493
|
-
xs: 'h-
|
|
5494
|
-
sm: 'h-
|
|
5495
|
-
md: 'h-
|
|
5496
|
-
lg: 'h-
|
|
5497
|
-
xl: 'h-
|
|
5493
|
+
xs: 'h-[calc(var(--lh)*var(--fs))]',
|
|
5494
|
+
sm: 'h-[calc(var(--lh)*var(--fs))]',
|
|
5495
|
+
md: 'h-[calc(var(--lh)*var(--fs))]',
|
|
5496
|
+
lg: 'h-[calc(var(--lh)*var(--fs))]',
|
|
5497
|
+
xl: 'h-[calc(var(--lh)*var(--fs))]'
|
|
5498
5498
|
})
|
|
5499
5499
|
},
|
|
5500
5500
|
layout: {
|
package/dist/ui.css
CHANGED
|
@@ -252,6 +252,13 @@
|
|
|
252
252
|
--br-base: var(--spacing);
|
|
253
253
|
--ui-br-base: calc(var(--spacing) * 0.5);
|
|
254
254
|
--fs-base: calc(var(--spacing) * 0.5);
|
|
255
|
+
--lh: 1;
|
|
256
|
+
--fs-unit: 8;
|
|
257
|
+
--gap-unit: 1;
|
|
258
|
+
--aspect-ratio: 1;
|
|
259
|
+
--py-unit: 1;
|
|
260
|
+
--br-unit: 1;
|
|
261
|
+
--size-unit: 1;
|
|
255
262
|
}
|
|
256
263
|
}
|
|
257
264
|
@layer base {
|
|
@@ -499,26 +506,15 @@
|
|
|
499
506
|
.table-cell {
|
|
500
507
|
display: table-cell;
|
|
501
508
|
}
|
|
502
|
-
.
|
|
503
|
-
|
|
509
|
+
.aspect-ratio {
|
|
510
|
+
aspect-ratio: var(--aspect-ratio);
|
|
504
511
|
}
|
|
505
|
-
.
|
|
506
|
-
|
|
512
|
+
.size-\(--ui-size\) {
|
|
513
|
+
width: var(--ui-size);
|
|
514
|
+
height: var(--ui-size);
|
|
507
515
|
}
|
|
508
|
-
.h
|
|
509
|
-
height: calc(var(--
|
|
510
|
-
}
|
|
511
|
-
.h-4\.5 {
|
|
512
|
-
height: calc(var(--spacing) * 4.5);
|
|
513
|
-
}
|
|
514
|
-
.h-5 {
|
|
515
|
-
height: calc(var(--spacing) * 5);
|
|
516
|
-
}
|
|
517
|
-
.h-6 {
|
|
518
|
-
height: calc(var(--spacing) * 6);
|
|
519
|
-
}
|
|
520
|
-
.h-7 {
|
|
521
|
-
height: calc(var(--spacing) * 7);
|
|
516
|
+
.h-\[calc\(var\(--lh\)\*var\(--fs\)\)\] {
|
|
517
|
+
height: calc(var(--lh) * var(--fs));
|
|
522
518
|
}
|
|
523
519
|
.h-fit {
|
|
524
520
|
height: fit-content;
|
|
@@ -526,21 +522,6 @@
|
|
|
526
522
|
.h-px {
|
|
527
523
|
height: 1px;
|
|
528
524
|
}
|
|
529
|
-
.w-3 {
|
|
530
|
-
width: calc(var(--spacing) * 3);
|
|
531
|
-
}
|
|
532
|
-
.w-3\.5 {
|
|
533
|
-
width: calc(var(--spacing) * 3.5);
|
|
534
|
-
}
|
|
535
|
-
.w-4 {
|
|
536
|
-
width: calc(var(--spacing) * 4);
|
|
537
|
-
}
|
|
538
|
-
.w-4\.5 {
|
|
539
|
-
width: calc(var(--spacing) * 4.5);
|
|
540
|
-
}
|
|
541
|
-
.w-5 {
|
|
542
|
-
width: calc(var(--spacing) * 5);
|
|
543
|
-
}
|
|
544
525
|
.w-fit {
|
|
545
526
|
width: fit-content;
|
|
546
527
|
}
|
|
@@ -1644,32 +1625,32 @@
|
|
|
1644
1625
|
.\[--gap-unit\:6\] {
|
|
1645
1626
|
--gap-unit: 6;
|
|
1646
1627
|
}
|
|
1647
|
-
.\[--lh
|
|
1648
|
-
--lh
|
|
1628
|
+
.\[--lh\:1\.2\] {
|
|
1629
|
+
--lh: 1.2;
|
|
1649
1630
|
}
|
|
1650
|
-
.\[--lh
|
|
1651
|
-
--lh
|
|
1631
|
+
.\[--lh\:1\.3\] {
|
|
1632
|
+
--lh: 1.3;
|
|
1652
1633
|
}
|
|
1653
|
-
.\[--lh
|
|
1654
|
-
--lh
|
|
1634
|
+
.\[--lh\:1\.4\] {
|
|
1635
|
+
--lh: 1.4;
|
|
1655
1636
|
}
|
|
1656
|
-
.\[--lh
|
|
1657
|
-
--lh
|
|
1637
|
+
.\[--lh\:1\.5\] {
|
|
1638
|
+
--lh: 1.5;
|
|
1658
1639
|
}
|
|
1659
|
-
.\[--lh
|
|
1660
|
-
--lh
|
|
1640
|
+
.\[--lh\:1\.111\] {
|
|
1641
|
+
--lh: 1.111;
|
|
1661
1642
|
}
|
|
1662
|
-
.\[--lh
|
|
1663
|
-
--lh
|
|
1643
|
+
.\[--lh\:1\.333\] {
|
|
1644
|
+
--lh: 1.333;
|
|
1664
1645
|
}
|
|
1665
|
-
.\[--lh
|
|
1666
|
-
--lh
|
|
1646
|
+
.\[--lh\:1\.429\] {
|
|
1647
|
+
--lh: 1.429;
|
|
1667
1648
|
}
|
|
1668
|
-
.\[--lh
|
|
1669
|
-
--lh
|
|
1649
|
+
.\[--lh\:1\.556\] {
|
|
1650
|
+
--lh: 1.556;
|
|
1670
1651
|
}
|
|
1671
|
-
.\[--lh
|
|
1672
|
-
--lh
|
|
1652
|
+
.\[--lh\:1\] {
|
|
1653
|
+
--lh: 1;
|
|
1673
1654
|
}
|
|
1674
1655
|
.\[--py-unit\:0\.5\] {
|
|
1675
1656
|
--py-unit: 0.5;
|
|
@@ -1713,6 +1694,21 @@
|
|
|
1713
1694
|
.\[--py-unit\:20\] {
|
|
1714
1695
|
--py-unit: 20;
|
|
1715
1696
|
}
|
|
1697
|
+
.\[--size-unit\:3\.5\] {
|
|
1698
|
+
--size-unit: 3.5;
|
|
1699
|
+
}
|
|
1700
|
+
.\[--size-unit\:3\] {
|
|
1701
|
+
--size-unit: 3;
|
|
1702
|
+
}
|
|
1703
|
+
.\[--size-unit\:4\.5\] {
|
|
1704
|
+
--size-unit: 4.5;
|
|
1705
|
+
}
|
|
1706
|
+
.\[--size-unit\:4\] {
|
|
1707
|
+
--size-unit: 4;
|
|
1708
|
+
}
|
|
1709
|
+
.\[--size-unit\:5\] {
|
|
1710
|
+
--size-unit: 5;
|
|
1711
|
+
}
|
|
1716
1712
|
.ring-inset {
|
|
1717
1713
|
--tw-ring-inset: inset;
|
|
1718
1714
|
}
|
|
@@ -2598,21 +2594,15 @@
|
|
|
2598
2594
|
@layer theme {
|
|
2599
2595
|
@layer base {
|
|
2600
2596
|
:where(*) {
|
|
2601
|
-
--gap-unit: 1;
|
|
2602
2597
|
--gap: calc(var(--gap-unit) * var(--layout-spacing));
|
|
2603
2598
|
--ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
|
|
2604
|
-
--aspect-ratio: 1;
|
|
2605
|
-
--py-unit: 1;
|
|
2606
2599
|
--px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
|
|
2607
2600
|
--ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
|
|
2608
2601
|
--py: calc(var(--py-unit) * var(--layout-spacing));
|
|
2609
2602
|
--ui-py: calc(var(--py-unit) * var(--ui-spacing));
|
|
2610
|
-
--
|
|
2603
|
+
--ui-size: calc(var(--size-unit) * var(--ui-spacing));
|
|
2611
2604
|
--br: calc(var(--br-unit) * var(--br-base));
|
|
2612
2605
|
--ui-br: calc(var(--br-unit) * var(--ui-br-base));
|
|
2613
|
-
--lh-unit: 1.5;
|
|
2614
|
-
--lh: var(--lh-unit);
|
|
2615
|
-
--fs-unit: 8;
|
|
2616
2606
|
--fs: calc(var(--fs-unit) * var(--fs-base));
|
|
2617
2607
|
}
|
|
2618
2608
|
}
|
package/dist/vars.css
CHANGED
|
@@ -156,29 +156,30 @@
|
|
|
156
156
|
--breakpoint-tablet: 48rem;
|
|
157
157
|
--breakpoint-laptop: 64rem;
|
|
158
158
|
--breakpoint-desktop: 80rem;
|
|
159
|
+
|
|
160
|
+
--lh: 1;
|
|
161
|
+
--fs-unit: 8; /* Default to text-base (1rem = 8 * 0.125rem) */
|
|
162
|
+
--gap-unit: 1;
|
|
163
|
+
--aspect-ratio: 1;
|
|
164
|
+
--py-unit: 1;
|
|
165
|
+
--br-unit: 1;
|
|
166
|
+
--size-unit: 1;
|
|
159
167
|
}
|
|
160
168
|
|
|
161
169
|
@layer base {
|
|
162
170
|
:where(*) {
|
|
163
|
-
--gap-unit: 1;
|
|
164
171
|
--gap: calc(var(--gap-unit) * var(--layout-spacing));
|
|
165
172
|
--ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
|
|
166
173
|
|
|
167
|
-
--aspect-ratio: 1;
|
|
168
|
-
--py-unit: 1;
|
|
169
174
|
--px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
|
|
170
175
|
--ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
|
|
171
176
|
--py: calc(var(--py-unit) * var(--layout-spacing));
|
|
172
177
|
--ui-py: calc(var(--py-unit) * var(--ui-spacing));
|
|
178
|
+
--ui-size: calc(var(--size-unit) * var(--ui-spacing));
|
|
173
179
|
|
|
174
|
-
--br-unit: 1;
|
|
175
180
|
--br: calc(var(--br-unit) * var(--br-base));
|
|
176
181
|
--ui-br: calc(var(--br-unit) * var(--ui-br-base));
|
|
177
182
|
|
|
178
|
-
--lh-unit: 1.5;
|
|
179
|
-
--lh: var(--lh-unit);
|
|
180
|
-
|
|
181
|
-
--fs-unit: 8; /* Default to text-base (1rem = 8 * 0.125rem) */
|
|
182
183
|
--fs: calc(var(--fs-unit) * var(--fs-base));
|
|
183
184
|
}
|
|
184
185
|
}
|
package/package.json
CHANGED