@department-of-veterans-affairs/css-library 0.20.0 → 0.21.1
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/dist/stylesheets/base/utils.css +1 -1
- package/dist/stylesheets/base/va.css +0 -21
- package/dist/stylesheets/core.css +2771 -91
- package/dist/stylesheets/elements/lists.css +2786 -0
- package/dist/stylesheets/formation-overrides/elements/typography.css +2 -2
- package/dist/stylesheets/modules/m-process-list.css +0 -5
- package/dist/tokens/css/variables.css +1 -1
- package/dist/tokens/scss/variables.scss +1 -1
- package/package.json +1 -1
- package/dist/stylesheets/formation-overrides/elements/lists.css +0 -57
|
@@ -0,0 +1,2786 @@
|
|
|
1
|
+
/*
|
|
2
|
+
----------------------------------------
|
|
3
|
+
advanced-color()
|
|
4
|
+
----------------------------------------
|
|
5
|
+
Derive a color from a color triplet:
|
|
6
|
+
[family], [grade], [variant]
|
|
7
|
+
----------------------------------------
|
|
8
|
+
*/
|
|
9
|
+
/*
|
|
10
|
+
----------------------------------------
|
|
11
|
+
append-important()
|
|
12
|
+
----------------------------------------
|
|
13
|
+
Append `!important` to a list
|
|
14
|
+
----------------------------------------
|
|
15
|
+
*/
|
|
16
|
+
/*
|
|
17
|
+
----------------------------------------
|
|
18
|
+
get-last()
|
|
19
|
+
----------------------------------------
|
|
20
|
+
Return the last item of a list,
|
|
21
|
+
Return null if the value is null
|
|
22
|
+
----------------------------------------
|
|
23
|
+
*/
|
|
24
|
+
/*
|
|
25
|
+
----------------------------------------
|
|
26
|
+
de-list()
|
|
27
|
+
----------------------------------------
|
|
28
|
+
Transform a one-element list or arglist
|
|
29
|
+
into that single element.
|
|
30
|
+
----------------------------------------
|
|
31
|
+
(1) => 1
|
|
32
|
+
((1)) => (1)
|
|
33
|
+
----------------------------------------
|
|
34
|
+
*/
|
|
35
|
+
/*
|
|
36
|
+
----------------------------------------
|
|
37
|
+
error-not-token()
|
|
38
|
+
----------------------------------------
|
|
39
|
+
Returns a common not-a-token error.
|
|
40
|
+
----------------------------------------
|
|
41
|
+
*/
|
|
42
|
+
/*
|
|
43
|
+
----------------------------------------
|
|
44
|
+
uswds-error()
|
|
45
|
+
----------------------------------------
|
|
46
|
+
Allow the system to pass an error as text
|
|
47
|
+
to test error states in unit testing
|
|
48
|
+
----------------------------------------
|
|
49
|
+
*/
|
|
50
|
+
/*
|
|
51
|
+
----------------------------------------
|
|
52
|
+
get-default()
|
|
53
|
+
----------------------------------------
|
|
54
|
+
Returns the default value from a map
|
|
55
|
+
of project defaults
|
|
56
|
+
get-default("bg-color")
|
|
57
|
+
> $theme-body-background-color
|
|
58
|
+
----------------------------------------
|
|
59
|
+
*/
|
|
60
|
+
/*
|
|
61
|
+
* * * * * ==============================
|
|
62
|
+
* * * * * ==============================
|
|
63
|
+
* * * * * ==============================
|
|
64
|
+
* * * * * ==============================
|
|
65
|
+
========================================
|
|
66
|
+
========================================
|
|
67
|
+
========================================
|
|
68
|
+
----------------------------------------
|
|
69
|
+
GENERAL SETTINGS
|
|
70
|
+
----------------------------------------
|
|
71
|
+
Read more about settings and
|
|
72
|
+
USWDS style tokens in the documentation:
|
|
73
|
+
https://designsystem.digital.gov/design-tokens
|
|
74
|
+
----------------------------------------
|
|
75
|
+
*/
|
|
76
|
+
/*
|
|
77
|
+
----------------------------------------
|
|
78
|
+
Image path
|
|
79
|
+
----------------------------------------
|
|
80
|
+
Relative image file path
|
|
81
|
+
----------------------------------------
|
|
82
|
+
*/
|
|
83
|
+
/*
|
|
84
|
+
----------------------------------------
|
|
85
|
+
Show compile warnings
|
|
86
|
+
----------------------------------------
|
|
87
|
+
Show Sass warnings when functions and
|
|
88
|
+
mixins use non-standard tokens.
|
|
89
|
+
AND
|
|
90
|
+
Show updates and notifications.
|
|
91
|
+
----------------------------------------
|
|
92
|
+
*/
|
|
93
|
+
/*
|
|
94
|
+
----------------------------------------
|
|
95
|
+
Namespace
|
|
96
|
+
----------------------------------------
|
|
97
|
+
*/
|
|
98
|
+
/*
|
|
99
|
+
----------------------------------------
|
|
100
|
+
Prefix separator
|
|
101
|
+
----------------------------------------
|
|
102
|
+
Set the character the separates
|
|
103
|
+
responsive and state prefixes from the
|
|
104
|
+
main class name.
|
|
105
|
+
The default (":") needs to be preceded
|
|
106
|
+
by two backslashes to be properly
|
|
107
|
+
escaped.
|
|
108
|
+
----------------------------------------
|
|
109
|
+
*/
|
|
110
|
+
/*
|
|
111
|
+
----------------------------------------
|
|
112
|
+
Layout grid
|
|
113
|
+
----------------------------------------
|
|
114
|
+
Should the layout grid classes output
|
|
115
|
+
with !important
|
|
116
|
+
----------------------------------------
|
|
117
|
+
*/
|
|
118
|
+
/*
|
|
119
|
+
----------------------------------------
|
|
120
|
+
Border box sizing
|
|
121
|
+
----------------------------------------
|
|
122
|
+
When set to true, sets the box-sizing
|
|
123
|
+
property of all site elements to
|
|
124
|
+
`border-box`.
|
|
125
|
+
----------------------------------------
|
|
126
|
+
*/
|
|
127
|
+
/*
|
|
128
|
+
----------------------------------------
|
|
129
|
+
Focus styles
|
|
130
|
+
----------------------------------------
|
|
131
|
+
*/
|
|
132
|
+
/*
|
|
133
|
+
----------------------------------------
|
|
134
|
+
Icons
|
|
135
|
+
----------------------------------------
|
|
136
|
+
*/
|
|
137
|
+
/*
|
|
138
|
+
* * * * * ==============================
|
|
139
|
+
* * * * * ==============================
|
|
140
|
+
* * * * * ==============================
|
|
141
|
+
* * * * * ==============================
|
|
142
|
+
========================================
|
|
143
|
+
========================================
|
|
144
|
+
========================================
|
|
145
|
+
----------------------------------------
|
|
146
|
+
TYPOGRAPHY SETTINGS
|
|
147
|
+
----------------------------------------
|
|
148
|
+
Read more about settings and
|
|
149
|
+
USWDS typography tokens in the documentation:
|
|
150
|
+
https://designsystem.digital.gov/design-tokens/typesetting/overview/
|
|
151
|
+
----------------------------------------
|
|
152
|
+
*/
|
|
153
|
+
/*
|
|
154
|
+
----------------------------------------
|
|
155
|
+
Root font size
|
|
156
|
+
----------------------------------------
|
|
157
|
+
Setting $theme-respect-user-font-size to
|
|
158
|
+
true sets the root font size to 100% and
|
|
159
|
+
uses ems for media queries
|
|
160
|
+
----------------------------------------
|
|
161
|
+
$theme-root-font-size only applies when
|
|
162
|
+
$theme-respect-user-font-size is set to
|
|
163
|
+
false.
|
|
164
|
+
|
|
165
|
+
This will set the root font size
|
|
166
|
+
as a specific px value and use px values
|
|
167
|
+
for media queries.
|
|
168
|
+
|
|
169
|
+
Accepts true or false
|
|
170
|
+
----------------------------------------
|
|
171
|
+
*/
|
|
172
|
+
/*
|
|
173
|
+
----------------------------------------
|
|
174
|
+
Global styles
|
|
175
|
+
----------------------------------------
|
|
176
|
+
Adds basic styling for the following
|
|
177
|
+
unclassed elements:
|
|
178
|
+
|
|
179
|
+
- paragraph: paragraph text
|
|
180
|
+
- link: links
|
|
181
|
+
- content: paragraph text, links,
|
|
182
|
+
headings, lists, and tables
|
|
183
|
+
----------------------------------------
|
|
184
|
+
*/
|
|
185
|
+
/*
|
|
186
|
+
----------------------------------------
|
|
187
|
+
Broswer compatibility mode
|
|
188
|
+
----------------------------------------
|
|
189
|
+
When true, outputs woff and ttf font
|
|
190
|
+
formats in addition to woff2
|
|
191
|
+
----------------------------------------
|
|
192
|
+
*/
|
|
193
|
+
/*
|
|
194
|
+
----------------------------------------
|
|
195
|
+
Font path
|
|
196
|
+
----------------------------------------
|
|
197
|
+
Relative font file path
|
|
198
|
+
----------------------------------------
|
|
199
|
+
*/
|
|
200
|
+
/*
|
|
201
|
+
----------------------------------------
|
|
202
|
+
Custom typeface tokens
|
|
203
|
+
----------------------------------------
|
|
204
|
+
Add a new custom typeface token if
|
|
205
|
+
your project uses a typeface not already
|
|
206
|
+
defined by USWDS.
|
|
207
|
+
----------------------------------------
|
|
208
|
+
USWDS defines the following tokens
|
|
209
|
+
by default:
|
|
210
|
+
----------------------------------------
|
|
211
|
+
'georgia'
|
|
212
|
+
'helvetica'
|
|
213
|
+
'merriweather'
|
|
214
|
+
'open-sans'
|
|
215
|
+
'public-sans'
|
|
216
|
+
'roboto-mono'
|
|
217
|
+
'source-sans-pro'
|
|
218
|
+
'system'
|
|
219
|
+
'tahoma'
|
|
220
|
+
'verdana'
|
|
221
|
+
----------------------------------------
|
|
222
|
+
Add as many new tokens as you have
|
|
223
|
+
custom typefaces. Reference your new
|
|
224
|
+
token(s) in the type-based font settings
|
|
225
|
+
using the quoted name of the token.
|
|
226
|
+
|
|
227
|
+
For example:
|
|
228
|
+
|
|
229
|
+
$theme-font-type-cond: 'example-font-token';
|
|
230
|
+
|
|
231
|
+
display-name:
|
|
232
|
+
The display name of your font
|
|
233
|
+
|
|
234
|
+
cap-height:
|
|
235
|
+
The height of a 500px `N` in Sketch
|
|
236
|
+
----------------------------------------
|
|
237
|
+
You should change `example-[style]-token`
|
|
238
|
+
names to something more descriptive.
|
|
239
|
+
----------------------------------------
|
|
240
|
+
*/
|
|
241
|
+
/*
|
|
242
|
+
----------------------------------------
|
|
243
|
+
Type-based font settings
|
|
244
|
+
----------------------------------------
|
|
245
|
+
Set the type-based tokens for your
|
|
246
|
+
project from the following tokens,
|
|
247
|
+
or from any new font tokens you added in
|
|
248
|
+
$theme-typeface-tokens.
|
|
249
|
+
----------------------------------------
|
|
250
|
+
'georgia'
|
|
251
|
+
'helvetica'
|
|
252
|
+
'merriweather'
|
|
253
|
+
'open-sans'
|
|
254
|
+
'public-sans'
|
|
255
|
+
'roboto-mono'
|
|
256
|
+
'source-sans-pro'
|
|
257
|
+
'system'
|
|
258
|
+
'tahoma'
|
|
259
|
+
'verdana'
|
|
260
|
+
----------------------------------------
|
|
261
|
+
*/
|
|
262
|
+
/*
|
|
263
|
+
----------------------------------------
|
|
264
|
+
Custom font stacks
|
|
265
|
+
----------------------------------------
|
|
266
|
+
Add custom font stacks to any of the
|
|
267
|
+
type-based fonts. Any USWDS typeface
|
|
268
|
+
token already has a default stack.
|
|
269
|
+
|
|
270
|
+
Custom stacks don't need to include the
|
|
271
|
+
font's display name. It will
|
|
272
|
+
automatically appear at the start of
|
|
273
|
+
the stack.
|
|
274
|
+
----------------------------------------
|
|
275
|
+
Example:
|
|
276
|
+
$theme-font-type-sans: 'source-sans-pro';
|
|
277
|
+
$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;
|
|
278
|
+
|
|
279
|
+
Output:
|
|
280
|
+
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;
|
|
281
|
+
----------------------------------------
|
|
282
|
+
*/
|
|
283
|
+
/*
|
|
284
|
+
----------------------------------------
|
|
285
|
+
Add any custom font source files
|
|
286
|
+
----------------------------------------
|
|
287
|
+
If you want USWDS to generate additional
|
|
288
|
+
@font-face declarations, add your font
|
|
289
|
+
data below, following the example that
|
|
290
|
+
follows.
|
|
291
|
+
----------------------------------------
|
|
292
|
+
USWDS automatically generates @font-face
|
|
293
|
+
declarations for the following
|
|
294
|
+
|
|
295
|
+
'merriweather'
|
|
296
|
+
'public-sans'
|
|
297
|
+
'roboto-mono'
|
|
298
|
+
'source-sans-pro'
|
|
299
|
+
|
|
300
|
+
These typefaces not require custom
|
|
301
|
+
source files.
|
|
302
|
+
----------------------------------------
|
|
303
|
+
EXAMPLE
|
|
304
|
+
|
|
305
|
+
- dir:
|
|
306
|
+
Directory relative to $theme-font-path
|
|
307
|
+
- This directory should include fonts saved as
|
|
308
|
+
.woff2
|
|
309
|
+
ExampleSerif-Normal.woff2
|
|
310
|
+
|
|
311
|
+
$theme-font-serif-custom-src: (
|
|
312
|
+
dir: 'custom/example-serif',
|
|
313
|
+
roman: (
|
|
314
|
+
100: false,
|
|
315
|
+
200: false,
|
|
316
|
+
300: 'ExampleSerif-Light',
|
|
317
|
+
400: 'ExampleSerif-Normal',
|
|
318
|
+
500: false,
|
|
319
|
+
600: false,
|
|
320
|
+
700: 'ExampleSerif-Bold',
|
|
321
|
+
800: false,
|
|
322
|
+
900: false,
|
|
323
|
+
),
|
|
324
|
+
italic: (
|
|
325
|
+
100: false,
|
|
326
|
+
200: false,
|
|
327
|
+
300: 'ExampleSerif-LightItalic',
|
|
328
|
+
400: 'ExampleSerif-Italic',
|
|
329
|
+
500: false,
|
|
330
|
+
600: false,
|
|
331
|
+
700: 'ExampleSerif-BoldItalic',
|
|
332
|
+
800: false,
|
|
333
|
+
900: false,
|
|
334
|
+
),
|
|
335
|
+
);
|
|
336
|
+
----------------------------------------
|
|
337
|
+
*/
|
|
338
|
+
/*
|
|
339
|
+
----------------------------------------
|
|
340
|
+
Role-based font settings
|
|
341
|
+
----------------------------------------
|
|
342
|
+
Set the role-based tokens for your
|
|
343
|
+
project from the following font-type
|
|
344
|
+
tokens.
|
|
345
|
+
----------------------------------------
|
|
346
|
+
'cond'
|
|
347
|
+
'icon'
|
|
348
|
+
'lang'
|
|
349
|
+
'mono'
|
|
350
|
+
'sans'
|
|
351
|
+
'serif'
|
|
352
|
+
----------------------------------------
|
|
353
|
+
*/
|
|
354
|
+
/*
|
|
355
|
+
----------------------------------------
|
|
356
|
+
Type scale
|
|
357
|
+
----------------------------------------
|
|
358
|
+
Define your project's type scale using
|
|
359
|
+
values from the USWDS system type scale
|
|
360
|
+
|
|
361
|
+
1-20
|
|
362
|
+
----------------------------------------
|
|
363
|
+
*/
|
|
364
|
+
/*
|
|
365
|
+
----------------------------------------
|
|
366
|
+
Font weights
|
|
367
|
+
----------------------------------------
|
|
368
|
+
Assign weights 100-900
|
|
369
|
+
Or use `false` for unneeded weights.
|
|
370
|
+
----------------------------------------
|
|
371
|
+
*/
|
|
372
|
+
/*
|
|
373
|
+
----------------------------------------
|
|
374
|
+
General typography settings
|
|
375
|
+
----------------------------------------
|
|
376
|
+
Type scale tokens
|
|
377
|
+
----------------------------------------
|
|
378
|
+
micro: 10px
|
|
379
|
+
1: 12px
|
|
380
|
+
2: 13px
|
|
381
|
+
3: 14px
|
|
382
|
+
4: 15px
|
|
383
|
+
5: 16px
|
|
384
|
+
6: 17px
|
|
385
|
+
7: 18px
|
|
386
|
+
8: 20px
|
|
387
|
+
9: 22px
|
|
388
|
+
10: 24px
|
|
389
|
+
11: 28px
|
|
390
|
+
12: 32px
|
|
391
|
+
13: 36px
|
|
392
|
+
14: 40px
|
|
393
|
+
15: 48px
|
|
394
|
+
16: 56px
|
|
395
|
+
17: 64px
|
|
396
|
+
18: 80px
|
|
397
|
+
19: 120px
|
|
398
|
+
20: 140px
|
|
399
|
+
----------------------------------------
|
|
400
|
+
Line height tokens
|
|
401
|
+
----------------------------------------
|
|
402
|
+
1: 1
|
|
403
|
+
2: 1.15
|
|
404
|
+
3: 1.35
|
|
405
|
+
4: 1.5
|
|
406
|
+
5: 1.62
|
|
407
|
+
6: 1.75
|
|
408
|
+
----------------------------------------
|
|
409
|
+
Font role tokens
|
|
410
|
+
----------------------------------------
|
|
411
|
+
'ui'
|
|
412
|
+
'heading'
|
|
413
|
+
'body'
|
|
414
|
+
'code'
|
|
415
|
+
'alt'
|
|
416
|
+
----------------------------------------
|
|
417
|
+
Measure (max-width) tokens
|
|
418
|
+
----------------------------------------
|
|
419
|
+
1: 44ex
|
|
420
|
+
2: 60ex
|
|
421
|
+
3: 64ex
|
|
422
|
+
4: 68ex
|
|
423
|
+
5: 74ex
|
|
424
|
+
6: 88ex
|
|
425
|
+
none: none
|
|
426
|
+
----------------------------------------
|
|
427
|
+
*/
|
|
428
|
+
/*
|
|
429
|
+
* * * * * ==============================
|
|
430
|
+
* * * * * ==============================
|
|
431
|
+
* * * * * ==============================
|
|
432
|
+
* * * * * ==============================
|
|
433
|
+
========================================
|
|
434
|
+
========================================
|
|
435
|
+
========================================
|
|
436
|
+
----------------------------------------
|
|
437
|
+
COLOR SETTINGS
|
|
438
|
+
----------------------------------------
|
|
439
|
+
Read more about settings and
|
|
440
|
+
USWDS color tokens in the documentation:
|
|
441
|
+
https://designsystem.digital.gov/design-tokens/color
|
|
442
|
+
----------------------------------------
|
|
443
|
+
*/
|
|
444
|
+
/*
|
|
445
|
+
----------------------------------------
|
|
446
|
+
Theme palette colors
|
|
447
|
+
----------------------------------------
|
|
448
|
+
*/
|
|
449
|
+
/*
|
|
450
|
+
----------------------------------------
|
|
451
|
+
State palette colors
|
|
452
|
+
----------------------------------------
|
|
453
|
+
*/
|
|
454
|
+
/*
|
|
455
|
+
----------------------------------------
|
|
456
|
+
General colors
|
|
457
|
+
----------------------------------------
|
|
458
|
+
*/
|
|
459
|
+
/*
|
|
460
|
+
* * * * * ==============================
|
|
461
|
+
* * * * * ==============================
|
|
462
|
+
* * * * * ==============================
|
|
463
|
+
* * * * * ==============================
|
|
464
|
+
========================================
|
|
465
|
+
========================================
|
|
466
|
+
========================================
|
|
467
|
+
----------------------------------------
|
|
468
|
+
COMPONENT SETTINGS
|
|
469
|
+
----------------------------------------
|
|
470
|
+
Read more about settings and
|
|
471
|
+
USWDS style tokens in the documentation:
|
|
472
|
+
https://designsystem.digital.gov/design-tokens
|
|
473
|
+
----------------------------------------
|
|
474
|
+
*/
|
|
475
|
+
/*
|
|
476
|
+
* * * * * ==============================
|
|
477
|
+
* * * * * ==============================
|
|
478
|
+
* * * * * ==============================
|
|
479
|
+
* * * * * ==============================
|
|
480
|
+
========================================
|
|
481
|
+
========================================
|
|
482
|
+
========================================
|
|
483
|
+
----------------------------------------
|
|
484
|
+
SPACING SETTINGS
|
|
485
|
+
----------------------------------------
|
|
486
|
+
Read more about settings and
|
|
487
|
+
USWDS spacing units tokens in the
|
|
488
|
+
documentation:
|
|
489
|
+
https://designsystem.digital.gov/design-tokens/spacing-units
|
|
490
|
+
----------------------------------------
|
|
491
|
+
*/
|
|
492
|
+
/*
|
|
493
|
+
----------------------------------------
|
|
494
|
+
Border radius
|
|
495
|
+
----------------------------------------
|
|
496
|
+
2px 2px
|
|
497
|
+
0.5 4px
|
|
498
|
+
1 8px
|
|
499
|
+
1.5 12px
|
|
500
|
+
2 16px
|
|
501
|
+
2.5 20px
|
|
502
|
+
3 24px
|
|
503
|
+
4 32px
|
|
504
|
+
5 40px
|
|
505
|
+
6 48px
|
|
506
|
+
7 56px
|
|
507
|
+
8 64px
|
|
508
|
+
9 72px
|
|
509
|
+
----------------------------------------
|
|
510
|
+
*/
|
|
511
|
+
/*
|
|
512
|
+
----------------------------------------
|
|
513
|
+
Column gap
|
|
514
|
+
----------------------------------------
|
|
515
|
+
2px 2px
|
|
516
|
+
0.5 4px
|
|
517
|
+
1 8px
|
|
518
|
+
2 16px
|
|
519
|
+
3 24px
|
|
520
|
+
4 32px
|
|
521
|
+
5 40px
|
|
522
|
+
6 48px
|
|
523
|
+
----------------------------------------
|
|
524
|
+
*/
|
|
525
|
+
/*
|
|
526
|
+
----------------------------------------
|
|
527
|
+
Grid container max-width
|
|
528
|
+
----------------------------------------
|
|
529
|
+
mobile
|
|
530
|
+
mobile-lg
|
|
531
|
+
tablet
|
|
532
|
+
tablet-lg
|
|
533
|
+
desktop
|
|
534
|
+
desktop-lg
|
|
535
|
+
widescreen
|
|
536
|
+
----------------------------------------
|
|
537
|
+
*/
|
|
538
|
+
/*
|
|
539
|
+
----------------------------------------
|
|
540
|
+
Site
|
|
541
|
+
----------------------------------------
|
|
542
|
+
*/
|
|
543
|
+
/*
|
|
544
|
+
* * * * * ==============================
|
|
545
|
+
* * * * * ==============================
|
|
546
|
+
* * * * * ==============================
|
|
547
|
+
* * * * * ==============================
|
|
548
|
+
========================================
|
|
549
|
+
========================================
|
|
550
|
+
========================================
|
|
551
|
+
----------------------------------------
|
|
552
|
+
UTILITIES SETTINGS
|
|
553
|
+
----------------------------------------
|
|
554
|
+
Read more about settings and
|
|
555
|
+
USWDS utilities in the documentation:
|
|
556
|
+
https://designsystem.digital.gov/utilities
|
|
557
|
+
----------------------------------------
|
|
558
|
+
*/
|
|
559
|
+
/*
|
|
560
|
+
----------------------------------------
|
|
561
|
+
map-collect()
|
|
562
|
+
----------------------------------------
|
|
563
|
+
Collect multiple maps into a single
|
|
564
|
+
large map
|
|
565
|
+
source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe
|
|
566
|
+
----------------------------------------
|
|
567
|
+
*/
|
|
568
|
+
/*
|
|
569
|
+
----------------------------------------
|
|
570
|
+
Utility breakpoints
|
|
571
|
+
----------------------------------------
|
|
572
|
+
Which breakpoints does your project
|
|
573
|
+
need? Select as `true` any breakpoint
|
|
574
|
+
used by utilities or layout grid
|
|
575
|
+
----------------------------------------
|
|
576
|
+
*/
|
|
577
|
+
/*
|
|
578
|
+
----------------------------------------
|
|
579
|
+
Global colors
|
|
580
|
+
----------------------------------------
|
|
581
|
+
The following palettes will be added to
|
|
582
|
+
- background-color
|
|
583
|
+
- border-color
|
|
584
|
+
- color
|
|
585
|
+
- text-decoration-color
|
|
586
|
+
----------------------------------------
|
|
587
|
+
*/
|
|
588
|
+
/*
|
|
589
|
+
----------------------------------------
|
|
590
|
+
Settings
|
|
591
|
+
----------------------------------------
|
|
592
|
+
*/
|
|
593
|
+
/*
|
|
594
|
+
----------------------------------------
|
|
595
|
+
Values
|
|
596
|
+
----------------------------------------
|
|
597
|
+
*/
|
|
598
|
+
/*
|
|
599
|
+
----------------------------------------
|
|
600
|
+
has-important()
|
|
601
|
+
----------------------------------------
|
|
602
|
+
Check to see if `!important` is
|
|
603
|
+
being passed in a mixin's props
|
|
604
|
+
----------------------------------------
|
|
605
|
+
*/
|
|
606
|
+
/*
|
|
607
|
+
----------------------------------------
|
|
608
|
+
map-deep-get()
|
|
609
|
+
----------------------------------------
|
|
610
|
+
@author Hugo Giraudel
|
|
611
|
+
@access public
|
|
612
|
+
@param {Map} $map - Map
|
|
613
|
+
@param {Arglist} $keys - Key chain
|
|
614
|
+
@return {*} - Desired value
|
|
615
|
+
----------------------------------------
|
|
616
|
+
*/
|
|
617
|
+
/*
|
|
618
|
+
----------------------------------------
|
|
619
|
+
multi-cat()
|
|
620
|
+
----------------------------------------
|
|
621
|
+
Concatenate two lists
|
|
622
|
+
----------------------------------------
|
|
623
|
+
*/
|
|
624
|
+
/*
|
|
625
|
+
----------------------------------------
|
|
626
|
+
remove()
|
|
627
|
+
----------------------------------------
|
|
628
|
+
Remove a value from a list
|
|
629
|
+
----------------------------------------
|
|
630
|
+
*/
|
|
631
|
+
/*
|
|
632
|
+
----------------------------------------
|
|
633
|
+
smart-quote()
|
|
634
|
+
----------------------------------------
|
|
635
|
+
Quotes strings
|
|
636
|
+
Inspects `px`, `xs`, and `xl` numbers
|
|
637
|
+
Leaves bools as is
|
|
638
|
+
----------------------------------------
|
|
639
|
+
*/
|
|
640
|
+
/*
|
|
641
|
+
----------------------------------------
|
|
642
|
+
str-replace()
|
|
643
|
+
----------------------------------------
|
|
644
|
+
Replace any substring with another
|
|
645
|
+
string
|
|
646
|
+
----------------------------------------
|
|
647
|
+
*/
|
|
648
|
+
/*
|
|
649
|
+
----------------------------------------
|
|
650
|
+
str-split()
|
|
651
|
+
----------------------------------------
|
|
652
|
+
Split a string at a given separator
|
|
653
|
+
and convert into a list of substrings
|
|
654
|
+
----------------------------------------
|
|
655
|
+
*/
|
|
656
|
+
/*
|
|
657
|
+
----------------------------------------
|
|
658
|
+
strip-unit()
|
|
659
|
+
----------------------------------------
|
|
660
|
+
Remove the unit of a length
|
|
661
|
+
@author Hugo Giraudel
|
|
662
|
+
@param {Number} $number - Number to remove unit from
|
|
663
|
+
@return {Number} - Unitless number
|
|
664
|
+
----------------------------------------
|
|
665
|
+
*/
|
|
666
|
+
/*
|
|
667
|
+
----------------------------------------
|
|
668
|
+
base-to-map()
|
|
669
|
+
@TODO: Deprecate and delete
|
|
670
|
+
----------------------------------------
|
|
671
|
+
Convert a single base to a USWDS
|
|
672
|
+
value map.
|
|
673
|
+
|
|
674
|
+
Candidate for deprecation if we remove
|
|
675
|
+
isReadable
|
|
676
|
+
----------------------------------------
|
|
677
|
+
*/
|
|
678
|
+
/*
|
|
679
|
+
----------------------------------------
|
|
680
|
+
to-number()
|
|
681
|
+
----------------------------------------
|
|
682
|
+
Casts a string into a number
|
|
683
|
+
----------------------------------------
|
|
684
|
+
@param {String | Number} $value - Value to be parsed
|
|
685
|
+
@return {Number}
|
|
686
|
+
----------------------------------------
|
|
687
|
+
*/
|
|
688
|
+
/*
|
|
689
|
+
----------------------------------------
|
|
690
|
+
unpack()
|
|
691
|
+
----------------------------------------
|
|
692
|
+
Create lists of single items from lists
|
|
693
|
+
of lists.
|
|
694
|
+
----------------------------------------
|
|
695
|
+
(1, (2.1, 2.2), 3) -->
|
|
696
|
+
(1, 2.1, 2.2, 3)
|
|
697
|
+
----------------------------------------
|
|
698
|
+
*/
|
|
699
|
+
/*
|
|
700
|
+
----------------------------------------
|
|
701
|
+
advanced-color()
|
|
702
|
+
----------------------------------------
|
|
703
|
+
Derive a color from a color triplet:
|
|
704
|
+
[family], [grade], [variant]
|
|
705
|
+
----------------------------------------
|
|
706
|
+
*/
|
|
707
|
+
/*
|
|
708
|
+
----------------------------------------
|
|
709
|
+
get-system-color()
|
|
710
|
+
----------------------------------------
|
|
711
|
+
Derive a system color from its
|
|
712
|
+
family, value, and vivid or a passed
|
|
713
|
+
variable that is, itself, a list
|
|
714
|
+
----------------------------------------
|
|
715
|
+
*/
|
|
716
|
+
/*
|
|
717
|
+
----------------------------------------
|
|
718
|
+
advanced-color()
|
|
719
|
+
----------------------------------------
|
|
720
|
+
Derive a color from a color triplet:
|
|
721
|
+
[family], [grade], [variant]
|
|
722
|
+
----------------------------------------
|
|
723
|
+
*/
|
|
724
|
+
/*
|
|
725
|
+
----------------------------------------
|
|
726
|
+
calculate-grade()
|
|
727
|
+
----------------------------------------
|
|
728
|
+
Derive the grade equivalent any color,
|
|
729
|
+
even non-token colors
|
|
730
|
+
----------------------------------------
|
|
731
|
+
*/
|
|
732
|
+
/*
|
|
733
|
+
----------------------------------------
|
|
734
|
+
Luminance ranges
|
|
735
|
+
----------------------------------------
|
|
736
|
+
*/
|
|
737
|
+
/*
|
|
738
|
+
----------------------------------------
|
|
739
|
+
color-token-assignment()
|
|
740
|
+
----------------------------------------
|
|
741
|
+
Get the system token equivalent of any
|
|
742
|
+
theme color token
|
|
743
|
+
----------------------------------------
|
|
744
|
+
*/
|
|
745
|
+
/*
|
|
746
|
+
----------------------------------------
|
|
747
|
+
is-system-color-token()
|
|
748
|
+
----------------------------------------
|
|
749
|
+
Return whether a token is a system
|
|
750
|
+
color token
|
|
751
|
+
----------------------------------------
|
|
752
|
+
*/
|
|
753
|
+
/*
|
|
754
|
+
----------------------------------------
|
|
755
|
+
is-theme-color-token()
|
|
756
|
+
----------------------------------------
|
|
757
|
+
Return whether a token is a theme
|
|
758
|
+
color token
|
|
759
|
+
----------------------------------------
|
|
760
|
+
*/
|
|
761
|
+
/*
|
|
762
|
+
----------------------------------------
|
|
763
|
+
is-system-color-token()
|
|
764
|
+
----------------------------------------
|
|
765
|
+
Return whether a token is a system
|
|
766
|
+
color token
|
|
767
|
+
----------------------------------------
|
|
768
|
+
*/
|
|
769
|
+
/*
|
|
770
|
+
----------------------------------------
|
|
771
|
+
set-theme-color()
|
|
772
|
+
----------------------------------------
|
|
773
|
+
Derive a color from a system color token
|
|
774
|
+
or a hex value
|
|
775
|
+
----------------------------------------
|
|
776
|
+
*/
|
|
777
|
+
/*
|
|
778
|
+
----------------------------------------
|
|
779
|
+
color-token-family()
|
|
780
|
+
----------------------------------------
|
|
781
|
+
Returns the family of a color token.
|
|
782
|
+
Returns: color-family
|
|
783
|
+
color-token-family("accent-warm-vivid")
|
|
784
|
+
> "accent-warm"
|
|
785
|
+
color-token-family("red-50v")
|
|
786
|
+
> "red"
|
|
787
|
+
color-token-variant(("red", 50, "vivid"))
|
|
788
|
+
> "red"
|
|
789
|
+
----------------------------------------
|
|
790
|
+
*/
|
|
791
|
+
/*
|
|
792
|
+
----------------------------------------
|
|
793
|
+
decompose()
|
|
794
|
+
----------------------------------------
|
|
795
|
+
Convert a color token into into a list
|
|
796
|
+
of form [family], [grade], [variant]
|
|
797
|
+
Vivid variants return "vivid" as the
|
|
798
|
+
variant.
|
|
799
|
+
If neither grade nor variant exists,
|
|
800
|
+
returns 'null'
|
|
801
|
+
----------------------------------------
|
|
802
|
+
*/
|
|
803
|
+
/*
|
|
804
|
+
----------------------------------------
|
|
805
|
+
color-token-family()
|
|
806
|
+
----------------------------------------
|
|
807
|
+
Returns the family of a color token.
|
|
808
|
+
Returns: color-family
|
|
809
|
+
color-token-family("accent-warm-vivid")
|
|
810
|
+
> "accent-warm"
|
|
811
|
+
color-token-family("red-50v")
|
|
812
|
+
> "red"
|
|
813
|
+
color-token-variant(("red", 50, "vivid"))
|
|
814
|
+
> "red"
|
|
815
|
+
----------------------------------------
|
|
816
|
+
*/
|
|
817
|
+
/*
|
|
818
|
+
----------------------------------------
|
|
819
|
+
color-token-grade()
|
|
820
|
+
----------------------------------------
|
|
821
|
+
Returns the grade of a USWDS color token.
|
|
822
|
+
Returns: color-grade
|
|
823
|
+
color-token-grade("accent-warm")
|
|
824
|
+
> "root"
|
|
825
|
+
color-token-grade("accent-warm-vivid")
|
|
826
|
+
> "root"
|
|
827
|
+
color-token-grade("accent-warm-darker")
|
|
828
|
+
> "darker"
|
|
829
|
+
color-token-grade("red-50v")
|
|
830
|
+
> 50
|
|
831
|
+
color-token-variant(("red", 50, "vivid"))
|
|
832
|
+
> 50
|
|
833
|
+
----------------------------------------
|
|
834
|
+
*/
|
|
835
|
+
/*
|
|
836
|
+
----------------------------------------
|
|
837
|
+
color-token-family()
|
|
838
|
+
----------------------------------------
|
|
839
|
+
Returns the family of a color token.
|
|
840
|
+
Returns: color-family
|
|
841
|
+
color-token-family("accent-warm-vivid")
|
|
842
|
+
> "accent-warm"
|
|
843
|
+
color-token-family("red-50v")
|
|
844
|
+
> "red"
|
|
845
|
+
color-token-variant(("red", 50, "vivid"))
|
|
846
|
+
> "red"
|
|
847
|
+
----------------------------------------
|
|
848
|
+
*/
|
|
849
|
+
/*
|
|
850
|
+
----------------------------------------
|
|
851
|
+
is-color-token()
|
|
852
|
+
----------------------------------------
|
|
853
|
+
Returns whether a given string is a
|
|
854
|
+
USWDS color token.
|
|
855
|
+
----------------------------------------
|
|
856
|
+
*/
|
|
857
|
+
/*
|
|
858
|
+
----------------------------------------
|
|
859
|
+
is-system-color-token()
|
|
860
|
+
----------------------------------------
|
|
861
|
+
Return whether a token is a system
|
|
862
|
+
color token
|
|
863
|
+
----------------------------------------
|
|
864
|
+
*/
|
|
865
|
+
/*
|
|
866
|
+
----------------------------------------
|
|
867
|
+
is-theme-color-token()
|
|
868
|
+
----------------------------------------
|
|
869
|
+
Return whether a token is a theme
|
|
870
|
+
color token
|
|
871
|
+
----------------------------------------
|
|
872
|
+
*/
|
|
873
|
+
/*
|
|
874
|
+
----------------------------------------
|
|
875
|
+
pow()
|
|
876
|
+
----------------------------------------
|
|
877
|
+
Raises a unitless number to the power
|
|
878
|
+
of another unitless number
|
|
879
|
+
Includes helper functions
|
|
880
|
+
----------------------------------------
|
|
881
|
+
*/
|
|
882
|
+
/*
|
|
883
|
+
----------------------------------------
|
|
884
|
+
Helper functions
|
|
885
|
+
----------------------------------------
|
|
886
|
+
*/
|
|
887
|
+
/* factorial()
|
|
888
|
+
----------------------------------------
|
|
889
|
+
*/
|
|
890
|
+
/* summation()
|
|
891
|
+
----------------------------------------
|
|
892
|
+
*/
|
|
893
|
+
/* exp-maclaurin()
|
|
894
|
+
----------------------------------------
|
|
895
|
+
*/
|
|
896
|
+
/* ln()
|
|
897
|
+
----------------------------------------
|
|
898
|
+
*/
|
|
899
|
+
/*
|
|
900
|
+
----------------------------------------
|
|
901
|
+
color-token-type()
|
|
902
|
+
----------------------------------------
|
|
903
|
+
Returns the type of a color token.
|
|
904
|
+
Returns: "system" | "theme"
|
|
905
|
+
----------------------------------------
|
|
906
|
+
*/
|
|
907
|
+
/*
|
|
908
|
+
----------------------------------------
|
|
909
|
+
color-token-variant()
|
|
910
|
+
----------------------------------------
|
|
911
|
+
Returns the variant of color token.
|
|
912
|
+
Returns: "vivid" | false
|
|
913
|
+
color-token-variant("accent-warm")
|
|
914
|
+
> false
|
|
915
|
+
color-token-variant("accent-warm-vivid")
|
|
916
|
+
> "vivid"
|
|
917
|
+
color-token-variant("red-50v")
|
|
918
|
+
> "vivid"
|
|
919
|
+
color-token-variant(("red", 50, "vivid"))
|
|
920
|
+
> "vivid"
|
|
921
|
+
----------------------------------------
|
|
922
|
+
*/
|
|
923
|
+
/*
|
|
924
|
+
----------------------------------------
|
|
925
|
+
magic-number()
|
|
926
|
+
----------------------------------------
|
|
927
|
+
Returns the magic number of two color
|
|
928
|
+
grades. Takes numbers or color tokens.
|
|
929
|
+
magic-number(50, 10)
|
|
930
|
+
return: 40
|
|
931
|
+
magic-number("red-50", "red-10")
|
|
932
|
+
return: 40
|
|
933
|
+
----------------------------------------
|
|
934
|
+
*/
|
|
935
|
+
/*
|
|
936
|
+
----------------------------------------
|
|
937
|
+
is-accessible-magic-number()
|
|
938
|
+
----------------------------------------
|
|
939
|
+
Returns whether two grades achieve
|
|
940
|
+
specified target color contrast
|
|
941
|
+
Returns: true | false
|
|
942
|
+
is-accessible-magic-number(10, 50, "AA")
|
|
943
|
+
> false
|
|
944
|
+
is-accessible-magic-number(10, 60, "AA")
|
|
945
|
+
> true
|
|
946
|
+
----------------------------------------
|
|
947
|
+
*/
|
|
948
|
+
/*
|
|
949
|
+
----------------------------------------
|
|
950
|
+
wcag-magic-number()
|
|
951
|
+
----------------------------------------
|
|
952
|
+
Returns the magic number of a specific
|
|
953
|
+
wcag grade:
|
|
954
|
+
"AA"
|
|
955
|
+
"AA-Large"
|
|
956
|
+
"AAA"
|
|
957
|
+
wcag-magic-number("AA")
|
|
958
|
+
> 50
|
|
959
|
+
----------------------------------------
|
|
960
|
+
*/
|
|
961
|
+
/*
|
|
962
|
+
----------------------------------------
|
|
963
|
+
get-link-tokens-from-bg()
|
|
964
|
+
----------------------------------------
|
|
965
|
+
Get accessible link colors for a given
|
|
966
|
+
background color
|
|
967
|
+
returns: link-token, hover-token
|
|
968
|
+
get-link-tokens-from-bg(
|
|
969
|
+
"black",
|
|
970
|
+
"red-60",
|
|
971
|
+
"red-10",
|
|
972
|
+
"AA")
|
|
973
|
+
> "red-10", "red-5"
|
|
974
|
+
get-link-tokens-from-bg(
|
|
975
|
+
"black",
|
|
976
|
+
"red-60v",
|
|
977
|
+
"red-10v",
|
|
978
|
+
"AA-large")
|
|
979
|
+
> "red-60v", "red-50v"
|
|
980
|
+
get-link-tokens-from-bg(
|
|
981
|
+
"black",
|
|
982
|
+
"red-5v",
|
|
983
|
+
"red-60v",
|
|
984
|
+
"AA")
|
|
985
|
+
> "red-5v", "white"
|
|
986
|
+
get-link-tokens-from-bg(
|
|
987
|
+
"black",
|
|
988
|
+
"white",
|
|
989
|
+
"red-60v",
|
|
990
|
+
"AA")
|
|
991
|
+
> "white", "white"
|
|
992
|
+
----------------------------------------
|
|
993
|
+
*/
|
|
994
|
+
/*
|
|
995
|
+
----------------------------------------
|
|
996
|
+
next-token()
|
|
997
|
+
----------------------------------------
|
|
998
|
+
Returns next "darker" or "lighter" color
|
|
999
|
+
token of the same token type and variant.
|
|
1000
|
+
Returns: color-token | false
|
|
1001
|
+
next-token("accent-warm", "lighter")
|
|
1002
|
+
> "accent-warm-light"
|
|
1003
|
+
next-token("gray-10", "lighter")
|
|
1004
|
+
> "gray-5"
|
|
1005
|
+
next-token("gray-5", "lighter")
|
|
1006
|
+
> "white"
|
|
1007
|
+
next-token("white", "lighter")
|
|
1008
|
+
> false
|
|
1009
|
+
next-token("red-50v", "darker")
|
|
1010
|
+
> "red-60v"
|
|
1011
|
+
next-token("red-50", "darker")
|
|
1012
|
+
> "red-60"
|
|
1013
|
+
next-token("red-80v", "darker")
|
|
1014
|
+
> "red-90"
|
|
1015
|
+
next-token("red-90", "darker")
|
|
1016
|
+
> "black"
|
|
1017
|
+
next-token("white", "darker")
|
|
1018
|
+
> "gray-5"
|
|
1019
|
+
next-token("black", "lighter")
|
|
1020
|
+
> "gray-90"
|
|
1021
|
+
----------------------------------------
|
|
1022
|
+
*/
|
|
1023
|
+
/*
|
|
1024
|
+
----------------------------------------
|
|
1025
|
+
color()
|
|
1026
|
+
----------------------------------------
|
|
1027
|
+
Derive a color from a color shortcode
|
|
1028
|
+
----------------------------------------
|
|
1029
|
+
*/
|
|
1030
|
+
/*
|
|
1031
|
+
----------------------------------------
|
|
1032
|
+
test-colors()
|
|
1033
|
+
----------------------------------------
|
|
1034
|
+
Check to see if all system colors
|
|
1035
|
+
fall between the proper relative
|
|
1036
|
+
luminance range for their grade.
|
|
1037
|
+
Has a couple quirks, as the luminance()
|
|
1038
|
+
function returns slightly different
|
|
1039
|
+
results than expected.
|
|
1040
|
+
----------------------------------------
|
|
1041
|
+
*/
|
|
1042
|
+
/*
|
|
1043
|
+
----------------------------------------
|
|
1044
|
+
cap-height()
|
|
1045
|
+
----------------------------------------
|
|
1046
|
+
Get the cap height of a valid typeface
|
|
1047
|
+
----------------------------------------
|
|
1048
|
+
*/
|
|
1049
|
+
/*
|
|
1050
|
+
----------------------------------------
|
|
1051
|
+
Line height
|
|
1052
|
+
----------------------------------------
|
|
1053
|
+
*/
|
|
1054
|
+
/*
|
|
1055
|
+
----------------------------------------
|
|
1056
|
+
Measure
|
|
1057
|
+
----------------------------------------
|
|
1058
|
+
*/
|
|
1059
|
+
/*
|
|
1060
|
+
----------------------------------------
|
|
1061
|
+
spacing-multiple()
|
|
1062
|
+
----------------------------------------
|
|
1063
|
+
Converts a spacing unit multiple into
|
|
1064
|
+
the desired final units (currently rem)
|
|
1065
|
+
----------------------------------------
|
|
1066
|
+
*/
|
|
1067
|
+
/*
|
|
1068
|
+
----------------------------------------
|
|
1069
|
+
cap-height()
|
|
1070
|
+
----------------------------------------
|
|
1071
|
+
Get the cap height of a valid typeface
|
|
1072
|
+
----------------------------------------
|
|
1073
|
+
*/
|
|
1074
|
+
/*
|
|
1075
|
+
----------------------------------------
|
|
1076
|
+
validate-typeface-token()
|
|
1077
|
+
----------------------------------------
|
|
1078
|
+
Check to see if a typeface-token exists.
|
|
1079
|
+
Throw an error if a passed token does
|
|
1080
|
+
not exist in the typeface-token map.
|
|
1081
|
+
----------------------------------------
|
|
1082
|
+
*/
|
|
1083
|
+
/*
|
|
1084
|
+
----------------------------------------
|
|
1085
|
+
convert-to-font-type()
|
|
1086
|
+
----------------------------------------
|
|
1087
|
+
Converts a font-role token into a
|
|
1088
|
+
font-type token. Leaves font-type tokens
|
|
1089
|
+
unchanged.
|
|
1090
|
+
----------------------------------------
|
|
1091
|
+
*/
|
|
1092
|
+
/*
|
|
1093
|
+
----------------------------------------
|
|
1094
|
+
font-sources()
|
|
1095
|
+
----------------------------------------
|
|
1096
|
+
Outputs a list of font sources used in
|
|
1097
|
+
a @font-face declaration.
|
|
1098
|
+
|
|
1099
|
+
$theme-font-browser-compatibility: true - output woff2, woff, ttf
|
|
1100
|
+
$theme-font-browser-compatibility: false - output woff2
|
|
1101
|
+
|
|
1102
|
+
@param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]
|
|
1103
|
+
@output: string
|
|
1104
|
+
|
|
1105
|
+
filetypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)
|
|
1106
|
+
----------------------------------------
|
|
1107
|
+
*/
|
|
1108
|
+
/*
|
|
1109
|
+
----------------------------------------
|
|
1110
|
+
get-font-stack()
|
|
1111
|
+
----------------------------------------
|
|
1112
|
+
Get a font stack from a style- or
|
|
1113
|
+
role-based font token.
|
|
1114
|
+
----------------------------------------
|
|
1115
|
+
*/
|
|
1116
|
+
/*
|
|
1117
|
+
----------------------------------------
|
|
1118
|
+
Project fonts
|
|
1119
|
+
----------------------------------------
|
|
1120
|
+
Collects font settings in a map for
|
|
1121
|
+
looping.
|
|
1122
|
+
----------------------------------------
|
|
1123
|
+
*/
|
|
1124
|
+
/*
|
|
1125
|
+
----------------------------------------
|
|
1126
|
+
get-typeface-token()
|
|
1127
|
+
----------------------------------------
|
|
1128
|
+
Get a typeface token from a font-type or
|
|
1129
|
+
font-role token.
|
|
1130
|
+
----------------------------------------
|
|
1131
|
+
*/
|
|
1132
|
+
/*
|
|
1133
|
+
----------------------------------------
|
|
1134
|
+
normalize-type-scale()
|
|
1135
|
+
----------------------------------------
|
|
1136
|
+
Normalizes a specific face's optical size
|
|
1137
|
+
to a set target
|
|
1138
|
+
----------------------------------------
|
|
1139
|
+
*/
|
|
1140
|
+
/*
|
|
1141
|
+
----------------------------------------
|
|
1142
|
+
px-to-rem()
|
|
1143
|
+
----------------------------------------
|
|
1144
|
+
Converts a value in px to a value in rem
|
|
1145
|
+
----------------------------------------
|
|
1146
|
+
*/
|
|
1147
|
+
/*
|
|
1148
|
+
----------------------------------------
|
|
1149
|
+
rem-to-user-em()
|
|
1150
|
+
----------------------------------------
|
|
1151
|
+
Converts a value in rem to a value in
|
|
1152
|
+
[user-settings] em for use in media
|
|
1153
|
+
queries
|
|
1154
|
+
----------------------------------------
|
|
1155
|
+
*/
|
|
1156
|
+
/*
|
|
1157
|
+
----------------------------------------
|
|
1158
|
+
px-to-user-em()
|
|
1159
|
+
----------------------------------------
|
|
1160
|
+
Converts a value in px to a value in em
|
|
1161
|
+
----------------------------------------
|
|
1162
|
+
*/
|
|
1163
|
+
/*
|
|
1164
|
+
----------------------------------------
|
|
1165
|
+
rem-to-px()
|
|
1166
|
+
----------------------------------------
|
|
1167
|
+
Converts a value in rem to a value in px
|
|
1168
|
+
----------------------------------------
|
|
1169
|
+
*/
|
|
1170
|
+
/*
|
|
1171
|
+
----------------------------------------
|
|
1172
|
+
units()
|
|
1173
|
+
----------------------------------------
|
|
1174
|
+
Converts a spacing unit into
|
|
1175
|
+
the desired final units (currently rem)
|
|
1176
|
+
----------------------------------------
|
|
1177
|
+
*/
|
|
1178
|
+
/*
|
|
1179
|
+
----------------------------------------
|
|
1180
|
+
number-to-token()
|
|
1181
|
+
----------------------------------------
|
|
1182
|
+
Converts an integer or numeric value
|
|
1183
|
+
into a system value
|
|
1184
|
+
|
|
1185
|
+
Ex: 0.5 --> '05'
|
|
1186
|
+
-1px --> 'neg-1px'
|
|
1187
|
+
----------------------------------------
|
|
1188
|
+
*/
|
|
1189
|
+
/*
|
|
1190
|
+
----------------------------------------
|
|
1191
|
+
system-type-scale()
|
|
1192
|
+
----------------------------------------
|
|
1193
|
+
Get a value from the system type scale
|
|
1194
|
+
----------------------------------------
|
|
1195
|
+
*/
|
|
1196
|
+
/*
|
|
1197
|
+
----------------------------------------
|
|
1198
|
+
columns()
|
|
1199
|
+
----------------------------------------
|
|
1200
|
+
outputs a grid-col number based on
|
|
1201
|
+
the number of desired columns in the
|
|
1202
|
+
12-column grid
|
|
1203
|
+
|
|
1204
|
+
Ex: columns(2) --> 6
|
|
1205
|
+
grid-col(columns(2))
|
|
1206
|
+
----------------------------------------
|
|
1207
|
+
*/
|
|
1208
|
+
/*
|
|
1209
|
+
----------------------------------------
|
|
1210
|
+
USWDS Properties
|
|
1211
|
+
----------------------------------------
|
|
1212
|
+
*/
|
|
1213
|
+
/*
|
|
1214
|
+
----------------------------------------
|
|
1215
|
+
get-uswds-value()
|
|
1216
|
+
----------------------------------------
|
|
1217
|
+
Finds and outputs a value from the
|
|
1218
|
+
USWDS standard values.
|
|
1219
|
+
|
|
1220
|
+
Used to build other standard utility
|
|
1221
|
+
functions and mixins.
|
|
1222
|
+
----------------------------------------
|
|
1223
|
+
*/
|
|
1224
|
+
/*
|
|
1225
|
+
----------------------------------------
|
|
1226
|
+
get-standard-values()
|
|
1227
|
+
----------------------------------------
|
|
1228
|
+
Gets a map of USWDS standard values
|
|
1229
|
+
for a property
|
|
1230
|
+
----------------------------------------
|
|
1231
|
+
*/
|
|
1232
|
+
/*
|
|
1233
|
+
----------------------------------------
|
|
1234
|
+
ns()
|
|
1235
|
+
----------------------------------------
|
|
1236
|
+
Add a namesspace of $type if that
|
|
1237
|
+
namespace is set to output
|
|
1238
|
+
----------------------------------------
|
|
1239
|
+
*/
|
|
1240
|
+
/*
|
|
1241
|
+
----------------------------------------
|
|
1242
|
+
border-radius()
|
|
1243
|
+
----------------------------------------
|
|
1244
|
+
Get a border-radius from the system
|
|
1245
|
+
border-radii
|
|
1246
|
+
----------------------------------------
|
|
1247
|
+
*/
|
|
1248
|
+
/*
|
|
1249
|
+
----------------------------------------
|
|
1250
|
+
font-weight()
|
|
1251
|
+
fw()
|
|
1252
|
+
----------------------------------------
|
|
1253
|
+
Get a font-weight value from the
|
|
1254
|
+
system font-weight
|
|
1255
|
+
----------------------------------------
|
|
1256
|
+
*/
|
|
1257
|
+
/*
|
|
1258
|
+
----------------------------------------
|
|
1259
|
+
feature()
|
|
1260
|
+
----------------------------------------
|
|
1261
|
+
Gets a valid USWDS font feature setting
|
|
1262
|
+
----------------------------------------
|
|
1263
|
+
*/
|
|
1264
|
+
/*
|
|
1265
|
+
----------------------------------------
|
|
1266
|
+
flex()
|
|
1267
|
+
----------------------------------------
|
|
1268
|
+
Gets a valid USWDS flex value
|
|
1269
|
+
----------------------------------------
|
|
1270
|
+
*/
|
|
1271
|
+
/*
|
|
1272
|
+
----------------------------------------
|
|
1273
|
+
font-family()
|
|
1274
|
+
family()
|
|
1275
|
+
----------------------------------------
|
|
1276
|
+
Get a font-family stack from a
|
|
1277
|
+
role-based or type-based font family
|
|
1278
|
+
----------------------------------------
|
|
1279
|
+
*/
|
|
1280
|
+
/*
|
|
1281
|
+
----------------------------------------
|
|
1282
|
+
letter-spacing()
|
|
1283
|
+
ls()
|
|
1284
|
+
----------------------------------------
|
|
1285
|
+
Get a letter-spacing value from the
|
|
1286
|
+
system letter-spacing
|
|
1287
|
+
----------------------------------------
|
|
1288
|
+
*/
|
|
1289
|
+
/*
|
|
1290
|
+
----------------------------------------
|
|
1291
|
+
measure()
|
|
1292
|
+
----------------------------------------
|
|
1293
|
+
Gets a valid USWDS reading line length
|
|
1294
|
+
----------------------------------------
|
|
1295
|
+
*/
|
|
1296
|
+
/*
|
|
1297
|
+
----------------------------------------
|
|
1298
|
+
opacity()
|
|
1299
|
+
----------------------------------------
|
|
1300
|
+
Get an opacity from the system
|
|
1301
|
+
opacities
|
|
1302
|
+
----------------------------------------
|
|
1303
|
+
*/
|
|
1304
|
+
/*
|
|
1305
|
+
----------------------------------------
|
|
1306
|
+
order()
|
|
1307
|
+
----------------------------------------
|
|
1308
|
+
Get an order value from the
|
|
1309
|
+
system orders
|
|
1310
|
+
----------------------------------------
|
|
1311
|
+
*/
|
|
1312
|
+
/*
|
|
1313
|
+
----------------------------------------
|
|
1314
|
+
radius()
|
|
1315
|
+
----------------------------------------
|
|
1316
|
+
Get a border-radius value from the
|
|
1317
|
+
system letter-spacing
|
|
1318
|
+
----------------------------------------
|
|
1319
|
+
*/
|
|
1320
|
+
/*
|
|
1321
|
+
----------------------------------------
|
|
1322
|
+
font-size()
|
|
1323
|
+
----------------------------------------
|
|
1324
|
+
Get type scale value from a [family] and
|
|
1325
|
+
[scale]
|
|
1326
|
+
----------------------------------------
|
|
1327
|
+
*/
|
|
1328
|
+
/*
|
|
1329
|
+
----------------------------------------
|
|
1330
|
+
z-index()
|
|
1331
|
+
z()
|
|
1332
|
+
----------------------------------------
|
|
1333
|
+
Get a z-index value from the
|
|
1334
|
+
system z-index
|
|
1335
|
+
----------------------------------------
|
|
1336
|
+
*/
|
|
1337
|
+
/*
|
|
1338
|
+
----------------------------------------
|
|
1339
|
+
utility-font()
|
|
1340
|
+
----------------------------------------
|
|
1341
|
+
Get a normalized font-size in rem from
|
|
1342
|
+
a family and a type size in either
|
|
1343
|
+
system scale or project scale
|
|
1344
|
+
----------------------------------------
|
|
1345
|
+
Not the public-facing function.
|
|
1346
|
+
Used for building the utilities and
|
|
1347
|
+
withholds certain errors.
|
|
1348
|
+
----------------------------------------
|
|
1349
|
+
*/
|
|
1350
|
+
/*
|
|
1351
|
+
----------------------------------------
|
|
1352
|
+
family()
|
|
1353
|
+
----------------------------------------
|
|
1354
|
+
Get a font-family stack
|
|
1355
|
+
----------------------------------------
|
|
1356
|
+
*/
|
|
1357
|
+
/*
|
|
1358
|
+
----------------------------------------
|
|
1359
|
+
size()
|
|
1360
|
+
----------------------------------------
|
|
1361
|
+
Get a normalized font-size in rem from
|
|
1362
|
+
a family and a type size in either
|
|
1363
|
+
system scale or project scale
|
|
1364
|
+
----------------------------------------
|
|
1365
|
+
*/
|
|
1366
|
+
/*
|
|
1367
|
+
----------------------------------------
|
|
1368
|
+
font()
|
|
1369
|
+
----------------------------------------
|
|
1370
|
+
Get a font-family stack
|
|
1371
|
+
AND
|
|
1372
|
+
Get a normalized font-size in rem from
|
|
1373
|
+
a family and a type size in either
|
|
1374
|
+
system scale or project scale
|
|
1375
|
+
----------------------------------------
|
|
1376
|
+
*/
|
|
1377
|
+
/*
|
|
1378
|
+
----------------------------------------
|
|
1379
|
+
de-list()
|
|
1380
|
+
----------------------------------------
|
|
1381
|
+
Transform a one-element list or arglist
|
|
1382
|
+
into that single element.
|
|
1383
|
+
----------------------------------------
|
|
1384
|
+
(1) => 1
|
|
1385
|
+
((1)) => (1)
|
|
1386
|
+
----------------------------------------
|
|
1387
|
+
*/
|
|
1388
|
+
/*
|
|
1389
|
+
----------------------------------------
|
|
1390
|
+
unpack()
|
|
1391
|
+
----------------------------------------
|
|
1392
|
+
Create lists of single items from lists
|
|
1393
|
+
of lists.
|
|
1394
|
+
----------------------------------------
|
|
1395
|
+
(1, (2.1, 2.2), 3) -->
|
|
1396
|
+
(1, 2.1, 2.2, 3)
|
|
1397
|
+
----------------------------------------
|
|
1398
|
+
*/
|
|
1399
|
+
/*
|
|
1400
|
+
----------------------------------------
|
|
1401
|
+
get-last()
|
|
1402
|
+
----------------------------------------
|
|
1403
|
+
Return the last item of a list,
|
|
1404
|
+
Return null if the value is null
|
|
1405
|
+
----------------------------------------
|
|
1406
|
+
*/
|
|
1407
|
+
/*
|
|
1408
|
+
----------------------------------------
|
|
1409
|
+
has-important()
|
|
1410
|
+
----------------------------------------
|
|
1411
|
+
Check to see if `!important` is
|
|
1412
|
+
being passed in a mixin's props
|
|
1413
|
+
----------------------------------------
|
|
1414
|
+
*/
|
|
1415
|
+
/*
|
|
1416
|
+
----------------------------------------
|
|
1417
|
+
number-to-token()
|
|
1418
|
+
----------------------------------------
|
|
1419
|
+
Converts an integer or numeric value
|
|
1420
|
+
into a system value
|
|
1421
|
+
|
|
1422
|
+
Ex: 0.5 --> '05'
|
|
1423
|
+
-1px --> 'neg-1px'
|
|
1424
|
+
----------------------------------------
|
|
1425
|
+
*/
|
|
1426
|
+
/*
|
|
1427
|
+
----------------------------------------
|
|
1428
|
+
append-important()
|
|
1429
|
+
----------------------------------------
|
|
1430
|
+
Append `!important` to a list
|
|
1431
|
+
----------------------------------------
|
|
1432
|
+
*/
|
|
1433
|
+
/*
|
|
1434
|
+
----------------------------------------
|
|
1435
|
+
error-not-token()
|
|
1436
|
+
----------------------------------------
|
|
1437
|
+
Returns a common not-a-token error.
|
|
1438
|
+
----------------------------------------
|
|
1439
|
+
*/
|
|
1440
|
+
/*
|
|
1441
|
+
----------------------------------------
|
|
1442
|
+
uswds-error()
|
|
1443
|
+
----------------------------------------
|
|
1444
|
+
Allow the system to pass an error as text
|
|
1445
|
+
to test error states in unit testing
|
|
1446
|
+
----------------------------------------
|
|
1447
|
+
*/
|
|
1448
|
+
/*
|
|
1449
|
+
----------------------------------------
|
|
1450
|
+
get-default()
|
|
1451
|
+
----------------------------------------
|
|
1452
|
+
Returns the default value from a map
|
|
1453
|
+
of project defaults
|
|
1454
|
+
get-default("bg-color")
|
|
1455
|
+
> $theme-body-background-color
|
|
1456
|
+
----------------------------------------
|
|
1457
|
+
*/
|
|
1458
|
+
/*
|
|
1459
|
+
* * * * * ==============================
|
|
1460
|
+
* * * * * ==============================
|
|
1461
|
+
* * * * * ==============================
|
|
1462
|
+
* * * * * ==============================
|
|
1463
|
+
========================================
|
|
1464
|
+
========================================
|
|
1465
|
+
========================================
|
|
1466
|
+
----------------------------------------
|
|
1467
|
+
GENERAL SETTINGS
|
|
1468
|
+
----------------------------------------
|
|
1469
|
+
Read more about settings and
|
|
1470
|
+
USWDS style tokens in the documentation:
|
|
1471
|
+
https://designsystem.digital.gov/design-tokens
|
|
1472
|
+
----------------------------------------
|
|
1473
|
+
*/
|
|
1474
|
+
/*
|
|
1475
|
+
----------------------------------------
|
|
1476
|
+
Image path
|
|
1477
|
+
----------------------------------------
|
|
1478
|
+
Relative image file path
|
|
1479
|
+
----------------------------------------
|
|
1480
|
+
*/
|
|
1481
|
+
/*
|
|
1482
|
+
----------------------------------------
|
|
1483
|
+
Show compile warnings
|
|
1484
|
+
----------------------------------------
|
|
1485
|
+
Show Sass warnings when functions and
|
|
1486
|
+
mixins use non-standard tokens.
|
|
1487
|
+
AND
|
|
1488
|
+
Show updates and notifications.
|
|
1489
|
+
----------------------------------------
|
|
1490
|
+
*/
|
|
1491
|
+
/*
|
|
1492
|
+
----------------------------------------
|
|
1493
|
+
Namespace
|
|
1494
|
+
----------------------------------------
|
|
1495
|
+
*/
|
|
1496
|
+
/*
|
|
1497
|
+
----------------------------------------
|
|
1498
|
+
Prefix separator
|
|
1499
|
+
----------------------------------------
|
|
1500
|
+
Set the character the separates
|
|
1501
|
+
responsive and state prefixes from the
|
|
1502
|
+
main class name.
|
|
1503
|
+
The default (":") needs to be preceded
|
|
1504
|
+
by two backslashes to be properly
|
|
1505
|
+
escaped.
|
|
1506
|
+
----------------------------------------
|
|
1507
|
+
*/
|
|
1508
|
+
/*
|
|
1509
|
+
----------------------------------------
|
|
1510
|
+
Layout grid
|
|
1511
|
+
----------------------------------------
|
|
1512
|
+
Should the layout grid classes output
|
|
1513
|
+
with !important
|
|
1514
|
+
----------------------------------------
|
|
1515
|
+
*/
|
|
1516
|
+
/*
|
|
1517
|
+
----------------------------------------
|
|
1518
|
+
Border box sizing
|
|
1519
|
+
----------------------------------------
|
|
1520
|
+
When set to true, sets the box-sizing
|
|
1521
|
+
property of all site elements to
|
|
1522
|
+
`border-box`.
|
|
1523
|
+
----------------------------------------
|
|
1524
|
+
*/
|
|
1525
|
+
/*
|
|
1526
|
+
----------------------------------------
|
|
1527
|
+
Focus styles
|
|
1528
|
+
----------------------------------------
|
|
1529
|
+
*/
|
|
1530
|
+
/*
|
|
1531
|
+
----------------------------------------
|
|
1532
|
+
Icons
|
|
1533
|
+
----------------------------------------
|
|
1534
|
+
*/
|
|
1535
|
+
/*
|
|
1536
|
+
* * * * * ==============================
|
|
1537
|
+
* * * * * ==============================
|
|
1538
|
+
* * * * * ==============================
|
|
1539
|
+
* * * * * ==============================
|
|
1540
|
+
========================================
|
|
1541
|
+
========================================
|
|
1542
|
+
========================================
|
|
1543
|
+
----------------------------------------
|
|
1544
|
+
TYPOGRAPHY SETTINGS
|
|
1545
|
+
----------------------------------------
|
|
1546
|
+
Read more about settings and
|
|
1547
|
+
USWDS typography tokens in the documentation:
|
|
1548
|
+
https://designsystem.digital.gov/design-tokens/typesetting/overview/
|
|
1549
|
+
----------------------------------------
|
|
1550
|
+
*/
|
|
1551
|
+
/*
|
|
1552
|
+
----------------------------------------
|
|
1553
|
+
Root font size
|
|
1554
|
+
----------------------------------------
|
|
1555
|
+
Setting $theme-respect-user-font-size to
|
|
1556
|
+
true sets the root font size to 100% and
|
|
1557
|
+
uses ems for media queries
|
|
1558
|
+
----------------------------------------
|
|
1559
|
+
$theme-root-font-size only applies when
|
|
1560
|
+
$theme-respect-user-font-size is set to
|
|
1561
|
+
false.
|
|
1562
|
+
|
|
1563
|
+
This will set the root font size
|
|
1564
|
+
as a specific px value and use px values
|
|
1565
|
+
for media queries.
|
|
1566
|
+
|
|
1567
|
+
Accepts true or false
|
|
1568
|
+
----------------------------------------
|
|
1569
|
+
*/
|
|
1570
|
+
/*
|
|
1571
|
+
----------------------------------------
|
|
1572
|
+
Global styles
|
|
1573
|
+
----------------------------------------
|
|
1574
|
+
Adds basic styling for the following
|
|
1575
|
+
unclassed elements:
|
|
1576
|
+
|
|
1577
|
+
- paragraph: paragraph text
|
|
1578
|
+
- link: links
|
|
1579
|
+
- content: paragraph text, links,
|
|
1580
|
+
headings, lists, and tables
|
|
1581
|
+
----------------------------------------
|
|
1582
|
+
*/
|
|
1583
|
+
/*
|
|
1584
|
+
----------------------------------------
|
|
1585
|
+
Broswer compatibility mode
|
|
1586
|
+
----------------------------------------
|
|
1587
|
+
When true, outputs woff and ttf font
|
|
1588
|
+
formats in addition to woff2
|
|
1589
|
+
----------------------------------------
|
|
1590
|
+
*/
|
|
1591
|
+
/*
|
|
1592
|
+
----------------------------------------
|
|
1593
|
+
Font path
|
|
1594
|
+
----------------------------------------
|
|
1595
|
+
Relative font file path
|
|
1596
|
+
----------------------------------------
|
|
1597
|
+
*/
|
|
1598
|
+
/*
|
|
1599
|
+
----------------------------------------
|
|
1600
|
+
Custom typeface tokens
|
|
1601
|
+
----------------------------------------
|
|
1602
|
+
Add a new custom typeface token if
|
|
1603
|
+
your project uses a typeface not already
|
|
1604
|
+
defined by USWDS.
|
|
1605
|
+
----------------------------------------
|
|
1606
|
+
USWDS defines the following tokens
|
|
1607
|
+
by default:
|
|
1608
|
+
----------------------------------------
|
|
1609
|
+
'georgia'
|
|
1610
|
+
'helvetica'
|
|
1611
|
+
'merriweather'
|
|
1612
|
+
'open-sans'
|
|
1613
|
+
'public-sans'
|
|
1614
|
+
'roboto-mono'
|
|
1615
|
+
'source-sans-pro'
|
|
1616
|
+
'system'
|
|
1617
|
+
'tahoma'
|
|
1618
|
+
'verdana'
|
|
1619
|
+
----------------------------------------
|
|
1620
|
+
Add as many new tokens as you have
|
|
1621
|
+
custom typefaces. Reference your new
|
|
1622
|
+
token(s) in the type-based font settings
|
|
1623
|
+
using the quoted name of the token.
|
|
1624
|
+
|
|
1625
|
+
For example:
|
|
1626
|
+
|
|
1627
|
+
$theme-font-type-cond: 'example-font-token';
|
|
1628
|
+
|
|
1629
|
+
display-name:
|
|
1630
|
+
The display name of your font
|
|
1631
|
+
|
|
1632
|
+
cap-height:
|
|
1633
|
+
The height of a 500px `N` in Sketch
|
|
1634
|
+
----------------------------------------
|
|
1635
|
+
You should change `example-[style]-token`
|
|
1636
|
+
names to something more descriptive.
|
|
1637
|
+
----------------------------------------
|
|
1638
|
+
*/
|
|
1639
|
+
/*
|
|
1640
|
+
----------------------------------------
|
|
1641
|
+
Type-based font settings
|
|
1642
|
+
----------------------------------------
|
|
1643
|
+
Set the type-based tokens for your
|
|
1644
|
+
project from the following tokens,
|
|
1645
|
+
or from any new font tokens you added in
|
|
1646
|
+
$theme-typeface-tokens.
|
|
1647
|
+
----------------------------------------
|
|
1648
|
+
'georgia'
|
|
1649
|
+
'helvetica'
|
|
1650
|
+
'merriweather'
|
|
1651
|
+
'open-sans'
|
|
1652
|
+
'public-sans'
|
|
1653
|
+
'roboto-mono'
|
|
1654
|
+
'source-sans-pro'
|
|
1655
|
+
'system'
|
|
1656
|
+
'tahoma'
|
|
1657
|
+
'verdana'
|
|
1658
|
+
----------------------------------------
|
|
1659
|
+
*/
|
|
1660
|
+
/*
|
|
1661
|
+
----------------------------------------
|
|
1662
|
+
Custom font stacks
|
|
1663
|
+
----------------------------------------
|
|
1664
|
+
Add custom font stacks to any of the
|
|
1665
|
+
type-based fonts. Any USWDS typeface
|
|
1666
|
+
token already has a default stack.
|
|
1667
|
+
|
|
1668
|
+
Custom stacks don't need to include the
|
|
1669
|
+
font's display name. It will
|
|
1670
|
+
automatically appear at the start of
|
|
1671
|
+
the stack.
|
|
1672
|
+
----------------------------------------
|
|
1673
|
+
Example:
|
|
1674
|
+
$theme-font-type-sans: 'source-sans-pro';
|
|
1675
|
+
$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;
|
|
1676
|
+
|
|
1677
|
+
Output:
|
|
1678
|
+
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;
|
|
1679
|
+
----------------------------------------
|
|
1680
|
+
*/
|
|
1681
|
+
/*
|
|
1682
|
+
----------------------------------------
|
|
1683
|
+
Add any custom font source files
|
|
1684
|
+
----------------------------------------
|
|
1685
|
+
If you want USWDS to generate additional
|
|
1686
|
+
@font-face declarations, add your font
|
|
1687
|
+
data below, following the example that
|
|
1688
|
+
follows.
|
|
1689
|
+
----------------------------------------
|
|
1690
|
+
USWDS automatically generates @font-face
|
|
1691
|
+
declarations for the following
|
|
1692
|
+
|
|
1693
|
+
'merriweather'
|
|
1694
|
+
'public-sans'
|
|
1695
|
+
'roboto-mono'
|
|
1696
|
+
'source-sans-pro'
|
|
1697
|
+
|
|
1698
|
+
These typefaces not require custom
|
|
1699
|
+
source files.
|
|
1700
|
+
----------------------------------------
|
|
1701
|
+
EXAMPLE
|
|
1702
|
+
|
|
1703
|
+
- dir:
|
|
1704
|
+
Directory relative to $theme-font-path
|
|
1705
|
+
- This directory should include fonts saved as
|
|
1706
|
+
.woff2
|
|
1707
|
+
ExampleSerif-Normal.woff2
|
|
1708
|
+
|
|
1709
|
+
$theme-font-serif-custom-src: (
|
|
1710
|
+
dir: 'custom/example-serif',
|
|
1711
|
+
roman: (
|
|
1712
|
+
100: false,
|
|
1713
|
+
200: false,
|
|
1714
|
+
300: 'ExampleSerif-Light',
|
|
1715
|
+
400: 'ExampleSerif-Normal',
|
|
1716
|
+
500: false,
|
|
1717
|
+
600: false,
|
|
1718
|
+
700: 'ExampleSerif-Bold',
|
|
1719
|
+
800: false,
|
|
1720
|
+
900: false,
|
|
1721
|
+
),
|
|
1722
|
+
italic: (
|
|
1723
|
+
100: false,
|
|
1724
|
+
200: false,
|
|
1725
|
+
300: 'ExampleSerif-LightItalic',
|
|
1726
|
+
400: 'ExampleSerif-Italic',
|
|
1727
|
+
500: false,
|
|
1728
|
+
600: false,
|
|
1729
|
+
700: 'ExampleSerif-BoldItalic',
|
|
1730
|
+
800: false,
|
|
1731
|
+
900: false,
|
|
1732
|
+
),
|
|
1733
|
+
);
|
|
1734
|
+
----------------------------------------
|
|
1735
|
+
*/
|
|
1736
|
+
/*
|
|
1737
|
+
----------------------------------------
|
|
1738
|
+
Role-based font settings
|
|
1739
|
+
----------------------------------------
|
|
1740
|
+
Set the role-based tokens for your
|
|
1741
|
+
project from the following font-type
|
|
1742
|
+
tokens.
|
|
1743
|
+
----------------------------------------
|
|
1744
|
+
'cond'
|
|
1745
|
+
'icon'
|
|
1746
|
+
'lang'
|
|
1747
|
+
'mono'
|
|
1748
|
+
'sans'
|
|
1749
|
+
'serif'
|
|
1750
|
+
----------------------------------------
|
|
1751
|
+
*/
|
|
1752
|
+
/*
|
|
1753
|
+
----------------------------------------
|
|
1754
|
+
Type scale
|
|
1755
|
+
----------------------------------------
|
|
1756
|
+
Define your project's type scale using
|
|
1757
|
+
values from the USWDS system type scale
|
|
1758
|
+
|
|
1759
|
+
1-20
|
|
1760
|
+
----------------------------------------
|
|
1761
|
+
*/
|
|
1762
|
+
/*
|
|
1763
|
+
----------------------------------------
|
|
1764
|
+
Font weights
|
|
1765
|
+
----------------------------------------
|
|
1766
|
+
Assign weights 100-900
|
|
1767
|
+
Or use `false` for unneeded weights.
|
|
1768
|
+
----------------------------------------
|
|
1769
|
+
*/
|
|
1770
|
+
/*
|
|
1771
|
+
----------------------------------------
|
|
1772
|
+
General typography settings
|
|
1773
|
+
----------------------------------------
|
|
1774
|
+
Type scale tokens
|
|
1775
|
+
----------------------------------------
|
|
1776
|
+
micro: 10px
|
|
1777
|
+
1: 12px
|
|
1778
|
+
2: 13px
|
|
1779
|
+
3: 14px
|
|
1780
|
+
4: 15px
|
|
1781
|
+
5: 16px
|
|
1782
|
+
6: 17px
|
|
1783
|
+
7: 18px
|
|
1784
|
+
8: 20px
|
|
1785
|
+
9: 22px
|
|
1786
|
+
10: 24px
|
|
1787
|
+
11: 28px
|
|
1788
|
+
12: 32px
|
|
1789
|
+
13: 36px
|
|
1790
|
+
14: 40px
|
|
1791
|
+
15: 48px
|
|
1792
|
+
16: 56px
|
|
1793
|
+
17: 64px
|
|
1794
|
+
18: 80px
|
|
1795
|
+
19: 120px
|
|
1796
|
+
20: 140px
|
|
1797
|
+
----------------------------------------
|
|
1798
|
+
Line height tokens
|
|
1799
|
+
----------------------------------------
|
|
1800
|
+
1: 1
|
|
1801
|
+
2: 1.15
|
|
1802
|
+
3: 1.35
|
|
1803
|
+
4: 1.5
|
|
1804
|
+
5: 1.62
|
|
1805
|
+
6: 1.75
|
|
1806
|
+
----------------------------------------
|
|
1807
|
+
Font role tokens
|
|
1808
|
+
----------------------------------------
|
|
1809
|
+
'ui'
|
|
1810
|
+
'heading'
|
|
1811
|
+
'body'
|
|
1812
|
+
'code'
|
|
1813
|
+
'alt'
|
|
1814
|
+
----------------------------------------
|
|
1815
|
+
Measure (max-width) tokens
|
|
1816
|
+
----------------------------------------
|
|
1817
|
+
1: 44ex
|
|
1818
|
+
2: 60ex
|
|
1819
|
+
3: 64ex
|
|
1820
|
+
4: 68ex
|
|
1821
|
+
5: 74ex
|
|
1822
|
+
6: 88ex
|
|
1823
|
+
none: none
|
|
1824
|
+
----------------------------------------
|
|
1825
|
+
*/
|
|
1826
|
+
/*
|
|
1827
|
+
* * * * * ==============================
|
|
1828
|
+
* * * * * ==============================
|
|
1829
|
+
* * * * * ==============================
|
|
1830
|
+
* * * * * ==============================
|
|
1831
|
+
========================================
|
|
1832
|
+
========================================
|
|
1833
|
+
========================================
|
|
1834
|
+
----------------------------------------
|
|
1835
|
+
COLOR SETTINGS
|
|
1836
|
+
----------------------------------------
|
|
1837
|
+
Read more about settings and
|
|
1838
|
+
USWDS color tokens in the documentation:
|
|
1839
|
+
https://designsystem.digital.gov/design-tokens/color
|
|
1840
|
+
----------------------------------------
|
|
1841
|
+
*/
|
|
1842
|
+
/*
|
|
1843
|
+
----------------------------------------
|
|
1844
|
+
Theme palette colors
|
|
1845
|
+
----------------------------------------
|
|
1846
|
+
*/
|
|
1847
|
+
/*
|
|
1848
|
+
----------------------------------------
|
|
1849
|
+
State palette colors
|
|
1850
|
+
----------------------------------------
|
|
1851
|
+
*/
|
|
1852
|
+
/*
|
|
1853
|
+
----------------------------------------
|
|
1854
|
+
General colors
|
|
1855
|
+
----------------------------------------
|
|
1856
|
+
*/
|
|
1857
|
+
/*
|
|
1858
|
+
* * * * * ==============================
|
|
1859
|
+
* * * * * ==============================
|
|
1860
|
+
* * * * * ==============================
|
|
1861
|
+
* * * * * ==============================
|
|
1862
|
+
========================================
|
|
1863
|
+
========================================
|
|
1864
|
+
========================================
|
|
1865
|
+
----------------------------------------
|
|
1866
|
+
COMPONENT SETTINGS
|
|
1867
|
+
----------------------------------------
|
|
1868
|
+
Read more about settings and
|
|
1869
|
+
USWDS style tokens in the documentation:
|
|
1870
|
+
https://designsystem.digital.gov/design-tokens
|
|
1871
|
+
----------------------------------------
|
|
1872
|
+
*/
|
|
1873
|
+
/*
|
|
1874
|
+
* * * * * ==============================
|
|
1875
|
+
* * * * * ==============================
|
|
1876
|
+
* * * * * ==============================
|
|
1877
|
+
* * * * * ==============================
|
|
1878
|
+
========================================
|
|
1879
|
+
========================================
|
|
1880
|
+
========================================
|
|
1881
|
+
----------------------------------------
|
|
1882
|
+
SPACING SETTINGS
|
|
1883
|
+
----------------------------------------
|
|
1884
|
+
Read more about settings and
|
|
1885
|
+
USWDS spacing units tokens in the
|
|
1886
|
+
documentation:
|
|
1887
|
+
https://designsystem.digital.gov/design-tokens/spacing-units
|
|
1888
|
+
----------------------------------------
|
|
1889
|
+
*/
|
|
1890
|
+
/*
|
|
1891
|
+
----------------------------------------
|
|
1892
|
+
Border radius
|
|
1893
|
+
----------------------------------------
|
|
1894
|
+
2px 2px
|
|
1895
|
+
0.5 4px
|
|
1896
|
+
1 8px
|
|
1897
|
+
1.5 12px
|
|
1898
|
+
2 16px
|
|
1899
|
+
2.5 20px
|
|
1900
|
+
3 24px
|
|
1901
|
+
4 32px
|
|
1902
|
+
5 40px
|
|
1903
|
+
6 48px
|
|
1904
|
+
7 56px
|
|
1905
|
+
8 64px
|
|
1906
|
+
9 72px
|
|
1907
|
+
----------------------------------------
|
|
1908
|
+
*/
|
|
1909
|
+
/*
|
|
1910
|
+
----------------------------------------
|
|
1911
|
+
Column gap
|
|
1912
|
+
----------------------------------------
|
|
1913
|
+
2px 2px
|
|
1914
|
+
0.5 4px
|
|
1915
|
+
1 8px
|
|
1916
|
+
2 16px
|
|
1917
|
+
3 24px
|
|
1918
|
+
4 32px
|
|
1919
|
+
5 40px
|
|
1920
|
+
6 48px
|
|
1921
|
+
----------------------------------------
|
|
1922
|
+
*/
|
|
1923
|
+
/*
|
|
1924
|
+
----------------------------------------
|
|
1925
|
+
Grid container max-width
|
|
1926
|
+
----------------------------------------
|
|
1927
|
+
mobile
|
|
1928
|
+
mobile-lg
|
|
1929
|
+
tablet
|
|
1930
|
+
tablet-lg
|
|
1931
|
+
desktop
|
|
1932
|
+
desktop-lg
|
|
1933
|
+
widescreen
|
|
1934
|
+
----------------------------------------
|
|
1935
|
+
*/
|
|
1936
|
+
/*
|
|
1937
|
+
----------------------------------------
|
|
1938
|
+
Site
|
|
1939
|
+
----------------------------------------
|
|
1940
|
+
*/
|
|
1941
|
+
/*
|
|
1942
|
+
* * * * * ==============================
|
|
1943
|
+
* * * * * ==============================
|
|
1944
|
+
* * * * * ==============================
|
|
1945
|
+
* * * * * ==============================
|
|
1946
|
+
========================================
|
|
1947
|
+
========================================
|
|
1948
|
+
========================================
|
|
1949
|
+
----------------------------------------
|
|
1950
|
+
UTILITIES SETTINGS
|
|
1951
|
+
----------------------------------------
|
|
1952
|
+
Read more about settings and
|
|
1953
|
+
USWDS utilities in the documentation:
|
|
1954
|
+
https://designsystem.digital.gov/utilities
|
|
1955
|
+
----------------------------------------
|
|
1956
|
+
*/
|
|
1957
|
+
/*
|
|
1958
|
+
----------------------------------------
|
|
1959
|
+
map-collect()
|
|
1960
|
+
----------------------------------------
|
|
1961
|
+
Collect multiple maps into a single
|
|
1962
|
+
large map
|
|
1963
|
+
source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe
|
|
1964
|
+
----------------------------------------
|
|
1965
|
+
*/
|
|
1966
|
+
/*
|
|
1967
|
+
----------------------------------------
|
|
1968
|
+
Utility breakpoints
|
|
1969
|
+
----------------------------------------
|
|
1970
|
+
Which breakpoints does your project
|
|
1971
|
+
need? Select as `true` any breakpoint
|
|
1972
|
+
used by utilities or layout grid
|
|
1973
|
+
----------------------------------------
|
|
1974
|
+
*/
|
|
1975
|
+
/*
|
|
1976
|
+
----------------------------------------
|
|
1977
|
+
Global colors
|
|
1978
|
+
----------------------------------------
|
|
1979
|
+
The following palettes will be added to
|
|
1980
|
+
- background-color
|
|
1981
|
+
- border-color
|
|
1982
|
+
- color
|
|
1983
|
+
- text-decoration-color
|
|
1984
|
+
----------------------------------------
|
|
1985
|
+
*/
|
|
1986
|
+
/*
|
|
1987
|
+
----------------------------------------
|
|
1988
|
+
Settings
|
|
1989
|
+
----------------------------------------
|
|
1990
|
+
*/
|
|
1991
|
+
/*
|
|
1992
|
+
----------------------------------------
|
|
1993
|
+
Values
|
|
1994
|
+
----------------------------------------
|
|
1995
|
+
*/
|
|
1996
|
+
/*
|
|
1997
|
+
----------------------------------------
|
|
1998
|
+
map-deep-get()
|
|
1999
|
+
----------------------------------------
|
|
2000
|
+
@author Hugo Giraudel
|
|
2001
|
+
@access public
|
|
2002
|
+
@param {Map} $map - Map
|
|
2003
|
+
@param {Arglist} $keys - Key chain
|
|
2004
|
+
@return {*} - Desired value
|
|
2005
|
+
----------------------------------------
|
|
2006
|
+
*/
|
|
2007
|
+
/*
|
|
2008
|
+
----------------------------------------
|
|
2009
|
+
multi-cat()
|
|
2010
|
+
----------------------------------------
|
|
2011
|
+
Concatenate two lists
|
|
2012
|
+
----------------------------------------
|
|
2013
|
+
*/
|
|
2014
|
+
/*
|
|
2015
|
+
----------------------------------------
|
|
2016
|
+
remove()
|
|
2017
|
+
----------------------------------------
|
|
2018
|
+
Remove a value from a list
|
|
2019
|
+
----------------------------------------
|
|
2020
|
+
*/
|
|
2021
|
+
/*
|
|
2022
|
+
----------------------------------------
|
|
2023
|
+
smart-quote()
|
|
2024
|
+
----------------------------------------
|
|
2025
|
+
Quotes strings
|
|
2026
|
+
Inspects `px`, `xs`, and `xl` numbers
|
|
2027
|
+
Leaves bools as is
|
|
2028
|
+
----------------------------------------
|
|
2029
|
+
*/
|
|
2030
|
+
/*
|
|
2031
|
+
----------------------------------------
|
|
2032
|
+
str-replace()
|
|
2033
|
+
----------------------------------------
|
|
2034
|
+
Replace any substring with another
|
|
2035
|
+
string
|
|
2036
|
+
----------------------------------------
|
|
2037
|
+
*/
|
|
2038
|
+
/*
|
|
2039
|
+
----------------------------------------
|
|
2040
|
+
str-split()
|
|
2041
|
+
----------------------------------------
|
|
2042
|
+
Split a string at a given separator
|
|
2043
|
+
and convert into a list of substrings
|
|
2044
|
+
----------------------------------------
|
|
2045
|
+
*/
|
|
2046
|
+
/*
|
|
2047
|
+
----------------------------------------
|
|
2048
|
+
strip-unit()
|
|
2049
|
+
----------------------------------------
|
|
2050
|
+
Remove the unit of a length
|
|
2051
|
+
@author Hugo Giraudel
|
|
2052
|
+
@param {Number} $number - Number to remove unit from
|
|
2053
|
+
@return {Number} - Unitless number
|
|
2054
|
+
----------------------------------------
|
|
2055
|
+
*/
|
|
2056
|
+
/*
|
|
2057
|
+
----------------------------------------
|
|
2058
|
+
base-to-map()
|
|
2059
|
+
@TODO: Deprecate and delete
|
|
2060
|
+
----------------------------------------
|
|
2061
|
+
Convert a single base to a USWDS
|
|
2062
|
+
value map.
|
|
2063
|
+
|
|
2064
|
+
Candidate for deprecation if we remove
|
|
2065
|
+
isReadable
|
|
2066
|
+
----------------------------------------
|
|
2067
|
+
*/
|
|
2068
|
+
/*
|
|
2069
|
+
----------------------------------------
|
|
2070
|
+
to-number()
|
|
2071
|
+
----------------------------------------
|
|
2072
|
+
Casts a string into a number
|
|
2073
|
+
----------------------------------------
|
|
2074
|
+
@param {String | Number} $value - Value to be parsed
|
|
2075
|
+
@return {Number}
|
|
2076
|
+
----------------------------------------
|
|
2077
|
+
*/
|
|
2078
|
+
/*
|
|
2079
|
+
----------------------------------------
|
|
2080
|
+
spacing-multiple()
|
|
2081
|
+
----------------------------------------
|
|
2082
|
+
Converts a spacing unit multiple into
|
|
2083
|
+
the desired final units (currently rem)
|
|
2084
|
+
----------------------------------------
|
|
2085
|
+
*/
|
|
2086
|
+
/*
|
|
2087
|
+
----------------------------------------
|
|
2088
|
+
units()
|
|
2089
|
+
----------------------------------------
|
|
2090
|
+
Converts a spacing unit into
|
|
2091
|
+
the desired final units (currently rem)
|
|
2092
|
+
----------------------------------------
|
|
2093
|
+
*/
|
|
2094
|
+
/*
|
|
2095
|
+
----------------------------------------
|
|
2096
|
+
USWDS Properties
|
|
2097
|
+
----------------------------------------
|
|
2098
|
+
*/
|
|
2099
|
+
/*
|
|
2100
|
+
----------------------------------------
|
|
2101
|
+
Line height
|
|
2102
|
+
----------------------------------------
|
|
2103
|
+
*/
|
|
2104
|
+
/*
|
|
2105
|
+
----------------------------------------
|
|
2106
|
+
is-system-color-token()
|
|
2107
|
+
----------------------------------------
|
|
2108
|
+
Return whether a token is a system
|
|
2109
|
+
color token
|
|
2110
|
+
----------------------------------------
|
|
2111
|
+
*/
|
|
2112
|
+
/*
|
|
2113
|
+
----------------------------------------
|
|
2114
|
+
advanced-color()
|
|
2115
|
+
----------------------------------------
|
|
2116
|
+
Derive a color from a color triplet:
|
|
2117
|
+
[family], [grade], [variant]
|
|
2118
|
+
----------------------------------------
|
|
2119
|
+
*/
|
|
2120
|
+
/*
|
|
2121
|
+
----------------------------------------
|
|
2122
|
+
get-system-color()
|
|
2123
|
+
----------------------------------------
|
|
2124
|
+
Derive a system color from its
|
|
2125
|
+
family, value, and vivid or a passed
|
|
2126
|
+
variable that is, itself, a list
|
|
2127
|
+
----------------------------------------
|
|
2128
|
+
*/
|
|
2129
|
+
/*
|
|
2130
|
+
----------------------------------------
|
|
2131
|
+
advanced-color()
|
|
2132
|
+
----------------------------------------
|
|
2133
|
+
Derive a color from a color triplet:
|
|
2134
|
+
[family], [grade], [variant]
|
|
2135
|
+
----------------------------------------
|
|
2136
|
+
*/
|
|
2137
|
+
/*
|
|
2138
|
+
----------------------------------------
|
|
2139
|
+
is-theme-color-token()
|
|
2140
|
+
----------------------------------------
|
|
2141
|
+
Return whether a token is a theme
|
|
2142
|
+
color token
|
|
2143
|
+
----------------------------------------
|
|
2144
|
+
*/
|
|
2145
|
+
/*
|
|
2146
|
+
----------------------------------------
|
|
2147
|
+
is-system-color-token()
|
|
2148
|
+
----------------------------------------
|
|
2149
|
+
Return whether a token is a system
|
|
2150
|
+
color token
|
|
2151
|
+
----------------------------------------
|
|
2152
|
+
*/
|
|
2153
|
+
/*
|
|
2154
|
+
----------------------------------------
|
|
2155
|
+
set-theme-color()
|
|
2156
|
+
----------------------------------------
|
|
2157
|
+
Derive a color from a system color token
|
|
2158
|
+
or a hex value
|
|
2159
|
+
----------------------------------------
|
|
2160
|
+
*/
|
|
2161
|
+
/*
|
|
2162
|
+
----------------------------------------
|
|
2163
|
+
Measure
|
|
2164
|
+
----------------------------------------
|
|
2165
|
+
*/
|
|
2166
|
+
/*
|
|
2167
|
+
----------------------------------------
|
|
2168
|
+
cap-height()
|
|
2169
|
+
----------------------------------------
|
|
2170
|
+
Get the cap height of a valid typeface
|
|
2171
|
+
----------------------------------------
|
|
2172
|
+
*/
|
|
2173
|
+
/*
|
|
2174
|
+
----------------------------------------
|
|
2175
|
+
cap-height()
|
|
2176
|
+
----------------------------------------
|
|
2177
|
+
Get the cap height of a valid typeface
|
|
2178
|
+
----------------------------------------
|
|
2179
|
+
*/
|
|
2180
|
+
/*
|
|
2181
|
+
----------------------------------------
|
|
2182
|
+
validate-typeface-token()
|
|
2183
|
+
----------------------------------------
|
|
2184
|
+
Check to see if a typeface-token exists.
|
|
2185
|
+
Throw an error if a passed token does
|
|
2186
|
+
not exist in the typeface-token map.
|
|
2187
|
+
----------------------------------------
|
|
2188
|
+
*/
|
|
2189
|
+
/*
|
|
2190
|
+
----------------------------------------
|
|
2191
|
+
convert-to-font-type()
|
|
2192
|
+
----------------------------------------
|
|
2193
|
+
Converts a font-role token into a
|
|
2194
|
+
font-type token. Leaves font-type tokens
|
|
2195
|
+
unchanged.
|
|
2196
|
+
----------------------------------------
|
|
2197
|
+
*/
|
|
2198
|
+
/*
|
|
2199
|
+
----------------------------------------
|
|
2200
|
+
font-sources()
|
|
2201
|
+
----------------------------------------
|
|
2202
|
+
Outputs a list of font sources used in
|
|
2203
|
+
a @font-face declaration.
|
|
2204
|
+
|
|
2205
|
+
$theme-font-browser-compatibility: true - output woff2, woff, ttf
|
|
2206
|
+
$theme-font-browser-compatibility: false - output woff2
|
|
2207
|
+
|
|
2208
|
+
@param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]
|
|
2209
|
+
@output: string
|
|
2210
|
+
|
|
2211
|
+
filetypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)
|
|
2212
|
+
----------------------------------------
|
|
2213
|
+
*/
|
|
2214
|
+
/*
|
|
2215
|
+
----------------------------------------
|
|
2216
|
+
get-font-stack()
|
|
2217
|
+
----------------------------------------
|
|
2218
|
+
Get a font stack from a style- or
|
|
2219
|
+
role-based font token.
|
|
2220
|
+
----------------------------------------
|
|
2221
|
+
*/
|
|
2222
|
+
/*
|
|
2223
|
+
----------------------------------------
|
|
2224
|
+
Project fonts
|
|
2225
|
+
----------------------------------------
|
|
2226
|
+
Collects font settings in a map for
|
|
2227
|
+
looping.
|
|
2228
|
+
----------------------------------------
|
|
2229
|
+
*/
|
|
2230
|
+
/*
|
|
2231
|
+
----------------------------------------
|
|
2232
|
+
get-typeface-token()
|
|
2233
|
+
----------------------------------------
|
|
2234
|
+
Get a typeface token from a font-type or
|
|
2235
|
+
font-role token.
|
|
2236
|
+
----------------------------------------
|
|
2237
|
+
*/
|
|
2238
|
+
/*
|
|
2239
|
+
----------------------------------------
|
|
2240
|
+
normalize-type-scale()
|
|
2241
|
+
----------------------------------------
|
|
2242
|
+
Normalizes a specific face's optical size
|
|
2243
|
+
to a set target
|
|
2244
|
+
----------------------------------------
|
|
2245
|
+
*/
|
|
2246
|
+
/*
|
|
2247
|
+
----------------------------------------
|
|
2248
|
+
px-to-rem()
|
|
2249
|
+
----------------------------------------
|
|
2250
|
+
Converts a value in px to a value in rem
|
|
2251
|
+
----------------------------------------
|
|
2252
|
+
*/
|
|
2253
|
+
/*
|
|
2254
|
+
----------------------------------------
|
|
2255
|
+
rem-to-user-em()
|
|
2256
|
+
----------------------------------------
|
|
2257
|
+
Converts a value in rem to a value in
|
|
2258
|
+
[user-settings] em for use in media
|
|
2259
|
+
queries
|
|
2260
|
+
----------------------------------------
|
|
2261
|
+
*/
|
|
2262
|
+
/*
|
|
2263
|
+
----------------------------------------
|
|
2264
|
+
px-to-user-em()
|
|
2265
|
+
----------------------------------------
|
|
2266
|
+
Converts a value in px to a value in em
|
|
2267
|
+
----------------------------------------
|
|
2268
|
+
*/
|
|
2269
|
+
/*
|
|
2270
|
+
----------------------------------------
|
|
2271
|
+
rem-to-px()
|
|
2272
|
+
----------------------------------------
|
|
2273
|
+
Converts a value in rem to a value in px
|
|
2274
|
+
----------------------------------------
|
|
2275
|
+
*/
|
|
2276
|
+
/*
|
|
2277
|
+
----------------------------------------
|
|
2278
|
+
system-type-scale()
|
|
2279
|
+
----------------------------------------
|
|
2280
|
+
Get a value from the system type scale
|
|
2281
|
+
----------------------------------------
|
|
2282
|
+
*/
|
|
2283
|
+
/*
|
|
2284
|
+
----------------------------------------
|
|
2285
|
+
get-uswds-value()
|
|
2286
|
+
----------------------------------------
|
|
2287
|
+
Finds and outputs a value from the
|
|
2288
|
+
USWDS standard values.
|
|
2289
|
+
|
|
2290
|
+
Used to build other standard utility
|
|
2291
|
+
functions and mixins.
|
|
2292
|
+
----------------------------------------
|
|
2293
|
+
*/
|
|
2294
|
+
/*
|
|
2295
|
+
----------------------------------------
|
|
2296
|
+
advanced-color()
|
|
2297
|
+
----------------------------------------
|
|
2298
|
+
Derive a color from a color triplet:
|
|
2299
|
+
[family], [grade], [variant]
|
|
2300
|
+
----------------------------------------
|
|
2301
|
+
*/
|
|
2302
|
+
/*
|
|
2303
|
+
----------------------------------------
|
|
2304
|
+
calculate-grade()
|
|
2305
|
+
----------------------------------------
|
|
2306
|
+
Derive the grade equivalent any color,
|
|
2307
|
+
even non-token colors
|
|
2308
|
+
----------------------------------------
|
|
2309
|
+
*/
|
|
2310
|
+
/*
|
|
2311
|
+
----------------------------------------
|
|
2312
|
+
Luminance ranges
|
|
2313
|
+
----------------------------------------
|
|
2314
|
+
*/
|
|
2315
|
+
/*
|
|
2316
|
+
----------------------------------------
|
|
2317
|
+
color-token-assignment()
|
|
2318
|
+
----------------------------------------
|
|
2319
|
+
Get the system token equivalent of any
|
|
2320
|
+
theme color token
|
|
2321
|
+
----------------------------------------
|
|
2322
|
+
*/
|
|
2323
|
+
/*
|
|
2324
|
+
----------------------------------------
|
|
2325
|
+
is-system-color-token()
|
|
2326
|
+
----------------------------------------
|
|
2327
|
+
Return whether a token is a system
|
|
2328
|
+
color token
|
|
2329
|
+
----------------------------------------
|
|
2330
|
+
*/
|
|
2331
|
+
/*
|
|
2332
|
+
----------------------------------------
|
|
2333
|
+
is-theme-color-token()
|
|
2334
|
+
----------------------------------------
|
|
2335
|
+
Return whether a token is a theme
|
|
2336
|
+
color token
|
|
2337
|
+
----------------------------------------
|
|
2338
|
+
*/
|
|
2339
|
+
/*
|
|
2340
|
+
----------------------------------------
|
|
2341
|
+
color-token-family()
|
|
2342
|
+
----------------------------------------
|
|
2343
|
+
Returns the family of a color token.
|
|
2344
|
+
Returns: color-family
|
|
2345
|
+
color-token-family("accent-warm-vivid")
|
|
2346
|
+
> "accent-warm"
|
|
2347
|
+
color-token-family("red-50v")
|
|
2348
|
+
> "red"
|
|
2349
|
+
color-token-variant(("red", 50, "vivid"))
|
|
2350
|
+
> "red"
|
|
2351
|
+
----------------------------------------
|
|
2352
|
+
*/
|
|
2353
|
+
/*
|
|
2354
|
+
----------------------------------------
|
|
2355
|
+
decompose()
|
|
2356
|
+
----------------------------------------
|
|
2357
|
+
Convert a color token into into a list
|
|
2358
|
+
of form [family], [grade], [variant]
|
|
2359
|
+
Vivid variants return "vivid" as the
|
|
2360
|
+
variant.
|
|
2361
|
+
If neither grade nor variant exists,
|
|
2362
|
+
returns 'null'
|
|
2363
|
+
----------------------------------------
|
|
2364
|
+
*/
|
|
2365
|
+
/*
|
|
2366
|
+
----------------------------------------
|
|
2367
|
+
color-token-family()
|
|
2368
|
+
----------------------------------------
|
|
2369
|
+
Returns the family of a color token.
|
|
2370
|
+
Returns: color-family
|
|
2371
|
+
color-token-family("accent-warm-vivid")
|
|
2372
|
+
> "accent-warm"
|
|
2373
|
+
color-token-family("red-50v")
|
|
2374
|
+
> "red"
|
|
2375
|
+
color-token-variant(("red", 50, "vivid"))
|
|
2376
|
+
> "red"
|
|
2377
|
+
----------------------------------------
|
|
2378
|
+
*/
|
|
2379
|
+
/*
|
|
2380
|
+
----------------------------------------
|
|
2381
|
+
color-token-grade()
|
|
2382
|
+
----------------------------------------
|
|
2383
|
+
Returns the grade of a USWDS color token.
|
|
2384
|
+
Returns: color-grade
|
|
2385
|
+
color-token-grade("accent-warm")
|
|
2386
|
+
> "root"
|
|
2387
|
+
color-token-grade("accent-warm-vivid")
|
|
2388
|
+
> "root"
|
|
2389
|
+
color-token-grade("accent-warm-darker")
|
|
2390
|
+
> "darker"
|
|
2391
|
+
color-token-grade("red-50v")
|
|
2392
|
+
> 50
|
|
2393
|
+
color-token-variant(("red", 50, "vivid"))
|
|
2394
|
+
> 50
|
|
2395
|
+
----------------------------------------
|
|
2396
|
+
*/
|
|
2397
|
+
/*
|
|
2398
|
+
----------------------------------------
|
|
2399
|
+
color-token-family()
|
|
2400
|
+
----------------------------------------
|
|
2401
|
+
Returns the family of a color token.
|
|
2402
|
+
Returns: color-family
|
|
2403
|
+
color-token-family("accent-warm-vivid")
|
|
2404
|
+
> "accent-warm"
|
|
2405
|
+
color-token-family("red-50v")
|
|
2406
|
+
> "red"
|
|
2407
|
+
color-token-variant(("red", 50, "vivid"))
|
|
2408
|
+
> "red"
|
|
2409
|
+
----------------------------------------
|
|
2410
|
+
*/
|
|
2411
|
+
/*
|
|
2412
|
+
----------------------------------------
|
|
2413
|
+
is-color-token()
|
|
2414
|
+
----------------------------------------
|
|
2415
|
+
Returns whether a given string is a
|
|
2416
|
+
USWDS color token.
|
|
2417
|
+
----------------------------------------
|
|
2418
|
+
*/
|
|
2419
|
+
/*
|
|
2420
|
+
----------------------------------------
|
|
2421
|
+
pow()
|
|
2422
|
+
----------------------------------------
|
|
2423
|
+
Raises a unitless number to the power
|
|
2424
|
+
of another unitless number
|
|
2425
|
+
Includes helper functions
|
|
2426
|
+
----------------------------------------
|
|
2427
|
+
*/
|
|
2428
|
+
/*
|
|
2429
|
+
----------------------------------------
|
|
2430
|
+
Helper functions
|
|
2431
|
+
----------------------------------------
|
|
2432
|
+
*/
|
|
2433
|
+
/* factorial()
|
|
2434
|
+
----------------------------------------
|
|
2435
|
+
*/
|
|
2436
|
+
/* summation()
|
|
2437
|
+
----------------------------------------
|
|
2438
|
+
*/
|
|
2439
|
+
/* exp-maclaurin()
|
|
2440
|
+
----------------------------------------
|
|
2441
|
+
*/
|
|
2442
|
+
/* ln()
|
|
2443
|
+
----------------------------------------
|
|
2444
|
+
*/
|
|
2445
|
+
/*
|
|
2446
|
+
----------------------------------------
|
|
2447
|
+
color-token-type()
|
|
2448
|
+
----------------------------------------
|
|
2449
|
+
Returns the type of a color token.
|
|
2450
|
+
Returns: "system" | "theme"
|
|
2451
|
+
----------------------------------------
|
|
2452
|
+
*/
|
|
2453
|
+
/*
|
|
2454
|
+
----------------------------------------
|
|
2455
|
+
color-token-variant()
|
|
2456
|
+
----------------------------------------
|
|
2457
|
+
Returns the variant of color token.
|
|
2458
|
+
Returns: "vivid" | false
|
|
2459
|
+
color-token-variant("accent-warm")
|
|
2460
|
+
> false
|
|
2461
|
+
color-token-variant("accent-warm-vivid")
|
|
2462
|
+
> "vivid"
|
|
2463
|
+
color-token-variant("red-50v")
|
|
2464
|
+
> "vivid"
|
|
2465
|
+
color-token-variant(("red", 50, "vivid"))
|
|
2466
|
+
> "vivid"
|
|
2467
|
+
----------------------------------------
|
|
2468
|
+
*/
|
|
2469
|
+
/*
|
|
2470
|
+
----------------------------------------
|
|
2471
|
+
magic-number()
|
|
2472
|
+
----------------------------------------
|
|
2473
|
+
Returns the magic number of two color
|
|
2474
|
+
grades. Takes numbers or color tokens.
|
|
2475
|
+
magic-number(50, 10)
|
|
2476
|
+
return: 40
|
|
2477
|
+
magic-number("red-50", "red-10")
|
|
2478
|
+
return: 40
|
|
2479
|
+
----------------------------------------
|
|
2480
|
+
*/
|
|
2481
|
+
/*
|
|
2482
|
+
----------------------------------------
|
|
2483
|
+
is-accessible-magic-number()
|
|
2484
|
+
----------------------------------------
|
|
2485
|
+
Returns whether two grades achieve
|
|
2486
|
+
specified target color contrast
|
|
2487
|
+
Returns: true | false
|
|
2488
|
+
is-accessible-magic-number(10, 50, "AA")
|
|
2489
|
+
> false
|
|
2490
|
+
is-accessible-magic-number(10, 60, "AA")
|
|
2491
|
+
> true
|
|
2492
|
+
----------------------------------------
|
|
2493
|
+
*/
|
|
2494
|
+
/*
|
|
2495
|
+
----------------------------------------
|
|
2496
|
+
wcag-magic-number()
|
|
2497
|
+
----------------------------------------
|
|
2498
|
+
Returns the magic number of a specific
|
|
2499
|
+
wcag grade:
|
|
2500
|
+
"AA"
|
|
2501
|
+
"AA-Large"
|
|
2502
|
+
"AAA"
|
|
2503
|
+
wcag-magic-number("AA")
|
|
2504
|
+
> 50
|
|
2505
|
+
----------------------------------------
|
|
2506
|
+
*/
|
|
2507
|
+
/*
|
|
2508
|
+
----------------------------------------
|
|
2509
|
+
get-link-tokens-from-bg()
|
|
2510
|
+
----------------------------------------
|
|
2511
|
+
Get accessible link colors for a given
|
|
2512
|
+
background color
|
|
2513
|
+
returns: link-token, hover-token
|
|
2514
|
+
get-link-tokens-from-bg(
|
|
2515
|
+
"black",
|
|
2516
|
+
"red-60",
|
|
2517
|
+
"red-10",
|
|
2518
|
+
"AA")
|
|
2519
|
+
> "red-10", "red-5"
|
|
2520
|
+
get-link-tokens-from-bg(
|
|
2521
|
+
"black",
|
|
2522
|
+
"red-60v",
|
|
2523
|
+
"red-10v",
|
|
2524
|
+
"AA-large")
|
|
2525
|
+
> "red-60v", "red-50v"
|
|
2526
|
+
get-link-tokens-from-bg(
|
|
2527
|
+
"black",
|
|
2528
|
+
"red-5v",
|
|
2529
|
+
"red-60v",
|
|
2530
|
+
"AA")
|
|
2531
|
+
> "red-5v", "white"
|
|
2532
|
+
get-link-tokens-from-bg(
|
|
2533
|
+
"black",
|
|
2534
|
+
"white",
|
|
2535
|
+
"red-60v",
|
|
2536
|
+
"AA")
|
|
2537
|
+
> "white", "white"
|
|
2538
|
+
----------------------------------------
|
|
2539
|
+
*/
|
|
2540
|
+
/*
|
|
2541
|
+
----------------------------------------
|
|
2542
|
+
next-token()
|
|
2543
|
+
----------------------------------------
|
|
2544
|
+
Returns next "darker" or "lighter" color
|
|
2545
|
+
token of the same token type and variant.
|
|
2546
|
+
Returns: color-token | false
|
|
2547
|
+
next-token("accent-warm", "lighter")
|
|
2548
|
+
> "accent-warm-light"
|
|
2549
|
+
next-token("gray-10", "lighter")
|
|
2550
|
+
> "gray-5"
|
|
2551
|
+
next-token("gray-5", "lighter")
|
|
2552
|
+
> "white"
|
|
2553
|
+
next-token("white", "lighter")
|
|
2554
|
+
> false
|
|
2555
|
+
next-token("red-50v", "darker")
|
|
2556
|
+
> "red-60v"
|
|
2557
|
+
next-token("red-50", "darker")
|
|
2558
|
+
> "red-60"
|
|
2559
|
+
next-token("red-80v", "darker")
|
|
2560
|
+
> "red-90"
|
|
2561
|
+
next-token("red-90", "darker")
|
|
2562
|
+
> "black"
|
|
2563
|
+
next-token("white", "darker")
|
|
2564
|
+
> "gray-5"
|
|
2565
|
+
next-token("black", "lighter")
|
|
2566
|
+
> "gray-90"
|
|
2567
|
+
----------------------------------------
|
|
2568
|
+
*/
|
|
2569
|
+
/*
|
|
2570
|
+
----------------------------------------
|
|
2571
|
+
color()
|
|
2572
|
+
----------------------------------------
|
|
2573
|
+
Derive a color from a color shortcode
|
|
2574
|
+
----------------------------------------
|
|
2575
|
+
*/
|
|
2576
|
+
/*
|
|
2577
|
+
----------------------------------------
|
|
2578
|
+
test-colors()
|
|
2579
|
+
----------------------------------------
|
|
2580
|
+
Check to see if all system colors
|
|
2581
|
+
fall between the proper relative
|
|
2582
|
+
luminance range for their grade.
|
|
2583
|
+
Has a couple quirks, as the luminance()
|
|
2584
|
+
function returns slightly different
|
|
2585
|
+
results than expected.
|
|
2586
|
+
----------------------------------------
|
|
2587
|
+
*/
|
|
2588
|
+
/*
|
|
2589
|
+
----------------------------------------
|
|
2590
|
+
columns()
|
|
2591
|
+
----------------------------------------
|
|
2592
|
+
outputs a grid-col number based on
|
|
2593
|
+
the number of desired columns in the
|
|
2594
|
+
12-column grid
|
|
2595
|
+
|
|
2596
|
+
Ex: columns(2) --> 6
|
|
2597
|
+
grid-col(columns(2))
|
|
2598
|
+
----------------------------------------
|
|
2599
|
+
*/
|
|
2600
|
+
/*
|
|
2601
|
+
----------------------------------------
|
|
2602
|
+
get-standard-values()
|
|
2603
|
+
----------------------------------------
|
|
2604
|
+
Gets a map of USWDS standard values
|
|
2605
|
+
for a property
|
|
2606
|
+
----------------------------------------
|
|
2607
|
+
*/
|
|
2608
|
+
/*
|
|
2609
|
+
----------------------------------------
|
|
2610
|
+
ns()
|
|
2611
|
+
----------------------------------------
|
|
2612
|
+
Add a namesspace of $type if that
|
|
2613
|
+
namespace is set to output
|
|
2614
|
+
----------------------------------------
|
|
2615
|
+
*/
|
|
2616
|
+
/*
|
|
2617
|
+
----------------------------------------
|
|
2618
|
+
border-radius()
|
|
2619
|
+
----------------------------------------
|
|
2620
|
+
Get a border-radius from the system
|
|
2621
|
+
border-radii
|
|
2622
|
+
----------------------------------------
|
|
2623
|
+
*/
|
|
2624
|
+
/*
|
|
2625
|
+
----------------------------------------
|
|
2626
|
+
font-weight()
|
|
2627
|
+
fw()
|
|
2628
|
+
----------------------------------------
|
|
2629
|
+
Get a font-weight value from the
|
|
2630
|
+
system font-weight
|
|
2631
|
+
----------------------------------------
|
|
2632
|
+
*/
|
|
2633
|
+
/*
|
|
2634
|
+
----------------------------------------
|
|
2635
|
+
feature()
|
|
2636
|
+
----------------------------------------
|
|
2637
|
+
Gets a valid USWDS font feature setting
|
|
2638
|
+
----------------------------------------
|
|
2639
|
+
*/
|
|
2640
|
+
/*
|
|
2641
|
+
----------------------------------------
|
|
2642
|
+
flex()
|
|
2643
|
+
----------------------------------------
|
|
2644
|
+
Gets a valid USWDS flex value
|
|
2645
|
+
----------------------------------------
|
|
2646
|
+
*/
|
|
2647
|
+
/*
|
|
2648
|
+
----------------------------------------
|
|
2649
|
+
font-family()
|
|
2650
|
+
family()
|
|
2651
|
+
----------------------------------------
|
|
2652
|
+
Get a font-family stack from a
|
|
2653
|
+
role-based or type-based font family
|
|
2654
|
+
----------------------------------------
|
|
2655
|
+
*/
|
|
2656
|
+
/*
|
|
2657
|
+
----------------------------------------
|
|
2658
|
+
letter-spacing()
|
|
2659
|
+
ls()
|
|
2660
|
+
----------------------------------------
|
|
2661
|
+
Get a letter-spacing value from the
|
|
2662
|
+
system letter-spacing
|
|
2663
|
+
----------------------------------------
|
|
2664
|
+
*/
|
|
2665
|
+
/*
|
|
2666
|
+
----------------------------------------
|
|
2667
|
+
measure()
|
|
2668
|
+
----------------------------------------
|
|
2669
|
+
Gets a valid USWDS reading line length
|
|
2670
|
+
----------------------------------------
|
|
2671
|
+
*/
|
|
2672
|
+
/*
|
|
2673
|
+
----------------------------------------
|
|
2674
|
+
opacity()
|
|
2675
|
+
----------------------------------------
|
|
2676
|
+
Get an opacity from the system
|
|
2677
|
+
opacities
|
|
2678
|
+
----------------------------------------
|
|
2679
|
+
*/
|
|
2680
|
+
/*
|
|
2681
|
+
----------------------------------------
|
|
2682
|
+
order()
|
|
2683
|
+
----------------------------------------
|
|
2684
|
+
Get an order value from the
|
|
2685
|
+
system orders
|
|
2686
|
+
----------------------------------------
|
|
2687
|
+
*/
|
|
2688
|
+
/*
|
|
2689
|
+
----------------------------------------
|
|
2690
|
+
radius()
|
|
2691
|
+
----------------------------------------
|
|
2692
|
+
Get a border-radius value from the
|
|
2693
|
+
system letter-spacing
|
|
2694
|
+
----------------------------------------
|
|
2695
|
+
*/
|
|
2696
|
+
/*
|
|
2697
|
+
----------------------------------------
|
|
2698
|
+
font-size()
|
|
2699
|
+
----------------------------------------
|
|
2700
|
+
Get type scale value from a [family] and
|
|
2701
|
+
[scale]
|
|
2702
|
+
----------------------------------------
|
|
2703
|
+
*/
|
|
2704
|
+
/*
|
|
2705
|
+
----------------------------------------
|
|
2706
|
+
z-index()
|
|
2707
|
+
z()
|
|
2708
|
+
----------------------------------------
|
|
2709
|
+
Get a z-index value from the
|
|
2710
|
+
system z-index
|
|
2711
|
+
----------------------------------------
|
|
2712
|
+
*/
|
|
2713
|
+
/*
|
|
2714
|
+
----------------------------------------
|
|
2715
|
+
utility-font()
|
|
2716
|
+
----------------------------------------
|
|
2717
|
+
Get a normalized font-size in rem from
|
|
2718
|
+
a family and a type size in either
|
|
2719
|
+
system scale or project scale
|
|
2720
|
+
----------------------------------------
|
|
2721
|
+
Not the public-facing function.
|
|
2722
|
+
Used for building the utilities and
|
|
2723
|
+
withholds certain errors.
|
|
2724
|
+
----------------------------------------
|
|
2725
|
+
*/
|
|
2726
|
+
/*
|
|
2727
|
+
----------------------------------------
|
|
2728
|
+
family()
|
|
2729
|
+
----------------------------------------
|
|
2730
|
+
Get a font-family stack
|
|
2731
|
+
----------------------------------------
|
|
2732
|
+
*/
|
|
2733
|
+
/*
|
|
2734
|
+
----------------------------------------
|
|
2735
|
+
size()
|
|
2736
|
+
----------------------------------------
|
|
2737
|
+
Get a normalized font-size in rem from
|
|
2738
|
+
a family and a type size in either
|
|
2739
|
+
system scale or project scale
|
|
2740
|
+
----------------------------------------
|
|
2741
|
+
*/
|
|
2742
|
+
/*
|
|
2743
|
+
----------------------------------------
|
|
2744
|
+
font()
|
|
2745
|
+
----------------------------------------
|
|
2746
|
+
Get a font-family stack
|
|
2747
|
+
AND
|
|
2748
|
+
Get a normalized font-size in rem from
|
|
2749
|
+
a family and a type size in either
|
|
2750
|
+
system scale or project scale
|
|
2751
|
+
----------------------------------------
|
|
2752
|
+
*/
|
|
2753
|
+
ul, ol {
|
|
2754
|
+
margin-bottom: 1em;
|
|
2755
|
+
margin-top: 1em;
|
|
2756
|
+
line-height: 1.5;
|
|
2757
|
+
padding-left: 3ch;
|
|
2758
|
+
}
|
|
2759
|
+
ul:last-child, ol:last-child {
|
|
2760
|
+
margin-bottom: 0;
|
|
2761
|
+
}
|
|
2762
|
+
ul ul,
|
|
2763
|
+
ul ol, ol ul,
|
|
2764
|
+
ol ol {
|
|
2765
|
+
margin-top: 0.25em;
|
|
2766
|
+
}
|
|
2767
|
+
ul li, ol li {
|
|
2768
|
+
margin-bottom: 0.25em;
|
|
2769
|
+
max-width: 68ex;
|
|
2770
|
+
}
|
|
2771
|
+
ul li:last-child, ol li:last-child {
|
|
2772
|
+
margin-bottom: 0;
|
|
2773
|
+
}
|
|
2774
|
+
|
|
2775
|
+
.usa-unstyled-list {
|
|
2776
|
+
margin-bottom: 0;
|
|
2777
|
+
margin-top: 0;
|
|
2778
|
+
list-style-type: none;
|
|
2779
|
+
padding-left: 0;
|
|
2780
|
+
}
|
|
2781
|
+
.usa-unstyled-list > li {
|
|
2782
|
+
margin-bottom: 0;
|
|
2783
|
+
max-width: unset;
|
|
2784
|
+
}
|
|
2785
|
+
|
|
2786
|
+
/*# sourceMappingURL=lists.css.map */
|