@vsn-ux/gaia-styles 0.4.2 → 0.4.4

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 (26) hide show
  1. package/dist/all-no-reset-10pt.css +234 -79
  2. package/dist/all-no-reset.css +231 -79
  3. package/dist/all.css +231 -75
  4. package/dist/components/avatar.css +15 -5
  5. package/dist/components/badge.css +6 -2
  6. package/dist/components/button.css +9 -3
  7. package/dist/components/card.css +9 -3
  8. package/dist/components/checkbox.css +9 -3
  9. package/dist/components/dropdown.css +24 -8
  10. package/dist/components/form-field.css +24 -8
  11. package/dist/components/input.css +10 -4
  12. package/dist/components/menu.css +42 -14
  13. package/dist/components/notification.css +9 -3
  14. package/dist/components/radio.css +9 -3
  15. package/dist/components/segmented-control.css +22 -4
  16. package/dist/components/select.css +18 -6
  17. package/dist/components/tag.css +6 -2
  18. package/dist/components/text-area.css +9 -3
  19. package/dist/components/tooltip.css +10 -3
  20. package/dist/components.css +231 -74
  21. package/package.json +1 -1
  22. package/src/styles/all-no-reset-10pt.css +5 -0
  23. package/src/styles/components/input.css +1 -1
  24. package/src/styles/components/segmented-control.css +6 -2
  25. package/src/styles/components/tooltip.css +1 -1
  26. package/src/styles/theme.css +71 -22
package/dist/all-no-reset-10pt.css CHANGED
@@ -221,11 +221,6 @@
221
221
  }
222
222
  }
223
223
  @layer theme, base, components, utilities;
224
- @layer theme {
225
- :root, :host {
226
- --spacing: 0.4rem;
227
- }
228
- }
229
224
  @layer base {
230
225
  body {
231
226
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
@@ -250,16 +245,26 @@
250
245
  &.ga-avatar--small {
251
246
  height: calc(0.4rem * 6);
252
247
  width: calc(0.4rem * 6);
253
- font-size: var(--ga-text-sm-font-size);
254
- line-height: var(--tw-leading, var(--ga-text-sm-line-height));
248
+ font-size: calc(
249
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
250
+ );
251
+ line-height: var(--tw-leading, calc(
252
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
253
+ ));
255
254
  letter-spacing: var(--tw-tracking, 0);
256
255
  }
257
256
  &.ga-avatar--large {
258
257
  height: calc(0.4rem * 16);
259
258
  width: calc(0.4rem * 16);
260
- font-size: var(--ga-text-2xl-font-size);
261
- line-height: var(--tw-leading, var(--ga-text-2xl-line-height));
262
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.019));
259
+ font-size: calc(
260
+ var(--ga-text-2xl-font-size) * var(--ga-base-scaling-factor, 1)
261
+ );
262
+ line-height: var(--tw-leading, calc(
263
+ var(--ga-text-2xl-line-height) * var(--ga-base-scaling-factor, 1)
264
+ ));
265
+ letter-spacing: var(--tw-tracking, calc(
266
+ var(--ga-text-2xl-tracking) * var(--ga-base-scaling-factor, 1)
267
+ ));
263
268
  }
264
269
  }
265
270
  .ga-badge {
@@ -270,8 +275,12 @@
270
275
  min-width: calc(0.4rem * 6);
271
276
  padding: calc(0.4rem * 1);
272
277
  text-align: center;
273
- font-size: var(--ga-text-sm-font-size);
274
- line-height: var(--tw-leading, var(--ga-text-sm-line-height));
278
+ font-size: calc(
279
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
280
+ );
281
+ line-height: var(--tw-leading, calc(
282
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
283
+ ));
275
284
  letter-spacing: var(--tw-tracking, 0);
276
285
  --tw-leading: calc(0.4rem * 4);
277
286
  line-height: calc(0.4rem * 4);
@@ -330,9 +339,15 @@
330
339
  border-radius: var(--ga-radius);
331
340
  padding-inline: calc(0.4rem * 4);
332
341
  vertical-align: middle;
333
- font-size: var(--ga-text-md-font-size);
334
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
335
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
342
+ font-size: calc(
343
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
344
+ );
345
+ line-height: var(--tw-leading, calc(
346
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
347
+ ));
348
+ letter-spacing: var(--tw-tracking, calc(
349
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
350
+ ));
336
351
  --tw-leading: calc(0.4rem * 1);
337
352
  line-height: calc(0.4rem * 1);
338
353
  --tw-font-weight: 700;
@@ -427,9 +442,15 @@
427
442
  border-color: var(--ga-color-border-primary);
428
443
  background-color: #fff;
429
444
  padding: calc(0.4rem * 4);
430
- font-size: var(--ga-text-md-font-size);
431
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
432
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
445
+ font-size: calc(
446
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
447
+ );
448
+ line-height: var(--tw-leading, calc(
449
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
450
+ ));
451
+ letter-spacing: var(--tw-tracking, calc(
452
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
453
+ ));
433
454
  &.ga-card--selectable {
434
455
  cursor: pointer;
435
456
  &:hover {
@@ -525,9 +546,15 @@
525
546
  }
526
547
  .ga-checkbox__label {
527
548
  min-height: calc(0.4rem * 4);
528
- font-size: var(--ga-text-md-font-size);
529
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
530
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
549
+ font-size: calc(
550
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
551
+ );
552
+ line-height: var(--tw-leading, calc(
553
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
554
+ ));
555
+ letter-spacing: var(--tw-tracking, calc(
556
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
557
+ ));
531
558
  --tw-leading: calc(0.4rem * 4);
532
559
  line-height: calc(0.4rem * 4);
533
560
  &:empty {
@@ -547,9 +574,15 @@
547
574
  border-width: 1px;
548
575
  border-color: var(--ga-color-border-primary);
549
576
  background-color: var(--ga-color-surface-primary);
550
- font-size: var(--ga-text-md-font-size);
551
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
552
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
577
+ font-size: calc(
578
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
579
+ );
580
+ line-height: var(--tw-leading, calc(
581
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
582
+ ));
583
+ letter-spacing: var(--tw-tracking, calc(
584
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
585
+ ));
553
586
  --tw-outline-style: none;
554
587
  outline-style: none;
555
588
  .ga-dropdown__item {
@@ -565,9 +598,15 @@
565
598
  padding-inline: calc(0.4rem * 3);
566
599
  padding-block: calc(0.4rem * 2);
567
600
  text-align: left;
568
- font-size: var(--ga-text-md-font-size);
569
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
570
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
601
+ font-size: calc(
602
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
603
+ );
604
+ line-height: var(--tw-leading, calc(
605
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
606
+ ));
607
+ letter-spacing: var(--tw-tracking, calc(
608
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
609
+ ));
571
610
  --tw-leading: 1;
572
611
  line-height: 1;
573
612
  color: var(--ga-color-text-action);
@@ -623,8 +662,12 @@
623
662
  padding-inline: calc(0.4rem * 3);
624
663
  padding-top: calc(0.4rem * 3);
625
664
  padding-bottom: calc(0.4rem * 2);
626
- font-size: var(--ga-text-sm-font-size);
627
- line-height: var(--tw-leading, var(--ga-text-sm-line-height));
665
+ font-size: calc(
666
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
667
+ );
668
+ line-height: var(--tw-leading, calc(
669
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
670
+ ));
628
671
  letter-spacing: var(--tw-tracking, 0);
629
672
  --tw-font-weight: 600;
630
673
  font-weight: 600;
@@ -674,15 +717,25 @@
674
717
  overflow: hidden;
675
718
  text-overflow: ellipsis;
676
719
  white-space: nowrap;
677
- font-size: var(--ga-text-md-font-size);
678
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
679
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
720
+ font-size: calc(
721
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
722
+ );
723
+ line-height: var(--tw-leading, calc(
724
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
725
+ ));
726
+ letter-spacing: var(--tw-tracking, calc(
727
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
728
+ ));
680
729
  --tw-font-weight: 500;
681
730
  font-weight: 500;
682
731
  }
683
732
  .ga-form-field__label-state {
684
- font-size: var(--ga-text-sm-font-size);
685
- line-height: var(--tw-leading, var(--ga-text-sm-line-height));
733
+ font-size: calc(
734
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
735
+ );
736
+ line-height: var(--tw-leading, calc(
737
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
738
+ ));
686
739
  letter-spacing: var(--tw-tracking, 0);
687
740
  --tw-font-weight: 400;
688
741
  font-weight: 400;
@@ -709,9 +762,15 @@
709
762
  display: flex;
710
763
  align-items: center;
711
764
  gap: calc(0.4rem * 1);
712
- font-size: var(--ga-text-xs-font-size);
713
- line-height: var(--tw-leading, var(--ga-text-xs-line-height));
714
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
765
+ font-size: calc(
766
+ var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
767
+ );
768
+ line-height: var(--tw-leading, calc(
769
+ var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
770
+ ));
771
+ letter-spacing: var(--tw-tracking, calc(
772
+ var(--ga-text-xs-tracking) * var(--ga-base-scaling-factor, 1)
773
+ ));
715
774
  }
716
775
  }
717
776
  .ga-input {
@@ -728,9 +787,15 @@
728
787
  background-color: var(--ga-color-bg-primary);
729
788
  padding-inline: calc(0.4rem * 3);
730
789
  padding-block: calc(0.4rem * 2);
731
- font-size: var(--ga-text-md-font-size);
732
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
733
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
790
+ font-size: calc(
791
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
792
+ );
793
+ line-height: var(--tw-leading, calc(
794
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
795
+ ));
796
+ letter-spacing: var(--tw-tracking, calc(
797
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
798
+ ));
734
799
  &:hover {
735
800
  border-color: var(--ga-color-border-action-hover);
736
801
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
@@ -738,7 +803,7 @@
738
803
  }
739
804
  }
740
805
  &:has(input:disabled), &:is(input:disabled) {
741
- border-color: var(--ga-color-border-primary);
806
+ border-color: var(--ga-color-border-disabled);
742
807
  background-color: var(--ga-color-surface-disabled);
743
808
  color: var(--ga-color-text-disable-selected);
744
809
  &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
@@ -802,9 +867,15 @@
802
867
  padding-right: calc(0.4rem * 2);
803
868
  padding-bottom: calc(0.4rem * 4);
804
869
  padding-left: calc(0.4rem * 4);
805
- font-size: var(--ga-text-md-font-size);
806
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
807
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
870
+ font-size: calc(
871
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
872
+ );
873
+ line-height: var(--tw-leading, calc(
874
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
875
+ ));
876
+ letter-spacing: var(--tw-tracking, calc(
877
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
878
+ ));
808
879
  &.ga-notification--information {
809
880
  border-color: var(--ga-color-border-information);
810
881
  background-color: var(--ga-color-surface-information);
@@ -867,9 +938,15 @@
867
938
  border-width: 1px;
868
939
  border-color: var(--ga-color-border-primary);
869
940
  background-color: var(--ga-color-surface-primary);
870
- font-size: var(--ga-text-md-font-size);
871
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
872
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
941
+ font-size: calc(
942
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
943
+ );
944
+ line-height: var(--tw-leading, calc(
945
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
946
+ ));
947
+ letter-spacing: var(--tw-tracking, calc(
948
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
949
+ ));
873
950
  .ga-menu__item {
874
951
  position: relative;
875
952
  display: flex;
@@ -978,9 +1055,15 @@
978
1055
  overflow: hidden;
979
1056
  text-overflow: ellipsis;
980
1057
  white-space: nowrap;
981
- font-size: var(--ga-text-md-font-size);
982
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
983
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
1058
+ font-size: calc(
1059
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
1060
+ );
1061
+ line-height: var(--tw-leading, calc(
1062
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
1063
+ ));
1064
+ letter-spacing: var(--tw-tracking, calc(
1065
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
1066
+ ));
984
1067
  --tw-font-weight: 500;
985
1068
  font-weight: 500;
986
1069
  color: var(--ga-color-text-action);
@@ -993,17 +1076,29 @@
993
1076
  border-color: var(--ga-color-border-disabled);
994
1077
  background-color: #fff;
995
1078
  padding-inline: calc(0.4rem * 1);
996
- font-size: var(--ga-text-xs-font-size);
997
- line-height: var(--tw-leading, var(--ga-text-xs-line-height));
998
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
1079
+ font-size: calc(
1080
+ var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
1081
+ );
1082
+ line-height: var(--tw-leading, calc(
1083
+ var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
1084
+ ));
1085
+ letter-spacing: var(--tw-tracking, calc(
1086
+ var(--ga-text-xs-tracking) * var(--ga-base-scaling-factor, 1)
1087
+ ));
999
1088
  --tw-font-weight: 500;
1000
1089
  font-weight: 500;
1001
1090
  color: var(--ga-color-text-body);
1002
1091
  }
1003
1092
  .ga-menu__item-description {
1004
- font-size: var(--ga-text-xs-font-size);
1005
- line-height: var(--tw-leading, var(--ga-text-xs-line-height));
1006
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
1093
+ font-size: calc(
1094
+ var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
1095
+ );
1096
+ line-height: var(--tw-leading, calc(
1097
+ var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
1098
+ ));
1099
+ letter-spacing: var(--tw-tracking, calc(
1100
+ var(--ga-text-xs-tracking) * var(--ga-base-scaling-factor, 1)
1101
+ ));
1007
1102
  color: var(--ga-color-text-disable-selected);
1008
1103
  }
1009
1104
  .ga-menu__separator {
@@ -1016,8 +1111,12 @@
1016
1111
  padding-inline: calc(0.4rem * 3);
1017
1112
  padding-top: calc(0.4rem * 3);
1018
1113
  padding-bottom: calc(0.4rem * 2);
1019
- font-size: var(--ga-text-sm-font-size);
1020
- line-height: var(--tw-leading, var(--ga-text-sm-line-height));
1114
+ font-size: calc(
1115
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
1116
+ );
1117
+ line-height: var(--tw-leading, calc(
1118
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
1119
+ ));
1021
1120
  letter-spacing: var(--tw-tracking, 0);
1022
1121
  --tw-font-weight: 600;
1023
1122
  font-weight: 600;
@@ -1114,9 +1213,15 @@
1114
1213
  }
1115
1214
  .ga-radio-button__label {
1116
1215
  min-height: calc(0.4rem * 4);
1117
- font-size: var(--ga-text-md-font-size);
1118
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
1119
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
1216
+ font-size: calc(
1217
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
1218
+ );
1219
+ line-height: var(--tw-leading, calc(
1220
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
1221
+ ));
1222
+ letter-spacing: var(--tw-tracking, calc(
1223
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
1224
+ ));
1120
1225
  --tw-leading: calc(0.4rem * 4);
1121
1226
  line-height: calc(0.4rem * 4);
1122
1227
  &:empty {
@@ -1135,9 +1240,15 @@
1135
1240
  border-color: var(--ga-color-border-primary);
1136
1241
  padding: calc(0.4rem * 0.5);
1137
1242
  vertical-align: middle;
1138
- font-size: var(--ga-text-md-font-size);
1139
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
1140
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
1243
+ font-size: calc(
1244
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
1245
+ );
1246
+ line-height: var(--tw-leading, calc(
1247
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
1248
+ ));
1249
+ letter-spacing: var(--tw-tracking, calc(
1250
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
1251
+ ));
1141
1252
  .ga-segmented-control__button {
1142
1253
  display: inline-flex;
1143
1254
  height: calc(0.4rem * 9);
@@ -1154,6 +1265,7 @@
1154
1265
  vertical-align: middle;
1155
1266
  --tw-leading: calc(0.4rem * 1);
1156
1267
  line-height: calc(0.4rem * 1);
1268
+ white-space: nowrap;
1157
1269
  color: var(--ga-color-text-action);
1158
1270
  &.ga-segmented-control__button--selected, &:hover {
1159
1271
  border-color: var(--ga-color-border-action);
@@ -1169,12 +1281,23 @@
1169
1281
  outline-color: var(--ga-color-border-focus);
1170
1282
  }
1171
1283
  &.ga-segmented-control__button--icon-only {
1172
- padding-inline: 0.5625rem;
1284
+ padding-inline: calc(0.4rem * 2.25);
1173
1285
  &:hover {
1174
1286
  color: var(--ga-color-icon-action-hover);
1175
1287
  }
1176
1288
  }
1177
1289
  }
1290
+ .ga-segmented-control__button-sr-label {
1291
+ position: absolute;
1292
+ width: 1px;
1293
+ height: 1px;
1294
+ padding: 0;
1295
+ margin: -1px;
1296
+ overflow: hidden;
1297
+ clip: rect(0, 0, 0, 0);
1298
+ white-space: nowrap;
1299
+ border-width: 0;
1300
+ }
1178
1301
  }
1179
1302
  .ga-native-select {
1180
1303
  position: relative;
@@ -1189,9 +1312,15 @@
1189
1312
  padding-block: calc(0.4rem * 2);
1190
1313
  padding-right: calc(0.4rem * 9);
1191
1314
  padding-left: calc(0.4rem * 3);
1192
- font-size: var(--ga-text-md-font-size);
1193
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
1194
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
1315
+ font-size: calc(
1316
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
1317
+ );
1318
+ line-height: var(--tw-leading, calc(
1319
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
1320
+ ));
1321
+ letter-spacing: var(--tw-tracking, calc(
1322
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
1323
+ ));
1195
1324
  --tw-leading: 1;
1196
1325
  line-height: 1;
1197
1326
  }
@@ -1220,9 +1349,15 @@
1220
1349
  padding-inline: calc(0.4rem * 3);
1221
1350
  padding-block: calc(0.4rem * 2);
1222
1351
  text-align: left;
1223
- font-size: var(--ga-text-md-font-size);
1224
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
1225
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
1352
+ font-size: calc(
1353
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
1354
+ );
1355
+ line-height: var(--tw-leading, calc(
1356
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
1357
+ ));
1358
+ letter-spacing: var(--tw-tracking, calc(
1359
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
1360
+ ));
1226
1361
  --tw-leading: 1;
1227
1362
  line-height: 1;
1228
1363
  &.ga-select--expanded {
@@ -1410,8 +1545,12 @@
1410
1545
  border-color: var(--ga-color-border-action);
1411
1546
  padding-right: calc(0.4rem * 1);
1412
1547
  padding-left: calc(0.4rem * 2);
1413
- font-size: var(--ga-text-sm-font-size);
1414
- line-height: var(--tw-leading, var(--ga-text-sm-line-height));
1548
+ font-size: calc(
1549
+ var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
1550
+ );
1551
+ line-height: var(--tw-leading, calc(
1552
+ var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
1553
+ ));
1415
1554
  letter-spacing: var(--tw-tracking, 0);
1416
1555
  &:focus-visible {
1417
1556
  outline-style: var(--tw-outline-style);
@@ -1582,9 +1721,15 @@
1582
1721
  border-width: 1px;
1583
1722
  border-color: var(--ga-color-border-primary);
1584
1723
  background-color: var(--ga-color-bg-primary);
1585
- font-size: var(--ga-text-md-font-size);
1586
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
1587
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
1724
+ font-size: calc(
1725
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
1726
+ );
1727
+ line-height: var(--tw-leading, calc(
1728
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
1729
+ ));
1730
+ letter-spacing: var(--tw-tracking, calc(
1731
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
1732
+ ));
1588
1733
  &:has(textarea:hover) {
1589
1734
  border-color: var(--ga-color-border-action-hover);
1590
1735
  }
@@ -1625,9 +1770,15 @@
1625
1770
  border-radius: var(--ga-radius);
1626
1771
  background-color: var(--ga-color-surface-action-hover);
1627
1772
  padding: calc(0.4rem * 2);
1628
- font-size: var(--ga-text-md-font-size);
1629
- line-height: var(--tw-leading, var(--ga-text-md-line-height));
1630
- letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
1773
+ font-size: calc(
1774
+ var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
1775
+ );
1776
+ line-height: var(--tw-leading, calc(
1777
+ var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
1778
+ ));
1779
+ letter-spacing: var(--tw-tracking, calc(
1780
+ var(--ga-text-md-tracking) * var(--ga-base-scaling-factor, 1)
1781
+ ));
1631
1782
  color: var(--ga-color-text-on-action);
1632
1783
  &.ga-tooltip--top-start, &.ga-tooltip--top-center, &.ga-tooltip--top-end, &.ga-tooltip--bottom-start, &.ga-tooltip--bottom-center, &.ga-tooltip--bottom-end, &.ga-tooltip--left-start, &.ga-tooltip--left-center, &.ga-tooltip--left-end, &.ga-tooltip--right-start, &.ga-tooltip--right-center, &.ga-tooltip--right-end {
1633
1784
  &::before {
@@ -1711,11 +1862,15 @@
1711
1862
  bottom: calc(0.4rem * 4);
1712
1863
  }
1713
1864
  .ga-tooltip__title {
1865
+ margin-bottom: calc(0.4rem * 1);
1714
1866
  --tw-font-weight: 600;
1715
1867
  font-weight: 600;
1716
1868
  }
1717
1869
  }
1718
1870
  }
1871
+ :root {
1872
+ --ga-base-scaling-factor: 1.6;
1873
+ }
1719
1874
  @property --tw-border-style {
1720
1875
  syntax: "*";
1721
1876
  inherits: false;