@solexllc/usx-theme 0.1.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.
- package/README.md +92 -0
- package/build.js +132 -0
- package/dist/_hooks.scss +277 -0
- package/dist/theme-manifest.json +2262 -0
- package/dist/theme.css +275 -0
- package/dist/tokens.css +22 -0
- package/dist/tokens.js +30 -0
- package/package.json +49 -0
- package/src/_variables.scss +1406 -0
- package/src/primitives/color.json +7 -0
- package/src/primitives/radius.json +7 -0
- package/src/primitives/spacing.json +7 -0
- package/src/primitives/typography.json +7 -0
- package/src/system-colors.generated.js +620 -0
- package/src/theme-manifest.js +587 -0
- package/src/tokens.scss +3 -0
|
@@ -0,0 +1,1406 @@
|
|
|
1
|
+
// _variables.scss — Design token Sass variables.
|
|
2
|
+
// @use this file to access tokens without generating any CSS output.
|
|
3
|
+
//
|
|
4
|
+
// THEMING ARCHITECTURE — no static values live in this file:
|
|
5
|
+
// * Every themeable token publishes as `usx-var($usx-<token>-var)`:
|
|
6
|
+
// - hook null (the default) → the token is null → component SCSS
|
|
7
|
+
// declarations that reference it are dropped by Sass. We don't write
|
|
8
|
+
// rules unless we need to; USWDS defaults show through.
|
|
9
|
+
// - hook set to a custom property name → the token compiles to
|
|
10
|
+
// `var(--usx-*)` with NO fallback. Runtime values come from the
|
|
11
|
+
// generated theme stylesheet (pkg:@solexllc/usx-theme dist/theme.css),
|
|
12
|
+
// which defines every custom property on :root from the manifest.
|
|
13
|
+
// * Enable theming by loading 'pkg:@solexllc/usx-theme/hooks' (generated —
|
|
14
|
+
// sets every hook) before component styles, or set individual hooks via
|
|
15
|
+
// `with (...)`. The presence of a hook is the only switch.
|
|
16
|
+
// * USX-only (custom) components need defaults to be usable without a
|
|
17
|
+
// theme; those defaults are baked into each component's own SCSS file
|
|
18
|
+
// with an "override when the token is set" rule — never here.
|
|
19
|
+
// * Compile-time only (CSS cannot theme these at runtime): breakpoints,
|
|
20
|
+
// layout widths, media queries, and the units() function.
|
|
21
|
+
//
|
|
22
|
+
// NOTE: derived shades (darker/lighter/hover/active/...) are explicit,
|
|
23
|
+
// first-class tokens — overriding a base color does NOT recompute its shades.
|
|
24
|
+
// Override each shade you care about.
|
|
25
|
+
|
|
26
|
+
// Resolves a themeable token: var(<hook>) when a hook is configured;
|
|
27
|
+
// otherwise $fallback (used to chain advanced tokens to their group token).
|
|
28
|
+
@function usx-var($hook, $fallback: null) {
|
|
29
|
+
@if $hook {
|
|
30
|
+
@return var(#{$hook});
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@return $fallback;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Guards composite values: returns $value only when $condition is non-null,
|
|
37
|
+
// so partial composites like `1px solid null` never reach the CSS output.
|
|
38
|
+
@function usx-when($condition, $value) {
|
|
39
|
+
@if not $condition {
|
|
40
|
+
@return null;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@return $value;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// ── Layout (compile-time only) ───────────────────────────────────────────────
|
|
47
|
+
$max-layout-width: 60rem !default;
|
|
48
|
+
$max-sidebar-width: 16rem !default;
|
|
49
|
+
$dynamic-content-width: calc(50% + 22rem) !default;
|
|
50
|
+
|
|
51
|
+
// ── Breakpoints (compile-time only) ─────────────────────────────────────────
|
|
52
|
+
$breakpoint-mobile: 640px !default;
|
|
53
|
+
$breakpoint-tablet: 640px !default;
|
|
54
|
+
$breakpoint-desktop: 1024px !default;
|
|
55
|
+
|
|
56
|
+
// ── Color — primitives ──────────────────────────────────────────────────────
|
|
57
|
+
$usx-color-primary-var: null !default;
|
|
58
|
+
$usx-color-primary: usx-var($usx-color-primary-var) !default;
|
|
59
|
+
|
|
60
|
+
$usx-color-primary-lighter-var: null !default;
|
|
61
|
+
$usx-color-primary-lighter: usx-var($usx-color-primary-lighter-var) !default;
|
|
62
|
+
|
|
63
|
+
$usx-color-primary-light-var: null !default;
|
|
64
|
+
$usx-color-primary-light: usx-var($usx-color-primary-light-var) !default;
|
|
65
|
+
|
|
66
|
+
$usx-color-primary-vivid-var: null !default;
|
|
67
|
+
$usx-color-primary-vivid: usx-var($usx-color-primary-vivid-var) !default;
|
|
68
|
+
|
|
69
|
+
$usx-color-primary-dark-var: null !default;
|
|
70
|
+
$usx-color-primary-dark: usx-var($usx-color-primary-dark-var) !default;
|
|
71
|
+
|
|
72
|
+
$usx-color-primary-darker-var: null !default;
|
|
73
|
+
$usx-color-primary-darker: usx-var($usx-color-primary-darker-var) !default;
|
|
74
|
+
|
|
75
|
+
$usx-color-primary-hover-var: null !default;
|
|
76
|
+
$usx-color-primary-hover: usx-var($usx-color-primary-hover-var) !default;
|
|
77
|
+
|
|
78
|
+
$usx-color-primary-active-var: null !default;
|
|
79
|
+
$usx-color-primary-active: usx-var($usx-color-primary-active-var) !default;
|
|
80
|
+
|
|
81
|
+
$usx-color-secondary-var: null !default;
|
|
82
|
+
$usx-color-secondary: usx-var($usx-color-secondary-var) !default;
|
|
83
|
+
|
|
84
|
+
$usx-color-secondary-lighter-var: null !default;
|
|
85
|
+
$usx-color-secondary-lighter: usx-var($usx-color-secondary-lighter-var) !default;
|
|
86
|
+
|
|
87
|
+
$usx-color-secondary-light-var: null !default;
|
|
88
|
+
$usx-color-secondary-light: usx-var($usx-color-secondary-light-var) !default;
|
|
89
|
+
|
|
90
|
+
$usx-color-secondary-vivid-var: null !default;
|
|
91
|
+
$usx-color-secondary-vivid: usx-var($usx-color-secondary-vivid-var) !default;
|
|
92
|
+
|
|
93
|
+
$usx-color-secondary-dark-var: null !default;
|
|
94
|
+
$usx-color-secondary-dark: usx-var($usx-color-secondary-dark-var) !default;
|
|
95
|
+
|
|
96
|
+
$usx-color-secondary-darker-var: null !default;
|
|
97
|
+
$usx-color-secondary-darker: usx-var($usx-color-secondary-darker-var) !default;
|
|
98
|
+
|
|
99
|
+
$usx-color-secondary-hover-var: null !default;
|
|
100
|
+
$usx-color-secondary-hover: usx-var($usx-color-secondary-hover-var) !default;
|
|
101
|
+
|
|
102
|
+
$usx-color-secondary-active-var: null !default;
|
|
103
|
+
$usx-color-secondary-active: usx-var($usx-color-secondary-active-var) !default;
|
|
104
|
+
|
|
105
|
+
$usx-color-accent-cool-var: null !default;
|
|
106
|
+
$usx-color-accent-cool: usx-var($usx-color-accent-cool-var) !default;
|
|
107
|
+
|
|
108
|
+
$usx-color-accent-cool-lighter-var: null !default;
|
|
109
|
+
$usx-color-accent-cool-lighter: usx-var($usx-color-accent-cool-lighter-var) !default;
|
|
110
|
+
|
|
111
|
+
$usx-color-accent-cool-light-var: null !default;
|
|
112
|
+
$usx-color-accent-cool-light: usx-var($usx-color-accent-cool-light-var) !default;
|
|
113
|
+
|
|
114
|
+
$usx-color-accent-cool-dark-var: null !default;
|
|
115
|
+
$usx-color-accent-cool-dark: usx-var($usx-color-accent-cool-dark-var) !default;
|
|
116
|
+
|
|
117
|
+
$usx-color-accent-cool-darker-var: null !default;
|
|
118
|
+
$usx-color-accent-cool-darker: usx-var($usx-color-accent-cool-darker-var) !default;
|
|
119
|
+
|
|
120
|
+
$usx-color-accent-cool-hover-var: null !default;
|
|
121
|
+
$usx-color-accent-cool-hover: usx-var($usx-color-accent-cool-hover-var) !default;
|
|
122
|
+
|
|
123
|
+
$usx-color-accent-cool-active-var: null !default;
|
|
124
|
+
$usx-color-accent-cool-active: usx-var($usx-color-accent-cool-active-var) !default;
|
|
125
|
+
|
|
126
|
+
$usx-color-accent-warm-var: null !default;
|
|
127
|
+
$usx-color-accent-warm: usx-var($usx-color-accent-warm-var) !default;
|
|
128
|
+
|
|
129
|
+
$usx-color-accent-warm-lighter-var: null !default;
|
|
130
|
+
$usx-color-accent-warm-lighter: usx-var($usx-color-accent-warm-lighter-var) !default;
|
|
131
|
+
|
|
132
|
+
$usx-color-accent-warm-light-var: null !default;
|
|
133
|
+
$usx-color-accent-warm-light: usx-var($usx-color-accent-warm-light-var) !default;
|
|
134
|
+
|
|
135
|
+
$usx-color-accent-warm-dark-var: null !default;
|
|
136
|
+
$usx-color-accent-warm-dark: usx-var($usx-color-accent-warm-dark-var) !default;
|
|
137
|
+
|
|
138
|
+
$usx-color-accent-warm-darker-var: null !default;
|
|
139
|
+
$usx-color-accent-warm-darker: usx-var($usx-color-accent-warm-darker-var) !default;
|
|
140
|
+
|
|
141
|
+
$usx-color-accent-warm-hover-var: null !default;
|
|
142
|
+
$usx-color-accent-warm-hover: usx-var($usx-color-accent-warm-hover-var) !default;
|
|
143
|
+
|
|
144
|
+
$usx-color-accent-warm-active-var: null !default;
|
|
145
|
+
$usx-color-accent-warm-active: usx-var($usx-color-accent-warm-active-var) !default;
|
|
146
|
+
|
|
147
|
+
$usx-color-base-var: null !default;
|
|
148
|
+
$usx-color-base: usx-var($usx-color-base-var) !default;
|
|
149
|
+
|
|
150
|
+
$usx-color-base-lightest-var: null !default;
|
|
151
|
+
$usx-color-base-lightest: usx-var($usx-color-base-lightest-var) !default;
|
|
152
|
+
|
|
153
|
+
$usx-color-base-lighter-var: null !default;
|
|
154
|
+
$usx-color-base-lighter: usx-var($usx-color-base-lighter-var) !default;
|
|
155
|
+
|
|
156
|
+
$usx-color-base-light-var: null !default;
|
|
157
|
+
$usx-color-base-light: usx-var($usx-color-base-light-var) !default;
|
|
158
|
+
|
|
159
|
+
$usx-color-base-dark-var: null !default;
|
|
160
|
+
$usx-color-base-dark: usx-var($usx-color-base-dark-var) !default;
|
|
161
|
+
|
|
162
|
+
$usx-color-base-darker-var: null !default;
|
|
163
|
+
$usx-color-base-darker: usx-var($usx-color-base-darker-var) !default;
|
|
164
|
+
|
|
165
|
+
$usx-color-base-darkest-var: null !default;
|
|
166
|
+
$usx-color-base-darkest: usx-var($usx-color-base-darkest-var) !default;
|
|
167
|
+
|
|
168
|
+
$usx-color-base-ink-var: null !default;
|
|
169
|
+
$usx-color-base-ink: usx-var($usx-color-base-ink-var) !default;
|
|
170
|
+
|
|
171
|
+
$usx-color-base-hover-var: null !default;
|
|
172
|
+
$usx-color-base-hover: usx-var($usx-color-base-hover-var) !default;
|
|
173
|
+
|
|
174
|
+
$usx-color-base-active-var: null !default;
|
|
175
|
+
$usx-color-base-active: usx-var($usx-color-base-active-var) !default;
|
|
176
|
+
|
|
177
|
+
$usx-color-info-var: null !default;
|
|
178
|
+
$usx-color-info: usx-var($usx-color-info-var) !default;
|
|
179
|
+
|
|
180
|
+
$usx-color-info-lighter-var: null !default;
|
|
181
|
+
$usx-color-info-lighter: usx-var($usx-color-info-lighter-var) !default;
|
|
182
|
+
|
|
183
|
+
$usx-color-info-light-var: null !default;
|
|
184
|
+
$usx-color-info-light: usx-var($usx-color-info-light-var) !default;
|
|
185
|
+
|
|
186
|
+
$usx-color-info-dark-var: null !default;
|
|
187
|
+
$usx-color-info-dark: usx-var($usx-color-info-dark-var) !default;
|
|
188
|
+
|
|
189
|
+
$usx-color-info-darker-var: null !default;
|
|
190
|
+
$usx-color-info-darker: usx-var($usx-color-info-darker-var) !default;
|
|
191
|
+
|
|
192
|
+
$usx-color-warning-var: null !default;
|
|
193
|
+
$usx-color-warning: usx-var($usx-color-warning-var) !default;
|
|
194
|
+
|
|
195
|
+
$usx-color-warning-lighter-var: null !default;
|
|
196
|
+
$usx-color-warning-lighter: usx-var($usx-color-warning-lighter-var) !default;
|
|
197
|
+
|
|
198
|
+
$usx-color-warning-light-var: null !default;
|
|
199
|
+
$usx-color-warning-light: usx-var($usx-color-warning-light-var) !default;
|
|
200
|
+
|
|
201
|
+
$usx-color-warning-dark-var: null !default;
|
|
202
|
+
$usx-color-warning-dark: usx-var($usx-color-warning-dark-var) !default;
|
|
203
|
+
|
|
204
|
+
$usx-color-warning-darker-var: null !default;
|
|
205
|
+
$usx-color-warning-darker: usx-var($usx-color-warning-darker-var) !default;
|
|
206
|
+
|
|
207
|
+
$usx-color-success-var: null !default;
|
|
208
|
+
$usx-color-success: usx-var($usx-color-success-var) !default;
|
|
209
|
+
|
|
210
|
+
$usx-color-success-lighter-var: null !default;
|
|
211
|
+
$usx-color-success-lighter: usx-var($usx-color-success-lighter-var) !default;
|
|
212
|
+
|
|
213
|
+
$usx-color-success-light-var: null !default;
|
|
214
|
+
$usx-color-success-light: usx-var($usx-color-success-light-var) !default;
|
|
215
|
+
|
|
216
|
+
$usx-color-success-dark-var: null !default;
|
|
217
|
+
$usx-color-success-dark: usx-var($usx-color-success-dark-var) !default;
|
|
218
|
+
|
|
219
|
+
$usx-color-success-darker-var: null !default;
|
|
220
|
+
$usx-color-success-darker: usx-var($usx-color-success-darker-var) !default;
|
|
221
|
+
|
|
222
|
+
$usx-color-error-var: null !default;
|
|
223
|
+
$usx-color-error: usx-var($usx-color-error-var) !default;
|
|
224
|
+
|
|
225
|
+
$usx-color-error-lighter-var: null !default;
|
|
226
|
+
$usx-color-error-lighter: usx-var($usx-color-error-lighter-var) !default;
|
|
227
|
+
|
|
228
|
+
$usx-color-error-light-var: null !default;
|
|
229
|
+
$usx-color-error-light: usx-var($usx-color-error-light-var) !default;
|
|
230
|
+
|
|
231
|
+
$usx-color-error-dark-var: null !default;
|
|
232
|
+
$usx-color-error-dark: usx-var($usx-color-error-dark-var) !default;
|
|
233
|
+
|
|
234
|
+
$usx-color-error-darker-var: null !default;
|
|
235
|
+
$usx-color-error-darker: usx-var($usx-color-error-darker-var) !default;
|
|
236
|
+
|
|
237
|
+
$usx-color-emergency-var: null !default;
|
|
238
|
+
$usx-color-emergency: usx-var($usx-color-emergency-var) !default;
|
|
239
|
+
|
|
240
|
+
$usx-color-emergency-dark-var: null !default;
|
|
241
|
+
$usx-color-emergency-dark: usx-var($usx-color-emergency-dark-var) !default;
|
|
242
|
+
|
|
243
|
+
// USWDS state color with no prior USX theme role — see theme-manifest.js.
|
|
244
|
+
$usx-color-disabled-var: null !default;
|
|
245
|
+
$usx-color-disabled: usx-var($usx-color-disabled-var) !default;
|
|
246
|
+
|
|
247
|
+
$usx-color-disabled-lighter-var: null !default;
|
|
248
|
+
$usx-color-disabled-lighter: usx-var($usx-color-disabled-lighter-var) !default;
|
|
249
|
+
|
|
250
|
+
$usx-color-disabled-light-var: null !default;
|
|
251
|
+
$usx-color-disabled-light: usx-var($usx-color-disabled-light-var) !default;
|
|
252
|
+
|
|
253
|
+
$usx-color-disabled-dark-var: null !default;
|
|
254
|
+
$usx-color-disabled-dark: usx-var($usx-color-disabled-dark-var) !default;
|
|
255
|
+
|
|
256
|
+
$usx-color-disabled-darker-var: null !default;
|
|
257
|
+
$usx-color-disabled-darker: usx-var($usx-color-disabled-darker-var) !default;
|
|
258
|
+
|
|
259
|
+
// USWDS's own default focus-outline color — see theme-manifest.js.
|
|
260
|
+
$usx-color-focus-var: null !default;
|
|
261
|
+
$usx-color-focus: usx-var($usx-color-focus-var) !default;
|
|
262
|
+
|
|
263
|
+
// Was only a link-component token — see theme-manifest.js.
|
|
264
|
+
$usx-color-visited-var: null !default;
|
|
265
|
+
$usx-color-visited: usx-var($usx-color-visited-var) !default;
|
|
266
|
+
|
|
267
|
+
// Surface abstraction: components below chain to these — not directly to
|
|
268
|
+
// the raw USWDS base-family tiers ($usx-color-base-lightest/$usx-color-base-lighter)
|
|
269
|
+
// — so a dark theme can repoint each role independently without fighting
|
|
270
|
+
// naming like "lightest" meaning the darkest surface.
|
|
271
|
+
// $usx-surface-1 — white/chrome surfaces (header, nav)
|
|
272
|
+
// $usx-surface-2 — small surfaces (footer secondary section, task-list hover,
|
|
273
|
+
// callouts)
|
|
274
|
+
// $usx-surface-3 — page background (footer primary section, carousel media)
|
|
275
|
+
$usx-surface-1-var: null !default;
|
|
276
|
+
$usx-surface-1: usx-var($usx-surface-1-var) !default;
|
|
277
|
+
|
|
278
|
+
$usx-surface-2-var: null !default;
|
|
279
|
+
$usx-surface-2: usx-var($usx-surface-2-var) !default;
|
|
280
|
+
|
|
281
|
+
$usx-surface-3-var: null !default;
|
|
282
|
+
$usx-surface-3: usx-var($usx-surface-3-var) !default;
|
|
283
|
+
|
|
284
|
+
// Shared border color: checkbox/radio tiles, task-list item dividers, sidenav
|
|
285
|
+
// item dividers, and the default (overridable) for header/footer section
|
|
286
|
+
// dividers all chain to this unless their own hook is set individually.
|
|
287
|
+
$usx-color-border-var: null !default;
|
|
288
|
+
$usx-color-border: usx-var($usx-color-border-var) !default;
|
|
289
|
+
|
|
290
|
+
$usx-color-beta-var: null !default;
|
|
291
|
+
$usx-color-beta: usx-var($usx-color-beta-var) !default;
|
|
292
|
+
|
|
293
|
+
$usx-color-test-var: null !default;
|
|
294
|
+
$usx-color-test: usx-var($usx-color-test-var) !default;
|
|
295
|
+
|
|
296
|
+
$usx-color-dev-var: null !default;
|
|
297
|
+
$usx-color-dev: usx-var($usx-color-dev-var) !default;
|
|
298
|
+
|
|
299
|
+
// Text abstraction: components chain to these four roles — mirroring the
|
|
300
|
+
// $usx-surface-1/$usx-surface-2/$usx-surface-3 pattern above, so a dark theme can flip
|
|
301
|
+
// ink colors without fighting a token literally named "light-text" when the
|
|
302
|
+
// surface it sits on isn't necessarily light. Along with surface-1/2/3 and
|
|
303
|
+
// the theme/state color families, these are the only tokens needed to build
|
|
304
|
+
// background and text colors anywhere in USX — there is no separate raw
|
|
305
|
+
// text-color primitive tier.
|
|
306
|
+
// $usx-text-ink — primary body/ink color
|
|
307
|
+
// $usx-text-muted — real USWDS bakes several nav/stepper text colors to its
|
|
308
|
+
// "base-dark" gray (#565c65) at build time — darker/more
|
|
309
|
+
// pronounced than $usx-text-subtle (nav primary links/buttons,
|
|
310
|
+
// sidenav links, step-indicator pending labels & counter
|
|
311
|
+
// numbers)
|
|
312
|
+
// $usx-text-subtle — secondary/muted text (secondary links, attributions,
|
|
313
|
+
// eyebrows, etc.)
|
|
314
|
+
// $usx-text-inverse — text drawn on a surface that's the opposite polarity of
|
|
315
|
+
// the theme's main surfaces
|
|
316
|
+
$usx-text-ink-var: null !default;
|
|
317
|
+
$usx-text-ink: usx-var($usx-text-ink-var) !default;
|
|
318
|
+
|
|
319
|
+
$usx-text-muted-var: null !default;
|
|
320
|
+
$usx-text-muted: usx-var($usx-text-muted-var) !default;
|
|
321
|
+
|
|
322
|
+
$usx-text-subtle-var: null !default;
|
|
323
|
+
$usx-text-subtle: usx-var($usx-text-subtle-var) !default;
|
|
324
|
+
|
|
325
|
+
$usx-text-inverse-var: null !default;
|
|
326
|
+
$usx-text-inverse: usx-var($usx-text-inverse-var) !default;
|
|
327
|
+
|
|
328
|
+
// ── Color map (used by usx utilities; null entries emit no classes) ─────────
|
|
329
|
+
$colors: (
|
|
330
|
+
'primary': $usx-color-primary,
|
|
331
|
+
'primary-dark': $usx-color-primary-dark,
|
|
332
|
+
'primary-darker': $usx-color-primary-darker,
|
|
333
|
+
'secondary': $usx-color-secondary,
|
|
334
|
+
'accent-cool': $usx-color-accent-cool,
|
|
335
|
+
'accent-warm': $usx-color-accent-warm,
|
|
336
|
+
'base': $usx-color-base,
|
|
337
|
+
'info': $usx-color-info,
|
|
338
|
+
'warning': $usx-color-warning,
|
|
339
|
+
'success': $usx-color-success,
|
|
340
|
+
'error': $usx-color-error,
|
|
341
|
+
'emergency': $usx-color-emergency,
|
|
342
|
+
'disabled': $usx-color-disabled,
|
|
343
|
+
'beta': $usx-color-beta,
|
|
344
|
+
'dev': $usx-color-dev,
|
|
345
|
+
'test': $usx-color-test,
|
|
346
|
+
) !default;
|
|
347
|
+
|
|
348
|
+
$text-colors: (
|
|
349
|
+
'ink': $usx-text-ink,
|
|
350
|
+
'muted': $usx-text-muted,
|
|
351
|
+
'subtle': $usx-text-subtle,
|
|
352
|
+
'inverse': $usx-text-inverse,
|
|
353
|
+
) !default;
|
|
354
|
+
|
|
355
|
+
$surface-colors: (
|
|
356
|
+
'surface-1': $usx-surface-1,
|
|
357
|
+
'surface-2': $usx-surface-2,
|
|
358
|
+
'surface-3': $usx-surface-3,
|
|
359
|
+
'surface-inverse': $usx-text-ink,
|
|
360
|
+
) !default;
|
|
361
|
+
|
|
362
|
+
// ── Spacing ─────────────────────────────────────────────────────────────────
|
|
363
|
+
$usx-spacing-xs-var: null !default;
|
|
364
|
+
$usx-spacing-xs: usx-var($usx-spacing-xs-var) !default;
|
|
365
|
+
|
|
366
|
+
$usx-spacing-sm-var: null !default;
|
|
367
|
+
$usx-spacing-sm: usx-var($usx-spacing-sm-var) !default;
|
|
368
|
+
|
|
369
|
+
$usx-spacing-md-var: null !default;
|
|
370
|
+
$usx-spacing-md: usx-var($usx-spacing-md-var) !default;
|
|
371
|
+
|
|
372
|
+
$usx-spacing-lg-var: null !default;
|
|
373
|
+
$usx-spacing-lg: usx-var($usx-spacing-lg-var) !default;
|
|
374
|
+
|
|
375
|
+
$usx-spacing-xl-var: null !default;
|
|
376
|
+
$usx-spacing-xl: usx-var($usx-spacing-xl-var) !default;
|
|
377
|
+
|
|
378
|
+
// ── Spacing function (compile-time only) ────────────────────────────────────
|
|
379
|
+
@function units($value) {
|
|
380
|
+
@return $value * 8px;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
// ── Responsive mixin ─────────────────────────────────────────────────────────
|
|
384
|
+
@mixin at-media($breakpoint) {
|
|
385
|
+
@if $breakpoint == 'mobile' {
|
|
386
|
+
@media (max-width: ($breakpoint-tablet - 1px)) {
|
|
387
|
+
@content;
|
|
388
|
+
}
|
|
389
|
+
} @else if $breakpoint == 'tablet' {
|
|
390
|
+
@media (min-width: $breakpoint-tablet) {
|
|
391
|
+
@content;
|
|
392
|
+
}
|
|
393
|
+
} @else if $breakpoint == 'desktop' {
|
|
394
|
+
@media (min-width: $breakpoint-desktop) {
|
|
395
|
+
@content;
|
|
396
|
+
}
|
|
397
|
+
} @else {
|
|
398
|
+
@warn "Unknown breakpoint: #{$breakpoint}";
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
// ── Color function ───────────────────────────────────────────────────────────
|
|
403
|
+
@function color($name) {
|
|
404
|
+
@if $name == 'white' {
|
|
405
|
+
@return #ffffff;
|
|
406
|
+
} @else if $name == 'black' {
|
|
407
|
+
@return #000000;
|
|
408
|
+
} @else {
|
|
409
|
+
@warn "Unknown color name: #{$name}";
|
|
410
|
+
@return #000000;
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
// ── Typography ───────────────────────────────────────────────────────────────
|
|
415
|
+
// Fallback matches the family actually baked into the precompiled USWDS
|
|
416
|
+
// bundle (Source Sans Pro Web) — zero drift vs. today's rendered output.
|
|
417
|
+
$usx-font-family-var: null !default;
|
|
418
|
+
$usx-font-family: usx-var($usx-font-family-var,
|
|
419
|
+
'Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif') !default;
|
|
420
|
+
|
|
421
|
+
// Headings chain to the body font by default (most themes use one family
|
|
422
|
+
// everywhere) but are their own hook, so a theme with a distinct display/
|
|
423
|
+
// serif face for headings (e.g. VA.gov's Bitter) can override just this one.
|
|
424
|
+
$usx-font-family-heading-var: null !default;
|
|
425
|
+
$usx-font-family-heading: usx-var($usx-font-family-heading-var, $usx-font-family) !default;
|
|
426
|
+
|
|
427
|
+
$usx-font-size-base-var: null !default;
|
|
428
|
+
$usx-font-size-base: usx-var($usx-font-size-base-var, 1rem) !default;
|
|
429
|
+
|
|
430
|
+
$usx-font-size-h1-var: null !default;
|
|
431
|
+
$usx-font-size-h1: usx-var($usx-font-size-h1-var, 2.5rem) !default;
|
|
432
|
+
|
|
433
|
+
$usx-font-size-h2-var: null !default;
|
|
434
|
+
$usx-font-size-h2: usx-var($usx-font-size-h2-var, 2rem) !default;
|
|
435
|
+
|
|
436
|
+
$usx-font-size-h3-var: null !default;
|
|
437
|
+
$usx-font-size-h3: usx-var($usx-font-size-h3-var, 1.75rem) !default;
|
|
438
|
+
|
|
439
|
+
$usx-font-size-h4-var: null !default;
|
|
440
|
+
$usx-font-size-h4: usx-var($usx-font-size-h4-var, 1.5rem) !default;
|
|
441
|
+
|
|
442
|
+
$usx-font-size-h5-var: null !default;
|
|
443
|
+
$usx-font-size-h5: usx-var($usx-font-size-h5-var, 1.25rem) !default;
|
|
444
|
+
|
|
445
|
+
$usx-font-size-h6-var: null !default;
|
|
446
|
+
$usx-font-size-h6: usx-var($usx-font-size-h6-var, 1rem) !default;
|
|
447
|
+
|
|
448
|
+
$usx-font-weight-regular-var: null !default;
|
|
449
|
+
$usx-font-weight-regular: usx-var($usx-font-weight-regular-var, 400) !default;
|
|
450
|
+
|
|
451
|
+
$usx-font-weight-bold-var: null !default;
|
|
452
|
+
$usx-font-weight-bold: usx-var($usx-font-weight-bold-var, 700) !default;
|
|
453
|
+
|
|
454
|
+
$usx-line-height-base-var: null !default;
|
|
455
|
+
$usx-line-height-base: usx-var($usx-line-height-base-var, 1.5) !default;
|
|
456
|
+
|
|
457
|
+
$usx-line-height-heading-var: null !default;
|
|
458
|
+
$usx-line-height-heading: usx-var($usx-line-height-heading-var, 1.2) !default;
|
|
459
|
+
|
|
460
|
+
// ── Typography — component overrides (hardcoded-value promotions) ──────────
|
|
461
|
+
$usx-attribution-primary-font-weight-var: null !default;
|
|
462
|
+
$usx-attribution-primary-font-weight: usx-var($usx-attribution-primary-font-weight-var, 600) !default;
|
|
463
|
+
|
|
464
|
+
$usx-attribution-secondary-font-size-var: null !default;
|
|
465
|
+
$usx-attribution-secondary-font-size: usx-var($usx-attribution-secondary-font-size-var, 0.875rem) !default;
|
|
466
|
+
|
|
467
|
+
$usx-avatar-content-font-weight-var: null !default;
|
|
468
|
+
$usx-avatar-content-font-weight: usx-var($usx-avatar-content-font-weight-var, 600) !default;
|
|
469
|
+
|
|
470
|
+
$usx-avatar-font-size-sm-var: null !default;
|
|
471
|
+
$usx-avatar-font-size-sm: usx-var($usx-avatar-font-size-sm-var, 0.875rem) !default;
|
|
472
|
+
|
|
473
|
+
$usx-avatar-font-size-lg-var: null !default;
|
|
474
|
+
$usx-avatar-font-size-lg: usx-var($usx-avatar-font-size-lg-var, 1.25rem) !default;
|
|
475
|
+
|
|
476
|
+
$usx-avatar-font-size-xl-var: null !default;
|
|
477
|
+
$usx-avatar-font-size-xl: usx-var($usx-avatar-font-size-xl-var, 1.5rem) !default;
|
|
478
|
+
|
|
479
|
+
$usx-calendar-date-font-size-var: null !default;
|
|
480
|
+
$usx-calendar-date-font-size: usx-var($usx-calendar-date-font-size-var, 1.13rem) !default;
|
|
481
|
+
|
|
482
|
+
$usx-code-font-size-var: null !default;
|
|
483
|
+
$usx-code-font-size: usx-var($usx-code-font-size-var, 0.875rem) !default;
|
|
484
|
+
|
|
485
|
+
$usx-misc-banner-font-size-var: null !default;
|
|
486
|
+
$usx-misc-banner-font-size: usx-var($usx-misc-banner-font-size-var, 1.07rem) !default;
|
|
487
|
+
|
|
488
|
+
$usx-modal-heading-font-size-var: null !default;
|
|
489
|
+
$usx-modal-heading-font-size: usx-var($usx-modal-heading-font-size-var, 1.34rem) !default;
|
|
490
|
+
|
|
491
|
+
$usx-tag-line-height-var: null !default;
|
|
492
|
+
$usx-tag-line-height: usx-var($usx-tag-line-height-var, 1.6) !default;
|
|
493
|
+
|
|
494
|
+
$usx-task-list-link-font-size-var: null !default;
|
|
495
|
+
$usx-task-list-link-font-size: usx-var($usx-task-list-link-font-size-var, 1.31rem) !default;
|
|
496
|
+
|
|
497
|
+
// ── Radius — primitives (reserved for utility classes) ──────────────────────
|
|
498
|
+
$usx-radius-sm-var: null !default;
|
|
499
|
+
$usx-radius-sm: usx-var($usx-radius-sm-var) !default;
|
|
500
|
+
|
|
501
|
+
$usx-radius-md-var: null !default;
|
|
502
|
+
$usx-radius-md: usx-var($usx-radius-md-var) !default;
|
|
503
|
+
|
|
504
|
+
$usx-radius-lg-var: null !default;
|
|
505
|
+
$usx-radius-lg: usx-var($usx-radius-lg-var) !default;
|
|
506
|
+
|
|
507
|
+
$usx-radius-xl-var: null !default;
|
|
508
|
+
$usx-radius-xl: usx-var($usx-radius-xl-var) !default;
|
|
509
|
+
|
|
510
|
+
$usx-radius-full-var: null !default;
|
|
511
|
+
$usx-radius-full: usx-var($usx-radius-full-var) !default;
|
|
512
|
+
|
|
513
|
+
// Semantic radii (DaisyUI-inspired): components pick a radius by group, so all
|
|
514
|
+
// boxes, all fields, all selectors, and all square components are themed
|
|
515
|
+
// independently with one variable each. Per-component "advanced" hooks
|
|
516
|
+
// (--usx-<component>-radius) override the group.
|
|
517
|
+
$usx-radius-box-var: null !default; // boxes: cards, code blocks, summary boxes, hero callouts, images
|
|
518
|
+
$usx-radius-box: usx-var($usx-radius-box-var) !default;
|
|
519
|
+
|
|
520
|
+
$usx-radius-field-var: null !default; // fields: buttons, inputs, selects, comboboxes, text areas
|
|
521
|
+
$usx-radius-field: usx-var($usx-radius-field-var) !default;
|
|
522
|
+
|
|
523
|
+
$usx-radius-selector-var: null !default; // selectors: checkboxes, badges/tags, small controls
|
|
524
|
+
$usx-radius-selector: usx-var($usx-radius-selector-var) !default;
|
|
525
|
+
|
|
526
|
+
$usx-radius-none-var: null !default; // square-by-default components: accordions, alerts
|
|
527
|
+
$usx-radius-none: usx-var($usx-radius-none-var) !default;
|
|
528
|
+
|
|
529
|
+
// ── Border ───────────────────────────────────────────────────────────────────
|
|
530
|
+
$usx-border-width-sm-var: null !default;
|
|
531
|
+
$usx-border-width-sm: usx-var($usx-border-width-sm-var) !default;
|
|
532
|
+
$usx-border-width-md-var: null !default;
|
|
533
|
+
$usx-border-width-md: usx-var($usx-border-width-md-var) !default;
|
|
534
|
+
$usx-border-width-lg-var: null !default;
|
|
535
|
+
$usx-border-width-lg: usx-var($usx-border-width-lg-var) !default;
|
|
536
|
+
$usx-border-width-xl-var: null !default;
|
|
537
|
+
$usx-border-width-xl: usx-var($usx-border-width-xl-var) !default;
|
|
538
|
+
|
|
539
|
+
// ── Component tokens: Button ─────────────────────────────────────────────────
|
|
540
|
+
$usx-radius-button-var: null !default;
|
|
541
|
+
$usx-radius-button: usx-var($usx-radius-button-var, $usx-radius-field) !default;
|
|
542
|
+
$usx-button-outline-border-width-var: null !default;
|
|
543
|
+
$usx-button-outline-border-width: usx-var($usx-button-outline-border-width-var, $usx-border-width-md) !default;
|
|
544
|
+
$usx-button-box-shadow: null !default;
|
|
545
|
+
$usx-button-primary-bg: $usx-color-primary !default;
|
|
546
|
+
$usx-button-primary-bg-hover: $usx-color-primary-hover !default;
|
|
547
|
+
$usx-button-primary-bg-active: $usx-color-primary-active !default;
|
|
548
|
+
$usx-button-primary-text: null !default;
|
|
549
|
+
$usx-button-primary-text-hover: null !default;
|
|
550
|
+
$usx-button-primary-text-active: null !default;
|
|
551
|
+
$usx-button-primary-border: null !default;
|
|
552
|
+
$usx-button-secondary-bg: $usx-color-secondary !default;
|
|
553
|
+
$usx-button-secondary-bg-hover: $usx-color-secondary-hover !default;
|
|
554
|
+
$usx-button-secondary-bg-active: $usx-color-secondary-active !default;
|
|
555
|
+
$usx-button-secondary-text: null !default;
|
|
556
|
+
$usx-button-secondary-text-hover: null !default;
|
|
557
|
+
$usx-button-secondary-text-active: null !default;
|
|
558
|
+
$usx-button-secondary-border: null !default;
|
|
559
|
+
$usx-button-accent-cool-bg: $usx-color-accent-cool !default;
|
|
560
|
+
$usx-button-accent-cool-bg-hover: $usx-color-accent-cool-hover !default;
|
|
561
|
+
$usx-button-accent-cool-bg-active: $usx-color-accent-cool-active !default;
|
|
562
|
+
$usx-button-accent-cool-text: null !default;
|
|
563
|
+
$usx-button-accent-cool-text-hover: null !default;
|
|
564
|
+
$usx-button-accent-cool-text-active: null !default;
|
|
565
|
+
$usx-button-accent-cool-border: null !default;
|
|
566
|
+
$usx-button-accent-warm-bg: $usx-color-accent-warm !default;
|
|
567
|
+
$usx-button-accent-warm-bg-hover: $usx-color-accent-warm-hover !default;
|
|
568
|
+
$usx-button-accent-warm-bg-active: $usx-color-accent-warm-active !default;
|
|
569
|
+
$usx-button-accent-warm-text: null !default;
|
|
570
|
+
$usx-button-accent-warm-text-hover: null !default;
|
|
571
|
+
$usx-button-accent-warm-text-active: null !default;
|
|
572
|
+
$usx-button-accent-warm-border: null !default;
|
|
573
|
+
$usx-button-base-bg: $usx-color-base !default;
|
|
574
|
+
$usx-button-base-bg-hover: $usx-color-base-hover !default;
|
|
575
|
+
$usx-button-base-bg-active: $usx-color-base-active !default;
|
|
576
|
+
$usx-button-base-text: null !default;
|
|
577
|
+
$usx-button-base-text-hover: null !default;
|
|
578
|
+
$usx-button-base-text-active: null !default;
|
|
579
|
+
$usx-button-base-border: null !default;
|
|
580
|
+
$usx-button-outline-bg: null !default;
|
|
581
|
+
$usx-button-outline-bg-hover: null !default;
|
|
582
|
+
$usx-button-outline-bg-active: null !default;
|
|
583
|
+
$usx-button-outline-text: $usx-color-primary !default;
|
|
584
|
+
$usx-button-outline-text-hover: $usx-color-primary-hover !default;
|
|
585
|
+
$usx-button-outline-text-active: $usx-color-primary-active !default;
|
|
586
|
+
$usx-button-outline-box-shadow: 0 0 0 $usx-button-outline-border-width currentcolor inset !default;
|
|
587
|
+
|
|
588
|
+
// ── Component tokens: Avatar Group (custom; defaults baked in SCSS) ─────────
|
|
589
|
+
$usx-avatar-group-overlap-size: null !default;
|
|
590
|
+
$usx-avatar-group-overlap-box-shadow: usx-when($usx-color-accent-cool-lighter, 0 0 0 2px $usx-color-accent-cool-lighter) !default;
|
|
591
|
+
|
|
592
|
+
// ── Component tokens: Button Group ───────────────────────────────────────────
|
|
593
|
+
$usx-button-group-segmented-divider-primary: usx-when($usx-color-primary-dark, 1px solid $usx-color-primary-dark) !default;
|
|
594
|
+
$usx-button-group-segmented-divider-secondary: usx-when($usx-color-secondary-darker, 1px solid $usx-color-secondary-darker) !default;
|
|
595
|
+
$usx-button-group-segmented-divider-accent-cool: usx-when($usx-color-accent-cool-light, 1px solid $usx-color-accent-cool-light) !default;
|
|
596
|
+
$usx-button-group-segmented-divider-accent-warm: usx-when($usx-color-accent-warm-light, 1px solid $usx-color-accent-warm-light) !default;
|
|
597
|
+
$usx-button-group-segmented-divider-base: usx-when($usx-color-base-darker, 1px solid $usx-color-base-darker) !default;
|
|
598
|
+
|
|
599
|
+
// ── Component tokens: Alert ───────────────────────────────────────────────────
|
|
600
|
+
$usx-alert-bg: null !default;
|
|
601
|
+
$usx-alert-text: null !default;
|
|
602
|
+
$usx-alert-border: null !default;
|
|
603
|
+
$usx-alert-border-width-var: null !default;
|
|
604
|
+
$usx-alert-border-width: usx-var($usx-alert-border-width-var, $usx-border-width-xl) !default;
|
|
605
|
+
$usx-alert-radius-var: null !default;
|
|
606
|
+
$usx-alert-radius: usx-var($usx-alert-radius-var, $usx-radius-none) !default;
|
|
607
|
+
$usx-alert-box-shadow: null !default;
|
|
608
|
+
$usx-alert-info-bg: $usx-color-info-lighter !default;
|
|
609
|
+
$usx-alert-info-text: null !default;
|
|
610
|
+
$usx-alert-info-link-text: null !default;
|
|
611
|
+
$usx-alert-info-border: $usx-color-info !default;
|
|
612
|
+
$usx-alert-warning-bg: $usx-color-warning-lighter !default;
|
|
613
|
+
$usx-alert-warning-text: null !default;
|
|
614
|
+
$usx-alert-warning-link-text: null !default;
|
|
615
|
+
$usx-alert-warning-border: $usx-color-warning !default;
|
|
616
|
+
$usx-alert-success-bg: $usx-color-success-lighter !default;
|
|
617
|
+
$usx-alert-success-text: null !default;
|
|
618
|
+
$usx-alert-success-link-text: null !default;
|
|
619
|
+
$usx-alert-success-border: $usx-color-success !default;
|
|
620
|
+
$usx-alert-error-bg: $usx-color-error-lighter !default;
|
|
621
|
+
$usx-alert-error-text: null !default;
|
|
622
|
+
$usx-alert-error-link-text: null !default;
|
|
623
|
+
$usx-alert-error-border: $usx-color-error !default;
|
|
624
|
+
$usx-alert-emergency-bg: $usx-color-emergency !default;
|
|
625
|
+
$usx-alert-emergency-text: $usx-text-inverse !default;
|
|
626
|
+
$usx-alert-emergency-link-text: null !default;
|
|
627
|
+
$usx-alert-emergency-border: $usx-color-emergency !default;
|
|
628
|
+
$usx-alert-slim-padding-block: null !default;
|
|
629
|
+
$usx-alert-slim-padding-inline: null !default;
|
|
630
|
+
$usx-alert-no-icon-padding-inline-start: null !default;
|
|
631
|
+
$usx-alert-body-gap: null !default;
|
|
632
|
+
$usx-alert-heading-font-size: null !default;
|
|
633
|
+
$usx-alert-heading-font-weight: $usx-font-weight-bold !default;
|
|
634
|
+
$usx-alert-heading-margin-block-end: null !default;
|
|
635
|
+
$usx-alert-text-font-size: null !default;
|
|
636
|
+
$usx-alert-text-line-height: null !default;
|
|
637
|
+
|
|
638
|
+
// ── Component tokens: Hero (custom; defaults baked in _hero.scss) ───────────
|
|
639
|
+
// Neutral dark box regardless of theme polarity: $usx-text-ink flips to a light
|
|
640
|
+
// value under dark presets (Midnight/Carbon), so Hero can't chain to it the
|
|
641
|
+
// way Header/Footer do. Defaults to $usx-color-base-darkest instead — the same
|
|
642
|
+
// theme-invariant neutral used by Tooltip — paired with $usx-text-inverse for
|
|
643
|
+
// legible light text on it.
|
|
644
|
+
$usx-hero-min-height: null !default;
|
|
645
|
+
$usx-hero-bg: $usx-color-base-darkest !default;
|
|
646
|
+
$usx-hero-text-var: null !default;
|
|
647
|
+
$usx-hero-text: usx-var($usx-hero-text-var, #fff) !default;
|
|
648
|
+
$usx-hero-overlay-bg: null !default;
|
|
649
|
+
$usx-hero-padding-block: null !default;
|
|
650
|
+
$usx-hero-padding-inline: $usx-spacing-lg !default;
|
|
651
|
+
$usx-hero-callout-bg: null !default;
|
|
652
|
+
$usx-hero-callout-max-width: null !default;
|
|
653
|
+
$usx-hero-callout-padding: $usx-spacing-xl !default;
|
|
654
|
+
$usx-hero-callout-radius-var: null !default;
|
|
655
|
+
$usx-hero-callout-radius: usx-var($usx-hero-callout-radius-var, $usx-radius-box) !default;
|
|
656
|
+
$usx-hero-heading-size: null !default;
|
|
657
|
+
$usx-hero-heading-font-weight: $usx-font-weight-bold !default;
|
|
658
|
+
$usx-hero-alt-size: null !default;
|
|
659
|
+
$usx-hero-alt-text: $usx-color-accent-cool !default;
|
|
660
|
+
$usx-hero-paragraph-size: null !default;
|
|
661
|
+
|
|
662
|
+
// ── Component tokens: Link ─────────────────────────────────────────────
|
|
663
|
+
$usx-link-text-var: null !default;
|
|
664
|
+
$usx-link-text: usx-var($usx-link-text-var, $usx-color-primary) !default;
|
|
665
|
+
$usx-link-text-hover: $usx-color-primary-hover !default;
|
|
666
|
+
$usx-link-text-active: $usx-color-primary-active !default;
|
|
667
|
+
$usx-link-text-visited-var: null !default;
|
|
668
|
+
$usx-link-text-visited: usx-var($usx-link-text-visited-var) !default;
|
|
669
|
+
|
|
670
|
+
// On a dark background (`.usa-dark-background`), USWDS swaps link/visited
|
|
671
|
+
// color to a light neutral matching the surrounding text, instead of the
|
|
672
|
+
// (illegible) blue/purple defaults above.
|
|
673
|
+
$usx-link-text-dark-var: null !default;
|
|
674
|
+
$usx-link-text-dark: usx-var($usx-link-text-dark-var) !default;
|
|
675
|
+
$usx-link-text-visited-dark-var: null !default;
|
|
676
|
+
$usx-link-text-visited-dark: usx-var($usx-link-text-visited-dark-var) !default;
|
|
677
|
+
|
|
678
|
+
// ── Component tokens: Site Alert ─────────────────────────────────────────────
|
|
679
|
+
$usx-site-alert-default-bg: null !default;
|
|
680
|
+
$usx-site-alert-default-border: null !default;
|
|
681
|
+
$usx-site-alert-emergency-bg: null !default;
|
|
682
|
+
$usx-site-alert-maintenance-bg: null !default;
|
|
683
|
+
|
|
684
|
+
// ── Component tokens: Summary Box ────────────────────────────────────────────
|
|
685
|
+
// Real USWDS's `.usa-summary-box` ships an accurate light "info" tint
|
|
686
|
+
// (background "info-lighter"/cyan-5, border "info-light"/cyan-20), which
|
|
687
|
+
// matches our own color-info-lighter/color-info-light primitives exactly —
|
|
688
|
+
// chain to those (same pattern as $usx-alert-info-bg below)
|
|
689
|
+
// so a theme that repoints the info family carries the summary box along
|
|
690
|
+
// with it. Text/link colors match existing primitives too, so they chain
|
|
691
|
+
// to those instead.
|
|
692
|
+
$usx-summary-box-border-color-var: null !default;
|
|
693
|
+
$usx-summary-box-border-color: usx-var($usx-summary-box-border-color-var, $usx-color-info-light) !default;
|
|
694
|
+
$usx-summary-box-border: usx-when($usx-summary-box-border-color, $usx-border-width-sm solid $usx-summary-box-border-color) !default;
|
|
695
|
+
$usx-summary-box-radius-var: null !default;
|
|
696
|
+
$usx-summary-box-radius: usx-var($usx-summary-box-radius-var, $usx-radius-box) !default;
|
|
697
|
+
$usx-summary-box-padding: null !default;
|
|
698
|
+
$usx-summary-box-bg-var: null !default;
|
|
699
|
+
$usx-summary-box-bg: usx-var($usx-summary-box-bg-var, $usx-color-info-lighter) !default;
|
|
700
|
+
$usx-summary-box-text-var: null !default;
|
|
701
|
+
$usx-summary-box-text: usx-var($usx-summary-box-text-var, $usx-text-ink) !default;
|
|
702
|
+
$usx-summary-box-link-text-var: null !default;
|
|
703
|
+
$usx-summary-box-link-text: usx-var($usx-summary-box-link-text-var, $usx-color-primary) !default;
|
|
704
|
+
$usx-summary-box-link-text-hover-var: null !default;
|
|
705
|
+
$usx-summary-box-link-text-hover: usx-var($usx-summary-box-link-text-hover-var, $usx-color-primary-dark) !default;
|
|
706
|
+
$usx-summary-box-link-text-visited-var: null !default;
|
|
707
|
+
$usx-summary-box-link-text-visited: usx-var($usx-summary-box-link-text-visited-var) !default;
|
|
708
|
+
|
|
709
|
+
// ── Component tokens: Toggle ───────────────────────────────────────────
|
|
710
|
+
|
|
711
|
+
/*
|
|
712
|
+
Component is somewhat complicated due to the reuse of the button group component.
|
|
713
|
+
Unless we decide to make this a fully custom component, it is limited to the
|
|
714
|
+
outline style for inactive buttons, and the primary style for the active button.
|
|
715
|
+
Active-state defaults are baked in _toggle.scss.
|
|
716
|
+
*/
|
|
717
|
+
|
|
718
|
+
$usx-border-width-inputs-var: null !default;
|
|
719
|
+
$usx-border-width-inputs: usx-var($usx-border-width-inputs-var, $usx-border-width-sm) !default;
|
|
720
|
+
|
|
721
|
+
// ── Component tokens: Combo Box ──────────────────────────────────────────────
|
|
722
|
+
$usx-combo-box-selected-bg-var: null !default;
|
|
723
|
+
$usx-combo-box-selected-bg: usx-var($usx-combo-box-selected-bg-var, $usx-color-primary) !default;
|
|
724
|
+
|
|
725
|
+
// ── Component tokens: Input / Textarea ───────────────────────────────────────
|
|
726
|
+
$usx-input-radius-var: null !default;
|
|
727
|
+
$usx-input-radius: usx-var($usx-input-radius-var, $usx-radius-field) !default;
|
|
728
|
+
$usx-input-bg: null !default;
|
|
729
|
+
$usx-input-text: null !default;
|
|
730
|
+
$usx-input-border: null !default;
|
|
731
|
+
$usx-input-padding: null !default;
|
|
732
|
+
$usx-input-error-border-width: $usx-border-width-lg !default;
|
|
733
|
+
$usx-input-error-border: $usx-color-error !default;
|
|
734
|
+
$usx-input-error-border-style: null !default;
|
|
735
|
+
$usx-input-error-padding-top: null !default;
|
|
736
|
+
$usx-input-error-padding-bottom: null !default;
|
|
737
|
+
$usx-input-success-border-width: $usx-border-width-lg !default;
|
|
738
|
+
$usx-input-success-border: $usx-color-success !default;
|
|
739
|
+
$usx-input-success-border-style: null !default;
|
|
740
|
+
$usx-input-success-padding-top: null !default;
|
|
741
|
+
$usx-input-success-padding-bottom: null !default;
|
|
742
|
+
$usx-input-focus-outline: null !default;
|
|
743
|
+
$usx-input-focus-outline-offset: null !default;
|
|
744
|
+
$usx-textarea-radius-var: null !default;
|
|
745
|
+
$usx-textarea-radius: usx-var($usx-textarea-radius-var, $usx-radius-field) !default;
|
|
746
|
+
$usx-textarea-bg: null !default;
|
|
747
|
+
$usx-textarea-text: null !default;
|
|
748
|
+
$usx-textarea-border: null !default;
|
|
749
|
+
$usx-textarea-padding: null !default;
|
|
750
|
+
|
|
751
|
+
// ── Component tokens: File Input ─────────────────────────────────────────────
|
|
752
|
+
// Own hooks for the dropzone target and the managed-multiple file-item rows
|
|
753
|
+
// (see FileInput.jsx) so either can be overridden independently — both
|
|
754
|
+
// chain to the shared border role/width by default, same as other
|
|
755
|
+
// components' advanced border overrides above.
|
|
756
|
+
$usx-file-input-border-var: null !default;
|
|
757
|
+
$usx-file-input-border: usx-var($usx-file-input-border-var, $usx-color-border) !default;
|
|
758
|
+
$usx-file-input-border-width-var: null !default;
|
|
759
|
+
$usx-file-input-border-width: usx-var($usx-file-input-border-width-var, $usx-border-width-inputs) !default;
|
|
760
|
+
$usx-file-input-item-border-var: null !default;
|
|
761
|
+
$usx-file-input-item-border: usx-var($usx-file-input-item-border-var, $usx-color-border) !default;
|
|
762
|
+
$usx-file-input-item-border-width-var: null !default;
|
|
763
|
+
$usx-file-input-item-border-width: usx-var($usx-file-input-item-border-width-var, $usx-border-width-sm) !default;
|
|
764
|
+
$usx-range-slider-border-width-var: null !default;
|
|
765
|
+
$usx-range-slider-border-width: usx-var($usx-range-slider-border-width-var, $usx-border-width-md) !default;
|
|
766
|
+
|
|
767
|
+
// USWDS bakes the "N files selected" heading/preview rows to a fixed
|
|
768
|
+
// "primary-lighter" callout background regardless of theme — chain to the
|
|
769
|
+
// same surface-2/text roles as other callout-style components (accordion,
|
|
770
|
+
// banner) rather than introducing an unrelated standalone token.
|
|
771
|
+
$usx-file-input-preview-bg-var: null !default;
|
|
772
|
+
$usx-file-input-preview-bg: usx-var($usx-file-input-preview-bg-var, $usx-surface-2) !default;
|
|
773
|
+
$usx-file-input-preview-text-var: null !default;
|
|
774
|
+
$usx-file-input-preview-text: usx-var($usx-file-input-preview-text-var, $usx-text-ink) !default;
|
|
775
|
+
|
|
776
|
+
// ── Component tokens: Switch ──────────────────────────────────────────────
|
|
777
|
+
// Default border width matches the width of checkboxes and radio buttons
|
|
778
|
+
$usx-switch-border-width-var: null !default;
|
|
779
|
+
$usx-switch-border-width: usx-var($usx-switch-border-width-var, 2px) !default;
|
|
780
|
+
$usx-switch-border-off-var: null !default;
|
|
781
|
+
$usx-switch-border-off: usx-var($usx-switch-border-off-var, $usx-text-ink) !default;
|
|
782
|
+
$usx-switch-track-bg-var: null !default;
|
|
783
|
+
$usx-switch-track-bg: usx-var($usx-switch-track-bg-var, $usx-surface-2) !default;
|
|
784
|
+
|
|
785
|
+
// ── Component tokens: Form group ─────────────────────────────────────────────
|
|
786
|
+
$usx-form-group-error-text: $usx-color-error !default;
|
|
787
|
+
$usx-form-group-error-border-width: $usx-border-width-lg !default;
|
|
788
|
+
|
|
789
|
+
// ── Component tokens: Accordion ──────────────────────────────────────────────
|
|
790
|
+
// Chain to surface-2/surface-1 (not the raw color-base-lighter/color-light
|
|
791
|
+
// primitives they replace) so a dark theme that repoints the surface roles
|
|
792
|
+
// carries the accordion along with it — see the surface-1/2/3 mapping note
|
|
793
|
+
// in theme-manifest.js. Real USWDS's button bg is actually "base-lightest"
|
|
794
|
+
// (surface-3's hex), but the button groups with table headers/callouts/
|
|
795
|
+
// footer-primary/banner under surface-2 for a consistent shared tone
|
|
796
|
+
// instead of one-off matching real USWDS pixel-for-pixel.
|
|
797
|
+
// NAMING CONVENTION: background tokens use a bare `-bg` suffix and text
|
|
798
|
+
// tokens use a bare `-text` suffix — "color" is redundant once the role
|
|
799
|
+
// (bg/text) is already in the name.
|
|
800
|
+
$usx-accordion-bg-var: null !default;
|
|
801
|
+
$usx-accordion-bg: usx-var($usx-accordion-bg-var, $usx-surface-2) !default;
|
|
802
|
+
|
|
803
|
+
$usx-accordion-bg-hover-var: null !default;
|
|
804
|
+
$usx-accordion-bg-hover: usx-var($usx-accordion-bg-hover-var, #e6e6e6) !default;
|
|
805
|
+
|
|
806
|
+
$usx-accordion-content-bg-var: null !default;
|
|
807
|
+
$usx-accordion-content-bg: usx-var($usx-accordion-content-bg-var, $usx-surface-1) !default;
|
|
808
|
+
|
|
809
|
+
// Real USWDS CSS bakes button/content text as a fixed dark "ink" color at
|
|
810
|
+
// build time (computed against USWDS's own light default background), so it
|
|
811
|
+
// never follows our runtime background overrides above. Chaining to $usx-text-ink
|
|
812
|
+
// (rather than leaving this null) keeps Default-theme output visually
|
|
813
|
+
// identical (both resolve to #1b1b1b) while automatically flipping to
|
|
814
|
+
// light text on dark presets (Carbon, Midnight) with zero preset-specific
|
|
815
|
+
// patches. Still independently overridable via the dedicated hook.
|
|
816
|
+
//
|
|
817
|
+
// Button and content text get independent hooks (rather than one shared
|
|
818
|
+
// token) so a theme can restyle just the button bg without also having to
|
|
819
|
+
// repaint the content area, and vice versa.
|
|
820
|
+
//
|
|
821
|
+
// CONVENTION: any component background token that tracks surface-1/
|
|
822
|
+
// surface-2/surface-3 should pair with a `$usx-<component>-text`
|
|
823
|
+
// token following this same `usx-var($hook, $usx-text-ink)` pattern — don't rely on
|
|
824
|
+
// cascade, since USWDS's compiled CSS often sets its own explicit (frozen)
|
|
825
|
+
// color.
|
|
826
|
+
$usx-accordion-text-var: null !default;
|
|
827
|
+
$usx-accordion-text: usx-var($usx-accordion-text-var, $usx-text-ink) !default;
|
|
828
|
+
|
|
829
|
+
$usx-accordion-content-text-var: null !default;
|
|
830
|
+
$usx-accordion-content-text: usx-var($usx-accordion-content-text-var, $usx-text-ink) !default;
|
|
831
|
+
|
|
832
|
+
$usx-accordion-radius-var: null !default;
|
|
833
|
+
$usx-accordion-radius: usx-var($usx-accordion-radius-var, $usx-radius-none) !default;
|
|
834
|
+
|
|
835
|
+
$usx-accordion-border-width-var: null !default;
|
|
836
|
+
$usx-accordion-border-width: usx-var($usx-accordion-border-width-var, $usx-border-width-lg) !default;
|
|
837
|
+
|
|
838
|
+
// Live equivalent of USWDS's $theme-accordion-icon-position setting.
|
|
839
|
+
// Values are logical inset pairs: 1.25rem auto = start, auto 1.25rem = end.
|
|
840
|
+
$usx-accordion-icon-position-var: null !default;
|
|
841
|
+
$usx-accordion-icon-position: usx-var($usx-accordion-icon-position-var, 1.25rem auto) !default;
|
|
842
|
+
$usx-accordion-icon-padding-start-var: null !default;
|
|
843
|
+
$usx-accordion-icon-padding-start: usx-var($usx-accordion-icon-padding-start-var, 3.5rem) !default;
|
|
844
|
+
$usx-accordion-icon-padding-end-var: null !default;
|
|
845
|
+
$usx-accordion-icon-padding-end: usx-var($usx-accordion-icon-padding-end-var, 1.25rem) !default;
|
|
846
|
+
|
|
847
|
+
// ── Component tokens: Branding / Logo ────────────────────────────────────────
|
|
848
|
+
// Themes ship light and dark logo artwork as separate image files, and CSS
|
|
849
|
+
// can't rewrite an <img> src at runtime. Both variants are rendered and these
|
|
850
|
+
// two tokens (`display` keywords, deliberately not booleans) decide which one
|
|
851
|
+
// is visible, so a theme swap needs nothing but a custom-property change.
|
|
852
|
+
// Each variant keeps its own <picture> sources, so screen-size responsiveness
|
|
853
|
+
// is unaffected by the theme swap.
|
|
854
|
+
$usx-logo-display-var: null !default;
|
|
855
|
+
$usx-logo-display: usx-var($usx-logo-display-var, block) !default;
|
|
856
|
+
|
|
857
|
+
$usx-logo-inverse-display-var: null !default;
|
|
858
|
+
$usx-logo-inverse-display: usx-var($usx-logo-inverse-display-var, none) !default;
|
|
859
|
+
|
|
860
|
+
// ── Component tokens: Image (custom modifier; default baked in _image.scss) ──
|
|
861
|
+
$usx-image-object-fit-type: null !default;
|
|
862
|
+
$usx-image-radius-var: null !default;
|
|
863
|
+
$usx-image-radius: usx-var($usx-image-radius-var, $usx-radius-box) !default;
|
|
864
|
+
|
|
865
|
+
// ── Component tokens: Code (custom; default baked in _code.scss) ─────────────
|
|
866
|
+
$usx-code-radius-var: null !default;
|
|
867
|
+
$usx-code-radius: usx-var($usx-code-radius-var, $usx-radius-box) !default;
|
|
868
|
+
|
|
869
|
+
// ── Component tokens: Tag ─────────────────────────────────────────────────────
|
|
870
|
+
$usx-tag-radius-var: null !default;
|
|
871
|
+
$usx-tag-radius: usx-var($usx-tag-radius-var, $usx-radius-selector) !default;
|
|
872
|
+
|
|
873
|
+
// ── Component tokens: Checkbox & Radio (Selector) ─────────────────────────────
|
|
874
|
+
$usx-checkable-radius-var: null !default;
|
|
875
|
+
$usx-checkable-radius: usx-var($usx-checkable-radius-var, $usx-radius-selector) !default;
|
|
876
|
+
$usx-checkable-tile-radius-var: null !default;
|
|
877
|
+
$usx-checkable-tile-radius: usx-var($usx-checkable-tile-radius-var, $usx-radius-selector) !default;
|
|
878
|
+
$usx-checkable-tile-border-var: null !default;
|
|
879
|
+
$usx-checkable-tile-border: usx-var($usx-checkable-tile-border-var, $usx-color-border) !default;
|
|
880
|
+
$usx-checkable-tile-border-width-var: null !default;
|
|
881
|
+
$usx-checkable-tile-border-width: usx-var($usx-checkable-tile-border-width-var, $usx-border-width-sm) !default;
|
|
882
|
+
|
|
883
|
+
// "Selector" covers both checkbox and radio unchecked ::before styling.
|
|
884
|
+
// Background chains to surface-1 (white, matching USWDS's default input
|
|
885
|
+
// background); border chains to the shared $usx-color-border token (same as
|
|
886
|
+
// the tile variants above).
|
|
887
|
+
$usx-checkable-bg-var: null !default;
|
|
888
|
+
$usx-checkable-bg: usx-var($usx-checkable-bg-var, $usx-surface-1) !default;
|
|
889
|
+
|
|
890
|
+
$usx-checkable-border-var: null !default;
|
|
891
|
+
$usx-checkable-border: usx-var($usx-checkable-border-var, $usx-text-ink) !default;
|
|
892
|
+
|
|
893
|
+
// ── Component tokens: Banner ─────────────────────────────────────────────────
|
|
894
|
+
// Real USWDS's background is actually "base-lightest" (surface-3's hex),
|
|
895
|
+
// but banner groups with table headers/accordion/callouts/footer-primary
|
|
896
|
+
// under surface-2 for a consistent shared tone — see the surface-1/2/3
|
|
897
|
+
// mapping note in theme-manifest.js. Text chains to $usx-text-ink (USWDS
|
|
898
|
+
// auto-contrasts to dark ink against the light default background; $usx-text-ink
|
|
899
|
+
// gives the same result while staying overridable/theme-aware). The
|
|
900
|
+
// "Here's how you know" action link/chevron follow the shared link color.
|
|
901
|
+
$usx-banner-bg-var: null !default;
|
|
902
|
+
$usx-banner-bg: usx-var($usx-banner-bg-var, $usx-surface-2) !default;
|
|
903
|
+
|
|
904
|
+
$usx-banner-text-var: null !default;
|
|
905
|
+
$usx-banner-text: usx-var($usx-banner-text-var, $usx-text-ink) !default;
|
|
906
|
+
|
|
907
|
+
$usx-banner-button-text-var: null !default;
|
|
908
|
+
$usx-banner-button-text: usx-var($usx-banner-button-text-var, $usx-link-text) !default;
|
|
909
|
+
|
|
910
|
+
$usx-banner-chevron-text-var: null !default;
|
|
911
|
+
$usx-banner-chevron-text: usx-var($usx-banner-chevron-text-var) !default;
|
|
912
|
+
|
|
913
|
+
// ── Component tokens: Header / Nav ───────────────────────────────────────────
|
|
914
|
+
// USWDS itself doesn't style `.usa-header`/`.usa-nav` with an explicit
|
|
915
|
+
// background or text color at all — it just inherits the page's ambient
|
|
916
|
+
// surface/ink, so these two default to empty (see theme-manifest.js, which
|
|
917
|
+
// defaults the hooks below to transparent) rather than forcing a surface
|
|
918
|
+
// color on unthemed output; the surface-3 fallback only kicks in once a
|
|
919
|
+
// consumer/preset opts into a themed shell. $usx-header-text chains
|
|
920
|
+
// to $usx-text-ink by default (matching the ambient ink color) but, unlike the
|
|
921
|
+
// other tokens here, is its own hook — so a theme with a dark/colored
|
|
922
|
+
// header (surface-3) can flip it to $usx-text-inverse independently of body text.
|
|
923
|
+
$usx-header-bg-var: null !default;
|
|
924
|
+
$usx-header-bg: usx-var($usx-header-bg-var, $usx-surface-3) !default;
|
|
925
|
+
$usx-header-text-var: null !default;
|
|
926
|
+
$usx-header-text: usx-var($usx-header-text-var, $usx-text-ink) !default;
|
|
927
|
+
$usx-header-border-var: null !default;
|
|
928
|
+
$usx-header-border: usx-var($usx-header-border-var, $usx-color-border) !default;
|
|
929
|
+
$usx-header-border-bottom: null !default;
|
|
930
|
+
$usx-header-border-top: usx-when($usx-header-border, $usx-border-width-sm inset $usx-header-border) !default;
|
|
931
|
+
|
|
932
|
+
// Own hooks (not just a Sass fallback) so a theme whose header surface is
|
|
933
|
+
// drastically different from the rest of the document (e.g. a dark/branded
|
|
934
|
+
// header) can override these independently of the ambient text-subtle role.
|
|
935
|
+
$usx-header-secondary-link-text-var: null !default;
|
|
936
|
+
$usx-header-secondary-link-text: usx-var($usx-header-secondary-link-text-var, $usx-text-subtle) !default;
|
|
937
|
+
$usx-header-secondary-link-text-hover-var: null !default;
|
|
938
|
+
$usx-header-secondary-link-text-hover: usx-var($usx-header-secondary-link-text-hover-var, $usx-color-primary) !default;
|
|
939
|
+
$usx-header-menu-btn-bg: $usx-color-primary !default;
|
|
940
|
+
$usx-header-menu-btn-bg-hover: $usx-color-primary-dark !default;
|
|
941
|
+
$usx-header-nav-top-border-var: null !default;
|
|
942
|
+
$usx-header-nav-top-border: usx-var($usx-header-nav-top-border-var, $usx-color-border) !default;
|
|
943
|
+
$usx-header-nav-bottom-border-var: null !default;
|
|
944
|
+
$usx-header-nav-bottom-border: usx-var($usx-header-nav-bottom-border-var, $usx-color-border) !default;
|
|
945
|
+
$usx-header-nav-border-bottom: usx-when($usx-header-nav-bottom-border, 2px solid $usx-header-nav-bottom-border) !default;
|
|
946
|
+
$usx-header-nav-border-top: usx-when($usx-header-nav-top-border, $usx-border-width-sm solid $usx-header-nav-top-border) !default;
|
|
947
|
+
$usx-header-nav-link-text-var: null !default;
|
|
948
|
+
$usx-header-nav-link-text: usx-var($usx-header-nav-link-text-var, $usx-text-muted) !default;
|
|
949
|
+
$usx-header-nav-link-text-mobile-var: null !default;
|
|
950
|
+
$usx-header-nav-link-text-mobile: usx-var($usx-header-nav-link-text-mobile-var, $usx-header-nav-link-text) !default;
|
|
951
|
+
|
|
952
|
+
// USWDS's own dropdown/megamenu panel IS dark navy with white links by
|
|
953
|
+
// default (verified in compiled CSS) \u2014 these two already matched reality.
|
|
954
|
+
$usx-header-nav-link-bg: $usx-color-primary-darker !default;
|
|
955
|
+
$usx-header-nav-submenu-bg: $usx-header-nav-link-bg !default;
|
|
956
|
+
|
|
957
|
+
// USWDS doesn't change nav-link text color on hover (only adds a colored
|
|
958
|
+
// underline indicator, handled separately in _header.scss) \u2014 off by default.
|
|
959
|
+
$usx-header-nav-link-text-hover-var: null !default;
|
|
960
|
+
$usx-header-nav-link-text-hover: usx-var($usx-header-nav-link-text-hover-var, $usx-color-primary) !default;
|
|
961
|
+
$usx-header-nav-link-text-hover-mobile-var: null !default;
|
|
962
|
+
$usx-header-nav-link-text-hover-mobile: usx-var($usx-header-nav-link-text-hover-mobile-var, $usx-header-nav-link-text-hover) !default;
|
|
963
|
+
|
|
964
|
+
// Same reasoning as $usx-header-bg above: empty by default,
|
|
965
|
+
// surface-3 once a theme opts in.
|
|
966
|
+
$usx-header-nav-bg-var: null !default;
|
|
967
|
+
$usx-header-nav-bg: usx-var($usx-header-nav-bg-var, $usx-surface-3) !default;
|
|
968
|
+
|
|
969
|
+
// Independent mobile override — the off-canvas drawer is a visually distinct
|
|
970
|
+
// surface from the desktop nav bar, so themes may want a different tone at
|
|
971
|
+
// each breakpoint. Chains to the desktop value by default (no change unless
|
|
972
|
+
// a theme opts in).
|
|
973
|
+
$usx-header-nav-bg-mobile-var: null !default;
|
|
974
|
+
$usx-header-nav-bg-mobile: usx-var($usx-header-nav-bg-mobile-var, $usx-header-nav-bg) !default;
|
|
975
|
+
|
|
976
|
+
// Vendor hardcodes #f0f0f0 (mobile-only) for nav link/button hover — chain to
|
|
977
|
+
// surface-2 so it stays a visibly distinct tone from the surface-3 drawer.
|
|
978
|
+
$usx-header-nav-link-bg-hover-var: null !default;
|
|
979
|
+
$usx-header-nav-link-bg-hover: usx-var($usx-header-nav-link-bg-hover-var, $usx-surface-2) !default;
|
|
980
|
+
|
|
981
|
+
// ── Component tokens: Footer ────────────────────────────────────────────────
|
|
982
|
+
// Same rationale as Header/Nav above: USWDS's real footer sections use
|
|
983
|
+
// light-gray surfaces with ordinary ink/primary-link colors, not a fixed
|
|
984
|
+
// dark brand color. Chaining to the shared $usx-surface-2/$usx-surface-3/$usx-text-ink
|
|
985
|
+
// roles (rather than the raw USWDS base-family tiers) keeps Default
|
|
986
|
+
// USWDS-accurate while still flipping dark under Carbon/Midnight.
|
|
987
|
+
$usx-footer-bg-var: null !default;
|
|
988
|
+
$usx-footer-bg: usx-var($usx-footer-bg-var, $usx-surface-3) !default;
|
|
989
|
+
|
|
990
|
+
// Own hooks (like usx-header-text) so a theme whose footer surface is
|
|
991
|
+
// drastically different (e.g. NASA's black secondary section, chained from
|
|
992
|
+
// surface-3) can override these independently of the ambient text role.
|
|
993
|
+
$usx-footer-text-var: null !default;
|
|
994
|
+
$usx-footer-text: usx-var($usx-footer-text-var, $usx-text-ink) !default;
|
|
995
|
+
$usx-footer-link-text-var: null !default;
|
|
996
|
+
$usx-footer-link-text: usx-var($usx-footer-link-text-var, $usx-color-primary) !default;
|
|
997
|
+
$usx-footer-link-text-hover-var: null !default;
|
|
998
|
+
$usx-footer-link-text-hover: usx-var($usx-footer-link-text-hover-var, $usx-color-primary-dark) !default;
|
|
999
|
+
$usx-footer-secondary-link-text-var: null !default;
|
|
1000
|
+
$usx-footer-secondary-link-text: usx-var($usx-footer-secondary-link-text-var, $usx-color-primary) !default;
|
|
1001
|
+
$usx-footer-secondary-link-text-hover-var: null !default;
|
|
1002
|
+
$usx-footer-secondary-link-text-hover: usx-var($usx-footer-secondary-link-text-hover-var, $usx-color-primary-dark) !default;
|
|
1003
|
+
$usx-footer-heading-text-var: null !default;
|
|
1004
|
+
$usx-footer-heading-text: usx-var($usx-footer-heading-text-var, $usx-text-ink) !default;
|
|
1005
|
+
|
|
1006
|
+
// Independent override for the secondary-section headings (logo/contact) —
|
|
1007
|
+
// that section sits on $usx-footer-secondary-bg (chained from
|
|
1008
|
+
// surface-3), a visually distinct surface from the primary section's
|
|
1009
|
+
// surface-2 that the nav-column/sign-up headings above sit on. Chains to
|
|
1010
|
+
// the primary heading color by default.
|
|
1011
|
+
$usx-footer-heading-secondary-text-var: null !default;
|
|
1012
|
+
$usx-footer-heading-secondary-text: usx-var($usx-footer-heading-secondary-text-var, $usx-footer-heading-text) !default;
|
|
1013
|
+
|
|
1014
|
+
// Primary/secondary sections intentionally use opposite surface tiers from
|
|
1015
|
+
// the header/table-grouped-rows/footer-secondary-border grouping — see the
|
|
1016
|
+
// surface-1/2/3 mapping note in theme-manifest.js.
|
|
1017
|
+
$usx-footer-secondary-bg: $usx-surface-3 !default;
|
|
1018
|
+
$usx-footer-primary-bg: $usx-surface-2 !default;
|
|
1019
|
+
|
|
1020
|
+
// USWDS's own social icons carry their own brand colors by default \u2014 no
|
|
1021
|
+
// filter needed unless a consumer explicitly wants a monochrome treatment.
|
|
1022
|
+
$usx-footer-social-icon-filter-var: null !default;
|
|
1023
|
+
$usx-footer-social-icon-filter: usx-var($usx-footer-social-icon-filter-var) !default;
|
|
1024
|
+
$usx-footer-sign-up-button-bg: $usx-color-primary !default;
|
|
1025
|
+
$usx-footer-social-bg-hover-var: null !default;
|
|
1026
|
+
$usx-footer-social-bg-hover: usx-var($usx-footer-social-bg-hover-var) !default;
|
|
1027
|
+
$usx-footer-social-radius: $usx-radius-button !default;
|
|
1028
|
+
|
|
1029
|
+
// Using border shrinks the icon on hover, using outline does not. Both are included as options.
|
|
1030
|
+
// Neither are required.
|
|
1031
|
+
// E.g. 2px solid $usx-color-primary;
|
|
1032
|
+
$usx-footer-social-hover-border: null !default;
|
|
1033
|
+
$usx-footer-social-hover-outline: null !default;
|
|
1034
|
+
|
|
1035
|
+
// Footer borders
|
|
1036
|
+
$usx-footer-border-var: null !default;
|
|
1037
|
+
$usx-footer-border: usx-var($usx-footer-border-var, $usx-color-border) !default;
|
|
1038
|
+
$usx-footer-primary-section-border-var: null !default;
|
|
1039
|
+
$usx-footer-primary-section-border: usx-var($usx-footer-primary-section-border-var, $usx-color-border) !default;
|
|
1040
|
+
$usx-footer-secondary-section-border-var: null !default;
|
|
1041
|
+
$usx-footer-secondary-section-border: usx-var($usx-footer-secondary-section-border-var, $usx-color-border) !default;
|
|
1042
|
+
$usx-footer-border-top: usx-when($usx-footer-border, $usx-border-width-sm solid $usx-footer-border) !default;
|
|
1043
|
+
$usx-footer-primary-section-border-top: usx-when($usx-footer-primary-section-border, $usx-border-width-sm solid $usx-footer-primary-section-border) !default;
|
|
1044
|
+
$usx-footer-secondary-section-border-top: usx-when($usx-footer-secondary-section-border, $usx-border-width-sm solid $usx-footer-secondary-section-border) !default;
|
|
1045
|
+
|
|
1046
|
+
// ── Component tokens: Page / Section ──────────────────────────────────────────
|
|
1047
|
+
// Page chains its own background to $usx-surface-1 — several patterns
|
|
1048
|
+
// (e.g. ContactForm, ProductShowcase) render <Page> without a <Layout>
|
|
1049
|
+
// ancestor to paint that surface, so Page must be able to paint it itself.
|
|
1050
|
+
// Section has no ancestor of its own to fall back on that way, so it stays
|
|
1051
|
+
// transparent by default (it's always nested in a Page or Layout already
|
|
1052
|
+
// painting the surface). Text on both is chained to $usx-text-ink so headings
|
|
1053
|
+
// and copy stay legible instead of getting stuck on real USWDS's static,
|
|
1054
|
+
// non-themeable body text color.
|
|
1055
|
+
$usx-page-bg-var: null !default;
|
|
1056
|
+
$usx-page-bg: usx-var($usx-page-bg-var, $usx-surface-1) !default;
|
|
1057
|
+
$usx-page-text-var: null !default;
|
|
1058
|
+
$usx-page-text: usx-var($usx-page-text-var, $usx-text-ink) !default;
|
|
1059
|
+
|
|
1060
|
+
$usx-section-bg-var: null !default;
|
|
1061
|
+
$usx-section-bg: usx-var($usx-section-bg-var) !default;
|
|
1062
|
+
$usx-section-text-var: null !default;
|
|
1063
|
+
$usx-section-text: usx-var($usx-section-text-var, $usx-text-ink) !default;
|
|
1064
|
+
|
|
1065
|
+
// ── Component tokens: Carousel (custom; defaults baked in _carousel.scss) ───
|
|
1066
|
+
$usx-carousel-dot-bg-var: null !default;
|
|
1067
|
+
$usx-carousel-dot-bg: usx-var($usx-carousel-dot-bg-var) !default;
|
|
1068
|
+
|
|
1069
|
+
$usx-carousel-dot-bg-hover-var: null !default;
|
|
1070
|
+
$usx-carousel-dot-bg-hover: usx-var($usx-carousel-dot-bg-hover-var) !default;
|
|
1071
|
+
|
|
1072
|
+
$usx-carousel-dot-bg-active-var: null !default;
|
|
1073
|
+
$usx-carousel-dot-bg-active: usx-var($usx-carousel-dot-bg-active-var) !default;
|
|
1074
|
+
|
|
1075
|
+
$usx-carousel-dot-gap: null !default;
|
|
1076
|
+
|
|
1077
|
+
$usx-carousel-focus-var: null !default;
|
|
1078
|
+
$usx-carousel-focus: usx-var($usx-carousel-focus-var) !default;
|
|
1079
|
+
|
|
1080
|
+
$usx-carousel-card-media-bg: $usx-surface-3 !default;
|
|
1081
|
+
|
|
1082
|
+
// ── Component tokens: SideNav ─────────────────────────────────────────────
|
|
1083
|
+
$usx-sidenav-current: $usx-color-primary !default;
|
|
1084
|
+
|
|
1085
|
+
// USWDS's nav-list mixin sets non-current links to a fixed "base-dark" gray
|
|
1086
|
+
// at build time, which is low-contrast once a preset darkens the ambient
|
|
1087
|
+
// surface. Chain to $usx-text-muted (same "base-dark" role used by nav-link and
|
|
1088
|
+
// step-indicator labels below) so it tracks the theme instead of staying
|
|
1089
|
+
// frozen.
|
|
1090
|
+
$usx-sidenav-link-text-var: null !default;
|
|
1091
|
+
$usx-sidenav-link-text: usx-var($usx-sidenav-link-text-var, $usx-text-muted) !default;
|
|
1092
|
+
$usx-sidenav-link-text-hover: $usx-color-primary !default;
|
|
1093
|
+
$usx-sidenav-bg-hover-var: null !default;
|
|
1094
|
+
$usx-sidenav-bg-hover: usx-var($usx-sidenav-bg-hover-var, $usx-surface-2) !default;
|
|
1095
|
+
$usx-sidenav-border-var: null !default;
|
|
1096
|
+
$usx-sidenav-border: usx-var($usx-sidenav-border-var, $usx-color-border) !default;
|
|
1097
|
+
$usx-sidenav-border-width-var: null !default;
|
|
1098
|
+
$usx-sidenav-border-width: usx-var($usx-sidenav-border-width-var, $usx-border-width-sm) !default;
|
|
1099
|
+
|
|
1100
|
+
// ── Component tokens: Step Indicator ──────────────────────────────────────────
|
|
1101
|
+
// Real USWDS ships this component's CSS precompiled (see usa-step-indicator's
|
|
1102
|
+
// own _index.scss), baking $step-indicator-background-color and every
|
|
1103
|
+
// $theme-step-indicator-* setting as fixed values that never respond to a
|
|
1104
|
+
// runtime theme. The tokens below cover every state (pending/current/
|
|
1105
|
+
// complete) across both the plain segment-bar layout and the --counters
|
|
1106
|
+
// circle variant, not just the two segment fill colors, so labels,
|
|
1107
|
+
// headings, and counter rings all track the theme too.
|
|
1108
|
+
$usx-step-indicator-bg-var: null !default;
|
|
1109
|
+
$usx-step-indicator-bg: usx-var($usx-step-indicator-bg-var, $usx-surface-1) !default;
|
|
1110
|
+
|
|
1111
|
+
$usx-step-indicator-segment-pending-border-var: null !default;
|
|
1112
|
+
$usx-step-indicator-segment-pending-border: usx-var($usx-step-indicator-segment-pending-border-var, $usx-color-base-light) !default;
|
|
1113
|
+
|
|
1114
|
+
$usx-step-indicator-segment-complete: $usx-color-primary-darker !default;
|
|
1115
|
+
$usx-step-indicator-segment-current: $usx-color-primary-dark !default;
|
|
1116
|
+
|
|
1117
|
+
$usx-step-indicator-segment-bar-width-var: null !default;
|
|
1118
|
+
$usx-step-indicator-segment-bar-width: usx-var($usx-step-indicator-segment-bar-width-var, $usx-border-width-xl) !default;
|
|
1119
|
+
|
|
1120
|
+
// USWDS's own pending-label/pending-counter-number color is a fixed
|
|
1121
|
+
// "base-dark" gray (#565c65) at build time; chain to $usx-text-muted (same role
|
|
1122
|
+
// as nav-link/sidenav-link above) instead of $usx-text-subtle (#71767a is too
|
|
1123
|
+
// light a match) so it tracks the theme's muted-text role.
|
|
1124
|
+
$usx-step-indicator-segment-label-text: $usx-text-muted !default;
|
|
1125
|
+
|
|
1126
|
+
// Text drawn on filled (complete/current) counter circles — contrasts
|
|
1127
|
+
// against $usx-step-indicator-segment-complete/-current-color, not
|
|
1128
|
+
// against $usx-step-indicator-bg, so the number stays
|
|
1129
|
+
// legible even if a preset darkens the ambient surface.
|
|
1130
|
+
$usx-step-indicator-counter-text: $usx-text-inverse !default;
|
|
1131
|
+
|
|
1132
|
+
$usx-step-indicator-heading-text: $usx-text-ink !default;
|
|
1133
|
+
|
|
1134
|
+
// ── Component tokens: Table (custom; defaults baked in _table.scss) ─────────
|
|
1135
|
+
// Real USWDS bakes the table's base cell background (white), header/footer
|
|
1136
|
+
// cell background ("base-lighter"), and striped-row background
|
|
1137
|
+
// ("base-lightest") as fixed values at ITS OWN build time — chain them to
|
|
1138
|
+
// the surface-1/2/3 roles so the whole table body, not just the
|
|
1139
|
+
// USX-invented hover/selected/grouped extras below, tracks the active
|
|
1140
|
+
// theme instead of staying stuck on real USWDS's static light-mode colors.
|
|
1141
|
+
$usx-table-bg-var: null !default;
|
|
1142
|
+
$usx-table-bg: usx-var($usx-table-bg-var, $usx-surface-1) !default;
|
|
1143
|
+
|
|
1144
|
+
$usx-table-header-bg-var: null !default;
|
|
1145
|
+
$usx-table-header-bg: usx-var($usx-table-header-bg-var, $usx-surface-2) !default;
|
|
1146
|
+
|
|
1147
|
+
$usx-table-stripe-bg-var: null !default;
|
|
1148
|
+
$usx-table-stripe-bg: usx-var($usx-table-stripe-bg-var, $usx-surface-3) !default;
|
|
1149
|
+
|
|
1150
|
+
$usx-table-grouped-row-bg-var: null !default;
|
|
1151
|
+
$usx-table-grouped-row-bg: usx-var($usx-table-grouped-row-bg-var, $usx-color-primary-lighter) !default;
|
|
1152
|
+
$usx-table-grouped-row-text-var: null !default;
|
|
1153
|
+
$usx-table-grouped-row-text: usx-var($usx-table-grouped-row-text-var, $usx-text-ink) !default;
|
|
1154
|
+
|
|
1155
|
+
// Hover/selected row highlights alias the surface-2/surface-3 roles (like
|
|
1156
|
+
// $usx-sidenav-bg-hover and $usx-task-list-bg-hover) rather
|
|
1157
|
+
// than a color-primary blue tint, so the table's aesthetic stays neutral and
|
|
1158
|
+
// in step with the rest of the surface system instead of an unrelated
|
|
1159
|
+
// brand-accent highlight.
|
|
1160
|
+
$usx-table-selected-bg-var: null !default;
|
|
1161
|
+
$usx-table-selected-bg: usx-var($usx-table-selected-bg-var, $usx-surface-3) !default;
|
|
1162
|
+
|
|
1163
|
+
$usx-table-bg-hover-var: null !default;
|
|
1164
|
+
$usx-table-bg-hover: usx-var($usx-table-bg-hover-var, $usx-surface-2) !default;
|
|
1165
|
+
|
|
1166
|
+
// Divider border (footer rule, sticky-first-column shadow line) — same
|
|
1167
|
+
// shared $usx-color-border role used by the header/footer/sidenav/tile dividers.
|
|
1168
|
+
$usx-table-border-var: null !default;
|
|
1169
|
+
$usx-table-border: usx-var($usx-table-border-var, $usx-color-border) !default;
|
|
1170
|
+
|
|
1171
|
+
// Muted placeholder/empty-state text.
|
|
1172
|
+
$usx-table-placeholder-text-var: null !default;
|
|
1173
|
+
$usx-table-placeholder-text: usx-var($usx-table-placeholder-text-var, $usx-text-subtle) !default;
|
|
1174
|
+
|
|
1175
|
+
// Active sort-button accent (indicates the currently sorted column).
|
|
1176
|
+
$usx-table-sorted-column-bg-var: null !default;
|
|
1177
|
+
$usx-table-sorted-column-bg: usx-var($usx-table-sorted-column-bg-var, $usx-color-primary-dark) !default;
|
|
1178
|
+
$usx-table-sorted-column-text-var: null !default;
|
|
1179
|
+
$usx-table-sorted-column-text: usx-var($usx-table-sorted-column-text-var, $usx-text-ink) !default;
|
|
1180
|
+
|
|
1181
|
+
// ── Component tokens: Task List (custom; defaults baked in _task-list.scss) ──
|
|
1182
|
+
$usx-task-list-border-var: null !default;
|
|
1183
|
+
$usx-task-list-border: usx-var($usx-task-list-border-var, $usx-color-border) !default;
|
|
1184
|
+
$usx-task-list-inner-border-width-var: null !default;
|
|
1185
|
+
$usx-task-list-inner-border-width: usx-var($usx-task-list-inner-border-width-var, $usx-border-width-sm) !default;
|
|
1186
|
+
$usx-task-list-outer-border-width-var: null !default;
|
|
1187
|
+
$usx-task-list-outer-border-width: usx-var($usx-task-list-outer-border-width-var, $usx-border-width-md) !default;
|
|
1188
|
+
$usx-task-list-bg-hover-var: null !default;
|
|
1189
|
+
$usx-task-list-bg-hover: usx-var($usx-task-list-bg-hover-var, $usx-surface-2) !default;
|
|
1190
|
+
|
|
1191
|
+
$usx-task-list-link-text-var: null !default;
|
|
1192
|
+
$usx-task-list-link-text: usx-var($usx-task-list-link-text-var, $usx-link-text) !default;
|
|
1193
|
+
|
|
1194
|
+
// ── Component tokens: Attribution (custom; default baked in SCSS) ────────────
|
|
1195
|
+
$usx-attribution-secondary-text-var: null !default;
|
|
1196
|
+
$usx-attribution-secondary-text: usx-var($usx-attribution-secondary-text-var, $usx-text-subtle) !default;
|
|
1197
|
+
|
|
1198
|
+
// ── Component tokens: Block (custom; default baked in _block.scss) ───────────
|
|
1199
|
+
$usx-block-callout-bg-var: null !default;
|
|
1200
|
+
$usx-block-callout-bg: usx-var($usx-block-callout-bg-var, $usx-surface-2) !default;
|
|
1201
|
+
$usx-block-border-width-var: null !default;
|
|
1202
|
+
$usx-block-border-width: usx-var($usx-block-border-width-var, $usx-border-width-lg) !default;
|
|
1203
|
+
$usx-block-border-var: null !default;
|
|
1204
|
+
|
|
1205
|
+
// ── Component tokens: Clickable (custom; defaults baked in SCSS) ─────────────
|
|
1206
|
+
$usx-clickable-focus-var: null !default;
|
|
1207
|
+
$usx-clickable-focus: usx-var($usx-clickable-focus-var) !default;
|
|
1208
|
+
|
|
1209
|
+
$usx-clickable-text-hover-var: null !default;
|
|
1210
|
+
$usx-clickable-text-hover: usx-var($usx-clickable-text-hover-var) !default;
|
|
1211
|
+
|
|
1212
|
+
// ── Component tokens: Misc Banner (custom; defaults baked in SCSS) ───────────
|
|
1213
|
+
$usx-misc-banner-focus-var: null !default;
|
|
1214
|
+
$usx-misc-banner-focus: usx-var($usx-misc-banner-focus-var) !default;
|
|
1215
|
+
|
|
1216
|
+
$usx-misc-banner-badge-radius-var: null !default;
|
|
1217
|
+
$usx-misc-banner-badge-radius: usx-var($usx-misc-banner-badge-radius-var, $usx-radius-selector) !default;
|
|
1218
|
+
|
|
1219
|
+
// ── Component tokens: Theme Picker (custom; defaults baked in SCSS) ─────────
|
|
1220
|
+
$usx-theme-picker-trigger-text-var: null !default;
|
|
1221
|
+
$usx-theme-picker-trigger-text: usx-var($usx-theme-picker-trigger-text-var, $usx-text-ink) !default;
|
|
1222
|
+
|
|
1223
|
+
// ── Component tokens: Tooltip ─────────────────────────────────────────────
|
|
1224
|
+
// Real USWDS CSS bakes the tooltip's background/font color as fixed values
|
|
1225
|
+
// computed from $theme-tooltip-background-color/$theme-tooltip-font-color
|
|
1226
|
+
// at build time, so it never follows our runtime overrides and stays a flat
|
|
1227
|
+
// "ink" black in every theme. Defaults to $usx-color-base-darkest (a stable,
|
|
1228
|
+
// theme-invariant neutral that stays dark under both light and dark presets,
|
|
1229
|
+
// unlike $usx-text-ink) so the tooltip stays a consistent dark chip; pair with
|
|
1230
|
+
// $usx-text-inverse for legible light text on it.
|
|
1231
|
+
$usx-tooltip-bg-var: null !default;
|
|
1232
|
+
$usx-tooltip-bg: usx-var($usx-tooltip-bg-var, $usx-color-base-darkest) !default;
|
|
1233
|
+
|
|
1234
|
+
$usx-tooltip-text-var: null !default;
|
|
1235
|
+
$usx-tooltip-text: usx-var($usx-tooltip-text-var, $usx-text-inverse) !default;
|
|
1236
|
+
|
|
1237
|
+
// ── Component tokens: Icon List (custom; default baked in _icon-list.scss) ───
|
|
1238
|
+
// Real USWDS only colors `.usa-icon-list__icon` via opt-in BEM modifier
|
|
1239
|
+
// classes (`.usa-icon-list--primary`, etc.) — with no modifier, the icon
|
|
1240
|
+
// just inherits ambient ink. Give it a themeable default instead so icons
|
|
1241
|
+
// read as branded (primary) without requiring a modifier class.
|
|
1242
|
+
$usx-icon-list-icon-text-var: null !default;
|
|
1243
|
+
$usx-icon-list-icon-text: usx-var($usx-icon-list-icon-text-var, $usx-color-primary) !default;
|
|
1244
|
+
|
|
1245
|
+
// ── Component tokens: Date Picker (custom; defaults baked in SCSS) ───────────
|
|
1246
|
+
// Real USWDS bakes the toggle button's calendar icon as a fixed-color
|
|
1247
|
+
// background-image at build time, so it never follows a runtime text-color
|
|
1248
|
+
// override.
|
|
1249
|
+
$usx-date-picker-button-icon-color-var: null !default;
|
|
1250
|
+
$usx-date-picker-button-icon-color: usx-var($usx-date-picker-button-icon-color-var, $usx-text-ink) !default;
|
|
1251
|
+
|
|
1252
|
+
$usx-date-picker-button-hover-active-bg-var: null !default;
|
|
1253
|
+
$usx-date-picker-button-hover-active-bg: usx-var($usx-date-picker-button-hover-active-bg-var, $usx-color-base-light) !default;
|
|
1254
|
+
|
|
1255
|
+
// ── Component tokens: Range Slider (custom; defaults baked in SCSS) ─────────
|
|
1256
|
+
// Real USWDS bakes the track/thumb to fixed "base-lightest"/"base-darker"
|
|
1257
|
+
// grays and the thumb's focus ring to a compile-time Sass setting. Kept
|
|
1258
|
+
// static here on purpose (matches $usx-input-bg/-border below, always
|
|
1259
|
+
// null) rather than chained to surface-3 — form controls keep one fixed
|
|
1260
|
+
// white-ish surface + gray border across every preset.
|
|
1261
|
+
$usx-range-slider-track-bg-var: null !default;
|
|
1262
|
+
$usx-range-slider-track-bg: usx-var($usx-range-slider-track-bg-var, $usx-color-base-lightest) !default;
|
|
1263
|
+
|
|
1264
|
+
$usx-range-slider-track-border-var: null !default;
|
|
1265
|
+
$usx-range-slider-track-border: usx-var($usx-range-slider-track-border-var, $usx-color-base-darker) !default;
|
|
1266
|
+
|
|
1267
|
+
$usx-range-slider-thumb-bg-var: null !default;
|
|
1268
|
+
$usx-range-slider-thumb-bg: usx-var($usx-range-slider-thumb-bg-var, $usx-color-base-lightest) !default;
|
|
1269
|
+
|
|
1270
|
+
$usx-range-slider-thumb-border-var: null !default;
|
|
1271
|
+
$usx-range-slider-thumb-border: usx-var($usx-range-slider-thumb-border-var, $usx-color-base-darker) !default;
|
|
1272
|
+
|
|
1273
|
+
$usx-range-slider-focus-var: null !default;
|
|
1274
|
+
$usx-range-slider-focus: usx-var($usx-range-slider-focus-var, $usx-color-focus) !default;
|
|
1275
|
+
|
|
1276
|
+
// ── Component tokens: In-page Navigation (custom; defaults baked in SCSS) ───
|
|
1277
|
+
// Real USWDS resolves the nav card's background/text/link/current/bar colors
|
|
1278
|
+
// from compile-time $theme-in-page-nav-* Sass settings (all "default", i.e.
|
|
1279
|
+
// computed against the page background at build time), so none of them track
|
|
1280
|
+
// a runtime theme override on their own. Chain each role to the same shared
|
|
1281
|
+
// tokens the rest of the system already uses (text, link-text, color-border,
|
|
1282
|
+
// color-primary) instead of freezing fixed hex values. Background defaults
|
|
1283
|
+
// to transparent (nav card just inherits the ambient page surface); presets
|
|
1284
|
+
// with a dark shell opt back into a filled surface-2 card explicitly.
|
|
1285
|
+
$usx-in-page-nav-bg-var: null !default;
|
|
1286
|
+
$usx-in-page-nav-bg: usx-var($usx-in-page-nav-bg-var, transparent) !default;
|
|
1287
|
+
|
|
1288
|
+
$usx-in-page-nav-text-var: null !default;
|
|
1289
|
+
$usx-in-page-nav-text: usx-var($usx-in-page-nav-text-var, $usx-text-ink) !default;
|
|
1290
|
+
|
|
1291
|
+
$usx-in-page-nav-border-var: null !default;
|
|
1292
|
+
$usx-in-page-nav-border: usx-var($usx-in-page-nav-border-var, $usx-color-border) !default;
|
|
1293
|
+
|
|
1294
|
+
$usx-in-page-nav-link-text-var: null !default;
|
|
1295
|
+
$usx-in-page-nav-link-text: usx-var($usx-in-page-nav-link-text-var, $usx-link-text) !default;
|
|
1296
|
+
|
|
1297
|
+
$usx-in-page-nav-link-text-hover-var: null !default;
|
|
1298
|
+
$usx-in-page-nav-link-text-hover: usx-var($usx-in-page-nav-link-text-hover-var, $usx-link-text-hover) !default;
|
|
1299
|
+
|
|
1300
|
+
$usx-in-page-nav-current-text-var: null !default;
|
|
1301
|
+
$usx-in-page-nav-current-text: usx-var($usx-in-page-nav-current-text-var, $usx-text-ink) !default;
|
|
1302
|
+
|
|
1303
|
+
$usx-in-page-nav-bar-var: null !default;
|
|
1304
|
+
$usx-in-page-nav-bar: usx-var($usx-in-page-nav-bar-var, $usx-color-primary) !default;
|
|
1305
|
+
|
|
1306
|
+
// ── Component tokens: Breadcrumb (custom; defaults baked in SCSS) ──────────
|
|
1307
|
+
// Real USWDS hardcodes breadcrumb text/background to fixed #1b1b1b/#fff
|
|
1308
|
+
// regardless of theme. It's a nav/wayfinding element (like in-page-nav
|
|
1309
|
+
// above), so it should track the theme instead of staying static.
|
|
1310
|
+
$usx-breadcrumb-bg-var: null !default;
|
|
1311
|
+
$usx-breadcrumb-bg: usx-var($usx-breadcrumb-bg-var, transparent) !default;
|
|
1312
|
+
|
|
1313
|
+
$usx-breadcrumb-text-var: null !default;
|
|
1314
|
+
$usx-breadcrumb-text: usx-var($usx-breadcrumb-text-var, $usx-text-ink) !default;
|
|
1315
|
+
|
|
1316
|
+
$usx-breadcrumb-link-text-var: null !default;
|
|
1317
|
+
$usx-breadcrumb-link-text: usx-var($usx-breadcrumb-link-text-var, $usx-link-text) !default;
|
|
1318
|
+
|
|
1319
|
+
$usx-breadcrumb-link-text-hover-var: null !default;
|
|
1320
|
+
$usx-breadcrumb-link-text-hover: usx-var($usx-breadcrumb-link-text-hover-var, $usx-link-text-hover) !default;
|
|
1321
|
+
|
|
1322
|
+
$usx-breadcrumb-current-text-var: null !default;
|
|
1323
|
+
$usx-breadcrumb-current-text: usx-var($usx-breadcrumb-current-text-var, $usx-text-ink) !default;
|
|
1324
|
+
|
|
1325
|
+
// ── Component tokens: Process List (custom; defaults baked in SCSS) ────────
|
|
1326
|
+
// Real USWDS hardcodes heading/number-circle text to #1b1b1b and the
|
|
1327
|
+
// connecting line + circle border to fixed light-blue/gray-cool literals,
|
|
1328
|
+
// none of which track a runtime theme override.
|
|
1329
|
+
$usx-process-list-heading-text-var: null !default;
|
|
1330
|
+
$usx-process-list-heading-text: usx-var($usx-process-list-heading-text-var, $usx-text-ink) !default;
|
|
1331
|
+
|
|
1332
|
+
$usx-process-list-border-var: null !default;
|
|
1333
|
+
$usx-process-list-border: usx-var($usx-process-list-border-var, $usx-color-primary) !default;
|
|
1334
|
+
|
|
1335
|
+
$usx-process-list-counter-text-var: null !default;
|
|
1336
|
+
$usx-process-list-counter-text: usx-var($usx-process-list-counter-text-var, $usx-text-ink) !default;
|
|
1337
|
+
|
|
1338
|
+
$usx-process-list-counter-border-var: null !default;
|
|
1339
|
+
$usx-process-list-counter-border: usx-var($usx-process-list-counter-border-var, $usx-text-ink) !default;
|
|
1340
|
+
|
|
1341
|
+
$usx-process-list-counter-ring-var: null !default;
|
|
1342
|
+
$usx-process-list-counter-ring: usx-var($usx-process-list-counter-ring-var, $usx-surface-1) !default;
|
|
1343
|
+
|
|
1344
|
+
// ── Component tokens: Collection (custom; defaults baked in SCSS) ──────────
|
|
1345
|
+
// Real USWDS never sets a color on collection meta/description — they
|
|
1346
|
+
// inherit ambient text (the heading link is already themed via .usx-link).
|
|
1347
|
+
$usx-collection-meta-text-var: null !default;
|
|
1348
|
+
$usx-collection-meta-text: usx-var($usx-collection-meta-text-var, $usx-text-subtle) !default;
|
|
1349
|
+
|
|
1350
|
+
$usx-collection-description-text-var: null !default;
|
|
1351
|
+
$usx-collection-description-text: usx-var($usx-collection-description-text-var, $usx-text-ink) !default;
|
|
1352
|
+
|
|
1353
|
+
// ── Component tokens: Pagination (custom; defaults baked in SCSS) ──────────
|
|
1354
|
+
// Real USWDS's compiled CSS hardcodes pagination link/button text and the
|
|
1355
|
+
// current-page underline to literal `color("primary")`/`color("primary-
|
|
1356
|
+
// vivid")` — nav/wayfinding element, should track the theme.
|
|
1357
|
+
$usx-pagination-link-text-var: null !default;
|
|
1358
|
+
$usx-pagination-link-text: usx-var($usx-pagination-link-text-var, $usx-link-text) !default;
|
|
1359
|
+
|
|
1360
|
+
$usx-pagination-link-text-hover-var: null !default;
|
|
1361
|
+
$usx-pagination-link-text-hover: usx-var($usx-pagination-link-text-hover-var, $usx-link-text-hover) !default;
|
|
1362
|
+
|
|
1363
|
+
$usx-pagination-current-bg-var: null !default;
|
|
1364
|
+
$usx-pagination-current-bg: usx-var($usx-pagination-current-bg-var, $usx-color-primary) !default;
|
|
1365
|
+
|
|
1366
|
+
$usx-pagination-current-text-var: null !default;
|
|
1367
|
+
$usx-pagination-current-text: usx-var($usx-pagination-current-text-var, $usx-text-inverse) !default;
|
|
1368
|
+
|
|
1369
|
+
// Real USWDS also hardcodes the `.usa-pagination` nav itself to a static
|
|
1370
|
+
// white bg / #1b1b1b text, which floats as an opaque box over a themed
|
|
1371
|
+
// (e.g. dark) page background instead of blending into it.
|
|
1372
|
+
$usx-pagination-bg-var: null !default;
|
|
1373
|
+
$usx-pagination-bg: usx-var($usx-pagination-bg-var, transparent) !default;
|
|
1374
|
+
|
|
1375
|
+
$usx-pagination-text-var: null !default;
|
|
1376
|
+
$usx-pagination-text: usx-var($usx-pagination-text-var, $usx-text-ink) !default;
|
|
1377
|
+
|
|
1378
|
+
// Real USWDS hardcodes the button border to rgba(27,27,27,.2), a black-based
|
|
1379
|
+
// translucent border that's drowned out on dark surfaces.
|
|
1380
|
+
$usx-pagination-button-border-var: null !default;
|
|
1381
|
+
$usx-pagination-button-border: usx-var($usx-pagination-button-border-var, $usx-color-border) !default;
|
|
1382
|
+
|
|
1383
|
+
// Real USWDS hardcodes the modal surface to a static white background with
|
|
1384
|
+
// auto-contrast (effectively text-ink) body text, and the close button to
|
|
1385
|
+
// color("base") / color("ink") on hover — chained here instead.
|
|
1386
|
+
$usx-modal-bg-var: null !default;
|
|
1387
|
+
$usx-modal-bg: usx-var($usx-modal-bg-var, $usx-surface-1) !default;
|
|
1388
|
+
|
|
1389
|
+
$usx-modal-text-var: null !default;
|
|
1390
|
+
$usx-modal-text: usx-var($usx-modal-text-var, $usx-text-ink) !default;
|
|
1391
|
+
|
|
1392
|
+
$usx-modal-close-text-var: null !default;
|
|
1393
|
+
$usx-modal-close-text: usx-var($usx-modal-close-text-var, $usx-text-subtle) !default;
|
|
1394
|
+
|
|
1395
|
+
$usx-modal-close-text-hover-var: null !default;
|
|
1396
|
+
$usx-modal-close-text-hover: usx-var($usx-modal-close-text-hover-var, $usx-text-ink) !default;
|
|
1397
|
+
|
|
1398
|
+
// ── Component tokens: Language Selector (custom; defaults baked in SCSS) ──
|
|
1399
|
+
// Real USWDS hardcodes the language-menu dropdown to color("primary-darker")
|
|
1400
|
+
// bg / white text — chained here to the theme's primary-darker shade.
|
|
1401
|
+
$usx-language-selector-menu-bg-var: null !default;
|
|
1402
|
+
$usx-language-selector-menu-bg: usx-var($usx-language-selector-menu-bg-var, $usx-color-primary-darker) !default;
|
|
1403
|
+
|
|
1404
|
+
$usx-language-selector-menu-text-var: null !default;
|
|
1405
|
+
$usx-language-selector-menu-text: usx-var($usx-language-selector-menu-text-var, $usx-text-inverse) !default;
|
|
1406
|
+
|