@swisper.ai/design-system 0.0.2 → 0.0.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 (15) hide show
  1. package/README.md +6 -0
  2. package/dist/css/components.css +79 -79
  3. package/dist/css/debug-tokens.json +99 -99
  4. package/dist/css/semantic.css +20 -20
  5. package/dist/tailwind.css +1 -1
  6. package/package.json +1 -1
  7. package/src/colors.stories.tsx +118 -25
  8. package/src/components.stories.tsx +142 -9
  9. package/src/docs/docs-section.tsx +58 -0
  10. package/src/docs/link-card.tsx +1 -1
  11. package/src/docs/token-scale.tsx +21 -0
  12. package/src/foundation.stories.tsx +201 -11
  13. package/src/icons.stories.tsx +267 -0
  14. package/src/introduction.mdx +3 -3
  15. package/src/tailwind.css +5 -0
package/README.md CHANGED
@@ -77,6 +77,12 @@ A number in a spacing class is pixels, not Tailwind's 4px steps: `gap-8` is 8px
77
77
  The scale is 0, 1, 2, 3, 4, 6, 7, 8, 10, 12, 13, 16, 20, 24, 32, 40 and 48. A number off the scale
78
78
  falls back to Tailwind's default, so `p-5` is 20px.
79
79
 
80
+ ### Font sizes
81
+
82
+ Font-size tokens (`--st-font-size-*`, `--ct-*-font-size`) are in rem at a 16px base: 14px in Figma
83
+ is `0.875rem`. Text therefore follows the root font size, so an app's text-size setting sets
84
+ `font-size` on `<html>`. Every other number token, spacing included, stays in px.
85
+
80
86
  ### Light theme and fonts
81
87
 
82
88
  `src/tailwind.css` defines a `theme-light:` variant, which applies inside an element with
package/dist/css/components.css CHANGED
@@ -78,7 +78,7 @@
78
78
  --ct-button-sm-spacing-spacer-padding: 3px;
79
79
  --ct-button-sm-spacing-spacer-gap: 3px;
80
80
  --ct-button-sm-sizing-height: 32px;
81
- --ct-button-sm-icon-size: 14px;
81
+ --ct-button-sm-icon-size: 0.875rem;
82
82
  --ct-button-sm-icon-sizing: 16px;
83
83
  --ct-button-sm-icon-container-x: 14px;
84
84
  --ct-button-sm-icon-container-y: 16px;
@@ -294,7 +294,7 @@
294
294
  --ct-form-fields-info-icon-forms-radius: 999px;
295
295
  --ct-form-fields-typography-font-weight: "Medium";
296
296
  --ct-form-fields-typography-font-family: "Noto Sans";
297
- --ct-form-fields-typography-font-size: 14px;
297
+ --ct-form-fields-typography-font-size: 0.875rem;
298
298
  --ct-form-fields-spacing-gap-helper-text: 4px;
299
299
  --ct-form-fields-spacing-gap-base: 4px;
300
300
  --ct-form-fields-spacing-padding-horizontal: 12px;
@@ -314,7 +314,7 @@
314
314
  --ct-form-radio-button-border-radius-base: 999px;
315
315
  --ct-form-radio-button-typography-font-weight: "Medium";
316
316
  --ct-form-radio-button-typography-font-family: "Noto Sans";
317
- --ct-form-radio-button-typography-font-size: 14px;
317
+ --ct-form-radio-button-typography-font-size: 0.875rem;
318
318
  --ct-form-toggle-switch-background-base: #ffffff;
319
319
  --ct-form-button-group-background-base: #ffffff;
320
320
  --ct-form-2xs-checkbox-sizing: 0px;
@@ -326,7 +326,7 @@
326
326
  --ct-form-2xs-fields-spacing-gap-icon-text: 0px;
327
327
  --ct-form-2xs-fields-spacing-gap-tools: 0px;
328
328
  --ct-form-2xs-fields-spacing-padding: 0px;
329
- --ct-form-2xs-fields-label-font-size: 0px;
329
+ --ct-form-2xs-fields-label-font-size: 0rem;
330
330
  --ct-form-2xs-radio-button-size: 0px;
331
331
  --ct-form-2xs-radio-button-icon-size: 0px;
332
332
  --ct-form-xs-checkbox-sizing: 0px;
@@ -338,7 +338,7 @@
338
338
  --ct-form-xs-fields-spacing-gap-icon-text: 0px;
339
339
  --ct-form-xs-fields-spacing-gap-tools: 0px;
340
340
  --ct-form-xs-fields-spacing-padding: 0px;
341
- --ct-form-xs-fields-label-font-size: 0px;
341
+ --ct-form-xs-fields-label-font-size: 0rem;
342
342
  --ct-form-xs-radio-button-size: 0px;
343
343
  --ct-form-xs-radio-button-icon-size: 0px;
344
344
  --ct-form-sm-checkbox-sizing: 32px;
@@ -350,7 +350,7 @@
350
350
  --ct-form-sm-fields-spacing-gap-icon-text: 8px;
351
351
  --ct-form-sm-fields-spacing-gap-tools: 0px;
352
352
  --ct-form-sm-fields-spacing-padding: 12px;
353
- --ct-form-sm-fields-label-font-size: 0px;
353
+ --ct-form-sm-fields-label-font-size: 0rem;
354
354
  --ct-form-sm-radio-button-size: 32px;
355
355
  --ct-form-sm-radio-button-icon-size: 20px;
356
356
  --ct-form-md-checkbox-sizing: 36px;
@@ -362,7 +362,7 @@
362
362
  --ct-form-md-fields-spacing-gap-icon-text: 8px;
363
363
  --ct-form-md-fields-spacing-gap-tools: 0px;
364
364
  --ct-form-md-fields-spacing-padding: 12px;
365
- --ct-form-md-fields-label-font-size: 14px;
365
+ --ct-form-md-fields-label-font-size: 0.875rem;
366
366
  --ct-form-md-radio-button-size: 36px;
367
367
  --ct-form-md-radio-button-icon-size: 24px;
368
368
  --ct-form-lg-checkbox-sizing: 40px;
@@ -374,7 +374,7 @@
374
374
  --ct-form-lg-fields-spacing-gap-icon-text: 8px;
375
375
  --ct-form-lg-fields-spacing-gap-tools: 0px;
376
376
  --ct-form-lg-fields-spacing-padding: 12px;
377
- --ct-form-lg-fields-label-font-size: 14px;
377
+ --ct-form-lg-fields-label-font-size: 0.875rem;
378
378
  --ct-form-lg-radio-button-size: 40px;
379
379
  --ct-form-lg-radio-button-icon-size: 28px;
380
380
  --ct-form-2xl-checkbox-sizing: 0px;
@@ -386,7 +386,7 @@
386
386
  --ct-form-2xl-fields-spacing-gap-icon-text: 10px;
387
387
  --ct-form-2xl-fields-spacing-gap-tools: 0px;
388
388
  --ct-form-2xl-fields-spacing-padding: 12px;
389
- --ct-form-2xl-fields-label-font-size: 16px;
389
+ --ct-form-2xl-fields-label-font-size: 1rem;
390
390
  --ct-form-2xl-radio-button-size: 0px;
391
391
  --ct-form-2xl-radio-button-icon-size: 0px;
392
392
  --ct-form-xl-checkbox-sizing: 44px;
@@ -398,7 +398,7 @@
398
398
  --ct-form-xl-fields-spacing-gap-icon-text: 0px;
399
399
  --ct-form-xl-fields-spacing-gap-tools: 0px;
400
400
  --ct-form-xl-fields-spacing-padding: 0px;
401
- --ct-form-xl-fields-label-font-size: 0px;
401
+ --ct-form-xl-fields-label-font-size: 0rem;
402
402
  --ct-form-xl-radio-button-size: 0px;
403
403
  --ct-form-xl-radio-button-icon-size: 0px;
404
404
  --ct-form-3xs-checkbox-sizing: 0px;
@@ -410,7 +410,7 @@
410
410
  --ct-form-3xs-fields-spacing-gap-icon-text: 0px;
411
411
  --ct-form-3xs-fields-spacing-gap-tools: 0px;
412
412
  --ct-form-3xs-fields-spacing-padding: 0px;
413
- --ct-form-3xs-fields-label-font-size: 0px;
413
+ --ct-form-3xs-fields-label-font-size: 0rem;
414
414
  --ct-form-3xs-radio-button-size: 0px;
415
415
  --ct-form-3xs-radio-button-icon-size: 0px;
416
416
  --ct-form-3xl-checkbox-sizing: 0px;
@@ -422,7 +422,7 @@
422
422
  --ct-form-3xl-fields-spacing-gap-icon-text: 0px;
423
423
  --ct-form-3xl-fields-spacing-gap-tools: 0px;
424
424
  --ct-form-3xl-fields-spacing-padding: 0px;
425
- --ct-form-3xl-fields-label-font-size: 0px;
425
+ --ct-form-3xl-fields-label-font-size: 0rem;
426
426
  --ct-form-3xl-radio-button-size: 0px;
427
427
  --ct-form-3xl-radio-button-icon-size: 0px;
428
428
  --ct-form-4xl-checkbox-sizing: 0px;
@@ -434,7 +434,7 @@
434
434
  --ct-form-4xl-fields-spacing-gap-icon-text: 0px;
435
435
  --ct-form-4xl-fields-spacing-gap-tools: 0px;
436
436
  --ct-form-4xl-fields-spacing-padding: 0px;
437
- --ct-form-4xl-fields-label-font-size: 0px;
437
+ --ct-form-4xl-fields-label-font-size: 0rem;
438
438
  --ct-form-4xl-radio-button-size: 0px;
439
439
  --ct-form-4xl-radio-button-icon-size: 0px;
440
440
  --ct-form-mode-checkbox-sizing: 0px;
@@ -445,7 +445,7 @@
445
445
  --ct-form-mode-fields-spacing-gap-helper: 0px;
446
446
  --ct-form-mode-fields-spacing-gap-icon-text: 0px;
447
447
  --ct-form-mode-fields-spacing-padding: 0px;
448
- --ct-form-mode-fields-label-font-size: 0px;
448
+ --ct-form-mode-fields-label-font-size: 0rem;
449
449
  --ct-icon-colour-fill-base: #bbc3cc;
450
450
  --ct-icon-colour-fill-inverse: #030304;
451
451
  --ct-icon-2xs-sizing: 14px;
@@ -653,77 +653,77 @@
653
653
  --ct-chip-2xs-spacing-padding-label: 3px;
654
654
  --ct-chip-2xs-spacing-gap: 4px;
655
655
  --ct-chip-2xs-sizing-size: 20px;
656
- --ct-chip-2xs-typography-label-font-size: 10px;
656
+ --ct-chip-2xs-typography-label-font-size: 0.625rem;
657
657
  --ct-chip-2xs-icon-sizing: 12px;
658
658
  --ct-chip-2xs-avatar-sizing: 16px;
659
659
  --ct-chip-xs-spacing-padding-default: 0px;
660
660
  --ct-chip-xs-spacing-padding-label: 0px;
661
661
  --ct-chip-xs-spacing-gap: 0px;
662
662
  --ct-chip-xs-sizing-size: 0px;
663
- --ct-chip-xs-typography-label-font-size: 0px;
663
+ --ct-chip-xs-typography-label-font-size: 0rem;
664
664
  --ct-chip-xs-icon-sizing: 0px;
665
665
  --ct-chip-xs-avatar-sizing: 0px;
666
666
  --ct-chip-sm-spacing-padding-default: 0px;
667
667
  --ct-chip-sm-spacing-padding-label: 0px;
668
668
  --ct-chip-sm-spacing-gap: 0px;
669
669
  --ct-chip-sm-sizing-size: 0px;
670
- --ct-chip-sm-typography-label-font-size: 0px;
670
+ --ct-chip-sm-typography-label-font-size: 0rem;
671
671
  --ct-chip-sm-icon-sizing: 0px;
672
672
  --ct-chip-sm-avatar-sizing: 0px;
673
673
  --ct-chip-md-spacing-padding-default: 4px;
674
674
  --ct-chip-md-spacing-padding-label: 3px;
675
675
  --ct-chip-md-spacing-gap: 4px;
676
676
  --ct-chip-md-sizing-size: 26px;
677
- --ct-chip-md-typography-label-font-size: 10px;
677
+ --ct-chip-md-typography-label-font-size: 0.625rem;
678
678
  --ct-chip-md-icon-sizing: 14px;
679
679
  --ct-chip-md-avatar-sizing: 20px;
680
680
  --ct-chip-lg-spacing-padding-default: 4px;
681
681
  --ct-chip-lg-spacing-padding-label: 4px;
682
682
  --ct-chip-lg-spacing-gap: 6px;
683
683
  --ct-chip-lg-sizing-size: 32px;
684
- --ct-chip-lg-typography-label-font-size: 12px;
684
+ --ct-chip-lg-typography-label-font-size: 0.75rem;
685
685
  --ct-chip-lg-icon-sizing: 20px;
686
686
  --ct-chip-lg-avatar-sizing: 24px;
687
687
  --ct-chip-2xl-spacing-padding-default: 6px;
688
688
  --ct-chip-2xl-spacing-padding-label: 4px;
689
689
  --ct-chip-2xl-spacing-gap: 8px;
690
690
  --ct-chip-2xl-sizing-size: 36px;
691
- --ct-chip-2xl-typography-label-font-size: 14px;
691
+ --ct-chip-2xl-typography-label-font-size: 0.875rem;
692
692
  --ct-chip-2xl-icon-sizing: 22px;
693
693
  --ct-chip-2xl-avatar-sizing: 26px;
694
694
  --ct-chip-xl-spacing-padding-default: 0px;
695
695
  --ct-chip-xl-spacing-padding-label: 0px;
696
696
  --ct-chip-xl-spacing-gap: 0px;
697
697
  --ct-chip-xl-sizing-size: 0px;
698
- --ct-chip-xl-typography-label-font-size: 0px;
698
+ --ct-chip-xl-typography-label-font-size: 0rem;
699
699
  --ct-chip-xl-icon-sizing: 0px;
700
700
  --ct-chip-xl-avatar-sizing: 0px;
701
701
  --ct-chip-3xs-spacing-padding-default: 2px;
702
702
  --ct-chip-3xs-spacing-padding-label: 3px;
703
703
  --ct-chip-3xs-spacing-gap: 4px;
704
704
  --ct-chip-3xs-sizing-size: 16px;
705
- --ct-chip-3xs-typography-label-font-size: 10px;
705
+ --ct-chip-3xs-typography-label-font-size: 0.625rem;
706
706
  --ct-chip-3xs-icon-sizing: 12px;
707
707
  --ct-chip-3xs-avatar-sizing: 12px;
708
708
  --ct-chip-3xl-spacing-padding-default: 0px;
709
709
  --ct-chip-3xl-spacing-padding-label: 0px;
710
710
  --ct-chip-3xl-spacing-gap: 0px;
711
711
  --ct-chip-3xl-sizing-size: 0px;
712
- --ct-chip-3xl-typography-label-font-size: 0px;
712
+ --ct-chip-3xl-typography-label-font-size: 0rem;
713
713
  --ct-chip-3xl-icon-sizing: 0px;
714
714
  --ct-chip-3xl-avatar-sizing: 0px;
715
715
  --ct-chip-4xl-spacing-padding-default: 0px;
716
716
  --ct-chip-4xl-spacing-padding-label: 0px;
717
717
  --ct-chip-4xl-spacing-gap: 0px;
718
718
  --ct-chip-4xl-sizing-size: 0px;
719
- --ct-chip-4xl-typography-label-font-size: 0px;
719
+ --ct-chip-4xl-typography-label-font-size: 0rem;
720
720
  --ct-chip-4xl-icon-sizing: 0px;
721
721
  --ct-chip-4xl-avatar-sizing: 0px;
722
722
  --ct-chip-mode-spacing-padding-default: 0px;
723
723
  --ct-chip-mode-spacing-padding-label: 0px;
724
724
  --ct-chip-mode-spacing-gap: 0px;
725
725
  --ct-chip-mode-sizing-size: 0px;
726
- --ct-chip-mode-typography-label-font-size: 0px;
726
+ --ct-chip-mode-typography-label-font-size: 0rem;
727
727
  --ct-chip-mode-icon-sizing: 0px;
728
728
  --ct-chip-mode-avatar-sizing: 0px;
729
729
  --ct-tabs-colour-text-default: #e4e8eb;
@@ -741,34 +741,34 @@
741
741
  --ct-tabs-sizing-height-medium: 36px;
742
742
  --ct-tabs-2xs-sizing-height: 0px;
743
743
  --ct-tabs-2xs-sizing-close: 0px;
744
- --ct-tabs-2xs-typography-font-size: 0px;
744
+ --ct-tabs-2xs-typography-font-size: 0rem;
745
745
  --ct-tabs-xs-sizing-height: 0px;
746
746
  --ct-tabs-xs-sizing-close: 0px;
747
- --ct-tabs-xs-typography-font-size: 0px;
747
+ --ct-tabs-xs-typography-font-size: 0rem;
748
748
  --ct-tabs-sm-sizing-height: 0px;
749
749
  --ct-tabs-sm-sizing-close: 0px;
750
- --ct-tabs-sm-typography-font-size: 0px;
750
+ --ct-tabs-sm-typography-font-size: 0rem;
751
751
  --ct-tabs-md-sizing-height: 36px;
752
752
  --ct-tabs-md-sizing-close: 18px;
753
- --ct-tabs-md-typography-font-size: 14px;
753
+ --ct-tabs-md-typography-font-size: 0.875rem;
754
754
  --ct-tabs-lg-sizing-height: 40px;
755
755
  --ct-tabs-lg-sizing-close: 20px;
756
- --ct-tabs-lg-typography-font-size: 14px;
756
+ --ct-tabs-lg-typography-font-size: 0.875rem;
757
757
  --ct-tabs-2xl-sizing-height: 48px;
758
758
  --ct-tabs-2xl-sizing-close: 24px;
759
- --ct-tabs-2xl-typography-font-size: 14px;
759
+ --ct-tabs-2xl-typography-font-size: 0.875rem;
760
760
  --ct-tabs-xl-sizing-height: 0px;
761
761
  --ct-tabs-xl-sizing-close: 0px;
762
- --ct-tabs-xl-typography-font-size: 0px;
762
+ --ct-tabs-xl-typography-font-size: 0rem;
763
763
  --ct-tabs-3xs-sizing-height: 0px;
764
764
  --ct-tabs-3xs-sizing-close: 0px;
765
- --ct-tabs-3xs-typography-font-size: 0px;
765
+ --ct-tabs-3xs-typography-font-size: 0rem;
766
766
  --ct-tabs-3xl-sizing-height: 0px;
767
767
  --ct-tabs-3xl-sizing-close: 0px;
768
- --ct-tabs-3xl-typography-font-size: 0px;
768
+ --ct-tabs-3xl-typography-font-size: 0rem;
769
769
  --ct-tabs-4xl-sizing-height: 0px;
770
770
  --ct-tabs-4xl-sizing-close: 0px;
771
- --ct-tabs-4xl-typography-font-size: 0px;
771
+ --ct-tabs-4xl-typography-font-size: 0rem;
772
772
  --ct-toggle-switch-colour-background-on-default: rgba(0, 169, 221, 0.5);
773
773
  --ct-toggle-switch-colour-background-on-hovered: rgba(0, 169, 221, 0.5);
774
774
  --ct-toggle-switch-colour-background-on-pressed: rgba(0, 169, 221, 0.5);
@@ -865,7 +865,7 @@
865
865
  --ct-stepper-border-radius-set: 4px;
866
866
  --ct-stepper-spacing-step-wrapper-gap: 8px;
867
867
  --ct-stepper-spacing-indicator-padding: 2px;
868
- --ct-stepper-font-size-label: 14px;
868
+ --ct-stepper-font-size-label: 0.875rem;
869
869
  --ct-sheet-colour-background-default: #121418;
870
870
  --ct-sheet-colour-background-base: #121418;
871
871
  --ct-sheet-colour-text-base: #e4e8eb;
@@ -958,48 +958,48 @@
958
958
  --ct-typography-colour-icon-base: #030304;
959
959
  --ct-typography-number: 0px;
960
960
  --ct-typography-number: 0px;
961
- --ct-typography-2xs-label-font-size: 10px;
962
- --ct-typography-2xs-caption-font-size: 0px;
963
- --ct-typography-2xs-font-size-label-font-size: 10px;
964
- --ct-typography-2xs-font-size-caption-font-size: 0px;
965
- --ct-typography-xs-label-font-size: 10px;
966
- --ct-typography-xs-caption-font-size: 10px;
967
- --ct-typography-xs-font-size-label-font-size: 10px;
968
- --ct-typography-xs-font-size-caption-font-size: 10px;
969
- --ct-typography-sm-label-font-size: 12px;
970
- --ct-typography-sm-caption-font-size: 10px;
971
- --ct-typography-sm-font-size-label-font-size: 12px;
972
- --ct-typography-sm-font-size-caption-font-size: 10px;
973
- --ct-typography-md-label-font-size: 14px;
974
- --ct-typography-md-caption-font-size: 12px;
975
- --ct-typography-md-font-size-label-font-size: 14px;
976
- --ct-typography-md-font-size-caption-font-size: 12px;
977
- --ct-typography-lg-label-font-size: 16px;
978
- --ct-typography-lg-caption-font-size: 12px;
979
- --ct-typography-lg-font-size-label-font-size: 16px;
980
- --ct-typography-lg-font-size-caption-font-size: 12px;
981
- --ct-typography-2xl-label-font-size: 20px;
982
- --ct-typography-2xl-caption-font-size: 12px;
983
- --ct-typography-2xl-font-size-label-font-size: 20px;
984
- --ct-typography-2xl-font-size-caption-font-size: 18px;
985
- --ct-typography-xl-label-font-size: 18px;
986
- --ct-typography-xl-caption-font-size: 0px;
987
- --ct-typography-xl-font-size-label-font-size: 18px;
988
- --ct-typography-xl-font-size-caption-font-size: 0px;
989
- --ct-typography-3xs-label-font-size: 0px;
990
- --ct-typography-3xs-caption-font-size: 0px;
991
- --ct-typography-3xs-font-size-label-font-size: 0px;
992
- --ct-typography-3xs-font-size-caption-font-size: 0px;
993
- --ct-typography-3xl-label-font-size: 24px;
994
- --ct-typography-3xl-caption-font-size: 0px;
995
- --ct-typography-3xl-font-size-label-font-size: 24px;
996
- --ct-typography-3xl-font-size-caption-font-size: 0px;
997
- --ct-typography-4xl-label-font-size: 24px;
998
- --ct-typography-4xl-caption-font-size: 0px;
999
- --ct-typography-4xl-font-size-label-font-size: 24px;
1000
- --ct-typography-4xl-font-size-caption-font-size: 0px;
1001
- --ct-typography-mode-label-font-size: 24px;
1002
- --ct-typography-mode-caption-font-size: 0px;
961
+ --ct-typography-2xs-label-font-size: 0.625rem;
962
+ --ct-typography-2xs-caption-font-size: 0rem;
963
+ --ct-typography-2xs-font-size-label-font-size: 0.625rem;
964
+ --ct-typography-2xs-font-size-caption-font-size: 0rem;
965
+ --ct-typography-xs-label-font-size: 0.625rem;
966
+ --ct-typography-xs-caption-font-size: 0.625rem;
967
+ --ct-typography-xs-font-size-label-font-size: 0.625rem;
968
+ --ct-typography-xs-font-size-caption-font-size: 0.625rem;
969
+ --ct-typography-sm-label-font-size: 0.75rem;
970
+ --ct-typography-sm-caption-font-size: 0.625rem;
971
+ --ct-typography-sm-font-size-label-font-size: 0.75rem;
972
+ --ct-typography-sm-font-size-caption-font-size: 0.625rem;
973
+ --ct-typography-md-label-font-size: 0.875rem;
974
+ --ct-typography-md-caption-font-size: 0.75rem;
975
+ --ct-typography-md-font-size-label-font-size: 0.875rem;
976
+ --ct-typography-md-font-size-caption-font-size: 0.75rem;
977
+ --ct-typography-lg-label-font-size: 1rem;
978
+ --ct-typography-lg-caption-font-size: 0.75rem;
979
+ --ct-typography-lg-font-size-label-font-size: 1rem;
980
+ --ct-typography-lg-font-size-caption-font-size: 0.75rem;
981
+ --ct-typography-2xl-label-font-size: 1.25rem;
982
+ --ct-typography-2xl-caption-font-size: 0.75rem;
983
+ --ct-typography-2xl-font-size-label-font-size: 1.25rem;
984
+ --ct-typography-2xl-font-size-caption-font-size: 1.125rem;
985
+ --ct-typography-xl-label-font-size: 1.125rem;
986
+ --ct-typography-xl-caption-font-size: 0rem;
987
+ --ct-typography-xl-font-size-label-font-size: 1.125rem;
988
+ --ct-typography-xl-font-size-caption-font-size: 0rem;
989
+ --ct-typography-3xs-label-font-size: 0rem;
990
+ --ct-typography-3xs-caption-font-size: 0rem;
991
+ --ct-typography-3xs-font-size-label-font-size: 0rem;
992
+ --ct-typography-3xs-font-size-caption-font-size: 0rem;
993
+ --ct-typography-3xl-label-font-size: 1.5rem;
994
+ --ct-typography-3xl-caption-font-size: 0rem;
995
+ --ct-typography-3xl-font-size-label-font-size: 1.5rem;
996
+ --ct-typography-3xl-font-size-caption-font-size: 0rem;
997
+ --ct-typography-4xl-label-font-size: 1.5rem;
998
+ --ct-typography-4xl-caption-font-size: 0rem;
999
+ --ct-typography-4xl-font-size-label-font-size: 1.5rem;
1000
+ --ct-typography-4xl-font-size-caption-font-size: 0rem;
1001
+ --ct-typography-mode-label-font-size: 1.5rem;
1002
+ --ct-typography-mode-caption-font-size: 0rem;
1003
1003
  --ct-table-row-colour-background-default: #ffffff;
1004
1004
  --ct-table-row-colour-background-base: #ffffff;
1005
1005
  --ct-table-color: #ffffff;
@@ -1395,7 +1395,7 @@
1395
1395
  --ct-progress-bar-colour-text-default: #8f99ad;
1396
1396
  --ct-progress-bar-typography-font-weight: "Medium";
1397
1397
  --ct-progress-bar-typography-font-family: "Noto Sans";
1398
- --ct-progress-bar-typography-font-size: 14px;
1398
+ --ct-progress-bar-typography-font-size: 0.875rem;
1399
1399
  --ct-progress-bar-border-radius-base: 999px;
1400
1400
  --ct-progress-bar-sizing-height-base: 6px;
1401
1401
  --ct-progress-bar-spacing-padding-vertical: 4px;