@unifiedsoftware/styles 2.0.0-alpha.3 → 2.0.0-alpha.5

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 (16) hide show
  1. package/css/fci.css +308 -118
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +1296 -192
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +103 -6
  7. package/scss/components/_accordion.scss +19 -20
  8. package/scss/components/_card.scss +6 -5
  9. package/scss/components/_descriptions.scss +35 -10
  10. package/scss/themes/fci/_tokens.scss +10 -0
  11. package/scss/themes/fci/components/_accordion.scss +81 -131
  12. package/scss/themes/fci/components/_button.scss +2 -12
  13. package/scss/themes/fci/components/_card.scss +31 -31
  14. package/scss/themes/fci/components/_chip.scss +56 -19
  15. package/scss/themes/fci/components/_descriptions.scss +47 -0
  16. package/scss/themes/fci/components/_index.scss +1 -0
package/css/fci.css CHANGED
@@ -1,13 +1,26 @@
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;
9
13
  }
10
- .us-theme-fci .us-accordion--xs .us-accordion-header {
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;
22
+ }
23
+ .us-theme-fci .us-accordion--xs {
11
24
  --us-accordion-header-min-height: 36px;
12
25
  --us-accordion-header-padding-y: 0.685rem;
13
26
  --us-accordion-header-padding-x: 1rem;
@@ -18,14 +31,12 @@
18
31
  --us-accordion-header-title-line-height: 18px;
19
32
  --us-accordion-header-subtitle-font-size: 11px;
20
33
  --us-accordion-header-title-line-height: 14px;
21
- }
22
- .us-theme-fci .us-accordion--xs .us-accordion-body {
23
34
  --us-accordion-body-padding-y: 1rem;
24
35
  --us-accordion-body-padding-x: 1rem;
25
36
  --us-accordion-body-font-size: 0.75rem;
26
37
  --us-accordion-body-line-height: 18px;
27
38
  }
28
- .us-theme-fci .us-accordion--sm .us-accordion-header {
39
+ .us-theme-fci .us-accordion--sm {
29
40
  --us-accordion-header-min-height: 48px;
30
41
  --us-accordion-header-padding-y: 0.625rem;
31
42
  --us-accordion-header-padding-x: 1rem;
@@ -35,8 +46,6 @@
35
46
  --us-accordion-header-title-line-height: 20px;
36
47
  --us-accordion-header-subtitle-font-size: 0.75rem;
37
48
  --us-accordion-header-subtitle-line-height: 16px;
38
- }
39
- .us-theme-fci .us-accordion--sm .us-accordion-body {
40
49
  --us-accordion-body-padding-y: 1.25rem;
41
50
  --us-accordion-body-padding-x: 1rem;
42
51
  --us-accordion-body-font-size: 0.875rem;
@@ -44,8 +53,6 @@
44
53
  }
45
54
  .us-theme-fci .us-accordion--md {
46
55
  --us-accordion-splitted-gap: 0.5rem;
47
- }
48
- .us-theme-fci .us-accordion--md .us-accordion-header {
49
56
  --us-accordion-header-min-height: 56px;
50
57
  --us-accordion-header-padding-y: 0.625rem;
51
58
  --us-accordion-header-padding-x: 1rem;
@@ -57,17 +64,15 @@
57
64
  --us-accordion-header-title-line-height: 24px;
58
65
  --us-accordion-header-subtitle-font-size: 0.8125rem;
59
66
  --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
67
  --us-accordion-body-padding-y: 1.5rem;
66
68
  --us-accordion-body-padding-x: 1rem;
67
69
  --us-accordion-body-font-size: 1rem;
68
70
  --us-accordion-body-line-height: 24px;
69
71
  }
70
- .us-theme-fci .us-accordion--lg .us-accordion-header {
72
+ .us-theme-fci .us-accordion--md .us-accordion-header .us-icon:not(.us-button .us-icon) {
73
+ --us-icon-font-size-default: 24px;
74
+ }
75
+ .us-theme-fci .us-accordion--lg {
71
76
  --us-accordion-header-min-height: 64px;
72
77
  --us-accordion-header-padding-y: 0.625rem;
73
78
  --us-accordion-header-padding-x: 1rem;
@@ -78,14 +83,12 @@
78
83
  --us-accordion-header-title-line-height: 24px;
79
84
  --us-accordion-header-subtitle-font-size: 0.8125rem;
80
85
  --us-accordion-header-subtitle-line-height: 18px;
81
- }
82
- .us-theme-fci .us-accordion--lg .us-accordion-body {
83
86
  --us-accordion-body-padding-y: 1.5rem;
84
87
  --us-accordion-body-padding-x: 1rem;
85
88
  --us-accordion-body-font-size: 1rem;
86
89
  --us-accordion-body-line-height: 24px;
87
90
  }
88
- .us-theme-fci .us-accordion--xl .us-accordion-header {
91
+ .us-theme-fci .us-accordion--xl {
89
92
  --us-accordion-header-min-height: 3.5rem;
90
93
  --us-accordion-header-padding-y: 0.625rem;
91
94
  --us-accordion-header-padding-x: 1rem;
@@ -96,119 +99,224 @@
96
99
  --us-accordion-header-title-line-height: 24px;
97
100
  --us-accordion-header-subtitle-font-size: 0.8125rem;
98
101
  --us-accordion-header-subtitle-line-height: 18px;
99
- }
100
- .us-theme-fci .us-accordion--xl .us-accordion-body {
101
102
  --us-accordion-body-padding-y: 1.5rem;
102
103
  --us-accordion-body-padding-x: 1rem;
103
104
  --us-accordion-body-font-size: 1rem;
104
105
  --us-accordion-body-line-height: 24px;
105
106
  }
107
+ .us-theme-fci .us-accordion-item > .us-outline {
108
+ --us-outline-border-width: 0px;
109
+ --us-outline-z-index: 1;
110
+ }
106
111
  .us-theme-fci .us-accordion-item--selected {
107
112
  --us-accordion-header-title-font-weight: 700;
108
113
  }
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 {
114
+ .us-theme-fci .us-accordion-body > .us-surface {
113
115
  --us-surface-color: var(--us-white-color);
114
116
  }
115
- .us-theme-fci .us-accordion-header--plain.us-accordion-header--primary {
117
+ .us-theme-fci .us-accordion--primary > .us-outline {
118
+ --us-outline-border-color: var(--us-primary-color);
119
+ --us-outline-opacity: 0.2;
120
+ }
121
+ .us-theme-fci .us-accordion-item--primary > .us-outline {
122
+ --us-outline-border-color: var(--us-primary-color);
123
+ --us-outline-opacity: 0.2;
124
+ }
125
+ .us-theme-fci .us-accordion--secondary > .us-outline {
126
+ --us-outline-border-color: var(--us-secondary-color);
127
+ --us-outline-opacity: 0.2;
128
+ }
129
+ .us-theme-fci .us-accordion-item--secondary > .us-outline {
130
+ --us-outline-border-color: var(--us-secondary-color);
131
+ --us-outline-opacity: 0.2;
132
+ }
133
+ .us-theme-fci .us-accordion--success > .us-outline {
134
+ --us-outline-border-color: var(--us-success-color);
135
+ --us-outline-opacity: 0.2;
136
+ }
137
+ .us-theme-fci .us-accordion-item--success > .us-outline {
138
+ --us-outline-border-color: var(--us-success-color);
139
+ --us-outline-opacity: 0.2;
140
+ }
141
+ .us-theme-fci .us-accordion--info > .us-outline {
142
+ --us-outline-border-color: var(--us-info-color);
143
+ --us-outline-opacity: 0.2;
144
+ }
145
+ .us-theme-fci .us-accordion-item--info > .us-outline {
146
+ --us-outline-border-color: var(--us-info-color);
147
+ --us-outline-opacity: 0.2;
148
+ }
149
+ .us-theme-fci .us-accordion--warning > .us-outline {
150
+ --us-outline-border-color: var(--us-warning-color);
151
+ --us-outline-opacity: 0.2;
152
+ }
153
+ .us-theme-fci .us-accordion-item--warning > .us-outline {
154
+ --us-outline-border-color: var(--us-warning-color);
155
+ --us-outline-opacity: 0.2;
156
+ }
157
+ .us-theme-fci .us-accordion--danger > .us-outline {
158
+ --us-outline-border-color: var(--us-danger-color);
159
+ --us-outline-opacity: 0.2;
160
+ }
161
+ .us-theme-fci .us-accordion-item--danger > .us-outline {
162
+ --us-outline-border-color: var(--us-danger-color);
163
+ --us-outline-opacity: 0.2;
164
+ }
165
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--primary {
116
166
  --us-accordion-header-color: var(--us-primary-color);
117
167
  }
118
- .us-theme-fci .us-accordion-header--plain.us-accordion-header--primary > .us-surface {
168
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--primary .us-accordion-header > .us-surface {
119
169
  --us-surface-color: var(--us-white-color);
120
170
  }
121
- .us-theme-fci .us-accordion--plain.us-accordion--secondary .us-accordion-body {
122
- --us-accordion-body-color: inherit;
171
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--secondary {
172
+ --us-accordion-header-color: var(--us-secondary-color);
123
173
  }
124
- .us-theme-fci .us-accordion--plain.us-accordion--secondary .us-accordion-body > .us-surface {
174
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--secondary .us-accordion-header > .us-surface {
125
175
  --us-surface-color: var(--us-white-color);
126
176
  }
127
- .us-theme-fci .us-accordion-header--plain.us-accordion-header--secondary {
128
- --us-accordion-header-color: var(--us-secondary-color);
177
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--success {
178
+ --us-accordion-header-color: var(--us-success-color);
129
179
  }
130
- .us-theme-fci .us-accordion-header--plain.us-accordion-header--secondary > .us-surface {
180
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--success .us-accordion-header > .us-surface {
131
181
  --us-surface-color: var(--us-white-color);
132
182
  }
133
- .us-theme-fci .us-accordion--flat.us-accordion--primary .us-accordion-body {
134
- --us-accordion-body-color: var(--us-primary-color);
183
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--info {
184
+ --us-accordion-header-color: var(--us-info-color);
135
185
  }
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;
186
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--info .us-accordion-header > .us-surface {
187
+ --us-surface-color: var(--us-white-color);
139
188
  }
140
- .us-theme-fci .us-accordion-header--flat.us-accordion-header--primary {
141
- --us-accordion-header-color: var(--us-primary-color);
189
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--warning {
190
+ --us-accordion-header-color: var(--us-warning-color);
191
+ }
192
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--warning .us-accordion-header > .us-surface {
193
+ --us-surface-color: var(--us-white-color);
194
+ }
195
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--danger {
196
+ --us-accordion-header-color: var(--us-danger-color);
197
+ }
198
+ .us-theme-fci .us-accordion-item--plain.us-accordion-item--danger .us-accordion-header > .us-surface {
199
+ --us-surface-color: var(--us-white-color);
142
200
  }
143
- .us-theme-fci .us-accordion-header--flat.us-accordion-header--primary > .us-surface {
201
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--primary {
202
+ --us-accordion-header-color: var(--us-white-color);
203
+ }
204
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--primary .us-accordion-header > .us-surface {
144
205
  --us-surface-color: var(--us-primary-color);
145
- --us-surface-opacity: 0.16;
146
206
  }
147
- .us-theme-fci .us-accordion--flat.us-accordion--secondary .us-accordion-body {
148
- --us-accordion-body-color: inherit;
207
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--secondary {
208
+ --us-accordion-header-color: var(--us-white-color);
149
209
  }
150
- .us-theme-fci .us-accordion--flat.us-accordion--secondary .us-accordion-body > .us-surface {
210
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--secondary .us-accordion-header > .us-surface {
151
211
  --us-surface-color: var(--us-secondary-color);
212
+ }
213
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--success {
214
+ --us-accordion-header-color: var(--us-white-color);
215
+ }
216
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--success .us-accordion-header > .us-surface {
217
+ --us-surface-color: var(--us-success-color);
218
+ }
219
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--info {
220
+ --us-accordion-header-color: var(--us-white-color);
221
+ }
222
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--info .us-accordion-header > .us-surface {
223
+ --us-surface-color: var(--us-info-color);
224
+ }
225
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--warning {
226
+ --us-accordion-header-color: var(--us-white-color);
227
+ }
228
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--warning .us-accordion-header > .us-surface {
229
+ --us-surface-color: var(--us-warning-color);
230
+ }
231
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--danger {
232
+ --us-accordion-header-color: var(--us-white-color);
233
+ }
234
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--danger .us-accordion-header > .us-surface {
235
+ --us-surface-color: var(--us-danger-color);
236
+ }
237
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--primary {
238
+ --us-accordion-header-color: var(--us-primary-color);
239
+ }
240
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--primary .us-accordion-header > .us-surface {
241
+ --us-surface-color: var(--us-primary-color);
152
242
  --us-surface-opacity: 0.08;
153
243
  }
154
- .us-theme-fci .us-accordion-header--flat.us-accordion-header--secondary {
244
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--secondary {
155
245
  --us-accordion-header-color: var(--us-secondary-color);
156
246
  }
157
- .us-theme-fci .us-accordion-header--flat.us-accordion-header--secondary > .us-surface {
247
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--secondary .us-accordion-header > .us-surface {
158
248
  --us-surface-color: var(--us-secondary-color);
159
249
  --us-surface-opacity: 0.08;
160
250
  }
161
- .us-theme-fci .us-accordion--tonal.us-accordion--primary .us-accordion-body {
162
- --us-accordion-body-color: inherit;
251
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--success {
252
+ --us-accordion-header-color: var(--us-success-color);
163
253
  }
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;
254
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--success .us-accordion-header > .us-surface {
255
+ --us-surface-color: var(--us-success-color);
256
+ --us-surface-opacity: 0.08;
167
257
  }
168
- .us-theme-fci .us-accordion-header--tonal.us-accordion-header--primary {
169
- --us-accordion-header-color: var(--us-secondary-color);
258
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--info {
259
+ --us-accordion-header-color: var(--us-info-color);
170
260
  }
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;
261
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--info .us-accordion-header > .us-surface {
262
+ --us-surface-color: var(--us-info-color);
263
+ --us-surface-opacity: 0.08;
174
264
  }
175
- .us-theme-fci .us-accordion--tonal.us-accordion--secondary .us-accordion-body {
176
- --us-accordion-body-color: inherit;
265
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--warning {
266
+ --us-accordion-header-color: var(--us-warning-color);
177
267
  }
178
- .us-theme-fci .us-accordion--tonal.us-accordion--secondary .us-accordion-body > .us-surface {
179
- --us-surface-color: var(--us-secondary-color);
268
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--warning .us-accordion-header > .us-surface {
269
+ --us-surface-color: var(--us-warning-color);
180
270
  --us-surface-opacity: 0.08;
181
271
  }
182
- .us-theme-fci .us-accordion-header--tonal.us-accordion-header--secondary {
183
- --us-accordion-header-color: var(--us-secondary-color);
272
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--danger {
273
+ --us-accordion-header-color: var(--us-danger-color);
184
274
  }
185
- .us-theme-fci .us-accordion-header--tonal.us-accordion-header--secondary > .us-surface {
186
- --us-surface-color: var(--us-secondary-color);
275
+ .us-theme-fci .us-accordion-item--flat.us-accordion-item--danger .us-accordion-header > .us-surface {
276
+ --us-surface-color: var(--us-danger-color);
187
277
  --us-surface-opacity: 0.08;
188
278
  }
189
- .us-theme-fci .us-accordion--filled.us-accordion--primary .us-accordion-body {
190
- --us-accordion-body-color: #fff;
279
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--primary {
280
+ --us-accordion-header-color: var(--us-black-color);
191
281
  }
192
- .us-theme-fci .us-accordion--filled.us-accordion--primary .us-accordion-body > .us-surface {
282
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--primary .us-accordion-header > .us-surface {
193
283
  --us-surface-color: var(--us-primary-color);
284
+ --us-surface-opacity: 0.08;
194
285
  }
195
- .us-theme-fci .us-accordion-header--filled.us-accordion-header--primary {
196
- --us-accordion-header-color: var(--us-white-color);
286
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--secondary {
287
+ --us-accordion-header-color: var(--us-black-color);
197
288
  }
198
- .us-theme-fci .us-accordion-header--filled.us-accordion-header--primary > .us-surface {
199
- --us-surface-color: var(--us-primary-color);
289
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--secondary .us-accordion-header > .us-surface {
290
+ --us-surface-color: var(--us-secondary-color);
291
+ --us-surface-opacity: 0.08;
200
292
  }
201
- .us-theme-fci .us-accordion--filled.us-accordion--secondary .us-accordion-body {
202
- --us-accordion-body-color: #fff;
293
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--success {
294
+ --us-accordion-header-color: var(--us-black-color);
203
295
  }
204
- .us-theme-fci .us-accordion--filled.us-accordion--secondary .us-accordion-body > .us-surface {
205
- --us-surface-color: var(--us-secondary-color);
296
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--success .us-accordion-header > .us-surface {
297
+ --us-surface-color: var(--us-success-color);
298
+ --us-surface-opacity: 0.08;
206
299
  }
207
- .us-theme-fci .us-accordion-header--filled.us-accordion-header--secondary {
208
- --us-accordion-header-color: var(--us-white-color);
300
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--info {
301
+ --us-accordion-header-color: var(--us-black-color);
209
302
  }
210
- .us-theme-fci .us-accordion-header--filled.us-accordion-header--secondary > .us-surface {
211
- --us-surface-color: var(--us-secondary-color);
303
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--info .us-accordion-header > .us-surface {
304
+ --us-surface-color: var(--us-info-color);
305
+ --us-surface-opacity: 0.08;
306
+ }
307
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--warning {
308
+ --us-accordion-header-color: var(--us-black-color);
309
+ }
310
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--warning .us-accordion-header > .us-surface {
311
+ --us-surface-color: var(--us-warning-color);
312
+ --us-surface-opacity: 0.08;
313
+ }
314
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--danger {
315
+ --us-accordion-header-color: var(--us-black-color);
316
+ }
317
+ .us-theme-fci .us-accordion-item--tonal.us-accordion-item--danger .us-accordion-header > .us-surface {
318
+ --us-surface-color: var(--us-danger-color);
319
+ --us-surface-opacity: 0.08;
212
320
  }
213
321
 
214
322
  .us-theme-fci .us-toolbar {
@@ -333,7 +441,7 @@
333
441
  --us-chip-padding-y: 0.125rem;
334
442
  --us-chip-padding-x: 0.5rem;
335
443
  --us-chip-font-size: 0.75rem;
336
- --us-chip-font-weight: 400;
444
+ --us-chip-font-weight: 500;
337
445
  --us-chip-border-radius: 9999px;
338
446
  }
339
447
  .us-theme-fci .us-chip > .us-overlay {
@@ -400,10 +508,20 @@
400
508
  --us-chip-color: var(--us-white-color);
401
509
  }
402
510
  .us-theme-fci .us-chip--outlined > .us-outline {
511
+ --us-outline-border-width: 1px;
403
512
  --us-outline-border-color: currentColor;
404
513
  }
514
+ .us-theme-fci .us-chip--flat > .us-outline {
515
+ --us-outline-border-width: 1px;
516
+ --us-outline-border-color: transparent;
517
+ }
405
518
  .us-theme-fci .us-chip--flat > .us-overlay {
406
- --us-overlay-opacity: 0.08;
519
+ --us-overlay-color: inherit;
520
+ --us-overlay-opacity: 0.16;
521
+ }
522
+ .us-theme-fci .us-chip--text > .us-outline {
523
+ --us-outline-border-width: 1px;
524
+ --us-outline-border-color: transparent;
407
525
  }
408
526
  .us-theme-fci .us-chip--filled.us-chip--primary {
409
527
  --us-chip-background: var(--us-primary-color);
@@ -429,6 +547,14 @@
429
547
  .us-theme-fci .us-chip--text.us-chip--secondary {
430
548
  --us-chip-color: var(--us-secondary-color);
431
549
  }
550
+ .us-theme-fci .us-chip--filled.us-chip--secondary {
551
+ --us-chip-color: var(--us-secondary-color);
552
+ --us-chip-background: transparent;
553
+ }
554
+ .us-theme-fci .us-chip--filled.us-chip--secondary > .us-overlay {
555
+ --us-overlay-color: inherit;
556
+ --us-overlay-opacity: 0.16;
557
+ }
432
558
  .us-theme-fci .us-chip--filled.us-chip--success {
433
559
  --us-chip-background: var(--us-success-color);
434
560
  }
@@ -441,6 +567,15 @@
441
567
  .us-theme-fci .us-chip--text.us-chip--success {
442
568
  --us-chip-color: var(--us-success-color);
443
569
  }
570
+ .us-theme-fci .us-chip--outlined.us-chip--success {
571
+ --us-chip-color: var(--us-success-dark-color);
572
+ }
573
+ .us-theme-fci .us-chip--flat.us-chip--success {
574
+ --us-chip-color: var(--us-success-dark-color);
575
+ }
576
+ .us-theme-fci .us-chip--text.us-chip--success {
577
+ --us-chip-color: var(--us-success-dark-color);
578
+ }
444
579
  .us-theme-fci .us-chip--filled.us-chip--info {
445
580
  --us-chip-background: var(--us-info-color);
446
581
  }
@@ -453,6 +588,12 @@
453
588
  .us-theme-fci .us-chip--text.us-chip--info {
454
589
  --us-chip-color: var(--us-info-color);
455
590
  }
591
+ .us-theme-fci .us-chip--flat.us-chip--info {
592
+ --us-chip-color: var(--us-info-dark-color);
593
+ }
594
+ .us-theme-fci .us-chip--text.us-chip--info {
595
+ --us-chip-color: var(--us-info-dark-color);
596
+ }
456
597
  .us-theme-fci .us-chip--filled.us-chip--warning {
457
598
  --us-chip-background: var(--us-warning-color);
458
599
  }
@@ -465,6 +606,15 @@
465
606
  .us-theme-fci .us-chip--text.us-chip--warning {
466
607
  --us-chip-color: var(--us-warning-color);
467
608
  }
609
+ .us-theme-fci .us-chip--outlined.us-chip--warning {
610
+ --us-chip-color: var(--us-warning-dark-color);
611
+ }
612
+ .us-theme-fci .us-chip--flat.us-chip--warning {
613
+ --us-chip-color: var(--us-warning-dark-color);
614
+ }
615
+ .us-theme-fci .us-chip--text.us-chip--warning {
616
+ --us-chip-color: var(--us-warning-dark-color);
617
+ }
468
618
  .us-theme-fci .us-chip--filled.us-chip--danger {
469
619
  --us-chip-background: var(--us-danger-color);
470
620
  }
@@ -545,7 +695,7 @@ html {
545
695
  .us-theme-fci .us-button--xl .us-icon {
546
696
  --us-icon-font-size: 1.25rem;
547
697
  }
548
- .us-theme-fci .us-button--xxl {
698
+ .us-theme-fci .us-button--2xl {
549
699
  --us-button-height: 56px;
550
700
  --us-button-padding-y: 0;
551
701
  --us-button-padding-x: 1.75rem;
@@ -553,7 +703,7 @@ html {
553
703
  --us-button-border-radius: 10px;
554
704
  --us-button-gap: 0.75rem;
555
705
  }
556
- .us-theme-fci .us-button--xxl .us-icon {
706
+ .us-theme-fci .us-button--2xl .us-icon {
557
707
  --us-icon-font-size: 1.5rem;
558
708
  }
559
709
  .us-theme-fci .us-button--filled {
@@ -627,7 +777,7 @@ html {
627
777
  .us-theme-fci .us-button--xl.us-button--icon-only .us-icon {
628
778
  --us-icon-font-size: 1.75rem;
629
779
  }
630
- .us-theme-fci .us-button--xxl.us-button--icon-only .us-icon {
780
+ .us-theme-fci .us-button--2xl.us-button--icon-only .us-icon {
631
781
  --us-icon-font-size: 1.875rem;
632
782
  }
633
783
  .us-theme-fci .us-button--filled.us-button--primary {
@@ -1470,16 +1620,16 @@ html {
1470
1620
  --us-_active-overlay-opacity: 0.16;
1471
1621
  }
1472
1622
  .us-theme-fci .us-card--xs {
1473
- --us-card-padding-y: 0.5rem;
1623
+ --us-card-padding-y: 0.375rem;
1474
1624
  --us-card-padding-x: 0.75rem;
1475
1625
  --us-card-gap: 0.5rem;
1476
1626
  --us-card-header-min-height: 1.75rem;
1477
1627
  --us-card-header-gap: 0.5rem;
1478
1628
  --us-card-header-content-gap: 0.25rem;
1479
- --us-card-header-title-font-size: 12px;
1629
+ --us-card-header-title-font-size: 11px;
1480
1630
  --us-card-header-title-font-weight: 500;
1481
1631
  --us-card-header-title-line-height: 14px;
1482
- --us-card-header-subtitle-font-size: 11px;
1632
+ --us-card-header-subtitle-font-size: 10px;
1483
1633
  --us-card-header-subtitle-font-weight: 500;
1484
1634
  --us-card-header-subtitle-line-height: 14px;
1485
1635
  --us-card-body-font-size: 0.75rem;
@@ -1491,7 +1641,7 @@ html {
1491
1641
  --us-icon-font-size-default: 16px;
1492
1642
  }
1493
1643
  .us-theme-fci .us-card--sm {
1494
- --us-card-padding-y: 0.5rem;
1644
+ --us-card-padding-y: 0.375rem;
1495
1645
  --us-card-padding-x: 1rem;
1496
1646
  --us-card-gap: 0.5rem;
1497
1647
  --us-card-title-padding-y: 0.875rem 0.375rem;
@@ -1499,10 +1649,10 @@ html {
1499
1649
  --us-card-header-min-height: 2rem;
1500
1650
  --us-card-header-gap: 0.75rem;
1501
1651
  --us-card-header-content-gap: 0.5rem;
1502
- --us-card-header-title-font-size: 13px;
1652
+ --us-card-header-title-font-size: 12px;
1503
1653
  --us-card-header-title-font-weight: 500;
1504
1654
  --us-card-header-title-line-height: 16px;
1505
- --us-card-header-subtitle-font-size: 12px;
1655
+ --us-card-header-subtitle-font-size: 11px;
1506
1656
  --us-card-header-subtitle-font-weight: 500;
1507
1657
  --us-card-header-subtitle-line-height: 16px;
1508
1658
  --us-card-body-font-size: 0.875rem;
@@ -1514,17 +1664,17 @@ html {
1514
1664
  --us-icon-font-size-default: 20px;
1515
1665
  }
1516
1666
  .us-theme-fci .us-card--md {
1517
- --us-card-padding-y: 0.75rem;
1518
- --us-card-padding-x: 1.5rem;
1519
- --us-card-gap: 0.75rem;
1667
+ --us-card-padding-y: 0.5rem;
1668
+ --us-card-padding-x: 1rem;
1669
+ --us-card-gap: 0.5rem;
1520
1670
  --us-card-title-padding-y: 1rem 0.5rem;
1521
1671
  --us-card-title-font-size: 1.25rem;
1522
1672
  --us-card-header-min-height: 2rem;
1523
- --us-card-header-gap: 1rem;
1673
+ --us-card-header-gap: 0.75rem;
1524
1674
  --us-card-header-content-gap: 0.5rem;
1525
- --us-card-header-title-font-size: 0.875rem;
1675
+ --us-card-header-title-font-size: 13px;
1526
1676
  --us-card-header-title-line-height: 16px;
1527
- --us-card-header-subtitle-font-size: 0.8125rem;
1677
+ --us-card-header-subtitle-font-size: 14px;
1528
1678
  --us-card-header-subtitle-line-height: 16px;
1529
1679
  --us-card-body-font-size: 0.875rem;
1530
1680
  --us-card-body-line-height: 24px;
@@ -1535,17 +1685,17 @@ html {
1535
1685
  --us-icon-font-size-default: 24px;
1536
1686
  }
1537
1687
  .us-theme-fci .us-card--lg {
1538
- --us-card-padding-y: 1.125rem;
1539
- --us-card-padding-x: 1.75rem;
1540
- --us-card-gap: 1.125rem;
1688
+ --us-card-padding-y: 0.625rem;
1689
+ --us-card-padding-x: 1.25rem;
1690
+ --us-card-gap: 0.75rem;
1541
1691
  --us-card-title-padding-y: 1.25rem 0.75rem;
1542
1692
  --us-card-title-font-size: 1.5rem;
1543
1693
  --us-card-header-min-height: 2.25rem;
1544
1694
  --us-card-header-gap: 1rem;
1545
1695
  --us-card-header-content-gap: 0.75rem;
1546
- --us-card-header-title-font-size: 1rem;
1696
+ --us-card-header-title-font-size: 14px;
1547
1697
  --us-card-header-title-line-height: 18px;
1548
- --us-card-header-subtitle-font-size: 0.875rem;
1698
+ --us-card-header-subtitle-font-size: 13px;
1549
1699
  --us-card-header-subtitle-line-height: 18px;
1550
1700
  --us-card-body-font-size: 1rem;
1551
1701
  --us-card-body-line-height: 24px;
@@ -1556,15 +1706,15 @@ html {
1556
1706
  --us-icon-font-size-default: 28px;
1557
1707
  }
1558
1708
  .us-theme-fci .us-card--xl {
1559
- --us-card-padding-y: 1.25rem;
1560
- --us-card-padding-x: 2rem;
1561
- --us-card-gap: 1.25rem;
1709
+ --us-card-padding-y: 0.75rem;
1710
+ --us-card-padding-x: 1.5rem;
1711
+ --us-card-gap: 1rem;
1562
1712
  --us-card-header-min-height: 2.5rem;
1563
1713
  --us-card-header-gap: 1rem;
1564
1714
  --us-card-header-content-gap: 0.875rem;
1565
- --us-card-header-title-font-size: 1.125rem;
1715
+ --us-card-header-title-font-size: 16px;
1566
1716
  --us-card-header-title-line-height: 20px;
1567
- --us-card-header-subtitle-font-size: 1rem;
1717
+ --us-card-header-subtitle-font-size: 15px;
1568
1718
  --us-card-header-subtitle-line-height: 20px;
1569
1719
  --us-card-body-font-size: 1.125rem;
1570
1720
  --us-card-body-line-height: 28px;
@@ -1574,24 +1724,55 @@ html {
1574
1724
  .us-theme-fci .us-card--xl .us-card-header .us-icon:not(.us-button .us-icon) {
1575
1725
  --us-icon-font-size-default: 36px;
1576
1726
  }
1577
- .us-theme-fci .us-card--xxl {
1578
- --us-card-padding-y: 1.5rem;
1579
- --us-card-padding-x: 2rem;
1580
- --us-card-gap: 1.5rem;
1727
+ .us-theme-fci .us-card--2xl {
1728
+ --us-card-padding-y: 0.75rem;
1729
+ --us-card-padding-x: 1.5rem;
1730
+ --us-card-gap: 1rem;
1581
1731
  --us-card-header-min-height: 3rem;
1582
- --us-card-header-gap: 1.5em;
1732
+ --us-card-header-gap: 1rem;
1583
1733
  --us-card-header-content-gap: 1rem;
1584
- --us-card-header-title-font-size: 1.25rem;
1734
+ --us-card-header-title-font-size: 18px;
1585
1735
  --us-card-header-title-line-height: 24px;
1586
- --us-card-header-subtitle-font-size: 1.125rem;
1736
+ --us-card-header-subtitle-font-size: 16px;
1587
1737
  --us-card-header-subtitle-line-height: 24px;
1588
1738
  --us-card-body-font-size: 1.25rem;
1589
1739
  --us-card-body-line-height: 36px;
1590
1740
  --us-card-footer-min-height: 2.5rem;
1591
1741
  --us-card-footer-gap: 1rem;
1592
1742
  }
1593
- .us-theme-fci .us-card--xxl .us-card-header .us-icon:not(.us-button .us-icon) {
1594
- --us-icon-font-size-default: 48px;
1743
+ .us-theme-fci .us-card--2xl .us-card-header .us-icon:not(.us-button .us-icon) {
1744
+ --us-icon-font-size-default: 40px;
1745
+ }
1746
+
1747
+ .us-theme-fci .us-descriptions {
1748
+ --us-description-label-color: var(--us-secondary-action-color);
1749
+ --us-description-label-font-weight: 3400;
1750
+ --us-description-text-color: var(--us-primary-color);
1751
+ --us-description-text-font-weight: 500;
1752
+ }
1753
+ .us-theme-fci .us-descriptions--sm {
1754
+ --us-descriptions-gap-y: 0.5rem;
1755
+ --us-descriptions-gap-x: 0.5rem;
1756
+ --us-description-gap-y: 0.25rem;
1757
+ --us-description-gap-x: 0.25rem;
1758
+ --us-description-label-font-size: 12px;
1759
+ --us-description-text-font-size: 12px;
1760
+ }
1761
+ .us-theme-fci .us-descriptions--md {
1762
+ --us-descriptions-gap-y: 1rem;
1763
+ --us-descriptions-gap-x: 1rem;
1764
+ --us-description-gap-y: 0.5rem;
1765
+ --us-description-gap-x: 0.5rem;
1766
+ --us-description-label-font-size: 14px;
1767
+ --us-description-text-font-size: 14px;
1768
+ }
1769
+ .us-theme-fci .us-descriptions--lg {
1770
+ --us-descriptions-gap-y: 1.5rem;
1771
+ --us-descriptions-gap-x: 1.5rem;
1772
+ --us-description-gap-y: 0.75rem;
1773
+ --us-description-gap-x: 0.75rem;
1774
+ --us-description-label-font-size: 16px;
1775
+ --us-description-text-font-size: 16px;
1595
1776
  }
1596
1777
 
1597
1778
  .us-theme-fci .us-result--sm {
@@ -1753,6 +1934,15 @@ html {
1753
1934
  Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1754
1935
  --us-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
1755
1936
  Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1937
+ --us-fs-xs: 0.75rem;
1938
+ --us-fs-sm: 0.875rem;
1939
+ --us-fs-md: 1rem;
1940
+ --us-fs-lg: 1.125rem;
1941
+ --us-fs-xl: 1.25rem;
1942
+ --us-fs-2xl: 1.5rem;
1943
+ --us-fs-3xl: 1.75rem;
1944
+ --us-fs-4xl: 2rem;
1945
+ --us-fs-5xl: 2.5rem;
1756
1946
  --us-shadow-none: none;
1757
1947
  --us-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1758
1948
  --us-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);