@unifiedsoftware/styles 1.0.10 → 1.0.12

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 (41) hide show
  1. package/css/{theme-default.css → fci.css} +213 -168
  2. package/css/fci.min.css +1 -0
  3. package/css/styles.css +259 -12
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +18 -0
  7. package/scss/components/_button.scss +1 -0
  8. package/scss/components/_index.scss +4 -0
  9. package/scss/components/_input.scss +78 -0
  10. package/scss/components/_list.scss +15 -0
  11. package/scss/components/_popover.scss +55 -0
  12. package/scss/components/_scroll-area.scss +28 -10
  13. package/scss/components/_switch.scss +39 -0
  14. package/scss/mixins/_outline.scss +42 -1
  15. package/scss/themes/{default → fci}/_tokens.scss +1 -1
  16. package/scss/themes/fci/components/_badge.scss +24 -0
  17. package/scss/themes/fci/components/_button.scss +156 -0
  18. package/scss/themes/fci/components/_card.scss +21 -0
  19. package/scss/themes/fci/components/_chip.scss +127 -0
  20. package/scss/themes/fci/components/_drawer.scss +8 -0
  21. package/scss/themes/fci/components/_icon.scss +8 -0
  22. package/scss/themes/{default → fci}/components/_index.scss +3 -0
  23. package/scss/themes/fci/components/_input.scss +25 -0
  24. package/scss/themes/fci/components/_list.scss +70 -0
  25. package/scss/themes/fci/components/_menu.scss +63 -0
  26. package/scss/themes/fci/components/_switch.scss +19 -0
  27. package/scss/themes/fci/components/_tabs.scss +24 -0
  28. package/scss/themes/fci/components/_toolbar.scss +29 -0
  29. package/scss/themes/{default-kendo.scss → kendo-fci/_index.scss} +1 -1
  30. package/css/theme-default.min.css +0 -1
  31. package/scss/themes/default/components/_badge.scss +0 -21
  32. package/scss/themes/default/components/_button.scss +0 -191
  33. package/scss/themes/default/components/_card.scss +0 -20
  34. package/scss/themes/default/components/_chip.scss +0 -165
  35. package/scss/themes/default/components/_drawer.scss +0 -6
  36. package/scss/themes/default/components/_icon.scss +0 -6
  37. package/scss/themes/default/components/_list.scss +0 -62
  38. package/scss/themes/default/components/_menu.scss +0 -61
  39. package/scss/themes/default/components/_tabs.scss +0 -21
  40. package/scss/themes/default/components/_toolbar.scss +0 -27
  41. /package/scss/themes/{default → fci}/_index.scss +0 -0
@@ -1,30 +1,30 @@
1
- .us-toolbar {
1
+ .us-theme-fci .us-toolbar {
2
2
  --us-toolbar-background: var(--us-white-color);
3
- --us-toolbar-title-font-size: 1.125rem;
3
+ --us-toolbar-title-font-size: 1rem;
4
4
  --us-toolbar-title-font-weight: 600;
5
5
  /* Outline */
6
6
  --us-outline-border-width: 1px;
7
7
  --us-outline-border-color: #ddd;
8
8
  }
9
- .us-toolbar .us-toolbar--sm {
9
+ .us-theme-fci .us-toolbar--sm {
10
10
  --us-toolbar-padding-y: 0.25rem;
11
11
  --us-toolbar-padding-x: 1rem;
12
12
  }
13
- .us-toolbar--md {
13
+ .us-theme-fci .us-toolbar--md {
14
14
  --us-toolbar-padding-y: 0.5rem;
15
15
  --us-toolbar-padding-x: 1rem;
16
16
  }
17
- .us-toolbar--lg {
17
+ .us-theme-fci .us-toolbar--lg {
18
18
  --us-toolbar-padding-y: 0.75rem;
19
19
  --us-toolbar-padding-x: 1rem;
20
20
  }
21
21
 
22
- .us-icon {
22
+ .us-theme-fci .us-icon {
23
23
  --us-icon-font-size: 1.5rem;
24
24
  --us-icon-color: inherit;
25
25
  }
26
26
 
27
- .us-badge {
27
+ .us-theme-fci .us-badge {
28
28
  --us-badge-padding-y: 0.125rem;
29
29
  --us-badge-padding-x: 0.325rem;
30
30
  --us-badge-font-size: 0.75rem;
@@ -34,7 +34,8 @@
34
34
  --us-badge-border-color: var(--us-white-color);
35
35
  --us-badge-color: var(--us-white-color);
36
36
  --us-badge-background: var(--us-primary-color);
37
- /* Overlay */
37
+ }
38
+ .us-theme-fci .us-badge > .us-overlay {
38
39
  --us-overlay-color: inherit;
39
40
  --us-overlay-opacity: 0.08;
40
41
  --us-_hover-overlay-color: inherit;
@@ -43,163 +44,156 @@
43
44
  --us-_active-overlay-opacity: 0.12;
44
45
  }
45
46
 
46
- .us-chip {
47
+ .us-theme-fci .us-chip {
47
48
  --us-chip-padding-y: 0.125rem;
48
49
  --us-chip-padding-x: 0.5rem;
49
50
  --us-chip-font-size: 0.75rem;
50
51
  --us-chip-font-weight: 700;
51
52
  --us-chip-border-radius: 9999px;
52
- --us-chip-color: var(--us-primary-color);
53
- --us-chip-background: transparent;
54
- /* Overlay */
53
+ }
54
+ .us-theme-fci .us-chip > .us-overlay {
55
55
  --us-overlay-color: inherit;
56
56
  --us-overlay-opacity: 0;
57
- /* Outline */
57
+ }
58
+ .us-theme-fci .us-chip > .us-outline {
58
59
  --us-outline-border-width: 1px;
59
60
  --us-outline-border-color: transparent;
60
61
  }
61
- .us-chip > .us-overlay {
62
- --us-overlay-color: inherit;
63
- --us-overlay-opacity: 0;
64
- --us-_hover-overlay-color: initial;
65
- --us-_hover-overlay-opacity: initial;
66
- --us-_active-overlay-color: initial;
67
- --us-_active-overlay-opacity: initial;
68
- }
69
- .us-chip--xs {
62
+ .us-theme-fci .us-chip--xs {
70
63
  --us-chip-height: 28px;
71
64
  --us-chip-padding-y: 0;
72
65
  --us-chip-padding-x: 0.5rem;
73
66
  --us-chip-font-size: 0.75rem;
74
67
  --us-chip-border-radius: 9999px;
75
68
  --us-chip-gap: 0.375rem;
69
+ --us-chip-icon-font-size: 0.75rem;
76
70
  }
77
- .us-chip--xs .us-icon {
71
+ .us-theme-fci .us-chip--xs .us-icon {
78
72
  --us-icon-font-size: 0.75rem;
79
73
  }
80
- .us-chip--sm {
74
+ .us-theme-fci .us-chip--sm {
81
75
  --us-chip-height: 32px;
82
76
  --us-chip-padding-y: 0;
83
77
  --us-chip-padding-x: 0.75rem;
84
78
  --us-chip-font-size: 14px;
85
- --us-chip-border-radius: 9999px;
86
79
  --us-chip-gap: 0.375rem;
80
+ --us-chip-icon-font-size: 0.875rem;
87
81
  }
88
- .us-chip--sm .us-icon {
82
+ .us-theme-fci .us-chip--sm .us-icon {
89
83
  --us-icon-font-size: 0.875rem;
90
84
  }
91
- .us-chip--md {
85
+ .us-theme-fci .us-chip--md {
92
86
  --us-chip-height: 40px;
93
87
  --us-chip-padding-y: 0;
94
88
  --us-chip-padding-x: 1rem;
95
89
  --us-chip-font-size: 14px;
96
- --us-chip-border-radius: 9999px;
97
90
  --us-chip-gap: 0.5rem;
98
91
  }
99
- .us-chip--md .us-icon {
92
+ .us-theme-fci .us-chip--md .us-icon {
100
93
  --us-icon-font-size: 1rem;
101
94
  }
102
- .us-chip--lg {
95
+ .us-theme-fci .us-chip--lg {
103
96
  --us-chip-height: 48px;
104
97
  --us-chip-padding-y: 0;
105
98
  --us-chip-padding-x: 1.5rem;
106
99
  --us-chip-font-size: 1rem;
107
- --us-chip-border-radius: 9999px;
108
100
  --us-chip-gap: 0.5rem;
109
101
  }
110
- .us-chip--lg .us-icon {
102
+ .us-theme-fci .us-chip--lg .us-icon {
111
103
  --us-icon-font-size: 1.125rem;
112
104
  }
113
- .us-chip--xl {
105
+ .us-theme-fci .us-chip--xl {
114
106
  --us-chip-height: 48px;
115
107
  --us-chip-padding-y: 0;
116
108
  --us-chip-padding-x: 1.5rem;
117
109
  --us-chip-font-size: 1rem;
118
- --us-chip-border-radius: 9999px;
119
110
  --us-chip-gap: 0.5rem;
120
111
  }
121
- .us-chip--xl .us-icon {
112
+ .us-theme-fci .us-chip--xl .us-icon {
122
113
  --us-icon-font-size: 1.25rem;
123
114
  }
124
- .us-chip--filled {
115
+ .us-theme-fci .us-chip--filled {
125
116
  --us-chip-border-width: 1px;
126
117
  --us-chip-border-color: transparent;
127
118
  --us-chip-color: var(--us-white-color);
128
119
  }
129
- .us-chip--filled.us-chip--primary {
120
+ .us-theme-fci .us-chip--outlined > .us-outline {
121
+ --us-outline-border-color: currentColor;
122
+ }
123
+ .us-theme-fci .us-chip--filled.us-chip--primary {
130
124
  --us-chip-background: var(--us-primary-color);
131
125
  }
132
- .us-chip--filled.us-chip--secondary {
133
- --us-chip-color: var(--us-black-color);
134
- --us-chip-background: var(--us-secondary-color);
126
+ .us-theme-fci .us-chip--outlined.us-chip--primary {
127
+ --us-chip-color: var(--us-primary-color);
135
128
  }
136
- .us-chip--filled.us-chip--success {
137
- --us-chip-background: var(--us-success-color);
129
+ .us-theme-fci .us-chip--text.us-chip--primary {
130
+ --us-chip-color: var(--us-primary-color);
138
131
  }
139
- .us-chip--filled.us-chip--info {
140
- --us-chip-background: var(--us-info-color);
132
+ .us-theme-fci .us-chip--filled.us-chip--secondary {
133
+ --us-chip-background: var(--us-secondary-color);
141
134
  }
142
- .us-chip--filled.us-chip--warning {
143
- --us-chip-background: var(--us-warning-color);
135
+ .us-theme-fci .us-chip--filled.us-chip--secondary {
136
+ --us-chip-color: var(--us-black-color);
144
137
  }
145
- .us-chip--filled.us-chip--danger {
146
- --us-chip-background: var(--us-danger-color);
138
+ .us-theme-fci .us-chip--outlined.us-chip--secondary {
139
+ --us-chip-color: var(--us-secondary-color);
147
140
  }
148
- .us-chip--outlined {
149
- /* Outline */
150
- --us-outline-border-color: currentColor;
141
+ .us-theme-fci .us-chip--text.us-chip--secondary {
142
+ --us-chip-color: var(--us-secondary-color);
151
143
  }
152
- .us-chip--outlined.us-chip--primary {
153
- --us-chip-color: var(--us-primary-color);
144
+ .us-theme-fci .us-chip--filled.us-chip--success {
145
+ --us-chip-background: var(--us-success-color);
154
146
  }
155
- .us-chip--outlined.us-chip--secondary {
156
- --us-chip-color: var(--us-black-color);
147
+ .us-theme-fci .us-chip--outlined.us-chip--success {
148
+ --us-chip-color: var(--us-success-color);
157
149
  }
158
- .us-chip--outlined.us-chip--success {
150
+ .us-theme-fci .us-chip--text.us-chip--success {
159
151
  --us-chip-color: var(--us-success-color);
160
152
  }
161
- .us-chip--outlined.us-chip--info {
162
- --us-chip-color: var(--us-info-color);
153
+ .us-theme-fci .us-chip--filled.us-chip--info {
154
+ --us-chip-background: var(--us-info-color);
163
155
  }
164
- .us-chip--outlined.us-chip--warning {
165
- --us-chip-color: var(--us-warning-color);
156
+ .us-theme-fci .us-chip--outlined.us-chip--info {
157
+ --us-chip-color: var(--us-info-color);
166
158
  }
167
- .us-chip--outlined.us-chip--danger {
168
- --us-chip-color: var(--us-danger-color);
159
+ .us-theme-fci .us-chip--text.us-chip--info {
160
+ --us-chip-color: var(--us-info-color);
169
161
  }
170
- .us-chip--text.us-chip--primary {
171
- --us-chip-color: var(--us-primary-color);
162
+ .us-theme-fci .us-chip--filled.us-chip--warning {
163
+ --us-chip-background: var(--us-warning-color);
172
164
  }
173
- .us-chip--text.us-chip--secondary {
174
- --us-chip-color: var(--us-black-color);
165
+ .us-theme-fci .us-chip--outlined.us-chip--warning {
166
+ --us-chip-color: var(--us-warning-color);
175
167
  }
176
- .us-chip--text.us-chip--success {
177
- --us-button-color: var(--us-success-color);
168
+ .us-theme-fci .us-chip--text.us-chip--warning {
169
+ --us-chip-color: var(--us-warning-color);
178
170
  }
179
- .us-chip--text.us-chip--info {
180
- --us-chip-color: var(--us-info-color);
171
+ .us-theme-fci .us-chip--filled.us-chip--danger {
172
+ --us-chip-background: var(--us-danger-color);
181
173
  }
182
- .us-chip--text.us-chip--warning {
183
- --us-chip-color: var(--us-warning-color);
174
+ .us-theme-fci .us-chip--outlined.us-chip--danger {
175
+ --us-chip-color: var(--us-danger-color);
184
176
  }
185
- .us-chip--text.us-chip--danger {
177
+ .us-theme-fci .us-chip--text.us-chip--danger {
186
178
  --us-chip-color: var(--us-danger-color);
187
179
  }
188
180
 
189
- .us-button {
181
+ .us-theme-fci .us-button {
190
182
  --us-button-font-weight: 500;
191
183
  --us-button-font-family: var(--us-font-sans);
192
- /* Overlay */
184
+ }
185
+ .us-theme-fci .us-button > .us-overlay {
193
186
  --us-overlay-color: inherit;
194
187
  --us-overlay-opacity: 0;
195
188
  --us-_hover-overlay-opacity: 0;
196
189
  --us-_hover-overlay-opacity: 0.12;
197
190
  --us-_active-overlay-opacity: 0.24;
198
- /* Outline */
191
+ }
192
+ .us-theme-fci .us-button > .us-outline {
199
193
  --us-outline-border-width: 1px;
200
194
  --us-outline-border-color: transparent;
201
195
  }
202
- .us-button--xs {
196
+ .us-theme-fci .us-button--xs {
203
197
  --us-button-height: 20px;
204
198
  --us-button-padding-y: 0;
205
199
  --us-button-padding-x: 0.5rem;
@@ -207,10 +201,10 @@
207
201
  --us-button-border-radius: 4px;
208
202
  --us-button-gap: 0.25rem;
209
203
  }
210
- .us-button--xs .us-icon {
204
+ .us-theme-fci .us-button--xs .us-icon {
211
205
  --us-icon-font-size: 0.75rem;
212
206
  }
213
- .us-button--sm {
207
+ .us-theme-fci .us-button--sm {
214
208
  --us-button-height: 28px;
215
209
  --us-button-padding-y: 0;
216
210
  --us-button-padding-x: 0.75rem;
@@ -218,10 +212,10 @@
218
212
  --us-button-border-radius: 4px;
219
213
  --us-button-gap: 0.375rem;
220
214
  }
221
- .us-button--sm .us-icon {
215
+ .us-theme-fci .us-button--sm .us-icon {
222
216
  --us-icon-font-size: 1rem;
223
217
  }
224
- .us-button--md {
218
+ .us-theme-fci .us-button--md {
225
219
  --us-button-height: 36px;
226
220
  --us-button-padding-y: 0;
227
221
  --us-button-padding-x: 1rem;
@@ -229,10 +223,10 @@
229
223
  --us-button-border-radius: 4px;
230
224
  --us-button-gap: 0.5rem;
231
225
  }
232
- .us-button--md .us-icon {
226
+ .us-theme-fci .us-button--md .us-icon {
233
227
  --us-icon-font-size: 1.125rem;
234
228
  }
235
- .us-button--lg {
229
+ .us-theme-fci .us-button--lg {
236
230
  --us-button-height: 44px;
237
231
  --us-button-padding-y: 0;
238
232
  --us-button-padding-x: 1.25rem;
@@ -240,10 +234,10 @@
240
234
  --us-button-border-radius: 4px;
241
235
  --us-button-gap: 0.625rem;
242
236
  }
243
- .us-button--lg .us-icon {
237
+ .us-theme-fci .us-button--lg .us-icon {
244
238
  --us-icon-font-size: 1.25rem;
245
239
  }
246
- .us-button--xl {
240
+ .us-theme-fci .us-button--xl {
247
241
  --us-button-height: 52px;
248
242
  --us-button-padding-y: 0;
249
243
  --us-button-padding-x: 1.5rem;
@@ -251,142 +245,192 @@
251
245
  --us-button-border-radius: 4px;
252
246
  --us-button-gap: 0.75rem;
253
247
  }
254
- .us-button--xl .us-icon {
248
+ .us-theme-fci .us-button--xl .us-icon {
255
249
  --us-icon-font-size: 1.5rem;
256
250
  }
257
- .us-button--filled {
251
+ .us-theme-fci .us-button--filled {
258
252
  --us-button-border-width: 1px;
259
253
  --us-button-border-color: transparent;
260
254
  --us-button-color: var(--us-white-color);
261
255
  }
262
- .us-button--filled .us-chip {
256
+ .us-theme-fci .us-button--filled .us-chip {
263
257
  --us-chip-background: var(--us-white-color);
264
258
  }
265
- .us-button--filled.us-button--primary {
259
+ .us-theme-fci .us-button--outlined > .us-outline {
260
+ --us-outline-border-color: currentColor;
261
+ }
262
+ .us-theme-fci .us-button--flat > .us-overlay {
263
+ --us-overlay-opacity: 0.08;
264
+ --us-_hover-overlay-opacity: 0.12;
265
+ --us-_active-overlay-opacity: 0.24;
266
+ }
267
+ .us-theme-fci .us-button--filled.us-button--primary {
266
268
  --us-button-background: var(--us-primary-color);
267
269
  }
268
- .us-button--filled.us-button--secondary {
269
- --us-button-color: var(--us-black-color);
270
- --us-button-background: var(--us-secondary-color);
270
+ .us-theme-fci .us-button--outlined.us-button--primary {
271
+ --us-button-color: var(--us-primary-color);
271
272
  }
272
- .us-button--filled.us-button--success {
273
- --us-button-background: var(--us-success-color);
273
+ .us-theme-fci .us-button--flat.us-button--primary {
274
+ --us-button-color: var(--us-primary-color);
274
275
  }
275
- .us-button--filled.us-button--info {
276
- --us-button-background: var(--us-info-color);
276
+ .us-theme-fci .us-button--text.us-button--primary {
277
+ --us-button-color: var(--us-primary-color);
277
278
  }
278
- .us-button--filled.us-button--warning {
279
- --us-button-background: var(--us-warning-color);
279
+ .us-theme-fci .us-button--filled.us-button--secondary {
280
+ --us-button-background: var(--us-secondary-color);
280
281
  }
281
- .us-button--filled.us-button--danger {
282
- --us-button-background: var(--us-danger-color);
282
+ .us-theme-fci .us-button--outlined.us-button--secondary {
283
+ --us-button-color: var(--us-secondary-color);
283
284
  }
284
- .us-button--outlined {
285
- /* Outline */
286
- --us-outline-border-color: currentColor;
285
+ .us-theme-fci .us-button--flat.us-button--secondary {
286
+ --us-button-color: var(--us-secondary-color);
287
287
  }
288
- .us-button--outlined.us-button--primary {
289
- --us-button-color: var(--us-primary-color);
288
+ .us-theme-fci .us-button--text.us-button--secondary {
289
+ --us-button-color: var(--us-secondary-color);
290
290
  }
291
- .us-button--outlined.us-button--secondary {
291
+ .us-theme-fci .us-button--filled.us-button--secondary {
292
292
  --us-button-color: var(--us-black-color);
293
293
  }
294
- .us-button--outlined.us-button--success {
295
- --us-button-color: var(--us-success-color);
296
- }
297
- .us-button--outlined.us-button--info {
298
- --us-button-color: var(--us-info-color);
294
+ .us-theme-fci .us-button--outlined.us-button--secondary {
295
+ --us-button-color: var(--us-black-color);
299
296
  }
300
- .us-button--outlined.us-button--warning {
301
- --us-button-color: var(--us-warning-color);
297
+ .us-theme-fci .us-button--flat.us-button--secondary {
298
+ --us-button-color: var(--us-black-color);
302
299
  }
303
- .us-button--outlined.us-button--danger {
304
- --us-button-color: var(--us-danger-color);
300
+ .us-theme-fci .us-button--text.us-button--secondary {
301
+ --us-button-color: var(--us-black-color);
305
302
  }
306
- .us-button--flat {
307
- --us-overlay-opacity: 0.08;
308
- --us-_hover-overlay-opacity: 0.12;
309
- --us-_active-overlay-opacity: 0.24;
303
+ .us-theme-fci .us-button--filled.us-button--success {
304
+ --us-button-background: var(--us-success-color);
310
305
  }
311
- .us-button--flat.us-button--primary {
312
- --us-button-color: var(--us-primary-color);
306
+ .us-theme-fci .us-button--outlined.us-button--success {
307
+ --us-button-color: var(--us-success-color);
313
308
  }
314
- .us-button--flat.us-button--secondary {
315
- --us-button-color: var(--us-black-color);
309
+ .us-theme-fci .us-button--flat.us-button--success {
310
+ --us-button-color: var(--us-success-color);
316
311
  }
317
- .us-button--flat.us-button--success {
312
+ .us-theme-fci .us-button--text.us-button--success {
318
313
  --us-button-color: var(--us-success-color);
319
314
  }
320
- .us-button--flat.us-button--info {
321
- --us-button-color: var(--us-info-color);
315
+ .us-theme-fci .us-button--filled.us-button--info {
316
+ --us-button-background: var(--us-info-color);
322
317
  }
323
- .us-button--flat.us-button--warning {
324
- --us-button-color: var(--us-warning-color);
318
+ .us-theme-fci .us-button--outlined.us-button--info {
319
+ --us-button-color: var(--us-info-color);
325
320
  }
326
- .us-button--flat.us-button--danger {
327
- --us-button-color: var(--us-danger-color);
321
+ .us-theme-fci .us-button--flat.us-button--info {
322
+ --us-button-color: var(--us-info-color);
328
323
  }
329
- .us-button--text.us-button--primary {
330
- --us-button-color: var(--us-primary-color);
324
+ .us-theme-fci .us-button--text.us-button--info {
325
+ --us-button-color: var(--us-info-color);
331
326
  }
332
- .us-button--text.us-button--secondary {
333
- --us-button-color: var(--us-black-color);
327
+ .us-theme-fci .us-button--filled.us-button--warning {
328
+ --us-button-background: var(--us-warning-color);
334
329
  }
335
- .us-button--text.us-button--success {
336
- --us-button-color: var(--us-success-color);
330
+ .us-theme-fci .us-button--outlined.us-button--warning {
331
+ --us-button-color: var(--us-warning-color);
337
332
  }
338
- .us-button--text.us-button--info {
339
- --us-button-color: var(--us-info-color);
333
+ .us-theme-fci .us-button--flat.us-button--warning {
334
+ --us-button-color: var(--us-warning-color);
340
335
  }
341
- .us-button--text.us-button--warning {
336
+ .us-theme-fci .us-button--text.us-button--warning {
342
337
  --us-button-color: var(--us-warning-color);
343
338
  }
344
- .us-button--text.us-button--danger {
339
+ .us-theme-fci .us-button--filled.us-button--danger {
340
+ --us-button-background: var(--us-danger-color);
341
+ }
342
+ .us-theme-fci .us-button--outlined.us-button--danger {
343
+ --us-button-color: var(--us-danger-color);
344
+ }
345
+ .us-theme-fci .us-button--flat.us-button--danger {
346
+ --us-button-color: var(--us-danger-color);
347
+ }
348
+ .us-theme-fci .us-button--text.us-button--danger {
345
349
  --us-button-color: var(--us-danger-color);
346
350
  }
347
351
 
348
- .us-drawer {
352
+ .us-theme-fci .us-drawer {
349
353
  --us-drawer-width: 256px;
350
354
  --us-drawer-background: #fff;
351
355
  }
352
356
 
353
- .us-list {
354
- --us-list-padding-y: 0;
355
- --us-list-padding-x: 0;
357
+ .us-theme-fci .us-input {
358
+ --us-input-padding-y: 0rem;
359
+ --us-input-padding-x: 1rem;
360
+ --us-input-height: 36px;
361
+ --us-input-font-size: 0.75rem;
362
+ --us-input-font-family: var(--us-font-sans);
363
+ --us-input-line-height: 24px;
364
+ --us-input-border-radius: 0.25rem;
365
+ --us-input-gap: 0.5rem;
366
+ --us-input-icon-size: 1.125rem;
367
+ }
368
+ .us-theme-fci .us-input > .us-outline {
369
+ --us-outline-border-width: 1px;
370
+ --us-outline-border-color: currentColor;
371
+ --us-outline-opacity: 0.12;
372
+ --us-outline-hover-opacity: 0.24;
373
+ --us-outline-focus-border-width: 2px;
374
+ --us-outline-focus-border-color: var(--us-primary-color);
375
+ --us-outline-focus-opacity: 1;
376
+ }
377
+
378
+ .us-theme-fci .us-switch {
379
+ --us-switch-width: 2.5rem;
380
+ --us-switch-padding-y: 0.25rem;
381
+ --us-switch-padding-x: 0.25rem;
382
+ --us-switch-border-radius: 9999px;
383
+ --us-switch-color: rgba(0, 0, 0, 0.2);
384
+ --us-switch-thumb-width: 1rem;
385
+ --us-switch-thumb-height: 1rem;
386
+ --us-switch-thumb-border-radius: 9999px;
387
+ --us-switch-thumb-color: var(--us-white-color);
388
+ }
389
+ .us-theme-fci .us-switch--checked {
390
+ --us-switch-color: var(--us-primary-color);
391
+ }
392
+
393
+ .us-theme-fci .us-list {
394
+ --us-list-padding-y: 0px;
395
+ --us-list-padding-x: 0px;
356
396
  --us-list-color: #343a40;
357
397
  --us-list-background: #fff;
358
398
  }
359
- .us-list-item {
399
+ .us-theme-fci .us-list-item {
360
400
  --us-list-item-height: 40px;
361
- --us-list-item-padding-y: 0;
401
+ --us-list-item-padding-y: 0px;
362
402
  --us-list-item-padding-x: 1rem;
363
403
  --us-list-item-padding-level: 1.25rem;
364
404
  --us-list-item-font-size: 12px;
365
405
  --us-list-item-font-weight: 500;
366
- --us-list-item-border-radius: 0;
406
+ --us-list-item-border-radius: 0px;
367
407
  --us-list-item-gap: 1rem;
408
+ --us-list-item-title-font-size: 12px;
409
+ --us-list-item-title-font-weight: 500;
410
+ --us-list-item-subtitle-font-size: 12px;
411
+ --us-list-item-subtitle-font-weight: 400;
368
412
  }
369
- .us-list-item > .us-overlay {
413
+ .us-theme-fci .us-list-item > .us-overlay {
370
414
  --us-overlay-color: inherit;
371
415
  --us-overlay-opacity: 0;
372
416
  --us-_hover-overlay-color: inherit;
373
417
  --us-_hover-overlay-opacity: 0.04;
374
418
  --us-_active-overlay-opacity: 0.08;
375
419
  }
376
- .us-list-item .us-icon {
420
+ .us-theme-fci .us-list-item .us-icon {
377
421
  --us-icon-font-size: 16px;
378
422
  --us-icon-color: var(--us-primary-color);
379
423
  }
380
- .us-list-item--selected {
424
+ .us-theme-fci .us-list-item--selected {
381
425
  --us-list-item-color: var(--us-primary-color);
382
426
  }
383
- .us-list-item--selected > .us-overlay {
427
+ .us-theme-fci .us-list-item--selected > .us-overlay {
384
428
  --us-overlay-color: var(--us-primary-color);
385
429
  --us-overlay-opacity: 0.08;
386
430
  --us-_hover-overlay-opacity: 0.12;
387
431
  --us-_active-overlay-opacity: 0.16;
388
432
  }
389
- .us-list-subheader {
433
+ .us-theme-fci .us-list-subheader {
390
434
  --us-list-subheader-height: 40px;
391
435
  --us-list-subheader-padding-y: 0;
392
436
  --us-list-subheader-padding-x: 1rem;
@@ -398,19 +442,19 @@
398
442
  --us-list-subheader-border-width: 1px;
399
443
  --us-list-subheader-border-color: #dee2e6;
400
444
  }
401
- .us-list-group > .us-list-item--selected > .us-overlay {
445
+ .us-theme-fci .us-list-group > .us-theme-fci .us-list-item--selected > .us-overlay {
402
446
  --us-overlay-opacity: 0;
403
447
  --us-_hover-overlay-opacity: 0;
404
448
  --us-_active-overlay-opacity: 0;
405
449
  }
406
450
 
407
- .us-menu {
451
+ .us-theme-fci .us-menu {
408
452
  --us-menu-padding-y: 0;
409
453
  --us-menu-padding-x: 0;
410
454
  --us-menu-color: #343a40;
411
455
  --us-menu-background: #fff;
412
456
  }
413
- .us-menu-item {
457
+ .us-theme-fci .us-menu-item {
414
458
  --us-menu-item-height: 40px;
415
459
  --us-menu-item-padding-y: 0;
416
460
  --us-menu-item-padding-x: 1rem;
@@ -420,26 +464,26 @@
420
464
  --us-menu-item-border-radius: 0;
421
465
  --us-menu-item-gap: 1rem;
422
466
  }
423
- .us-menu-item > .us-overlay {
467
+ .us-theme-fci .us-menu-item > .us-overlay {
424
468
  --us-overlay-color: inherit;
425
469
  --us-overlay-opacity: 0;
426
470
  --us-_hover-overlay-color: inherit;
427
471
  --us-_hover-overlay-opacity: 0.08;
428
472
  }
429
- .us-menu-item__icon .us-icon {
473
+ .us-theme-fci .us-menu-item__icon .us-icon {
430
474
  --us-icon-font-size: 16px;
431
475
  --us-icon-color: var(--us-primary-color);
432
476
  }
433
- .us-menu-item--selected {
477
+ .us-theme-fci .us-menu-item--selected {
434
478
  --us-menu-item-color: var(--us-primary-color);
435
479
  }
436
- .us-menu-item--selected > .us-overlay {
480
+ .us-theme-fci .us-menu-item--selected > .us-overlay {
437
481
  --us-overlay-color: var(--us-primary-color);
438
482
  --us-overlay-opacity: 0.08;
439
483
  --us-_hover-overlay-opacity: 0.08;
440
484
  --us-_active-overlay-opacity: 0.08;
441
485
  }
442
- .us-menu-group {
486
+ .us-theme-fci .us-menu-group {
443
487
  --us-menu-group-height: 40px;
444
488
  --us-menu-group-padding-y: 0;
445
489
  --us-menu-group-padding-x: 1rem;
@@ -451,47 +495,48 @@
451
495
  --us-menu-group-border-width: 1px;
452
496
  --us-menu-group-border-color: #dee2e6;
453
497
  }
454
- .us-menu-submenu > .us-menu-item--selected > .us-overlay {
498
+ .us-theme-fci .us-menu-submenu > .us-theme-fci .us-menu-item--selected > .us-overlay {
455
499
  --us-overlay-opacity: 0;
456
500
  --us-_hover-overlay-opacity: 0;
457
501
  --us-_active-overlay-opacity: 0;
458
502
  }
459
503
 
460
- .us-tab {
504
+ .us-theme-fci .us-tab {
461
505
  --us-tab-color: var(--us-black-color);
462
506
  --us-tab-font-size: 0.8125rem;
463
507
  --us-tab-font-weight: 500;
464
508
  --us-tab-indicator-color: var(--us-primary-color);
465
509
  --us-tab-indicator-height: 3px;
466
510
  --us-tab-indicator-border-radius: 3px 3px 0px 0px;
467
- /* Overlay */
511
+ }
512
+ .us-theme-fci .us-tab > .us-overlay {
468
513
  --us-overlay-opacity: 0;
469
514
  --us-overlay-color: inherit;
470
515
  --us-_hover-overlay-opacity: 0.08;
471
516
  --us-_active-overlay-opacity: 0.12;
472
517
  }
473
- .us-tab--selected {
518
+ .us-theme-fci .us-tab--selected {
474
519
  --us-tab-color: var(--us-primary-color);
475
520
  }
476
521
 
477
- .us-card {
522
+ .us-theme-fci .us-card {
478
523
  --us-card-border-width: 1px;
479
524
  --us-card-border-style: solid;
480
525
  --us-card-border-color: rgba(9, 30, 66, 0.14);
481
526
  --us-card-border-radius: 8px;
482
527
  }
483
- .us-card-header {
528
+ .us-theme-fci .us-card-header {
484
529
  --us-card-header-padding-y: 1rem;
485
530
  --us-card-header-padding-x: 1rem;
486
531
  --us-card-header-gap: 1rem;
487
532
  }
488
- .us-card-header__title {
533
+ .us-theme-fci .us-card-header__title {
489
534
  --us-card-header-title-font-size: 0.75rem;
490
535
  --us-card-header-title-font-weight: 600;
491
536
  --us-card-header-title-line-height: 24px;
492
537
  }
493
538
 
494
- :root {
539
+ .us-theme-fci {
495
540
  --us-primary-color: #990000;
496
541
  --us-secondary-color: #dde4eb;
497
542
  --us-success-color: #e1ae30;