@unifiedsoftware/styles 2.0.0-alpha.1 → 2.0.0-alpha.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 (24) hide show
  1. package/css/fci.css +619 -219
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +380 -57
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +33 -11
  7. package/scss/components/_accordion.scss +22 -24
  8. package/scss/components/_card.scss +95 -21
  9. package/scss/components/_descriptions.scss +61 -16
  10. package/scss/components/_input.scss +54 -5
  11. package/scss/components/_tabs.scss +1 -1
  12. package/scss/components/_toolbar.scss +0 -1
  13. package/scss/themes/fci/_tokens.scss +18 -5
  14. package/scss/themes/fci/components/_accordion.scss +90 -132
  15. package/scss/themes/fci/components/_badge.scss +13 -14
  16. package/scss/themes/fci/components/_button.scss +125 -37
  17. package/scss/themes/fci/components/_card.scss +150 -93
  18. package/scss/themes/fci/components/_chip.scss +56 -19
  19. package/scss/themes/fci/components/_descriptions.scss +53 -0
  20. package/scss/themes/fci/components/_icon.scss +1 -1
  21. package/scss/themes/fci/components/_index.scss +1 -0
  22. package/scss/themes/fci/components/_input.scss +10 -7
  23. package/scss/themes/fci/components/_list.scss +0 -4
  24. package/scss/themes/fci/components/_tabs.scss +99 -1
package/css/fci.css CHANGED
@@ -1,13 +1,27 @@
1
1
  .us-theme-fci .us-accordion {
2
- --us-accordion-border-radius: 10px;
3
- --us-accordion-border-width: 1px;
4
- --us-accordion-border-style: solid;
5
- --us-accordion-border-color: var(--us-border-color);
6
2
  --us-accordion-header-border-color: var(--us-accordion-border-color);
7
3
  --us-accordion-header-title-font-weight: 500;
8
4
  --us-accordion-header-subtitle-font-weight: 400;
5
+ --us-accordion-body-color: inherit;
6
+ }
7
+ .us-theme-fci .us-accordion > .us-outline {
8
+ --us-outline-border-width: 0px;
9
+ --us-outline-z-index: 1;
10
+ }
11
+ .us-theme-fci .us-accordion--bordered:not(.us-accordion--splitted) {
12
+ --us-accordion-border-radius: 10px;
13
+ }
14
+ .us-theme-fci .us-accordion--bordered:not(.us-accordion--splitted) > .us-outline {
15
+ --us-outline-border-width: 1px;
16
+ }
17
+ .us-theme-fci .us-accordion--bordered.us-accordion--splitted .us-accordion-item {
18
+ --us-accordion-border-radius: 10px;
19
+ }
20
+ .us-theme-fci .us-accordion--bordered.us-accordion--splitted .us-accordion-item > .us-outline {
21
+ --us-outline-border-width: 1px;
9
22
  }
10
- .us-theme-fci .us-accordion--xs .us-accordion-header {
23
+ .us-theme-fci .us-accordion--xs {
24
+ --us-accordion-splitted-gap: 0.25rem;
11
25
  --us-accordion-header-min-height: 36px;
12
26
  --us-accordion-header-padding-y: 0.685rem;
13
27
  --us-accordion-header-padding-x: 1rem;
@@ -18,14 +32,13 @@
18
32
  --us-accordion-header-title-line-height: 18px;
19
33
  --us-accordion-header-subtitle-font-size: 11px;
20
34
  --us-accordion-header-title-line-height: 14px;
21
- }
22
- .us-theme-fci .us-accordion--xs .us-accordion-body {
23
35
  --us-accordion-body-padding-y: 1rem;
24
36
  --us-accordion-body-padding-x: 1rem;
25
37
  --us-accordion-body-font-size: 0.75rem;
26
38
  --us-accordion-body-line-height: 18px;
27
39
  }
28
- .us-theme-fci .us-accordion--sm .us-accordion-header {
40
+ .us-theme-fci .us-accordion--sm {
41
+ --us-accordion-splitted-gap: 0.5rem;
29
42
  --us-accordion-header-min-height: 48px;
30
43
  --us-accordion-header-padding-y: 0.625rem;
31
44
  --us-accordion-header-padding-x: 1rem;
@@ -35,17 +48,13 @@
35
48
  --us-accordion-header-title-line-height: 20px;
36
49
  --us-accordion-header-subtitle-font-size: 0.75rem;
37
50
  --us-accordion-header-subtitle-line-height: 16px;
38
- }
39
- .us-theme-fci .us-accordion--sm .us-accordion-body {
40
51
  --us-accordion-body-padding-y: 1.25rem;
41
52
  --us-accordion-body-padding-x: 1rem;
42
53
  --us-accordion-body-font-size: 0.875rem;
43
54
  --us-accordion-body-line-height: 20px;
44
55
  }
45
56
  .us-theme-fci .us-accordion--md {
46
- --us-accordion-splitted-gap: 0.5rem;
47
- }
48
- .us-theme-fci .us-accordion--md .us-accordion-header {
57
+ --us-accordion-splitted-gap: 0.75rem;
49
58
  --us-accordion-header-min-height: 56px;
50
59
  --us-accordion-header-padding-y: 0.625rem;
51
60
  --us-accordion-header-padding-x: 1rem;
@@ -57,17 +66,16 @@
57
66
  --us-accordion-header-title-line-height: 24px;
58
67
  --us-accordion-header-subtitle-font-size: 0.8125rem;
59
68
  --us-accordion-header-subtitle-line-height: 18px;
60
- }
61
- .us-theme-fci .us-accordion--md .us-accordion-header .us-icon:not(.us-button .us-icon) {
62
- --us-icon-font-size-default: 24px;
63
- }
64
- .us-theme-fci .us-accordion--md .us-accordion-body {
65
69
  --us-accordion-body-padding-y: 1.5rem;
66
70
  --us-accordion-body-padding-x: 1rem;
67
71
  --us-accordion-body-font-size: 1rem;
68
72
  --us-accordion-body-line-height: 24px;
69
73
  }
70
- .us-theme-fci .us-accordion--lg .us-accordion-header {
74
+ .us-theme-fci .us-accordion--md .us-accordion-header .us-icon:not(.us-button .us-icon) {
75
+ --us-icon-font-size-default: 24px;
76
+ }
77
+ .us-theme-fci .us-accordion--lg {
78
+ --us-accordion-splitted-gap: 1rem;
71
79
  --us-accordion-header-min-height: 64px;
72
80
  --us-accordion-header-padding-y: 0.625rem;
73
81
  --us-accordion-header-padding-x: 1rem;
@@ -78,14 +86,13 @@
78
86
  --us-accordion-header-title-line-height: 24px;
79
87
  --us-accordion-header-subtitle-font-size: 0.8125rem;
80
88
  --us-accordion-header-subtitle-line-height: 18px;
81
- }
82
- .us-theme-fci .us-accordion--lg .us-accordion-body {
83
89
  --us-accordion-body-padding-y: 1.5rem;
84
90
  --us-accordion-body-padding-x: 1rem;
85
91
  --us-accordion-body-font-size: 1rem;
86
92
  --us-accordion-body-line-height: 24px;
87
93
  }
88
- .us-theme-fci .us-accordion--xl .us-accordion-header {
94
+ .us-theme-fci .us-accordion--xl {
95
+ --us-accordion-splitted-gap: 1.25rem;
89
96
  --us-accordion-header-min-height: 3.5rem;
90
97
  --us-accordion-header-padding-y: 0.625rem;
91
98
  --us-accordion-header-padding-x: 1rem;
@@ -96,119 +103,224 @@
96
103
  --us-accordion-header-title-line-height: 24px;
97
104
  --us-accordion-header-subtitle-font-size: 0.8125rem;
98
105
  --us-accordion-header-subtitle-line-height: 18px;
99
- }
100
- .us-theme-fci .us-accordion--xl .us-accordion-body {
101
106
  --us-accordion-body-padding-y: 1.5rem;
102
107
  --us-accordion-body-padding-x: 1rem;
103
108
  --us-accordion-body-font-size: 1rem;
104
109
  --us-accordion-body-line-height: 24px;
105
110
  }
111
+ .us-theme-fci .us-accordion-item > .us-outline {
112
+ --us-outline-border-width: 0px;
113
+ --us-outline-z-index: 1;
114
+ }
106
115
  .us-theme-fci .us-accordion-item--selected {
107
116
  --us-accordion-header-title-font-weight: 700;
108
117
  }
109
- .us-theme-fci .us-accordion--plain.us-accordion--primary .us-accordion-body {
110
- --us-accordion-body-color: var(--us-primary-color);
111
- }
112
- .us-theme-fci .us-accordion--plain.us-accordion--primary .us-accordion-body > .us-surface {
118
+ .us-theme-fci .us-accordion-body > .us-surface {
113
119
  --us-surface-color: var(--us-white-color);
114
120
  }
115
- .us-theme-fci .us-accordion-header--plain.us-accordion-header--primary {
121
+ .us-theme-fci .us-accordion--primary > .us-outline {
122
+ --us-outline-border-color: var(--us-accordion-border-color);
123
+ --us-outline-opacity: 0.2;
124
+ }
125
+ .us-theme-fci .us-accordion-item--primary > .us-outline {
126
+ --us-outline-border-color: var(--us-accordion-border-color);
127
+ --us-outline-opacity: 0.2;
128
+ }
129
+ .us-theme-fci .us-accordion--secondary > .us-outline {
130
+ --us-outline-border-color: var(--us-accordion-border-color);
131
+ --us-outline-opacity: 0.2;
132
+ }
133
+ .us-theme-fci .us-accordion-item--secondary > .us-outline {
134
+ --us-outline-border-color: var(--us-accordion-border-color);
135
+ --us-outline-opacity: 0.2;
136
+ }
137
+ .us-theme-fci .us-accordion--success > .us-outline {
138
+ --us-outline-border-color: var(--us-accordion-border-color);
139
+ --us-outline-opacity: 0.2;
140
+ }
141
+ .us-theme-fci .us-accordion-item--success > .us-outline {
142
+ --us-outline-border-color: var(--us-accordion-border-color);
143
+ --us-outline-opacity: 0.2;
144
+ }
145
+ .us-theme-fci .us-accordion--info > .us-outline {
146
+ --us-outline-border-color: var(--us-accordion-border-color);
147
+ --us-outline-opacity: 0.2;
148
+ }
149
+ .us-theme-fci .us-accordion-item--info > .us-outline {
150
+ --us-outline-border-color: var(--us-accordion-border-color);
151
+ --us-outline-opacity: 0.2;
152
+ }
153
+ .us-theme-fci .us-accordion--warning > .us-outline {
154
+ --us-outline-border-color: var(--us-accordion-border-color);
155
+ --us-outline-opacity: 0.2;
156
+ }
157
+ .us-theme-fci .us-accordion-item--warning > .us-outline {
158
+ --us-outline-border-color: var(--us-accordion-border-color);
159
+ --us-outline-opacity: 0.2;
160
+ }
161
+ .us-theme-fci .us-accordion--danger > .us-outline {
162
+ --us-outline-border-color: var(--us-accordion-border-color);
163
+ --us-outline-opacity: 0.2;
164
+ }
165
+ .us-theme-fci .us-accordion-item--danger > .us-outline {
166
+ --us-outline-border-color: var(--us-accordion-border-color);
167
+ --us-outline-opacity: 0.2;
168
+ }
169
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--primary {
116
170
  --us-accordion-header-color: var(--us-primary-color);
117
171
  }
118
- .us-theme-fci .us-accordion-header--plain.us-accordion-header--primary > .us-surface {
172
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--primary .us-accordion-header > .us-surface {
119
173
  --us-surface-color: var(--us-white-color);
120
174
  }
121
- .us-theme-fci .us-accordion--plain.us-accordion--secondary .us-accordion-body {
122
- --us-accordion-body-color: inherit;
175
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--secondary {
176
+ --us-accordion-header-color: var(--us-secondary-color);
123
177
  }
124
- .us-theme-fci .us-accordion--plain.us-accordion--secondary .us-accordion-body > .us-surface {
178
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--secondary .us-accordion-header > .us-surface {
125
179
  --us-surface-color: var(--us-white-color);
126
180
  }
127
- .us-theme-fci .us-accordion-header--plain.us-accordion-header--secondary {
128
- --us-accordion-header-color: var(--us-secondary-color);
181
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--success {
182
+ --us-accordion-header-color: var(--us-success-color);
129
183
  }
130
- .us-theme-fci .us-accordion-header--plain.us-accordion-header--secondary > .us-surface {
184
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--success .us-accordion-header > .us-surface {
131
185
  --us-surface-color: var(--us-white-color);
132
186
  }
133
- .us-theme-fci .us-accordion--flat.us-accordion--primary .us-accordion-body {
134
- --us-accordion-body-color: var(--us-primary-color);
187
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--info {
188
+ --us-accordion-header-color: var(--us-info-color);
135
189
  }
136
- .us-theme-fci .us-accordion--flat.us-accordion--primary .us-accordion-body > .us-surface {
137
- --us-surface-color: var(--us-primary-color);
138
- --us-surface-opacity: 0.16;
190
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--info .us-accordion-header > .us-surface {
191
+ --us-surface-color: var(--us-white-color);
139
192
  }
140
- .us-theme-fci .us-accordion-header--flat.us-accordion-header--primary {
141
- --us-accordion-header-color: var(--us-primary-color);
193
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--warning {
194
+ --us-accordion-header-color: var(--us-warning-color);
195
+ }
196
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--warning .us-accordion-header > .us-surface {
197
+ --us-surface-color: var(--us-white-color);
198
+ }
199
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--danger {
200
+ --us-accordion-header-color: var(--us-danger-color);
201
+ }
202
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--danger .us-accordion-header > .us-surface {
203
+ --us-surface-color: var(--us-white-color);
204
+ }
205
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--primary {
206
+ --us-accordion-header-color: var(--us-white-color);
142
207
  }
143
- .us-theme-fci .us-accordion-header--flat.us-accordion-header--primary > .us-surface {
208
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--primary .us-accordion-header > .us-surface {
144
209
  --us-surface-color: var(--us-primary-color);
145
- --us-surface-opacity: 0.16;
146
210
  }
147
- .us-theme-fci .us-accordion--flat.us-accordion--secondary .us-accordion-body {
148
- --us-accordion-body-color: inherit;
211
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--secondary {
212
+ --us-accordion-header-color: var(--us-white-color);
149
213
  }
150
- .us-theme-fci .us-accordion--flat.us-accordion--secondary .us-accordion-body > .us-surface {
214
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--secondary .us-accordion-header > .us-surface {
151
215
  --us-surface-color: var(--us-secondary-color);
216
+ }
217
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--success {
218
+ --us-accordion-header-color: var(--us-white-color);
219
+ }
220
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--success .us-accordion-header > .us-surface {
221
+ --us-surface-color: var(--us-success-color);
222
+ }
223
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--info {
224
+ --us-accordion-header-color: var(--us-white-color);
225
+ }
226
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--info .us-accordion-header > .us-surface {
227
+ --us-surface-color: var(--us-info-color);
228
+ }
229
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--warning {
230
+ --us-accordion-header-color: var(--us-white-color);
231
+ }
232
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--warning .us-accordion-header > .us-surface {
233
+ --us-surface-color: var(--us-warning-color);
234
+ }
235
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--danger {
236
+ --us-accordion-header-color: var(--us-white-color);
237
+ }
238
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--danger .us-accordion-header > .us-surface {
239
+ --us-surface-color: var(--us-danger-color);
240
+ }
241
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--primary {
242
+ --us-accordion-header-color: var(--us-primary-color);
243
+ }
244
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--primary .us-accordion-header > .us-surface {
245
+ --us-surface-color: var(--us-primary-color);
152
246
  --us-surface-opacity: 0.08;
153
247
  }
154
- .us-theme-fci .us-accordion-header--flat.us-accordion-header--secondary {
248
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--secondary {
155
249
  --us-accordion-header-color: var(--us-secondary-color);
156
250
  }
157
- .us-theme-fci .us-accordion-header--flat.us-accordion-header--secondary > .us-surface {
251
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--secondary .us-accordion-header > .us-surface {
158
252
  --us-surface-color: var(--us-secondary-color);
159
253
  --us-surface-opacity: 0.08;
160
254
  }
161
- .us-theme-fci .us-accordion--tonal.us-accordion--primary .us-accordion-body {
162
- --us-accordion-body-color: inherit;
255
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--success {
256
+ --us-accordion-header-color: var(--us-success-color);
163
257
  }
164
- .us-theme-fci .us-accordion--tonal.us-accordion--primary .us-accordion-body > .us-surface {
165
- --us-surface-color: var(--us-primary-color);
166
- --us-surface-opacity: 0.16;
258
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--success .us-accordion-header > .us-surface {
259
+ --us-surface-color: var(--us-success-color);
260
+ --us-surface-opacity: 0.08;
167
261
  }
168
- .us-theme-fci .us-accordion-header--tonal.us-accordion-header--primary {
169
- --us-accordion-header-color: var(--us-secondary-color);
262
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--info {
263
+ --us-accordion-header-color: var(--us-info-color);
170
264
  }
171
- .us-theme-fci .us-accordion-header--tonal.us-accordion-header--primary > .us-surface {
172
- --us-surface-color: var(--us-primary-color);
173
- --us-surface-opacity: 0.16;
265
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--info .us-accordion-header > .us-surface {
266
+ --us-surface-color: var(--us-info-color);
267
+ --us-surface-opacity: 0.08;
174
268
  }
175
- .us-theme-fci .us-accordion--tonal.us-accordion--secondary .us-accordion-body {
176
- --us-accordion-body-color: inherit;
269
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--warning {
270
+ --us-accordion-header-color: var(--us-warning-color);
177
271
  }
178
- .us-theme-fci .us-accordion--tonal.us-accordion--secondary .us-accordion-body > .us-surface {
179
- --us-surface-color: var(--us-secondary-color);
272
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--warning .us-accordion-header > .us-surface {
273
+ --us-surface-color: var(--us-warning-color);
180
274
  --us-surface-opacity: 0.08;
181
275
  }
182
- .us-theme-fci .us-accordion-header--tonal.us-accordion-header--secondary {
183
- --us-accordion-header-color: var(--us-secondary-color);
276
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--danger {
277
+ --us-accordion-header-color: var(--us-danger-color);
184
278
  }
185
- .us-theme-fci .us-accordion-header--tonal.us-accordion-header--secondary > .us-surface {
186
- --us-surface-color: var(--us-secondary-color);
279
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--danger .us-accordion-header > .us-surface {
280
+ --us-surface-color: var(--us-danger-color);
187
281
  --us-surface-opacity: 0.08;
188
282
  }
189
- .us-theme-fci .us-accordion--filled.us-accordion--primary .us-accordion-body {
190
- --us-accordion-body-color: #fff;
283
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--primary {
284
+ --us-accordion-header-color: var(--us-black-color);
191
285
  }
192
- .us-theme-fci .us-accordion--filled.us-accordion--primary .us-accordion-body > .us-surface {
286
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--primary .us-accordion-header > .us-surface {
193
287
  --us-surface-color: var(--us-primary-color);
288
+ --us-surface-opacity: 0.08;
194
289
  }
195
- .us-theme-fci .us-accordion-header--filled.us-accordion-header--primary {
196
- --us-accordion-header-color: var(--us-white-color);
290
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--secondary {
291
+ --us-accordion-header-color: var(--us-black-color);
197
292
  }
198
- .us-theme-fci .us-accordion-header--filled.us-accordion-header--primary > .us-surface {
199
- --us-surface-color: var(--us-primary-color);
293
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--secondary .us-accordion-header > .us-surface {
294
+ --us-surface-color: var(--us-secondary-color);
295
+ --us-surface-opacity: 0.08;
200
296
  }
201
- .us-theme-fci .us-accordion--filled.us-accordion--secondary .us-accordion-body {
202
- --us-accordion-body-color: #fff;
297
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--success {
298
+ --us-accordion-header-color: var(--us-black-color);
203
299
  }
204
- .us-theme-fci .us-accordion--filled.us-accordion--secondary .us-accordion-body > .us-surface {
205
- --us-surface-color: var(--us-secondary-color);
300
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--success .us-accordion-header > .us-surface {
301
+ --us-surface-color: var(--us-success-color);
302
+ --us-surface-opacity: 0.08;
206
303
  }
207
- .us-theme-fci .us-accordion-header--filled.us-accordion-header--secondary {
208
- --us-accordion-header-color: var(--us-white-color);
304
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--info {
305
+ --us-accordion-header-color: var(--us-black-color);
209
306
  }
210
- .us-theme-fci .us-accordion-header--filled.us-accordion-header--secondary > .us-surface {
211
- --us-surface-color: var(--us-secondary-color);
307
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--info .us-accordion-header > .us-surface {
308
+ --us-surface-color: var(--us-info-color);
309
+ --us-surface-opacity: 0.08;
310
+ }
311
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--warning {
312
+ --us-accordion-header-color: var(--us-black-color);
313
+ }
314
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--warning .us-accordion-header > .us-surface {
315
+ --us-surface-color: var(--us-warning-color);
316
+ --us-surface-opacity: 0.08;
317
+ }
318
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--danger {
319
+ --us-accordion-header-color: var(--us-black-color);
320
+ }
321
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--danger .us-accordion-header > .us-surface {
322
+ --us-surface-color: var(--us-danger-color);
323
+ --us-surface-opacity: 0.08;
212
324
  }
213
325
 
214
326
  .us-theme-fci .us-toolbar {
@@ -252,7 +364,7 @@
252
364
  }
253
365
 
254
366
  .us-theme-fci .us-icon {
255
- --us-icon-font-size: 1.5rem;
367
+ --us-icon-font-size-default: 1.5rem;
256
368
  --us-icon-color: inherit;
257
369
  }
258
370
  .us-theme-fci .us-icon--xs {
@@ -314,7 +426,12 @@
314
426
  --us-badge-background: var(--us-secondary-color);
315
427
  }
316
428
  .us-theme-fci .us-badge--secondary {
317
- --us-badge-color: var(--us-black-color);
429
+ --us-badge-color: var(--us-secondary-color);
430
+ --us-badge-background: #fff;
431
+ }
432
+ .us-theme-fci .us-badge--secondary > .us-overlay {
433
+ --us-overlay-color: inherit;
434
+ --us-overlay-opacity: 0.16;
318
435
  }
319
436
  .us-theme-fci .us-badge--success {
320
437
  --us-badge-background: var(--us-success-color);
@@ -333,7 +450,7 @@
333
450
  --us-chip-padding-y: 0.125rem;
334
451
  --us-chip-padding-x: 0.5rem;
335
452
  --us-chip-font-size: 0.75rem;
336
- --us-chip-font-weight: 400;
453
+ --us-chip-font-weight: 500;
337
454
  --us-chip-border-radius: 9999px;
338
455
  }
339
456
  .us-theme-fci .us-chip > .us-overlay {
@@ -400,10 +517,20 @@
400
517
  --us-chip-color: var(--us-white-color);
401
518
  }
402
519
  .us-theme-fci .us-chip--outlined > .us-outline {
520
+ --us-outline-border-width: 1px;
403
521
  --us-outline-border-color: currentColor;
404
522
  }
523
+ .us-theme-fci .us-chip--flat > .us-outline {
524
+ --us-outline-border-width: 1px;
525
+ --us-outline-border-color: transparent;
526
+ }
405
527
  .us-theme-fci .us-chip--flat > .us-overlay {
406
- --us-overlay-opacity: 0.08;
528
+ --us-overlay-color: inherit;
529
+ --us-overlay-opacity: 0.16;
530
+ }
531
+ .us-theme-fci .us-chip--text > .us-outline {
532
+ --us-outline-border-width: 1px;
533
+ --us-outline-border-color: transparent;
407
534
  }
408
535
  .us-theme-fci .us-chip--filled.us-chip--primary {
409
536
  --us-chip-background: var(--us-primary-color);
@@ -429,6 +556,14 @@
429
556
  .us-theme-fci .us-chip--text.us-chip--secondary {
430
557
  --us-chip-color: var(--us-secondary-color);
431
558
  }
559
+ .us-theme-fci .us-chip--filled.us-chip--secondary {
560
+ --us-chip-color: var(--us-secondary-color);
561
+ --us-chip-background: transparent;
562
+ }
563
+ .us-theme-fci .us-chip--filled.us-chip--secondary > .us-overlay {
564
+ --us-overlay-color: inherit;
565
+ --us-overlay-opacity: 0.16;
566
+ }
432
567
  .us-theme-fci .us-chip--filled.us-chip--success {
433
568
  --us-chip-background: var(--us-success-color);
434
569
  }
@@ -441,6 +576,15 @@
441
576
  .us-theme-fci .us-chip--text.us-chip--success {
442
577
  --us-chip-color: var(--us-success-color);
443
578
  }
579
+ .us-theme-fci .us-chip--outlined.us-chip--success {
580
+ --us-chip-color: var(--us-success-dark-color);
581
+ }
582
+ .us-theme-fci .us-chip--flat.us-chip--success {
583
+ --us-chip-color: var(--us-success-dark-color);
584
+ }
585
+ .us-theme-fci .us-chip--text.us-chip--success {
586
+ --us-chip-color: var(--us-success-dark-color);
587
+ }
444
588
  .us-theme-fci .us-chip--filled.us-chip--info {
445
589
  --us-chip-background: var(--us-info-color);
446
590
  }
@@ -453,6 +597,12 @@
453
597
  .us-theme-fci .us-chip--text.us-chip--info {
454
598
  --us-chip-color: var(--us-info-color);
455
599
  }
600
+ .us-theme-fci .us-chip--flat.us-chip--info {
601
+ --us-chip-color: var(--us-info-dark-color);
602
+ }
603
+ .us-theme-fci .us-chip--text.us-chip--info {
604
+ --us-chip-color: var(--us-info-dark-color);
605
+ }
456
606
  .us-theme-fci .us-chip--filled.us-chip--warning {
457
607
  --us-chip-background: var(--us-warning-color);
458
608
  }
@@ -465,6 +615,15 @@
465
615
  .us-theme-fci .us-chip--text.us-chip--warning {
466
616
  --us-chip-color: var(--us-warning-color);
467
617
  }
618
+ .us-theme-fci .us-chip--outlined.us-chip--warning {
619
+ --us-chip-color: var(--us-warning-dark-color);
620
+ }
621
+ .us-theme-fci .us-chip--flat.us-chip--warning {
622
+ --us-chip-color: var(--us-warning-dark-color);
623
+ }
624
+ .us-theme-fci .us-chip--text.us-chip--warning {
625
+ --us-chip-color: var(--us-warning-dark-color);
626
+ }
468
627
  .us-theme-fci .us-chip--filled.us-chip--danger {
469
628
  --us-chip-background: var(--us-danger-color);
470
629
  }
@@ -491,7 +650,7 @@ html {
491
650
  --us-button-divider-color: #fff;
492
651
  }
493
652
  .us-theme-fci .us-button--xs {
494
- --us-button-height: 24px;
653
+ --us-button-height: 22px;
495
654
  --us-button-padding-y: 0;
496
655
  --us-button-padding-x: 0.625rem;
497
656
  --us-button-font-size: 0.75rem;
@@ -499,10 +658,10 @@ html {
499
658
  --us-button-gap: 0.25rem;
500
659
  }
501
660
  .us-theme-fci .us-button--xs .us-icon {
502
- --us-icon-font-size: 0.875rem;
661
+ --us-icon-font-size: 0.75rem;
503
662
  }
504
663
  .us-theme-fci .us-button--sm {
505
- --us-button-height: 28px;
664
+ --us-button-height: 26px;
506
665
  --us-button-padding-y: 0;
507
666
  --us-button-padding-x: 0.75rem;
508
667
  --us-button-font-size: 0.75rem;
@@ -510,39 +669,50 @@ html {
510
669
  --us-button-gap: 0.25rem;
511
670
  }
512
671
  .us-theme-fci .us-button--sm .us-icon {
513
- --us-icon-font-size: 1rem;
672
+ --us-icon-font-size: 0.875rem;
514
673
  }
515
674
  .us-theme-fci .us-button--md {
516
- --us-button-height: 36px;
675
+ --us-button-height: 30px;
517
676
  --us-button-padding-y: 0;
518
- --us-button-padding-x: 1rem;
677
+ --us-button-padding-x: 0.875rem;
519
678
  --us-button-font-size: 0.875rem;
520
- --us-button-border-radius: 8px;
679
+ --us-button-border-radius: 6px;
521
680
  --us-button-gap: 0.375rem;
522
681
  }
523
682
  .us-theme-fci .us-button--md .us-icon {
524
- --us-icon-font-size: 1.125rem;
683
+ --us-icon-font-size: 1rem;
525
684
  }
526
685
  .us-theme-fci .us-button--lg {
527
- --us-button-height: 36px;
686
+ --us-button-height: 34px;
528
687
  --us-button-padding-y: 0;
529
688
  --us-button-padding-x: 1rem;
530
- --us-button-font-size: 1rem;
531
- --us-button-border-radius: 6px;
689
+ --us-button-font-size: 0.875rem;
690
+ --us-button-border-radius: 8px;
532
691
  --us-button-gap: 0.5rem;
533
692
  }
534
693
  .us-theme-fci .us-button--lg .us-icon {
535
- --us-icon-font-size: 1.25rem;
694
+ --us-icon-font-size: 1.125rem;
536
695
  }
537
696
  .us-theme-fci .us-button--xl {
538
- --us-button-height: 40px;
697
+ --us-button-height: 44px;
539
698
  --us-button-padding-y: 0;
540
- --us-button-padding-x: 1.125rem;
541
- --us-button-font-size: 1.125rem;
542
- --us-button-border-radius: 6px;
699
+ --us-button-padding-x: 1.25rem;
700
+ --us-button-font-size: 1rem;
701
+ --us-button-border-radius: 8px;
543
702
  --us-button-gap: 0.5rem;
544
703
  }
545
704
  .us-theme-fci .us-button--xl .us-icon {
705
+ --us-icon-font-size: 1.25rem;
706
+ }
707
+ .us-theme-fci .us-button--2xl {
708
+ --us-button-height: 56px;
709
+ --us-button-padding-y: 0;
710
+ --us-button-padding-x: 1.75rem;
711
+ --us-button-font-size: 1.125rem;
712
+ --us-button-border-radius: 10px;
713
+ --us-button-gap: 0.75rem;
714
+ }
715
+ .us-theme-fci .us-button--2xl .us-icon {
546
716
  --us-icon-font-size: 1.5rem;
547
717
  }
548
718
  .us-theme-fci .us-button--filled {
@@ -568,18 +738,18 @@ html {
568
738
  .us-theme-fci .us-button--outlined > .us-overlay {
569
739
  --us-overlay-color: inherit;
570
740
  --us-overlay-opacity: 0;
571
- --us-_hover-overlay-opacity: 0.12;
741
+ --us-_hover-overlay-opacity: 0.16;
572
742
  --us-_active-overlay-opacity: 0.24;
573
743
  --us-_focus-hover-overlay-opacity: 0.12;
574
744
  --us-_focus-active-overlay-opacity: 0.24;
575
745
  }
576
746
  .us-theme-fci .us-button--outlined > .us-outline {
577
- --us-outline-border-width: 2px;
747
+ --us-outline-border-width: 1px;
578
748
  --us-outline-border-color: currentColor;
579
749
  }
580
750
  .us-theme-fci .us-button--flat > .us-overlay {
581
751
  --us-overlay-color: inherit;
582
- --us-overlay-opacity: 0.12;
752
+ --us-overlay-opacity: 0.16;
583
753
  --us-_hover-overlay-opacity: 0.24;
584
754
  --us-_active-overlay-opacity: 0.32;
585
755
  --us-_focus-hover-overlay-opacity: 0.24;
@@ -592,7 +762,7 @@ html {
592
762
  .us-theme-fci .us-button--text > .us-overlay {
593
763
  --us-overlay-color: inherit;
594
764
  --us-overlay-opacity: 0;
595
- --us-_hover-overlay-opacity: 0.12;
765
+ --us-_hover-overlay-opacity: 0.16;
596
766
  --us-_active-overlay-opacity: 0.24;
597
767
  --us-_focus-hover-overlay-opacity: 0.12;
598
768
  --us-_focus-active-overlay-opacity: 0.24;
@@ -601,17 +771,23 @@ html {
601
771
  --us-outline-border-width: 1px;
602
772
  --us-outline-border-color: transparent;
603
773
  }
604
- .us-theme-fci .us-button--filled.us-button--inherit {
605
- --us-button-background: inherit;
774
+ .us-theme-fci .us-button--xs.us-button--icon-only .us-icon {
775
+ --us-icon-font-size: 0.875rem;
776
+ }
777
+ .us-theme-fci .us-button--sm.us-button--icon-only .us-icon {
778
+ --us-icon-font-size: 1rem;
779
+ }
780
+ .us-theme-fci .us-button--md.us-button--icon-only .us-icon {
781
+ --us-icon-font-size: 1.25rem;
606
782
  }
607
- .us-theme-fci .us-button--outlined.us-button--inherit {
608
- --us-button-color: inherit;
783
+ .us-theme-fci .us-button--lg.us-button--icon-only .us-icon {
784
+ --us-icon-font-size: 1.5rem;
609
785
  }
610
- .us-theme-fci .us-button--flat.us-button--inherit {
611
- --us-button-color: inherit;
786
+ .us-theme-fci .us-button--xl.us-button--icon-only .us-icon {
787
+ --us-icon-font-size: 1.75rem;
612
788
  }
613
- .us-theme-fci .us-button--text.us-button--inherit {
614
- --us-button-color: inherit;
789
+ .us-theme-fci .us-button--2xl.us-button--icon-only .us-icon {
790
+ --us-icon-font-size: 1.875rem;
615
791
  }
616
792
  .us-theme-fci .us-button--filled.us-button--primary {
617
793
  --us-button-background: var(--us-primary-color);
@@ -637,6 +813,18 @@ html {
637
813
  .us-theme-fci .us-button--text.us-button--secondary {
638
814
  --us-button-color: var(--us-secondary-color);
639
815
  }
816
+ .us-theme-fci .us-button--filled.us-button--secondary {
817
+ --us-button-color: var(--us-secondary-color);
818
+ --us-button-background: transparent;
819
+ }
820
+ .us-theme-fci .us-button--filled.us-button--secondary > .us-overlay {
821
+ --us-overlay-color: inherit;
822
+ --us-overlay-opacity: 0.16;
823
+ --us-_hover-overlay-opacity: 0.24;
824
+ --us-_active-overlay-opacity: 0.32;
825
+ --us-_focus-hover-overlay-opacity: 0.24;
826
+ --us-_focus-active-overlay-opacity: 0.32;
827
+ }
640
828
  .us-theme-fci .us-button--filled.us-button--success {
641
829
  --us-button-background: var(--us-success-color);
642
830
  }
@@ -649,6 +837,24 @@ html {
649
837
  .us-theme-fci .us-button--text.us-button--success {
650
838
  --us-button-color: var(--us-success-color);
651
839
  }
840
+ .us-theme-fci .us-button--outlined.us-button--success {
841
+ --us-button-color: var(--us-success-dark-color);
842
+ }
843
+ .us-theme-fci .us-button--outlined.us-button--success > .us-overlay {
844
+ --us-overlay-color: var(--us-success-color);
845
+ }
846
+ .us-theme-fci .us-button--flat.us-button--success {
847
+ --us-button-color: var(--us-success-dark-color);
848
+ }
849
+ .us-theme-fci .us-button--flat.us-button--success > .us-overlay {
850
+ --us-overlay-color: var(--us-success-color);
851
+ }
852
+ .us-theme-fci .us-button--text.us-button--success {
853
+ --us-button-color: var(--us-success-dark-color);
854
+ }
855
+ .us-theme-fci .us-button--text.us-button--success > .us-overlay {
856
+ --us-overlay-color: var(--us-success-color);
857
+ }
652
858
  .us-theme-fci .us-button--filled.us-button--info {
653
859
  --us-button-background: var(--us-info-color);
654
860
  }
@@ -661,6 +867,18 @@ html {
661
867
  .us-theme-fci .us-button--text.us-button--info {
662
868
  --us-button-color: var(--us-info-color);
663
869
  }
870
+ .us-theme-fci .us-button--flat.us-button--info {
871
+ --us-button-color: var(--us-info-dark-color);
872
+ }
873
+ .us-theme-fci .us-button--flat.us-button--info > .us-overlay {
874
+ --us-overlay-color: var(--us-info-color);
875
+ }
876
+ .us-theme-fci .us-button--text.us-button--info {
877
+ --us-button-color: var(--us-info-dark-color);
878
+ }
879
+ .us-theme-fci .us-button--text.us-button--info > .us-overlay {
880
+ --us-overlay-color: var(--us-info-color);
881
+ }
664
882
  .us-theme-fci .us-button--filled.us-button--warning {
665
883
  --us-button-background: var(--us-warning-color);
666
884
  }
@@ -673,6 +891,24 @@ html {
673
891
  .us-theme-fci .us-button--text.us-button--warning {
674
892
  --us-button-color: var(--us-warning-color);
675
893
  }
894
+ .us-theme-fci .us-button--outlined.us-button--warning {
895
+ --us-button-color: var(--us-warning-dark-color);
896
+ }
897
+ .us-theme-fci .us-button--outlined.us-button--warning > .us-overlay {
898
+ --us-overlay-color: var(--us-warning-color);
899
+ }
900
+ .us-theme-fci .us-button--flat.us-button--warning {
901
+ --us-button-color: var(--us-warning-dark-color);
902
+ }
903
+ .us-theme-fci .us-button--flat.us-button--warning > .us-overlay {
904
+ --us-overlay-color: var(--us-warning-color);
905
+ }
906
+ .us-theme-fci .us-button--text.us-button--warning {
907
+ --us-button-color: var(--us-warning-dark-color);
908
+ }
909
+ .us-theme-fci .us-button--text.us-button--warning > .us-overlay {
910
+ --us-overlay-color: var(--us-warning-color);
911
+ }
676
912
  .us-theme-fci .us-button--filled.us-button--danger {
677
913
  --us-button-background: var(--us-danger-color);
678
914
  }
@@ -788,35 +1024,37 @@ html {
788
1024
  .us-theme-fci .us-input {
789
1025
  --us-input-font-family: var(--us-font-sans);
790
1026
  --us-input-border-radius: 6px;
791
- --us-input-gap: 0.5rem;
792
- --us-input-icon-size: 1.125rem;
793
1027
  }
794
1028
  .us-theme-fci .us-input--xs {
795
- --us-input-height: 24px;
1029
+ --us-input-height: 22px;
796
1030
  --us-input-padding-y: 0.282rem;
797
1031
  --us-input-padding-x: 0.625rem;
798
1032
  --us-input-font-size: 0.75rem;
799
1033
  }
800
1034
  .us-theme-fci .us-input--sm {
801
- --us-input-height: 28px;
1035
+ --us-input-height: 24px;
802
1036
  --us-input-padding-y: 0.407rem;
803
1037
  --us-input-padding-x: 0.75rem;
804
1038
  --us-input-font-size: 0.75rem;
805
1039
  }
806
1040
  .us-theme-fci .us-input--md {
807
- --us-input-height: 32px;
1041
+ --us-input-height: 30px;
808
1042
  --us-input-padding-y: 0.532rem;
809
1043
  --us-input-padding-x: 0.875rem;
810
1044
  --us-input-font-size: 0.75rem;
1045
+ --us-input-content-gap: 0.25rem;
1046
+ }
1047
+ .us-theme-fci .us-input--md .us-icon:not(.us-button .us-icon) {
1048
+ --us-icon-font-size-default: 16px;
811
1049
  }
812
1050
  .us-theme-fci .us-input--lg {
813
- --us-input-height: 36px;
1051
+ --us-input-height: 34px;
814
1052
  --us-input-padding-y: 0.625rem;
815
1053
  --us-input-padding-x: 1rem;
816
1054
  --us-input-font-size: 0.85rem;
817
1055
  }
818
1056
  .us-theme-fci .us-input--xl {
819
- --us-input-height: 40px;
1057
+ --us-input-height: 44px;
820
1058
  --us-input-padding-y: 0.75rem;
821
1059
  --us-input-padding-x: 1.125rem;
822
1060
  --us-input-font-size: 0.85rem;
@@ -1263,7 +1501,7 @@ html {
1263
1501
  .us-theme-fci .us-tabs--underlined .us-tab {
1264
1502
  --us-tab-indicator-color: var(--us-primary-action-color);
1265
1503
  --us-tab-indicator-height: 3px;
1266
- --us-tab-indicator-border-radius: 3px 3px 0px 0px;
1504
+ --us-tab-indicator-border-radius: 3px;
1267
1505
  --us-tab-border-radius: 0px;
1268
1506
  }
1269
1507
  .us-theme-fci .us-tabs--underlined .us-tab > .us-overlay {
@@ -1275,6 +1513,79 @@ html {
1275
1513
  .us-theme-fci .us-tabs--underlined .us-tab--selected {
1276
1514
  --us-tab-color: var(--us-primary-action-color);
1277
1515
  }
1516
+ .us-theme-fci .us-tabs--underlined .us-tab {
1517
+ --us-tab-indicator-color: var(--us-primary-action-color);
1518
+ --us-tab-indicator-height: 3px;
1519
+ --us-tab-indicator-border-radius: 3px;
1520
+ --us-tab-border-radius: 0px;
1521
+ }
1522
+ .us-theme-fci .us-tabs--underlined .us-tab > .us-surface {
1523
+ --us-surface-opacity: 0;
1524
+ }
1525
+ .us-theme-fci .us-tabs--underlined .us-tab > .us-overlay {
1526
+ --us-overlay-opacity: 0;
1527
+ --us-overlay-color: inherit;
1528
+ --us-_hover-overlay-opacity: 0.08;
1529
+ --us-_active-overlay-opacity: 0.12;
1530
+ }
1531
+ .us-theme-fci .us-tabs--underlined .us-tab--selected .us-theme-fci .us-tabs--underlined .us-tab__indicator {
1532
+ --us-tab-color: var(--us-primary-action-color);
1533
+ }
1534
+ .us-theme-fci .us-tabs--underlined .us-tab__indicator > .us-surface {
1535
+ --us-surface-opacity: 0;
1536
+ --us-surface-transition: none;
1537
+ }
1538
+ .us-theme-fci .us-tabs--underlined .us-tab__indicator > .us-overlay {
1539
+ --us-overlay-opacity: 0;
1540
+ --us-overlay-transition: none;
1541
+ }
1542
+ .us-theme-fci .us-tabs--underlined .us-tab--selected .us-tab__indicator > .us-surface {
1543
+ --us-surface-opacity: 1;
1544
+ }
1545
+ .us-theme-fci .us-tabs--underlined .us-tab--selected .us-tab__indicator > .us-overlay {
1546
+ --us-overlay-opacity: 0;
1547
+ }
1548
+ .us-theme-fci .us-tabs--pills {
1549
+ --us-tab-indicator-color: var(--us-primary-action-color);
1550
+ --us-tab-indicator-height: 3px;
1551
+ --us-tab-indicator-border-radius: 3px 3px 0px 0px;
1552
+ }
1553
+ .us-theme-fci .us-tabs--pills .us-tab {
1554
+ --us-tab-indicator-height: 100%;
1555
+ --us-tab-indicator-border-radius: 9999px;
1556
+ --us-tab-border-radius: 9999px;
1557
+ }
1558
+ .us-theme-fci .us-tabs--pills .us-tab > .us-surface {
1559
+ --us-surface-opacity: 0;
1560
+ }
1561
+ .us-theme-fci .us-tabs--pills .us-tab > .us-overlay {
1562
+ --us-overlay-opacity: 0;
1563
+ --us-overlay-color: inherit;
1564
+ --us-_hover-overlay-opacity: 0.08;
1565
+ --us-_active-overlay-opacity: 0.12;
1566
+ }
1567
+ .us-theme-fci .us-tabs--pills .us-tab--selected {
1568
+ --us-tab-color: var(--us-primary-action-color);
1569
+ }
1570
+ .us-theme-fci .us-tabs--pills .us-tab__indicator > .us-surface {
1571
+ --us-surface-opacity: 0;
1572
+ --us-surface-transition: none;
1573
+ }
1574
+ .us-theme-fci .us-tabs--pills .us-tab__indicator > .us-overlay {
1575
+ --us-overlay-opacity: 0;
1576
+ --us-overlay-color: inherit;
1577
+ --us-_hover-overlay-opacity: 0.08;
1578
+ --us-_active-overlay-opacity: 0.12;
1579
+ }
1580
+ .us-theme-fci .us-tabs--pills .us-tab--selected .us-tab__indicator > .us-surface {
1581
+ --us-surface-opacity: 0.12;
1582
+ }
1583
+ .us-theme-fci .us-tabs--pills .us-tab--selected .us-tab__indicator > .us-overlay {
1584
+ --us-overlay-opacity: 0;
1585
+ --us-overlay-color: inherit;
1586
+ --us-_hover-overlay-opacity: 0.08;
1587
+ --us-_active-overlay-opacity: 0.12;
1588
+ }
1278
1589
  .us-theme-fci .us-tab {
1279
1590
  --us-tab-color: var(--us-secondary-action-color);
1280
1591
  --us-tab-padding-y: 0px;
@@ -1285,12 +1596,23 @@ html {
1285
1596
  }
1286
1597
 
1287
1598
  .us-theme-fci .us-card {
1288
- --us-card-border-width: 0px;
1599
+ --us-card-border-width: 1px;
1289
1600
  --us-card-border-style: solid;
1290
1601
  --us-card-border-color: var(--us-border-color);
1291
- --us-card-border-radius: 10px;
1602
+ --us-card-border-radius: 8px;
1292
1603
  --us-card-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(51, 65, 85, 0.1) 0px 0px 0px 1px,
1293
1604
  rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
1605
+ --us-card-title-font-weight: 700;
1606
+ --us-card-subtitle-font-weight: 400;
1607
+ --us-card-header-title-font-weight: 500;
1608
+ --us-card-header-title-color: var(--us-title-color);
1609
+ --us-card-header-subtitle-font-weight: 400;
1610
+ --us-card-header-subtitle-color: var(--us-subtitle-color);
1611
+ --us-card-body-color: var(--us-body-color);
1612
+ }
1613
+ .us-theme-fci .us-card > .us-surface {
1614
+ --us-surface-color: var(--us-white-color);
1615
+ --us-surface-opacity: 1;
1294
1616
  }
1295
1617
  .us-theme-fci .us-card > .us-overlay {
1296
1618
  --us-overlay-color: inherit;
@@ -1308,118 +1630,184 @@ html {
1308
1630
  --us-_hover-overlay-opacity: 0.12;
1309
1631
  --us-_active-overlay-opacity: 0.16;
1310
1632
  }
1311
- .us-theme-fci .us-card-header {
1312
- --us-card-header-border-color: var(--us-card-border-color);
1633
+ .us-theme-fci .us-card--xs {
1634
+ --us-card-header-padding-y: 0.375rem;
1635
+ --us-card-header-padding-x: 0.75rem;
1636
+ --us-card-header-min-height: 1.75rem;
1637
+ --us-card-header-gap: 0.5rem;
1638
+ --us-card-header-content-gap: 0.25rem;
1639
+ --us-card-header-title-font-size: 11px;
1313
1640
  --us-card-header-title-font-weight: 500;
1314
- --us-card-header-title-color: var(--us-title-color);
1315
- --us-card-header-subtitle-font-weight: 400;
1316
- --us-card-header-subtitle-color: var(--us-subtitle-color);
1317
- }
1318
- .us-theme-fci .us-card-body {
1319
- --us-card-body-color: var(--us-body-color);
1320
- }
1321
- .us-theme-fci .us-card-footer {
1322
- --us-card-footer-min-height: 48px;
1323
- --us-card-footer-padding-y: 0.5rem;
1324
- --us-card-footer-padding-x: 1rem;
1325
- --us-card-footer-border-color: rgba(9, 30, 66, 0.14);
1326
- }
1327
- .us-theme-fci .us-card--xs .us-card-header {
1328
- --us-card-header-min-height: 36px;
1329
- --us-card-header-padding-y: 0.685rem;
1330
- --us-card-header-padding-x: 1rem;
1331
- --us-card-header-padding-level: 1.25rem;
1332
- --us-card-header-font-size: 12px;
1333
- --us-card-header-gap: 1rem;
1334
- --us-card-header-title-font-size: 12px;
1335
- --us-card-header-title-line-height: 18px;
1336
- --us-card-header-subtitle-font-size: 11px;
1641
+ --us-card-header-title-line-height: 14px;
1642
+ --us-card-header-subtitle-font-size: 10px;
1643
+ --us-card-header-subtitle-font-weight: 500;
1337
1644
  --us-card-header-subtitle-line-height: 14px;
1338
- }
1339
- .us-theme-fci .us-card--xs .us-card-body {
1340
- --us-card-body-padding-y: 1rem;
1341
- --us-card-body-padding-x: 1rem;
1645
+ --us-card-body-padding-y: 0.375rem;
1646
+ --us-card-body-padding-x: 0.75rem;
1342
1647
  --us-card-body-font-size: 0.75rem;
1343
1648
  --us-card-body-line-height: 18px;
1344
- --us-card-body-color: var(--us-body-color);
1345
- }
1346
- .us-theme-fci .us-card--sm .us-card-header {
1347
- --us-card-header-min-height: 48px;
1348
- --us-card-header-padding-y: 0.625rem;
1649
+ --us-card-footer-padding-y: 0.375rem;
1650
+ --us-card-footer-padding-x: 0.75rem;
1651
+ --us-card-footer-min-height: 1.75rem;
1652
+ --us-card-footer-gap: 0.5rem;
1653
+ }
1654
+ .us-theme-fci .us-card--xs .us-card-header .us-icon:not(.us-button .us-icon) {
1655
+ --us-icon-font-size-default: 16px;
1656
+ }
1657
+ .us-theme-fci .us-card--sm {
1658
+ --us-card-title-padding-y: 0.875rem 0.375rem;
1659
+ --us-card-title-font-size: 1.25rem;
1660
+ --us-card-header-padding-y: 0.375rem;
1349
1661
  --us-card-header-padding-x: 1rem;
1350
- --us-card-header-padding-level: 1.25rem;
1351
- --us-card-header-gap: 1rem;
1352
- --us-card-header-title-font-size: 0.875rem;
1353
- --us-card-header-title-line-height: 20px;
1354
- --us-card-header-subtitle-font-size: 0.75rem;
1662
+ --us-card-header-min-height: 2rem;
1663
+ --us-card-header-gap: 0.75rem;
1664
+ --us-card-header-content-gap: 0.5rem;
1665
+ --us-card-header-title-font-size: 12px;
1666
+ --us-card-header-title-font-weight: 500;
1667
+ --us-card-header-title-line-height: 16px;
1668
+ --us-card-header-subtitle-font-size: 11px;
1669
+ --us-card-header-subtitle-font-weight: 500;
1355
1670
  --us-card-header-subtitle-line-height: 16px;
1356
- }
1357
- .us-theme-fci .us-card--sm .us-card-body {
1358
- --us-card-body-padding-y: 1.25rem;
1671
+ --us-card-body-padding-y: 0.375rem;
1359
1672
  --us-card-body-padding-x: 1rem;
1360
1673
  --us-card-body-font-size: 0.875rem;
1361
1674
  --us-card-body-line-height: 20px;
1362
- --us-card-body-color: var(--us-body-color);
1675
+ --us-card-footer-padding-y: 0.375rem;
1676
+ --us-card-footer-padding-x: 1rem;
1677
+ --us-card-footer-min-height: 2rem;
1678
+ --us-card-footer-gap: 0.75rem;
1363
1679
  }
1364
- .us-theme-fci .us-card--md .us-card-header {
1365
- --us-card-header-min-height: 56px;
1366
- --us-card-header-padding-y: 0.625rem;
1680
+ .us-theme-fci .us-card--sm .us-card-header .us-icon:not(.us-button .us-icon) {
1681
+ --us-icon-font-size-default: 20px;
1682
+ }
1683
+ .us-theme-fci .us-card--md {
1684
+ --us-card-title-padding-y: 1rem 0.5rem;
1685
+ --us-card-title-font-size: 1.25rem;
1686
+ --us-card-header-min-height: 2rem;
1687
+ --us-card-header-padding-y: 0.5rem;
1367
1688
  --us-card-header-padding-x: 1rem;
1368
- --us-card-header-padding-level: 1.25rem;
1369
- --us-card-header-font-size: 0.75rem;
1370
- --us-card-header-gap: 1rem;
1371
- --us-card-header-title-font-size: 1rem;
1372
- --us-card-header-title-line-height: 24px;
1373
- --us-card-header-subtitle-font-size: 0.8125rem;
1374
- --us-card-header-subtitle-line-height: 18px;
1689
+ --us-card-header-gap: 0.75rem;
1690
+ --us-card-header-content-gap: 0.5rem;
1691
+ --us-card-header-title-font-size: 13px;
1692
+ --us-card-header-title-line-height: 16px;
1693
+ --us-card-header-subtitle-font-size: 12px;
1694
+ --us-card-header-subtitle-line-height: 16px;
1695
+ --us-card-body-padding-y: 0.5rem;
1696
+ --us-card-body-padding-x: 1rem;
1697
+ --us-card-body-font-size: 0.875rem;
1698
+ --us-card-body-line-height: 24px;
1699
+ --us-card-footer-padding-y: 0.5rem;
1700
+ --us-card-footer-padding-x: 1rem;
1701
+ --us-card-footer-min-height: 2rem;
1702
+ --us-card-footer-gap: 1rem;
1375
1703
  }
1376
1704
  .us-theme-fci .us-card--md .us-card-header .us-icon:not(.us-button .us-icon) {
1377
1705
  --us-icon-font-size-default: 24px;
1378
1706
  }
1379
- .us-theme-fci .us-card--md .us-card-body {
1380
- --us-card-body-padding-y: 1.5rem;
1381
- --us-card-body-padding-x: 1rem;
1382
- --us-card-body-font-size: 1rem;
1383
- --us-card-body-line-height: 24px;
1384
- --us-card-body-color: var(--us-body-color);
1385
- }
1386
- .us-theme-fci .us-card--lg .us-card-header {
1387
- --us-card-header-min-height: 64px;
1707
+ .us-theme-fci .us-card--lg {
1708
+ --us-card-title-padding-y: 1.25rem 0.75rem;
1709
+ --us-card-title-font-size: 1.5rem;
1388
1710
  --us-card-header-padding-y: 0.625rem;
1389
- --us-card-header-padding-x: 1rem;
1390
- --us-card-header-padding-level: 1.25rem;
1391
- --us-card-header-font-size: 0.75rem;
1711
+ --us-card-header-padding-x: 1.25rem;
1712
+ --us-card-header-min-height: 2.25rem;
1392
1713
  --us-card-header-gap: 1rem;
1393
- --us-card-header-title-font-size: 0.875rem;
1394
- --us-card-header-title-line-height: 24px;
1395
- --us-card-header-subtitle-font-size: 1rem;
1714
+ --us-card-header-content-gap: 0.75rem;
1715
+ --us-card-header-title-font-size: 14px;
1716
+ --us-card-header-title-line-height: 18px;
1717
+ --us-card-header-subtitle-font-size: 13px;
1396
1718
  --us-card-header-subtitle-line-height: 18px;
1397
- }
1398
- .us-theme-fci .us-card--lg .us-card-body {
1399
- --us-card-body-padding-y: 1.5rem;
1400
- --us-card-body-padding-x: 1rem;
1719
+ --us-card-body-padding-y: 0.625rem;
1720
+ --us-card-body-padding-x: 1.25rem;
1401
1721
  --us-card-body-font-size: 1rem;
1402
1722
  --us-card-body-line-height: 24px;
1403
- --us-card-body-color: var(--us-body-color);
1404
- }
1405
- .us-theme-fci .us-card--xl .us-card-header {
1406
- --us-card-header-min-height: 72px;
1407
- --us-card-header-padding-y: 0.625rem;
1408
- --us-card-header-padding-x: 1rem;
1409
- --us-card-header-padding-level: 1.25rem;
1410
- --us-card-header-font-size: 0.75rem;
1723
+ --us-card-footer-padding-y: 0.625rem;
1724
+ --us-card-footer-padding-x: 1.25rem;
1725
+ --us-card-footer-min-height: 2.25rem;
1726
+ --us-card-footer-gap: 1rem;
1727
+ }
1728
+ .us-theme-fci .us-card--lg .us-card-header .us-icon:not(.us-button .us-icon) {
1729
+ --us-icon-font-size-default: 28px;
1730
+ }
1731
+ .us-theme-fci .us-card--xl {
1732
+ --us-card-header-padding-y: 0.75rem;
1733
+ --us-card-header-padding-x: 1.5rem;
1734
+ --us-card-header-min-height: 2.5rem;
1735
+ --us-card-header-gap: 1rem;
1736
+ --us-card-header-content-gap: 0.875rem;
1737
+ --us-card-header-title-font-size: 16px;
1738
+ --us-card-header-title-line-height: 20px;
1739
+ --us-card-header-subtitle-font-size: 15px;
1740
+ --us-card-header-subtitle-line-height: 20px;
1741
+ --us-card-body-padding-y: 0.75rem;
1742
+ --us-card-body-padding-x: 1.5rem;
1743
+ --us-card-body-font-size: 1.125rem;
1744
+ --us-card-body-line-height: 28px;
1745
+ --us-card-footer-padding-y: 0.75rem;
1746
+ --us-card-footer-padding-x: 1.5rem;
1747
+ --us-card-footer-min-height: 2.5rem;
1748
+ --us-card-footer-gap: 1rem;
1749
+ }
1750
+ .us-theme-fci .us-card--xl .us-card-header .us-icon:not(.us-button .us-icon) {
1751
+ --us-icon-font-size-default: 36px;
1752
+ }
1753
+ .us-theme-fci .us-card--2xl {
1754
+ --us-card-header-padding-y: 0.75rem;
1755
+ --us-card-header-padding-x: 1.5rem;
1756
+ --us-card-header-min-height: 3rem;
1411
1757
  --us-card-header-gap: 1rem;
1412
- --us-card-header-title-font-size: 1rem;
1758
+ --us-card-header-content-gap: 1rem;
1759
+ --us-card-header-title-font-size: 18px;
1413
1760
  --us-card-header-title-line-height: 24px;
1414
- --us-card-header-subtitle-font-size: 0.8125rem;
1415
- --us-card-header-subtitle-line-height: 18px;
1761
+ --us-card-header-subtitle-font-size: 16px;
1762
+ --us-card-header-subtitle-line-height: 24px;
1763
+ --us-card-body-padding-y: 0.75rem;
1764
+ --us-card-body-padding-x: 1.5rem;
1765
+ --us-card-body-font-size: 1.25rem;
1766
+ --us-card-body-line-height: 36px;
1767
+ --us-card-footer-padding-y: 0.75rem;
1768
+ --us-card-footer-padding-x: 1.5rem;
1769
+ --us-card-footer-min-height: 2.5rem;
1770
+ --us-card-footer-gap: 1rem;
1771
+ }
1772
+ .us-theme-fci .us-card--2xl .us-card-header .us-icon:not(.us-button .us-icon) {
1773
+ --us-icon-font-size-default: 40px;
1416
1774
  }
1417
- .us-theme-fci .us-card--xl .us-card-body {
1418
- --us-card-body-padding-y: 1.5rem;
1419
- --us-card-body-padding-x: 1rem;
1420
- --us-card-body-font-size: 1rem;
1421
- --us-card-body-line-height: 24px;
1422
- --us-card-body-color: var(--us-body-color);
1775
+
1776
+ .us-theme-fci .us-description > .us-surface {
1777
+ --us-surface-opacity: 0;
1778
+ }
1779
+ .us-theme-fci .us-description > .us-overlay {
1780
+ --us-overlay-opacity: 0;
1781
+ --us-_hover-overlay-opacity: 0.08;
1782
+ --us-_active-overlay-opacity: 0.12;
1783
+ }
1784
+ .us-theme-fci .us-descriptions {
1785
+ --us-description-label-color: var(--us-secondary-action-color);
1786
+ --us-description-text-color: var(--us-primary-color);
1787
+ }
1788
+ .us-theme-fci .us-descriptions--sm {
1789
+ --us-description-padding-y: 0.5rem;
1790
+ --us-description-padding-x: 0.75rem;
1791
+ --us-description-gap-y: 0.5rem;
1792
+ --us-description-gap-x: 0.75rem;
1793
+ --us-description-label-font-size: 12px;
1794
+ --us-description-text-font-size: 12px;
1795
+ }
1796
+ .us-theme-fci .us-descriptions--md {
1797
+ --us-description-padding-y: 0.5rem;
1798
+ --us-description-padding-x: 1rem;
1799
+ --us-description-gap-y: 0.5rem;
1800
+ --us-description-gap-x: 1rem;
1801
+ --us-description-label-font-size: 13px;
1802
+ --us-description-text-font-size: 13px;
1803
+ }
1804
+ .us-theme-fci .us-descriptions--lg {
1805
+ --us-description-padding-y: 0.75rem;
1806
+ --us-description-padding-x: 1.25rem;
1807
+ --us-description-gap-y: 0.75rem;
1808
+ --us-description-gap-x: 1.25rem;
1809
+ --us-description-label-font-size: 14px;
1810
+ --us-description-text-font-size: 14px;
1423
1811
  }
1424
1812
 
1425
1813
  .us-theme-fci .us-result--sm {
@@ -1561,11 +1949,14 @@ html {
1561
1949
  .us-theme-fci {
1562
1950
  --us-primary-rgb: 153 0 0;
1563
1951
  --us-primary-color: hsl(0, 100%, 30%);
1564
- --us-secondary-color: hsl(217, 33%, 17%);
1565
- --us-success-color: hsl(150, 100%, 30%);
1566
- --us-info-color: rgb(120, 40, 200);
1567
- --us-warning-color: rgb(245, 165, 36);
1568
- --us-danger-color: rgb(243, 18, 18);
1952
+ --us-secondary-color: #0f172a;
1953
+ --us-success-color: #16a34a;
1954
+ --us-success-dark-color: #15803d;
1955
+ --us-info-color: #7c3aed;
1956
+ --us-info-dark-color: #5b21b6;
1957
+ --us-warning-color: #f89406;
1958
+ --us-warning-dark-color: #ae6704;
1959
+ --us-danger-color: #dc2626;
1569
1960
  --us-black-color: #000;
1570
1961
  --us-white-color: #fff;
1571
1962
  --us-border-color: rgba(0, 0, 0, 0.12);
@@ -1578,6 +1969,15 @@ html {
1578
1969
  Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1579
1970
  --us-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
1580
1971
  Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1972
+ --us-fs-xs: 0.75rem;
1973
+ --us-fs-sm: 0.875rem;
1974
+ --us-fs-md: 1rem;
1975
+ --us-fs-lg: 1.125rem;
1976
+ --us-fs-xl: 1.25rem;
1977
+ --us-fs-2xl: 1.5rem;
1978
+ --us-fs-3xl: 1.75rem;
1979
+ --us-fs-4xl: 2rem;
1980
+ --us-fs-5xl: 2.5rem;
1581
1981
  --us-shadow-none: none;
1582
1982
  --us-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1583
1983
  --us-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);