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

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 (15) hide show
  1. package/css/fci.css +228 -87
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +1281 -188
  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 +17 -6
  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 -2
  13. package/scss/themes/fci/components/_card.scss +2 -2
  14. package/scss/themes/fci/components/_descriptions.scss +37 -0
  15. 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;
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;
9
19
  }
10
- .us-theme-fci .us-accordion--xs .us-accordion-header {
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 {
@@ -545,7 +653,7 @@ html {
545
653
  .us-theme-fci .us-button--xl .us-icon {
546
654
  --us-icon-font-size: 1.25rem;
547
655
  }
548
- .us-theme-fci .us-button--xxl {
656
+ .us-theme-fci .us-button--2xl {
549
657
  --us-button-height: 56px;
550
658
  --us-button-padding-y: 0;
551
659
  --us-button-padding-x: 1.75rem;
@@ -553,7 +661,7 @@ html {
553
661
  --us-button-border-radius: 10px;
554
662
  --us-button-gap: 0.75rem;
555
663
  }
556
- .us-theme-fci .us-button--xxl .us-icon {
664
+ .us-theme-fci .us-button--2xl .us-icon {
557
665
  --us-icon-font-size: 1.5rem;
558
666
  }
559
667
  .us-theme-fci .us-button--filled {
@@ -627,7 +735,7 @@ html {
627
735
  .us-theme-fci .us-button--xl.us-button--icon-only .us-icon {
628
736
  --us-icon-font-size: 1.75rem;
629
737
  }
630
- .us-theme-fci .us-button--xxl.us-button--icon-only .us-icon {
738
+ .us-theme-fci .us-button--2xl.us-button--icon-only .us-icon {
631
739
  --us-icon-font-size: 1.875rem;
632
740
  }
633
741
  .us-theme-fci .us-button--filled.us-button--primary {
@@ -1574,7 +1682,7 @@ html {
1574
1682
  .us-theme-fci .us-card--xl .us-card-header .us-icon:not(.us-button .us-icon) {
1575
1683
  --us-icon-font-size-default: 36px;
1576
1684
  }
1577
- .us-theme-fci .us-card--xxl {
1685
+ .us-theme-fci .us-card--2xl {
1578
1686
  --us-card-padding-y: 1.5rem;
1579
1687
  --us-card-padding-x: 2rem;
1580
1688
  --us-card-gap: 1.5rem;
@@ -1590,10 +1698,34 @@ html {
1590
1698
  --us-card-footer-min-height: 2.5rem;
1591
1699
  --us-card-footer-gap: 1rem;
1592
1700
  }
1593
- .us-theme-fci .us-card--xxl .us-card-header .us-icon:not(.us-button .us-icon) {
1701
+ .us-theme-fci .us-card--2xl .us-card-header .us-icon:not(.us-button .us-icon) {
1594
1702
  --us-icon-font-size-default: 48px;
1595
1703
  }
1596
1704
 
1705
+ .us-theme-fci .us-descriptions {
1706
+ --us-description-label-color: var(--us-secondary-action-color);
1707
+ --us-description-text-color: var(--us-primary-color);
1708
+ --us-description-text-font-weight: 500;
1709
+ }
1710
+ .us-theme-fci .us-descriptions--sm {
1711
+ --us-descriptions-gap-y: 0.5rem;
1712
+ --us-descriptions-gap-x: 0.5rem;
1713
+ --us-description-label-font-size: 12px;
1714
+ --us-description-text-font-size: 12px;
1715
+ }
1716
+ .us-theme-fci .us-descriptions--md {
1717
+ --us-descriptions-gap-y: 1rem;
1718
+ --us-descriptions-gap-x: 1rem;
1719
+ --us-description-label-font-size: 14px;
1720
+ --us-description-text-font-size: 14px;
1721
+ }
1722
+ .us-theme-fci .us-descriptions--lg {
1723
+ --us-descriptions-gap-y: 1.5rem;
1724
+ --us-descriptions-gap-x: 1.5rem;
1725
+ --us-description-label-font-size: 16px;
1726
+ --us-description-text-font-size: 16px;
1727
+ }
1728
+
1597
1729
  .us-theme-fci .us-result--sm {
1598
1730
  --us-result-padding-y: 1rem;
1599
1731
  --us-result-padding-x: 1rem;
@@ -1753,6 +1885,15 @@ html {
1753
1885
  Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1754
1886
  --us-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
1755
1887
  Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1888
+ --us-fs-xs: 0.75rem;
1889
+ --us-fs-sm: 0.875rem;
1890
+ --us-fs-md: 1rem;
1891
+ --us-fs-lg: 1.125rem;
1892
+ --us-fs-xl: 1.25rem;
1893
+ --us-fs-2xl: 1.5rem;
1894
+ --us-fs-3xl: 1.75rem;
1895
+ --us-fs-4xl: 2rem;
1896
+ --us-fs-5xl: 2.5rem;
1756
1897
  --us-shadow-none: none;
1757
1898
  --us-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1758
1899
  --us-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);