@unifiedsoftware/styles 2.0.0-alpha.2 → 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 +290 -110
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +1284 -194
  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 +9 -10
  9. package/scss/components/_descriptions.scss +17 -6
  10. package/scss/themes/fci/_tokens.scss +18 -5
  11. package/scss/themes/fci/components/_accordion.scss +81 -131
  12. package/scss/themes/fci/components/_button.scss +61 -28
  13. package/scss/themes/fci/components/_card.scss +3 -3
  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);
200
+ }
201
+ .us-theme-fci .us-accordion-item--filled.us-accordion-item--primary {
202
+ --us-accordion-header-color: var(--us-white-color);
142
203
  }
143
- .us-theme-fci .us-accordion-header--flat.us-accordion-header--primary > .us-surface {
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 {
@@ -485,7 +593,7 @@ html {
485
593
  }
486
594
 
487
595
  .us-theme-fci .us-button {
488
- --us-button-font-weight: 400;
596
+ --us-button-font-weight: 500;
489
597
  --us-button-font-family: var(--us-font-sans);
490
598
  --us-button-divider-width: 1px;
491
599
  --us-button-divider-color: #fff;
@@ -506,7 +614,7 @@ html {
506
614
  --us-button-padding-y: 0;
507
615
  --us-button-padding-x: 0.875rem;
508
616
  --us-button-font-size: 0.75rem;
509
- --us-button-border-radius: 8px;
617
+ --us-button-border-radius: 6px;
510
618
  --us-button-gap: 0.25rem;
511
619
  }
512
620
  .us-theme-fci .us-button--sm .us-icon {
@@ -517,7 +625,7 @@ html {
517
625
  --us-button-padding-y: 0;
518
626
  --us-button-padding-x: 1rem;
519
627
  --us-button-font-size: 0.875rem;
520
- --us-button-border-radius: 8px;
628
+ --us-button-border-radius: 6px;
521
629
  --us-button-gap: 0.375rem;
522
630
  }
523
631
  .us-theme-fci .us-button--md .us-icon {
@@ -528,7 +636,7 @@ html {
528
636
  --us-button-padding-y: 0;
529
637
  --us-button-padding-x: 1.25rem;
530
638
  --us-button-font-size: 0.875rem;
531
- --us-button-border-radius: 10px;
639
+ --us-button-border-radius: 8px;
532
640
  --us-button-gap: 0.5rem;
533
641
  }
534
642
  .us-theme-fci .us-button--lg .us-icon {
@@ -539,13 +647,13 @@ html {
539
647
  --us-button-padding-y: 0;
540
648
  --us-button-padding-x: 1.25rem;
541
649
  --us-button-font-size: 1rem;
542
- --us-button-border-radius: 10px;
650
+ --us-button-border-radius: 8px;
543
651
  --us-button-gap: 0.5rem;
544
652
  }
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,21 +735,9 @@ 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
- .us-theme-fci .us-button--filled.us-button--inherit {
634
- --us-button-background: inherit;
635
- }
636
- .us-theme-fci .us-button--outlined.us-button--inherit {
637
- --us-button-color: inherit;
638
- }
639
- .us-theme-fci .us-button--flat.us-button--inherit {
640
- --us-button-color: inherit;
641
- }
642
- .us-theme-fci .us-button--text.us-button--inherit {
643
- --us-button-color: inherit;
644
- }
645
741
  .us-theme-fci .us-button--filled.us-button--primary {
646
742
  --us-button-background: var(--us-primary-color);
647
743
  }
@@ -690,6 +786,24 @@ html {
690
786
  .us-theme-fci .us-button--text.us-button--success {
691
787
  --us-button-color: var(--us-success-color);
692
788
  }
789
+ .us-theme-fci .us-button--outlined.us-button--success {
790
+ --us-button-color: var(--us-success-dark-color);
791
+ }
792
+ .us-theme-fci .us-button--outlined.us-button--success > .us-overlay {
793
+ --us-overlay-color: var(--us-success-color);
794
+ }
795
+ .us-theme-fci .us-button--flat.us-button--success {
796
+ --us-button-color: var(--us-success-dark-color);
797
+ }
798
+ .us-theme-fci .us-button--flat.us-button--success > .us-overlay {
799
+ --us-overlay-color: var(--us-success-color);
800
+ }
801
+ .us-theme-fci .us-button--text.us-button--success {
802
+ --us-button-color: var(--us-success-dark-color);
803
+ }
804
+ .us-theme-fci .us-button--text.us-button--success > .us-overlay {
805
+ --us-overlay-color: var(--us-success-color);
806
+ }
693
807
  .us-theme-fci .us-button--filled.us-button--info {
694
808
  --us-button-background: var(--us-info-color);
695
809
  }
@@ -702,6 +816,18 @@ html {
702
816
  .us-theme-fci .us-button--text.us-button--info {
703
817
  --us-button-color: var(--us-info-color);
704
818
  }
819
+ .us-theme-fci .us-button--flat.us-button--info {
820
+ --us-button-color: var(--us-info-dark-color);
821
+ }
822
+ .us-theme-fci .us-button--flat.us-button--info > .us-overlay {
823
+ --us-overlay-color: var(--us-info-color);
824
+ }
825
+ .us-theme-fci .us-button--text.us-button--info {
826
+ --us-button-color: var(--us-info-dark-color);
827
+ }
828
+ .us-theme-fci .us-button--text.us-button--info > .us-overlay {
829
+ --us-overlay-color: var(--us-info-color);
830
+ }
705
831
  .us-theme-fci .us-button--filled.us-button--warning {
706
832
  --us-button-background: var(--us-warning-color);
707
833
  }
@@ -714,6 +840,24 @@ html {
714
840
  .us-theme-fci .us-button--text.us-button--warning {
715
841
  --us-button-color: var(--us-warning-color);
716
842
  }
843
+ .us-theme-fci .us-button--outlined.us-button--warning {
844
+ --us-button-color: var(--us-warning-dark-color);
845
+ }
846
+ .us-theme-fci .us-button--outlined.us-button--warning > .us-overlay {
847
+ --us-overlay-color: var(--us-warning-color);
848
+ }
849
+ .us-theme-fci .us-button--flat.us-button--warning {
850
+ --us-button-color: var(--us-warning-dark-color);
851
+ }
852
+ .us-theme-fci .us-button--flat.us-button--warning > .us-overlay {
853
+ --us-overlay-color: var(--us-warning-color);
854
+ }
855
+ .us-theme-fci .us-button--text.us-button--warning {
856
+ --us-button-color: var(--us-warning-dark-color);
857
+ }
858
+ .us-theme-fci .us-button--text.us-button--warning > .us-overlay {
859
+ --us-overlay-color: var(--us-warning-color);
860
+ }
717
861
  .us-theme-fci .us-button--filled.us-button--danger {
718
862
  --us-button-background: var(--us-danger-color);
719
863
  }
@@ -1402,7 +1546,7 @@ html {
1402
1546
  --us-card-border-width: 1px;
1403
1547
  --us-card-border-style: solid;
1404
1548
  --us-card-border-color: var(--us-border-color);
1405
- --us-card-border-radius: 10px;
1549
+ --us-card-border-radius: 8px;
1406
1550
  --us-card-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(51, 65, 85, 0.1) 0px 0px 0px 1px,
1407
1551
  rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
1408
1552
  --us-card-title-font-weight: 700;
@@ -1538,7 +1682,7 @@ html {
1538
1682
  .us-theme-fci .us-card--xl .us-card-header .us-icon:not(.us-button .us-icon) {
1539
1683
  --us-icon-font-size-default: 36px;
1540
1684
  }
1541
- .us-theme-fci .us-card--xxl {
1685
+ .us-theme-fci .us-card--2xl {
1542
1686
  --us-card-padding-y: 1.5rem;
1543
1687
  --us-card-padding-x: 2rem;
1544
1688
  --us-card-gap: 1.5rem;
@@ -1554,10 +1698,34 @@ html {
1554
1698
  --us-card-footer-min-height: 2.5rem;
1555
1699
  --us-card-footer-gap: 1rem;
1556
1700
  }
1557
- .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) {
1558
1702
  --us-icon-font-size-default: 48px;
1559
1703
  }
1560
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
+
1561
1729
  .us-theme-fci .us-result--sm {
1562
1730
  --us-result-padding-y: 1rem;
1563
1731
  --us-result-padding-x: 1rem;
@@ -1697,11 +1865,14 @@ html {
1697
1865
  .us-theme-fci {
1698
1866
  --us-primary-rgb: 153 0 0;
1699
1867
  --us-primary-color: hsl(0, 100%, 30%);
1700
- --us-secondary-color: hsl(217, 33%, 17%);
1701
- --us-success-color: hsl(150, 100%, 30%);
1702
- --us-info-color: rgb(120, 40, 200);
1703
- --us-warning-color: rgb(245, 165, 36);
1704
- --us-danger-color: rgb(243, 18, 18);
1868
+ --us-secondary-color: #0f172a;
1869
+ --us-success-color: #16a34a;
1870
+ --us-success-dark-color: #15803d;
1871
+ --us-info-color: #7c3aed;
1872
+ --us-info-dark-color: #5b21b6;
1873
+ --us-warning-color: #f59e0b;
1874
+ --us-warning-dark-color: #b45309;
1875
+ --us-danger-color: #dc2626;
1705
1876
  --us-black-color: #000;
1706
1877
  --us-white-color: #fff;
1707
1878
  --us-border-color: rgba(0, 0, 0, 0.12);
@@ -1714,6 +1885,15 @@ html {
1714
1885
  Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1715
1886
  --us-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
1716
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;
1717
1897
  --us-shadow-none: none;
1718
1898
  --us-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1719
1899
  --us-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);