@unifiedsoftware/styles 2.0.0-beta.9 → 2.0.1-beta.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.
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
  }
@@ -343,7 +348,7 @@
343
348
  --us-icon-color: var(--us-primary-color);
344
349
  }
345
350
  .us-theme-fci .us-icon--secondary {
346
- --us-icon-color: var(--us-secondary-color);
351
+ --us-icon-color: rgba(0, 0, 0, 0.54);
347
352
  }
348
353
  .us-theme-fci .us-icon--secondary {
349
354
  --us-icon-color: var(--us-secondary-action-color);
@@ -643,7 +648,7 @@ html {
643
648
  --us-button-divider-color: #fff;
644
649
  }
645
650
  .us-theme-fci .us-button--xs {
646
- --us-button-height: 22px;
651
+ --us-button-height: 24px;
647
652
  --us-button-padding-y: 0;
648
653
  --us-button-padding-x: 0.625rem;
649
654
  --us-button-font-size: 0.75rem;
@@ -654,7 +659,7 @@ html {
654
659
  --us-icon-font-size: 0.75rem;
655
660
  }
656
661
  .us-theme-fci .us-button--sm {
657
- --us-button-height: 26px;
662
+ --us-button-height: 28px;
658
663
  --us-button-padding-y: 0;
659
664
  --us-button-padding-x: 0.75rem;
660
665
  --us-button-font-size: 0.75rem;
@@ -665,7 +670,7 @@ html {
665
670
  --us-icon-font-size: 0.875rem;
666
671
  }
667
672
  .us-theme-fci .us-button--md {
668
- --us-button-height: 30px;
673
+ --us-button-height: 32px;
669
674
  --us-button-padding-y: 0;
670
675
  --us-button-padding-x: 0.875rem;
671
676
  --us-button-font-size: 0.875rem;
@@ -676,7 +681,7 @@ html {
676
681
  --us-icon-font-size: 1rem;
677
682
  }
678
683
  .us-theme-fci .us-button--lg {
679
- --us-button-height: 34px;
684
+ --us-button-height: 36px;
680
685
  --us-button-padding-y: 0;
681
686
  --us-button-padding-x: 1rem;
682
687
  --us-button-font-size: 0.875rem;
@@ -708,6 +713,12 @@ html {
708
713
  .us-theme-fci .us-button--2xl .us-icon {
709
714
  --us-icon-font-size: 1.5rem;
710
715
  }
716
+ .us-theme-fci .us-button > .us-glow {
717
+ --us-_focus-glow-spread: 1px;
718
+ --us-_focus-glow-blur: 6px;
719
+ --us-_focus-hover-glow-blur: 8px;
720
+ --us-_focus-active-glow-blur: 10px;
721
+ }
711
722
  .us-theme-fci .us-button--filled {
712
723
  --us-button-border-width: 1px;
713
724
  --us-button-border-color: transparent;
@@ -718,6 +729,7 @@ html {
718
729
  --us-overlay-opacity: 0;
719
730
  --us-_hover-overlay-opacity: 0.24;
720
731
  --us-_active-overlay-opacity: 0.32;
732
+ --us-_focus-overlay-opacity: 0.24;
721
733
  --us-_focus-hover-overlay-opacity: 0.24;
722
734
  --us-_focus-active-overlay-opacity: 0.32;
723
735
  }
@@ -733,6 +745,7 @@ html {
733
745
  --us-overlay-opacity: 0;
734
746
  --us-_hover-overlay-opacity: 0.08;
735
747
  --us-_active-overlay-opacity: 0.1;
748
+ --us-_focus-overlay-opacity: 0.08;
736
749
  --us-_focus-hover-overlay-opacity: 0.08;
737
750
  --us-_focus-active-overlay-opacity: 0.1;
738
751
  }
@@ -746,18 +759,21 @@ html {
746
759
  --us-overlay-opacity: 0.16;
747
760
  --us-_hover-overlay-opacity: 0.24;
748
761
  --us-_active-overlay-opacity: 0.32;
762
+ --us-_focus-overlay-opacity: 0.24;
749
763
  --us-_focus-hover-overlay-opacity: 0.24;
750
764
  --us-_focus-active-overlay-opacity: 0.32;
751
765
  }
752
766
  .us-theme-fci .us-button--flat > .us-outline {
753
767
  --us-outline-border-width: 1px;
754
- --us-outline-border-color: transparent;
768
+ --us-outline-border-color: currentColor;
769
+ --us-outline-opacity: 0;
755
770
  }
756
771
  .us-theme-fci .us-button--text > .us-overlay {
757
772
  --us-overlay-color: inherit;
758
773
  --us-overlay-opacity: 0;
759
774
  --us-_hover-overlay-opacity: 0.16;
760
775
  --us-_active-overlay-opacity: 0.24;
776
+ --us-_focus-overlay-opacity: 0.12;
761
777
  --us-_focus-hover-overlay-opacity: 0.12;
762
778
  --us-_focus-active-overlay-opacity: 0.24;
763
779
  }
@@ -770,6 +786,7 @@ html {
770
786
  --us-overlay-opacity: 0;
771
787
  --us-_hover-overlay-opacity: 0.16;
772
788
  --us-_active-overlay-opacity: 0.24;
789
+ --us-_focus-overlay-opacity: 0.12;
773
790
  --us-_focus-hover-overlay-opacity: 0.12;
774
791
  --us-_focus-active-overlay-opacity: 0.24;
775
792
  }
@@ -795,6 +812,11 @@ html {
795
812
  .us-theme-fci .us-button--2xl.us-button--icon-only .us-icon {
796
813
  --us-icon-font-size: 1.875rem;
797
814
  }
815
+ .us-theme-fci .us-button--primary > .us-glow {
816
+ --us-_focus-glow-color: var(--us-primary-rgb);
817
+ --us-_focus-glow-alpha: 1;
818
+ --us-_focus-glow-shadow-alpha: 0.75;
819
+ }
798
820
  .us-theme-fci .us-button--filled.us-button--primary {
799
821
  --us-button-background: var(--us-primary-color);
800
822
  }
@@ -810,6 +832,11 @@ html {
810
832
  .us-theme-fci .us-button--bordered.us-button--primary {
811
833
  --us-button-color: var(--us-primary-color);
812
834
  }
835
+ .us-theme-fci .us-button--secondary > .us-glow {
836
+ --us-_focus-glow-color: var(--us-secondary-rgb);
837
+ --us-_focus-glow-alpha: 1;
838
+ --us-_focus-glow-shadow-alpha: 0.75;
839
+ }
813
840
  .us-theme-fci .us-button--filled.us-button--secondary {
814
841
  --us-button-background: var(--us-secondary-color);
815
842
  }
@@ -846,6 +873,11 @@ html {
846
873
  .us-theme-fci .us-button--bordered.us-button--secondary > .us-outline {
847
874
  --us-outline-opacity: 0.16;
848
875
  }
876
+ .us-theme-fci .us-button--success > .us-glow {
877
+ --us-_focus-glow-color: var(--us-success-rgb);
878
+ --us-_focus-glow-alpha: 1;
879
+ --us-_focus-glow-shadow-alpha: 0.75;
880
+ }
849
881
  .us-theme-fci .us-button--filled.us-button--success {
850
882
  --us-button-background: var(--us-success-color);
851
883
  }
@@ -882,6 +914,11 @@ html {
882
914
  .us-theme-fci .us-button--text.us-button--success > .us-overlay {
883
915
  --us-overlay-color: var(--us-success-color);
884
916
  }
917
+ .us-theme-fci .us-button--info > .us-glow {
918
+ --us-_focus-glow-color: var(--us-info-rgb);
919
+ --us-_focus-glow-alpha: 1;
920
+ --us-_focus-glow-shadow-alpha: 0.75;
921
+ }
885
922
  .us-theme-fci .us-button--filled.us-button--info {
886
923
  --us-button-background: var(--us-info-color);
887
924
  }
@@ -909,6 +946,11 @@ html {
909
946
  .us-theme-fci .us-button--text.us-button--info > .us-overlay {
910
947
  --us-overlay-color: var(--us-info-color);
911
948
  }
949
+ .us-theme-fci .us-button--warning > .us-glow {
950
+ --us-_focus-glow-color: var(--us-warning-rgb);
951
+ --us-_focus-glow-alpha: 1;
952
+ --us-_focus-glow-shadow-alpha: 0.75;
953
+ }
912
954
  .us-theme-fci .us-button--filled.us-button--warning {
913
955
  --us-button-background: var(--us-warning-color);
914
956
  }
@@ -945,6 +987,11 @@ html {
945
987
  .us-theme-fci .us-button--text.us-button--warning > .us-overlay {
946
988
  --us-overlay-color: var(--us-warning-color);
947
989
  }
990
+ .us-theme-fci .us-button--danger > .us-glow {
991
+ --us-_focus-glow-color: var(--us-danger-rgb);
992
+ --us-_focus-glow-alpha: 1;
993
+ --us-_focus-glow-shadow-alpha: 0.75;
994
+ }
948
995
  .us-theme-fci .us-button--filled.us-button--danger {
949
996
  --us-button-background: var(--us-danger-color);
950
997
  }
@@ -960,6 +1007,21 @@ html {
960
1007
  .us-theme-fci .us-button--bordered.us-button--danger {
961
1008
  --us-button-color: var(--us-danger-color);
962
1009
  }
1010
+ .us-theme-fci .us-button--secondary > .us-glow {
1011
+ --us-_focus-glow-color: var(--us-secondary-rgb);
1012
+ --us-_focus-glow-alpha: 0.5;
1013
+ --us-_focus-glow-shadow-alpha: 0.25;
1014
+ }
1015
+ .us-theme-fci .us-button--filled.us-button--secondary > .us-glow {
1016
+ --us-_focus-glow-color: var(--us-secondary-rgb);
1017
+ --us-_focus-glow-alpha: 0.5;
1018
+ --us-_focus-glow-shadow-alpha: 0.25;
1019
+ }
1020
+ .us-theme-fci .us-button--outlined > .us-glow {
1021
+ --us-_focus-glow-color: var(--us-secondary-rgb);
1022
+ --us-_focus-glow-alpha: 0.5;
1023
+ --us-_focus-glow-shadow-alpha: 0.25;
1024
+ }
963
1025
 
964
1026
  .us-theme-fci .us-drawer {
965
1027
  --us-drawer-background: #fff;
@@ -1062,45 +1124,69 @@ html {
1062
1124
 
1063
1125
  .us-theme-fci .us-input {
1064
1126
  --us-input-font-family: var(--us-font-sans);
1065
- --us-input-border-radius: 6px;
1066
1127
  }
1067
1128
  .us-theme-fci .us-input--xs {
1068
- --us-input-height: 22px;
1129
+ --us-input-height: 24px;
1069
1130
  --us-input-padding-y: 0.282rem;
1070
1131
  --us-input-padding-x: 0.625rem;
1071
1132
  --us-input-font-size: 0.75rem;
1133
+ --us-input-border-radius: 6px;
1134
+ --us-input-line-height: 1;
1135
+ }
1136
+ .us-theme-fci .us-input--xs .us-icon:not(.us-button .us-icon) {
1137
+ --us-icon-font-size-default: 0.75rem;
1072
1138
  }
1073
1139
  .us-theme-fci .us-input--sm {
1074
- --us-input-height: 24px;
1140
+ --us-input-height: 28px;
1075
1141
  --us-input-padding-y: 0.407rem;
1076
1142
  --us-input-padding-x: 0.75rem;
1077
1143
  --us-input-font-size: 0.75rem;
1144
+ --us-input-border-radius: 6px;
1145
+ --us-input-line-height: 1;
1146
+ }
1147
+ .us-theme-fci .us-input--sm .us-icon:not(.us-button .us-icon) {
1148
+ --us-icon-font-size-default: 0.875rem;
1078
1149
  }
1079
1150
  .us-theme-fci .us-input--md {
1080
- --us-input-height: 30px;
1151
+ --us-input-height: 32px;
1081
1152
  --us-input-padding-y: 0.532rem;
1082
1153
  --us-input-padding-x: 0.875rem;
1083
- --us-input-font-size: 0.75rem;
1154
+ --us-input-font-size: 0.8125rem;
1155
+ --us-input-border-radius: 6px;
1156
+ --us-input-line-height: 1;
1084
1157
  --us-input-content-gap: 0.25rem;
1085
1158
  }
1086
1159
  .us-theme-fci .us-input--md .us-icon:not(.us-button .us-icon) {
1087
- --us-icon-font-size-default: 16px;
1160
+ --us-icon-font-size-default: 1rem;
1088
1161
  }
1089
1162
  .us-theme-fci .us-input--lg {
1090
- --us-input-height: 34px;
1163
+ --us-input-height: 36px;
1091
1164
  --us-input-padding-y: 0.625rem;
1092
1165
  --us-input-padding-x: 1rem;
1093
- --us-input-font-size: 0.85rem;
1166
+ --us-input-font-size: 0.875rem;
1167
+ --us-input-border-radius: 8px;
1168
+ --us-input-line-height: 1;
1169
+ }
1170
+ .us-theme-fci .us-input--lg .us-icon:not(.us-button .us-icon) {
1171
+ --us-icon-font-size-default: 1.125rem;
1094
1172
  }
1095
1173
  .us-theme-fci .us-input--xl {
1096
- --us-input-height: 44px;
1174
+ --us-input-height: 40px;
1097
1175
  --us-input-padding-y: 0.75rem;
1098
- --us-input-padding-x: 1.125rem;
1099
- --us-input-font-size: 0.85rem;
1176
+ --us-input-padding-x: 1.25rem;
1177
+ --us-input-font-size: 1rem;
1178
+ --us-input-border-radius: 8px;
1179
+ --us-input-line-height: 1;
1180
+ }
1181
+ .us-theme-fci .us-input--xl .us-icon:not(.us-button .us-icon) {
1182
+ --us-icon-font-size-default: 1.25rem;
1100
1183
  }
1101
1184
  .us-theme-fci .us-input--filled > .us-outline {
1102
1185
  --us-outline-border-width: 1px;
1103
- --us-outline-focus-border-width: 1px;
1186
+ --us-outline-focus-border-width: 2px;
1187
+ }
1188
+ .us-theme-fci .us-input--filled > .us-glow {
1189
+ --us-glow-opacity: 0;
1104
1190
  }
1105
1191
  .us-theme-fci .us-input--outlined > .us-overlay {
1106
1192
  --us-overlay-color: inherit;
@@ -1108,19 +1194,30 @@ html {
1108
1194
  }
1109
1195
  .us-theme-fci .us-input--outlined > .us-outline {
1110
1196
  --us-outline-border-width: 1px;
1111
- --us-outline-focus-border-width: 1px;
1197
+ --us-outline-focus-border-width: 2px;
1198
+ }
1199
+ .us-theme-fci .us-input--outlined > .us-glow {
1200
+ --us-glow-opacity: 0;
1112
1201
  }
1113
1202
  .us-theme-fci .us-input--flat > .us-outline {
1114
1203
  --us-outline-border-width: 1px;
1115
- --us-outline-focus-border-width: 1px;
1204
+ --us-outline-focus-border-width: 2px;
1205
+ }
1206
+ .us-theme-fci .us-input--flat > .us-glow {
1207
+ --us-glow-opacity: 0;
1116
1208
  }
1117
1209
  .us-theme-fci .us-input--text {
1118
1210
  --us-input-padding-x: 0;
1119
1211
  }
1120
1212
  .us-theme-fci .us-input--text > .us-outline {
1121
1213
  --us-outline-border-width: 1px;
1214
+ --us-outline-focus-border-width: 2px;
1215
+ }
1216
+ .us-theme-fci .us-input--text > .us-glow {
1217
+ --us-glow-opacity: 0;
1122
1218
  }
1123
1219
  .us-theme-fci .us-input--filled {
1220
+ --us-input-color: rgba(0, 0, 0, 0.87);
1124
1221
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1125
1222
  }
1126
1223
  .us-theme-fci .us-input--filled > .us-overlay {
@@ -1161,6 +1258,7 @@ html {
1161
1258
  --us-outline-focus-opacity: 1;
1162
1259
  }
1163
1260
  .us-theme-fci .us-input--outlined {
1261
+ --us-input-color: rgba(0, 0, 0, 0.87);
1164
1262
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1165
1263
  }
1166
1264
  .us-theme-fci .us-input--outlined > .us-overlay {
@@ -1169,28 +1267,46 @@ html {
1169
1267
  }
1170
1268
  .us-theme-fci .us-input--outlined > .us-outline {
1171
1269
  --us-outline-border-color: currentColor;
1172
- --us-outline-opacity: 0.12;
1173
- --us-outline-hover-opacity: 0.24;
1270
+ --us-outline-opacity: 0.4;
1271
+ --us-outline-hover-opacity: 0.6;
1174
1272
  --us-outline-focus-opacity: 1;
1175
1273
  }
1176
1274
  .us-theme-fci .us-input--outlined.us-input--primary > .us-outline {
1177
1275
  --us-outline-focus-border-color: var(--us-primary-color);
1178
1276
  }
1277
+ .us-theme-fci .us-input--outlined.us-input--primary > .us-glow {
1278
+ --us-glow-focus-border-color: var(--us-primary-color);
1279
+ }
1179
1280
  .us-theme-fci .us-input--outlined.us-input--secondary > .us-outline {
1180
1281
  --us-outline-focus-border-color: var(--us-secondary-color);
1181
1282
  }
1283
+ .us-theme-fci .us-input--outlined.us-input--secondary > .us-glow {
1284
+ --us-glow-focus-border-color: var(--us-secondary-color);
1285
+ }
1182
1286
  .us-theme-fci .us-input--outlined.us-input--success > .us-outline {
1183
1287
  --us-outline-focus-border-color: var(--us-success-color);
1184
1288
  }
1289
+ .us-theme-fci .us-input--outlined.us-input--success > .us-glow {
1290
+ --us-glow-focus-border-color: var(--us-success-color);
1291
+ }
1185
1292
  .us-theme-fci .us-input--outlined.us-input--info > .us-outline {
1186
1293
  --us-outline-focus-border-color: var(--us-info-color);
1187
1294
  }
1295
+ .us-theme-fci .us-input--outlined.us-input--info > .us-glow {
1296
+ --us-glow-focus-border-color: var(--us-info-color);
1297
+ }
1188
1298
  .us-theme-fci .us-input--outlined.us-input--warning > .us-outline {
1189
1299
  --us-outline-focus-border-color: var(--us-warning-color);
1190
1300
  }
1301
+ .us-theme-fci .us-input--outlined.us-input--warning > .us-glow {
1302
+ --us-glow-focus-border-color: var(--us-warning-color);
1303
+ }
1191
1304
  .us-theme-fci .us-input--outlined.us-input--danger > .us-outline {
1192
1305
  --us-outline-focus-border-color: var(--us-danger-color);
1193
1306
  }
1307
+ .us-theme-fci .us-input--outlined.us-input--danger > .us-glow {
1308
+ --us-glow-focus-border-color: var(--us-danger-color);
1309
+ }
1194
1310
  .us-theme-fci .us-input--outlined.us-input--light {
1195
1311
  --us-input-color: #fff;
1196
1312
  --us-input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -1207,6 +1323,7 @@ html {
1207
1323
  --us-outline-focus-opacity: 1;
1208
1324
  }
1209
1325
  .us-theme-fci .us-input--flat {
1326
+ --us-input-color: rgba(0, 0, 0, 0.87);
1210
1327
  --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
1211
1328
  }
1212
1329
  .us-theme-fci .us-input--flat > .us-overlay {
@@ -1221,21 +1338,39 @@ html {
1221
1338
  .us-theme-fci .us-input--flat.us-input--primary > .us-outline {
1222
1339
  --us-outline-focus-border-color: var(--us-primary-color);
1223
1340
  }
1341
+ .us-theme-fci .us-input--flat.us-input--primary > .us-glow {
1342
+ --us-glow-focus-border-color: var(--us-primary-color);
1343
+ }
1224
1344
  .us-theme-fci .us-input--flat.us-input--secondary > .us-outline {
1225
1345
  --us-outline-focus-border-color: var(--us-secondary-color);
1226
1346
  }
1347
+ .us-theme-fci .us-input--flat.us-input--secondary > .us-glow {
1348
+ --us-glow-focus-border-color: var(--us-secondary-color);
1349
+ }
1227
1350
  .us-theme-fci .us-input--flat.us-input--success > .us-outline {
1228
1351
  --us-outline-focus-border-color: var(--us-success-color);
1229
1352
  }
1353
+ .us-theme-fci .us-input--flat.us-input--success > .us-glow {
1354
+ --us-glow-focus-border-color: var(--us-success-color);
1355
+ }
1230
1356
  .us-theme-fci .us-input--flat.us-input--info > .us-outline {
1231
1357
  --us-outline-focus-border-color: var(--us-info-color);
1232
1358
  }
1359
+ .us-theme-fci .us-input--flat.us-input--info > .us-glow {
1360
+ --us-glow-focus-border-color: var(--us-info-color);
1361
+ }
1233
1362
  .us-theme-fci .us-input--flat.us-input--warning > .us-outline {
1234
1363
  --us-outline-focus-border-color: var(--us-warning-color);
1235
1364
  }
1365
+ .us-theme-fci .us-input--flat.us-input--warning > .us-glow {
1366
+ --us-glow-focus-border-color: var(--us-warning-color);
1367
+ }
1236
1368
  .us-theme-fci .us-input--flat.us-input--danger > .us-outline {
1237
1369
  --us-outline-focus-border-color: var(--us-danger-color);
1238
1370
  }
1371
+ .us-theme-fci .us-input--flat.us-input--danger > .us-glow {
1372
+ --us-glow-focus-border-color: var(--us-danger-color);
1373
+ }
1239
1374
  .us-theme-fci .us-input--flat.us-input--light {
1240
1375
  --us-input-color: #fff;
1241
1376
  --us-input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -1475,6 +1610,12 @@ html {
1475
1610
  --us-list-color: #343a40;
1476
1611
  --us-list-background: #fff;
1477
1612
  }
1613
+ .us-theme-fci .us-list--divider .us-list-item {
1614
+ border-bottom: 1px solid #e0e0e0;
1615
+ }
1616
+ .us-theme-fci .us-list--divider .us-list-item:last-child {
1617
+ border-bottom: 0px;
1618
+ }
1478
1619
  .us-theme-fci .us-list-item {
1479
1620
  --us-list-item-border-radius: 0px;
1480
1621
  --us-list-item-title-font-weight: 500;
@@ -1519,17 +1660,26 @@ html {
1519
1660
  --us-list-item-subtitle-font-size: 11px;
1520
1661
  --us-list-item-title-line-height: 14px;
1521
1662
  }
1663
+ .us-theme-fci .us-list--sm .us-list-item .us-icon {
1664
+ --us-icon-font-size: 18px;
1665
+ }
1522
1666
  .us-theme-fci .us-list--md .us-list-item {
1523
1667
  --us-list-item-min-height: 2.25rem;
1524
1668
  --us-list-item-padding-y: 0.375rem;
1525
1669
  --us-list-item-padding-x: 0.875rem;
1526
1670
  --us-list-item-padding-level: 1.25rem;
1527
- --us-list-item-gap: 1rem;
1671
+ --us-list-item-gap: 0.5rem;
1528
1672
  --us-list-item-title-font-size: 0.8125rem;
1529
1673
  --us-list-item-title-line-height: 20px;
1530
1674
  --us-list-item-subtitle-font-size: 0.75rem;
1531
1675
  --us-list-item-subtitle-line-height: 16px;
1532
1676
  }
1677
+ .us-theme-fci .us-list--md .us-list-item .us-icon {
1678
+ --us-icon-font-size: 20px;
1679
+ }
1680
+ .us-theme-fci .us-list--md .us-list-item .us-checkbox .us-icon {
1681
+ --us-icon-font-size: 0.625rem;
1682
+ }
1533
1683
  .us-theme-fci .us-list--lg .us-list-item {
1534
1684
  --us-list-item-min-height: 2.75rem;
1535
1685
  --us-list-item-padding-y: 0.625rem;
@@ -1542,6 +1692,9 @@ html {
1542
1692
  --us-list-item-subtitle-font-size: 0.8125rem;
1543
1693
  --us-list-item-subtitle-line-height: 18px;
1544
1694
  }
1695
+ .us-theme-fci .us-list--lg .us-list-item .us-icon {
1696
+ --us-icon-font-size: 22px;
1697
+ }
1545
1698
 
1546
1699
  .us-theme-fci .us-menu {
1547
1700
  --us-menu-padding-y: 0;
@@ -1596,6 +1749,31 @@ html {
1596
1749
  --us-_active-overlay-opacity: 0;
1597
1750
  }
1598
1751
 
1752
+ .us-theme-fci .us-tabs--xs {
1753
+ --us-tab-height: 32px;
1754
+ --us-tab-padding-x: 12px;
1755
+ --us-tab-font-size: 12px;
1756
+ }
1757
+ .us-theme-fci .us-tabs--sm {
1758
+ --us-tab-height: 36px;
1759
+ --us-tab-font-size: 13px;
1760
+ --us-tab-padding-x: 13px;
1761
+ }
1762
+ .us-theme-fci .us-tabs--md {
1763
+ --us-tab-height: 40px;
1764
+ --us-tab-padding-x: 16px;
1765
+ --us-tab-font-size: 14px;
1766
+ }
1767
+ .us-theme-fci .us-tabs--lg {
1768
+ --us-tab-height: 44px;
1769
+ --us-tab-padding-x: 18px;
1770
+ --us-tab-font-size: 16px;
1771
+ }
1772
+ .us-theme-fci .us-tabs--xl {
1773
+ --us-tab-height: 48px;
1774
+ --us-tab-padding-x: 22px;
1775
+ --us-tab-font-size: 18px;
1776
+ }
1599
1777
  .us-theme-fci .us-tabs--underlined {
1600
1778
  --us-tab-indicator-color: var(--us-primary-action-color);
1601
1779
  --us-tab-indicator-height: 3px;
@@ -1692,8 +1870,6 @@ html {
1692
1870
  .us-theme-fci .us-tab {
1693
1871
  --us-tab-color: var(--us-secondary-action-color);
1694
1872
  --us-tab-padding-y: 0px;
1695
- --us-tab-padding-x: 16px;
1696
- --us-tab-font-size: 0.8125rem;
1697
1873
  --us-tab-font-weight: 500;
1698
1874
  --us-tab-closable-color: var(--us-secondary-action-color);
1699
1875
  }
@@ -1736,22 +1912,20 @@ html {
1736
1912
  .us-theme-fci .us-card--xs {
1737
1913
  --us-card-header-padding-y: 0.375rem;
1738
1914
  --us-card-header-padding-x: 0.75rem;
1739
- --us-card-header-min-height: 2.5rem;
1915
+ --us-card-header-min-height: 2.75rem;
1740
1916
  --us-card-header-gap: 0.5rem;
1741
1917
  --us-card-header-content-gap: 0.25rem;
1742
- --us-card-header-title-font-size: 11px;
1743
- --us-card-header-title-font-weight: 500;
1918
+ --us-card-header-title-font-size: 12px;
1744
1919
  --us-card-header-title-line-height: 14px;
1745
1920
  --us-card-header-subtitle-font-size: 10px;
1746
- --us-card-header-subtitle-font-weight: 500;
1747
1921
  --us-card-header-subtitle-line-height: 14px;
1748
- --us-card-body-padding-y: 0.375rem;
1922
+ --us-card-body-padding-y: 0.75rem;
1749
1923
  --us-card-body-padding-x: 0.75rem;
1750
1924
  --us-card-body-font-size: 0.75rem;
1751
1925
  --us-card-body-line-height: 18px;
1752
1926
  --us-card-footer-padding-y: 0.375rem;
1753
1927
  --us-card-footer-padding-x: 0.75rem;
1754
- --us-card-footer-min-height: 2.5rem;
1928
+ --us-card-footer-min-height: 2.75rem;
1755
1929
  --us-card-footer-gap: 0.5rem;
1756
1930
  }
1757
1931
  .us-theme-fci .us-card--xs .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1760,24 +1934,22 @@ html {
1760
1934
  .us-theme-fci .us-card--sm {
1761
1935
  --us-card-title-padding-y: 0.875rem 0.375rem;
1762
1936
  --us-card-title-font-size: 1.25rem;
1763
- --us-card-header-padding-y: 0.375rem;
1937
+ --us-card-header-padding-y: 0.5rem;
1764
1938
  --us-card-header-padding-x: 1rem;
1765
- --us-card-header-min-height: 2.75rem;
1939
+ --us-card-header-min-height: 3rem;
1766
1940
  --us-card-header-gap: 0.75rem;
1767
1941
  --us-card-header-content-gap: 0.5rem;
1768
- --us-card-header-title-font-size: 12px;
1769
- --us-card-header-title-font-weight: 500;
1942
+ --us-card-header-title-font-size: 13px;
1770
1943
  --us-card-header-title-line-height: 16px;
1771
1944
  --us-card-header-subtitle-font-size: 11px;
1772
- --us-card-header-subtitle-font-weight: 500;
1773
1945
  --us-card-header-subtitle-line-height: 16px;
1774
- --us-card-body-padding-y: 0.375rem;
1946
+ --us-card-body-padding-y: 1rem;
1775
1947
  --us-card-body-padding-x: 1rem;
1776
1948
  --us-card-body-font-size: 0.875rem;
1777
1949
  --us-card-body-line-height: 20px;
1778
- --us-card-footer-padding-y: 0.375rem;
1950
+ --us-card-footer-padding-y: 0.5rem;
1779
1951
  --us-card-footer-padding-x: 1rem;
1780
- --us-card-footer-min-height: 2.75rem;
1952
+ --us-card-footer-min-height: 3rem;
1781
1953
  --us-card-footer-gap: 0.75rem;
1782
1954
  }
1783
1955
  .us-theme-fci .us-card--sm .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1786,22 +1958,22 @@ html {
1786
1958
  .us-theme-fci .us-card--md {
1787
1959
  --us-card-title-padding-y: 1rem 0.5rem;
1788
1960
  --us-card-title-font-size: 1.25rem;
1789
- --us-card-header-min-height: 3rem;
1790
- --us-card-header-padding-y: 0.5rem;
1961
+ --us-card-header-padding-y: 0.625rem;
1791
1962
  --us-card-header-padding-x: 1rem;
1963
+ --us-card-header-min-height: 3.5rem;
1792
1964
  --us-card-header-gap: 0.75rem;
1793
1965
  --us-card-header-content-gap: 0.5rem;
1794
- --us-card-header-title-font-size: 13px;
1795
- --us-card-header-title-line-height: 16px;
1966
+ --us-card-header-title-font-size: 14px;
1967
+ --us-card-header-title-line-height: 18px;
1796
1968
  --us-card-header-subtitle-font-size: 12px;
1797
1969
  --us-card-header-subtitle-line-height: 16px;
1798
- --us-card-body-padding-y: 0.5rem;
1970
+ --us-card-body-padding-y: 1rem;
1799
1971
  --us-card-body-padding-x: 1rem;
1800
1972
  --us-card-body-font-size: 0.875rem;
1801
1973
  --us-card-body-line-height: 24px;
1802
- --us-card-footer-padding-y: 0.5rem;
1974
+ --us-card-footer-padding-y: 0.625rem;
1803
1975
  --us-card-footer-padding-x: 1rem;
1804
- --us-card-footer-min-height: 3rem;
1976
+ --us-card-footer-min-height: 3.5rem;
1805
1977
  --us-card-footer-gap: 1rem;
1806
1978
  }
1807
1979
  .us-theme-fci .us-card--md .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1810,22 +1982,22 @@ html {
1810
1982
  .us-theme-fci .us-card--lg {
1811
1983
  --us-card-title-padding-y: 1.25rem 0.75rem;
1812
1984
  --us-card-title-font-size: 1.5rem;
1813
- --us-card-header-padding-y: 0.625rem;
1985
+ --us-card-header-padding-y: 0.75rem;
1814
1986
  --us-card-header-padding-x: 1.25rem;
1815
- --us-card-header-min-height: 3.5rem;
1987
+ --us-card-header-min-height: 4rem;
1816
1988
  --us-card-header-gap: 1rem;
1817
1989
  --us-card-header-content-gap: 0.75rem;
1818
- --us-card-header-title-font-size: 14px;
1990
+ --us-card-header-title-font-size: 16px;
1819
1991
  --us-card-header-title-line-height: 18px;
1820
1992
  --us-card-header-subtitle-font-size: 13px;
1821
1993
  --us-card-header-subtitle-line-height: 18px;
1822
- --us-card-body-padding-y: 0.875rem;
1994
+ --us-card-body-padding-y: 1.25rem;
1823
1995
  --us-card-body-padding-x: 1.25rem;
1824
1996
  --us-card-body-font-size: 1rem;
1825
1997
  --us-card-body-line-height: 24px;
1826
- --us-card-footer-padding-y: 0.625rem;
1998
+ --us-card-footer-padding-y: 0.75rem;
1827
1999
  --us-card-footer-padding-x: 1.25rem;
1828
- --us-card-footer-min-height: 3.5rem;
2000
+ --us-card-footer-min-height: 4rem;
1829
2001
  --us-card-footer-gap: 1rem;
1830
2002
  }
1831
2003
  .us-theme-fci .us-card--lg .us-card-header .us-icon:not(.us-button .us-icon) {
@@ -1834,47 +2006,25 @@ html {
1834
2006
  .us-theme-fci .us-card--xl {
1835
2007
  --us-card-header-padding-y: 0.75rem;
1836
2008
  --us-card-header-padding-x: 1.5rem;
1837
- --us-card-header-min-height: 4rem;
2009
+ --us-card-header-min-height: 4.5rem;
1838
2010
  --us-card-header-gap: 1rem;
1839
2011
  --us-card-header-content-gap: 0.875rem;
1840
- --us-card-header-title-font-size: 16px;
2012
+ --us-card-header-title-font-size: 18px;
1841
2013
  --us-card-header-title-line-height: 20px;
1842
2014
  --us-card-header-subtitle-font-size: 15px;
1843
2015
  --us-card-header-subtitle-line-height: 20px;
1844
- --us-card-body-padding-y: 0.75rem;
2016
+ --us-card-body-padding-y: 1.5rem;
1845
2017
  --us-card-body-padding-x: 1.5rem;
1846
2018
  --us-card-body-font-size: 1.125rem;
1847
2019
  --us-card-body-line-height: 28px;
1848
2020
  --us-card-footer-padding-y: 0.75rem;
1849
2021
  --us-card-footer-padding-x: 1.5rem;
1850
- --us-card-footer-min-height: 4rem;
2022
+ --us-card-footer-min-height: 4.5rem;
1851
2023
  --us-card-footer-gap: 1rem;
1852
2024
  }
1853
2025
  .us-theme-fci .us-card--xl .us-card-header .us-icon:not(.us-button .us-icon) {
1854
2026
  --us-icon-font-size-default: 36px;
1855
2027
  }
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
2028
 
1879
2029
  .us-theme-fci .us-description > .us-surface {
1880
2030
  --us-surface-opacity: 0;
@@ -2193,7 +2343,7 @@ html {
2193
2343
  .us-theme-fci .us-checkbox {
2194
2344
  --us-checkbox-control-border-width: 1px;
2195
2345
  --us-checkbox-control-border-style: solid;
2196
- --us-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
2346
+ --us-checkbox-control-border-color: rgba(0, 0, 0, 0.4);
2197
2347
  --us-checkbox-control-color: var(--us-white-color);
2198
2348
  --us-_checked-checkbox-control-border-color: var(--us-primary-color);
2199
2349
  --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(var(--us-primary-rgb) / 40%);
@@ -2314,7 +2464,14 @@ html {
2314
2464
 
2315
2465
  .us-theme-fci {
2316
2466
  --us-primary-rgb: 153 0 0;
2317
- --us-primary-color: hsl(0, 100%, 30%);
2467
+ --us-secondary-rgb: 15 23 42;
2468
+ --us-success-rgb: 22 163 74;
2469
+ --us-info-rgb: 124 58 237;
2470
+ --us-warning-rgb: 248 148 6;
2471
+ --us-danger-rgb: 220 38 38;
2472
+ --us-black-rgb: 0 0 0;
2473
+ --us-white-rgb: 255 255 255;
2474
+ --us-primary-color: #990000;
2318
2475
  --us-secondary-color: #0f172a;
2319
2476
  --us-success-color: #16a34a;
2320
2477
  --us-success-dark-color: #15803d;