@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.
@@ -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,CAAuB;IACjC,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAuB;IACjC,iEAAiE;IACjE,EAAE,EAAE,MAAM,CAAqB;IAC/B,8DAA8D;IAC9D,EAAE,EAAE,MAAM,CAAuB;IACjC,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAqB;gBAEnB,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"}
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-unit:1.333]"; // calc(1 / 0.75) ≈ 1.333
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-unit:1.429]"; // calc(1.25 / 0.875) ≈ 1.429
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-unit:1.5]"; // calc(1.5 / 1) = 1.5
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-unit:1.556]"; // calc(1.75 / 1.125) ≈ 1.556
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-unit:1.4]"; // calc(1.75 / 1.25) = 1.4
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-unit:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
3741
- sm: "[--lh-unit:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
3742
- md: "[--lh-unit:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
3743
- lg: "[--lh-unit:1]", // text-5xl: 1
3744
- xl: "[--lh-unit:1]" // text-6xl+: 1
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-unit:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
3750
- sm: "[--lh-unit:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
3751
- md: "[--lh-unit:1]", // text-5xl: 1
3752
- lg: "[--lh-unit:1]", // text-6xl: 1
3753
- xl: "[--lh-unit:1]" // text-7xl: 1
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-unit:1.556]", // text-lg: calc(1.75 / 1.125) ≈ 1.556
3759
- sm: "[--lh-unit:1.4]", // text-xl: calc(1.75 / 1.25) = 1.4
3760
- md: "[--lh-unit:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
3761
- lg: "[--lh-unit:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
3762
- xl: "[--lh-unit:1.111]" // text-4xl: calc(2.5 / 2.25) ≈ 1.111
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-unit:1.3]",
4882
- sm: "[--lh-unit:1.3]",
4883
- md: "[--lh-unit:1.3]",
4884
- lg: "[--lh-unit:1.3]",
4885
- xl: "[--lh-unit:1.3]"
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: 'h-3 w-3',
5453
- sm: 'h-3.5 w-3.5',
5454
- md: 'h-4 w-4',
5455
- lg: 'h-4.5 w-4.5',
5456
- xl: 'h-5 w-5'
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-4',
5492
- sm: 'h-5',
5493
- md: 'h-6',
5494
- lg: 'h-7',
5495
- xl: 'h-7'
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-unit:1.333]"; // calc(1 / 0.75) ≈ 1.333
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-unit:1.429]"; // calc(1.25 / 0.875) ≈ 1.429
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-unit:1.5]"; // calc(1.5 / 1) = 1.5
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-unit:1.556]"; // calc(1.75 / 1.125) ≈ 1.556
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-unit:1.4]"; // calc(1.75 / 1.25) = 1.4
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-unit:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
3743
- sm: "[--lh-unit:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
3744
- md: "[--lh-unit:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
3745
- lg: "[--lh-unit:1]", // text-5xl: 1
3746
- xl: "[--lh-unit:1]" // text-6xl+: 1
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-unit:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
3752
- sm: "[--lh-unit:1.111]", // text-4xl: calc(2.5 / 2.25) ≈ 1.111
3753
- md: "[--lh-unit:1]", // text-5xl: 1
3754
- lg: "[--lh-unit:1]", // text-6xl: 1
3755
- xl: "[--lh-unit:1]" // text-7xl: 1
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-unit:1.556]", // text-lg: calc(1.75 / 1.125) ≈ 1.556
3761
- sm: "[--lh-unit:1.4]", // text-xl: calc(1.75 / 1.25) = 1.4
3762
- md: "[--lh-unit:1.333]", // text-2xl: calc(2 / 1.5) ≈ 1.333
3763
- lg: "[--lh-unit:1.2]", // text-3xl: calc(2.25 / 1.875) = 1.2
3764
- xl: "[--lh-unit:1.111]" // text-4xl: calc(2.5 / 2.25) ≈ 1.111
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-unit:1.3]",
4884
- sm: "[--lh-unit:1.3]",
4885
- md: "[--lh-unit:1.3]",
4886
- lg: "[--lh-unit:1.3]",
4887
- xl: "[--lh-unit:1.3]"
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: 'h-3 w-3',
5455
- sm: 'h-3.5 w-3.5',
5456
- md: 'h-4 w-4',
5457
- lg: 'h-4.5 w-4.5',
5458
- xl: 'h-5 w-5'
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-4',
5494
- sm: 'h-5',
5495
- md: 'h-6',
5496
- lg: 'h-7',
5497
- xl: 'h-7'
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
- .h-3 {
503
- height: calc(var(--spacing) * 3);
509
+ .aspect-ratio {
510
+ aspect-ratio: var(--aspect-ratio);
504
511
  }
505
- .h-3\.5 {
506
- height: calc(var(--spacing) * 3.5);
512
+ .size-\(--ui-size\) {
513
+ width: var(--ui-size);
514
+ height: var(--ui-size);
507
515
  }
508
- .h-4 {
509
- height: calc(var(--spacing) * 4);
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-unit\:1\.2\] {
1648
- --lh-unit: 1.2;
1628
+ .\[--lh\:1\.2\] {
1629
+ --lh: 1.2;
1649
1630
  }
1650
- .\[--lh-unit\:1\.3\] {
1651
- --lh-unit: 1.3;
1631
+ .\[--lh\:1\.3\] {
1632
+ --lh: 1.3;
1652
1633
  }
1653
- .\[--lh-unit\:1\.4\] {
1654
- --lh-unit: 1.4;
1634
+ .\[--lh\:1\.4\] {
1635
+ --lh: 1.4;
1655
1636
  }
1656
- .\[--lh-unit\:1\.5\] {
1657
- --lh-unit: 1.5;
1637
+ .\[--lh\:1\.5\] {
1638
+ --lh: 1.5;
1658
1639
  }
1659
- .\[--lh-unit\:1\.111\] {
1660
- --lh-unit: 1.111;
1640
+ .\[--lh\:1\.111\] {
1641
+ --lh: 1.111;
1661
1642
  }
1662
- .\[--lh-unit\:1\.333\] {
1663
- --lh-unit: 1.333;
1643
+ .\[--lh\:1\.333\] {
1644
+ --lh: 1.333;
1664
1645
  }
1665
- .\[--lh-unit\:1\.429\] {
1666
- --lh-unit: 1.429;
1646
+ .\[--lh\:1\.429\] {
1647
+ --lh: 1.429;
1667
1648
  }
1668
- .\[--lh-unit\:1\.556\] {
1669
- --lh-unit: 1.556;
1649
+ .\[--lh\:1\.556\] {
1650
+ --lh: 1.556;
1670
1651
  }
1671
- .\[--lh-unit\:1\] {
1672
- --lh-unit: 1;
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
- --br-unit: 1;
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.3.1-alpha.20251001144233.cfeb345",
3
+ "version": "0.3.1-alpha.20251002111935.e184ae6",
4
4
  "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
5
5
  "author": "",
6
6
  "license": "ISC",