klun-ui 0.1.22 → 0.2.0

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 (16) hide show
  1. package/CHANGELOG.md +73 -0
  2. package/README.md +41 -15
  3. package/dist/{chunk-UMR3IWCQ.cjs → chunk-T7O3RMWL.cjs} +501 -497
  4. package/dist/chunk-T7O3RMWL.cjs.map +1 -0
  5. package/dist/{chunk-T3IFNMYU.js → chunk-UJOMGMCV.js} +502 -498
  6. package/dist/chunk-UJOMGMCV.js.map +1 -0
  7. package/dist/index.cjs +158 -158
  8. package/dist/index.d.cts +217 -205
  9. package/dist/index.d.ts +217 -205
  10. package/dist/index.js +1 -1
  11. package/dist/styles.css +222 -80
  12. package/dist/templates/index.cjs +89 -89
  13. package/dist/templates/index.js +1 -1
  14. package/package.json +1 -1
  15. package/dist/chunk-T3IFNMYU.js.map +0 -1
  16. package/dist/chunk-UMR3IWCQ.cjs.map +0 -1
package/dist/styles.css CHANGED
@@ -565,7 +565,7 @@
565
565
  --klun-state-white-dark: var(--klun-teal-400);
566
566
  --klun-static-static-black: var(--klun-950);
567
567
  --klun-static-static-white: var(--klun-0);
568
- --klun-stroke-soft-200: var(--klun-800);
568
+ --klun-stroke-soft-200: var(--klun-600);
569
569
  --klun-stroke-strong-950: var(--klun-0);
570
570
  --klun-stroke-sub-300: var(--klun-600);
571
571
  --klun-stroke-white-0: var(--klun-950);
@@ -1043,6 +1043,119 @@
1043
1043
  --klun-radius-4xl: 32px;
1044
1044
  }
1045
1045
 
1046
+ /* src/styles/tokens/density.css */
1047
+ :root,
1048
+ [data-density=default] {
1049
+ --klun-control-h-2xs: 24px;
1050
+ --klun-control-h-xs: 28px;
1051
+ --klun-control-h-sm: 32px;
1052
+ --klun-control-h-md: 36px;
1053
+ --klun-control-h-lg: 40px;
1054
+ --klun-control-h-xl: 48px;
1055
+ --klun-control-px-2xs: 8px;
1056
+ --klun-control-px-xs: 10px;
1057
+ --klun-control-px-sm: 12px;
1058
+ --klun-control-px-md: 14px;
1059
+ --klun-control-px-lg: 16px;
1060
+ --klun-control-px-xl: 20px;
1061
+ --klun-field-px-xs: 8px;
1062
+ --klun-field-px-sm: 10px;
1063
+ --klun-field-px-md: 12px;
1064
+ --klun-field-px-lg: 14px;
1065
+ --klun-field-pad-xs: 6px 8px;
1066
+ --klun-field-pad-sm: 8px 10px;
1067
+ --klun-field-pad-md: 10px 12px;
1068
+ --klun-field-pad-lg: 12px 14px;
1069
+ }
1070
+ [data-density=compact] {
1071
+ --klun-control-h-2xs: 22px;
1072
+ --klun-control-h-xs: 24px;
1073
+ --klun-control-h-sm: 28px;
1074
+ --klun-control-h-md: 32px;
1075
+ --klun-control-h-lg: 36px;
1076
+ --klun-control-h-xl: 40px;
1077
+ --klun-control-px-2xs: 7px;
1078
+ --klun-control-px-xs: 8px;
1079
+ --klun-control-px-sm: 10px;
1080
+ --klun-control-px-md: 12px;
1081
+ --klun-control-px-lg: 14px;
1082
+ --klun-control-px-xl: 17px;
1083
+ --klun-field-px-xs: 7px;
1084
+ --klun-field-px-sm: 8px;
1085
+ --klun-field-px-md: 10px;
1086
+ --klun-field-px-lg: 12px;
1087
+ --klun-field-pad-xs: 5px 7px;
1088
+ --klun-field-pad-sm: 7px 8px;
1089
+ --klun-field-pad-md: 8px 10px;
1090
+ --klun-field-pad-lg: 10px 12px;
1091
+ }
1092
+ [data-density=compact] .klun-checkbox--small {
1093
+ --_box: 16px;
1094
+ }
1095
+ [data-density=compact] .klun-checkbox--medium {
1096
+ --_box: 18px;
1097
+ }
1098
+ [data-density=compact] .klun-checkbox--large {
1099
+ --_box: 22px;
1100
+ }
1101
+ [data-density=compact] .klun-radio--small {
1102
+ --_box: 14px;
1103
+ }
1104
+ [data-density=compact] .klun-radio--medium {
1105
+ --_box: 18px;
1106
+ }
1107
+ [data-density=compact] .klun-radio--large {
1108
+ --_box: 22px;
1109
+ }
1110
+ [data-density=compact] .klun-switch--small {
1111
+ --_track-w: 30px;
1112
+ --_track-h: 16px;
1113
+ --_thumb: 12px;
1114
+ }
1115
+ [data-density=compact] .klun-switch--medium {
1116
+ --_track-w: 34px;
1117
+ --_track-h: 18px;
1118
+ --_thumb: 14px;
1119
+ }
1120
+ [data-density=compact] .klun-switch--large {
1121
+ --_track-w: 40px;
1122
+ --_track-h: 22px;
1123
+ --_thumb: 18px;
1124
+ }
1125
+ [data-density=default] .klun-checkbox--small {
1126
+ --_box: 18px;
1127
+ }
1128
+ [data-density=default] .klun-checkbox--medium {
1129
+ --_box: 20px;
1130
+ }
1131
+ [data-density=default] .klun-checkbox--large {
1132
+ --_box: 24px;
1133
+ }
1134
+ [data-density=default] .klun-radio--small {
1135
+ --_box: 16px;
1136
+ }
1137
+ [data-density=default] .klun-radio--medium {
1138
+ --_box: 20px;
1139
+ }
1140
+ [data-density=default] .klun-radio--large {
1141
+ --_box: 24px;
1142
+ }
1143
+ [data-density=default] .klun-switch--small {
1144
+ --_track-w: 32px;
1145
+ --_track-h: 18px;
1146
+ --_thumb: 14px;
1147
+ }
1148
+ [data-density=default] .klun-switch--medium {
1149
+ --_track-w: 36px;
1150
+ --_track-h: 20px;
1151
+ --_thumb: 16px;
1152
+ }
1153
+ [data-density=default] .klun-switch--large {
1154
+ --_track-w: 44px;
1155
+ --_track-h: 24px;
1156
+ --_thumb: 20px;
1157
+ }
1158
+
1046
1159
  /* src/styles/tokens/motion.css */
1047
1160
  :root {
1048
1161
  --klun-duration-100: 100ms;
@@ -1123,25 +1236,31 @@ body {
1123
1236
  --_on-accent: var(--klun-static-static-white);
1124
1237
  --_focus: var(--klun-shadow-button-error-focus);
1125
1238
  }
1239
+ .klun-button--tiny {
1240
+ height: var(--klun-control-h-xs, 28px);
1241
+ padding: 0 var(--klun-control-px-xs, 10px);
1242
+ border-radius: var(--klun-radius-md);
1243
+ gap: 4px;
1244
+ }
1126
1245
  .klun-button--xsmall {
1127
- height: 32px;
1128
- padding: 0 12px;
1246
+ height: var(--klun-control-h-sm, 32px);
1247
+ padding: 0 var(--klun-control-px-sm, 12px);
1129
1248
  border-radius: var(--klun-radius-md);
1130
1249
  gap: 4px;
1131
1250
  }
1132
1251
  .klun-button--small {
1133
- height: 36px;
1134
- padding: 0 14px;
1252
+ height: var(--klun-control-h-md, 36px);
1253
+ padding: 0 var(--klun-control-px-md, 14px);
1135
1254
  border-radius: var(--klun-radius-md);
1136
1255
  }
1137
1256
  .klun-button--medium {
1138
- height: 40px;
1139
- padding: 0 16px;
1257
+ height: var(--klun-control-h-lg, 40px);
1258
+ padding: 0 var(--klun-control-px-lg, 16px);
1140
1259
  border-radius: var(--klun-radius-lg);
1141
1260
  }
1142
1261
  .klun-button--large {
1143
- height: 48px;
1144
- padding: 0 20px;
1262
+ height: var(--klun-control-h-xl, 48px);
1263
+ padding: 0 var(--klun-control-px-xl, 20px);
1145
1264
  border-radius: var(--klun-radius-xl);
1146
1265
  gap: 8px;
1147
1266
  font: var(--klun-text-label-md);
@@ -1237,27 +1356,33 @@ body {
1237
1356
  --_on-accent: var(--klun-static-static-white);
1238
1357
  --_focus: var(--klun-shadow-button-error-focus);
1239
1358
  }
1359
+ .klun-icon-button--tiny {
1360
+ width: var(--klun-control-h-2xs, 24px);
1361
+ height: var(--klun-control-h-2xs, 24px);
1362
+ border-radius: var(--klun-radius-md);
1363
+ font-size: 16px;
1364
+ }
1240
1365
  .klun-icon-button--xsmall {
1241
- width: 28px;
1242
- height: 28px;
1366
+ width: var(--klun-control-h-xs, 28px);
1367
+ height: var(--klun-control-h-xs, 28px);
1243
1368
  border-radius: var(--klun-radius-md);
1244
1369
  font-size: 18px;
1245
1370
  }
1246
1371
  .klun-icon-button--small {
1247
- width: 32px;
1248
- height: 32px;
1372
+ width: var(--klun-control-h-sm, 32px);
1373
+ height: var(--klun-control-h-sm, 32px);
1249
1374
  border-radius: var(--klun-radius-md);
1250
1375
  font-size: 20px;
1251
1376
  }
1252
1377
  .klun-icon-button--medium {
1253
- width: 36px;
1254
- height: 36px;
1378
+ width: var(--klun-control-h-md, 36px);
1379
+ height: var(--klun-control-h-md, 36px);
1255
1380
  border-radius: var(--klun-radius-lg);
1256
1381
  font-size: 20px;
1257
1382
  }
1258
1383
  .klun-icon-button--large {
1259
- width: 40px;
1260
- height: 40px;
1384
+ width: var(--klun-control-h-lg, 40px);
1385
+ height: var(--klun-control-h-lg, 40px);
1261
1386
  border-radius: var(--klun-radius-lg);
1262
1387
  font-size: 20px;
1263
1388
  }
@@ -1466,13 +1591,13 @@ body {
1466
1591
  opacity var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
1467
1592
  }
1468
1593
  .klun-compact-button--small {
1469
- height: 24px;
1470
- min-width: 24px;
1594
+ height: var(--klun-control-h-2xs, 24px);
1595
+ min-width: var(--klun-control-h-2xs, 24px);
1471
1596
  font-size: 16px;
1472
1597
  }
1473
1598
  .klun-compact-button--medium {
1474
- height: 32px;
1475
- min-width: 32px;
1599
+ height: var(--klun-control-h-sm, 32px);
1600
+ min-width: var(--klun-control-h-sm, 32px);
1476
1601
  font-size: 18px;
1477
1602
  }
1478
1603
  .klun-compact-button--has-label {
@@ -1650,18 +1775,18 @@ body {
1650
1775
  color: var(--klun-text-strong-950);
1651
1776
  }
1652
1777
  .klun-button-group--small .klun-button-group__item {
1653
- height: 32px;
1654
- padding: 0 12px;
1778
+ height: var(--klun-control-h-sm, 32px);
1779
+ padding: 0 var(--klun-control-px-sm, 12px);
1655
1780
  font: var(--klun-text-label-sm);
1656
1781
  }
1657
1782
  .klun-button-group--medium .klun-button-group__item {
1658
- height: 36px;
1659
- padding: 0 14px;
1783
+ height: var(--klun-control-h-md, 36px);
1784
+ padding: 0 var(--klun-control-px-md, 14px);
1660
1785
  font: var(--klun-text-label-sm);
1661
1786
  }
1662
1787
  .klun-button-group--large .klun-button-group__item {
1663
- height: 40px;
1664
- padding: 0 16px;
1788
+ height: var(--klun-control-h-lg, 40px);
1789
+ padding: 0 var(--klun-control-px-lg, 16px);
1665
1790
  font: var(--klun-text-label-md);
1666
1791
  }
1667
1792
  .klun-button-group--small .klun-button-group__item--icon-only {
@@ -1713,16 +1838,16 @@ body {
1713
1838
  box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
1714
1839
  }
1715
1840
  .klun-copy-button--sm {
1716
- height: 28px;
1717
- min-width: 28px;
1841
+ height: var(--klun-control-h-xs, 28px);
1842
+ min-width: var(--klun-control-h-xs, 28px);
1718
1843
  }
1719
1844
  .klun-copy-button--md {
1720
- height: 32px;
1721
- min-width: 32px;
1845
+ height: var(--klun-control-h-sm, 32px);
1846
+ min-width: var(--klun-control-h-sm, 32px);
1722
1847
  }
1723
1848
  .klun-copy-button--lg {
1724
- height: 40px;
1725
- min-width: 40px;
1849
+ height: var(--klun-control-h-lg, 40px);
1850
+ min-width: var(--klun-control-h-lg, 40px);
1726
1851
  }
1727
1852
  .klun-copy-button--has-label {
1728
1853
  min-width: auto;
@@ -6421,22 +6546,22 @@ body {
6421
6546
  transition: background var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease), box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
6422
6547
  }
6423
6548
  .klun-compact-select--xsmall .klun-compact-select__trigger {
6424
- height: 28px;
6425
- padding: 0 8px;
6549
+ height: var(--klun-control-h-xs, 28px);
6550
+ padding: 0 var(--klun-control-px-2xs, 8px);
6426
6551
  gap: 4px;
6427
6552
  border-radius: var(--klun-radius-md);
6428
6553
  font: var(--klun-text-label-xs);
6429
6554
  }
6430
6555
  .klun-compact-select--small .klun-compact-select__trigger {
6431
- height: 32px;
6432
- padding: 0 10px;
6556
+ height: var(--klun-control-h-sm, 32px);
6557
+ padding: 0 var(--klun-control-px-xs, 10px);
6433
6558
  gap: 6px;
6434
6559
  border-radius: var(--klun-radius-md);
6435
6560
  font: var(--klun-text-label-sm);
6436
6561
  }
6437
6562
  .klun-compact-select--medium .klun-compact-select__trigger {
6438
- height: 36px;
6439
- padding: 0 12px;
6563
+ height: var(--klun-control-h-md, 36px);
6564
+ padding: 0 var(--klun-control-px-sm, 12px);
6440
6565
  gap: 6px;
6441
6566
  border-radius: var(--klun-radius-lg);
6442
6567
  font: var(--klun-text-label-sm);
@@ -6539,15 +6664,15 @@ body {
6539
6664
  cursor: pointer;
6540
6665
  }
6541
6666
  .klun-compact-select-for-input--small .klun-compact-select-for-input__trigger {
6542
- height: 36px;
6667
+ height: var(--klun-control-h-md, 36px);
6543
6668
  font: var(--klun-text-paragraph-sm);
6544
6669
  }
6545
6670
  .klun-compact-select-for-input--medium .klun-compact-select-for-input__trigger {
6546
- height: 40px;
6671
+ height: var(--klun-control-h-lg, 40px);
6547
6672
  font: var(--klun-text-paragraph-sm);
6548
6673
  }
6549
6674
  .klun-compact-select-for-input--large .klun-compact-select-for-input__trigger {
6550
- height: 48px;
6675
+ height: var(--klun-control-h-xl, 48px);
6551
6676
  font: var(--klun-text-paragraph-md);
6552
6677
  }
6553
6678
  .klun-compact-select-for-input--leading {
@@ -6623,17 +6748,17 @@ body {
6623
6748
  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
6624
6749
  }
6625
6750
  .klun-counter-input--small {
6626
- height: 32px;
6751
+ height: var(--klun-control-h-sm, 32px);
6627
6752
  border-radius: var(--klun-radius-md);
6628
6753
  font: var(--klun-text-label-sm);
6629
6754
  }
6630
6755
  .klun-counter-input--medium {
6631
- height: 36px;
6756
+ height: var(--klun-control-h-md, 36px);
6632
6757
  border-radius: var(--klun-radius-lg);
6633
6758
  font: var(--klun-text-label-md);
6634
6759
  }
6635
6760
  .klun-counter-input--large {
6636
- height: 40px;
6761
+ height: var(--klun-control-h-lg, 40px);
6637
6762
  border-radius: var(--klun-radius-lg);
6638
6763
  font: var(--klun-text-label-md);
6639
6764
  }
@@ -7240,21 +7365,27 @@ body {
7240
7365
  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
7241
7366
  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
7242
7367
  }
7368
+ .klun-input--xsmall {
7369
+ height: var(--klun-control-h-sm, 32px);
7370
+ padding: 0 var(--klun-field-px-xs, 8px);
7371
+ border-radius: var(--klun-radius-md);
7372
+ font: var(--klun-text-paragraph-sm);
7373
+ }
7243
7374
  .klun-input--small {
7244
- height: 36px;
7245
- padding: 0 10px;
7375
+ height: var(--klun-control-h-md, 36px);
7376
+ padding: 0 var(--klun-field-px-sm, 10px);
7246
7377
  border-radius: var(--klun-radius-lg);
7247
7378
  font: var(--klun-text-paragraph-sm);
7248
7379
  }
7249
7380
  .klun-input--medium {
7250
- height: 40px;
7251
- padding: 0 12px;
7381
+ height: var(--klun-control-h-lg, 40px);
7382
+ padding: 0 var(--klun-field-px-md, 12px);
7252
7383
  border-radius: var(--klun-radius-lg);
7253
7384
  font: var(--klun-text-paragraph-sm);
7254
7385
  }
7255
7386
  .klun-input--large {
7256
- height: 48px;
7257
- padding: 0 14px;
7387
+ height: var(--klun-control-h-xl, 48px);
7388
+ padding: 0 var(--klun-field-px-lg, 14px);
7258
7389
  border-radius: var(--klun-radius-xl);
7259
7390
  font: var(--klun-text-paragraph-md);
7260
7391
  }
@@ -7711,21 +7842,27 @@ body {
7711
7842
  cursor: pointer;
7712
7843
  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
7713
7844
  }
7845
+ .klun-select--xsmall .klun-select__trigger {
7846
+ height: var(--klun-control-h-sm, 32px);
7847
+ padding: 0 var(--klun-field-px-xs, 8px);
7848
+ border-radius: var(--klun-radius-md);
7849
+ font: var(--klun-text-paragraph-sm);
7850
+ }
7714
7851
  .klun-select--small .klun-select__trigger {
7715
- height: 36px;
7716
- padding: 0 10px;
7852
+ height: var(--klun-control-h-md, 36px);
7853
+ padding: 0 var(--klun-field-px-sm, 10px);
7717
7854
  border-radius: var(--klun-radius-lg);
7718
7855
  font: var(--klun-text-paragraph-sm);
7719
7856
  }
7720
7857
  .klun-select--medium .klun-select__trigger {
7721
- height: 40px;
7722
- padding: 0 12px;
7858
+ height: var(--klun-control-h-lg, 40px);
7859
+ padding: 0 var(--klun-field-px-md, 12px);
7723
7860
  border-radius: var(--klun-radius-lg);
7724
7861
  font: var(--klun-text-paragraph-sm);
7725
7862
  }
7726
7863
  .klun-select--large .klun-select__trigger {
7727
- height: 48px;
7728
- padding: 0 14px;
7864
+ height: var(--klun-control-h-xl, 48px);
7865
+ padding: 0 var(--klun-field-px-lg, 14px);
7729
7866
  border-radius: var(--klun-radius-xl);
7730
7867
  font: var(--klun-text-paragraph-md);
7731
7868
  }
@@ -7814,20 +7951,20 @@ body {
7814
7951
  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
7815
7952
  }
7816
7953
  .klun-select-menu__trigger--small {
7817
- height: 36px;
7818
- padding: 0 10px;
7954
+ height: var(--klun-control-h-md, 36px);
7955
+ padding: 0 var(--klun-field-px-sm, 10px);
7819
7956
  border-radius: var(--klun-radius-lg);
7820
7957
  font: var(--klun-text-paragraph-sm);
7821
7958
  }
7822
7959
  .klun-select-menu__trigger--medium {
7823
- height: 40px;
7824
- padding: 0 12px;
7960
+ height: var(--klun-control-h-lg, 40px);
7961
+ padding: 0 var(--klun-field-px-md, 12px);
7825
7962
  border-radius: var(--klun-radius-lg);
7826
7963
  font: var(--klun-text-paragraph-sm);
7827
7964
  }
7828
7965
  .klun-select-menu__trigger--large {
7829
- height: 48px;
7830
- padding: 0 14px;
7966
+ height: var(--klun-control-h-xl, 48px);
7967
+ padding: 0 var(--klun-field-px-lg, 14px);
7831
7968
  border-radius: var(--klun-radius-xl);
7832
7969
  font: var(--klun-text-paragraph-md);
7833
7970
  }
@@ -8064,18 +8201,23 @@ body {
8064
8201
  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
8065
8202
  transition: box-shadow var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
8066
8203
  }
8204
+ .klun-textarea--xsmall {
8205
+ --_pad: var(--klun-field-pad-xs, 6px 8px);
8206
+ --_radius: var(--klun-radius-md);
8207
+ --_font: var(--klun-text-paragraph-sm);
8208
+ }
8067
8209
  .klun-textarea--small {
8068
- --_pad: 8px 10px;
8210
+ --_pad: var(--klun-field-pad-sm, 8px 10px);
8069
8211
  --_radius: var(--klun-radius-lg);
8070
8212
  --_font: var(--klun-text-paragraph-sm);
8071
8213
  }
8072
8214
  .klun-textarea--medium {
8073
- --_pad: 10px 12px;
8215
+ --_pad: var(--klun-field-pad-md, 10px 12px);
8074
8216
  --_radius: var(--klun-radius-xl);
8075
8217
  --_font: var(--klun-text-paragraph-sm);
8076
8218
  }
8077
8219
  .klun-textarea--large {
8078
- --_pad: 12px 14px;
8220
+ --_pad: var(--klun-field-pad-lg, 12px 14px);
8079
8221
  --_radius: var(--klun-radius-xl);
8080
8222
  --_font: var(--klun-text-paragraph-md);
8081
8223
  }
@@ -8114,8 +8256,8 @@ body {
8114
8256
  display: inline-flex;
8115
8257
  align-items: center;
8116
8258
  gap: 4px;
8117
- height: 40px;
8118
- padding: 0 12px;
8259
+ height: var(--klun-control-h-lg, 40px);
8260
+ padding: 0 var(--klun-control-px-sm, 12px);
8119
8261
  border-radius: var(--klun-radius-lg);
8120
8262
  background: var(--klun-bg-white-0);
8121
8263
  box-shadow: inset 0 0 0 1px var(--klun-stroke-soft-200);
@@ -8805,8 +8947,8 @@ body {
8805
8947
  align-items: center;
8806
8948
  gap: 10px;
8807
8949
  width: 100%;
8808
- height: 40px;
8809
- padding: 0 12px 0 var(--klun-menu-indent, 12px);
8950
+ height: var(--klun-control-h-lg, 40px);
8951
+ padding: 0 var(--klun-control-px-sm, 12px) 0 var(--klun-menu-indent, 12px);
8810
8952
  justify-content: flex-start;
8811
8953
  border: none;
8812
8954
  border-radius: var(--klun-radius-lg);
@@ -8999,9 +9141,9 @@ body {
8999
9141
  display: inline-flex;
9000
9142
  align-items: center;
9001
9143
  justify-content: center;
9002
- min-width: 36px;
9003
- height: 36px;
9004
- padding: 0 8px;
9144
+ min-width: var(--klun-control-h-md, 36px);
9145
+ height: var(--klun-control-h-md, 36px);
9146
+ padding: 0 var(--klun-control-px-2xs, 8px);
9005
9147
  border: none;
9006
9148
  border-radius: var(--klun-radius-lg);
9007
9149
  cursor: pointer;
@@ -9040,8 +9182,8 @@ body {
9040
9182
  justify-content: center;
9041
9183
  gap: 6px;
9042
9184
  flex: 1;
9043
- height: 32px;
9044
- padding: 0 14px;
9185
+ height: var(--klun-control-h-sm, 32px);
9186
+ padding: 0 var(--klun-control-px-md, 14px);
9045
9187
  border: none;
9046
9188
  border-radius: var(--klun-radius-md);
9047
9189
  cursor: pointer;
@@ -9146,7 +9288,7 @@ body {
9146
9288
  border-bottom: 1px solid var(--klun-stroke-soft-200);
9147
9289
  }
9148
9290
  .klun-tabs--underline .klun-tabs__tab {
9149
- height: 40px;
9291
+ height: var(--klun-control-h-lg, 40px);
9150
9292
  padding: 0 2px;
9151
9293
  }
9152
9294
  .klun-tabs--underline .klun-tabs__tab[aria-selected=true] {
@@ -9168,8 +9310,8 @@ body {
9168
9310
  background: var(--klun-bg-weak-50);
9169
9311
  }
9170
9312
  .klun-tabs--pill .klun-tabs__tab {
9171
- height: 32px;
9172
- padding: 0 12px;
9313
+ height: var(--klun-control-h-sm, 32px);
9314
+ padding: 0 var(--klun-control-px-sm, 12px);
9173
9315
  border-radius: var(--klun-radius-md);
9174
9316
  }
9175
9317
  .klun-tabs--pill .klun-tabs__tab[aria-selected=true] {
@@ -9807,8 +9949,8 @@ body {
9807
9949
  align-items: center;
9808
9950
  gap: 10px;
9809
9951
  width: 100%;
9810
- height: 36px;
9811
- padding: 0 10px;
9952
+ height: var(--klun-control-h-md, 36px);
9953
+ padding: 0 var(--klun-control-px-xs, 10px);
9812
9954
  border: none;
9813
9955
  border-radius: var(--klun-radius-md);
9814
9956
  cursor: pointer;