@unifiedsoftware/styles 2.0.0-beta.9 → 2.0.1-beta.10

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 (27) hide show
  1. package/css/fci.css +309 -120
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +1496 -1094
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +405 -2
  7. package/scss/components/_accordion.scss +7 -1
  8. package/scss/components/_button.scss +3 -3
  9. package/scss/components/_descriptions.scss +1 -0
  10. package/scss/components/_icon.scss +28 -0
  11. package/scss/components/_index.scss +5 -5
  12. package/scss/components/_input.scss +20 -8
  13. package/scss/components/_list.scss +3 -3
  14. package/scss/components/_steps.scss +4 -1
  15. package/scss/components/_swipe.scss +2 -2
  16. package/scss/components/_tabs.scss +1 -1
  17. package/scss/components/_toolbar.scss +4 -4
  18. package/scss/themes/fci/_tokens.scss +9 -2
  19. package/scss/themes/fci/components/_accordion.scss +46 -34
  20. package/scss/themes/fci/components/_button.scss +65 -5
  21. package/scss/themes/fci/components/_card.scss +27 -59
  22. package/scss/themes/fci/components/_checkbox.scss +1 -1
  23. package/scss/themes/fci/components/_icon.scss +2 -1
  24. package/scss/themes/fci/components/_input.scss +69 -16
  25. package/scss/themes/fci/components/_list.scss +22 -10
  26. package/scss/themes/fci/components/_tabs.scss +32 -2
  27. package/scss/themes/fci/components/_toolbar.scss +25 -6
package/css/fci.css CHANGED
@@ -26,51 +26,55 @@
26
26
  }
27
27
  .us-theme-fci .us-accordion--xs {
28
28
  --us-accordion-splitted-gap: 0.25rem;
29
- --us-accordion-header-min-height: 36px;
30
- --us-accordion-header-padding-y: 0.685rem;
31
- --us-accordion-header-padding-x: 1rem;
29
+ --us-accordion-header-min-height: 2.75rem;
30
+ --us-accordion-header-padding-y: 0.375rem;
31
+ --us-accordion-header-padding-x: 0.75rem;
32
32
  --us-accordion-header-padding-level: 1.25rem;
33
- --us-accordion-header-font-size: 12px;
34
- --us-accordion-header-gap: 1rem;
33
+ --us-accordion-header-gap: 0.5rem;
35
34
  --us-accordion-header-title-font-size: 12px;
36
- --us-accordion-header-title-line-height: 18px;
37
- --us-accordion-header-subtitle-font-size: 11px;
38
35
  --us-accordion-header-title-line-height: 14px;
39
- --us-accordion-body-padding-y: 1rem;
40
- --us-accordion-body-padding-x: 1rem;
36
+ --us-accordion-header-subtitle-font-size: 10px;
37
+ --us-accordion-header-title-line-height: 14px;
38
+ --us-accordion-body-padding-y: 0.75rem;
39
+ --us-accordion-body-padding-x: 0.75rem;
41
40
  --us-accordion-body-font-size: 0.75rem;
42
41
  --us-accordion-body-line-height: 18px;
43
42
  }
43
+ .us-theme-fci .us-accordion--xs .us-accordion-header .us-icon:not(.us-button .us-icon) {
44
+ --us-icon-font-size-default: 16px;
45
+ }
44
46
  .us-theme-fci .us-accordion--sm {
45
47
  --us-accordion-splitted-gap: 0.5rem;
46
- --us-accordion-header-min-height: 48px;
47
- --us-accordion-header-padding-y: 0.625rem;
48
+ --us-accordion-header-min-height: 3rem;
49
+ --us-accordion-header-padding-y: 0.5rem;
48
50
  --us-accordion-header-padding-x: 1rem;
49
51
  --us-accordion-header-padding-level: 1.25rem;
50
- --us-accordion-header-gap: 1rem;
51
- --us-accordion-header-title-font-size: 0.875rem;
52
- --us-accordion-header-title-line-height: 20px;
53
- --us-accordion-header-subtitle-font-size: 0.75rem;
52
+ --us-accordion-header-gap: 0.75rem;
53
+ --us-accordion-header-title-font-size: 13px;
54
+ --us-accordion-header-title-line-height: 16px;
55
+ --us-accordion-header-subtitle-font-size: 11px;
54
56
  --us-accordion-header-subtitle-line-height: 16px;
55
- --us-accordion-body-padding-y: 1.25rem;
57
+ --us-accordion-body-padding-y: 1rem;
56
58
  --us-accordion-body-padding-x: 1rem;
57
59
  --us-accordion-body-font-size: 0.875rem;
58
60
  --us-accordion-body-line-height: 20px;
59
61
  }
62
+ .us-theme-fci .us-accordion--sm .us-accordion-header .us-icon:not(.us-button .us-icon) {
63
+ --us-icon-font-size-default: 20px;
64
+ }
60
65
  .us-theme-fci .us-accordion--md {
61
66
  --us-accordion-splitted-gap: 0.75rem;
62
- --us-accordion-header-min-height: 56px;
67
+ --us-accordion-header-min-height: 3.5rem;
63
68
  --us-accordion-header-padding-y: 0.625rem;
64
69
  --us-accordion-header-padding-x: 1rem;
65
70
  --us-accordion-header-padding-level: 1.25rem;
66
- --us-accordion-header-font-size: 0.75rem;
67
- --us-accordion-header-gap: 1rem;
71
+ --us-accordion-header-gap: 0.75rem;
68
72
  --us-accordion-header-content-gap: 0.5rem;
69
- --us-accordion-header-title-font-size: 0.875rem;
70
- --us-accordion-header-title-line-height: 24px;
71
- --us-accordion-header-subtitle-font-size: 0.8125rem;
72
- --us-accordion-header-subtitle-line-height: 18px;
73
- --us-accordion-body-padding-y: 1.5rem;
73
+ --us-accordion-header-title-font-size: 14px;
74
+ --us-accordion-header-title-line-height: 18px;
75
+ --us-accordion-header-subtitle-font-size: 12px;
76
+ --us-accordion-header-subtitle-line-height: 16px;
77
+ --us-accordion-body-padding-y: 1rem;
74
78
  --us-accordion-body-padding-x: 1rem;
75
79
  --us-accordion-body-font-size: 1rem;
76
80
  --us-accordion-body-line-height: 24px;
@@ -80,30 +84,31 @@
80
84
  }
81
85
  .us-theme-fci .us-accordion--lg {
82
86
  --us-accordion-splitted-gap: 1rem;
83
- --us-accordion-header-min-height: 64px;
84
- --us-accordion-header-padding-y: 0.625rem;
85
- --us-accordion-header-padding-x: 1rem;
87
+ --us-accordion-header-min-height: 4rem;
88
+ --us-accordion-header-padding-y: 0.75rem;
89
+ --us-accordion-header-padding-x: 1.25rem;
86
90
  --us-accordion-header-padding-level: 1.25rem;
87
- --us-accordion-header-font-size: 0.75rem;
88
91
  --us-accordion-header-gap: 1rem;
89
- --us-accordion-header-title-font-size: 1rem;
92
+ --us-accordion-header-title-font-size: 16px;
90
93
  --us-accordion-header-title-line-height: 24px;
91
94
  --us-accordion-header-subtitle-font-size: 0.8125rem;
92
95
  --us-accordion-header-subtitle-line-height: 18px;
93
- --us-accordion-body-padding-y: 1.5rem;
94
- --us-accordion-body-padding-x: 1rem;
96
+ --us-accordion-body-padding-y: 1.25rem;
97
+ --us-accordion-body-padding-x: 1.25rem;
95
98
  --us-accordion-body-font-size: 1rem;
96
99
  --us-accordion-body-line-height: 24px;
97
100
  }
101
+ .us-theme-fci .us-accordion--lg .us-accordion-header .us-icon:not(.us-button .us-icon) {
102
+ --us-icon-font-size-default: 28px;
103
+ }
98
104
  .us-theme-fci .us-accordion--xl {
99
105
  --us-accordion-splitted-gap: 1.25rem;
100
106
  --us-accordion-header-min-height: 3.5rem;
101
107
  --us-accordion-header-padding-y: 0.625rem;
102
108
  --us-accordion-header-padding-x: 1rem;
103
109
  --us-accordion-header-padding-level: 1.25rem;
104
- --us-accordion-header-font-size: 0.75rem;
105
110
  --us-accordion-header-gap: 1rem;
106
- --us-accordion-header-title-font-size: 1rem;
111
+ --us-accordion-header-title-font-size: 18px;
107
112
  --us-accordion-header-title-line-height: 24px;
108
113
  --us-accordion-header-subtitle-font-size: 0.8125rem;
109
114
  --us-accordion-header-subtitle-line-height: 18px;
@@ -112,14 +117,14 @@
112
117
  --us-accordion-body-font-size: 1rem;
113
118
  --us-accordion-body-line-height: 24px;
114
119
  }
120
+ .us-theme-fci .us-accordion--xl .us-accordion-header .us-icon:not(.us-button .us-icon) {
121
+ --us-icon-font-size-default: 36px;
122
+ }
115
123
  .us-theme-fci .us-accordion-item > .us-outline {
116
124
  --us-outline-border-width: 0px;
117
125
  --us-outline-z-index: 1;
118
126
  --us-outline-border-color: var(--us-accordion-border-color);
119
127
  }
120
- .us-theme-fci .us-accordion-item--selected {
121
- --us-accordion-header-title-font-weight: 700;
122
- }
123
128
  .us-theme-fci .us-accordion-body > .us-surface {
124
129
  --us-surface-color: var(--us-white-color);
125
130
  }
@@ -283,12 +288,17 @@
283
288
  .us-theme-fci .us-toolbar {
284
289
  --us-toolbar-background: var(--us-white-color);
285
290
  --us-toolbar-title-font-weight: 500;
286
- /* Outline */
291
+ }
292
+ .us-theme-fci .us-toolbar > .us-surface {
293
+ --us-surface-color: white;
294
+ --us-surface-opacity: 1;
295
+ }
296
+ .us-theme-fci .us-toolbar--bordered > .us-outline-b {
287
297
  --us-outline-border-width: 1px;
288
298
  --us-outline-border-color: #ddd;
289
299
  }
290
300
  .us-theme-fci .us-toolbar--sm {
291
- --us-toolbar-min-height: 48px;
301
+ --us-toolbar-height: 48px;
292
302
  --us-toolbar-padding-y: 0.25rem;
293
303
  --us-toolbar-padding-x: 1rem;
294
304
  --us-toolbar-title-font-size: 0.875rem;
@@ -297,7 +307,7 @@
297
307
  --us-toolbar-subtitle-line-height: 14px;
298
308
  }
299
309
  .us-theme-fci .us-toolbar--md {
300
- --us-toolbar-min-height: 56px;
310
+ --us-toolbar-height: 56px;
301
311
  --us-toolbar-padding-y: 0.5rem;
302
312
  --us-toolbar-padding-x: 1rem;
303
313
  --us-toolbar-gap: 1rem;
@@ -311,7 +321,7 @@
311
321
  --us-icon-font-size-default: 24px;
312
322
  }
313
323
  .us-theme-fci .us-toolbar--lg {
314
- --us-toolbar-min-height: 64px;
324
+ --us-toolbar-height: 64px;
315
325
  --us-toolbar-padding-y: 0.75rem;
316
326
  --us-toolbar-padding-x: 1rem;
317
327
  --us-toolbar-title-font-size: 1.125rem;
@@ -319,6 +329,33 @@
319
329
  --us-toolbar-subtitle-font-size: 16px;
320
330
  --us-toolbar-subtitle-line-height: 18px;
321
331
  }
332
+ .us-theme-fci .us-toolbar--filled {
333
+ --us-toolbar-color: var(--us-white-color);
334
+ }
335
+ .us-theme-fci .us-toolbar--filled.us-toolbar--primary > .us-surface {
336
+ --us-surface-color: var(--us-primary-color);
337
+ --us-surface-opacity: 1;
338
+ }
339
+ .us-theme-fci .us-toolbar--filled.us-toolbar--secondary > .us-surface {
340
+ --us-surface-color: var(--us-secondary-color);
341
+ --us-surface-opacity: 1;
342
+ }
343
+ .us-theme-fci .us-toolbar--filled.us-toolbar--success > .us-surface {
344
+ --us-surface-color: var(--us-success-color);
345
+ --us-surface-opacity: 1;
346
+ }
347
+ .us-theme-fci .us-toolbar--filled.us-toolbar--info > .us-surface {
348
+ --us-surface-color: var(--us-info-color);
349
+ --us-surface-opacity: 1;
350
+ }
351
+ .us-theme-fci .us-toolbar--filled.us-toolbar--warning > .us-surface {
352
+ --us-surface-color: var(--us-warning-color);
353
+ --us-surface-opacity: 1;
354
+ }
355
+ .us-theme-fci .us-toolbar--filled.us-toolbar--danger > .us-surface {
356
+ --us-surface-color: var(--us-danger-color);
357
+ --us-surface-opacity: 1;
358
+ }
322
359
 
323
360
  .us-theme-fci .us-icon {
324
361
  --us-icon-font-size-default: 1.5rem;
@@ -343,7 +380,7 @@
343
380
  --us-icon-color: var(--us-primary-color);
344
381
  }
345
382
  .us-theme-fci .us-icon--secondary {
346
- --us-icon-color: var(--us-secondary-color);
383
+ --us-icon-color: rgba(0, 0, 0, 0.54);
347
384
  }
348
385
  .us-theme-fci .us-icon--secondary {
349
386
  --us-icon-color: var(--us-secondary-action-color);
@@ -643,7 +680,7 @@ html {
643
680
  --us-button-divider-color: #fff;
644
681
  }
645
682
  .us-theme-fci .us-button--xs {
646
- --us-button-height: 22px;
683
+ --us-button-height: 24px;
647
684
  --us-button-padding-y: 0;
648
685
  --us-button-padding-x: 0.625rem;
649
686
  --us-button-font-size: 0.75rem;
@@ -654,7 +691,7 @@ html {
654
691
  --us-icon-font-size: 0.75rem;
655
692
  }
656
693
  .us-theme-fci .us-button--sm {
657
- --us-button-height: 26px;
694
+ --us-button-height: 28px;
658
695
  --us-button-padding-y: 0;
659
696
  --us-button-padding-x: 0.75rem;
660
697
  --us-button-font-size: 0.75rem;
@@ -665,7 +702,7 @@ html {
665
702
  --us-icon-font-size: 0.875rem;
666
703
  }
667
704
  .us-theme-fci .us-button--md {
668
- --us-button-height: 30px;
705
+ --us-button-height: 32px;
669
706
  --us-button-padding-y: 0;
670
707
  --us-button-padding-x: 0.875rem;
671
708
  --us-button-font-size: 0.875rem;
@@ -676,7 +713,7 @@ html {
676
713
  --us-icon-font-size: 1rem;
677
714
  }
678
715
  .us-theme-fci .us-button--lg {
679
- --us-button-height: 34px;
716
+ --us-button-height: 36px;
680
717
  --us-button-padding-y: 0;
681
718
  --us-button-padding-x: 1rem;
682
719
  --us-button-font-size: 0.875rem;
@@ -708,6 +745,12 @@ html {
708
745
  .us-theme-fci .us-button--2xl .us-icon {
709
746
  --us-icon-font-size: 1.5rem;
710
747
  }
748
+ .us-theme-fci .us-button > .us-glow {
749
+ --us-_focus-glow-spread: 1px;
750
+ --us-_focus-glow-blur: 6px;
751
+ --us-_focus-hover-glow-blur: 8px;
752
+ --us-_focus-active-glow-blur: 10px;
753
+ }
711
754
  .us-theme-fci .us-button--filled {
712
755
  --us-button-border-width: 1px;
713
756
  --us-button-border-color: transparent;
@@ -718,6 +761,7 @@ html {
718
761
  --us-overlay-opacity: 0;
719
762
  --us-_hover-overlay-opacity: 0.24;
720
763
  --us-_active-overlay-opacity: 0.32;
764
+ --us-_focus-overlay-opacity: 0.24;
721
765
  --us-_focus-hover-overlay-opacity: 0.24;
722
766
  --us-_focus-active-overlay-opacity: 0.32;
723
767
  }
@@ -733,6 +777,7 @@ html {
733
777
  --us-overlay-opacity: 0;
734
778
  --us-_hover-overlay-opacity: 0.08;
735
779
  --us-_active-overlay-opacity: 0.1;
780
+ --us-_focus-overlay-opacity: 0.08;
736
781
  --us-_focus-hover-overlay-opacity: 0.08;
737
782
  --us-_focus-active-overlay-opacity: 0.1;
738
783
  }
@@ -746,18 +791,21 @@ html {
746
791
  --us-overlay-opacity: 0.16;
747
792
  --us-_hover-overlay-opacity: 0.24;
748
793
  --us-_active-overlay-opacity: 0.32;
794
+ --us-_focus-overlay-opacity: 0.24;
749
795
  --us-_focus-hover-overlay-opacity: 0.24;
750
796
  --us-_focus-active-overlay-opacity: 0.32;
751
797
  }
752
798
  .us-theme-fci .us-button--flat > .us-outline {
753
799
  --us-outline-border-width: 1px;
754
- --us-outline-border-color: transparent;
800
+ --us-outline-border-color: currentColor;
801
+ --us-outline-opacity: 0;
755
802
  }
756
803
  .us-theme-fci .us-button--text > .us-overlay {
757
804
  --us-overlay-color: inherit;
758
805
  --us-overlay-opacity: 0;
759
806
  --us-_hover-overlay-opacity: 0.16;
760
807
  --us-_active-overlay-opacity: 0.24;
808
+ --us-_focus-overlay-opacity: 0.12;
761
809
  --us-_focus-hover-overlay-opacity: 0.12;
762
810
  --us-_focus-active-overlay-opacity: 0.24;
763
811
  }
@@ -770,6 +818,7 @@ html {
770
818
  --us-overlay-opacity: 0;
771
819
  --us-_hover-overlay-opacity: 0.16;
772
820
  --us-_active-overlay-opacity: 0.24;
821
+ --us-_focus-overlay-opacity: 0.12;
773
822
  --us-_focus-hover-overlay-opacity: 0.12;
774
823
  --us-_focus-active-overlay-opacity: 0.24;
775
824
  }
@@ -795,6 +844,11 @@ html {
795
844
  .us-theme-fci .us-button--2xl.us-button--icon-only .us-icon {
796
845
  --us-icon-font-size: 1.875rem;
797
846
  }
847
+ .us-theme-fci .us-button--primary > .us-glow {
848
+ --us-_focus-glow-color: var(--us-primary-rgb);
849
+ --us-_focus-glow-alpha: 1;
850
+ --us-_focus-glow-shadow-alpha: 0.75;
851
+ }
798
852
  .us-theme-fci .us-button--filled.us-button--primary {
799
853
  --us-button-background: var(--us-primary-color);
800
854
  }
@@ -810,6 +864,11 @@ html {
810
864
  .us-theme-fci .us-button--bordered.us-button--primary {
811
865
  --us-button-color: var(--us-primary-color);
812
866
  }
867
+ .us-theme-fci .us-button--secondary > .us-glow {
868
+ --us-_focus-glow-color: var(--us-secondary-rgb);
869
+ --us-_focus-glow-alpha: 1;
870
+ --us-_focus-glow-shadow-alpha: 0.75;
871
+ }
813
872
  .us-theme-fci .us-button--filled.us-button--secondary {
814
873
  --us-button-background: var(--us-secondary-color);
815
874
  }
@@ -846,6 +905,11 @@ html {
846
905
  .us-theme-fci .us-button--bordered.us-button--secondary > .us-outline {
847
906
  --us-outline-opacity: 0.16;
848
907
  }
908
+ .us-theme-fci .us-button--success > .us-glow {
909
+ --us-_focus-glow-color: var(--us-success-rgb);
910
+ --us-_focus-glow-alpha: 1;
911
+ --us-_focus-glow-shadow-alpha: 0.75;
912
+ }
849
913
  .us-theme-fci .us-button--filled.us-button--success {
850
914
  --us-button-background: var(--us-success-color);
851
915
  }
@@ -882,6 +946,11 @@ html {
882
946
  .us-theme-fci .us-button--text.us-button--success > .us-overlay {
883
947
  --us-overlay-color: var(--us-success-color);
884
948
  }
949
+ .us-theme-fci .us-button--info > .us-glow {
950
+ --us-_focus-glow-color: var(--us-info-rgb);
951
+ --us-_focus-glow-alpha: 1;
952
+ --us-_focus-glow-shadow-alpha: 0.75;
953
+ }
885
954
  .us-theme-fci .us-button--filled.us-button--info {
886
955
  --us-button-background: var(--us-info-color);
887
956
  }
@@ -909,6 +978,11 @@ html {
909
978
  .us-theme-fci .us-button--text.us-button--info > .us-overlay {
910
979
  --us-overlay-color: var(--us-info-color);
911
980
  }
981
+ .us-theme-fci .us-button--warning > .us-glow {
982
+ --us-_focus-glow-color: var(--us-warning-rgb);
983
+ --us-_focus-glow-alpha: 1;
984
+ --us-_focus-glow-shadow-alpha: 0.75;
985
+ }
912
986
  .us-theme-fci .us-button--filled.us-button--warning {
913
987
  --us-button-background: var(--us-warning-color);
914
988
  }
@@ -945,6 +1019,11 @@ html {
945
1019
  .us-theme-fci .us-button--text.us-button--warning > .us-overlay {
946
1020
  --us-overlay-color: var(--us-warning-color);
947
1021
  }
1022
+ .us-theme-fci .us-button--danger > .us-glow {
1023
+ --us-_focus-glow-color: var(--us-danger-rgb);
1024
+ --us-_focus-glow-alpha: 1;
1025
+ --us-_focus-glow-shadow-alpha: 0.75;
1026
+ }
948
1027
  .us-theme-fci .us-button--filled.us-button--danger {
949
1028
  --us-button-background: var(--us-danger-color);
950
1029
  }
@@ -960,6 +1039,21 @@ html {
960
1039
  .us-theme-fci .us-button--bordered.us-button--danger {
961
1040
  --us-button-color: var(--us-danger-color);
962
1041
  }
1042
+ .us-theme-fci .us-button--secondary > .us-glow {
1043
+ --us-_focus-glow-color: var(--us-secondary-rgb);
1044
+ --us-_focus-glow-alpha: 0.5;
1045
+ --us-_focus-glow-shadow-alpha: 0.25;
1046
+ }
1047
+ .us-theme-fci .us-button--filled.us-button--secondary > .us-glow {
1048
+ --us-_focus-glow-color: var(--us-secondary-rgb);
1049
+ --us-_focus-glow-alpha: 0.5;
1050
+ --us-_focus-glow-shadow-alpha: 0.25;
1051
+ }
1052
+ .us-theme-fci .us-button--outlined > .us-glow {
1053
+ --us-_focus-glow-color: var(--us-secondary-rgb);
1054
+ --us-_focus-glow-alpha: 0.5;
1055
+ --us-_focus-glow-shadow-alpha: 0.25;
1056
+ }
963
1057
 
964
1058
  .us-theme-fci .us-drawer {
965
1059
  --us-drawer-background: #fff;
@@ -1062,45 +1156,69 @@ html {
1062
1156
 
1063
1157
  .us-theme-fci .us-input {
1064
1158
  --us-input-font-family: var(--us-font-sans);
1065
- --us-input-border-radius: 6px;
1066
1159
  }
1067
1160
  .us-theme-fci .us-input--xs {
1068
- --us-input-height: 22px;
1161
+ --us-input-height: 24px;
1069
1162
  --us-input-padding-y: 0.282rem;
1070
1163
  --us-input-padding-x: 0.625rem;
1071
1164
  --us-input-font-size: 0.75rem;
1165
+ --us-input-border-radius: 6px;
1166
+ --us-input-line-height: 1;
1167
+ }
1168
+ .us-theme-fci .us-input--xs .us-icon:not(.us-button .us-icon) {
1169
+ --us-icon-font-size-default: 0.75rem;
1072
1170
  }
1073
1171
  .us-theme-fci .us-input--sm {
1074
- --us-input-height: 24px;
1172
+ --us-input-height: 28px;
1075
1173
  --us-input-padding-y: 0.407rem;
1076
1174
  --us-input-padding-x: 0.75rem;
1077
1175
  --us-input-font-size: 0.75rem;
1176
+ --us-input-border-radius: 6px;
1177
+ --us-input-line-height: 1;
1178
+ }
1179
+ .us-theme-fci .us-input--sm .us-icon:not(.us-button .us-icon) {
1180
+ --us-icon-font-size-default: 0.875rem;
1078
1181
  }
1079
1182
  .us-theme-fci .us-input--md {
1080
- --us-input-height: 30px;
1183
+ --us-input-height: 32px;
1081
1184
  --us-input-padding-y: 0.532rem;
1082
1185
  --us-input-padding-x: 0.875rem;
1083
- --us-input-font-size: 0.75rem;
1186
+ --us-input-font-size: 0.8125rem;
1187
+ --us-input-border-radius: 6px;
1188
+ --us-input-line-height: 1;
1084
1189
  --us-input-content-gap: 0.25rem;
1085
1190
  }
1086
1191
  .us-theme-fci .us-input--md .us-icon:not(.us-button .us-icon) {
1087
- --us-icon-font-size-default: 16px;
1192
+ --us-icon-font-size-default: 1rem;
1088
1193
  }
1089
1194
  .us-theme-fci .us-input--lg {
1090
- --us-input-height: 34px;
1195
+ --us-input-height: 36px;
1091
1196
  --us-input-padding-y: 0.625rem;
1092
1197
  --us-input-padding-x: 1rem;
1093
- --us-input-font-size: 0.85rem;
1198
+ --us-input-font-size: 0.875rem;
1199
+ --us-input-border-radius: 8px;
1200
+ --us-input-line-height: 1;
1201
+ }
1202
+ .us-theme-fci .us-input--lg .us-icon:not(.us-button .us-icon) {
1203
+ --us-icon-font-size-default: 1.125rem;
1094
1204
  }
1095
1205
  .us-theme-fci .us-input--xl {
1096
- --us-input-height: 44px;
1206
+ --us-input-height: 40px;
1097
1207
  --us-input-padding-y: 0.75rem;
1098
- --us-input-padding-x: 1.125rem;
1099
- --us-input-font-size: 0.85rem;
1208
+ --us-input-padding-x: 1.25rem;
1209
+ --us-input-font-size: 1rem;
1210
+ --us-input-border-radius: 8px;
1211
+ --us-input-line-height: 1;
1212
+ }
1213
+ .us-theme-fci .us-input--xl .us-icon:not(.us-button .us-icon) {
1214
+ --us-icon-font-size-default: 1.25rem;
1100
1215
  }
1101
1216
  .us-theme-fci .us-input--filled > .us-outline {
1102
1217
  --us-outline-border-width: 1px;
1103
- --us-outline-focus-border-width: 1px;
1218
+ --us-outline-focus-border-width: 2px;
1219
+ }
1220
+ .us-theme-fci .us-input--filled > .us-glow {
1221
+ --us-glow-opacity: 0;
1104
1222
  }
1105
1223
  .us-theme-fci .us-input--outlined > .us-overlay {
1106
1224
  --us-overlay-color: inherit;
@@ -1108,19 +1226,30 @@ html {
1108
1226
  }
1109
1227
  .us-theme-fci .us-input--outlined > .us-outline {
1110
1228
  --us-outline-border-width: 1px;
1111
- --us-outline-focus-border-width: 1px;
1229
+ --us-outline-focus-border-width: 2px;
1230
+ }
1231
+ .us-theme-fci .us-input--outlined > .us-glow {
1232
+ --us-glow-opacity: 0;
1112
1233
  }
1113
1234
  .us-theme-fci .us-input--flat > .us-outline {
1114
1235
  --us-outline-border-width: 1px;
1115
- --us-outline-focus-border-width: 1px;
1236
+ --us-outline-focus-border-width: 2px;
1237
+ }
1238
+ .us-theme-fci .us-input--flat > .us-glow {
1239
+ --us-glow-opacity: 0;
1116
1240
  }
1117
1241
  .us-theme-fci .us-input--text {
1118
1242
  --us-input-padding-x: 0;
1119
1243
  }
1120
1244
  .us-theme-fci .us-input--text > .us-outline {
1121
1245
  --us-outline-border-width: 1px;
1246
+ --us-outline-focus-border-width: 2px;
1247
+ }
1248
+ .us-theme-fci .us-input--text > .us-glow {
1249
+ --us-glow-opacity: 0;
1122
1250
  }
1123
1251
  .us-theme-fci .us-input--filled {
1252
+ --us-input-color: rgba(0, 0, 0, 0.87);
1124
1253
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1125
1254
  }
1126
1255
  .us-theme-fci .us-input--filled > .us-overlay {
@@ -1161,6 +1290,7 @@ html {
1161
1290
  --us-outline-focus-opacity: 1;
1162
1291
  }
1163
1292
  .us-theme-fci .us-input--outlined {
1293
+ --us-input-color: rgba(0, 0, 0, 0.87);
1164
1294
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1165
1295
  }
1166
1296
  .us-theme-fci .us-input--outlined > .us-overlay {
@@ -1169,28 +1299,46 @@ html {
1169
1299
  }
1170
1300
  .us-theme-fci .us-input--outlined > .us-outline {
1171
1301
  --us-outline-border-color: currentColor;
1172
- --us-outline-opacity: 0.12;
1173
- --us-outline-hover-opacity: 0.24;
1302
+ --us-outline-opacity: 0.4;
1303
+ --us-outline-hover-opacity: 0.6;
1174
1304
  --us-outline-focus-opacity: 1;
1175
1305
  }
1176
1306
  .us-theme-fci .us-input--outlined.us-input--primary > .us-outline {
1177
1307
  --us-outline-focus-border-color: var(--us-primary-color);
1178
1308
  }
1309
+ .us-theme-fci .us-input--outlined.us-input--primary > .us-glow {
1310
+ --us-glow-focus-border-color: var(--us-primary-color);
1311
+ }
1179
1312
  .us-theme-fci .us-input--outlined.us-input--secondary > .us-outline {
1180
1313
  --us-outline-focus-border-color: var(--us-secondary-color);
1181
1314
  }
1315
+ .us-theme-fci .us-input--outlined.us-input--secondary > .us-glow {
1316
+ --us-glow-focus-border-color: var(--us-secondary-color);
1317
+ }
1182
1318
  .us-theme-fci .us-input--outlined.us-input--success > .us-outline {
1183
1319
  --us-outline-focus-border-color: var(--us-success-color);
1184
1320
  }
1321
+ .us-theme-fci .us-input--outlined.us-input--success > .us-glow {
1322
+ --us-glow-focus-border-color: var(--us-success-color);
1323
+ }
1185
1324
  .us-theme-fci .us-input--outlined.us-input--info > .us-outline {
1186
1325
  --us-outline-focus-border-color: var(--us-info-color);
1187
1326
  }
1327
+ .us-theme-fci .us-input--outlined.us-input--info > .us-glow {
1328
+ --us-glow-focus-border-color: var(--us-info-color);
1329
+ }
1188
1330
  .us-theme-fci .us-input--outlined.us-input--warning > .us-outline {
1189
1331
  --us-outline-focus-border-color: var(--us-warning-color);
1190
1332
  }
1333
+ .us-theme-fci .us-input--outlined.us-input--warning > .us-glow {
1334
+ --us-glow-focus-border-color: var(--us-warning-color);
1335
+ }
1191
1336
  .us-theme-fci .us-input--outlined.us-input--danger > .us-outline {
1192
1337
  --us-outline-focus-border-color: var(--us-danger-color);
1193
1338
  }
1339
+ .us-theme-fci .us-input--outlined.us-input--danger > .us-glow {
1340
+ --us-glow-focus-border-color: var(--us-danger-color);
1341
+ }
1194
1342
  .us-theme-fci .us-input--outlined.us-input--light {
1195
1343
  --us-input-color: #fff;
1196
1344
  --us-input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -1207,6 +1355,7 @@ html {
1207
1355
  --us-outline-focus-opacity: 1;
1208
1356
  }
1209
1357
  .us-theme-fci .us-input--flat {
1358
+ --us-input-color: rgba(0, 0, 0, 0.87);
1210
1359
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1211
1360
  }
1212
1361
  .us-theme-fci .us-input--flat > .us-overlay {
@@ -1221,21 +1370,39 @@ html {
1221
1370
  .us-theme-fci .us-input--flat.us-input--primary > .us-outline {
1222
1371
  --us-outline-focus-border-color: var(--us-primary-color);
1223
1372
  }
1373
+ .us-theme-fci .us-input--flat.us-input--primary > .us-glow {
1374
+ --us-glow-focus-border-color: var(--us-primary-color);
1375
+ }
1224
1376
  .us-theme-fci .us-input--flat.us-input--secondary > .us-outline {
1225
1377
  --us-outline-focus-border-color: var(--us-secondary-color);
1226
1378
  }
1379
+ .us-theme-fci .us-input--flat.us-input--secondary > .us-glow {
1380
+ --us-glow-focus-border-color: var(--us-secondary-color);
1381
+ }
1227
1382
  .us-theme-fci .us-input--flat.us-input--success > .us-outline {
1228
1383
  --us-outline-focus-border-color: var(--us-success-color);
1229
1384
  }
1385
+ .us-theme-fci .us-input--flat.us-input--success > .us-glow {
1386
+ --us-glow-focus-border-color: var(--us-success-color);
1387
+ }
1230
1388
  .us-theme-fci .us-input--flat.us-input--info > .us-outline {
1231
1389
  --us-outline-focus-border-color: var(--us-info-color);
1232
1390
  }
1391
+ .us-theme-fci .us-input--flat.us-input--info > .us-glow {
1392
+ --us-glow-focus-border-color: var(--us-info-color);
1393
+ }
1233
1394
  .us-theme-fci .us-input--flat.us-input--warning > .us-outline {
1234
1395
  --us-outline-focus-border-color: var(--us-warning-color);
1235
1396
  }
1397
+ .us-theme-fci .us-input--flat.us-input--warning > .us-glow {
1398
+ --us-glow-focus-border-color: var(--us-warning-color);
1399
+ }
1236
1400
  .us-theme-fci .us-input--flat.us-input--danger > .us-outline {
1237
1401
  --us-outline-focus-border-color: var(--us-danger-color);
1238
1402
  }
1403
+ .us-theme-fci .us-input--flat.us-input--danger > .us-glow {
1404
+ --us-glow-focus-border-color: var(--us-danger-color);
1405
+ }
1239
1406
  .us-theme-fci .us-input--flat.us-input--light {
1240
1407
  --us-input-color: #fff;
1241
1408
  --us-input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -1475,6 +1642,12 @@ html {
1475
1642
  --us-list-color: #343a40;
1476
1643
  --us-list-background: #fff;
1477
1644
  }
1645
+ .us-theme-fci .us-list--divider .us-list-item {
1646
+ border-bottom: 1px solid #e0e0e0;
1647
+ }
1648
+ .us-theme-fci .us-list--divider .us-list-item:last-child {
1649
+ border-bottom: 0px;
1650
+ }
1478
1651
  .us-theme-fci .us-list-item {
1479
1652
  --us-list-item-border-radius: 0px;
1480
1653
  --us-list-item-title-font-weight: 500;
@@ -1519,17 +1692,26 @@ html {
1519
1692
  --us-list-item-subtitle-font-size: 11px;
1520
1693
  --us-list-item-title-line-height: 14px;
1521
1694
  }
1695
+ .us-theme-fci .us-list--sm .us-list-item .us-icon {
1696
+ --us-icon-font-size: 18px;
1697
+ }
1522
1698
  .us-theme-fci .us-list--md .us-list-item {
1523
1699
  --us-list-item-min-height: 2.25rem;
1524
1700
  --us-list-item-padding-y: 0.375rem;
1525
1701
  --us-list-item-padding-x: 0.875rem;
1526
1702
  --us-list-item-padding-level: 1.25rem;
1527
- --us-list-item-gap: 1rem;
1703
+ --us-list-item-gap: 0.5rem;
1528
1704
  --us-list-item-title-font-size: 0.8125rem;
1529
1705
  --us-list-item-title-line-height: 20px;
1530
1706
  --us-list-item-subtitle-font-size: 0.75rem;
1531
1707
  --us-list-item-subtitle-line-height: 16px;
1532
1708
  }
1709
+ .us-theme-fci .us-list--md .us-list-item .us-icon {
1710
+ --us-icon-font-size: 20px;
1711
+ }
1712
+ .us-theme-fci .us-list--md .us-list-item .us-checkbox .us-icon {
1713
+ --us-icon-font-size: 0.625rem;
1714
+ }
1533
1715
  .us-theme-fci .us-list--lg .us-list-item {
1534
1716
  --us-list-item-min-height: 2.75rem;
1535
1717
  --us-list-item-padding-y: 0.625rem;
@@ -1542,6 +1724,9 @@ html {
1542
1724
  --us-list-item-subtitle-font-size: 0.8125rem;
1543
1725
  --us-list-item-subtitle-line-height: 18px;
1544
1726
  }
1727
+ .us-theme-fci .us-list--lg .us-list-item .us-icon {
1728
+ --us-icon-font-size: 22px;
1729
+ }
1545
1730
 
1546
1731
  .us-theme-fci .us-menu {
1547
1732
  --us-menu-padding-y: 0;
@@ -1596,6 +1781,31 @@ html {
1596
1781
  --us-_active-overlay-opacity: 0;
1597
1782
  }
1598
1783
 
1784
+ .us-theme-fci .us-tabs--xs {
1785
+ --us-tab-height: 32px;
1786
+ --us-tab-padding-x: 12px;
1787
+ --us-tab-font-size: 12px;
1788
+ }
1789
+ .us-theme-fci .us-tabs--sm {
1790
+ --us-tab-height: 36px;
1791
+ --us-tab-font-size: 13px;
1792
+ --us-tab-padding-x: 13px;
1793
+ }
1794
+ .us-theme-fci .us-tabs--md {
1795
+ --us-tab-height: 40px;
1796
+ --us-tab-padding-x: 16px;
1797
+ --us-tab-font-size: 14px;
1798
+ }
1799
+ .us-theme-fci .us-tabs--lg {
1800
+ --us-tab-height: 44px;
1801
+ --us-tab-padding-x: 18px;
1802
+ --us-tab-font-size: 16px;
1803
+ }
1804
+ .us-theme-fci .us-tabs--xl {
1805
+ --us-tab-height: 48px;
1806
+ --us-tab-padding-x: 22px;
1807
+ --us-tab-font-size: 18px;
1808
+ }
1599
1809
  .us-theme-fci .us-tabs--underlined {
1600
1810
  --us-tab-indicator-color: var(--us-primary-action-color);
1601
1811
  --us-tab-indicator-height: 3px;
@@ -1692,8 +1902,6 @@ html {
1692
1902
  .us-theme-fci .us-tab {
1693
1903
  --us-tab-color: var(--us-secondary-action-color);
1694
1904
  --us-tab-padding-y: 0px;
1695
- --us-tab-padding-x: 16px;
1696
- --us-tab-font-size: 0.8125rem;
1697
1905
  --us-tab-font-weight: 500;
1698
1906
  --us-tab-closable-color: var(--us-secondary-action-color);
1699
1907
  }
@@ -1736,22 +1944,20 @@ html {
1736
1944
  .us-theme-fci .us-card--xs {
1737
1945
  --us-card-header-padding-y: 0.375rem;
1738
1946
  --us-card-header-padding-x: 0.75rem;
1739
- --us-card-header-min-height: 2.5rem;
1947
+ --us-card-header-min-height: 2.75rem;
1740
1948
  --us-card-header-gap: 0.5rem;
1741
1949
  --us-card-header-content-gap: 0.25rem;
1742
- --us-card-header-title-font-size: 11px;
1743
- --us-card-header-title-font-weight: 500;
1950
+ --us-card-header-title-font-size: 12px;
1744
1951
  --us-card-header-title-line-height: 14px;
1745
1952
  --us-card-header-subtitle-font-size: 10px;
1746
- --us-card-header-subtitle-font-weight: 500;
1747
1953
  --us-card-header-subtitle-line-height: 14px;
1748
- --us-card-body-padding-y: 0.375rem;
1954
+ --us-card-body-padding-y: 0.75rem;
1749
1955
  --us-card-body-padding-x: 0.75rem;
1750
1956
  --us-card-body-font-size: 0.75rem;
1751
1957
  --us-card-body-line-height: 18px;
1752
1958
  --us-card-footer-padding-y: 0.375rem;
1753
1959
  --us-card-footer-padding-x: 0.75rem;
1754
- --us-card-footer-min-height: 2.5rem;
1960
+ --us-card-footer-min-height: 2.75rem;
1755
1961
  --us-card-footer-gap: 0.5rem;
1756
1962
  }
1757
1963
  .us-theme-fci .us-card--xs .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1760,24 +1966,22 @@ html {
1760
1966
  .us-theme-fci .us-card--sm {
1761
1967
  --us-card-title-padding-y: 0.875rem 0.375rem;
1762
1968
  --us-card-title-font-size: 1.25rem;
1763
- --us-card-header-padding-y: 0.375rem;
1969
+ --us-card-header-padding-y: 0.5rem;
1764
1970
  --us-card-header-padding-x: 1rem;
1765
- --us-card-header-min-height: 2.75rem;
1971
+ --us-card-header-min-height: 3rem;
1766
1972
  --us-card-header-gap: 0.75rem;
1767
1973
  --us-card-header-content-gap: 0.5rem;
1768
- --us-card-header-title-font-size: 12px;
1769
- --us-card-header-title-font-weight: 500;
1974
+ --us-card-header-title-font-size: 13px;
1770
1975
  --us-card-header-title-line-height: 16px;
1771
1976
  --us-card-header-subtitle-font-size: 11px;
1772
- --us-card-header-subtitle-font-weight: 500;
1773
1977
  --us-card-header-subtitle-line-height: 16px;
1774
- --us-card-body-padding-y: 0.375rem;
1978
+ --us-card-body-padding-y: 1rem;
1775
1979
  --us-card-body-padding-x: 1rem;
1776
1980
  --us-card-body-font-size: 0.875rem;
1777
1981
  --us-card-body-line-height: 20px;
1778
- --us-card-footer-padding-y: 0.375rem;
1982
+ --us-card-footer-padding-y: 0.5rem;
1779
1983
  --us-card-footer-padding-x: 1rem;
1780
- --us-card-footer-min-height: 2.75rem;
1984
+ --us-card-footer-min-height: 3rem;
1781
1985
  --us-card-footer-gap: 0.75rem;
1782
1986
  }
1783
1987
  .us-theme-fci .us-card--sm .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1786,22 +1990,22 @@ html {
1786
1990
  .us-theme-fci .us-card--md {
1787
1991
  --us-card-title-padding-y: 1rem 0.5rem;
1788
1992
  --us-card-title-font-size: 1.25rem;
1789
- --us-card-header-min-height: 3rem;
1790
- --us-card-header-padding-y: 0.5rem;
1993
+ --us-card-header-padding-y: 0.625rem;
1791
1994
  --us-card-header-padding-x: 1rem;
1995
+ --us-card-header-min-height: 3.5rem;
1792
1996
  --us-card-header-gap: 0.75rem;
1793
1997
  --us-card-header-content-gap: 0.5rem;
1794
- --us-card-header-title-font-size: 13px;
1795
- --us-card-header-title-line-height: 16px;
1998
+ --us-card-header-title-font-size: 14px;
1999
+ --us-card-header-title-line-height: 18px;
1796
2000
  --us-card-header-subtitle-font-size: 12px;
1797
2001
  --us-card-header-subtitle-line-height: 16px;
1798
- --us-card-body-padding-y: 0.5rem;
2002
+ --us-card-body-padding-y: 1rem;
1799
2003
  --us-card-body-padding-x: 1rem;
1800
2004
  --us-card-body-font-size: 0.875rem;
1801
2005
  --us-card-body-line-height: 24px;
1802
- --us-card-footer-padding-y: 0.5rem;
2006
+ --us-card-footer-padding-y: 0.625rem;
1803
2007
  --us-card-footer-padding-x: 1rem;
1804
- --us-card-footer-min-height: 3rem;
2008
+ --us-card-footer-min-height: 3.5rem;
1805
2009
  --us-card-footer-gap: 1rem;
1806
2010
  }
1807
2011
  .us-theme-fci .us-card--md .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1810,22 +2014,22 @@ html {
1810
2014
  .us-theme-fci .us-card--lg {
1811
2015
  --us-card-title-padding-y: 1.25rem 0.75rem;
1812
2016
  --us-card-title-font-size: 1.5rem;
1813
- --us-card-header-padding-y: 0.625rem;
2017
+ --us-card-header-padding-y: 0.75rem;
1814
2018
  --us-card-header-padding-x: 1.25rem;
1815
- --us-card-header-min-height: 3.5rem;
2019
+ --us-card-header-min-height: 4rem;
1816
2020
  --us-card-header-gap: 1rem;
1817
2021
  --us-card-header-content-gap: 0.75rem;
1818
- --us-card-header-title-font-size: 14px;
2022
+ --us-card-header-title-font-size: 16px;
1819
2023
  --us-card-header-title-line-height: 18px;
1820
2024
  --us-card-header-subtitle-font-size: 13px;
1821
2025
  --us-card-header-subtitle-line-height: 18px;
1822
- --us-card-body-padding-y: 0.875rem;
2026
+ --us-card-body-padding-y: 1.25rem;
1823
2027
  --us-card-body-padding-x: 1.25rem;
1824
2028
  --us-card-body-font-size: 1rem;
1825
2029
  --us-card-body-line-height: 24px;
1826
- --us-card-footer-padding-y: 0.625rem;
2030
+ --us-card-footer-padding-y: 0.75rem;
1827
2031
  --us-card-footer-padding-x: 1.25rem;
1828
- --us-card-footer-min-height: 3.5rem;
2032
+ --us-card-footer-min-height: 4rem;
1829
2033
  --us-card-footer-gap: 1rem;
1830
2034
  }
1831
2035
  .us-theme-fci .us-card--lg .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1834,47 +2038,25 @@ html {
1834
2038
  .us-theme-fci .us-card--xl {
1835
2039
  --us-card-header-padding-y: 0.75rem;
1836
2040
  --us-card-header-padding-x: 1.5rem;
1837
- --us-card-header-min-height: 4rem;
2041
+ --us-card-header-min-height: 4.5rem;
1838
2042
  --us-card-header-gap: 1rem;
1839
2043
  --us-card-header-content-gap: 0.875rem;
1840
- --us-card-header-title-font-size: 16px;
2044
+ --us-card-header-title-font-size: 18px;
1841
2045
  --us-card-header-title-line-height: 20px;
1842
2046
  --us-card-header-subtitle-font-size: 15px;
1843
2047
  --us-card-header-subtitle-line-height: 20px;
1844
- --us-card-body-padding-y: 0.75rem;
2048
+ --us-card-body-padding-y: 1.5rem;
1845
2049
  --us-card-body-padding-x: 1.5rem;
1846
2050
  --us-card-body-font-size: 1.125rem;
1847
2051
  --us-card-body-line-height: 28px;
1848
2052
  --us-card-footer-padding-y: 0.75rem;
1849
2053
  --us-card-footer-padding-x: 1.5rem;
1850
- --us-card-footer-min-height: 4rem;
2054
+ --us-card-footer-min-height: 4.5rem;
1851
2055
  --us-card-footer-gap: 1rem;
1852
2056
  }
1853
2057
  .us-theme-fci .us-card--xl .us-card-header .us-icon:not(.us-button .us-icon) {
1854
2058
  --us-icon-font-size-default: 36px;
1855
2059
  }
1856
- .us-theme-fci .us-card--2xl {
1857
- --us-card-header-padding-y: 0.75rem;
1858
- --us-card-header-padding-x: 1.5rem;
1859
- --us-card-header-min-height: 4.5rem;
1860
- --us-card-header-gap: 1rem;
1861
- --us-card-header-content-gap: 1rem;
1862
- --us-card-header-title-font-size: 18px;
1863
- --us-card-header-title-line-height: 24px;
1864
- --us-card-header-subtitle-font-size: 16px;
1865
- --us-card-header-subtitle-line-height: 24px;
1866
- --us-card-body-padding-y: 0.75rem;
1867
- --us-card-body-padding-x: 1.5rem;
1868
- --us-card-body-font-size: 1.25rem;
1869
- --us-card-body-line-height: 36px;
1870
- --us-card-footer-padding-y: 0.75rem;
1871
- --us-card-footer-padding-x: 1.5rem;
1872
- --us-card-footer-min-height: 4.5rem;
1873
- --us-card-footer-gap: 1rem;
1874
- }
1875
- .us-theme-fci .us-card--2xl .us-card-header .us-icon:not(.us-button .us-icon) {
1876
- --us-icon-font-size-default: 40px;
1877
- }
1878
2060
 
1879
2061
  .us-theme-fci .us-description > .us-surface {
1880
2062
  --us-surface-opacity: 0;
@@ -2193,7 +2375,7 @@ html {
2193
2375
  .us-theme-fci .us-checkbox {
2194
2376
  --us-checkbox-control-border-width: 1px;
2195
2377
  --us-checkbox-control-border-style: solid;
2196
- --us-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
2378
+ --us-checkbox-control-border-color: rgba(0, 0, 0, 0.4);
2197
2379
  --us-checkbox-control-color: var(--us-white-color);
2198
2380
  --us-_checked-checkbox-control-border-color: var(--us-primary-color);
2199
2381
  --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(var(--us-primary-rgb) / 40%);
@@ -2314,7 +2496,14 @@ html {
2314
2496
 
2315
2497
  .us-theme-fci {
2316
2498
  --us-primary-rgb: 153 0 0;
2317
- --us-primary-color: hsl(0, 100%, 30%);
2499
+ --us-secondary-rgb: 15 23 42;
2500
+ --us-success-rgb: 22 163 74;
2501
+ --us-info-rgb: 124 58 237;
2502
+ --us-warning-rgb: 248 148 6;
2503
+ --us-danger-rgb: 220 38 38;
2504
+ --us-black-rgb: 0 0 0;
2505
+ --us-white-rgb: 255 255 255;
2506
+ --us-primary-color: #990000;
2318
2507
  --us-secondary-color: #0f172a;
2319
2508
  --us-success-color: #16a34a;
2320
2509
  --us-success-dark-color: #15803d;