@solexllc/usx-theme 0.1.0 → 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.
Files changed (21) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +60 -2
  3. package/build.js +71 -7
  4. package/dist/_themes-registry.scss +948 -0
  5. package/dist/themes/aurora.css +77 -0
  6. package/dist/themes/borealis.css +104 -0
  7. package/dist/themes/carbon.css +79 -0
  8. package/dist/themes/forest.css +52 -0
  9. package/dist/themes/gov-uk.css +72 -0
  10. package/dist/themes/midnight.css +79 -0
  11. package/dist/themes/nasa.css +72 -0
  12. package/dist/themes/ocean.css +52 -0
  13. package/dist/themes/sunset.css +52 -0
  14. package/dist/themes/vads.css +38 -0
  15. package/dist/themes.css +677 -0
  16. package/package.json +17 -2
  17. package/src/_themes.scss +120 -0
  18. package/src/_variables.scss +0 -1
  19. package/src/derive.js +233 -0
  20. package/src/presets.js +348 -0
  21. package/src/theme-manifest.js +2 -2
package/dist/themes/aurora.css ADDED
@@ -0,0 +1,77 @@
1
+ /* GENERATED by build.js from presets.js — do not edit. */
2
+ [data-theme="aurora"] {
3
+ color-scheme: light;
4
+ --usx-color-primary: #3457d5;
5
+ --usx-color-primary-lighter: #ffffff;
6
+ --usx-color-primary-light: #d5daec;
7
+ --usx-color-primary-vivid: #6162de;
8
+ --usx-color-primary-dark: #585ca9;
9
+ --usx-color-primary-darker: #4f517f;
10
+ --usx-color-primary-hover: #343434;
11
+ --usx-color-primary-active: #343434;
12
+ --usx-color-secondary: #7c4dff;
13
+ --usx-color-secondary-lighter: #ffffff;
14
+ --usx-color-secondary-light: #d3c0ff;
15
+ --usx-color-secondary-vivid: #5043ff;
16
+ --usx-color-secondary-dark: #3a00ff;
17
+ --usx-color-secondary-darker: #3a00cf;
18
+ --usx-color-secondary-hover: #1b162b;
19
+ --usx-color-secondary-active: #1b162b;
20
+ --usx-color-accent-cool: #00b8d9;
21
+ --usx-color-accent-cool-lighter: #d9f0f6;
22
+ --usx-color-accent-cool-light: #8fd2e8;
23
+ --usx-color-accent-cool-dark: #269cc3;
24
+ --usx-color-accent-cool-darker: #075f83;
25
+ --usx-color-accent-cool-hover: #000000;
26
+ --usx-color-accent-cool-active: #000000;
27
+ --usx-color-accent-warm: #ff8f6b;
28
+ --usx-color-accent-warm-lighter: #fdfaf8;
29
+ --usx-color-accent-warm-light: #ffc1a7;
30
+ --usx-color-accent-warm-dark: #ef3a00;
31
+ --usx-color-accent-warm-darker: #9b594b;
32
+ --usx-color-accent-warm-hover: #191617;
33
+ --usx-color-accent-warm-active: #191617;
34
+ --usx-color-info: #58b4ff;
35
+ --usx-color-info-lighter: #ffffff;
36
+ --usx-color-info-light: #f9fcfe;
37
+ --usx-color-info-dark: #36a2ff;
38
+ --usx-color-info-darker: #5a86be;
39
+ --usx-color-warning: #fdb8ae;
40
+ --usx-color-warning-lighter: #ffffff;
41
+ --usx-color-warning-light: #ffffff;
42
+ --usx-color-warning-dark: #fb7c68;
43
+ --usx-color-warning-darker: #c98380;
44
+ --usx-color-success: #009ec1;
45
+ --usx-color-success-lighter: #fbfcfc;
46
+ --usx-color-success-light: #84dae5;
47
+ --usx-color-success-dark: #0082a0;
48
+ --usx-color-success-darker: #248180;
49
+ --usx-color-error: #e52207;
50
+ --usx-color-error-lighter: #f8e8e5;
51
+ --usx-color-error-light: #f68673;
52
+ --usx-color-error-dark: #c50726;
53
+ --usx-color-error-darker: #7b333d;
54
+ --usx-color-emergency: #5942d2;
55
+ --usx-color-emergency-dark: #626262;
56
+ --usx-surface-3: #f5f7fc;
57
+ --usx-link-text: #3457d5;
58
+ --usx-summary-box-bg: var(--usx-surface-3);
59
+ --usx-summary-box-border-color: var(--usx-color-primary);
60
+ --usx-summary-box-link-text: #3457d5;
61
+ --usx-accordion-bg-hover: var(--usx-surface-3);
62
+ --usx-accordion-icon-position: auto 1.25rem;
63
+ --usx-accordion-icon-padding-start: 1.25rem;
64
+ --usx-accordion-icon-padding-end: 3.5rem;
65
+ --usx-banner-chevron-text: #3457d5;
66
+ --usx-header-border: var(--usx-color-border);
67
+ --usx-header-bg: var(--usx-surface-3);
68
+ --usx-header-nav-bg: var(--usx-surface-3);
69
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
70
+ --usx-header-nav-bottom-border: var(--usx-color-border);
71
+ --usx-footer-border: var(--usx-color-border);
72
+ --usx-footer-primary-section-border: var(--usx-color-border);
73
+ --usx-footer-secondary-section-border: var(--usx-color-border);
74
+ --usx-icon-list-icon-text: #3457d5;
75
+ --usx-combo-box-selected-bg: #3457d5;
76
+ --usx-process-list-border: #ffffff;
77
+ }
package/dist/themes/borealis.css ADDED
@@ -0,0 +1,104 @@
1
+ /* GENERATED by build.js from presets.js — do not edit. */
2
+ [data-theme="borealis"] {
3
+ color-scheme: dark;
4
+ --usx-color-primary: #5b7cfa;
5
+ --usx-color-primary-lighter: #ffffff;
6
+ --usx-color-primary-light: #ffffff;
7
+ --usx-color-primary-vivid: #908ffc;
8
+ --usx-color-primary-dark: #7175dc;
9
+ --usx-color-primary-darker: #5256c8;
10
+ --usx-color-primary-hover: #5a5a5a;
11
+ --usx-color-primary-active: #5a5a5a;
12
+ --usx-color-secondary: #b98cff;
13
+ --usx-color-secondary-lighter: #ffffff;
14
+ --usx-color-secondary-light: #ffffff;
15
+ --usx-color-secondary-vivid: #9a82ff;
16
+ --usx-color-secondary-dark: #833fff;
17
+ --usx-color-secondary-darker: #710fff;
18
+ --usx-color-secondary-hover: #3a2b55;
19
+ --usx-color-secondary-active: #3a2b55;
20
+ --usx-color-accent-cool: #2dd4bf;
21
+ --usx-color-accent-cool-lighter: #fbfcfc;
22
+ --usx-color-accent-cool-light: #c0dfde;
23
+ --usx-color-accent-cool-dark: #61b0ad;
24
+ --usx-color-accent-cool-darker: #278a8b;
25
+ --usx-color-accent-cool-hover: #0f0f0f;
26
+ --usx-color-accent-cool-active: #0f0f0f;
27
+ --usx-color-accent-warm: #ffab91;
28
+ --usx-color-accent-warm-lighter: #ffffff;
29
+ --usx-color-accent-warm-light: #ffdccd;
30
+ --usx-color-accent-warm-dark: #ff4d16;
31
+ --usx-color-accent-warm-darker: #b16a5b;
32
+ --usx-color-accent-warm-hover: #2d2829;
33
+ --usx-color-accent-warm-active: #2d2829;
34
+ --usx-color-info: #58b4ff;
35
+ --usx-color-info-lighter: #ffffff;
36
+ --usx-color-info-light: #f9fcfe;
37
+ --usx-color-info-dark: #36a2ff;
38
+ --usx-color-info-darker: #5a86be;
39
+ --usx-color-warning: #fdb8ae;
40
+ --usx-color-warning-lighter: #ffffff;
41
+ --usx-color-warning-light: #ffffff;
42
+ --usx-color-warning-dark: #fb7c68;
43
+ --usx-color-warning-darker: #c98380;
44
+ --usx-color-success: #009ec1;
45
+ --usx-color-success-lighter: #fbfcfc;
46
+ --usx-color-success-light: #84dae5;
47
+ --usx-color-success-dark: #0082a0;
48
+ --usx-color-success-darker: #248180;
49
+ --usx-color-error: #e52207;
50
+ --usx-color-error-lighter: #f8e8e5;
51
+ --usx-color-error-light: #f68673;
52
+ --usx-color-error-dark: #c50726;
53
+ --usx-color-error-darker: #7b333d;
54
+ --usx-color-emergency: #5942d2;
55
+ --usx-color-emergency-dark: #626262;
56
+ --usx-surface-1: #161a2e;
57
+ --usx-surface-2: #232849;
58
+ --usx-surface-3: #0b0e1c;
59
+ --usx-text-ink: #e6e8f5;
60
+ --usx-text-muted: #dcddff;
61
+ --usx-text-subtle: #aeafc9;
62
+ --usx-text-inverse: #161a2e;
63
+ --usx-link-text: #5b7cfa;
64
+ --usx-link-text-visited: #c9a8ff;
65
+ --usx-summary-box-bg: #101b33;
66
+ --usx-summary-box-border-color: #5b7cfa;
67
+ --usx-summary-box-text: #e6e8f5;
68
+ --usx-summary-box-link-text: #5b7cfa;
69
+ --usx-accordion-bg: #292f57;
70
+ --usx-accordion-bg-hover: var(--usx-surface-3);
71
+ --usx-accordion-content-bg: #161a2e;
72
+ --usx-accordion-icon-position: auto 1.25rem;
73
+ --usx-accordion-icon-padding-start: 1.25rem;
74
+ --usx-accordion-icon-padding-end: 3.5rem;
75
+ --usx-logo-display: none;
76
+ --usx-logo-inverse-display: block;
77
+ --usx-banner-bg: #1f2442;
78
+ --usx-banner-text: #e6e8f5;
79
+ --usx-banner-button-text: var(--usx-text-ink);
80
+ --usx-banner-chevron-text: #5b7cfa;
81
+ --usx-file-input-preview-bg: #24294b;
82
+ --usx-file-input-preview-text: #e6e8f5;
83
+ --usx-header-border: var(--usx-color-border);
84
+ --usx-header-bg: var(--usx-surface-3);
85
+ --usx-header-nav-bg: var(--usx-surface-3);
86
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
87
+ --usx-header-nav-bottom-border: var(--usx-color-border);
88
+ --usx-footer-border: var(--usx-color-border);
89
+ --usx-footer-primary-section-border: var(--usx-color-border);
90
+ --usx-footer-secondary-section-border: var(--usx-color-border);
91
+ --usx-tooltip-bg: #e6e8f5;
92
+ --usx-tooltip-text: #0b0e1c;
93
+ --usx-icon-list-icon-text: #5b7cfa;
94
+ --usx-date-picker-button-hover-active-bg: #565c65;
95
+ --usx-combo-box-selected-bg: #5b7cfa;
96
+ --usx-in-page-nav-bg: var(--usx-surface-2);
97
+ --usx-process-list-border: #ffffff;
98
+ --usx-pagination-current-text: #161a2e;
99
+ --usx-modal-bg: #161a2e;
100
+ --usx-modal-text: #e6e8f5;
101
+ --usx-modal-close-text: #aeafc9;
102
+ --usx-modal-close-text-hover: #e6e8f5;
103
+ --usx-language-selector-menu-text: #161a2e;
104
+ }
package/dist/themes/carbon.css ADDED
@@ -0,0 +1,79 @@
1
+ /* GENERATED by build.js from presets.js — do not edit. */
2
+ [data-theme="carbon"] {
3
+ color-scheme: dark;
4
+ --usx-color-primary: #fa9441;
5
+ --usx-color-primary-lighter: #ffffff;
6
+ --usx-color-primary-light: #fdf9f6;
7
+ --usx-color-primary-vivid: #fbce76;
8
+ --usx-color-primary-dark: #d8a85b;
9
+ --usx-color-primary-darker: #c2903e;
10
+ --usx-color-primary-hover: #4d4d4d;
11
+ --usx-color-primary-active: #4d4d4d;
12
+ --usx-color-secondary: #22d3ee;
13
+ --usx-color-secondary-lighter: #e1f8f6;
14
+ --usx-color-secondary-light: #86eafd;
15
+ --usx-color-secondary-vivid: #0bfbeb;
16
+ --usx-color-secondary-dark: #00b0c3;
17
+ --usx-color-secondary-darker: #007d93;
18
+ --usx-color-secondary-hover: #020303;
19
+ --usx-color-secondary-active: #020303;
20
+ --usx-color-accent-cool: #38bdf8;
21
+ --usx-color-accent-cool-lighter: #ffffff;
22
+ --usx-color-accent-cool-light: #d9eaf5;
23
+ --usx-color-accent-cool-dark: #67abd9;
24
+ --usx-color-accent-cool-darker: #127bcf;
25
+ --usx-color-accent-cool-hover: #272727;
26
+ --usx-color-accent-cool-active: #272727;
27
+ --usx-color-accent-warm: #facc15;
28
+ --usx-color-accent-warm-lighter: #e8e2b2;
29
+ --usx-color-accent-warm-light: #ffe54c;
30
+ --usx-color-accent-warm-dark: #947600;
31
+ --usx-color-accent-warm-darker: #5b5030;
32
+ --usx-color-accent-warm-hover: #000000;
33
+ --usx-color-accent-warm-active: #000000;
34
+ --usx-surface-1: #1c1c1e;
35
+ --usx-surface-2: #3a3a3d;
36
+ --usx-surface-3: #121214;
37
+ --usx-text-ink: #e5e5e5;
38
+ --usx-text-muted: #c0c0c0;
39
+ --usx-text-subtle: #a3a3a3;
40
+ --usx-text-inverse: #1c1c1e;
41
+ --usx-link-text: #fa9441;
42
+ --usx-link-text-visited: #b39ddb;
43
+ --usx-summary-box-bg: #241a10;
44
+ --usx-summary-box-border-color: #fb923c;
45
+ --usx-summary-box-text: #e5e5e5;
46
+ --usx-summary-box-link-text: #fa9441;
47
+ --usx-accordion-bg: #454545;
48
+ --usx-accordion-bg-hover: #090909;
49
+ --usx-accordion-content-bg: #1d1d1d;
50
+ --usx-logo-display: none;
51
+ --usx-logo-inverse-display: block;
52
+ --usx-banner-bg: var(--usx-surface-3);
53
+ --usx-banner-text: #e5e5e5;
54
+ --usx-banner-button-text: var(--usx-text-ink);
55
+ --usx-banner-chevron-text: #fa9441;
56
+ --usx-file-input-preview-bg: #173e63;
57
+ --usx-file-input-preview-text: #e5e5e5;
58
+ --usx-header-border: var(--usx-color-border);
59
+ --usx-header-bg: var(--usx-surface-3);
60
+ --usx-header-nav-bg: var(--usx-surface-2);
61
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
62
+ --usx-header-nav-bottom-border: var(--usx-color-border);
63
+ --usx-footer-border: var(--usx-color-border);
64
+ --usx-footer-primary-section-border: var(--usx-color-border);
65
+ --usx-footer-secondary-section-border: var(--usx-color-border);
66
+ --usx-tooltip-bg: #e5e5e5;
67
+ --usx-tooltip-text: #000000;
68
+ --usx-icon-list-icon-text: #fa9441;
69
+ --usx-date-picker-button-hover-active-bg: #565c65;
70
+ --usx-combo-box-selected-bg: #fa9441;
71
+ --usx-in-page-nav-bg: var(--usx-surface-2);
72
+ --usx-process-list-border: #ffffff;
73
+ --usx-pagination-current-text: #1d1d1d;
74
+ --usx-modal-bg: #1d1d1d;
75
+ --usx-modal-text: #e5e5e5;
76
+ --usx-modal-close-text: #9fa3a7;
77
+ --usx-modal-close-text-hover: #e5e5e5;
78
+ --usx-language-selector-menu-text: #1d1d1d;
79
+ }
package/dist/themes/forest.css ADDED
@@ -0,0 +1,52 @@
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
+ }
package/dist/themes/gov-uk.css ADDED
@@ -0,0 +1,72 @@
1
+ /* GENERATED by build.js from presets.js — do not edit. */
2
+ [data-theme="gov-uk"] {
3
+ color-scheme: light;
4
+ --usx-color-primary: #1d70b8;
5
+ --usx-color-primary-lighter: #ffffff;
6
+ --usx-color-primary-light: #aec7df;
7
+ --usx-color-primary-vivid: #2d67de;
8
+ --usx-color-primary-dark: #3f5c8e;
9
+ --usx-color-primary-darker: #364764;
10
+ --usx-color-primary-hover: #1a1a1a;
11
+ --usx-color-primary-active: #1a1a1a;
12
+ --usx-color-secondary: #0f7a52;
13
+ --usx-color-secondary-lighter: #7bd7a2;
14
+ --usx-color-secondary-light: #0defa2;
15
+ --usx-color-secondary-vivid: #077837;
16
+ --usx-color-secondary-dark: #003c23;
17
+ --usx-color-secondary-darker: #000c08;
18
+ --usx-color-secondary-hover: #000000;
19
+ --usx-color-secondary-active: #000000;
20
+ --usx-color-accent-cool: #8eb8dc;
21
+ --usx-color-accent-cool-lighter: #ffffff;
22
+ --usx-color-accent-cool-light: #ffffff;
23
+ --usx-color-accent-cool-dark: #b0bbca;
24
+ --usx-color-accent-cool-darker: #5c84bf;
25
+ --usx-color-accent-cool-hover: #444444;
26
+ --usx-color-accent-cool-active: #444444;
27
+ --usx-color-accent-warm: #f47738;
28
+ --usx-color-accent-warm-lighter: #edd9ca;
29
+ --usx-color-accent-warm-light: #fba46d;
30
+ --usx-color-accent-warm-dark: #ac3d05;
31
+ --usx-color-accent-warm-darker: #694a3f;
32
+ --usx-color-accent-warm-hover: #000000;
33
+ --usx-color-accent-warm-active: #000000;
34
+ --usx-color-focus: #ffdd00;
35
+ --usx-surface-3: #f4f8fb;
36
+ --usx-color-border: #cecece;
37
+ --usx-radius-box: 0;
38
+ --usx-radius-selector: 0;
39
+ --usx-checkable-tile-radius: 0;
40
+ --usx-misc-banner-badge-radius: 0;
41
+ --usx-border-width-inputs: 2px;
42
+ --usx-accordion-border-width: 1px;
43
+ --usx-font-family: "GDS Transport", arial, sans-serif;
44
+ --usx-link-text: #1d70b8;
45
+ --usx-summary-box-bg: var(--usx-surface-3);
46
+ --usx-summary-box-border-color: var(--usx-color-primary);
47
+ --usx-summary-box-text: #0b0c0c;
48
+ --usx-summary-box-link-text: #1d70b8;
49
+ --usx-accordion-bg: #f3f3f3;
50
+ --usx-accordion-bg-hover: #e5eff6;
51
+ --usx-accordion-text: #0b0c0c;
52
+ --usx-accordion-content-text: #0b0c0c;
53
+ --usx-banner-chevron-text: #1d70b8;
54
+ --usx-header-border: var(--usx-color-border);
55
+ --usx-header-bg: var(--usx-color-primary);
56
+ --usx-header-text: var(--usx-text-inverse);
57
+ --usx-header-nav-bg: var(--usx-color-primary);
58
+ --usx-header-nav-bg-mobile: #f4f8fb;
59
+ --usx-header-nav-link-text: var(--usx-text-inverse);
60
+ --usx-header-nav-link-text-mobile: #1a65a6;
61
+ --usx-header-nav-link-text-hover: var(--usx-text-inverse);
62
+ --usx-header-nav-link-text-hover-mobile: #0f385c;
63
+ --usx-header-secondary-link-text: var(--usx-text-ink);
64
+ --usx-header-secondary-link-text-hover: var(--usx-text-ink);
65
+ --usx-header-nav-bottom-border: var(--usx-color-border);
66
+ --usx-footer-border: var(--usx-color-border);
67
+ --usx-footer-primary-section-border: var(--usx-color-border);
68
+ --usx-footer-secondary-section-border: var(--usx-color-border);
69
+ --usx-icon-list-icon-text: #1d70b8;
70
+ --usx-combo-box-selected-bg: #1d70b8;
71
+ --usx-process-list-border: #ffffff;
72
+ }
package/dist/themes/midnight.css ADDED
@@ -0,0 +1,79 @@
1
+ /* GENERATED by build.js from presets.js — do not edit. */
2
+ [data-theme="midnight"] {
3
+ color-scheme: dark;
4
+ --usx-color-primary: #60a5fa;
5
+ --usx-color-primary-lighter: #ffffff;
6
+ --usx-color-primary-light: #ffffff;
7
+ --usx-color-primary-vivid: #94adfc;
8
+ --usx-color-primary-dark: #7592dd;
9
+ --usx-color-primary-darker: #5676c9;
10
+ --usx-color-primary-hover: #5c5c5c;
11
+ --usx-color-primary-active: #5c5c5c;
12
+ --usx-color-secondary: #a78bfa;
13
+ --usx-color-secondary-lighter: #ffffff;
14
+ --usx-color-secondary-light: #fbf9ff;
15
+ --usx-color-secondary-vivid: #837cff;
16
+ --usx-color-secondary-dark: #6439ff;
17
+ --usx-color-secondary-darker: #4b09ff;
18
+ --usx-color-secondary-hover: #352e4c;
19
+ --usx-color-secondary-active: #352e4c;
20
+ --usx-color-accent-cool: #38bdf8;
21
+ --usx-color-accent-cool-lighter: #ffffff;
22
+ --usx-color-accent-cool-light: #d9eaf5;
23
+ --usx-color-accent-cool-dark: #67abd9;
24
+ --usx-color-accent-cool-darker: #127bcf;
25
+ --usx-color-accent-cool-hover: #272727;
26
+ --usx-color-accent-cool-active: #272727;
27
+ --usx-color-accent-warm: #fbbf24;
28
+ --usx-color-accent-warm-lighter: #ece3be;
29
+ --usx-color-accent-warm-light: #ffda5c;
30
+ --usx-color-accent-warm-dark: #a47600;
31
+ --usx-color-accent-warm-darker: #665535;
32
+ --usx-color-accent-warm-hover: #000000;
33
+ --usx-color-accent-warm-active: #000000;
34
+ --usx-surface-1: #1e293b;
35
+ --usx-surface-2: #334155;
36
+ --usx-surface-3: #0f172a;
37
+ --usx-text-ink: #e2e8f0;
38
+ --usx-text-muted: #c7c9da;
39
+ --usx-text-subtle: #aeafc9;
40
+ --usx-text-inverse: #1e293b;
41
+ --usx-link-text: #60a5fa;
42
+ --usx-link-text-visited: #b39ddb;
43
+ --usx-summary-box-bg: #0f1b2e;
44
+ --usx-summary-box-border-color: #60a5fa;
45
+ --usx-summary-box-text: #e2e8f0;
46
+ --usx-summary-box-link-text: #60a5fa;
47
+ --usx-accordion-bg: #3a4b61;
48
+ --usx-accordion-bg-hover: #0a0f1b;
49
+ --usx-accordion-content-bg: #1e293b;
50
+ --usx-logo-display: none;
51
+ --usx-logo-inverse-display: block;
52
+ --usx-banner-bg: #2f3c4e;
53
+ --usx-banner-text: #e2e8f0;
54
+ --usx-banner-button-text: var(--usx-text-ink);
55
+ --usx-banner-chevron-text: #60a5fa;
56
+ --usx-file-input-preview-bg: #344257;
57
+ --usx-file-input-preview-text: #e2e8f0;
58
+ --usx-header-border: var(--usx-color-border);
59
+ --usx-header-bg: var(--usx-surface-3);
60
+ --usx-header-nav-bg: var(--usx-surface-3);
61
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
62
+ --usx-header-nav-bottom-border: var(--usx-color-border);
63
+ --usx-footer-border: var(--usx-color-border);
64
+ --usx-footer-primary-section-border: var(--usx-color-border);
65
+ --usx-footer-secondary-section-border: var(--usx-color-border);
66
+ --usx-tooltip-bg: #e2e8f0;
67
+ --usx-tooltip-text: #020617;
68
+ --usx-icon-list-icon-text: #60a5fa;
69
+ --usx-date-picker-button-hover-active-bg: #565c65;
70
+ --usx-combo-box-selected-bg: #60a5fa;
71
+ --usx-in-page-nav-bg: var(--usx-surface-2);
72
+ --usx-process-list-border: #ffffff;
73
+ --usx-pagination-current-text: #1e293b;
74
+ --usx-modal-bg: #1e293b;
75
+ --usx-modal-text: #e2e8f0;
76
+ --usx-modal-close-text: #aeafc9;
77
+ --usx-modal-close-text-hover: #e2e8f0;
78
+ --usx-language-selector-menu-text: #1e293b;
79
+ }
package/dist/themes/nasa.css ADDED
@@ -0,0 +1,72 @@
1
+ /* GENERATED by build.js from presets.js — do not edit. */
2
+ [data-theme="nasa"] {
3
+ color-scheme: light;
4
+ --usx-color-primary: #d83933;
5
+ --usx-color-primary-lighter: #ffffff;
6
+ --usx-color-primary-light: #edd8d6;
7
+ --usx-color-primary-vivid: #e18060;
8
+ --usx-color-primary-dark: #ac6857;
9
+ --usx-color-primary-darker: #82594e;
10
+ --usx-color-primary-hover: #353535;
11
+ --usx-color-primary-active: #353535;
12
+ --usx-color-secondary: #1c67e3;
13
+ --usx-color-secondary-lighter: #d6e6f2;
14
+ --usx-color-secondary-light: #7aa5f8;
15
+ --usx-color-secondary-vivid: #0e8be7;
16
+ --usx-color-secondary-dark: #004ab2;
17
+ --usx-color-secondary-darker: #002f82;
18
+ --usx-color-secondary-hover: #000000;
19
+ --usx-color-secondary-active: #000000;
20
+ --usx-color-accent-cool: #959599;
21
+ --usx-color-accent-cool-lighter: #ffffff;
22
+ --usx-color-accent-cool-light: #e6e6e6;
23
+ --usx-color-accent-cool-dark: #9f9f9f;
24
+ --usx-color-accent-cool-darker: #707070;
25
+ --usx-color-accent-cool-hover: #262626;
26
+ --usx-color-accent-cool-active: #262626;
27
+ --usx-color-accent-warm: #f64137;
28
+ --usx-color-accent-warm-lighter: #eecfca;
29
+ --usx-color-accent-warm-light: #fc7c6d;
30
+ --usx-color-accent-warm-dark: #af0c03;
31
+ --usx-color-accent-warm-darker: #6b3e3f;
32
+ --usx-color-accent-warm-hover: #000000;
33
+ --usx-color-accent-warm-active: #000000;
34
+ --usx-surface-3: #000000;
35
+ --usx-color-border: #b9b9bb;
36
+ --usx-radius-box: 0;
37
+ --usx-radius-button: 4px;
38
+ --usx-checkable-tile-radius: 0;
39
+ --usx-font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
40
+ --usx-link-text: #d83933;
41
+ --usx-summary-box-bg: var(--usx-surface-3);
42
+ --usx-summary-box-border-color: var(--usx-color-primary);
43
+ --usx-summary-box-text: var(--usx-text-inverse);
44
+ --usx-summary-box-link-text: #d83933;
45
+ --usx-accordion-bg: var(--usx-surface-3);
46
+ --usx-accordion-bg-hover: var(--usx-color-primary);
47
+ --usx-accordion-text: var(--usx-text-inverse);
48
+ --usx-logo-display: none;
49
+ --usx-logo-inverse-display: block;
50
+ --usx-banner-chevron-text: #d83933;
51
+ --usx-header-border: var(--usx-color-border);
52
+ --usx-header-bg: var(--usx-surface-3);
53
+ --usx-header-text: var(--usx-text-inverse);
54
+ --usx-header-nav-bg: var(--usx-surface-3);
55
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
56
+ --usx-header-nav-link-text: var(--usx-text-inverse);
57
+ --usx-header-secondary-link-text: var(--usx-text-inverse);
58
+ --usx-header-nav-bottom-border: var(--usx-color-border);
59
+ --usx-footer-border: var(--usx-color-border);
60
+ --usx-footer-primary-section-border: var(--usx-color-border);
61
+ --usx-footer-secondary-section-border: var(--usx-color-border);
62
+ --usx-footer-text: var(--usx-text-inverse);
63
+ --usx-footer-heading-secondary-text: var(--usx-text-inverse);
64
+ --usx-table-grouped-row-text: var(--usx-text-inverse);
65
+ --usx-icon-list-icon-text: #d83933;
66
+ --usx-combo-box-selected-bg: #d83933;
67
+ --usx-range-slider-track-bg: var(--usx-surface-1);
68
+ --usx-range-slider-track-border: #000000;
69
+ --usx-range-slider-thumb-bg: var(--usx-surface-1);
70
+ --usx-range-slider-thumb-border: #000000;
71
+ --usx-process-list-border: #ffffff;
72
+ }
package/dist/themes/ocean.css ADDED
@@ -0,0 +1,52 @@
1
+ /* GENERATED by build.js from presets.js — do not edit. */
2
+ [data-theme="ocean"] {
3
+ color-scheme: light;
4
+ --usx-color-primary: #0891b2;
5
+ --usx-color-primary-lighter: #edf6fa;
6
+ --usx-color-primary-light: #8ed1e4;
7
+ --usx-color-primary-vivid: #0a8de6;
8
+ --usx-color-primary-dark: #26678c;
9
+ --usx-color-primary-darker: #21485e;
10
+ --usx-color-primary-hover: #0c0c0c;
11
+ --usx-color-primary-active: #0c0c0c;
12
+ --usx-color-secondary: #4338ca;
13
+ --usx-color-secondary-lighter: #dddfee;
14
+ --usx-color-secondary-light: #958bea;
15
+ --usx-color-secondary-vivid: #273cd1;
16
+ --usx-color-secondary-dark: #1712a3;
17
+ --usx-color-secondary-darker: #14097c;
18
+ --usx-color-secondary-hover: #000000;
19
+ --usx-color-secondary-active: #000000;
20
+ --usx-color-accent-cool: #67e8f9;
21
+ --usx-color-accent-cool-lighter: #ffffff;
22
+ --usx-color-accent-cool-light: #ffffff;
23
+ --usx-color-accent-cool-dark: #8ed0e2;
24
+ --usx-color-accent-cool-darker: #26b9eb;
25
+ --usx-color-accent-cool-hover: #3f3f3f;
26
+ --usx-color-accent-cool-active: #3f3f3f;
27
+ --usx-color-accent-warm: #fb923c;
28
+ --usx-color-accent-warm-lighter: #f1e2d1;
29
+ --usx-color-accent-warm-light: #ffba74;
30
+ --usx-color-accent-warm-dark: #bc5500;
31
+ --usx-color-accent-warm-darker: #75533e;
32
+ --usx-color-accent-warm-hover: #000000;
33
+ --usx-color-accent-warm-active: #000000;
34
+ --usx-surface-3: #f0f9fb;
35
+ --usx-link-text: #0891b2;
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: #0891b2;
39
+ --usx-accordion-bg-hover: #e0f3f7;
40
+ --usx-banner-chevron-text: #0891b2;
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: #0891b2;
50
+ --usx-combo-box-selected-bg: #0891b2;
51
+ --usx-process-list-border: #edf6fa;
52
+ }
package/dist/themes/sunset.css ADDED
@@ -0,0 +1,52 @@
1
+ /* GENERATED by build.js from presets.js — do not edit. */
2
+ [data-theme="sunset"] {
3
+ color-scheme: light;
4
+ --usx-color-primary: #d84315;
5
+ --usx-color-primary-lighter: #ffffff;
6
+ --usx-color-primary-light: #eac7bb;
7
+ --usx-color-primary-vivid: #ec8837;
8
+ --usx-color-primary-dark: #aa683b;
9
+ --usx-color-primary-darker: #7c5336;
10
+ --usx-color-primary-hover: #262626;
11
+ --usx-color-primary-active: #262626;
12
+ --usx-color-secondary: #6a1b9a;
13
+ --usx-color-secondary-lighter: #baa2dc;
14
+ --usx-color-secondary-light: #af3cec;
15
+ --usx-color-secondary-vivid: #4b109b;
16
+ --usx-color-secondary-dark: #3c0464;
17
+ --usx-color-secondary-darker: #240137;
18
+ --usx-color-secondary-hover: #000000;
19
+ --usx-color-secondary-active: #000000;
20
+ --usx-color-accent-cool: #ff8a65;
21
+ --usx-color-accent-cool-lighter: #ffffff;
22
+ --usx-color-accent-cool-light: #ffffff;
23
+ --usx-color-accent-cool-dark: #e8ab8c;
24
+ --usx-color-accent-cool-darker: #f47121;
25
+ --usx-color-accent-cool-hover: #404040;
26
+ --usx-color-accent-cool-active: #404040;
27
+ --usx-color-accent-warm: #ffd54f;
28
+ --usx-color-accent-warm-lighter: #f7f4e2;
29
+ --usx-color-accent-warm-light: #ffea8b;
30
+ --usx-color-accent-warm-dark: #d3a000;
31
+ --usx-color-accent-warm-darker: #897341;
32
+ --usx-color-accent-warm-hover: #0a0909;
33
+ --usx-color-accent-warm-active: #0a0909;
34
+ --usx-surface-3: #fdf6f1;
35
+ --usx-link-text: #d84315;
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: #d84315;
39
+ --usx-accordion-bg-hover: #fbebe0;
40
+ --usx-banner-chevron-text: #d84315;
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: #d84315;
50
+ --usx-combo-box-selected-bg: #d84315;
51
+ --usx-process-list-border: #ffffff;
52
+ }
package/dist/themes/vads.css ADDED
@@ -0,0 +1,38 @@
1
+ /* GENERATED by build.js from presets.js — do not edit. */
2
+ [data-theme="vads"] {
3
+ color-scheme: light;
4
+ --usx-color-primary-hover: #000000;
5
+ --usx-color-primary-active: #000000;
6
+ --usx-color-secondary: #00bde3;
7
+ --usx-color-secondary-lighter: #b7f5f3;
8
+ --usx-color-secondary-light: #57ddff;
9
+ --usx-color-secondary-vivid: #00d9d3;
10
+ --usx-color-secondary-dark: #008296;
11
+ --usx-color-secondary-darker: #005366;
12
+ --usx-color-secondary-hover: #000000;
13
+ --usx-color-secondary-active: #000000;
14
+ --usx-color-accent-cool: #97d4ea;
15
+ --usx-color-accent-cool-lighter: #ffffff;
16
+ --usx-color-accent-cool-light: #ffffff;
17
+ --usx-color-accent-cool-dark: #b6cedb;
18
+ --usx-color-accent-cool-darker: #5fa4d3;
19
+ --usx-color-accent-cool-hover: #4f4f4f;
20
+ --usx-color-accent-cool-active: #4f4f4f;
21
+ --usx-color-accent-warm: #bd5727;
22
+ --usx-color-accent-warm-lighter: #c9b4a6;
23
+ --usx-color-accent-warm-light: #df7c41;
24
+ --usx-color-accent-warm-dark: #5a270f;
25
+ --usx-color-accent-warm-darker: #303030;
26
+ --usx-color-accent-warm-hover: #000000;
27
+ --usx-color-accent-warm-active: #000000;
28
+ --usx-font-family: "Source Sans Pro Web", "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
29
+ --usx-font-family-heading: Bitter, Georgia, Cambria, "Times New Roman", Times, serif;
30
+ --usx-header-border: var(--usx-color-border);
31
+ --usx-header-bg: var(--usx-surface-3);
32
+ --usx-header-nav-bg: var(--usx-surface-3);
33
+ --usx-header-nav-bg-mobile: var(--usx-surface-3);
34
+ --usx-header-nav-bottom-border: var(--usx-color-border);
35
+ --usx-footer-border: var(--usx-color-border);
36
+ --usx-footer-primary-section-border: var(--usx-color-border);
37
+ --usx-footer-secondary-section-border: var(--usx-color-border);
38
+ }