@refinn/core-ui 0.1.0 → 0.1.2

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 (6) hide show
  1. package/dist/index.d.mts +142 -6
  2. package/dist/index.d.ts +142 -6
  3. package/dist/index.js +1272 -70
  4. package/dist/index.mjs +1272 -71
  5. package/dist/theme.css +915 -2
  6. package/package.json +1 -1
package/dist/theme.css CHANGED
@@ -6,6 +6,8 @@
6
6
  */
7
7
 
8
8
  @theme {
9
+ --spacing: 1px;
10
+
9
11
  /* ========================================
10
12
  * Fonts
11
13
  * ======================================== */
@@ -458,11 +460,172 @@
458
460
  --color-checkbox-contrast-description: var(--color-white-65);
459
461
  --color-checkbox-contrast-ring: var(--color-white-100);
460
462
 
463
+ /* ========================================
464
+ * Radio
465
+ * ========================================
466
+ * To rebrand: swap the var() references below.
467
+ * ======================================== */
468
+
469
+ /* Default (unselected) */
470
+ --color-radio-bg: var(--color-white-100);
471
+ --color-radio-border: var(--color-gray-400);
472
+ --color-radio-hover-border: var(--color-blue-600);
473
+
474
+ /* Selected */
475
+ --color-radio-selected-bg: var(--color-blue-600);
476
+ --color-radio-selected-border: var(--color-blue-600);
477
+ --color-radio-selected-dot: var(--color-white-100);
478
+
479
+ /* Focus ring */
480
+ --color-radio-ring: var(--color-blue-500);
481
+
482
+ /* Disabled */
483
+ --color-radio-disabled-bg: var(--color-gray-100);
484
+ --color-radio-disabled-border: var(--color-gray-300);
485
+ --color-radio-disabled-selected-bg: var(--color-gray-300);
486
+ --color-radio-disabled-dot: var(--color-gray-400);
487
+
488
+ /* Error */
489
+ --color-radio-error-border: var(--color-red-500);
490
+ --color-radio-error-bg: var(--color-white-100);
491
+ --color-radio-error-ring: var(--color-red-400);
492
+
493
+ /* Label / description */
494
+ --color-radio-label: var(--color-gray-900);
495
+ --color-radio-description: var(--color-gray-500);
496
+ --color-radio-label-disabled: var(--color-gray-400);
497
+ --color-radio-label-error: var(--color-red-600);
498
+
499
+ /* Contrast (on dark bg) */
500
+ --color-radio-contrast-bg: transparent;
501
+ --color-radio-contrast-border: var(--color-white-65);
502
+ --color-radio-contrast-selected-bg: var(--color-white-100);
503
+ --color-radio-contrast-selected-dot: var(--color-blue-700);
504
+ --color-radio-contrast-label: var(--color-white-100);
505
+ --color-radio-contrast-description: var(--color-white-65);
506
+ --color-radio-contrast-ring: var(--color-white-100);
507
+
508
+ /* ========================================
509
+ * Accordion
510
+ * ========================================
511
+ * To rebrand: swap the var() references below.
512
+ * ======================================== */
513
+
514
+ /* Background */
515
+ --color-accordion-bg: var(--color-white-100);
516
+ --color-accordion-bg-hover: var(--color-gray-50);
517
+ --color-accordion-bg-active: var(--color-gray-100);
518
+ --color-accordion-bg-disabled: var(--color-white-100);
519
+
520
+ /* Text */
521
+ --color-accordion-text: var(--color-gray-900);
522
+ --color-accordion-text-secondary: var(--color-gray-600);
523
+ --color-accordion-text-disabled: var(--color-gray-400);
524
+
525
+ /* Border */
526
+ --color-accordion-border: var(--color-gray-100);
527
+ --color-accordion-border-focus: var(--color-blue-500);
528
+
529
+ /* Icon */
530
+ --color-accordion-icon: var(--color-gray-500);
531
+ --color-accordion-icon-disabled: var(--color-gray-300);
532
+
533
+ /* ========================================
534
+ * Badge
535
+ * ========================================
536
+ * To rebrand: swap the var() references below.
537
+ * ======================================== */
538
+
539
+ /* ── Minimal (text only, transparent bg) ── */
540
+ --color-badge-minimal-common-text: var(--color-gray-600);
541
+ --color-badge-minimal-success-text: var(--color-green-700);
542
+ --color-badge-minimal-warning-text: var(--color-amber-700);
543
+ --color-badge-minimal-info-text: var(--color-ocean-700);
544
+ --color-badge-minimal-brand-text: var(--color-blue-700);
545
+ --color-badge-minimal-danger-text: var(--color-red-600);
546
+
547
+ --color-badge-minimal-common-border: var(--color-gray-300);
548
+ --color-badge-minimal-success-border: var(--color-green-300);
549
+ --color-badge-minimal-warning-border: var(--color-amber-300);
550
+ --color-badge-minimal-info-border: var(--color-ocean-300);
551
+ --color-badge-minimal-brand-border: var(--color-blue-300);
552
+ --color-badge-minimal-danger-border: var(--color-red-300);
553
+
554
+ --color-badge-minimal-common-dot: var(--color-gray-400);
555
+ --color-badge-minimal-success-dot: var(--color-green-500);
556
+ --color-badge-minimal-warning-dot: var(--color-amber-500);
557
+ --color-badge-minimal-info-dot: var(--color-ocean-500);
558
+ --color-badge-minimal-brand-dot: var(--color-blue-500);
559
+ --color-badge-minimal-danger-dot: var(--color-red-500);
560
+
561
+ /* ── Subtle (soft bg + tinted text) ── */
562
+ --color-badge-subtle-common-bg: var(--color-gray-100);
563
+ --color-badge-subtle-success-bg: var(--color-green-100);
564
+ --color-badge-subtle-warning-bg: var(--color-amber-100);
565
+ --color-badge-subtle-info-bg: var(--color-ocean-100);
566
+ --color-badge-subtle-brand-bg: var(--color-blue-100);
567
+ --color-badge-subtle-danger-bg: var(--color-red-100);
568
+
569
+ --color-badge-subtle-common-text: var(--color-gray-900);
570
+ --color-badge-subtle-success-text: var(--color-green-700);
571
+ --color-badge-subtle-warning-text: var(--color-amber-700);
572
+ --color-badge-subtle-info-text: var(--color-ocean-700);
573
+ --color-badge-subtle-brand-text: var(--color-blue-700);
574
+ --color-badge-subtle-danger-text: var(--color-red-600);
575
+
576
+ --color-badge-subtle-common-dot: var(--color-gray-400);
577
+ --color-badge-subtle-success-dot: var(--color-green-600);
578
+ --color-badge-subtle-warning-dot: var(--color-amber-500);
579
+ --color-badge-subtle-info-dot: var(--color-ocean-500);
580
+ --color-badge-subtle-brand-dot: var(--color-blue-600);
581
+ --color-badge-subtle-danger-dot: var(--color-red-500);
582
+
583
+ /* ── Bold (solid bg + white text) ── */
584
+ --color-badge-bold-common-bg: var(--color-gray-400);
585
+ --color-badge-bold-success-bg: var(--color-green-600);
586
+ --color-badge-bold-warning-bg: var(--color-amber-500);
587
+ --color-badge-bold-info-bg: var(--color-ocean-500);
588
+ --color-badge-bold-brand-bg: var(--color-blue-600);
589
+ --color-badge-bold-danger-bg: var(--color-red-500);
590
+
591
+ --color-badge-bold-text: var(--color-white-100);
592
+
593
+ --color-badge-bold-common-dot: var(--color-white-80);
594
+ --color-badge-bold-success-dot: var(--color-white-80);
595
+ --color-badge-bold-warning-dot: var(--color-white-80);
596
+ --color-badge-bold-info-dot: var(--color-white-80);
597
+ --color-badge-bold-brand-dot: var(--color-white-80);
598
+ --color-badge-bold-danger-dot: var(--color-white-80);
599
+
600
+ /* ========================================
601
+ * Avatar
602
+ * ========================================
603
+ * To rebrand: swap the var() references below.
604
+ * ======================================== */
605
+
606
+ /* Background */
607
+ --color-avatar-bg: var(--color-blue-600);
608
+ --color-avatar-bg-hover: var(--color-blue-700);
609
+ --color-avatar-bg-active: var(--color-blue-800);
610
+
611
+ /* Text */
612
+ --color-avatar-text: var(--color-white-100);
613
+
614
+ /* Focus ring */
615
+ --color-avatar-ring: var(--color-blue-500);
616
+
617
+ /* Status indicator */
618
+ --color-avatar-status-online: var(--color-green-500);
619
+ --color-avatar-status-offline: var(--color-gray-400);
620
+ --color-avatar-status-busy: var(--color-red-500);
621
+ --color-avatar-status-border: var(--color-white-100);
622
+
461
623
  /* ========================================
462
624
  * Border Radius
463
625
  * ======================================== */
464
626
  --radius-none: 0px;
465
- --radius-sm: 2px;
627
+ --radius-xs: 2px;
628
+ --radius-sm: 4px;
466
629
  --radius-DEFAULT: 4px;
467
630
  --radius-md: 6px;
468
631
  --radius-lg: 8px;
@@ -471,6 +634,124 @@
471
634
  --radius-3xl: 24px;
472
635
  --radius-4xl: 32px;
473
636
  --radius-full: 9999px;
637
+ --radius-2: 2px;
638
+ --radius-4: 4px;
639
+ --radius-6: 6px;
640
+ --radius-8: 8px;
641
+ --radius-12: 12px;
642
+ --radius-16: 16px;
643
+ --radius-24: 24px;
644
+ --radius-32: 32px;
645
+
646
+ /* ========================================
647
+ * Toast
648
+ * ========================================
649
+ * To rebrand: swap the var() references below.
650
+ * ======================================== */
651
+
652
+ /* Default */
653
+ --color-toast-default-bg: var(--color-gray-900);
654
+ --color-toast-default-text: var(--color-white-100);
655
+ --color-toast-default-icon: var(--color-white-100);
656
+
657
+ /* Error */
658
+ --color-toast-error-bg: var(--color-red-500);
659
+ --color-toast-error-text: var(--color-white-100);
660
+ --color-toast-error-icon: var(--color-white-100);
661
+
662
+ /* Progress */
663
+ --color-toast-progress-bg: var(--color-gray-900);
664
+ --color-toast-progress-text: var(--color-white-100);
665
+ --color-toast-progress-icon: var(--color-white-80);
666
+
667
+ /* Action button */
668
+ --color-toast-action-text: var(--color-white-100);
669
+ --color-toast-action-bg-hover: var(--color-white-10);
670
+
671
+ /* Dismiss */
672
+ --color-toast-dismiss: var(--color-white-65);
673
+ --color-toast-dismiss-hover: var(--color-white-100);
674
+
675
+ /* ========================================
676
+ * Alert Banner
677
+ * ========================================
678
+ * To rebrand: swap the var() references below.
679
+ * ======================================== */
680
+
681
+ /* Inline backgrounds */
682
+ --color-alert-inline-info-bg: var(--color-ocean-50);
683
+ --color-alert-inline-success-bg: var(--color-green-50);
684
+ --color-alert-inline-warning-bg: var(--color-amber-50);
685
+ --color-alert-inline-danger-bg: var(--color-red-50);
686
+ --color-alert-inline-common-bg: var(--color-gray-50);
687
+
688
+ /* Inline borders */
689
+ --color-alert-inline-info-border: var(--color-ocean-500);
690
+ --color-alert-inline-success-border: var(--color-green-600);
691
+ --color-alert-inline-warning-border: var(--color-amber-500);
692
+ --color-alert-inline-danger-border: var(--color-red-500);
693
+ --color-alert-inline-common-border: var(--color-gray-400);
694
+
695
+ /* Inline icons */
696
+ --color-alert-inline-info-icon: var(--color-ocean-600);
697
+ --color-alert-inline-success-icon: var(--color-green-600);
698
+ --color-alert-inline-warning-icon: var(--color-amber-600);
699
+ --color-alert-inline-danger-icon: var(--color-red-600);
700
+ --color-alert-inline-common-icon: var(--color-gray-600);
701
+
702
+ /* Page backgrounds */
703
+ --color-alert-page-info-bg: var(--color-ocean-600);
704
+ --color-alert-page-success-bg: var(--color-green-600);
705
+ --color-alert-page-warning-bg: var(--color-amber-500);
706
+ --color-alert-page-danger-bg: var(--color-red-600);
707
+ --color-alert-page-common-bg: var(--color-gray-600);
708
+
709
+ /* Text */
710
+ --color-alert-text-primary: var(--color-gray-900);
711
+ --color-alert-text-secondary: var(--color-gray-600);
712
+ --color-alert-text-primary-inverse: var(--color-white-100);
713
+ --color-alert-text-secondary-inverse: var(--color-white-90);
714
+ --color-enabled: var(--color-blue-600);
715
+ --color-enabled-inverse: var(--color-white-100);
716
+ --color-enabled-dark: var(--color-gray-900);
717
+
718
+ /* Close button */
719
+ --color-alert-close: var(--color-gray-500);
720
+ --color-alert-close-hover: var(--color-gray-700);
721
+ --color-alert-close-inverse: var(--color-white-80);
722
+ --color-alert-close-inverse-hover: var(--color-white-100);
723
+
724
+ /* ========================================
725
+ * Slider
726
+ * ========================================
727
+ * To rebrand: swap the var() references below.
728
+ * ======================================== */
729
+
730
+ /* Track */
731
+ --color-slider-track: var(--color-gray-200);
732
+ --color-slider-track-disabled: var(--color-gray-100);
733
+
734
+ /* Fill (active portion) */
735
+ --color-slider-fill: var(--color-blue-600);
736
+ --color-slider-fill-disabled: var(--color-gray-300);
737
+ --color-slider-fill-error: var(--color-red-500);
738
+
739
+ /* Thumb */
740
+ --color-slider-thumb: var(--color-white-100);
741
+ --color-slider-thumb-disabled: var(--color-gray-100);
742
+ --color-slider-thumb-border: var(--color-blue-600);
743
+ --color-slider-thumb-border-disabled: var(--color-gray-300);
744
+ --color-slider-thumb-border-error: var(--color-red-500);
745
+
746
+ /* Focus ring */
747
+ --color-slider-ring: var(--color-blue-500);
748
+ --color-slider-ring-error: var(--color-red-400);
749
+
750
+ /* Label */
751
+ --color-slider-label: var(--color-gray-900);
752
+ --color-slider-description: var(--color-gray-500);
753
+ --color-slider-label-disabled: var(--color-gray-400);
754
+ --color-slider-label-error: var(--color-red-600);
474
755
 
475
756
  /* ========================================
476
757
  * Box Shadow
@@ -480,4 +761,636 @@
480
761
  --shadow-medium: 0px 4px 6px -1px rgba(17, 24, 39, 0.1), 0px 2px 4px -2px rgba(17, 24, 39, 0.1);
481
762
  --shadow-large: 0px 10px 16px -3px rgba(17, 24, 39, 0.1), 0px 4px 6px -4px rgba(17, 24, 39, 0.1);
482
763
  --shadow-xl: 0px 20px 24px -5px rgba(17, 24, 39, 0.1), 0px 8px 10px -6px rgba(17, 24, 39, 0.1);
483
- }
764
+ --shadow-small-top: 0px -1px 2px 0px rgba(17, 24, 39, 0.05);
765
+ --shadow-base-top: 0px -1px 3px 0px rgba(17, 24, 39, 0.1), 0px -1px 2px -1px rgba(17, 24, 39, 0.1);
766
+ --shadow-medium-top: 0px -4px 6px -1px rgba(17, 24, 39, 0.1), 0px -2px 4px -2px rgba(17, 24, 39, 0.1);
767
+
768
+ /* ========================================
769
+ * Variables - Collections - Colors
770
+ * ======================================== */
771
+ --color-button-background-primary-enabled: var(--color-blue-600);
772
+ --color-button-background-primary-hover: var(--color-blue-700);
773
+ --color-button-background-primary-active: var(--color-blue-800);
774
+ --color-button-background-primary-focus: var(--color-blue-600);
775
+ --color-button-background-primary-disabled: var(--color-gray-100);
776
+ --color-button-background-primary-pending: var(--color-blue-600);
777
+
778
+ --color-button-background-secondary-enabled: var(--color-gray-100);
779
+ --color-button-background-secondary-hover: var(--color-gray-200);
780
+ --color-button-background-secondary-active: var(--color-gray-300);
781
+ --color-button-background-secondary-focus: var(--color-gray-100);
782
+ --color-button-background-secondary-disabled: var(--color-gray-100);
783
+ --color-button-background-secondary-pending: var(--color-gray-100);
784
+
785
+ --color-button-background-tertiary-enabled: var(--color-black-0);
786
+ --color-button-background-tertiary-hover: var(--color-gray-200);
787
+ --color-button-background-tertiary-active: var(--color-gray-300);
788
+ --color-button-background-tertiary-focus: var(--color-gray-100);
789
+ --color-button-background-tertiary-disabled: var(--color-gray-100);
790
+ --color-button-background-tertiary-pending: var(--color-gray-100);
791
+
792
+ --color-button-background-inverse-enabled: var(--color-white-100);
793
+ --color-button-background-inverse-hover: var(--color-white-90);
794
+ --color-button-background-inverse-active: var(--color-white-80);
795
+ --color-button-background-inverse-focus: var(--color-white-100);
796
+ --color-button-background-inverse-disabled: var(--color-gray-50);
797
+ --color-button-background-inverse-pending: var(--color-white-100);
798
+
799
+ --color-button-background-transparent-enabled: var(--color-black-0);
800
+ --color-button-background-transparent-on-light-hover: var(--color-white-20);
801
+ --color-button-background-transparent-on-dark-hover: var(--color-black-20);
802
+ --color-button-background-transparent-on-light-active: var(--color-white-30);
803
+ --color-button-background-transparent-on-dark-active: var(--color-black-30);
804
+ --color-button-background-transparent-focus: var(--color-black-0);
805
+ --color-button-background-transparent-disabled: var(--color-black-0);
806
+ --color-button-background-transparent-pending: var(--color-black-0);
807
+
808
+ --color-button-text-enabled: var(--color-gray-900);
809
+ --color-button-text-disabled: var(--color-gray-400);
810
+ --color-button-text-danger: var(--color-red-600);
811
+ --color-button-text-brand: var(--color-blue-600);
812
+ --color-button-text-inverse: var(--color-white-100);
813
+ --color-button-text-inverse-disabled: var(--color-white-40);
814
+
815
+ --color-button-border-focus: var(--color-blue-500);
816
+ --color-button-border-inverse: var(--color-white-100);
817
+
818
+ --color-button-sheet-background-enabled: var(--color-white-100);
819
+
820
+ --color-button-sheet-text-primary: var(--color-gray-900);
821
+ --color-button-sheet-text-secondary: var(--color-gray-600);
822
+
823
+ --color-link-text-enabled: var(--color-blue-600);
824
+ --color-link-text-hover: var(--color-blue-700);
825
+ --color-link-text-active: var(--color-blue-800);
826
+ --color-link-text-focus: var(--color-blue-600);
827
+ --color-link-text-visited: var(--color-purple-700);
828
+ --color-link-text-enabled-inverse: var(--color-white-100);
829
+ --color-link-text-hover-inverse: var(--color-white-80);
830
+ --color-link-text-active-inverse: var(--color-white-65);
831
+ --color-link-text-focus-inverse: var(--color-white-100);
832
+ --color-link-text-visited-inverse: var(--color-white-65);
833
+ --color-link-text-enabled-dark: var(--color-gray-900);
834
+ --color-link-text-hover-dark: var(--color-blue-600);
835
+ --color-link-text-active-dark: var(--color-blue-700);
836
+ --color-link-text-focus-dark: var(--color-gray-900);
837
+
838
+ --color-link-icon-enabled: var(--color-blue-600);
839
+ --color-link-icon-hover: var(--color-blue-700);
840
+ --color-link-icon-active: var(--color-blue-800);
841
+ --color-link-icon-focus: var(--color-blue-600);
842
+ --color-link-icon-visited: var(--color-purple-700);
843
+ --color-link-icon-enabled-inverse: var(--color-white-100);
844
+ --color-link-icon-hover-inverse: var(--color-white-85);
845
+ --color-link-icon-active-inverse: var(--color-white-80);
846
+ --color-link-icon-focus-inverse: var(--color-white-100);
847
+ --color-link-icon-visited-inverse: var(--color-white-65);
848
+ --color-link-icon-enabled-dark: var(--color-gray-900);
849
+ --color-link-icon-hover-dark: var(--color-blue-600);
850
+ --color-link-icon-active-dark: var(--color-blue-700);
851
+ --color-link-icon-focus-dark: var(--color-gray-900);
852
+
853
+ --color-link-border-focus: var(--color-blue-500);
854
+ --color-link-border-focus-inverse: var(--color-white-100);
855
+
856
+ --color-tab-background-primary: var(--color-black-0);
857
+
858
+ --color-tab-text-enabled: var(--color-gray-900);
859
+ --color-tab-text-hover: var(--color-gray-600);
860
+ --color-tab-text-active: var(--color-blue-600);
861
+ --color-tab-text-focus: var(--color-gray-900);
862
+ --color-tab-text-disabled: var(--color-gray-400);
863
+
864
+ --color-tab-border-enabled: var(--color-gray-50);
865
+ --color-tab-border-hover: var(--color-gray-200);
866
+ --color-tab-border-active: var(--color-blue-600);
867
+ --color-tab-border-focus: var(--color-blue-500);
868
+ --color-tab-border-disabled: var(--color-gray-100);
869
+
870
+ --color-navigation-menu-background-enabled: var(--color-white-100);
871
+ --color-navigation-menu-background-hover: var(--color-gray-50);
872
+ --color-navigation-menu-background-active: var(--color-gray-50);
873
+ --color-navigation-menu-background-brand: var(--color-blue-600);
874
+ --color-navigation-menu-background-brand-subtle: var(--color-blue-50);
875
+ --color-navigation-menu-background-transparent: var(--color-black-0);
876
+
877
+ --color-navigation-menu-text-enabled: var(--color-gray-900);
878
+ --color-navigation-menu-text-subtle: var(--color-gray-600);
879
+ --color-navigation-menu-text-inverse: var(--color-white-100);
880
+ --color-navigation-menu-text-hover: var(--color-blue-600);
881
+ --color-navigation-menu-text-hover-inverse: var(--color-white-80);
882
+ --color-navigation-menu-text-active: var(--color-blue-600);
883
+ --color-navigation-menu-text-active-inverse: var(--color-white-100);
884
+ --color-navigation-menu-text-focus: var(--color-gray-900);
885
+ --color-navigation-menu-text-focus-inverse: var(--color-white-100);
886
+
887
+ --color-navigation-menu-icon-brand: var(--color-blue-600);
888
+
889
+ --color-navigation-menu-border-enabled: var(--color-gray-300);
890
+ --color-navigation-menu-border-inverse: var(--color-white-100);
891
+ --color-navigation-menu-border-active: var(--color-blue-600);
892
+ --color-navigation-menu-border-active-inverse: var(--color-white-100);
893
+ --color-navigation-menu-border-focus: var(--color-blue-500);
894
+ --color-navigation-menu-border-focus-inverse: var(--color-white-100);
895
+
896
+ --color-icon-button-background-enabled: var(--color-gray-100);
897
+ --color-icon-button-background-hover: var(--color-gray-200);
898
+ --color-icon-button-background-active: var(--color-gray-300);
899
+ --color-icon-button-background-transparent: var(--color-black-0);
900
+ --color-icon-button-background-light-transparent-enabled: var(--color-white-10);
901
+ --color-icon-button-background-light-transparent-hover: var(--color-white-20);
902
+ --color-icon-button-background-light-transparent-active: var(--color-white-30);
903
+ --color-icon-button-background-dark-transparent-enabled: var(--color-black-10);
904
+ --color-icon-button-background-dark-transparent-hover: var(--color-black-20);
905
+ --color-icon-button-background-dark-transparent-active: var(--color-black-30);
906
+
907
+ --color-icon-button-icon-primary: var(--color-gray-600);
908
+ --color-icon-button-icon-inverse: var(--color-white-100);
909
+ --color-icon-button-icon-brand: var(--color-blue-600);
910
+ --color-icon-button-icon-danger: var(--color-red-500);
911
+ --color-icon-button-icon-disabled: var(--color-gray-400);
912
+ --color-icon-button-icon-inverse-disabled: var(--color-white-40);
913
+ --color-icon-button-icon-brand-disabled: var(--color-blue-600 / 40%);
914
+ --color-icon-button-icon-inverse-danger: var(--color-red-400);
915
+
916
+ --color-icon-button-border-focus: var(--color-blue-500);
917
+
918
+ --color-chip-background-enabled: var(--color-gray-100);
919
+ --color-chip-background-hover: var(--color-gray-200);
920
+ --color-chip-background-active: var(--color-blue-600);
921
+ --color-chip-background-active-hover: var(--color-blue-700);
922
+ --color-chip-background-black-active: var(--color-blue-950);
923
+ --color-chip-background-black-active-hover: var(--color-blue-900);
924
+ --color-chip-background-active-focus: var(--color-blue-600);
925
+ --color-chip-background-active-disabled: var(--color-blue-600 / 40%);
926
+ --color-chip-background-focus: var(--color-gray-100);
927
+ --color-chip-background-disabled: var(--color-gray-100);
928
+ --color-chip-background-inverse: var(--color-white-100);
929
+
930
+ --color-chip-text-enabled: var(--color-gray-900);
931
+ --color-chip-text-disabled: var(--color-gray-400);
932
+ --color-chip-text-inverse: var(--color-white-100);
933
+ --color-chip-text-inverse-disabled: var(--color-white-65);
934
+
935
+ --color-chip-border-enabled: var(--color-gray-300);
936
+ --color-chip-border-hover: var(--color-gray-500);
937
+ --color-chip-border-focus: var(--color-blue-500);
938
+ --color-chip-border-inverse: var(--color-white-100);
939
+
940
+ --color-segmented-control-background-enabled: var(--color-black-0);
941
+ --color-segmented-control-background-hover: var(--color-gray-200);
942
+ --color-segmented-control-background-active: var(--color-blue-950);
943
+ --color-segmented-control-background-active-hover: var(--color-blue-900);
944
+ --color-segmented-control-background-active-focus: var(--color-blue-950);
945
+ --color-segmented-control-background-focus: var(--color-black-0);
946
+
947
+ --color-segmented-control-text-primary: var(--color-gray-900);
948
+ --color-segmented-control-text-secondary: var(--color-gray-600);
949
+ --color-segmented-control-text-primary-inverse: var(--color-white-100);
950
+ --color-segmented-control-text-secondary-inverse: var(--color-white-80);
951
+
952
+ --color-segmented-control-border-focus: var(--color-blue-600);
953
+
954
+ --color-slider-background-track: var(--color-blue-600);
955
+ --color-slider-background-root: var(--color-gray-100);
956
+ --color-slider-background-disabled: var(--color-gray-200);
957
+
958
+ --color-slider-border-enabled: var(--color-gray-200);
959
+ --color-slider-border-hover: var(--color-gray-300);
960
+ --color-slider-border-active: var(--color-gray-300);
961
+ --color-slider-border-focus: var(--color-blue-500);
962
+ --color-slider-border-disabled: var(--color-gray-200);
963
+
964
+ --color-slider-handle-enabled: var(--color-white-100);
965
+ --color-slider-handle-hover: var(--color-white-100);
966
+ --color-slider-handle-active: var(--color-gray-50);
967
+ --color-slider-handle-focus: var(--color-white-100);
968
+ --color-slider-handle-disabled: var(--color-gray-100);
969
+
970
+ --color-menu-background-enabled: var(--color-white-100);
971
+ --color-menu-background-hover: var(--color-gray-100);
972
+ --color-menu-background-active: var(--color-gray-200);
973
+ --color-menu-background-focus: var(--color-white-100);
974
+ --color-menu-background-disabled: var(--color-gray-50);
975
+
976
+ --color-menu-text-enabled: var(--color-gray-900);
977
+ --color-menu-text-disabled: var(--color-gray-400);
978
+
979
+ --color-menu-border-focus: var(--color-blue-500);
980
+
981
+ --color-checkbox-text-primary: var(--color-gray-900);
982
+ --color-checkbox-text-secondary: var(--color-gray-600);
983
+ --color-checkbox-text-danger: var(--color-red-600);
984
+ --color-checkbox-text-disabled: var(--color-gray-400);
985
+ --color-checkbox-text-primary-inverse: var(--color-white-100);
986
+ --color-checkbox-text-secondary-inverse: var(--color-white-85);
987
+ --color-checkbox-text-danger-inverse: var(--color-red-500);
988
+ --color-checkbox-text-disabled-inverse: var(--color-white-40);
989
+
990
+ --color-checkbox-border-focus: var(--color-blue-500);
991
+
992
+ --color-dropdown-background-enabled: var(--color-white-100);
993
+ --color-dropdown-background-hover: var(--color-gray-100);
994
+ --color-dropdown-background-active: var(--color-gray-200);
995
+ --color-dropdown-background-focus: var(--color-white-100);
996
+ --color-dropdown-background-disabled: var(--color-gray-50);
997
+
998
+ --color-dropdown-text-primary: var(--color-gray-900);
999
+ --color-dropdown-text-secondary: var(--color-gray-600);
1000
+ --color-dropdown-text-tertiary: var(--color-gray-400);
1001
+ --color-dropdown-text-danger: var(--color-red-600);
1002
+ --color-dropdown-text-disabled: var(--color-gray-400);
1003
+
1004
+ --color-dropdown-border-enabled: var(--color-gray-300);
1005
+ --color-dropdown-border-hover: var(--color-gray-400);
1006
+ --color-dropdown-border-active: var(--color-blue-600);
1007
+ --color-dropdown-border-focus: var(--color-blue-500);
1008
+ --color-dropdown-border-danger: var(--color-red-600);
1009
+ --color-dropdown-border-disabled: var(--color-gray-200);
1010
+ --color-dropdown-border-typing-indicator: var(--color-gray-900);
1011
+
1012
+ --color-text-field-background-enabled: var(--color-white-100);
1013
+ --color-text-field-background-disabled: var(--color-gray-50);
1014
+
1015
+ --color-text-field-text-primary: var(--color-gray-900);
1016
+ --color-text-field-text-secondary: var(--color-gray-600);
1017
+ --color-text-field-text-tertiary: var(--color-gray-400);
1018
+ --color-text-field-text-danger: var(--color-red-600);
1019
+ --color-text-field-text-disabled: var(--color-gray-400);
1020
+
1021
+ --color-text-field-border-enabled: var(--color-gray-300);
1022
+ --color-text-field-border-hover: var(--color-gray-400);
1023
+ --color-text-field-border-active: var(--color-blue-600);
1024
+ --color-text-field-border-focus: var(--color-blue-500);
1025
+ --color-text-field-border-danger: var(--color-red-500);
1026
+ --color-text-field-border-disabled: var(--color-gray-200);
1027
+ --color-text-field-border-typing-indicator: var(--color-gray-900);
1028
+
1029
+ --color-text-area-background-enabled: var(--color-white-100);
1030
+ --color-text-area-background-disabled: var(--color-gray-50);
1031
+
1032
+ --color-text-area-text-primary: var(--color-gray-900);
1033
+ --color-text-area-text-secondary: var(--color-gray-600);
1034
+ --color-text-area-text-tertiary: var(--color-gray-400);
1035
+ --color-text-area-text-danger: var(--color-red-600);
1036
+ --color-text-area-text-disabled: var(--color-gray-400);
1037
+
1038
+ --color-text-area-border-enabled: var(--color-gray-300);
1039
+ --color-text-area-border-hover: var(--color-gray-400);
1040
+ --color-text-area-border-active: var(--color-blue-600);
1041
+ --color-text-area-border-focus: var(--color-blue-500);
1042
+ --color-text-area-border-danger: var(--color-red-500);
1043
+ --color-text-area-border-disabled: var(--color-gray-200);
1044
+ --color-text-area-border-typing-indicator: var(--color-gray-900);
1045
+
1046
+ --color-password-input-background-primary: var(--color-white-100);
1047
+
1048
+ --color-password-input-text-primary: var(--color-gray-900);
1049
+ --color-password-input-text-secondary: var(--color-gray-600);
1050
+ --color-password-input-text-tertiary: var(--color-gray-400);
1051
+
1052
+ --color-password-input-icon-primary: var(--color-gray-900);
1053
+
1054
+ --color-password-input-border-enabled: var(--color-gray-300);
1055
+ --color-password-input-border-hover: var(--color-gray-400);
1056
+ --color-password-input-border-active: var(--color-blue-600);
1057
+ --color-password-input-border-focus: var(--color-blue-500);
1058
+ --color-password-input-border-typing-indicator: var(--color-gray-900);
1059
+
1060
+ --color-radio-text-primary: var(--color-gray-900);
1061
+ --color-radio-text-secondary: var(--color-gray-600);
1062
+ --color-radio-text-danger: var(--color-red-600);
1063
+ --color-radio-text-disabled: var(--color-gray-400);
1064
+
1065
+ --color-radio-border-focus: var(--color-blue-500);
1066
+
1067
+ --color-toggle-switch-background-enabled: var(--color-gray-200);
1068
+ --color-toggle-switch-background-hover: var(--color-gray-300);
1069
+ --color-toggle-switch-background-focus: var(--color-gray-200);
1070
+ --color-toggle-switch-background-active: var(--color-green-600);
1071
+ --color-toggle-switch-background-active-hover: var(--color-green-700);
1072
+ --color-toggle-switch-background-active-focus: var(--color-green-600);
1073
+ --color-toggle-switch-background-active-disabled: var(--color-green-600 / 40%);
1074
+ --color-toggle-switch-background-disabled: var(--color-gray-100);
1075
+ --color-toggle-switch-background-toggle: var(--color-white-100);
1076
+
1077
+ --color-toggle-switch-text-primary: var(--color-gray-900);
1078
+ --color-toggle-switch-text-disabled: var(--color-gray-400);
1079
+
1080
+ --color-toggle-switch-border-focus: var(--color-blue-500);
1081
+ --color-toggle-switch-border-focus-inverse: var(--color-white-100);
1082
+
1083
+ --color-search-color: var(--color-white-100);
1084
+
1085
+ --color-date-picker-color: var(--color-white-100);
1086
+
1087
+ --color-accordion-background-enabled: var(--color-white-100);
1088
+ --color-accordion-background-hover: var(--color-gray-50);
1089
+ --color-accordion-background-active: var(--color-gray-100);
1090
+ --color-accordion-background-focus: var(--color-white-100);
1091
+ --color-accordion-background-disabled: var(--color-white-100);
1092
+
1093
+ --color-accordion-text-primary: var(--color-gray-900);
1094
+ --color-accordion-text-secondary: var(--color-gray-600);
1095
+ --color-accordion-text-disabled: var(--color-gray-400);
1096
+
1097
+ --color-accordion-border-enabled: var(--color-gray-100);
1098
+ --color-accordion-border-focus: var(--color-blue-500);
1099
+
1100
+ --color-dialog-background-primary: var(--color-white-100);
1101
+ --color-dialog-background-transparent: var(--color-black-20);
1102
+
1103
+ --color-dialog-text-primary: var(--color-gray-900);
1104
+ --color-dialog-text-secondary: var(--color-gray-600);
1105
+
1106
+ --color-dialog-icon-warning: var(--color-amber-500);
1107
+ --color-dialog-icon-danger: var(--color-red-500);
1108
+
1109
+ --color-card-enabled: var(--color-white-100);
1110
+
1111
+ --color-drawer-enabled: var(--color-white-100);
1112
+
1113
+ --color-footer-enabled: var(--color-white-100);
1114
+
1115
+ --color-alert-banner-background-info-subtle: var(--color-ocean-50);
1116
+ --color-alert-banner-background-success-subtle: var(--color-green-50);
1117
+ --color-alert-banner-background-warning-subtle: var(--color-amber-50);
1118
+ --color-alert-banner-background-danger-subtle: var(--color-red-50);
1119
+ --color-alert-banner-background-common-subtle: var(--color-gray-50);
1120
+ --color-alert-banner-background-info: var(--color-ocean-600);
1121
+ --color-alert-banner-background-success: var(--color-green-600);
1122
+ --color-alert-banner-background-warning: var(--color-amber-500);
1123
+ --color-alert-banner-background-danger: var(--color-red-600);
1124
+ --color-alert-banner-background-common: var(--color-gray-600);
1125
+ --color-alert-banner-background-transparent: var(--color-black-0);
1126
+
1127
+ --color-alert-banner-text-primary: var(--color-gray-900);
1128
+ --color-alert-banner-text-secondary: var(--color-gray-600);
1129
+ --color-alert-banner-text-primary-inverse: var(--color-white-100);
1130
+ --color-alert-banner-text-secondary-inverse: var(--color-white-90);
1131
+
1132
+ --color-alert-banner-border-info: var(--color-ocean-500);
1133
+ --color-alert-banner-border-success: var(--color-green-600);
1134
+ --color-alert-banner-border-warning: var(--color-amber-500);
1135
+ --color-alert-banner-border-danger: var(--color-red-500);
1136
+ --color-alert-banner-border-common: var(--color-gray-400);
1137
+
1138
+ --color-avatar-background-enabled: var(--color-gray-200);
1139
+ --color-avatar-background-hover: var(--color-gray-300);
1140
+ --color-avatar-background-active: var(--color-gray-400);
1141
+ --color-avatar-background-focus: var(--color-gray-200);
1142
+ --color-avatar-background-transparent-hover: var(--color-black-10);
1143
+ --color-avatar-background-transparent-active: var(--color-black-20);
1144
+
1145
+ --color-avatar-text-primary: var(--color-gray-900);
1146
+
1147
+ --color-avatar-border-primary: var(--color-blue-500);
1148
+
1149
+ --color-badges-background-common: var(--color-gray-400);
1150
+ --color-badges-background-common-subtle: var(--color-gray-100);
1151
+ --color-badges-background-success: var(--color-green-600);
1152
+ --color-badges-background-success-subtle: var(--color-green-100);
1153
+ --color-badges-background-warning: var(--color-amber-500);
1154
+ --color-badges-background-warning-subtle: var(--color-amber-100);
1155
+ --color-badges-background-danger: var(--color-red-500);
1156
+ --color-badges-background-danger-subtle: var(--color-red-100);
1157
+ --color-badges-background-info: var(--color-ocean-500);
1158
+ --color-badges-background-info-subtle: var(--color-ocean-100);
1159
+ --color-badges-background-brand: var(--color-blue-600);
1160
+ --color-badges-background-brand-subtle: var(--color-blue-100);
1161
+ --color-badges-background-transparent: var(--color-black-0);
1162
+
1163
+ --color-badges-text-primary: var(--color-gray-900);
1164
+ --color-badges-text-inverse: var(--color-white-100);
1165
+ --color-badges-text-success: var(--color-green-700);
1166
+ --color-badges-text-info: var(--color-ocean-700);
1167
+ --color-badges-text-brand: var(--color-blue-700);
1168
+ --color-badges-text-warning: var(--color-amber-700);
1169
+ --color-badges-text-danger: var(--color-red-600);
1170
+
1171
+ --color-badges-border-primary: var(--color-gray-400);
1172
+ --color-badges-border-success: var(--color-green-600);
1173
+ --color-badges-border-info: var(--color-ocean-500);
1174
+ --color-badges-border-brand: var(--color-blue-500);
1175
+ --color-badges-border-warning: var(--color-amber-500);
1176
+ --color-badges-border-danger: var(--color-red-500);
1177
+
1178
+ --color-loading-primary: var(--color-blue-600);
1179
+ --color-loading-primary-inverse: var(--color-white-100);
1180
+ --color-loading-secondary: var(--color-gray-100);
1181
+ --color-loading-skeleton: var(--color-gray-200);
1182
+
1183
+ --color-tooltip-background-enabled: var(--color-gray-900);
1184
+ --color-tooltip-background-inverse: var(--color-black-0);
1185
+ --color-tooltip-background-hover: var(--color-white-10);
1186
+ --color-tooltip-background-active: var(--color-white-20);
1187
+
1188
+ --color-tooltip-text-primary: var(--color-white-100);
1189
+ --color-tooltip-text-secondary: var(--color-white-85);
1190
+
1191
+ --color-static-icon-primary: var(--color-gray-900);
1192
+ --color-static-icon-secondary: var(--color-gray-600);
1193
+ --color-static-icon-tertiary: var(--color-gray-500);
1194
+ --color-static-icon-brand: var(--color-blue-600);
1195
+ --color-static-icon-info: var(--color-ocean-500);
1196
+ --color-static-icon-success: var(--color-green-600);
1197
+ --color-static-icon-warning: var(--color-amber-500);
1198
+ --color-static-icon-disabled: var(--color-gray-400);
1199
+ --color-static-icon-danger: var(--color-red-500);
1200
+ --color-static-icon-inverse: var(--color-white-100);
1201
+ --color-static-icon-inverse-disabled: var(--color-white-40);
1202
+
1203
+ --color-toast-background-primary: var(--color-gray-900);
1204
+ --color-toast-background-primary-danger: var(--color-red-500);
1205
+
1206
+ --color-toast-text-primary-inverse: var(--color-white-100);
1207
+
1208
+
1209
+ /* ========================================
1210
+ * Variables - Collections - Global Colors
1211
+ * ======================================== */
1212
+ --color-background-primary: var(--color-white-100);
1213
+ --color-background-inverse: var(--color-gray-900);
1214
+ --color-background-secondary: var(--color-gray-50);
1215
+ --color-background-tertiary: var(--color-gray-100);
1216
+ --color-background-overlay: var(--color-gray-900 / 50%);
1217
+ --color-background-disabled: var(--color-gray-100);
1218
+
1219
+ --color-text-primary: var(--color-gray-900);
1220
+ --color-text-secondary: var(--color-gray-600);
1221
+ --color-text-tertiary: var(--color-gray-500);
1222
+ --color-text-disabled: var(--color-gray-400);
1223
+ --color-text-inverse: var(--color-white-100);
1224
+ --color-text-inverse-85: var(--color-white-85);
1225
+
1226
+ --color-border-enabled: var(--color-gray-300);
1227
+ --color-border-subtle: var(--color-gray-200);
1228
+ --color-border-strong: var(--color-gray-400);
1229
+ --color-border-focus: var(--color-blue-500);
1230
+ --color-border-divider: var(--color-gray-50);
1231
+
1232
+ --color-accent-common: var(--color-gray-400);
1233
+ --color-accent-common-subtle: var(--color-gray-100);
1234
+ --color-accent-success: var(--color-green-600);
1235
+ --color-accent-success-bold: var(--color-green-900);
1236
+ --color-accent-success-subtle: var(--color-green-100);
1237
+ --color-accent-success-minimal: var(--color-green-50);
1238
+ --color-accent-warning: var(--color-amber-500);
1239
+ --color-accent-warning-bold: var(--color-amber-900);
1240
+ --color-accent-warning-subtle: var(--color-amber-100);
1241
+ --color-accent-warning-minimal: var(--color-amber-50);
1242
+ --color-accent-danger: var(--color-red-500);
1243
+ --color-accent-danger-bold: var(--color-red-900);
1244
+ --color-accent-danger-subtle: var(--color-red-100);
1245
+ --color-accent-danger-minimal: var(--color-red-50);
1246
+ --color-accent-info: var(--color-ocean-500);
1247
+ --color-accent-info-bold: var(--color-ocean-950);
1248
+ --color-accent-info-subtle: var(--color-ocean-100);
1249
+ --color-accent-info-minimal: var(--color-ocean-50);
1250
+ --color-accent-brand: var(--color-blue-600);
1251
+ --color-accent-brand-bold: var(--color-blue-950);
1252
+ --color-accent-brand-subtle: var(--color-blue-100);
1253
+ --color-accent-brand-minimal: var(--color-blue-50);
1254
+
1255
+
1256
+ /* ========================================
1257
+ * Variables - Collections - Class - Typography
1258
+ * ======================================== */
1259
+
1260
+ /* ================= DISPLAY ================= */
1261
+
1262
+ --text-display-small: 28px;
1263
+ --text-display-small--line-height: 1.3;
1264
+ --text-display-small--font-weight: 500;
1265
+ --text-display-small--letter-spacing: 0.005em;
1266
+
1267
+ --text-display-small-md: 32px;
1268
+ --text-display-small-md--line-height: 1.25;
1269
+ --text-display-small-md--font-weight: 500;
1270
+ --text-display-small-md--letter-spacing: 0.01em;
1271
+
1272
+
1273
+ --text-display-medium: 32px;
1274
+ --text-display-medium--line-height: 1.25;
1275
+ --text-display-medium--font-weight: 500;
1276
+ --text-display-medium--letter-spacing: 0.01em;
1277
+
1278
+ --text-display-medium-md: 40px;
1279
+ --text-display-medium-md--line-height: 1.2;
1280
+ --text-display-medium-md--font-weight: 500;
1281
+ --text-display-medium-md--letter-spacing: 0.015em;
1282
+
1283
+
1284
+ --text-display-large: 40px;
1285
+ --text-display-large--line-height: 1.2;
1286
+ --text-display-large--font-weight: 600;
1287
+ --text-display-large--letter-spacing: 0.02em;
1288
+
1289
+ --text-display-large-md: 48px;
1290
+ --text-display-large-md--line-height: 1.17;
1291
+ --text-display-large-md--font-weight: 600;
1292
+ --text-display-large-md--letter-spacing: 0.02em;
1293
+
1294
+
1295
+ /* ================= HEADING ================= */
1296
+
1297
+ --text-heading-1: 24px;
1298
+ --text-heading-1--line-height: 1.33;
1299
+ --text-heading-1--font-weight: 500;
1300
+ --text-heading-1--letter-spacing: 0em;
1301
+
1302
+ --text-heading-1-md: 28px;
1303
+ --text-heading-1-md--line-height: 1.3;
1304
+ --text-heading-1-md--font-weight: 500;
1305
+ --text-heading-1-md--letter-spacing: -0.005em;
1306
+
1307
+
1308
+ --text-heading-2: 20px;
1309
+ --text-heading-2--line-height: 1.56;
1310
+ --text-heading-2--font-weight: 500;
1311
+ --text-heading-2--letter-spacing: 0.01em;
1312
+
1313
+ --text-heading-2-md: 24px;
1314
+ --text-heading-2-md--line-height: 1.33;
1315
+ --text-heading-2-md--font-weight: 500;
1316
+ --text-heading-2-md--letter-spacing: 0em;
1317
+
1318
+
1319
+ --text-heading-3: 18px;
1320
+ --text-heading-3--line-height: 1.44;
1321
+ --text-heading-3--font-weight: 500;
1322
+ --text-heading-3--letter-spacing: 0.01em;
1323
+
1324
+ --text-heading-3-md: 20px;
1325
+ --text-heading-3-md--line-height: 1.4;
1326
+ --text-heading-3-md--font-weight: 500;
1327
+ --text-heading-3-md--letter-spacing: 0.01em;
1328
+
1329
+ /* ================= BODY ================= */
1330
+
1331
+ --text-body-small: 14px;
1332
+ --text-body-small--line-height: 1.57;
1333
+ --text-body-small--font-weight: 400;
1334
+ --text-body-small--letter-spacing: 0.02em;
1335
+
1336
+ --text-body-regular: 16px;
1337
+ --text-body-regular--line-height: 1.5;
1338
+ --text-body-regular--font-weight: 400;
1339
+ --text-body-regular--letter-spacing: 0.01em;
1340
+
1341
+ --text-body-large: 18px;
1342
+ --text-body-large--line-height: 1.56;
1343
+ --text-body-large--font-weight: 400;
1344
+ --text-body-large--letter-spacing: 0.01em;
1345
+
1346
+ /* ================= LABEL ================= */
1347
+
1348
+ --text-label-small: 12px;
1349
+ --text-label-small--line-height: 1.33;
1350
+ --text-label-small--font-weight: 500;
1351
+ --text-label-small--letter-spacing: 0.03em;
1352
+
1353
+ --text-label-medium: 14px;
1354
+ --text-label-medium--line-height: 1.43;
1355
+ --text-label-medium--font-weight: 500;
1356
+ --text-label-medium--letter-spacing: 0.02em;
1357
+
1358
+ --text-label-large: 16px;
1359
+ --text-label-large--line-height: 1.25;
1360
+ --text-label-large--font-weight: 500;
1361
+ --text-label-large--letter-spacing: 0.01em;
1362
+
1363
+ /* ================= CAPTION ================= */
1364
+
1365
+ --text-caption-caption: 12px;
1366
+ --text-caption-caption--line-height: 1.5;
1367
+ --text-caption-caption--font-weight: 400;
1368
+ --text-caption-caption--letter-spacing: 0.03em;
1369
+
1370
+ --text-caption-fine-print: 10px;
1371
+ --text-caption-fine-print--line-height: 1.6;
1372
+ --text-caption-fine-print--font-weight: 400;
1373
+ --text-caption-fine-print--letter-spacing: 0.04em;
1374
+
1375
+ /* ================= LINK ================= */
1376
+
1377
+ --text-link-extra-small: 12px;
1378
+ --text-link-extra-small--line-height: 1.5;
1379
+ --text-link-extra-small--font-weight: 500;
1380
+ --text-link-extra-small--letter-spacing: 0.03em;
1381
+
1382
+ --text-link-small: 14px;
1383
+ --text-link-small--line-height: 1.57;
1384
+ --text-link-small--font-weight: 500;
1385
+ --text-link-small--letter-spacing: 0.02em;
1386
+
1387
+ --text-link-medium: 16px;
1388
+ --text-link-medium--line-height: 1.5;
1389
+ --text-link-medium--font-weight: 500;
1390
+ --text-link-medium--letter-spacing: 0.01em;
1391
+
1392
+ --text-link-large: 18px;
1393
+ --text-link-large--line-height: 1.56;
1394
+ --text-link-large--font-weight: 500;
1395
+ --text-link-large--letter-spacing: 0.01em;
1396
+ }