@solexllc/usx-theme 0.1.1 → 0.2.0

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.
@@ -0,0 +1,677 @@
1
+ /* GENERATED by build.js from presets.js — do not edit. */
2
+ [data-theme="forest"] {
3
+ color-scheme: light;
4
+ --usx-color-primary: #2e7d32;
5
+ --usx-color-primary-lighter: #eaeeeb;
6
+ --usx-color-primary-light: #a4bfa6;
7
+ --usx-color-primary-vivid: #3da458;
8
+ --usx-color-primary-dark: #475c4c;
9
+ --usx-color-primary-darker: #363a37;
10
+ --usx-color-primary-hover: #040404;
11
+ --usx-color-primary-active: #040404;
12
+ --usx-color-secondary: #00695c;
13
+ --usx-color-secondary-lighter: #4de5b3;
14
+ --usx-color-secondary-light: #00dcc8;
15
+ --usx-color-secondary-vivid: #005f41;
16
+ --usx-color-secondary-dark: #001c18;
17
+ --usx-color-secondary-darker: #000000;
18
+ --usx-color-secondary-hover: #000000;
19
+ --usx-color-secondary-active: #000000;
20
+ --usx-color-accent-cool: #81c784;
21
+ --usx-color-accent-cool-lighter: #ffffff;
22
+ --usx-color-accent-cool-light: #f2f4f3;
23
+ --usx-color-accent-cool-dark: #a7b1a9;
24
+ --usx-color-accent-cool-darker: #58a165;
25
+ --usx-color-accent-cool-hover: #333333;
26
+ --usx-color-accent-cool-active: #333333;
27
+ --usx-color-accent-warm: #ffb300;
28
+ --usx-color-accent-warm-lighter: #e7d9a3;
29
+ --usx-color-accent-warm-light: #ffd03c;
30
+ --usx-color-accent-warm-dark: #845d00;
31
+ --usx-color-accent-warm-darker: #534328;
32
+ --usx-color-accent-warm-hover: #000000;
33
+ --usx-color-accent-warm-active: #000000;
34
+ --usx-surface-3: #f4faf4;
35
+ --usx-link-text: #2e7d32;
36
+ --usx-summary-box-bg: var(--usx-surface-3);
37
+ --usx-summary-box-border-color: var(--usx-color-primary);
38
+ --usx-summary-box-link-text: #2e7d32;
39
+ --usx-accordion-bg-hover: #e6f4e6;
40
+ --usx-banner-chevron-text: #2e7d32;
41
+ --usx-header-border: var(--usx-color-border);
42
+ --usx-header-bg: var(--usx-surface-3);
43
+ --usx-header-nav-bg: var(--usx-surface-3);
44
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
45
+ --usx-header-nav-bottom-border: var(--usx-color-border);
46
+ --usx-footer-border: var(--usx-color-border);
47
+ --usx-footer-primary-section-border: var(--usx-color-border);
48
+ --usx-footer-secondary-section-border: var(--usx-color-border);
49
+ --usx-icon-list-icon-text: #2e7d32;
50
+ --usx-combo-box-selected-bg: #2e7d32;
51
+ --usx-process-list-border: #eaeeeb;
52
+ }
53
+
54
+ [data-theme="sunset"] {
55
+ color-scheme: light;
56
+ --usx-color-primary: #d84315;
57
+ --usx-color-primary-lighter: #ffffff;
58
+ --usx-color-primary-light: #eac7bb;
59
+ --usx-color-primary-vivid: #ec8837;
60
+ --usx-color-primary-dark: #aa683b;
61
+ --usx-color-primary-darker: #7c5336;
62
+ --usx-color-primary-hover: #262626;
63
+ --usx-color-primary-active: #262626;
64
+ --usx-color-secondary: #6a1b9a;
65
+ --usx-color-secondary-lighter: #baa2dc;
66
+ --usx-color-secondary-light: #af3cec;
67
+ --usx-color-secondary-vivid: #4b109b;
68
+ --usx-color-secondary-dark: #3c0464;
69
+ --usx-color-secondary-darker: #240137;
70
+ --usx-color-secondary-hover: #000000;
71
+ --usx-color-secondary-active: #000000;
72
+ --usx-color-accent-cool: #ff8a65;
73
+ --usx-color-accent-cool-lighter: #ffffff;
74
+ --usx-color-accent-cool-light: #ffffff;
75
+ --usx-color-accent-cool-dark: #e8ab8c;
76
+ --usx-color-accent-cool-darker: #f47121;
77
+ --usx-color-accent-cool-hover: #404040;
78
+ --usx-color-accent-cool-active: #404040;
79
+ --usx-color-accent-warm: #ffd54f;
80
+ --usx-color-accent-warm-lighter: #f7f4e2;
81
+ --usx-color-accent-warm-light: #ffea8b;
82
+ --usx-color-accent-warm-dark: #d3a000;
83
+ --usx-color-accent-warm-darker: #897341;
84
+ --usx-color-accent-warm-hover: #0a0909;
85
+ --usx-color-accent-warm-active: #0a0909;
86
+ --usx-surface-3: #fdf6f1;
87
+ --usx-link-text: #d84315;
88
+ --usx-summary-box-bg: var(--usx-surface-3);
89
+ --usx-summary-box-border-color: var(--usx-color-primary);
90
+ --usx-summary-box-link-text: #d84315;
91
+ --usx-accordion-bg-hover: #fbebe0;
92
+ --usx-banner-chevron-text: #d84315;
93
+ --usx-header-border: var(--usx-color-border);
94
+ --usx-header-bg: var(--usx-surface-3);
95
+ --usx-header-nav-bg: var(--usx-surface-3);
96
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
97
+ --usx-header-nav-bottom-border: var(--usx-color-border);
98
+ --usx-footer-border: var(--usx-color-border);
99
+ --usx-footer-primary-section-border: var(--usx-color-border);
100
+ --usx-footer-secondary-section-border: var(--usx-color-border);
101
+ --usx-icon-list-icon-text: #d84315;
102
+ --usx-combo-box-selected-bg: #d84315;
103
+ --usx-process-list-border: #ffffff;
104
+ }
105
+
106
+ [data-theme="ocean"] {
107
+ color-scheme: light;
108
+ --usx-color-primary: #0891b2;
109
+ --usx-color-primary-lighter: #edf6fa;
110
+ --usx-color-primary-light: #8ed1e4;
111
+ --usx-color-primary-vivid: #0a8de6;
112
+ --usx-color-primary-dark: #26678c;
113
+ --usx-color-primary-darker: #21485e;
114
+ --usx-color-primary-hover: #0c0c0c;
115
+ --usx-color-primary-active: #0c0c0c;
116
+ --usx-color-secondary: #4338ca;
117
+ --usx-color-secondary-lighter: #dddfee;
118
+ --usx-color-secondary-light: #958bea;
119
+ --usx-color-secondary-vivid: #273cd1;
120
+ --usx-color-secondary-dark: #1712a3;
121
+ --usx-color-secondary-darker: #14097c;
122
+ --usx-color-secondary-hover: #000000;
123
+ --usx-color-secondary-active: #000000;
124
+ --usx-color-accent-cool: #67e8f9;
125
+ --usx-color-accent-cool-lighter: #ffffff;
126
+ --usx-color-accent-cool-light: #ffffff;
127
+ --usx-color-accent-cool-dark: #8ed0e2;
128
+ --usx-color-accent-cool-darker: #26b9eb;
129
+ --usx-color-accent-cool-hover: #3f3f3f;
130
+ --usx-color-accent-cool-active: #3f3f3f;
131
+ --usx-color-accent-warm: #fb923c;
132
+ --usx-color-accent-warm-lighter: #f1e2d1;
133
+ --usx-color-accent-warm-light: #ffba74;
134
+ --usx-color-accent-warm-dark: #bc5500;
135
+ --usx-color-accent-warm-darker: #75533e;
136
+ --usx-color-accent-warm-hover: #000000;
137
+ --usx-color-accent-warm-active: #000000;
138
+ --usx-surface-3: #f0f9fb;
139
+ --usx-link-text: #0891b2;
140
+ --usx-summary-box-bg: var(--usx-surface-3);
141
+ --usx-summary-box-border-color: var(--usx-color-primary);
142
+ --usx-summary-box-link-text: #0891b2;
143
+ --usx-accordion-bg-hover: #e0f3f7;
144
+ --usx-banner-chevron-text: #0891b2;
145
+ --usx-header-border: var(--usx-color-border);
146
+ --usx-header-bg: var(--usx-surface-3);
147
+ --usx-header-nav-bg: var(--usx-surface-3);
148
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
149
+ --usx-header-nav-bottom-border: var(--usx-color-border);
150
+ --usx-footer-border: var(--usx-color-border);
151
+ --usx-footer-primary-section-border: var(--usx-color-border);
152
+ --usx-footer-secondary-section-border: var(--usx-color-border);
153
+ --usx-icon-list-icon-text: #0891b2;
154
+ --usx-combo-box-selected-bg: #0891b2;
155
+ --usx-process-list-border: #edf6fa;
156
+ }
157
+
158
+ [data-theme="aurora"] {
159
+ color-scheme: light;
160
+ --usx-color-primary: #3457d5;
161
+ --usx-color-primary-lighter: #ffffff;
162
+ --usx-color-primary-light: #d5daec;
163
+ --usx-color-primary-vivid: #6162de;
164
+ --usx-color-primary-dark: #585ca9;
165
+ --usx-color-primary-darker: #4f517f;
166
+ --usx-color-primary-hover: #343434;
167
+ --usx-color-primary-active: #343434;
168
+ --usx-color-secondary: #7c4dff;
169
+ --usx-color-secondary-lighter: #ffffff;
170
+ --usx-color-secondary-light: #d3c0ff;
171
+ --usx-color-secondary-vivid: #5043ff;
172
+ --usx-color-secondary-dark: #3a00ff;
173
+ --usx-color-secondary-darker: #3a00cf;
174
+ --usx-color-secondary-hover: #1b162b;
175
+ --usx-color-secondary-active: #1b162b;
176
+ --usx-color-accent-cool: #00b8d9;
177
+ --usx-color-accent-cool-lighter: #d9f0f6;
178
+ --usx-color-accent-cool-light: #8fd2e8;
179
+ --usx-color-accent-cool-dark: #269cc3;
180
+ --usx-color-accent-cool-darker: #075f83;
181
+ --usx-color-accent-cool-hover: #000000;
182
+ --usx-color-accent-cool-active: #000000;
183
+ --usx-color-accent-warm: #ff8f6b;
184
+ --usx-color-accent-warm-lighter: #fdfaf8;
185
+ --usx-color-accent-warm-light: #ffc1a7;
186
+ --usx-color-accent-warm-dark: #ef3a00;
187
+ --usx-color-accent-warm-darker: #9b594b;
188
+ --usx-color-accent-warm-hover: #191617;
189
+ --usx-color-accent-warm-active: #191617;
190
+ --usx-color-info: #58b4ff;
191
+ --usx-color-info-lighter: #ffffff;
192
+ --usx-color-info-light: #f9fcfe;
193
+ --usx-color-info-dark: #36a2ff;
194
+ --usx-color-info-darker: #5a86be;
195
+ --usx-color-warning: #fdb8ae;
196
+ --usx-color-warning-lighter: #ffffff;
197
+ --usx-color-warning-light: #ffffff;
198
+ --usx-color-warning-dark: #fb7c68;
199
+ --usx-color-warning-darker: #c98380;
200
+ --usx-color-success: #009ec1;
201
+ --usx-color-success-lighter: #fbfcfc;
202
+ --usx-color-success-light: #84dae5;
203
+ --usx-color-success-dark: #0082a0;
204
+ --usx-color-success-darker: #248180;
205
+ --usx-color-error: #e52207;
206
+ --usx-color-error-lighter: #f8e8e5;
207
+ --usx-color-error-light: #f68673;
208
+ --usx-color-error-dark: #c50726;
209
+ --usx-color-error-darker: #7b333d;
210
+ --usx-color-emergency: #5942d2;
211
+ --usx-color-emergency-dark: #626262;
212
+ --usx-surface-3: #f5f7fc;
213
+ --usx-link-text: #3457d5;
214
+ --usx-summary-box-bg: var(--usx-surface-3);
215
+ --usx-summary-box-border-color: var(--usx-color-primary);
216
+ --usx-summary-box-link-text: #3457d5;
217
+ --usx-accordion-bg-hover: var(--usx-surface-3);
218
+ --usx-accordion-icon-position: auto 1.25rem;
219
+ --usx-accordion-icon-padding-start: 1.25rem;
220
+ --usx-accordion-icon-padding-end: 3.5rem;
221
+ --usx-banner-chevron-text: #3457d5;
222
+ --usx-header-border: var(--usx-color-border);
223
+ --usx-header-bg: var(--usx-surface-3);
224
+ --usx-header-nav-bg: var(--usx-surface-3);
225
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
226
+ --usx-header-nav-bottom-border: var(--usx-color-border);
227
+ --usx-footer-border: var(--usx-color-border);
228
+ --usx-footer-primary-section-border: var(--usx-color-border);
229
+ --usx-footer-secondary-section-border: var(--usx-color-border);
230
+ --usx-icon-list-icon-text: #3457d5;
231
+ --usx-combo-box-selected-bg: #3457d5;
232
+ --usx-process-list-border: #ffffff;
233
+ }
234
+
235
+ [data-theme="borealis"] {
236
+ color-scheme: dark;
237
+ --usx-color-primary: #5b7cfa;
238
+ --usx-color-primary-lighter: #ffffff;
239
+ --usx-color-primary-light: #ffffff;
240
+ --usx-color-primary-vivid: #908ffc;
241
+ --usx-color-primary-dark: #7175dc;
242
+ --usx-color-primary-darker: #5256c8;
243
+ --usx-color-primary-hover: #5a5a5a;
244
+ --usx-color-primary-active: #5a5a5a;
245
+ --usx-color-secondary: #b98cff;
246
+ --usx-color-secondary-lighter: #ffffff;
247
+ --usx-color-secondary-light: #ffffff;
248
+ --usx-color-secondary-vivid: #9a82ff;
249
+ --usx-color-secondary-dark: #833fff;
250
+ --usx-color-secondary-darker: #710fff;
251
+ --usx-color-secondary-hover: #3a2b55;
252
+ --usx-color-secondary-active: #3a2b55;
253
+ --usx-color-accent-cool: #2dd4bf;
254
+ --usx-color-accent-cool-lighter: #fbfcfc;
255
+ --usx-color-accent-cool-light: #c0dfde;
256
+ --usx-color-accent-cool-dark: #61b0ad;
257
+ --usx-color-accent-cool-darker: #278a8b;
258
+ --usx-color-accent-cool-hover: #0f0f0f;
259
+ --usx-color-accent-cool-active: #0f0f0f;
260
+ --usx-color-accent-warm: #ffab91;
261
+ --usx-color-accent-warm-lighter: #ffffff;
262
+ --usx-color-accent-warm-light: #ffdccd;
263
+ --usx-color-accent-warm-dark: #ff4d16;
264
+ --usx-color-accent-warm-darker: #b16a5b;
265
+ --usx-color-accent-warm-hover: #2d2829;
266
+ --usx-color-accent-warm-active: #2d2829;
267
+ --usx-color-info: #58b4ff;
268
+ --usx-color-info-lighter: #ffffff;
269
+ --usx-color-info-light: #f9fcfe;
270
+ --usx-color-info-dark: #36a2ff;
271
+ --usx-color-info-darker: #5a86be;
272
+ --usx-color-warning: #fdb8ae;
273
+ --usx-color-warning-lighter: #ffffff;
274
+ --usx-color-warning-light: #ffffff;
275
+ --usx-color-warning-dark: #fb7c68;
276
+ --usx-color-warning-darker: #c98380;
277
+ --usx-color-success: #009ec1;
278
+ --usx-color-success-lighter: #fbfcfc;
279
+ --usx-color-success-light: #84dae5;
280
+ --usx-color-success-dark: #0082a0;
281
+ --usx-color-success-darker: #248180;
282
+ --usx-color-error: #e52207;
283
+ --usx-color-error-lighter: #f8e8e5;
284
+ --usx-color-error-light: #f68673;
285
+ --usx-color-error-dark: #c50726;
286
+ --usx-color-error-darker: #7b333d;
287
+ --usx-color-emergency: #5942d2;
288
+ --usx-color-emergency-dark: #626262;
289
+ --usx-surface-1: #161a2e;
290
+ --usx-surface-2: #232849;
291
+ --usx-surface-3: #0b0e1c;
292
+ --usx-text-ink: #e6e8f5;
293
+ --usx-text-muted: #dcddff;
294
+ --usx-text-subtle: #aeafc9;
295
+ --usx-text-inverse: #161a2e;
296
+ --usx-link-text: #5b7cfa;
297
+ --usx-link-text-visited: #c9a8ff;
298
+ --usx-summary-box-bg: #101b33;
299
+ --usx-summary-box-border-color: #5b7cfa;
300
+ --usx-summary-box-text: #e6e8f5;
301
+ --usx-summary-box-link-text: #5b7cfa;
302
+ --usx-accordion-bg: #292f57;
303
+ --usx-accordion-bg-hover: var(--usx-surface-3);
304
+ --usx-accordion-content-bg: #161a2e;
305
+ --usx-accordion-icon-position: auto 1.25rem;
306
+ --usx-accordion-icon-padding-start: 1.25rem;
307
+ --usx-accordion-icon-padding-end: 3.5rem;
308
+ --usx-logo-display: none;
309
+ --usx-logo-inverse-display: block;
310
+ --usx-banner-bg: #1f2442;
311
+ --usx-banner-text: #e6e8f5;
312
+ --usx-banner-button-text: var(--usx-text-ink);
313
+ --usx-banner-chevron-text: #5b7cfa;
314
+ --usx-file-input-preview-bg: #24294b;
315
+ --usx-file-input-preview-text: #e6e8f5;
316
+ --usx-header-border: var(--usx-color-border);
317
+ --usx-header-bg: var(--usx-surface-3);
318
+ --usx-header-nav-bg: var(--usx-surface-3);
319
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
320
+ --usx-header-nav-bottom-border: var(--usx-color-border);
321
+ --usx-footer-border: var(--usx-color-border);
322
+ --usx-footer-primary-section-border: var(--usx-color-border);
323
+ --usx-footer-secondary-section-border: var(--usx-color-border);
324
+ --usx-tooltip-bg: #e6e8f5;
325
+ --usx-tooltip-text: #0b0e1c;
326
+ --usx-icon-list-icon-text: #5b7cfa;
327
+ --usx-date-picker-button-hover-active-bg: #565c65;
328
+ --usx-combo-box-selected-bg: #5b7cfa;
329
+ --usx-in-page-nav-bg: var(--usx-surface-2);
330
+ --usx-process-list-border: #ffffff;
331
+ --usx-pagination-current-text: #161a2e;
332
+ --usx-modal-bg: #161a2e;
333
+ --usx-modal-text: #e6e8f5;
334
+ --usx-modal-close-text: #aeafc9;
335
+ --usx-modal-close-text-hover: #e6e8f5;
336
+ --usx-language-selector-menu-text: #161a2e;
337
+ }
338
+
339
+ [data-theme="midnight"] {
340
+ color-scheme: dark;
341
+ --usx-color-primary: #60a5fa;
342
+ --usx-color-primary-lighter: #ffffff;
343
+ --usx-color-primary-light: #ffffff;
344
+ --usx-color-primary-vivid: #94adfc;
345
+ --usx-color-primary-dark: #7592dd;
346
+ --usx-color-primary-darker: #5676c9;
347
+ --usx-color-primary-hover: #5c5c5c;
348
+ --usx-color-primary-active: #5c5c5c;
349
+ --usx-color-secondary: #a78bfa;
350
+ --usx-color-secondary-lighter: #ffffff;
351
+ --usx-color-secondary-light: #fbf9ff;
352
+ --usx-color-secondary-vivid: #837cff;
353
+ --usx-color-secondary-dark: #6439ff;
354
+ --usx-color-secondary-darker: #4b09ff;
355
+ --usx-color-secondary-hover: #352e4c;
356
+ --usx-color-secondary-active: #352e4c;
357
+ --usx-color-accent-cool: #38bdf8;
358
+ --usx-color-accent-cool-lighter: #ffffff;
359
+ --usx-color-accent-cool-light: #d9eaf5;
360
+ --usx-color-accent-cool-dark: #67abd9;
361
+ --usx-color-accent-cool-darker: #127bcf;
362
+ --usx-color-accent-cool-hover: #272727;
363
+ --usx-color-accent-cool-active: #272727;
364
+ --usx-color-accent-warm: #fbbf24;
365
+ --usx-color-accent-warm-lighter: #ece3be;
366
+ --usx-color-accent-warm-light: #ffda5c;
367
+ --usx-color-accent-warm-dark: #a47600;
368
+ --usx-color-accent-warm-darker: #665535;
369
+ --usx-color-accent-warm-hover: #000000;
370
+ --usx-color-accent-warm-active: #000000;
371
+ --usx-surface-1: #1e293b;
372
+ --usx-surface-2: #334155;
373
+ --usx-surface-3: #0f172a;
374
+ --usx-text-ink: #e2e8f0;
375
+ --usx-text-muted: #c7c9da;
376
+ --usx-text-subtle: #aeafc9;
377
+ --usx-text-inverse: #1e293b;
378
+ --usx-link-text: #60a5fa;
379
+ --usx-link-text-visited: #b39ddb;
380
+ --usx-summary-box-bg: #0f1b2e;
381
+ --usx-summary-box-border-color: #60a5fa;
382
+ --usx-summary-box-text: #e2e8f0;
383
+ --usx-summary-box-link-text: #60a5fa;
384
+ --usx-accordion-bg: #3a4b61;
385
+ --usx-accordion-bg-hover: #0a0f1b;
386
+ --usx-accordion-content-bg: #1e293b;
387
+ --usx-logo-display: none;
388
+ --usx-logo-inverse-display: block;
389
+ --usx-banner-bg: #2f3c4e;
390
+ --usx-banner-text: #e2e8f0;
391
+ --usx-banner-button-text: var(--usx-text-ink);
392
+ --usx-banner-chevron-text: #60a5fa;
393
+ --usx-file-input-preview-bg: #344257;
394
+ --usx-file-input-preview-text: #e2e8f0;
395
+ --usx-header-border: var(--usx-color-border);
396
+ --usx-header-bg: var(--usx-surface-3);
397
+ --usx-header-nav-bg: var(--usx-surface-3);
398
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
399
+ --usx-header-nav-bottom-border: var(--usx-color-border);
400
+ --usx-footer-border: var(--usx-color-border);
401
+ --usx-footer-primary-section-border: var(--usx-color-border);
402
+ --usx-footer-secondary-section-border: var(--usx-color-border);
403
+ --usx-tooltip-bg: #e2e8f0;
404
+ --usx-tooltip-text: #020617;
405
+ --usx-icon-list-icon-text: #60a5fa;
406
+ --usx-date-picker-button-hover-active-bg: #565c65;
407
+ --usx-combo-box-selected-bg: #60a5fa;
408
+ --usx-in-page-nav-bg: var(--usx-surface-2);
409
+ --usx-process-list-border: #ffffff;
410
+ --usx-pagination-current-text: #1e293b;
411
+ --usx-modal-bg: #1e293b;
412
+ --usx-modal-text: #e2e8f0;
413
+ --usx-modal-close-text: #aeafc9;
414
+ --usx-modal-close-text-hover: #e2e8f0;
415
+ --usx-language-selector-menu-text: #1e293b;
416
+ }
417
+
418
+ [data-theme="carbon"] {
419
+ color-scheme: dark;
420
+ --usx-color-primary: #fa9441;
421
+ --usx-color-primary-lighter: #ffffff;
422
+ --usx-color-primary-light: #fdf9f6;
423
+ --usx-color-primary-vivid: #fbce76;
424
+ --usx-color-primary-dark: #d8a85b;
425
+ --usx-color-primary-darker: #c2903e;
426
+ --usx-color-primary-hover: #4d4d4d;
427
+ --usx-color-primary-active: #4d4d4d;
428
+ --usx-color-secondary: #22d3ee;
429
+ --usx-color-secondary-lighter: #e1f8f6;
430
+ --usx-color-secondary-light: #86eafd;
431
+ --usx-color-secondary-vivid: #0bfbeb;
432
+ --usx-color-secondary-dark: #00b0c3;
433
+ --usx-color-secondary-darker: #007d93;
434
+ --usx-color-secondary-hover: #020303;
435
+ --usx-color-secondary-active: #020303;
436
+ --usx-color-accent-cool: #38bdf8;
437
+ --usx-color-accent-cool-lighter: #ffffff;
438
+ --usx-color-accent-cool-light: #d9eaf5;
439
+ --usx-color-accent-cool-dark: #67abd9;
440
+ --usx-color-accent-cool-darker: #127bcf;
441
+ --usx-color-accent-cool-hover: #272727;
442
+ --usx-color-accent-cool-active: #272727;
443
+ --usx-color-accent-warm: #facc15;
444
+ --usx-color-accent-warm-lighter: #e8e2b2;
445
+ --usx-color-accent-warm-light: #ffe54c;
446
+ --usx-color-accent-warm-dark: #947600;
447
+ --usx-color-accent-warm-darker: #5b5030;
448
+ --usx-color-accent-warm-hover: #000000;
449
+ --usx-color-accent-warm-active: #000000;
450
+ --usx-surface-1: #1c1c1e;
451
+ --usx-surface-2: #3a3a3d;
452
+ --usx-surface-3: #121214;
453
+ --usx-text-ink: #e5e5e5;
454
+ --usx-text-muted: #c0c0c0;
455
+ --usx-text-subtle: #a3a3a3;
456
+ --usx-text-inverse: #1c1c1e;
457
+ --usx-link-text: #fa9441;
458
+ --usx-link-text-visited: #b39ddb;
459
+ --usx-summary-box-bg: #241a10;
460
+ --usx-summary-box-border-color: #fb923c;
461
+ --usx-summary-box-text: #e5e5e5;
462
+ --usx-summary-box-link-text: #fa9441;
463
+ --usx-accordion-bg: #454545;
464
+ --usx-accordion-bg-hover: #090909;
465
+ --usx-accordion-content-bg: #1d1d1d;
466
+ --usx-logo-display: none;
467
+ --usx-logo-inverse-display: block;
468
+ --usx-banner-bg: var(--usx-surface-3);
469
+ --usx-banner-text: #e5e5e5;
470
+ --usx-banner-button-text: var(--usx-text-ink);
471
+ --usx-banner-chevron-text: #fa9441;
472
+ --usx-file-input-preview-bg: #173e63;
473
+ --usx-file-input-preview-text: #e5e5e5;
474
+ --usx-header-border: var(--usx-color-border);
475
+ --usx-header-bg: var(--usx-surface-3);
476
+ --usx-header-nav-bg: var(--usx-surface-2);
477
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
478
+ --usx-header-nav-bottom-border: var(--usx-color-border);
479
+ --usx-footer-border: var(--usx-color-border);
480
+ --usx-footer-primary-section-border: var(--usx-color-border);
481
+ --usx-footer-secondary-section-border: var(--usx-color-border);
482
+ --usx-tooltip-bg: #e5e5e5;
483
+ --usx-tooltip-text: #000000;
484
+ --usx-icon-list-icon-text: #fa9441;
485
+ --usx-date-picker-button-hover-active-bg: #565c65;
486
+ --usx-combo-box-selected-bg: #fa9441;
487
+ --usx-in-page-nav-bg: var(--usx-surface-2);
488
+ --usx-process-list-border: #ffffff;
489
+ --usx-pagination-current-text: #1d1d1d;
490
+ --usx-modal-bg: #1d1d1d;
491
+ --usx-modal-text: #e5e5e5;
492
+ --usx-modal-close-text: #9fa3a7;
493
+ --usx-modal-close-text-hover: #e5e5e5;
494
+ --usx-language-selector-menu-text: #1d1d1d;
495
+ }
496
+
497
+ [data-theme="vads"] {
498
+ color-scheme: light;
499
+ --usx-color-primary-hover: #000000;
500
+ --usx-color-primary-active: #000000;
501
+ --usx-color-secondary: #00bde3;
502
+ --usx-color-secondary-lighter: #b7f5f3;
503
+ --usx-color-secondary-light: #57ddff;
504
+ --usx-color-secondary-vivid: #00d9d3;
505
+ --usx-color-secondary-dark: #008296;
506
+ --usx-color-secondary-darker: #005366;
507
+ --usx-color-secondary-hover: #000000;
508
+ --usx-color-secondary-active: #000000;
509
+ --usx-color-accent-cool: #97d4ea;
510
+ --usx-color-accent-cool-lighter: #ffffff;
511
+ --usx-color-accent-cool-light: #ffffff;
512
+ --usx-color-accent-cool-dark: #b6cedb;
513
+ --usx-color-accent-cool-darker: #5fa4d3;
514
+ --usx-color-accent-cool-hover: #4f4f4f;
515
+ --usx-color-accent-cool-active: #4f4f4f;
516
+ --usx-color-accent-warm: #bd5727;
517
+ --usx-color-accent-warm-lighter: #c9b4a6;
518
+ --usx-color-accent-warm-light: #df7c41;
519
+ --usx-color-accent-warm-dark: #5a270f;
520
+ --usx-color-accent-warm-darker: #303030;
521
+ --usx-color-accent-warm-hover: #000000;
522
+ --usx-color-accent-warm-active: #000000;
523
+ --usx-font-family: "Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
524
+ --usx-font-family-heading: Bitter, Georgia, Cambria, "Times New Roman", Times, serif;
525
+ --usx-header-border: var(--usx-color-border);
526
+ --usx-header-bg: var(--usx-surface-3);
527
+ --usx-header-nav-bg: var(--usx-surface-3);
528
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
529
+ --usx-header-nav-bottom-border: var(--usx-color-border);
530
+ --usx-footer-border: var(--usx-color-border);
531
+ --usx-footer-primary-section-border: var(--usx-color-border);
532
+ --usx-footer-secondary-section-border: var(--usx-color-border);
533
+ }
534
+
535
+ [data-theme="gov-uk"] {
536
+ color-scheme: light;
537
+ --usx-color-primary: #1d70b8;
538
+ --usx-color-primary-lighter: #ffffff;
539
+ --usx-color-primary-light: #aec7df;
540
+ --usx-color-primary-vivid: #2d67de;
541
+ --usx-color-primary-dark: #3f5c8e;
542
+ --usx-color-primary-darker: #364764;
543
+ --usx-color-primary-hover: #1a1a1a;
544
+ --usx-color-primary-active: #1a1a1a;
545
+ --usx-color-secondary: #0f7a52;
546
+ --usx-color-secondary-lighter: #7bd7a2;
547
+ --usx-color-secondary-light: #0defa2;
548
+ --usx-color-secondary-vivid: #077837;
549
+ --usx-color-secondary-dark: #003c23;
550
+ --usx-color-secondary-darker: #000c08;
551
+ --usx-color-secondary-hover: #000000;
552
+ --usx-color-secondary-active: #000000;
553
+ --usx-color-accent-cool: #8eb8dc;
554
+ --usx-color-accent-cool-lighter: #ffffff;
555
+ --usx-color-accent-cool-light: #ffffff;
556
+ --usx-color-accent-cool-dark: #b0bbca;
557
+ --usx-color-accent-cool-darker: #5c84bf;
558
+ --usx-color-accent-cool-hover: #444444;
559
+ --usx-color-accent-cool-active: #444444;
560
+ --usx-color-accent-warm: #f47738;
561
+ --usx-color-accent-warm-lighter: #edd9ca;
562
+ --usx-color-accent-warm-light: #fba46d;
563
+ --usx-color-accent-warm-dark: #ac3d05;
564
+ --usx-color-accent-warm-darker: #694a3f;
565
+ --usx-color-accent-warm-hover: #000000;
566
+ --usx-color-accent-warm-active: #000000;
567
+ --usx-color-focus: #ffdd00;
568
+ --usx-surface-3: #f4f8fb;
569
+ --usx-color-border: #cecece;
570
+ --usx-radius-box: 0;
571
+ --usx-radius-selector: 0;
572
+ --usx-checkable-tile-radius: 0;
573
+ --usx-misc-banner-badge-radius: 0;
574
+ --usx-border-width-inputs: 2px;
575
+ --usx-accordion-border-width: 1px;
576
+ --usx-font-family: "GDS Transport", arial, sans-serif;
577
+ --usx-link-text: #1d70b8;
578
+ --usx-summary-box-bg: var(--usx-surface-3);
579
+ --usx-summary-box-border-color: var(--usx-color-primary);
580
+ --usx-summary-box-text: #0b0c0c;
581
+ --usx-summary-box-link-text: #1d70b8;
582
+ --usx-accordion-bg: #f3f3f3;
583
+ --usx-accordion-bg-hover: #e5eff6;
584
+ --usx-accordion-text: #0b0c0c;
585
+ --usx-accordion-content-text: #0b0c0c;
586
+ --usx-banner-chevron-text: #1d70b8;
587
+ --usx-header-border: var(--usx-color-border);
588
+ --usx-header-bg: var(--usx-color-primary);
589
+ --usx-header-text: var(--usx-text-inverse);
590
+ --usx-header-nav-bg: var(--usx-color-primary);
591
+ --usx-header-nav-bg-mobile: #f4f8fb;
592
+ --usx-header-nav-link-text: var(--usx-text-inverse);
593
+ --usx-header-nav-link-text-mobile: #1a65a6;
594
+ --usx-header-nav-link-text-hover: var(--usx-text-inverse);
595
+ --usx-header-nav-link-text-hover-mobile: #0f385c;
596
+ --usx-header-secondary-link-text: var(--usx-text-ink);
597
+ --usx-header-secondary-link-text-hover: var(--usx-text-ink);
598
+ --usx-header-nav-bottom-border: var(--usx-color-border);
599
+ --usx-footer-border: var(--usx-color-border);
600
+ --usx-footer-primary-section-border: var(--usx-color-border);
601
+ --usx-footer-secondary-section-border: var(--usx-color-border);
602
+ --usx-icon-list-icon-text: #1d70b8;
603
+ --usx-combo-box-selected-bg: #1d70b8;
604
+ --usx-process-list-border: #ffffff;
605
+ }
606
+
607
+ [data-theme="nasa"] {
608
+ color-scheme: light;
609
+ --usx-color-primary: #d83933;
610
+ --usx-color-primary-lighter: #ffffff;
611
+ --usx-color-primary-light: #edd8d6;
612
+ --usx-color-primary-vivid: #e18060;
613
+ --usx-color-primary-dark: #ac6857;
614
+ --usx-color-primary-darker: #82594e;
615
+ --usx-color-primary-hover: #353535;
616
+ --usx-color-primary-active: #353535;
617
+ --usx-color-secondary: #1c67e3;
618
+ --usx-color-secondary-lighter: #d6e6f2;
619
+ --usx-color-secondary-light: #7aa5f8;
620
+ --usx-color-secondary-vivid: #0e8be7;
621
+ --usx-color-secondary-dark: #004ab2;
622
+ --usx-color-secondary-darker: #002f82;
623
+ --usx-color-secondary-hover: #000000;
624
+ --usx-color-secondary-active: #000000;
625
+ --usx-color-accent-cool: #959599;
626
+ --usx-color-accent-cool-lighter: #ffffff;
627
+ --usx-color-accent-cool-light: #e6e6e6;
628
+ --usx-color-accent-cool-dark: #9f9f9f;
629
+ --usx-color-accent-cool-darker: #707070;
630
+ --usx-color-accent-cool-hover: #262626;
631
+ --usx-color-accent-cool-active: #262626;
632
+ --usx-color-accent-warm: #f64137;
633
+ --usx-color-accent-warm-lighter: #eecfca;
634
+ --usx-color-accent-warm-light: #fc7c6d;
635
+ --usx-color-accent-warm-dark: #af0c03;
636
+ --usx-color-accent-warm-darker: #6b3e3f;
637
+ --usx-color-accent-warm-hover: #000000;
638
+ --usx-color-accent-warm-active: #000000;
639
+ --usx-surface-3: #000000;
640
+ --usx-color-border: #b9b9bb;
641
+ --usx-radius-box: 0;
642
+ --usx-radius-button: 4px;
643
+ --usx-checkable-tile-radius: 0;
644
+ --usx-font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
645
+ --usx-link-text: #d83933;
646
+ --usx-summary-box-bg: var(--usx-surface-3);
647
+ --usx-summary-box-border-color: var(--usx-color-primary);
648
+ --usx-summary-box-text: var(--usx-text-inverse);
649
+ --usx-summary-box-link-text: #d83933;
650
+ --usx-accordion-bg: var(--usx-surface-3);
651
+ --usx-accordion-bg-hover: var(--usx-color-primary);
652
+ --usx-accordion-text: var(--usx-text-inverse);
653
+ --usx-logo-display: none;
654
+ --usx-logo-inverse-display: block;
655
+ --usx-banner-chevron-text: #d83933;
656
+ --usx-header-border: var(--usx-color-border);
657
+ --usx-header-bg: var(--usx-surface-3);
658
+ --usx-header-text: var(--usx-text-inverse);
659
+ --usx-header-nav-bg: var(--usx-surface-3);
660
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
661
+ --usx-header-nav-link-text: var(--usx-text-inverse);
662
+ --usx-header-secondary-link-text: var(--usx-text-inverse);
663
+ --usx-header-nav-bottom-border: var(--usx-color-border);
664
+ --usx-footer-border: var(--usx-color-border);
665
+ --usx-footer-primary-section-border: var(--usx-color-border);
666
+ --usx-footer-secondary-section-border: var(--usx-color-border);
667
+ --usx-footer-text: var(--usx-text-inverse);
668
+ --usx-footer-heading-secondary-text: var(--usx-text-inverse);
669
+ --usx-table-grouped-row-text: var(--usx-text-inverse);
670
+ --usx-icon-list-icon-text: #d83933;
671
+ --usx-combo-box-selected-bg: #d83933;
672
+ --usx-range-slider-track-bg: var(--usx-surface-1);
673
+ --usx-range-slider-track-border: #000000;
674
+ --usx-range-slider-thumb-bg: var(--usx-surface-1);
675
+ --usx-range-slider-thumb-border: #000000;
676
+ --usx-process-list-border: #ffffff;
677
+ }