@department-of-veterans-affairs/css-library 0.7.0 → 0.7.4
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/{elements.css → base/headings.css} +11 -128
- package/dist/full.css +126 -114
- package/dist/tokens/css/variables.css +1 -1
- package/dist/tokens/scss/variables.scss +1 -1
- package/dist/uswds-typography.css +4224 -0
- package/dist/utilities.css +1978 -1978
- package/package.json +6 -5
|
@@ -0,0 +1,4224 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* * * * * ==============================
|
|
3
|
+
* * * * * ==============================
|
|
4
|
+
* * * * * ==============================
|
|
5
|
+
* * * * * ==============================
|
|
6
|
+
========================================
|
|
7
|
+
========================================
|
|
8
|
+
========================================
|
|
9
|
+
----------------------------------------
|
|
10
|
+
GENERAL SETTINGS
|
|
11
|
+
----------------------------------------
|
|
12
|
+
Read more about settings and
|
|
13
|
+
USWDS style tokens in the documentation:
|
|
14
|
+
https://designsystem.digital.gov/design-tokens
|
|
15
|
+
----------------------------------------
|
|
16
|
+
*/
|
|
17
|
+
/*
|
|
18
|
+
----------------------------------------
|
|
19
|
+
Image path
|
|
20
|
+
----------------------------------------
|
|
21
|
+
Relative image file path
|
|
22
|
+
----------------------------------------
|
|
23
|
+
*/
|
|
24
|
+
/*
|
|
25
|
+
----------------------------------------
|
|
26
|
+
Show compile warnings
|
|
27
|
+
----------------------------------------
|
|
28
|
+
Show Sass warnings when functions and
|
|
29
|
+
mixins use non-standard tokens.
|
|
30
|
+
AND
|
|
31
|
+
Show updates and notifications.
|
|
32
|
+
----------------------------------------
|
|
33
|
+
*/
|
|
34
|
+
/*
|
|
35
|
+
----------------------------------------
|
|
36
|
+
Namespace
|
|
37
|
+
----------------------------------------
|
|
38
|
+
*/
|
|
39
|
+
/*
|
|
40
|
+
----------------------------------------
|
|
41
|
+
Prefix separator
|
|
42
|
+
----------------------------------------
|
|
43
|
+
Set the character the separates
|
|
44
|
+
responsive and state prefixes from the
|
|
45
|
+
main class name.
|
|
46
|
+
The default (":") needs to be preceded
|
|
47
|
+
by two backslashes to be properly
|
|
48
|
+
escaped.
|
|
49
|
+
----------------------------------------
|
|
50
|
+
*/
|
|
51
|
+
/*
|
|
52
|
+
----------------------------------------
|
|
53
|
+
Layout grid
|
|
54
|
+
----------------------------------------
|
|
55
|
+
Should the layout grid classes output
|
|
56
|
+
with !important
|
|
57
|
+
----------------------------------------
|
|
58
|
+
*/
|
|
59
|
+
/*
|
|
60
|
+
----------------------------------------
|
|
61
|
+
Border box sizing
|
|
62
|
+
----------------------------------------
|
|
63
|
+
When set to true, sets the box-sizing
|
|
64
|
+
property of all site elements to
|
|
65
|
+
`border-box`.
|
|
66
|
+
----------------------------------------
|
|
67
|
+
*/
|
|
68
|
+
/*
|
|
69
|
+
----------------------------------------
|
|
70
|
+
Focus styles
|
|
71
|
+
----------------------------------------
|
|
72
|
+
*/
|
|
73
|
+
/*
|
|
74
|
+
----------------------------------------
|
|
75
|
+
Icons
|
|
76
|
+
----------------------------------------
|
|
77
|
+
*/
|
|
78
|
+
/*
|
|
79
|
+
* * * * * ==============================
|
|
80
|
+
* * * * * ==============================
|
|
81
|
+
* * * * * ==============================
|
|
82
|
+
* * * * * ==============================
|
|
83
|
+
========================================
|
|
84
|
+
========================================
|
|
85
|
+
========================================
|
|
86
|
+
----------------------------------------
|
|
87
|
+
TYPOGRAPHY SETTINGS
|
|
88
|
+
----------------------------------------
|
|
89
|
+
Read more about settings and
|
|
90
|
+
USWDS typography tokens in the documentation:
|
|
91
|
+
https://designsystem.digital.gov/design-tokens/typesetting/overview/
|
|
92
|
+
----------------------------------------
|
|
93
|
+
*/
|
|
94
|
+
/*
|
|
95
|
+
----------------------------------------
|
|
96
|
+
Root font size
|
|
97
|
+
----------------------------------------
|
|
98
|
+
Setting $theme-respect-user-font-size to
|
|
99
|
+
true sets the root font size to 100% and
|
|
100
|
+
uses ems for media queries
|
|
101
|
+
----------------------------------------
|
|
102
|
+
$theme-root-font-size only applies when
|
|
103
|
+
$theme-respect-user-font-size is set to
|
|
104
|
+
false.
|
|
105
|
+
|
|
106
|
+
This will set the root font size
|
|
107
|
+
as a specific px value and use px values
|
|
108
|
+
for media queries.
|
|
109
|
+
|
|
110
|
+
Accepts true or false
|
|
111
|
+
----------------------------------------
|
|
112
|
+
*/
|
|
113
|
+
/*
|
|
114
|
+
----------------------------------------
|
|
115
|
+
Global styles
|
|
116
|
+
----------------------------------------
|
|
117
|
+
Adds basic styling for the following
|
|
118
|
+
unclassed elements:
|
|
119
|
+
|
|
120
|
+
- paragraph: paragraph text
|
|
121
|
+
- link: links
|
|
122
|
+
- content: paragraph text, links,
|
|
123
|
+
headings, lists, and tables
|
|
124
|
+
----------------------------------------
|
|
125
|
+
*/
|
|
126
|
+
/*
|
|
127
|
+
----------------------------------------
|
|
128
|
+
Broswer compatibility mode
|
|
129
|
+
----------------------------------------
|
|
130
|
+
When true, outputs woff and ttf font
|
|
131
|
+
formats in addition to woff2
|
|
132
|
+
----------------------------------------
|
|
133
|
+
*/
|
|
134
|
+
/*
|
|
135
|
+
----------------------------------------
|
|
136
|
+
Font path
|
|
137
|
+
----------------------------------------
|
|
138
|
+
Relative font file path
|
|
139
|
+
----------------------------------------
|
|
140
|
+
*/
|
|
141
|
+
/*
|
|
142
|
+
----------------------------------------
|
|
143
|
+
Custom typeface tokens
|
|
144
|
+
----------------------------------------
|
|
145
|
+
Add a new custom typeface token if
|
|
146
|
+
your project uses a typeface not already
|
|
147
|
+
defined by USWDS.
|
|
148
|
+
----------------------------------------
|
|
149
|
+
USWDS defines the following tokens
|
|
150
|
+
by default:
|
|
151
|
+
----------------------------------------
|
|
152
|
+
'georgia'
|
|
153
|
+
'helvetica'
|
|
154
|
+
'merriweather'
|
|
155
|
+
'open-sans'
|
|
156
|
+
'public-sans'
|
|
157
|
+
'roboto-mono'
|
|
158
|
+
'source-sans-pro'
|
|
159
|
+
'system'
|
|
160
|
+
'tahoma'
|
|
161
|
+
'verdana'
|
|
162
|
+
----------------------------------------
|
|
163
|
+
Add as many new tokens as you have
|
|
164
|
+
custom typefaces. Reference your new
|
|
165
|
+
token(s) in the type-based font settings
|
|
166
|
+
using the quoted name of the token.
|
|
167
|
+
|
|
168
|
+
For example:
|
|
169
|
+
|
|
170
|
+
$theme-font-type-cond: 'example-font-token';
|
|
171
|
+
|
|
172
|
+
display-name:
|
|
173
|
+
The display name of your font
|
|
174
|
+
|
|
175
|
+
cap-height:
|
|
176
|
+
The height of a 500px `N` in Sketch
|
|
177
|
+
----------------------------------------
|
|
178
|
+
You should change `example-[style]-token`
|
|
179
|
+
names to something more descriptive.
|
|
180
|
+
----------------------------------------
|
|
181
|
+
*/
|
|
182
|
+
/*
|
|
183
|
+
----------------------------------------
|
|
184
|
+
Type-based font settings
|
|
185
|
+
----------------------------------------
|
|
186
|
+
Set the type-based tokens for your
|
|
187
|
+
project from the following tokens,
|
|
188
|
+
or from any new font tokens you added in
|
|
189
|
+
$theme-typeface-tokens.
|
|
190
|
+
----------------------------------------
|
|
191
|
+
'georgia'
|
|
192
|
+
'helvetica'
|
|
193
|
+
'merriweather'
|
|
194
|
+
'open-sans'
|
|
195
|
+
'public-sans'
|
|
196
|
+
'roboto-mono'
|
|
197
|
+
'source-sans-pro'
|
|
198
|
+
'system'
|
|
199
|
+
'tahoma'
|
|
200
|
+
'verdana'
|
|
201
|
+
----------------------------------------
|
|
202
|
+
*/
|
|
203
|
+
/*
|
|
204
|
+
----------------------------------------
|
|
205
|
+
Custom font stacks
|
|
206
|
+
----------------------------------------
|
|
207
|
+
Add custom font stacks to any of the
|
|
208
|
+
type-based fonts. Any USWDS typeface
|
|
209
|
+
token already has a default stack.
|
|
210
|
+
|
|
211
|
+
Custom stacks don't need to include the
|
|
212
|
+
font's display name. It will
|
|
213
|
+
automatically appear at the start of
|
|
214
|
+
the stack.
|
|
215
|
+
----------------------------------------
|
|
216
|
+
Example:
|
|
217
|
+
$theme-font-type-sans: 'source-sans-pro';
|
|
218
|
+
$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;
|
|
219
|
+
|
|
220
|
+
Output:
|
|
221
|
+
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;
|
|
222
|
+
----------------------------------------
|
|
223
|
+
*/
|
|
224
|
+
/*
|
|
225
|
+
----------------------------------------
|
|
226
|
+
Add any custom font source files
|
|
227
|
+
----------------------------------------
|
|
228
|
+
If you want USWDS to generate additional
|
|
229
|
+
@font-face declarations, add your font
|
|
230
|
+
data below, following the example that
|
|
231
|
+
follows.
|
|
232
|
+
----------------------------------------
|
|
233
|
+
USWDS automatically generates @font-face
|
|
234
|
+
declarations for the following
|
|
235
|
+
|
|
236
|
+
'merriweather'
|
|
237
|
+
'public-sans'
|
|
238
|
+
'roboto-mono'
|
|
239
|
+
'source-sans-pro'
|
|
240
|
+
|
|
241
|
+
These typefaces not require custom
|
|
242
|
+
source files.
|
|
243
|
+
----------------------------------------
|
|
244
|
+
EXAMPLE
|
|
245
|
+
|
|
246
|
+
- dir:
|
|
247
|
+
Directory relative to $theme-font-path
|
|
248
|
+
- This directory should include fonts saved as
|
|
249
|
+
.woff2
|
|
250
|
+
ExampleSerif-Normal.woff2
|
|
251
|
+
|
|
252
|
+
$theme-font-serif-custom-src: (
|
|
253
|
+
dir: 'custom/example-serif',
|
|
254
|
+
roman: (
|
|
255
|
+
100: false,
|
|
256
|
+
200: false,
|
|
257
|
+
300: 'ExampleSerif-Light',
|
|
258
|
+
400: 'ExampleSerif-Normal',
|
|
259
|
+
500: false,
|
|
260
|
+
600: false,
|
|
261
|
+
700: 'ExampleSerif-Bold',
|
|
262
|
+
800: false,
|
|
263
|
+
900: false,
|
|
264
|
+
),
|
|
265
|
+
italic: (
|
|
266
|
+
100: false,
|
|
267
|
+
200: false,
|
|
268
|
+
300: 'ExampleSerif-LightItalic',
|
|
269
|
+
400: 'ExampleSerif-Italic',
|
|
270
|
+
500: false,
|
|
271
|
+
600: false,
|
|
272
|
+
700: 'ExampleSerif-BoldItalic',
|
|
273
|
+
800: false,
|
|
274
|
+
900: false,
|
|
275
|
+
),
|
|
276
|
+
);
|
|
277
|
+
----------------------------------------
|
|
278
|
+
*/
|
|
279
|
+
/*
|
|
280
|
+
----------------------------------------
|
|
281
|
+
Role-based font settings
|
|
282
|
+
----------------------------------------
|
|
283
|
+
Set the role-based tokens for your
|
|
284
|
+
project from the following font-type
|
|
285
|
+
tokens.
|
|
286
|
+
----------------------------------------
|
|
287
|
+
'cond'
|
|
288
|
+
'icon'
|
|
289
|
+
'lang'
|
|
290
|
+
'mono'
|
|
291
|
+
'sans'
|
|
292
|
+
'serif'
|
|
293
|
+
----------------------------------------
|
|
294
|
+
*/
|
|
295
|
+
/*
|
|
296
|
+
----------------------------------------
|
|
297
|
+
Type scale
|
|
298
|
+
----------------------------------------
|
|
299
|
+
Define your project's type scale using
|
|
300
|
+
values from the USWDS system type scale
|
|
301
|
+
|
|
302
|
+
1-20
|
|
303
|
+
----------------------------------------
|
|
304
|
+
*/
|
|
305
|
+
/*
|
|
306
|
+
----------------------------------------
|
|
307
|
+
Font weights
|
|
308
|
+
----------------------------------------
|
|
309
|
+
Assign weights 100-900
|
|
310
|
+
Or use `false` for unneeded weights.
|
|
311
|
+
----------------------------------------
|
|
312
|
+
*/
|
|
313
|
+
/*
|
|
314
|
+
----------------------------------------
|
|
315
|
+
General typography settings
|
|
316
|
+
----------------------------------------
|
|
317
|
+
Type scale tokens
|
|
318
|
+
----------------------------------------
|
|
319
|
+
micro: 10px
|
|
320
|
+
1: 12px
|
|
321
|
+
2: 13px
|
|
322
|
+
3: 14px
|
|
323
|
+
4: 15px
|
|
324
|
+
5: 16px
|
|
325
|
+
6: 17px
|
|
326
|
+
7: 18px
|
|
327
|
+
8: 20px
|
|
328
|
+
9: 22px
|
|
329
|
+
10: 24px
|
|
330
|
+
11: 28px
|
|
331
|
+
12: 32px
|
|
332
|
+
13: 36px
|
|
333
|
+
14: 40px
|
|
334
|
+
15: 48px
|
|
335
|
+
16: 56px
|
|
336
|
+
17: 64px
|
|
337
|
+
18: 80px
|
|
338
|
+
19: 120px
|
|
339
|
+
20: 140px
|
|
340
|
+
----------------------------------------
|
|
341
|
+
Line height tokens
|
|
342
|
+
----------------------------------------
|
|
343
|
+
1: 1
|
|
344
|
+
2: 1.15
|
|
345
|
+
3: 1.35
|
|
346
|
+
4: 1.5
|
|
347
|
+
5: 1.62
|
|
348
|
+
6: 1.75
|
|
349
|
+
----------------------------------------
|
|
350
|
+
Font role tokens
|
|
351
|
+
----------------------------------------
|
|
352
|
+
'ui'
|
|
353
|
+
'heading'
|
|
354
|
+
'body'
|
|
355
|
+
'code'
|
|
356
|
+
'alt'
|
|
357
|
+
----------------------------------------
|
|
358
|
+
Measure (max-width) tokens
|
|
359
|
+
----------------------------------------
|
|
360
|
+
1: 44ex
|
|
361
|
+
2: 60ex
|
|
362
|
+
3: 64ex
|
|
363
|
+
4: 68ex
|
|
364
|
+
5: 74ex
|
|
365
|
+
6: 88ex
|
|
366
|
+
none: none
|
|
367
|
+
----------------------------------------
|
|
368
|
+
*/
|
|
369
|
+
/*
|
|
370
|
+
* * * * * ==============================
|
|
371
|
+
* * * * * ==============================
|
|
372
|
+
* * * * * ==============================
|
|
373
|
+
* * * * * ==============================
|
|
374
|
+
========================================
|
|
375
|
+
========================================
|
|
376
|
+
========================================
|
|
377
|
+
----------------------------------------
|
|
378
|
+
COLOR SETTINGS
|
|
379
|
+
----------------------------------------
|
|
380
|
+
Read more about settings and
|
|
381
|
+
USWDS color tokens in the documentation:
|
|
382
|
+
https://designsystem.digital.gov/design-tokens/color
|
|
383
|
+
----------------------------------------
|
|
384
|
+
*/
|
|
385
|
+
/*
|
|
386
|
+
----------------------------------------
|
|
387
|
+
Theme palette colors
|
|
388
|
+
----------------------------------------
|
|
389
|
+
*/
|
|
390
|
+
/*
|
|
391
|
+
----------------------------------------
|
|
392
|
+
State palette colors
|
|
393
|
+
----------------------------------------
|
|
394
|
+
*/
|
|
395
|
+
/*
|
|
396
|
+
----------------------------------------
|
|
397
|
+
General colors
|
|
398
|
+
----------------------------------------
|
|
399
|
+
*/
|
|
400
|
+
/*
|
|
401
|
+
* * * * * ==============================
|
|
402
|
+
* * * * * ==============================
|
|
403
|
+
* * * * * ==============================
|
|
404
|
+
* * * * * ==============================
|
|
405
|
+
========================================
|
|
406
|
+
========================================
|
|
407
|
+
========================================
|
|
408
|
+
----------------------------------------
|
|
409
|
+
COMPONENT SETTINGS
|
|
410
|
+
----------------------------------------
|
|
411
|
+
Read more about settings and
|
|
412
|
+
USWDS style tokens in the documentation:
|
|
413
|
+
https://designsystem.digital.gov/design-tokens
|
|
414
|
+
----------------------------------------
|
|
415
|
+
*/
|
|
416
|
+
/*
|
|
417
|
+
* * * * * ==============================
|
|
418
|
+
* * * * * ==============================
|
|
419
|
+
* * * * * ==============================
|
|
420
|
+
* * * * * ==============================
|
|
421
|
+
========================================
|
|
422
|
+
========================================
|
|
423
|
+
========================================
|
|
424
|
+
----------------------------------------
|
|
425
|
+
SPACING SETTINGS
|
|
426
|
+
----------------------------------------
|
|
427
|
+
Read more about settings and
|
|
428
|
+
USWDS spacing units tokens in the
|
|
429
|
+
documentation:
|
|
430
|
+
https://designsystem.digital.gov/design-tokens/spacing-units
|
|
431
|
+
----------------------------------------
|
|
432
|
+
*/
|
|
433
|
+
/*
|
|
434
|
+
----------------------------------------
|
|
435
|
+
Border radius
|
|
436
|
+
----------------------------------------
|
|
437
|
+
2px 2px
|
|
438
|
+
0.5 4px
|
|
439
|
+
1 8px
|
|
440
|
+
1.5 12px
|
|
441
|
+
2 16px
|
|
442
|
+
2.5 20px
|
|
443
|
+
3 24px
|
|
444
|
+
4 32px
|
|
445
|
+
5 40px
|
|
446
|
+
6 48px
|
|
447
|
+
7 56px
|
|
448
|
+
8 64px
|
|
449
|
+
9 72px
|
|
450
|
+
----------------------------------------
|
|
451
|
+
*/
|
|
452
|
+
/*
|
|
453
|
+
----------------------------------------
|
|
454
|
+
Column gap
|
|
455
|
+
----------------------------------------
|
|
456
|
+
2px 2px
|
|
457
|
+
0.5 4px
|
|
458
|
+
1 8px
|
|
459
|
+
2 16px
|
|
460
|
+
3 24px
|
|
461
|
+
4 32px
|
|
462
|
+
5 40px
|
|
463
|
+
6 48px
|
|
464
|
+
----------------------------------------
|
|
465
|
+
*/
|
|
466
|
+
/*
|
|
467
|
+
----------------------------------------
|
|
468
|
+
Grid container max-width
|
|
469
|
+
----------------------------------------
|
|
470
|
+
mobile
|
|
471
|
+
mobile-lg
|
|
472
|
+
tablet
|
|
473
|
+
tablet-lg
|
|
474
|
+
desktop
|
|
475
|
+
desktop-lg
|
|
476
|
+
widescreen
|
|
477
|
+
----------------------------------------
|
|
478
|
+
*/
|
|
479
|
+
/*
|
|
480
|
+
----------------------------------------
|
|
481
|
+
Site
|
|
482
|
+
----------------------------------------
|
|
483
|
+
*/
|
|
484
|
+
/*
|
|
485
|
+
* * * * * ==============================
|
|
486
|
+
* * * * * ==============================
|
|
487
|
+
* * * * * ==============================
|
|
488
|
+
* * * * * ==============================
|
|
489
|
+
========================================
|
|
490
|
+
========================================
|
|
491
|
+
========================================
|
|
492
|
+
----------------------------------------
|
|
493
|
+
UTILITIES SETTINGS
|
|
494
|
+
----------------------------------------
|
|
495
|
+
Read more about settings and
|
|
496
|
+
USWDS utilities in the documentation:
|
|
497
|
+
https://designsystem.digital.gov/utilities
|
|
498
|
+
----------------------------------------
|
|
499
|
+
*/
|
|
500
|
+
/*
|
|
501
|
+
----------------------------------------
|
|
502
|
+
Utility breakpoints
|
|
503
|
+
----------------------------------------
|
|
504
|
+
Which breakpoints does your project
|
|
505
|
+
need? Select as `true` any breakpoint
|
|
506
|
+
used by utilities or layout grid
|
|
507
|
+
----------------------------------------
|
|
508
|
+
*/
|
|
509
|
+
/*
|
|
510
|
+
----------------------------------------
|
|
511
|
+
Global colors
|
|
512
|
+
----------------------------------------
|
|
513
|
+
The following palettes will be added to
|
|
514
|
+
- background-color
|
|
515
|
+
- border-color
|
|
516
|
+
- color
|
|
517
|
+
- text-decoration-color
|
|
518
|
+
----------------------------------------
|
|
519
|
+
*/
|
|
520
|
+
/*
|
|
521
|
+
----------------------------------------
|
|
522
|
+
Settings
|
|
523
|
+
----------------------------------------
|
|
524
|
+
*/
|
|
525
|
+
/*
|
|
526
|
+
----------------------------------------
|
|
527
|
+
Values
|
|
528
|
+
----------------------------------------
|
|
529
|
+
*/
|
|
530
|
+
/*
|
|
531
|
+
----------------------------------------
|
|
532
|
+
color()
|
|
533
|
+
----------------------------------------
|
|
534
|
+
Derive a color from a color shortcode
|
|
535
|
+
----------------------------------------
|
|
536
|
+
*/
|
|
537
|
+
/*
|
|
538
|
+
----------------------------------------
|
|
539
|
+
append-important()
|
|
540
|
+
----------------------------------------
|
|
541
|
+
Append `!important` to a list
|
|
542
|
+
----------------------------------------
|
|
543
|
+
*/
|
|
544
|
+
/*
|
|
545
|
+
----------------------------------------
|
|
546
|
+
get-last()
|
|
547
|
+
----------------------------------------
|
|
548
|
+
Return the last item of a list,
|
|
549
|
+
Return null if the value is null
|
|
550
|
+
----------------------------------------
|
|
551
|
+
*/
|
|
552
|
+
/*
|
|
553
|
+
----------------------------------------
|
|
554
|
+
de-list()
|
|
555
|
+
----------------------------------------
|
|
556
|
+
Transform a one-element list or arglist
|
|
557
|
+
into that single element.
|
|
558
|
+
----------------------------------------
|
|
559
|
+
(1) => 1
|
|
560
|
+
((1)) => (1)
|
|
561
|
+
----------------------------------------
|
|
562
|
+
*/
|
|
563
|
+
/*
|
|
564
|
+
----------------------------------------
|
|
565
|
+
error-not-token()
|
|
566
|
+
----------------------------------------
|
|
567
|
+
Returns a common not-a-token error.
|
|
568
|
+
----------------------------------------
|
|
569
|
+
*/
|
|
570
|
+
/*
|
|
571
|
+
----------------------------------------
|
|
572
|
+
uswds-error()
|
|
573
|
+
----------------------------------------
|
|
574
|
+
Allow the system to pass an error as text
|
|
575
|
+
to test error states in unit testing
|
|
576
|
+
----------------------------------------
|
|
577
|
+
*/
|
|
578
|
+
/*
|
|
579
|
+
----------------------------------------
|
|
580
|
+
get-default()
|
|
581
|
+
----------------------------------------
|
|
582
|
+
Returns the default value from a map
|
|
583
|
+
of project defaults
|
|
584
|
+
get-default("bg-color")
|
|
585
|
+
> $theme-body-background-color
|
|
586
|
+
----------------------------------------
|
|
587
|
+
*/
|
|
588
|
+
/*
|
|
589
|
+
----------------------------------------
|
|
590
|
+
has-important()
|
|
591
|
+
----------------------------------------
|
|
592
|
+
Check to see if `!important` is
|
|
593
|
+
being passed in a mixin's props
|
|
594
|
+
----------------------------------------
|
|
595
|
+
*/
|
|
596
|
+
/*
|
|
597
|
+
----------------------------------------
|
|
598
|
+
map-collect()
|
|
599
|
+
----------------------------------------
|
|
600
|
+
Collect multiple maps into a single
|
|
601
|
+
large map
|
|
602
|
+
source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe
|
|
603
|
+
----------------------------------------
|
|
604
|
+
*/
|
|
605
|
+
/*
|
|
606
|
+
----------------------------------------
|
|
607
|
+
map-deep-get()
|
|
608
|
+
----------------------------------------
|
|
609
|
+
@author Hugo Giraudel
|
|
610
|
+
@access public
|
|
611
|
+
@param {Map} $map - Map
|
|
612
|
+
@param {Arglist} $keys - Key chain
|
|
613
|
+
@return {*} - Desired value
|
|
614
|
+
----------------------------------------
|
|
615
|
+
*/
|
|
616
|
+
/*
|
|
617
|
+
----------------------------------------
|
|
618
|
+
multi-cat()
|
|
619
|
+
----------------------------------------
|
|
620
|
+
Concatenate two lists
|
|
621
|
+
----------------------------------------
|
|
622
|
+
*/
|
|
623
|
+
/*
|
|
624
|
+
----------------------------------------
|
|
625
|
+
remove()
|
|
626
|
+
----------------------------------------
|
|
627
|
+
Remove a value from a list
|
|
628
|
+
----------------------------------------
|
|
629
|
+
*/
|
|
630
|
+
/*
|
|
631
|
+
----------------------------------------
|
|
632
|
+
smart-quote()
|
|
633
|
+
----------------------------------------
|
|
634
|
+
Quotes strings
|
|
635
|
+
Inspects `px`, `xs`, and `xl` numbers
|
|
636
|
+
Leaves bools as is
|
|
637
|
+
----------------------------------------
|
|
638
|
+
*/
|
|
639
|
+
/*
|
|
640
|
+
----------------------------------------
|
|
641
|
+
str-replace()
|
|
642
|
+
----------------------------------------
|
|
643
|
+
Replace any substring with another
|
|
644
|
+
string
|
|
645
|
+
----------------------------------------
|
|
646
|
+
*/
|
|
647
|
+
/*
|
|
648
|
+
----------------------------------------
|
|
649
|
+
str-split()
|
|
650
|
+
----------------------------------------
|
|
651
|
+
Split a string at a given separator
|
|
652
|
+
and convert into a list of substrings
|
|
653
|
+
----------------------------------------
|
|
654
|
+
*/
|
|
655
|
+
/*
|
|
656
|
+
----------------------------------------
|
|
657
|
+
strip-unit()
|
|
658
|
+
----------------------------------------
|
|
659
|
+
Remove the unit of a length
|
|
660
|
+
@author Hugo Giraudel
|
|
661
|
+
@param {Number} $number - Number to remove unit from
|
|
662
|
+
@return {Number} - Unitless number
|
|
663
|
+
----------------------------------------
|
|
664
|
+
*/
|
|
665
|
+
/*
|
|
666
|
+
----------------------------------------
|
|
667
|
+
base-to-map()
|
|
668
|
+
@TODO: Deprecate and delete
|
|
669
|
+
----------------------------------------
|
|
670
|
+
Convert a single base to a USWDS
|
|
671
|
+
value map.
|
|
672
|
+
|
|
673
|
+
Candidate for deprecation if we remove
|
|
674
|
+
isReadable
|
|
675
|
+
----------------------------------------
|
|
676
|
+
*/
|
|
677
|
+
/*
|
|
678
|
+
----------------------------------------
|
|
679
|
+
to-number()
|
|
680
|
+
----------------------------------------
|
|
681
|
+
Casts a string into a number
|
|
682
|
+
----------------------------------------
|
|
683
|
+
@param {String | Number} $value - Value to be parsed
|
|
684
|
+
@return {Number}
|
|
685
|
+
----------------------------------------
|
|
686
|
+
*/
|
|
687
|
+
/*
|
|
688
|
+
----------------------------------------
|
|
689
|
+
unpack()
|
|
690
|
+
----------------------------------------
|
|
691
|
+
Create lists of single items from lists
|
|
692
|
+
of lists.
|
|
693
|
+
----------------------------------------
|
|
694
|
+
(1, (2.1, 2.2), 3) -->
|
|
695
|
+
(1, 2.1, 2.2, 3)
|
|
696
|
+
----------------------------------------
|
|
697
|
+
*/
|
|
698
|
+
/*
|
|
699
|
+
----------------------------------------
|
|
700
|
+
color()
|
|
701
|
+
----------------------------------------
|
|
702
|
+
Derive a color from a color shortcode
|
|
703
|
+
----------------------------------------
|
|
704
|
+
*/
|
|
705
|
+
/*
|
|
706
|
+
----------------------------------------
|
|
707
|
+
color()
|
|
708
|
+
----------------------------------------
|
|
709
|
+
Derive a color from a color shortcode
|
|
710
|
+
----------------------------------------
|
|
711
|
+
*/
|
|
712
|
+
/*
|
|
713
|
+
----------------------------------------
|
|
714
|
+
get-system-color()
|
|
715
|
+
----------------------------------------
|
|
716
|
+
Derive a system color from its
|
|
717
|
+
family, value, and vivid or a passed
|
|
718
|
+
variable that is, itself, a list
|
|
719
|
+
----------------------------------------
|
|
720
|
+
*/
|
|
721
|
+
/*
|
|
722
|
+
----------------------------------------
|
|
723
|
+
color()
|
|
724
|
+
----------------------------------------
|
|
725
|
+
Derive a color from a color shortcode
|
|
726
|
+
----------------------------------------
|
|
727
|
+
*/
|
|
728
|
+
/*
|
|
729
|
+
----------------------------------------
|
|
730
|
+
color()
|
|
731
|
+
----------------------------------------
|
|
732
|
+
Derive a color from a color shortcode
|
|
733
|
+
----------------------------------------
|
|
734
|
+
*/
|
|
735
|
+
/*
|
|
736
|
+
----------------------------------------
|
|
737
|
+
color()
|
|
738
|
+
----------------------------------------
|
|
739
|
+
Derive a color from a color shortcode
|
|
740
|
+
----------------------------------------
|
|
741
|
+
*/
|
|
742
|
+
/*
|
|
743
|
+
----------------------------------------
|
|
744
|
+
set-theme-color()
|
|
745
|
+
----------------------------------------
|
|
746
|
+
Derive a color from a system color token
|
|
747
|
+
or a hex value
|
|
748
|
+
----------------------------------------
|
|
749
|
+
*/
|
|
750
|
+
/*
|
|
751
|
+
----------------------------------------
|
|
752
|
+
px-to-rem()
|
|
753
|
+
----------------------------------------
|
|
754
|
+
Converts a value in px to a value in rem
|
|
755
|
+
----------------------------------------
|
|
756
|
+
*/
|
|
757
|
+
/*
|
|
758
|
+
----------------------------------------
|
|
759
|
+
rem-to-px()
|
|
760
|
+
----------------------------------------
|
|
761
|
+
Converts a value in rem to a value in px
|
|
762
|
+
----------------------------------------
|
|
763
|
+
*/
|
|
764
|
+
/*
|
|
765
|
+
----------------------------------------
|
|
766
|
+
rem-to-user-em()
|
|
767
|
+
----------------------------------------
|
|
768
|
+
Converts a value in rem to a value in
|
|
769
|
+
[user-settings] em for use in media
|
|
770
|
+
queries
|
|
771
|
+
----------------------------------------
|
|
772
|
+
*/
|
|
773
|
+
/*
|
|
774
|
+
----------------------------------------
|
|
775
|
+
spacing-multiple()
|
|
776
|
+
----------------------------------------
|
|
777
|
+
Converts a spacing unit multiple into
|
|
778
|
+
the desired final units (currently rem)
|
|
779
|
+
----------------------------------------
|
|
780
|
+
*/
|
|
781
|
+
/*
|
|
782
|
+
----------------------------------------
|
|
783
|
+
units()
|
|
784
|
+
----------------------------------------
|
|
785
|
+
Converts a spacing unit into
|
|
786
|
+
the desired final units (currently rem)
|
|
787
|
+
----------------------------------------
|
|
788
|
+
*/
|
|
789
|
+
/*
|
|
790
|
+
----------------------------------------
|
|
791
|
+
number-to-token()
|
|
792
|
+
----------------------------------------
|
|
793
|
+
Converts an integer or numeric value
|
|
794
|
+
into a system value
|
|
795
|
+
|
|
796
|
+
Ex: 0.5 --> '05'
|
|
797
|
+
-1px --> 'neg-1px'
|
|
798
|
+
----------------------------------------
|
|
799
|
+
*/
|
|
800
|
+
/*
|
|
801
|
+
----------------------------------------
|
|
802
|
+
Project fonts
|
|
803
|
+
----------------------------------------
|
|
804
|
+
Collects font settings in a map for
|
|
805
|
+
looping.
|
|
806
|
+
----------------------------------------
|
|
807
|
+
*/
|
|
808
|
+
/*
|
|
809
|
+
----------------------------------------
|
|
810
|
+
Luminance ranges
|
|
811
|
+
----------------------------------------
|
|
812
|
+
*/
|
|
813
|
+
/*
|
|
814
|
+
----------------------------------------
|
|
815
|
+
ns()
|
|
816
|
+
----------------------------------------
|
|
817
|
+
Add a namesspace of $type if that
|
|
818
|
+
namespace is set to output
|
|
819
|
+
----------------------------------------
|
|
820
|
+
*/
|
|
821
|
+
/*
|
|
822
|
+
----------------------------------------
|
|
823
|
+
Line height
|
|
824
|
+
----------------------------------------
|
|
825
|
+
*/
|
|
826
|
+
/*
|
|
827
|
+
----------------------------------------
|
|
828
|
+
Measure
|
|
829
|
+
----------------------------------------
|
|
830
|
+
*/
|
|
831
|
+
/*
|
|
832
|
+
----------------------------------------
|
|
833
|
+
cap-height()
|
|
834
|
+
----------------------------------------
|
|
835
|
+
Get the cap height of a valid typeface
|
|
836
|
+
----------------------------------------
|
|
837
|
+
*/
|
|
838
|
+
/*
|
|
839
|
+
----------------------------------------
|
|
840
|
+
validate-typeface-token()
|
|
841
|
+
----------------------------------------
|
|
842
|
+
Check to see if a typeface-token exists.
|
|
843
|
+
Throw an error if a passed token does
|
|
844
|
+
not exist in the typeface-token map.
|
|
845
|
+
----------------------------------------
|
|
846
|
+
*/
|
|
847
|
+
/*
|
|
848
|
+
----------------------------------------
|
|
849
|
+
convert-to-font-type()
|
|
850
|
+
----------------------------------------
|
|
851
|
+
Converts a font-role token into a
|
|
852
|
+
font-type token. Leaves font-type tokens
|
|
853
|
+
unchanged.
|
|
854
|
+
----------------------------------------
|
|
855
|
+
*/
|
|
856
|
+
/*
|
|
857
|
+
----------------------------------------
|
|
858
|
+
font-sources()
|
|
859
|
+
----------------------------------------
|
|
860
|
+
Outputs a list of font sources used in
|
|
861
|
+
a @font-face declaration.
|
|
862
|
+
|
|
863
|
+
$theme-font-browser-compatibility: true - output woff2, woff, ttf
|
|
864
|
+
$theme-font-browser-compatibility: false - output woff2
|
|
865
|
+
|
|
866
|
+
@param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]
|
|
867
|
+
@output: string
|
|
868
|
+
|
|
869
|
+
filetypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)
|
|
870
|
+
----------------------------------------
|
|
871
|
+
*/
|
|
872
|
+
/*
|
|
873
|
+
----------------------------------------
|
|
874
|
+
get-font-stack()
|
|
875
|
+
----------------------------------------
|
|
876
|
+
Get a font stack from a style- or
|
|
877
|
+
role-based font token.
|
|
878
|
+
----------------------------------------
|
|
879
|
+
*/
|
|
880
|
+
/*
|
|
881
|
+
----------------------------------------
|
|
882
|
+
get-typeface-token()
|
|
883
|
+
----------------------------------------
|
|
884
|
+
Get a typeface token from a font-type or
|
|
885
|
+
font-role token.
|
|
886
|
+
----------------------------------------
|
|
887
|
+
*/
|
|
888
|
+
/*
|
|
889
|
+
----------------------------------------
|
|
890
|
+
normalize-type-scale()
|
|
891
|
+
----------------------------------------
|
|
892
|
+
Normalizes a specific face's optical size
|
|
893
|
+
to a set target
|
|
894
|
+
----------------------------------------
|
|
895
|
+
*/
|
|
896
|
+
/*
|
|
897
|
+
----------------------------------------
|
|
898
|
+
system-type-scale()
|
|
899
|
+
----------------------------------------
|
|
900
|
+
Get a value from the system type scale
|
|
901
|
+
----------------------------------------
|
|
902
|
+
*/
|
|
903
|
+
/*
|
|
904
|
+
----------------------------------------
|
|
905
|
+
Easing
|
|
906
|
+
----------------------------------------
|
|
907
|
+
*/
|
|
908
|
+
/* deprecated.scss
|
|
909
|
+
---
|
|
910
|
+
Occasionally the design system will deprecate
|
|
911
|
+
old variables or functionality. If we replace
|
|
912
|
+
the old functionality with something new, this is a
|
|
913
|
+
place to connect the old functionality to the
|
|
914
|
+
new functionality, in the service of better
|
|
915
|
+
continuity and backwards compatibility within a
|
|
916
|
+
major release cycle.
|
|
917
|
+
|
|
918
|
+
Note the USWDS version where we deprecated the
|
|
919
|
+
old functionality in a comment.
|
|
920
|
+
|
|
921
|
+
Be sure to update notifications.scss.
|
|
922
|
+
|
|
923
|
+
This file should started fresh at each
|
|
924
|
+
major version.
|
|
925
|
+
*/
|
|
926
|
+
/*
|
|
927
|
+
----------------------------------------
|
|
928
|
+
advanced-color()
|
|
929
|
+
----------------------------------------
|
|
930
|
+
Derive a color from a color triplet:
|
|
931
|
+
[family], [grade], [variant]
|
|
932
|
+
----------------------------------------
|
|
933
|
+
*/
|
|
934
|
+
/*
|
|
935
|
+
----------------------------------------
|
|
936
|
+
calculate-grade()
|
|
937
|
+
----------------------------------------
|
|
938
|
+
Derive the grade equivalent any color,
|
|
939
|
+
even non-token colors
|
|
940
|
+
----------------------------------------
|
|
941
|
+
*/
|
|
942
|
+
/*
|
|
943
|
+
----------------------------------------
|
|
944
|
+
color-token-assignment()
|
|
945
|
+
----------------------------------------
|
|
946
|
+
Get the system token equivalent of any
|
|
947
|
+
theme color token
|
|
948
|
+
----------------------------------------
|
|
949
|
+
*/
|
|
950
|
+
/*
|
|
951
|
+
----------------------------------------
|
|
952
|
+
is-system-color-token()
|
|
953
|
+
----------------------------------------
|
|
954
|
+
Return whether a token is a system
|
|
955
|
+
color token
|
|
956
|
+
----------------------------------------
|
|
957
|
+
*/
|
|
958
|
+
/*
|
|
959
|
+
----------------------------------------
|
|
960
|
+
is-theme-color-token()
|
|
961
|
+
----------------------------------------
|
|
962
|
+
Return whether a token is a theme
|
|
963
|
+
color token
|
|
964
|
+
----------------------------------------
|
|
965
|
+
*/
|
|
966
|
+
/*
|
|
967
|
+
----------------------------------------
|
|
968
|
+
color-token-family()
|
|
969
|
+
----------------------------------------
|
|
970
|
+
Returns the family of a color token.
|
|
971
|
+
Returns: color-family
|
|
972
|
+
color-token-family("accent-warm-vivid")
|
|
973
|
+
> "accent-warm"
|
|
974
|
+
color-token-family("red-50v")
|
|
975
|
+
> "red"
|
|
976
|
+
color-token-variant(("red", 50, "vivid"))
|
|
977
|
+
> "red"
|
|
978
|
+
----------------------------------------
|
|
979
|
+
*/
|
|
980
|
+
/*
|
|
981
|
+
----------------------------------------
|
|
982
|
+
decompose()
|
|
983
|
+
----------------------------------------
|
|
984
|
+
Convert a color token into into a list
|
|
985
|
+
of form [family], [grade], [variant]
|
|
986
|
+
Vivid variants return "vivid" as the
|
|
987
|
+
variant.
|
|
988
|
+
If neither grade nor variant exists,
|
|
989
|
+
returns 'null'
|
|
990
|
+
----------------------------------------
|
|
991
|
+
*/
|
|
992
|
+
/*
|
|
993
|
+
----------------------------------------
|
|
994
|
+
color-token-family()
|
|
995
|
+
----------------------------------------
|
|
996
|
+
Returns the family of a color token.
|
|
997
|
+
Returns: color-family
|
|
998
|
+
color-token-family("accent-warm-vivid")
|
|
999
|
+
> "accent-warm"
|
|
1000
|
+
color-token-family("red-50v")
|
|
1001
|
+
> "red"
|
|
1002
|
+
color-token-variant(("red", 50, "vivid"))
|
|
1003
|
+
> "red"
|
|
1004
|
+
----------------------------------------
|
|
1005
|
+
*/
|
|
1006
|
+
/*
|
|
1007
|
+
----------------------------------------
|
|
1008
|
+
color-token-grade()
|
|
1009
|
+
----------------------------------------
|
|
1010
|
+
Returns the grade of a USWDS color token.
|
|
1011
|
+
Returns: color-grade
|
|
1012
|
+
color-token-grade("accent-warm")
|
|
1013
|
+
> "root"
|
|
1014
|
+
color-token-grade("accent-warm-vivid")
|
|
1015
|
+
> "root"
|
|
1016
|
+
color-token-grade("accent-warm-darker")
|
|
1017
|
+
> "darker"
|
|
1018
|
+
color-token-grade("red-50v")
|
|
1019
|
+
> 50
|
|
1020
|
+
color-token-variant(("red", 50, "vivid"))
|
|
1021
|
+
> 50
|
|
1022
|
+
----------------------------------------
|
|
1023
|
+
*/
|
|
1024
|
+
/*
|
|
1025
|
+
----------------------------------------
|
|
1026
|
+
color-token-family()
|
|
1027
|
+
----------------------------------------
|
|
1028
|
+
Returns the family of a color token.
|
|
1029
|
+
Returns: color-family
|
|
1030
|
+
color-token-family("accent-warm-vivid")
|
|
1031
|
+
> "accent-warm"
|
|
1032
|
+
color-token-family("red-50v")
|
|
1033
|
+
> "red"
|
|
1034
|
+
color-token-variant(("red", 50, "vivid"))
|
|
1035
|
+
> "red"
|
|
1036
|
+
----------------------------------------
|
|
1037
|
+
*/
|
|
1038
|
+
/*
|
|
1039
|
+
----------------------------------------
|
|
1040
|
+
is-color-token()
|
|
1041
|
+
----------------------------------------
|
|
1042
|
+
Returns whether a given string is a
|
|
1043
|
+
USWDS color token.
|
|
1044
|
+
----------------------------------------
|
|
1045
|
+
*/
|
|
1046
|
+
/*
|
|
1047
|
+
----------------------------------------
|
|
1048
|
+
pow()
|
|
1049
|
+
----------------------------------------
|
|
1050
|
+
Raises a unitless number to the power
|
|
1051
|
+
of another unitless number
|
|
1052
|
+
Includes helper functions
|
|
1053
|
+
----------------------------------------
|
|
1054
|
+
*/
|
|
1055
|
+
/*
|
|
1056
|
+
----------------------------------------
|
|
1057
|
+
Helper functions
|
|
1058
|
+
----------------------------------------
|
|
1059
|
+
*/
|
|
1060
|
+
/* factorial()
|
|
1061
|
+
----------------------------------------
|
|
1062
|
+
*/
|
|
1063
|
+
/* summation()
|
|
1064
|
+
----------------------------------------
|
|
1065
|
+
*/
|
|
1066
|
+
/* exp-maclaurin()
|
|
1067
|
+
----------------------------------------
|
|
1068
|
+
*/
|
|
1069
|
+
/* ln()
|
|
1070
|
+
----------------------------------------
|
|
1071
|
+
*/
|
|
1072
|
+
/*
|
|
1073
|
+
----------------------------------------
|
|
1074
|
+
color-token-type()
|
|
1075
|
+
----------------------------------------
|
|
1076
|
+
Returns the type of a color token.
|
|
1077
|
+
Returns: "system" | "theme"
|
|
1078
|
+
----------------------------------------
|
|
1079
|
+
*/
|
|
1080
|
+
/*
|
|
1081
|
+
----------------------------------------
|
|
1082
|
+
color-token-variant()
|
|
1083
|
+
----------------------------------------
|
|
1084
|
+
Returns the variant of color token.
|
|
1085
|
+
Returns: "vivid" | false
|
|
1086
|
+
color-token-variant("accent-warm")
|
|
1087
|
+
> false
|
|
1088
|
+
color-token-variant("accent-warm-vivid")
|
|
1089
|
+
> "vivid"
|
|
1090
|
+
color-token-variant("red-50v")
|
|
1091
|
+
> "vivid"
|
|
1092
|
+
color-token-variant(("red", 50, "vivid"))
|
|
1093
|
+
> "vivid"
|
|
1094
|
+
----------------------------------------
|
|
1095
|
+
*/
|
|
1096
|
+
/*
|
|
1097
|
+
----------------------------------------
|
|
1098
|
+
magic-number()
|
|
1099
|
+
----------------------------------------
|
|
1100
|
+
Returns the magic number of two color
|
|
1101
|
+
grades. Takes numbers or color tokens.
|
|
1102
|
+
magic-number(50, 10)
|
|
1103
|
+
return: 40
|
|
1104
|
+
magic-number("red-50", "red-10")
|
|
1105
|
+
return: 40
|
|
1106
|
+
----------------------------------------
|
|
1107
|
+
*/
|
|
1108
|
+
/*
|
|
1109
|
+
----------------------------------------
|
|
1110
|
+
is-accessible-magic-number()
|
|
1111
|
+
----------------------------------------
|
|
1112
|
+
Returns whether two grades achieve
|
|
1113
|
+
specified target color contrast
|
|
1114
|
+
Returns: true | false
|
|
1115
|
+
is-accessible-magic-number(10, 50, "AA")
|
|
1116
|
+
> false
|
|
1117
|
+
is-accessible-magic-number(10, 60, "AA")
|
|
1118
|
+
> true
|
|
1119
|
+
----------------------------------------
|
|
1120
|
+
*/
|
|
1121
|
+
/*
|
|
1122
|
+
----------------------------------------
|
|
1123
|
+
wcag-magic-number()
|
|
1124
|
+
----------------------------------------
|
|
1125
|
+
Returns the magic number of a specific
|
|
1126
|
+
wcag grade:
|
|
1127
|
+
"AA"
|
|
1128
|
+
"AA-Large"
|
|
1129
|
+
"AAA"
|
|
1130
|
+
wcag-magic-number("AA")
|
|
1131
|
+
> 50
|
|
1132
|
+
----------------------------------------
|
|
1133
|
+
*/
|
|
1134
|
+
/*
|
|
1135
|
+
----------------------------------------
|
|
1136
|
+
get-link-tokens-from-bg()
|
|
1137
|
+
----------------------------------------
|
|
1138
|
+
Get accessible link colors for a given
|
|
1139
|
+
background color
|
|
1140
|
+
returns: link-token, hover-token
|
|
1141
|
+
get-link-tokens-from-bg(
|
|
1142
|
+
"black",
|
|
1143
|
+
"red-60",
|
|
1144
|
+
"red-10",
|
|
1145
|
+
"AA")
|
|
1146
|
+
> "red-10", "red-5"
|
|
1147
|
+
get-link-tokens-from-bg(
|
|
1148
|
+
"black",
|
|
1149
|
+
"red-60v",
|
|
1150
|
+
"red-10v",
|
|
1151
|
+
"AA-large")
|
|
1152
|
+
> "red-60v", "red-50v"
|
|
1153
|
+
get-link-tokens-from-bg(
|
|
1154
|
+
"black",
|
|
1155
|
+
"red-5v",
|
|
1156
|
+
"red-60v",
|
|
1157
|
+
"AA")
|
|
1158
|
+
> "red-5v", "white"
|
|
1159
|
+
get-link-tokens-from-bg(
|
|
1160
|
+
"black",
|
|
1161
|
+
"white",
|
|
1162
|
+
"red-60v",
|
|
1163
|
+
"AA")
|
|
1164
|
+
> "white", "white"
|
|
1165
|
+
----------------------------------------
|
|
1166
|
+
*/
|
|
1167
|
+
/*
|
|
1168
|
+
----------------------------------------
|
|
1169
|
+
next-token()
|
|
1170
|
+
----------------------------------------
|
|
1171
|
+
Returns next "darker" or "lighter" color
|
|
1172
|
+
token of the same token type and variant.
|
|
1173
|
+
Returns: color-token | false
|
|
1174
|
+
next-token("accent-warm", "lighter")
|
|
1175
|
+
> "accent-warm-light"
|
|
1176
|
+
next-token("gray-10", "lighter")
|
|
1177
|
+
> "gray-5"
|
|
1178
|
+
next-token("gray-5", "lighter")
|
|
1179
|
+
> "white"
|
|
1180
|
+
next-token("white", "lighter")
|
|
1181
|
+
> false
|
|
1182
|
+
next-token("red-50v", "darker")
|
|
1183
|
+
> "red-60v"
|
|
1184
|
+
next-token("red-50", "darker")
|
|
1185
|
+
> "red-60"
|
|
1186
|
+
next-token("red-80v", "darker")
|
|
1187
|
+
> "red-90"
|
|
1188
|
+
next-token("red-90", "darker")
|
|
1189
|
+
> "black"
|
|
1190
|
+
next-token("white", "darker")
|
|
1191
|
+
> "gray-5"
|
|
1192
|
+
next-token("black", "lighter")
|
|
1193
|
+
> "gray-90"
|
|
1194
|
+
----------------------------------------
|
|
1195
|
+
*/
|
|
1196
|
+
/*
|
|
1197
|
+
----------------------------------------
|
|
1198
|
+
test-colors()
|
|
1199
|
+
----------------------------------------
|
|
1200
|
+
Check to see if all system colors
|
|
1201
|
+
fall between the proper relative
|
|
1202
|
+
luminance range for their grade.
|
|
1203
|
+
Has a couple quirks, as the luminance()
|
|
1204
|
+
function returns slightly different
|
|
1205
|
+
results than expected.
|
|
1206
|
+
----------------------------------------
|
|
1207
|
+
*/
|
|
1208
|
+
/*
|
|
1209
|
+
----------------------------------------
|
|
1210
|
+
columns()
|
|
1211
|
+
----------------------------------------
|
|
1212
|
+
outputs a grid-col number based on
|
|
1213
|
+
the number of desired columns in the
|
|
1214
|
+
12-column grid
|
|
1215
|
+
|
|
1216
|
+
Ex: columns(2) --> 6
|
|
1217
|
+
grid-col(columns(2))
|
|
1218
|
+
----------------------------------------
|
|
1219
|
+
*/
|
|
1220
|
+
/*
|
|
1221
|
+
----------------------------------------
|
|
1222
|
+
USWDS Properties
|
|
1223
|
+
----------------------------------------
|
|
1224
|
+
*/
|
|
1225
|
+
/*
|
|
1226
|
+
----------------------------------------
|
|
1227
|
+
get-uswds-value()
|
|
1228
|
+
----------------------------------------
|
|
1229
|
+
Finds and outputs a value from the
|
|
1230
|
+
USWDS standard values.
|
|
1231
|
+
|
|
1232
|
+
Used to build other standard utility
|
|
1233
|
+
functions and mixins.
|
|
1234
|
+
----------------------------------------
|
|
1235
|
+
*/
|
|
1236
|
+
/*
|
|
1237
|
+
----------------------------------------
|
|
1238
|
+
get-standard-values()
|
|
1239
|
+
----------------------------------------
|
|
1240
|
+
Gets a map of USWDS standard values
|
|
1241
|
+
for a property
|
|
1242
|
+
----------------------------------------
|
|
1243
|
+
*/
|
|
1244
|
+
/*
|
|
1245
|
+
----------------------------------------
|
|
1246
|
+
border-radius()
|
|
1247
|
+
----------------------------------------
|
|
1248
|
+
Get a border-radius from the system
|
|
1249
|
+
border-radii
|
|
1250
|
+
----------------------------------------
|
|
1251
|
+
*/
|
|
1252
|
+
/*
|
|
1253
|
+
----------------------------------------
|
|
1254
|
+
font-weight()
|
|
1255
|
+
fw()
|
|
1256
|
+
----------------------------------------
|
|
1257
|
+
Get a font-weight value from the
|
|
1258
|
+
system font-weight
|
|
1259
|
+
----------------------------------------
|
|
1260
|
+
*/
|
|
1261
|
+
/*
|
|
1262
|
+
----------------------------------------
|
|
1263
|
+
feature()
|
|
1264
|
+
----------------------------------------
|
|
1265
|
+
Gets a valid USWDS font feature setting
|
|
1266
|
+
----------------------------------------
|
|
1267
|
+
*/
|
|
1268
|
+
/*
|
|
1269
|
+
----------------------------------------
|
|
1270
|
+
flex()
|
|
1271
|
+
----------------------------------------
|
|
1272
|
+
Gets a valid USWDS flex value
|
|
1273
|
+
----------------------------------------
|
|
1274
|
+
*/
|
|
1275
|
+
/*
|
|
1276
|
+
----------------------------------------
|
|
1277
|
+
font-family()
|
|
1278
|
+
family()
|
|
1279
|
+
----------------------------------------
|
|
1280
|
+
Get a font-family stack from a
|
|
1281
|
+
role-based or type-based font family
|
|
1282
|
+
----------------------------------------
|
|
1283
|
+
*/
|
|
1284
|
+
/*
|
|
1285
|
+
----------------------------------------
|
|
1286
|
+
letter-spacing()
|
|
1287
|
+
ls()
|
|
1288
|
+
----------------------------------------
|
|
1289
|
+
Get a letter-spacing value from the
|
|
1290
|
+
system letter-spacing
|
|
1291
|
+
----------------------------------------
|
|
1292
|
+
*/
|
|
1293
|
+
/*
|
|
1294
|
+
----------------------------------------
|
|
1295
|
+
measure()
|
|
1296
|
+
----------------------------------------
|
|
1297
|
+
Gets a valid USWDS reading line length
|
|
1298
|
+
----------------------------------------
|
|
1299
|
+
*/
|
|
1300
|
+
/*
|
|
1301
|
+
----------------------------------------
|
|
1302
|
+
opacity()
|
|
1303
|
+
----------------------------------------
|
|
1304
|
+
Get an opacity from the system
|
|
1305
|
+
opacities
|
|
1306
|
+
----------------------------------------
|
|
1307
|
+
*/
|
|
1308
|
+
/*
|
|
1309
|
+
----------------------------------------
|
|
1310
|
+
order()
|
|
1311
|
+
----------------------------------------
|
|
1312
|
+
Get an order value from the
|
|
1313
|
+
system orders
|
|
1314
|
+
----------------------------------------
|
|
1315
|
+
*/
|
|
1316
|
+
/*
|
|
1317
|
+
----------------------------------------
|
|
1318
|
+
radius()
|
|
1319
|
+
----------------------------------------
|
|
1320
|
+
Get a border-radius value from the
|
|
1321
|
+
system letter-spacing
|
|
1322
|
+
----------------------------------------
|
|
1323
|
+
*/
|
|
1324
|
+
/*
|
|
1325
|
+
----------------------------------------
|
|
1326
|
+
font-size()
|
|
1327
|
+
----------------------------------------
|
|
1328
|
+
Get type scale value from a [family] and
|
|
1329
|
+
[scale]
|
|
1330
|
+
----------------------------------------
|
|
1331
|
+
*/
|
|
1332
|
+
/*
|
|
1333
|
+
----------------------------------------
|
|
1334
|
+
z-index()
|
|
1335
|
+
z()
|
|
1336
|
+
----------------------------------------
|
|
1337
|
+
Get a z-index value from the
|
|
1338
|
+
system z-index
|
|
1339
|
+
----------------------------------------
|
|
1340
|
+
*/
|
|
1341
|
+
/*
|
|
1342
|
+
----------------------------------------
|
|
1343
|
+
utility-font()
|
|
1344
|
+
----------------------------------------
|
|
1345
|
+
Get a normalized font-size in rem from
|
|
1346
|
+
a family and a type size in either
|
|
1347
|
+
system scale or project scale
|
|
1348
|
+
----------------------------------------
|
|
1349
|
+
Not the public-facing function.
|
|
1350
|
+
Used for building the utilities and
|
|
1351
|
+
withholds certain errors.
|
|
1352
|
+
----------------------------------------
|
|
1353
|
+
*/
|
|
1354
|
+
/*
|
|
1355
|
+
----------------------------------------
|
|
1356
|
+
family()
|
|
1357
|
+
----------------------------------------
|
|
1358
|
+
Get a font-family stack
|
|
1359
|
+
----------------------------------------
|
|
1360
|
+
*/
|
|
1361
|
+
/*
|
|
1362
|
+
----------------------------------------
|
|
1363
|
+
size()
|
|
1364
|
+
----------------------------------------
|
|
1365
|
+
Get a normalized font-size in rem from
|
|
1366
|
+
a family and a type size in either
|
|
1367
|
+
system scale or project scale
|
|
1368
|
+
----------------------------------------
|
|
1369
|
+
*/
|
|
1370
|
+
/*
|
|
1371
|
+
----------------------------------------
|
|
1372
|
+
font()
|
|
1373
|
+
----------------------------------------
|
|
1374
|
+
Get a font-family stack
|
|
1375
|
+
AND
|
|
1376
|
+
Get a normalized font-size in rem from
|
|
1377
|
+
a family and a type size in either
|
|
1378
|
+
system scale or project scale
|
|
1379
|
+
----------------------------------------
|
|
1380
|
+
*/
|
|
1381
|
+
/*
|
|
1382
|
+
----------------------------------------
|
|
1383
|
+
typeset()
|
|
1384
|
+
----------------------------------------
|
|
1385
|
+
Sets:
|
|
1386
|
+
- family
|
|
1387
|
+
- size
|
|
1388
|
+
- line-height
|
|
1389
|
+
----------------------------------------
|
|
1390
|
+
*/
|
|
1391
|
+
/* stylelint-disable max-nesting-depth */
|
|
1392
|
+
/*
|
|
1393
|
+
----------------------------------------
|
|
1394
|
+
@render-pseudoclass
|
|
1395
|
+
----------------------------------------
|
|
1396
|
+
Build a pseucoclass utiliy from values
|
|
1397
|
+
calculated in the @render-utilities-in
|
|
1398
|
+
loop
|
|
1399
|
+
----------------------------------------
|
|
1400
|
+
*/
|
|
1401
|
+
/*
|
|
1402
|
+
----------------------------------------
|
|
1403
|
+
@render-utility
|
|
1404
|
+
----------------------------------------
|
|
1405
|
+
Build a utility from values calculated
|
|
1406
|
+
in the @render-utilities-in loop
|
|
1407
|
+
----------------------------------------
|
|
1408
|
+
TODO: Determine the proper use of
|
|
1409
|
+
unquote() in the following. Changed to
|
|
1410
|
+
account for a 'interpolation near
|
|
1411
|
+
operators will be simplified in a
|
|
1412
|
+
future version of Sass' warning.
|
|
1413
|
+
----------------------------------------
|
|
1414
|
+
*/
|
|
1415
|
+
/*
|
|
1416
|
+
----------------------------------------
|
|
1417
|
+
@render-utilities-in
|
|
1418
|
+
----------------------------------------
|
|
1419
|
+
The master loop that sets the building
|
|
1420
|
+
blocks of utilities from the values
|
|
1421
|
+
in individual rule settings and loops
|
|
1422
|
+
through all possible variants
|
|
1423
|
+
----------------------------------------
|
|
1424
|
+
*/
|
|
1425
|
+
/* stylelint-enable */
|
|
1426
|
+
/* notifications.scss
|
|
1427
|
+
---
|
|
1428
|
+
Adds a notification at the top of each USWDS
|
|
1429
|
+
compile. Use this file for important notifications
|
|
1430
|
+
and updates to the design system.
|
|
1431
|
+
|
|
1432
|
+
This file should started fresh at each
|
|
1433
|
+
major version.
|
|
1434
|
+
|
|
1435
|
+
*/
|
|
1436
|
+
/* prettier-ignore */
|
|
1437
|
+
/* prettier-ignore */
|
|
1438
|
+
/*
|
|
1439
|
+
* * * * * ==============================
|
|
1440
|
+
* * * * * ==============================
|
|
1441
|
+
* * * * * ==============================
|
|
1442
|
+
* * * * * ==============================
|
|
1443
|
+
========================================
|
|
1444
|
+
========================================
|
|
1445
|
+
========================================
|
|
1446
|
+
----------------------------------------
|
|
1447
|
+
GENERAL SETTINGS
|
|
1448
|
+
----------------------------------------
|
|
1449
|
+
Read more about settings and
|
|
1450
|
+
USWDS style tokens in the documentation:
|
|
1451
|
+
https://designsystem.digital.gov/design-tokens
|
|
1452
|
+
----------------------------------------
|
|
1453
|
+
*/
|
|
1454
|
+
/*
|
|
1455
|
+
----------------------------------------
|
|
1456
|
+
Image path
|
|
1457
|
+
----------------------------------------
|
|
1458
|
+
Relative image file path
|
|
1459
|
+
----------------------------------------
|
|
1460
|
+
*/
|
|
1461
|
+
/*
|
|
1462
|
+
----------------------------------------
|
|
1463
|
+
Show compile warnings
|
|
1464
|
+
----------------------------------------
|
|
1465
|
+
Show Sass warnings when functions and
|
|
1466
|
+
mixins use non-standard tokens.
|
|
1467
|
+
AND
|
|
1468
|
+
Show updates and notifications.
|
|
1469
|
+
----------------------------------------
|
|
1470
|
+
*/
|
|
1471
|
+
/*
|
|
1472
|
+
----------------------------------------
|
|
1473
|
+
Namespace
|
|
1474
|
+
----------------------------------------
|
|
1475
|
+
*/
|
|
1476
|
+
/*
|
|
1477
|
+
----------------------------------------
|
|
1478
|
+
Prefix separator
|
|
1479
|
+
----------------------------------------
|
|
1480
|
+
Set the character the separates
|
|
1481
|
+
responsive and state prefixes from the
|
|
1482
|
+
main class name.
|
|
1483
|
+
The default (":") needs to be preceded
|
|
1484
|
+
by two backslashes to be properly
|
|
1485
|
+
escaped.
|
|
1486
|
+
----------------------------------------
|
|
1487
|
+
*/
|
|
1488
|
+
/*
|
|
1489
|
+
----------------------------------------
|
|
1490
|
+
Layout grid
|
|
1491
|
+
----------------------------------------
|
|
1492
|
+
Should the layout grid classes output
|
|
1493
|
+
with !important
|
|
1494
|
+
----------------------------------------
|
|
1495
|
+
*/
|
|
1496
|
+
/*
|
|
1497
|
+
----------------------------------------
|
|
1498
|
+
Border box sizing
|
|
1499
|
+
----------------------------------------
|
|
1500
|
+
When set to true, sets the box-sizing
|
|
1501
|
+
property of all site elements to
|
|
1502
|
+
`border-box`.
|
|
1503
|
+
----------------------------------------
|
|
1504
|
+
*/
|
|
1505
|
+
/*
|
|
1506
|
+
----------------------------------------
|
|
1507
|
+
Focus styles
|
|
1508
|
+
----------------------------------------
|
|
1509
|
+
*/
|
|
1510
|
+
/*
|
|
1511
|
+
----------------------------------------
|
|
1512
|
+
Icons
|
|
1513
|
+
----------------------------------------
|
|
1514
|
+
*/
|
|
1515
|
+
/*
|
|
1516
|
+
* * * * * ==============================
|
|
1517
|
+
* * * * * ==============================
|
|
1518
|
+
* * * * * ==============================
|
|
1519
|
+
* * * * * ==============================
|
|
1520
|
+
========================================
|
|
1521
|
+
========================================
|
|
1522
|
+
========================================
|
|
1523
|
+
----------------------------------------
|
|
1524
|
+
TYPOGRAPHY SETTINGS
|
|
1525
|
+
----------------------------------------
|
|
1526
|
+
Read more about settings and
|
|
1527
|
+
USWDS typography tokens in the documentation:
|
|
1528
|
+
https://designsystem.digital.gov/design-tokens/typesetting/overview/
|
|
1529
|
+
----------------------------------------
|
|
1530
|
+
*/
|
|
1531
|
+
/*
|
|
1532
|
+
----------------------------------------
|
|
1533
|
+
Root font size
|
|
1534
|
+
----------------------------------------
|
|
1535
|
+
Setting $theme-respect-user-font-size to
|
|
1536
|
+
true sets the root font size to 100% and
|
|
1537
|
+
uses ems for media queries
|
|
1538
|
+
----------------------------------------
|
|
1539
|
+
$theme-root-font-size only applies when
|
|
1540
|
+
$theme-respect-user-font-size is set to
|
|
1541
|
+
false.
|
|
1542
|
+
|
|
1543
|
+
This will set the root font size
|
|
1544
|
+
as a specific px value and use px values
|
|
1545
|
+
for media queries.
|
|
1546
|
+
|
|
1547
|
+
Accepts true or false
|
|
1548
|
+
----------------------------------------
|
|
1549
|
+
*/
|
|
1550
|
+
/*
|
|
1551
|
+
----------------------------------------
|
|
1552
|
+
Global styles
|
|
1553
|
+
----------------------------------------
|
|
1554
|
+
Adds basic styling for the following
|
|
1555
|
+
unclassed elements:
|
|
1556
|
+
|
|
1557
|
+
- paragraph: paragraph text
|
|
1558
|
+
- link: links
|
|
1559
|
+
- content: paragraph text, links,
|
|
1560
|
+
headings, lists, and tables
|
|
1561
|
+
----------------------------------------
|
|
1562
|
+
*/
|
|
1563
|
+
/*
|
|
1564
|
+
----------------------------------------
|
|
1565
|
+
Broswer compatibility mode
|
|
1566
|
+
----------------------------------------
|
|
1567
|
+
When true, outputs woff and ttf font
|
|
1568
|
+
formats in addition to woff2
|
|
1569
|
+
----------------------------------------
|
|
1570
|
+
*/
|
|
1571
|
+
/*
|
|
1572
|
+
----------------------------------------
|
|
1573
|
+
Font path
|
|
1574
|
+
----------------------------------------
|
|
1575
|
+
Relative font file path
|
|
1576
|
+
----------------------------------------
|
|
1577
|
+
*/
|
|
1578
|
+
/*
|
|
1579
|
+
----------------------------------------
|
|
1580
|
+
Custom typeface tokens
|
|
1581
|
+
----------------------------------------
|
|
1582
|
+
Add a new custom typeface token if
|
|
1583
|
+
your project uses a typeface not already
|
|
1584
|
+
defined by USWDS.
|
|
1585
|
+
----------------------------------------
|
|
1586
|
+
USWDS defines the following tokens
|
|
1587
|
+
by default:
|
|
1588
|
+
----------------------------------------
|
|
1589
|
+
'georgia'
|
|
1590
|
+
'helvetica'
|
|
1591
|
+
'merriweather'
|
|
1592
|
+
'open-sans'
|
|
1593
|
+
'public-sans'
|
|
1594
|
+
'roboto-mono'
|
|
1595
|
+
'source-sans-pro'
|
|
1596
|
+
'system'
|
|
1597
|
+
'tahoma'
|
|
1598
|
+
'verdana'
|
|
1599
|
+
----------------------------------------
|
|
1600
|
+
Add as many new tokens as you have
|
|
1601
|
+
custom typefaces. Reference your new
|
|
1602
|
+
token(s) in the type-based font settings
|
|
1603
|
+
using the quoted name of the token.
|
|
1604
|
+
|
|
1605
|
+
For example:
|
|
1606
|
+
|
|
1607
|
+
$theme-font-type-cond: 'example-font-token';
|
|
1608
|
+
|
|
1609
|
+
display-name:
|
|
1610
|
+
The display name of your font
|
|
1611
|
+
|
|
1612
|
+
cap-height:
|
|
1613
|
+
The height of a 500px `N` in Sketch
|
|
1614
|
+
----------------------------------------
|
|
1615
|
+
You should change `example-[style]-token`
|
|
1616
|
+
names to something more descriptive.
|
|
1617
|
+
----------------------------------------
|
|
1618
|
+
*/
|
|
1619
|
+
/*
|
|
1620
|
+
----------------------------------------
|
|
1621
|
+
Type-based font settings
|
|
1622
|
+
----------------------------------------
|
|
1623
|
+
Set the type-based tokens for your
|
|
1624
|
+
project from the following tokens,
|
|
1625
|
+
or from any new font tokens you added in
|
|
1626
|
+
$theme-typeface-tokens.
|
|
1627
|
+
----------------------------------------
|
|
1628
|
+
'georgia'
|
|
1629
|
+
'helvetica'
|
|
1630
|
+
'merriweather'
|
|
1631
|
+
'open-sans'
|
|
1632
|
+
'public-sans'
|
|
1633
|
+
'roboto-mono'
|
|
1634
|
+
'source-sans-pro'
|
|
1635
|
+
'system'
|
|
1636
|
+
'tahoma'
|
|
1637
|
+
'verdana'
|
|
1638
|
+
----------------------------------------
|
|
1639
|
+
*/
|
|
1640
|
+
/*
|
|
1641
|
+
----------------------------------------
|
|
1642
|
+
Custom font stacks
|
|
1643
|
+
----------------------------------------
|
|
1644
|
+
Add custom font stacks to any of the
|
|
1645
|
+
type-based fonts. Any USWDS typeface
|
|
1646
|
+
token already has a default stack.
|
|
1647
|
+
|
|
1648
|
+
Custom stacks don't need to include the
|
|
1649
|
+
font's display name. It will
|
|
1650
|
+
automatically appear at the start of
|
|
1651
|
+
the stack.
|
|
1652
|
+
----------------------------------------
|
|
1653
|
+
Example:
|
|
1654
|
+
$theme-font-type-sans: 'source-sans-pro';
|
|
1655
|
+
$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;
|
|
1656
|
+
|
|
1657
|
+
Output:
|
|
1658
|
+
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;
|
|
1659
|
+
----------------------------------------
|
|
1660
|
+
*/
|
|
1661
|
+
/*
|
|
1662
|
+
----------------------------------------
|
|
1663
|
+
Add any custom font source files
|
|
1664
|
+
----------------------------------------
|
|
1665
|
+
If you want USWDS to generate additional
|
|
1666
|
+
@font-face declarations, add your font
|
|
1667
|
+
data below, following the example that
|
|
1668
|
+
follows.
|
|
1669
|
+
----------------------------------------
|
|
1670
|
+
USWDS automatically generates @font-face
|
|
1671
|
+
declarations for the following
|
|
1672
|
+
|
|
1673
|
+
'merriweather'
|
|
1674
|
+
'public-sans'
|
|
1675
|
+
'roboto-mono'
|
|
1676
|
+
'source-sans-pro'
|
|
1677
|
+
|
|
1678
|
+
These typefaces not require custom
|
|
1679
|
+
source files.
|
|
1680
|
+
----------------------------------------
|
|
1681
|
+
EXAMPLE
|
|
1682
|
+
|
|
1683
|
+
- dir:
|
|
1684
|
+
Directory relative to $theme-font-path
|
|
1685
|
+
- This directory should include fonts saved as
|
|
1686
|
+
.woff2
|
|
1687
|
+
ExampleSerif-Normal.woff2
|
|
1688
|
+
|
|
1689
|
+
$theme-font-serif-custom-src: (
|
|
1690
|
+
dir: 'custom/example-serif',
|
|
1691
|
+
roman: (
|
|
1692
|
+
100: false,
|
|
1693
|
+
200: false,
|
|
1694
|
+
300: 'ExampleSerif-Light',
|
|
1695
|
+
400: 'ExampleSerif-Normal',
|
|
1696
|
+
500: false,
|
|
1697
|
+
600: false,
|
|
1698
|
+
700: 'ExampleSerif-Bold',
|
|
1699
|
+
800: false,
|
|
1700
|
+
900: false,
|
|
1701
|
+
),
|
|
1702
|
+
italic: (
|
|
1703
|
+
100: false,
|
|
1704
|
+
200: false,
|
|
1705
|
+
300: 'ExampleSerif-LightItalic',
|
|
1706
|
+
400: 'ExampleSerif-Italic',
|
|
1707
|
+
500: false,
|
|
1708
|
+
600: false,
|
|
1709
|
+
700: 'ExampleSerif-BoldItalic',
|
|
1710
|
+
800: false,
|
|
1711
|
+
900: false,
|
|
1712
|
+
),
|
|
1713
|
+
);
|
|
1714
|
+
----------------------------------------
|
|
1715
|
+
*/
|
|
1716
|
+
/*
|
|
1717
|
+
----------------------------------------
|
|
1718
|
+
Role-based font settings
|
|
1719
|
+
----------------------------------------
|
|
1720
|
+
Set the role-based tokens for your
|
|
1721
|
+
project from the following font-type
|
|
1722
|
+
tokens.
|
|
1723
|
+
----------------------------------------
|
|
1724
|
+
'cond'
|
|
1725
|
+
'icon'
|
|
1726
|
+
'lang'
|
|
1727
|
+
'mono'
|
|
1728
|
+
'sans'
|
|
1729
|
+
'serif'
|
|
1730
|
+
----------------------------------------
|
|
1731
|
+
*/
|
|
1732
|
+
/*
|
|
1733
|
+
----------------------------------------
|
|
1734
|
+
Type scale
|
|
1735
|
+
----------------------------------------
|
|
1736
|
+
Define your project's type scale using
|
|
1737
|
+
values from the USWDS system type scale
|
|
1738
|
+
|
|
1739
|
+
1-20
|
|
1740
|
+
----------------------------------------
|
|
1741
|
+
*/
|
|
1742
|
+
/*
|
|
1743
|
+
----------------------------------------
|
|
1744
|
+
Font weights
|
|
1745
|
+
----------------------------------------
|
|
1746
|
+
Assign weights 100-900
|
|
1747
|
+
Or use `false` for unneeded weights.
|
|
1748
|
+
----------------------------------------
|
|
1749
|
+
*/
|
|
1750
|
+
/*
|
|
1751
|
+
----------------------------------------
|
|
1752
|
+
General typography settings
|
|
1753
|
+
----------------------------------------
|
|
1754
|
+
Type scale tokens
|
|
1755
|
+
----------------------------------------
|
|
1756
|
+
micro: 10px
|
|
1757
|
+
1: 12px
|
|
1758
|
+
2: 13px
|
|
1759
|
+
3: 14px
|
|
1760
|
+
4: 15px
|
|
1761
|
+
5: 16px
|
|
1762
|
+
6: 17px
|
|
1763
|
+
7: 18px
|
|
1764
|
+
8: 20px
|
|
1765
|
+
9: 22px
|
|
1766
|
+
10: 24px
|
|
1767
|
+
11: 28px
|
|
1768
|
+
12: 32px
|
|
1769
|
+
13: 36px
|
|
1770
|
+
14: 40px
|
|
1771
|
+
15: 48px
|
|
1772
|
+
16: 56px
|
|
1773
|
+
17: 64px
|
|
1774
|
+
18: 80px
|
|
1775
|
+
19: 120px
|
|
1776
|
+
20: 140px
|
|
1777
|
+
----------------------------------------
|
|
1778
|
+
Line height tokens
|
|
1779
|
+
----------------------------------------
|
|
1780
|
+
1: 1
|
|
1781
|
+
2: 1.15
|
|
1782
|
+
3: 1.35
|
|
1783
|
+
4: 1.5
|
|
1784
|
+
5: 1.62
|
|
1785
|
+
6: 1.75
|
|
1786
|
+
----------------------------------------
|
|
1787
|
+
Font role tokens
|
|
1788
|
+
----------------------------------------
|
|
1789
|
+
'ui'
|
|
1790
|
+
'heading'
|
|
1791
|
+
'body'
|
|
1792
|
+
'code'
|
|
1793
|
+
'alt'
|
|
1794
|
+
----------------------------------------
|
|
1795
|
+
Measure (max-width) tokens
|
|
1796
|
+
----------------------------------------
|
|
1797
|
+
1: 44ex
|
|
1798
|
+
2: 60ex
|
|
1799
|
+
3: 64ex
|
|
1800
|
+
4: 68ex
|
|
1801
|
+
5: 74ex
|
|
1802
|
+
6: 88ex
|
|
1803
|
+
none: none
|
|
1804
|
+
----------------------------------------
|
|
1805
|
+
*/
|
|
1806
|
+
/*
|
|
1807
|
+
* * * * * ==============================
|
|
1808
|
+
* * * * * ==============================
|
|
1809
|
+
* * * * * ==============================
|
|
1810
|
+
* * * * * ==============================
|
|
1811
|
+
========================================
|
|
1812
|
+
========================================
|
|
1813
|
+
========================================
|
|
1814
|
+
----------------------------------------
|
|
1815
|
+
COLOR SETTINGS
|
|
1816
|
+
----------------------------------------
|
|
1817
|
+
Read more about settings and
|
|
1818
|
+
USWDS color tokens in the documentation:
|
|
1819
|
+
https://designsystem.digital.gov/design-tokens/color
|
|
1820
|
+
----------------------------------------
|
|
1821
|
+
*/
|
|
1822
|
+
/*
|
|
1823
|
+
----------------------------------------
|
|
1824
|
+
Theme palette colors
|
|
1825
|
+
----------------------------------------
|
|
1826
|
+
*/
|
|
1827
|
+
/*
|
|
1828
|
+
----------------------------------------
|
|
1829
|
+
State palette colors
|
|
1830
|
+
----------------------------------------
|
|
1831
|
+
*/
|
|
1832
|
+
/*
|
|
1833
|
+
----------------------------------------
|
|
1834
|
+
General colors
|
|
1835
|
+
----------------------------------------
|
|
1836
|
+
*/
|
|
1837
|
+
/*
|
|
1838
|
+
* * * * * ==============================
|
|
1839
|
+
* * * * * ==============================
|
|
1840
|
+
* * * * * ==============================
|
|
1841
|
+
* * * * * ==============================
|
|
1842
|
+
========================================
|
|
1843
|
+
========================================
|
|
1844
|
+
========================================
|
|
1845
|
+
----------------------------------------
|
|
1846
|
+
COMPONENT SETTINGS
|
|
1847
|
+
----------------------------------------
|
|
1848
|
+
Read more about settings and
|
|
1849
|
+
USWDS style tokens in the documentation:
|
|
1850
|
+
https://designsystem.digital.gov/design-tokens
|
|
1851
|
+
----------------------------------------
|
|
1852
|
+
*/
|
|
1853
|
+
/*
|
|
1854
|
+
* * * * * ==============================
|
|
1855
|
+
* * * * * ==============================
|
|
1856
|
+
* * * * * ==============================
|
|
1857
|
+
* * * * * ==============================
|
|
1858
|
+
========================================
|
|
1859
|
+
========================================
|
|
1860
|
+
========================================
|
|
1861
|
+
----------------------------------------
|
|
1862
|
+
SPACING SETTINGS
|
|
1863
|
+
----------------------------------------
|
|
1864
|
+
Read more about settings and
|
|
1865
|
+
USWDS spacing units tokens in the
|
|
1866
|
+
documentation:
|
|
1867
|
+
https://designsystem.digital.gov/design-tokens/spacing-units
|
|
1868
|
+
----------------------------------------
|
|
1869
|
+
*/
|
|
1870
|
+
/*
|
|
1871
|
+
----------------------------------------
|
|
1872
|
+
Border radius
|
|
1873
|
+
----------------------------------------
|
|
1874
|
+
2px 2px
|
|
1875
|
+
0.5 4px
|
|
1876
|
+
1 8px
|
|
1877
|
+
1.5 12px
|
|
1878
|
+
2 16px
|
|
1879
|
+
2.5 20px
|
|
1880
|
+
3 24px
|
|
1881
|
+
4 32px
|
|
1882
|
+
5 40px
|
|
1883
|
+
6 48px
|
|
1884
|
+
7 56px
|
|
1885
|
+
8 64px
|
|
1886
|
+
9 72px
|
|
1887
|
+
----------------------------------------
|
|
1888
|
+
*/
|
|
1889
|
+
/*
|
|
1890
|
+
----------------------------------------
|
|
1891
|
+
Column gap
|
|
1892
|
+
----------------------------------------
|
|
1893
|
+
2px 2px
|
|
1894
|
+
0.5 4px
|
|
1895
|
+
1 8px
|
|
1896
|
+
2 16px
|
|
1897
|
+
3 24px
|
|
1898
|
+
4 32px
|
|
1899
|
+
5 40px
|
|
1900
|
+
6 48px
|
|
1901
|
+
----------------------------------------
|
|
1902
|
+
*/
|
|
1903
|
+
/*
|
|
1904
|
+
----------------------------------------
|
|
1905
|
+
Grid container max-width
|
|
1906
|
+
----------------------------------------
|
|
1907
|
+
mobile
|
|
1908
|
+
mobile-lg
|
|
1909
|
+
tablet
|
|
1910
|
+
tablet-lg
|
|
1911
|
+
desktop
|
|
1912
|
+
desktop-lg
|
|
1913
|
+
widescreen
|
|
1914
|
+
----------------------------------------
|
|
1915
|
+
*/
|
|
1916
|
+
/*
|
|
1917
|
+
----------------------------------------
|
|
1918
|
+
Site
|
|
1919
|
+
----------------------------------------
|
|
1920
|
+
*/
|
|
1921
|
+
/*
|
|
1922
|
+
* * * * * ==============================
|
|
1923
|
+
* * * * * ==============================
|
|
1924
|
+
* * * * * ==============================
|
|
1925
|
+
* * * * * ==============================
|
|
1926
|
+
========================================
|
|
1927
|
+
========================================
|
|
1928
|
+
========================================
|
|
1929
|
+
----------------------------------------
|
|
1930
|
+
UTILITIES SETTINGS
|
|
1931
|
+
----------------------------------------
|
|
1932
|
+
Read more about settings and
|
|
1933
|
+
USWDS utilities in the documentation:
|
|
1934
|
+
https://designsystem.digital.gov/utilities
|
|
1935
|
+
----------------------------------------
|
|
1936
|
+
*/
|
|
1937
|
+
/*
|
|
1938
|
+
----------------------------------------
|
|
1939
|
+
Utility breakpoints
|
|
1940
|
+
----------------------------------------
|
|
1941
|
+
Which breakpoints does your project
|
|
1942
|
+
need? Select as `true` any breakpoint
|
|
1943
|
+
used by utilities or layout grid
|
|
1944
|
+
----------------------------------------
|
|
1945
|
+
*/
|
|
1946
|
+
/*
|
|
1947
|
+
----------------------------------------
|
|
1948
|
+
Global colors
|
|
1949
|
+
----------------------------------------
|
|
1950
|
+
The following palettes will be added to
|
|
1951
|
+
- background-color
|
|
1952
|
+
- border-color
|
|
1953
|
+
- color
|
|
1954
|
+
- text-decoration-color
|
|
1955
|
+
----------------------------------------
|
|
1956
|
+
*/
|
|
1957
|
+
/*
|
|
1958
|
+
----------------------------------------
|
|
1959
|
+
Settings
|
|
1960
|
+
----------------------------------------
|
|
1961
|
+
*/
|
|
1962
|
+
/*
|
|
1963
|
+
----------------------------------------
|
|
1964
|
+
Values
|
|
1965
|
+
----------------------------------------
|
|
1966
|
+
*/
|
|
1967
|
+
/*
|
|
1968
|
+
----------------------------------------
|
|
1969
|
+
append-important()
|
|
1970
|
+
----------------------------------------
|
|
1971
|
+
Append `!important` to a list
|
|
1972
|
+
----------------------------------------
|
|
1973
|
+
*/
|
|
1974
|
+
/*
|
|
1975
|
+
----------------------------------------
|
|
1976
|
+
get-last()
|
|
1977
|
+
----------------------------------------
|
|
1978
|
+
Return the last item of a list,
|
|
1979
|
+
Return null if the value is null
|
|
1980
|
+
----------------------------------------
|
|
1981
|
+
*/
|
|
1982
|
+
/*
|
|
1983
|
+
----------------------------------------
|
|
1984
|
+
de-list()
|
|
1985
|
+
----------------------------------------
|
|
1986
|
+
Transform a one-element list or arglist
|
|
1987
|
+
into that single element.
|
|
1988
|
+
----------------------------------------
|
|
1989
|
+
(1) => 1
|
|
1990
|
+
((1)) => (1)
|
|
1991
|
+
----------------------------------------
|
|
1992
|
+
*/
|
|
1993
|
+
/*
|
|
1994
|
+
----------------------------------------
|
|
1995
|
+
error-not-token()
|
|
1996
|
+
----------------------------------------
|
|
1997
|
+
Returns a common not-a-token error.
|
|
1998
|
+
----------------------------------------
|
|
1999
|
+
*/
|
|
2000
|
+
/*
|
|
2001
|
+
----------------------------------------
|
|
2002
|
+
uswds-error()
|
|
2003
|
+
----------------------------------------
|
|
2004
|
+
Allow the system to pass an error as text
|
|
2005
|
+
to test error states in unit testing
|
|
2006
|
+
----------------------------------------
|
|
2007
|
+
*/
|
|
2008
|
+
/*
|
|
2009
|
+
----------------------------------------
|
|
2010
|
+
get-default()
|
|
2011
|
+
----------------------------------------
|
|
2012
|
+
Returns the default value from a map
|
|
2013
|
+
of project defaults
|
|
2014
|
+
get-default("bg-color")
|
|
2015
|
+
> $theme-body-background-color
|
|
2016
|
+
----------------------------------------
|
|
2017
|
+
*/
|
|
2018
|
+
/*
|
|
2019
|
+
----------------------------------------
|
|
2020
|
+
has-important()
|
|
2021
|
+
----------------------------------------
|
|
2022
|
+
Check to see if `!important` is
|
|
2023
|
+
being passed in a mixin's props
|
|
2024
|
+
----------------------------------------
|
|
2025
|
+
*/
|
|
2026
|
+
/*
|
|
2027
|
+
----------------------------------------
|
|
2028
|
+
map-collect()
|
|
2029
|
+
----------------------------------------
|
|
2030
|
+
Collect multiple maps into a single
|
|
2031
|
+
large map
|
|
2032
|
+
source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe
|
|
2033
|
+
----------------------------------------
|
|
2034
|
+
*/
|
|
2035
|
+
/*
|
|
2036
|
+
----------------------------------------
|
|
2037
|
+
map-deep-get()
|
|
2038
|
+
----------------------------------------
|
|
2039
|
+
@author Hugo Giraudel
|
|
2040
|
+
@access public
|
|
2041
|
+
@param {Map} $map - Map
|
|
2042
|
+
@param {Arglist} $keys - Key chain
|
|
2043
|
+
@return {*} - Desired value
|
|
2044
|
+
----------------------------------------
|
|
2045
|
+
*/
|
|
2046
|
+
/*
|
|
2047
|
+
----------------------------------------
|
|
2048
|
+
multi-cat()
|
|
2049
|
+
----------------------------------------
|
|
2050
|
+
Concatenate two lists
|
|
2051
|
+
----------------------------------------
|
|
2052
|
+
*/
|
|
2053
|
+
/*
|
|
2054
|
+
----------------------------------------
|
|
2055
|
+
remove()
|
|
2056
|
+
----------------------------------------
|
|
2057
|
+
Remove a value from a list
|
|
2058
|
+
----------------------------------------
|
|
2059
|
+
*/
|
|
2060
|
+
/*
|
|
2061
|
+
----------------------------------------
|
|
2062
|
+
smart-quote()
|
|
2063
|
+
----------------------------------------
|
|
2064
|
+
Quotes strings
|
|
2065
|
+
Inspects `px`, `xs`, and `xl` numbers
|
|
2066
|
+
Leaves bools as is
|
|
2067
|
+
----------------------------------------
|
|
2068
|
+
*/
|
|
2069
|
+
/*
|
|
2070
|
+
----------------------------------------
|
|
2071
|
+
str-replace()
|
|
2072
|
+
----------------------------------------
|
|
2073
|
+
Replace any substring with another
|
|
2074
|
+
string
|
|
2075
|
+
----------------------------------------
|
|
2076
|
+
*/
|
|
2077
|
+
/*
|
|
2078
|
+
----------------------------------------
|
|
2079
|
+
str-split()
|
|
2080
|
+
----------------------------------------
|
|
2081
|
+
Split a string at a given separator
|
|
2082
|
+
and convert into a list of substrings
|
|
2083
|
+
----------------------------------------
|
|
2084
|
+
*/
|
|
2085
|
+
/*
|
|
2086
|
+
----------------------------------------
|
|
2087
|
+
strip-unit()
|
|
2088
|
+
----------------------------------------
|
|
2089
|
+
Remove the unit of a length
|
|
2090
|
+
@author Hugo Giraudel
|
|
2091
|
+
@param {Number} $number - Number to remove unit from
|
|
2092
|
+
@return {Number} - Unitless number
|
|
2093
|
+
----------------------------------------
|
|
2094
|
+
*/
|
|
2095
|
+
/*
|
|
2096
|
+
----------------------------------------
|
|
2097
|
+
base-to-map()
|
|
2098
|
+
@TODO: Deprecate and delete
|
|
2099
|
+
----------------------------------------
|
|
2100
|
+
Convert a single base to a USWDS
|
|
2101
|
+
value map.
|
|
2102
|
+
|
|
2103
|
+
Candidate for deprecation if we remove
|
|
2104
|
+
isReadable
|
|
2105
|
+
----------------------------------------
|
|
2106
|
+
*/
|
|
2107
|
+
/*
|
|
2108
|
+
----------------------------------------
|
|
2109
|
+
to-number()
|
|
2110
|
+
----------------------------------------
|
|
2111
|
+
Casts a string into a number
|
|
2112
|
+
----------------------------------------
|
|
2113
|
+
@param {String | Number} $value - Value to be parsed
|
|
2114
|
+
@return {Number}
|
|
2115
|
+
----------------------------------------
|
|
2116
|
+
*/
|
|
2117
|
+
/*
|
|
2118
|
+
----------------------------------------
|
|
2119
|
+
unpack()
|
|
2120
|
+
----------------------------------------
|
|
2121
|
+
Create lists of single items from lists
|
|
2122
|
+
of lists.
|
|
2123
|
+
----------------------------------------
|
|
2124
|
+
(1, (2.1, 2.2), 3) -->
|
|
2125
|
+
(1, 2.1, 2.2, 3)
|
|
2126
|
+
----------------------------------------
|
|
2127
|
+
*/
|
|
2128
|
+
/*
|
|
2129
|
+
----------------------------------------
|
|
2130
|
+
color()
|
|
2131
|
+
----------------------------------------
|
|
2132
|
+
Derive a color from a color shortcode
|
|
2133
|
+
----------------------------------------
|
|
2134
|
+
*/
|
|
2135
|
+
/*
|
|
2136
|
+
----------------------------------------
|
|
2137
|
+
get-system-color()
|
|
2138
|
+
----------------------------------------
|
|
2139
|
+
Derive a system color from its
|
|
2140
|
+
family, value, and vivid or a passed
|
|
2141
|
+
variable that is, itself, a list
|
|
2142
|
+
----------------------------------------
|
|
2143
|
+
*/
|
|
2144
|
+
/*
|
|
2145
|
+
----------------------------------------
|
|
2146
|
+
color()
|
|
2147
|
+
----------------------------------------
|
|
2148
|
+
Derive a color from a color shortcode
|
|
2149
|
+
----------------------------------------
|
|
2150
|
+
*/
|
|
2151
|
+
/*
|
|
2152
|
+
----------------------------------------
|
|
2153
|
+
advanced-color()
|
|
2154
|
+
----------------------------------------
|
|
2155
|
+
Derive a color from a color triplet:
|
|
2156
|
+
[family], [grade], [variant]
|
|
2157
|
+
----------------------------------------
|
|
2158
|
+
*/
|
|
2159
|
+
/*
|
|
2160
|
+
----------------------------------------
|
|
2161
|
+
Luminance ranges
|
|
2162
|
+
----------------------------------------
|
|
2163
|
+
*/
|
|
2164
|
+
/*
|
|
2165
|
+
----------------------------------------
|
|
2166
|
+
calculate-grade()
|
|
2167
|
+
----------------------------------------
|
|
2168
|
+
Derive the grade equivalent any color,
|
|
2169
|
+
even non-token colors
|
|
2170
|
+
----------------------------------------
|
|
2171
|
+
*/
|
|
2172
|
+
/*
|
|
2173
|
+
----------------------------------------
|
|
2174
|
+
color-token-assignment()
|
|
2175
|
+
----------------------------------------
|
|
2176
|
+
Get the system token equivalent of any
|
|
2177
|
+
theme color token
|
|
2178
|
+
----------------------------------------
|
|
2179
|
+
*/
|
|
2180
|
+
/*
|
|
2181
|
+
----------------------------------------
|
|
2182
|
+
is-system-color-token()
|
|
2183
|
+
----------------------------------------
|
|
2184
|
+
Return whether a token is a system
|
|
2185
|
+
color token
|
|
2186
|
+
----------------------------------------
|
|
2187
|
+
*/
|
|
2188
|
+
/*
|
|
2189
|
+
----------------------------------------
|
|
2190
|
+
color()
|
|
2191
|
+
----------------------------------------
|
|
2192
|
+
Derive a color from a color shortcode
|
|
2193
|
+
----------------------------------------
|
|
2194
|
+
*/
|
|
2195
|
+
/*
|
|
2196
|
+
----------------------------------------
|
|
2197
|
+
color()
|
|
2198
|
+
----------------------------------------
|
|
2199
|
+
Derive a color from a color shortcode
|
|
2200
|
+
----------------------------------------
|
|
2201
|
+
*/
|
|
2202
|
+
/*
|
|
2203
|
+
----------------------------------------
|
|
2204
|
+
set-theme-color()
|
|
2205
|
+
----------------------------------------
|
|
2206
|
+
Derive a color from a system color token
|
|
2207
|
+
or a hex value
|
|
2208
|
+
----------------------------------------
|
|
2209
|
+
*/
|
|
2210
|
+
/*
|
|
2211
|
+
----------------------------------------
|
|
2212
|
+
is-theme-color-token()
|
|
2213
|
+
----------------------------------------
|
|
2214
|
+
Return whether a token is a theme
|
|
2215
|
+
color token
|
|
2216
|
+
----------------------------------------
|
|
2217
|
+
*/
|
|
2218
|
+
/*
|
|
2219
|
+
----------------------------------------
|
|
2220
|
+
color-token-family()
|
|
2221
|
+
----------------------------------------
|
|
2222
|
+
Returns the family of a color token.
|
|
2223
|
+
Returns: color-family
|
|
2224
|
+
color-token-family("accent-warm-vivid")
|
|
2225
|
+
> "accent-warm"
|
|
2226
|
+
color-token-family("red-50v")
|
|
2227
|
+
> "red"
|
|
2228
|
+
color-token-variant(("red", 50, "vivid"))
|
|
2229
|
+
> "red"
|
|
2230
|
+
----------------------------------------
|
|
2231
|
+
*/
|
|
2232
|
+
/*
|
|
2233
|
+
----------------------------------------
|
|
2234
|
+
decompose()
|
|
2235
|
+
----------------------------------------
|
|
2236
|
+
Convert a color token into into a list
|
|
2237
|
+
of form [family], [grade], [variant]
|
|
2238
|
+
Vivid variants return "vivid" as the
|
|
2239
|
+
variant.
|
|
2240
|
+
If neither grade nor variant exists,
|
|
2241
|
+
returns 'null'
|
|
2242
|
+
----------------------------------------
|
|
2243
|
+
*/
|
|
2244
|
+
/*
|
|
2245
|
+
----------------------------------------
|
|
2246
|
+
color-token-family()
|
|
2247
|
+
----------------------------------------
|
|
2248
|
+
Returns the family of a color token.
|
|
2249
|
+
Returns: color-family
|
|
2250
|
+
color-token-family("accent-warm-vivid")
|
|
2251
|
+
> "accent-warm"
|
|
2252
|
+
color-token-family("red-50v")
|
|
2253
|
+
> "red"
|
|
2254
|
+
color-token-variant(("red", 50, "vivid"))
|
|
2255
|
+
> "red"
|
|
2256
|
+
----------------------------------------
|
|
2257
|
+
*/
|
|
2258
|
+
/*
|
|
2259
|
+
----------------------------------------
|
|
2260
|
+
color-token-grade()
|
|
2261
|
+
----------------------------------------
|
|
2262
|
+
Returns the grade of a USWDS color token.
|
|
2263
|
+
Returns: color-grade
|
|
2264
|
+
color-token-grade("accent-warm")
|
|
2265
|
+
> "root"
|
|
2266
|
+
color-token-grade("accent-warm-vivid")
|
|
2267
|
+
> "root"
|
|
2268
|
+
color-token-grade("accent-warm-darker")
|
|
2269
|
+
> "darker"
|
|
2270
|
+
color-token-grade("red-50v")
|
|
2271
|
+
> 50
|
|
2272
|
+
color-token-variant(("red", 50, "vivid"))
|
|
2273
|
+
> 50
|
|
2274
|
+
----------------------------------------
|
|
2275
|
+
*/
|
|
2276
|
+
/*
|
|
2277
|
+
----------------------------------------
|
|
2278
|
+
color-token-family()
|
|
2279
|
+
----------------------------------------
|
|
2280
|
+
Returns the family of a color token.
|
|
2281
|
+
Returns: color-family
|
|
2282
|
+
color-token-family("accent-warm-vivid")
|
|
2283
|
+
> "accent-warm"
|
|
2284
|
+
color-token-family("red-50v")
|
|
2285
|
+
> "red"
|
|
2286
|
+
color-token-variant(("red", 50, "vivid"))
|
|
2287
|
+
> "red"
|
|
2288
|
+
----------------------------------------
|
|
2289
|
+
*/
|
|
2290
|
+
/*
|
|
2291
|
+
----------------------------------------
|
|
2292
|
+
color()
|
|
2293
|
+
----------------------------------------
|
|
2294
|
+
Derive a color from a color shortcode
|
|
2295
|
+
----------------------------------------
|
|
2296
|
+
*/
|
|
2297
|
+
/*
|
|
2298
|
+
----------------------------------------
|
|
2299
|
+
is-color-token()
|
|
2300
|
+
----------------------------------------
|
|
2301
|
+
Returns whether a given string is a
|
|
2302
|
+
USWDS color token.
|
|
2303
|
+
----------------------------------------
|
|
2304
|
+
*/
|
|
2305
|
+
/*
|
|
2306
|
+
----------------------------------------
|
|
2307
|
+
pow()
|
|
2308
|
+
----------------------------------------
|
|
2309
|
+
Raises a unitless number to the power
|
|
2310
|
+
of another unitless number
|
|
2311
|
+
Includes helper functions
|
|
2312
|
+
----------------------------------------
|
|
2313
|
+
*/
|
|
2314
|
+
/*
|
|
2315
|
+
----------------------------------------
|
|
2316
|
+
Helper functions
|
|
2317
|
+
----------------------------------------
|
|
2318
|
+
*/
|
|
2319
|
+
/* factorial()
|
|
2320
|
+
----------------------------------------
|
|
2321
|
+
*/
|
|
2322
|
+
/* summation()
|
|
2323
|
+
----------------------------------------
|
|
2324
|
+
*/
|
|
2325
|
+
/* exp-maclaurin()
|
|
2326
|
+
----------------------------------------
|
|
2327
|
+
*/
|
|
2328
|
+
/* ln()
|
|
2329
|
+
----------------------------------------
|
|
2330
|
+
*/
|
|
2331
|
+
/*
|
|
2332
|
+
----------------------------------------
|
|
2333
|
+
color-token-type()
|
|
2334
|
+
----------------------------------------
|
|
2335
|
+
Returns the type of a color token.
|
|
2336
|
+
Returns: "system" | "theme"
|
|
2337
|
+
----------------------------------------
|
|
2338
|
+
*/
|
|
2339
|
+
/*
|
|
2340
|
+
----------------------------------------
|
|
2341
|
+
color-token-variant()
|
|
2342
|
+
----------------------------------------
|
|
2343
|
+
Returns the variant of color token.
|
|
2344
|
+
Returns: "vivid" | false
|
|
2345
|
+
color-token-variant("accent-warm")
|
|
2346
|
+
> false
|
|
2347
|
+
color-token-variant("accent-warm-vivid")
|
|
2348
|
+
> "vivid"
|
|
2349
|
+
color-token-variant("red-50v")
|
|
2350
|
+
> "vivid"
|
|
2351
|
+
color-token-variant(("red", 50, "vivid"))
|
|
2352
|
+
> "vivid"
|
|
2353
|
+
----------------------------------------
|
|
2354
|
+
*/
|
|
2355
|
+
/*
|
|
2356
|
+
----------------------------------------
|
|
2357
|
+
magic-number()
|
|
2358
|
+
----------------------------------------
|
|
2359
|
+
Returns the magic number of two color
|
|
2360
|
+
grades. Takes numbers or color tokens.
|
|
2361
|
+
magic-number(50, 10)
|
|
2362
|
+
return: 40
|
|
2363
|
+
magic-number("red-50", "red-10")
|
|
2364
|
+
return: 40
|
|
2365
|
+
----------------------------------------
|
|
2366
|
+
*/
|
|
2367
|
+
/*
|
|
2368
|
+
----------------------------------------
|
|
2369
|
+
is-accessible-magic-number()
|
|
2370
|
+
----------------------------------------
|
|
2371
|
+
Returns whether two grades achieve
|
|
2372
|
+
specified target color contrast
|
|
2373
|
+
Returns: true | false
|
|
2374
|
+
is-accessible-magic-number(10, 50, "AA")
|
|
2375
|
+
> false
|
|
2376
|
+
is-accessible-magic-number(10, 60, "AA")
|
|
2377
|
+
> true
|
|
2378
|
+
----------------------------------------
|
|
2379
|
+
*/
|
|
2380
|
+
/*
|
|
2381
|
+
----------------------------------------
|
|
2382
|
+
wcag-magic-number()
|
|
2383
|
+
----------------------------------------
|
|
2384
|
+
Returns the magic number of a specific
|
|
2385
|
+
wcag grade:
|
|
2386
|
+
"AA"
|
|
2387
|
+
"AA-Large"
|
|
2388
|
+
"AAA"
|
|
2389
|
+
wcag-magic-number("AA")
|
|
2390
|
+
> 50
|
|
2391
|
+
----------------------------------------
|
|
2392
|
+
*/
|
|
2393
|
+
/*
|
|
2394
|
+
----------------------------------------
|
|
2395
|
+
get-link-tokens-from-bg()
|
|
2396
|
+
----------------------------------------
|
|
2397
|
+
Get accessible link colors for a given
|
|
2398
|
+
background color
|
|
2399
|
+
returns: link-token, hover-token
|
|
2400
|
+
get-link-tokens-from-bg(
|
|
2401
|
+
"black",
|
|
2402
|
+
"red-60",
|
|
2403
|
+
"red-10",
|
|
2404
|
+
"AA")
|
|
2405
|
+
> "red-10", "red-5"
|
|
2406
|
+
get-link-tokens-from-bg(
|
|
2407
|
+
"black",
|
|
2408
|
+
"red-60v",
|
|
2409
|
+
"red-10v",
|
|
2410
|
+
"AA-large")
|
|
2411
|
+
> "red-60v", "red-50v"
|
|
2412
|
+
get-link-tokens-from-bg(
|
|
2413
|
+
"black",
|
|
2414
|
+
"red-5v",
|
|
2415
|
+
"red-60v",
|
|
2416
|
+
"AA")
|
|
2417
|
+
> "red-5v", "white"
|
|
2418
|
+
get-link-tokens-from-bg(
|
|
2419
|
+
"black",
|
|
2420
|
+
"white",
|
|
2421
|
+
"red-60v",
|
|
2422
|
+
"AA")
|
|
2423
|
+
> "white", "white"
|
|
2424
|
+
----------------------------------------
|
|
2425
|
+
*/
|
|
2426
|
+
/*
|
|
2427
|
+
----------------------------------------
|
|
2428
|
+
next-token()
|
|
2429
|
+
----------------------------------------
|
|
2430
|
+
Returns next "darker" or "lighter" color
|
|
2431
|
+
token of the same token type and variant.
|
|
2432
|
+
Returns: color-token | false
|
|
2433
|
+
next-token("accent-warm", "lighter")
|
|
2434
|
+
> "accent-warm-light"
|
|
2435
|
+
next-token("gray-10", "lighter")
|
|
2436
|
+
> "gray-5"
|
|
2437
|
+
next-token("gray-5", "lighter")
|
|
2438
|
+
> "white"
|
|
2439
|
+
next-token("white", "lighter")
|
|
2440
|
+
> false
|
|
2441
|
+
next-token("red-50v", "darker")
|
|
2442
|
+
> "red-60v"
|
|
2443
|
+
next-token("red-50", "darker")
|
|
2444
|
+
> "red-60"
|
|
2445
|
+
next-token("red-80v", "darker")
|
|
2446
|
+
> "red-90"
|
|
2447
|
+
next-token("red-90", "darker")
|
|
2448
|
+
> "black"
|
|
2449
|
+
next-token("white", "darker")
|
|
2450
|
+
> "gray-5"
|
|
2451
|
+
next-token("black", "lighter")
|
|
2452
|
+
> "gray-90"
|
|
2453
|
+
----------------------------------------
|
|
2454
|
+
*/
|
|
2455
|
+
/*
|
|
2456
|
+
----------------------------------------
|
|
2457
|
+
color()
|
|
2458
|
+
----------------------------------------
|
|
2459
|
+
Derive a color from a color shortcode
|
|
2460
|
+
----------------------------------------
|
|
2461
|
+
*/
|
|
2462
|
+
/*
|
|
2463
|
+
----------------------------------------
|
|
2464
|
+
test-colors()
|
|
2465
|
+
----------------------------------------
|
|
2466
|
+
Check to see if all system colors
|
|
2467
|
+
fall between the proper relative
|
|
2468
|
+
luminance range for their grade.
|
|
2469
|
+
Has a couple quirks, as the luminance()
|
|
2470
|
+
function returns slightly different
|
|
2471
|
+
results than expected.
|
|
2472
|
+
----------------------------------------
|
|
2473
|
+
*/
|
|
2474
|
+
/*
|
|
2475
|
+
----------------------------------------
|
|
2476
|
+
Line height
|
|
2477
|
+
----------------------------------------
|
|
2478
|
+
*/
|
|
2479
|
+
/*
|
|
2480
|
+
----------------------------------------
|
|
2481
|
+
Measure
|
|
2482
|
+
----------------------------------------
|
|
2483
|
+
*/
|
|
2484
|
+
/*
|
|
2485
|
+
----------------------------------------
|
|
2486
|
+
spacing-multiple()
|
|
2487
|
+
----------------------------------------
|
|
2488
|
+
Converts a spacing unit multiple into
|
|
2489
|
+
the desired final units (currently rem)
|
|
2490
|
+
----------------------------------------
|
|
2491
|
+
*/
|
|
2492
|
+
/*
|
|
2493
|
+
----------------------------------------
|
|
2494
|
+
cap-height()
|
|
2495
|
+
----------------------------------------
|
|
2496
|
+
Get the cap height of a valid typeface
|
|
2497
|
+
----------------------------------------
|
|
2498
|
+
*/
|
|
2499
|
+
/*
|
|
2500
|
+
----------------------------------------
|
|
2501
|
+
validate-typeface-token()
|
|
2502
|
+
----------------------------------------
|
|
2503
|
+
Check to see if a typeface-token exists.
|
|
2504
|
+
Throw an error if a passed token does
|
|
2505
|
+
not exist in the typeface-token map.
|
|
2506
|
+
----------------------------------------
|
|
2507
|
+
*/
|
|
2508
|
+
/*
|
|
2509
|
+
----------------------------------------
|
|
2510
|
+
convert-to-font-type()
|
|
2511
|
+
----------------------------------------
|
|
2512
|
+
Converts a font-role token into a
|
|
2513
|
+
font-type token. Leaves font-type tokens
|
|
2514
|
+
unchanged.
|
|
2515
|
+
----------------------------------------
|
|
2516
|
+
*/
|
|
2517
|
+
/*
|
|
2518
|
+
----------------------------------------
|
|
2519
|
+
font-sources()
|
|
2520
|
+
----------------------------------------
|
|
2521
|
+
Outputs a list of font sources used in
|
|
2522
|
+
a @font-face declaration.
|
|
2523
|
+
|
|
2524
|
+
$theme-font-browser-compatibility: true - output woff2, woff, ttf
|
|
2525
|
+
$theme-font-browser-compatibility: false - output woff2
|
|
2526
|
+
|
|
2527
|
+
@param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]
|
|
2528
|
+
@output: string
|
|
2529
|
+
|
|
2530
|
+
filetypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)
|
|
2531
|
+
----------------------------------------
|
|
2532
|
+
*/
|
|
2533
|
+
/*
|
|
2534
|
+
----------------------------------------
|
|
2535
|
+
Project fonts
|
|
2536
|
+
----------------------------------------
|
|
2537
|
+
Collects font settings in a map for
|
|
2538
|
+
looping.
|
|
2539
|
+
----------------------------------------
|
|
2540
|
+
*/
|
|
2541
|
+
/*
|
|
2542
|
+
----------------------------------------
|
|
2543
|
+
get-font-stack()
|
|
2544
|
+
----------------------------------------
|
|
2545
|
+
Get a font stack from a style- or
|
|
2546
|
+
role-based font token.
|
|
2547
|
+
----------------------------------------
|
|
2548
|
+
*/
|
|
2549
|
+
/*
|
|
2550
|
+
----------------------------------------
|
|
2551
|
+
get-typeface-token()
|
|
2552
|
+
----------------------------------------
|
|
2553
|
+
Get a typeface token from a font-type or
|
|
2554
|
+
font-role token.
|
|
2555
|
+
----------------------------------------
|
|
2556
|
+
*/
|
|
2557
|
+
/*
|
|
2558
|
+
----------------------------------------
|
|
2559
|
+
px-to-rem()
|
|
2560
|
+
----------------------------------------
|
|
2561
|
+
Converts a value in px to a value in rem
|
|
2562
|
+
----------------------------------------
|
|
2563
|
+
*/
|
|
2564
|
+
/*
|
|
2565
|
+
----------------------------------------
|
|
2566
|
+
rem-to-px()
|
|
2567
|
+
----------------------------------------
|
|
2568
|
+
Converts a value in rem to a value in px
|
|
2569
|
+
----------------------------------------
|
|
2570
|
+
*/
|
|
2571
|
+
/*
|
|
2572
|
+
----------------------------------------
|
|
2573
|
+
rem-to-user-em()
|
|
2574
|
+
----------------------------------------
|
|
2575
|
+
Converts a value in rem to a value in
|
|
2576
|
+
[user-settings] em for use in media
|
|
2577
|
+
queries
|
|
2578
|
+
----------------------------------------
|
|
2579
|
+
*/
|
|
2580
|
+
/*
|
|
2581
|
+
----------------------------------------
|
|
2582
|
+
units()
|
|
2583
|
+
----------------------------------------
|
|
2584
|
+
Converts a spacing unit into
|
|
2585
|
+
the desired final units (currently rem)
|
|
2586
|
+
----------------------------------------
|
|
2587
|
+
*/
|
|
2588
|
+
/*
|
|
2589
|
+
----------------------------------------
|
|
2590
|
+
number-to-token()
|
|
2591
|
+
----------------------------------------
|
|
2592
|
+
Converts an integer or numeric value
|
|
2593
|
+
into a system value
|
|
2594
|
+
|
|
2595
|
+
Ex: 0.5 --> '05'
|
|
2596
|
+
-1px --> 'neg-1px'
|
|
2597
|
+
----------------------------------------
|
|
2598
|
+
*/
|
|
2599
|
+
/*
|
|
2600
|
+
----------------------------------------
|
|
2601
|
+
normalize-type-scale()
|
|
2602
|
+
----------------------------------------
|
|
2603
|
+
Normalizes a specific face's optical size
|
|
2604
|
+
to a set target
|
|
2605
|
+
----------------------------------------
|
|
2606
|
+
*/
|
|
2607
|
+
/*
|
|
2608
|
+
----------------------------------------
|
|
2609
|
+
system-type-scale()
|
|
2610
|
+
----------------------------------------
|
|
2611
|
+
Get a value from the system type scale
|
|
2612
|
+
----------------------------------------
|
|
2613
|
+
*/
|
|
2614
|
+
/*
|
|
2615
|
+
----------------------------------------
|
|
2616
|
+
columns()
|
|
2617
|
+
----------------------------------------
|
|
2618
|
+
outputs a grid-col number based on
|
|
2619
|
+
the number of desired columns in the
|
|
2620
|
+
12-column grid
|
|
2621
|
+
|
|
2622
|
+
Ex: columns(2) --> 6
|
|
2623
|
+
grid-col(columns(2))
|
|
2624
|
+
----------------------------------------
|
|
2625
|
+
*/
|
|
2626
|
+
/*
|
|
2627
|
+
----------------------------------------
|
|
2628
|
+
USWDS Properties
|
|
2629
|
+
----------------------------------------
|
|
2630
|
+
*/
|
|
2631
|
+
/*
|
|
2632
|
+
----------------------------------------
|
|
2633
|
+
get-uswds-value()
|
|
2634
|
+
----------------------------------------
|
|
2635
|
+
Finds and outputs a value from the
|
|
2636
|
+
USWDS standard values.
|
|
2637
|
+
|
|
2638
|
+
Used to build other standard utility
|
|
2639
|
+
functions and mixins.
|
|
2640
|
+
----------------------------------------
|
|
2641
|
+
*/
|
|
2642
|
+
/*
|
|
2643
|
+
----------------------------------------
|
|
2644
|
+
get-standard-values()
|
|
2645
|
+
----------------------------------------
|
|
2646
|
+
Gets a map of USWDS standard values
|
|
2647
|
+
for a property
|
|
2648
|
+
----------------------------------------
|
|
2649
|
+
*/
|
|
2650
|
+
/*
|
|
2651
|
+
----------------------------------------
|
|
2652
|
+
ns()
|
|
2653
|
+
----------------------------------------
|
|
2654
|
+
Add a namesspace of $type if that
|
|
2655
|
+
namespace is set to output
|
|
2656
|
+
----------------------------------------
|
|
2657
|
+
*/
|
|
2658
|
+
/*
|
|
2659
|
+
----------------------------------------
|
|
2660
|
+
border-radius()
|
|
2661
|
+
----------------------------------------
|
|
2662
|
+
Get a border-radius from the system
|
|
2663
|
+
border-radii
|
|
2664
|
+
----------------------------------------
|
|
2665
|
+
*/
|
|
2666
|
+
/*
|
|
2667
|
+
----------------------------------------
|
|
2668
|
+
font-weight()
|
|
2669
|
+
fw()
|
|
2670
|
+
----------------------------------------
|
|
2671
|
+
Get a font-weight value from the
|
|
2672
|
+
system font-weight
|
|
2673
|
+
----------------------------------------
|
|
2674
|
+
*/
|
|
2675
|
+
/*
|
|
2676
|
+
----------------------------------------
|
|
2677
|
+
feature()
|
|
2678
|
+
----------------------------------------
|
|
2679
|
+
Gets a valid USWDS font feature setting
|
|
2680
|
+
----------------------------------------
|
|
2681
|
+
*/
|
|
2682
|
+
/*
|
|
2683
|
+
----------------------------------------
|
|
2684
|
+
flex()
|
|
2685
|
+
----------------------------------------
|
|
2686
|
+
Gets a valid USWDS flex value
|
|
2687
|
+
----------------------------------------
|
|
2688
|
+
*/
|
|
2689
|
+
/*
|
|
2690
|
+
----------------------------------------
|
|
2691
|
+
font-family()
|
|
2692
|
+
family()
|
|
2693
|
+
----------------------------------------
|
|
2694
|
+
Get a font-family stack from a
|
|
2695
|
+
role-based or type-based font family
|
|
2696
|
+
----------------------------------------
|
|
2697
|
+
*/
|
|
2698
|
+
/*
|
|
2699
|
+
----------------------------------------
|
|
2700
|
+
letter-spacing()
|
|
2701
|
+
ls()
|
|
2702
|
+
----------------------------------------
|
|
2703
|
+
Get a letter-spacing value from the
|
|
2704
|
+
system letter-spacing
|
|
2705
|
+
----------------------------------------
|
|
2706
|
+
*/
|
|
2707
|
+
/*
|
|
2708
|
+
----------------------------------------
|
|
2709
|
+
measure()
|
|
2710
|
+
----------------------------------------
|
|
2711
|
+
Gets a valid USWDS reading line length
|
|
2712
|
+
----------------------------------------
|
|
2713
|
+
*/
|
|
2714
|
+
/*
|
|
2715
|
+
----------------------------------------
|
|
2716
|
+
opacity()
|
|
2717
|
+
----------------------------------------
|
|
2718
|
+
Get an opacity from the system
|
|
2719
|
+
opacities
|
|
2720
|
+
----------------------------------------
|
|
2721
|
+
*/
|
|
2722
|
+
/*
|
|
2723
|
+
----------------------------------------
|
|
2724
|
+
order()
|
|
2725
|
+
----------------------------------------
|
|
2726
|
+
Get an order value from the
|
|
2727
|
+
system orders
|
|
2728
|
+
----------------------------------------
|
|
2729
|
+
*/
|
|
2730
|
+
/*
|
|
2731
|
+
----------------------------------------
|
|
2732
|
+
radius()
|
|
2733
|
+
----------------------------------------
|
|
2734
|
+
Get a border-radius value from the
|
|
2735
|
+
system letter-spacing
|
|
2736
|
+
----------------------------------------
|
|
2737
|
+
*/
|
|
2738
|
+
/*
|
|
2739
|
+
----------------------------------------
|
|
2740
|
+
font-size()
|
|
2741
|
+
----------------------------------------
|
|
2742
|
+
Get type scale value from a [family] and
|
|
2743
|
+
[scale]
|
|
2744
|
+
----------------------------------------
|
|
2745
|
+
*/
|
|
2746
|
+
/*
|
|
2747
|
+
----------------------------------------
|
|
2748
|
+
z-index()
|
|
2749
|
+
z()
|
|
2750
|
+
----------------------------------------
|
|
2751
|
+
Get a z-index value from the
|
|
2752
|
+
system z-index
|
|
2753
|
+
----------------------------------------
|
|
2754
|
+
*/
|
|
2755
|
+
/*
|
|
2756
|
+
----------------------------------------
|
|
2757
|
+
utility-font()
|
|
2758
|
+
----------------------------------------
|
|
2759
|
+
Get a normalized font-size in rem from
|
|
2760
|
+
a family and a type size in either
|
|
2761
|
+
system scale or project scale
|
|
2762
|
+
----------------------------------------
|
|
2763
|
+
Not the public-facing function.
|
|
2764
|
+
Used for building the utilities and
|
|
2765
|
+
withholds certain errors.
|
|
2766
|
+
----------------------------------------
|
|
2767
|
+
*/
|
|
2768
|
+
/*
|
|
2769
|
+
----------------------------------------
|
|
2770
|
+
family()
|
|
2771
|
+
----------------------------------------
|
|
2772
|
+
Get a font-family stack
|
|
2773
|
+
----------------------------------------
|
|
2774
|
+
*/
|
|
2775
|
+
/*
|
|
2776
|
+
----------------------------------------
|
|
2777
|
+
size()
|
|
2778
|
+
----------------------------------------
|
|
2779
|
+
Get a normalized font-size in rem from
|
|
2780
|
+
a family and a type size in either
|
|
2781
|
+
system scale or project scale
|
|
2782
|
+
----------------------------------------
|
|
2783
|
+
*/
|
|
2784
|
+
/*
|
|
2785
|
+
----------------------------------------
|
|
2786
|
+
font()
|
|
2787
|
+
----------------------------------------
|
|
2788
|
+
Get a font-family stack
|
|
2789
|
+
AND
|
|
2790
|
+
Get a normalized font-size in rem from
|
|
2791
|
+
a family and a type size in either
|
|
2792
|
+
system scale or project scale
|
|
2793
|
+
----------------------------------------
|
|
2794
|
+
*/
|
|
2795
|
+
/*
|
|
2796
|
+
----------------------------------------
|
|
2797
|
+
typeset()
|
|
2798
|
+
----------------------------------------
|
|
2799
|
+
Sets:
|
|
2800
|
+
- family
|
|
2801
|
+
- size
|
|
2802
|
+
- line-height
|
|
2803
|
+
----------------------------------------
|
|
2804
|
+
*/
|
|
2805
|
+
/*
|
|
2806
|
+
----------------------------------------
|
|
2807
|
+
Easing
|
|
2808
|
+
----------------------------------------
|
|
2809
|
+
*/
|
|
2810
|
+
/*
|
|
2811
|
+
----------------------------------------
|
|
2812
|
+
append-important()
|
|
2813
|
+
----------------------------------------
|
|
2814
|
+
Append `!important` to a list
|
|
2815
|
+
----------------------------------------
|
|
2816
|
+
*/
|
|
2817
|
+
/*
|
|
2818
|
+
----------------------------------------
|
|
2819
|
+
get-last()
|
|
2820
|
+
----------------------------------------
|
|
2821
|
+
Return the last item of a list,
|
|
2822
|
+
Return null if the value is null
|
|
2823
|
+
----------------------------------------
|
|
2824
|
+
*/
|
|
2825
|
+
/*
|
|
2826
|
+
----------------------------------------
|
|
2827
|
+
de-list()
|
|
2828
|
+
----------------------------------------
|
|
2829
|
+
Transform a one-element list or arglist
|
|
2830
|
+
into that single element.
|
|
2831
|
+
----------------------------------------
|
|
2832
|
+
(1) => 1
|
|
2833
|
+
((1)) => (1)
|
|
2834
|
+
----------------------------------------
|
|
2835
|
+
*/
|
|
2836
|
+
/*
|
|
2837
|
+
----------------------------------------
|
|
2838
|
+
error-not-token()
|
|
2839
|
+
----------------------------------------
|
|
2840
|
+
Returns a common not-a-token error.
|
|
2841
|
+
----------------------------------------
|
|
2842
|
+
*/
|
|
2843
|
+
/*
|
|
2844
|
+
----------------------------------------
|
|
2845
|
+
uswds-error()
|
|
2846
|
+
----------------------------------------
|
|
2847
|
+
Allow the system to pass an error as text
|
|
2848
|
+
to test error states in unit testing
|
|
2849
|
+
----------------------------------------
|
|
2850
|
+
*/
|
|
2851
|
+
/*
|
|
2852
|
+
----------------------------------------
|
|
2853
|
+
get-default()
|
|
2854
|
+
----------------------------------------
|
|
2855
|
+
Returns the default value from a map
|
|
2856
|
+
of project defaults
|
|
2857
|
+
get-default("bg-color")
|
|
2858
|
+
> $theme-body-background-color
|
|
2859
|
+
----------------------------------------
|
|
2860
|
+
*/
|
|
2861
|
+
/*
|
|
2862
|
+
* * * * * ==============================
|
|
2863
|
+
* * * * * ==============================
|
|
2864
|
+
* * * * * ==============================
|
|
2865
|
+
* * * * * ==============================
|
|
2866
|
+
========================================
|
|
2867
|
+
========================================
|
|
2868
|
+
========================================
|
|
2869
|
+
----------------------------------------
|
|
2870
|
+
GENERAL SETTINGS
|
|
2871
|
+
----------------------------------------
|
|
2872
|
+
Read more about settings and
|
|
2873
|
+
USWDS style tokens in the documentation:
|
|
2874
|
+
https://designsystem.digital.gov/design-tokens
|
|
2875
|
+
----------------------------------------
|
|
2876
|
+
*/
|
|
2877
|
+
/*
|
|
2878
|
+
----------------------------------------
|
|
2879
|
+
Image path
|
|
2880
|
+
----------------------------------------
|
|
2881
|
+
Relative image file path
|
|
2882
|
+
----------------------------------------
|
|
2883
|
+
*/
|
|
2884
|
+
/*
|
|
2885
|
+
----------------------------------------
|
|
2886
|
+
Show compile warnings
|
|
2887
|
+
----------------------------------------
|
|
2888
|
+
Show Sass warnings when functions and
|
|
2889
|
+
mixins use non-standard tokens.
|
|
2890
|
+
AND
|
|
2891
|
+
Show updates and notifications.
|
|
2892
|
+
----------------------------------------
|
|
2893
|
+
*/
|
|
2894
|
+
/*
|
|
2895
|
+
----------------------------------------
|
|
2896
|
+
Namespace
|
|
2897
|
+
----------------------------------------
|
|
2898
|
+
*/
|
|
2899
|
+
/*
|
|
2900
|
+
----------------------------------------
|
|
2901
|
+
Prefix separator
|
|
2902
|
+
----------------------------------------
|
|
2903
|
+
Set the character the separates
|
|
2904
|
+
responsive and state prefixes from the
|
|
2905
|
+
main class name.
|
|
2906
|
+
The default (":") needs to be preceded
|
|
2907
|
+
by two backslashes to be properly
|
|
2908
|
+
escaped.
|
|
2909
|
+
----------------------------------------
|
|
2910
|
+
*/
|
|
2911
|
+
/*
|
|
2912
|
+
----------------------------------------
|
|
2913
|
+
Layout grid
|
|
2914
|
+
----------------------------------------
|
|
2915
|
+
Should the layout grid classes output
|
|
2916
|
+
with !important
|
|
2917
|
+
----------------------------------------
|
|
2918
|
+
*/
|
|
2919
|
+
/*
|
|
2920
|
+
----------------------------------------
|
|
2921
|
+
Border box sizing
|
|
2922
|
+
----------------------------------------
|
|
2923
|
+
When set to true, sets the box-sizing
|
|
2924
|
+
property of all site elements to
|
|
2925
|
+
`border-box`.
|
|
2926
|
+
----------------------------------------
|
|
2927
|
+
*/
|
|
2928
|
+
/*
|
|
2929
|
+
----------------------------------------
|
|
2930
|
+
Focus styles
|
|
2931
|
+
----------------------------------------
|
|
2932
|
+
*/
|
|
2933
|
+
/*
|
|
2934
|
+
----------------------------------------
|
|
2935
|
+
Icons
|
|
2936
|
+
----------------------------------------
|
|
2937
|
+
*/
|
|
2938
|
+
/*
|
|
2939
|
+
* * * * * ==============================
|
|
2940
|
+
* * * * * ==============================
|
|
2941
|
+
* * * * * ==============================
|
|
2942
|
+
* * * * * ==============================
|
|
2943
|
+
========================================
|
|
2944
|
+
========================================
|
|
2945
|
+
========================================
|
|
2946
|
+
----------------------------------------
|
|
2947
|
+
TYPOGRAPHY SETTINGS
|
|
2948
|
+
----------------------------------------
|
|
2949
|
+
Read more about settings and
|
|
2950
|
+
USWDS typography tokens in the documentation:
|
|
2951
|
+
https://designsystem.digital.gov/design-tokens/typesetting/overview/
|
|
2952
|
+
----------------------------------------
|
|
2953
|
+
*/
|
|
2954
|
+
/*
|
|
2955
|
+
----------------------------------------
|
|
2956
|
+
Root font size
|
|
2957
|
+
----------------------------------------
|
|
2958
|
+
Setting $theme-respect-user-font-size to
|
|
2959
|
+
true sets the root font size to 100% and
|
|
2960
|
+
uses ems for media queries
|
|
2961
|
+
----------------------------------------
|
|
2962
|
+
$theme-root-font-size only applies when
|
|
2963
|
+
$theme-respect-user-font-size is set to
|
|
2964
|
+
false.
|
|
2965
|
+
|
|
2966
|
+
This will set the root font size
|
|
2967
|
+
as a specific px value and use px values
|
|
2968
|
+
for media queries.
|
|
2969
|
+
|
|
2970
|
+
Accepts true or false
|
|
2971
|
+
----------------------------------------
|
|
2972
|
+
*/
|
|
2973
|
+
/*
|
|
2974
|
+
----------------------------------------
|
|
2975
|
+
Global styles
|
|
2976
|
+
----------------------------------------
|
|
2977
|
+
Adds basic styling for the following
|
|
2978
|
+
unclassed elements:
|
|
2979
|
+
|
|
2980
|
+
- paragraph: paragraph text
|
|
2981
|
+
- link: links
|
|
2982
|
+
- content: paragraph text, links,
|
|
2983
|
+
headings, lists, and tables
|
|
2984
|
+
----------------------------------------
|
|
2985
|
+
*/
|
|
2986
|
+
/*
|
|
2987
|
+
----------------------------------------
|
|
2988
|
+
Broswer compatibility mode
|
|
2989
|
+
----------------------------------------
|
|
2990
|
+
When true, outputs woff and ttf font
|
|
2991
|
+
formats in addition to woff2
|
|
2992
|
+
----------------------------------------
|
|
2993
|
+
*/
|
|
2994
|
+
/*
|
|
2995
|
+
----------------------------------------
|
|
2996
|
+
Font path
|
|
2997
|
+
----------------------------------------
|
|
2998
|
+
Relative font file path
|
|
2999
|
+
----------------------------------------
|
|
3000
|
+
*/
|
|
3001
|
+
/*
|
|
3002
|
+
----------------------------------------
|
|
3003
|
+
Custom typeface tokens
|
|
3004
|
+
----------------------------------------
|
|
3005
|
+
Add a new custom typeface token if
|
|
3006
|
+
your project uses a typeface not already
|
|
3007
|
+
defined by USWDS.
|
|
3008
|
+
----------------------------------------
|
|
3009
|
+
USWDS defines the following tokens
|
|
3010
|
+
by default:
|
|
3011
|
+
----------------------------------------
|
|
3012
|
+
'georgia'
|
|
3013
|
+
'helvetica'
|
|
3014
|
+
'merriweather'
|
|
3015
|
+
'open-sans'
|
|
3016
|
+
'public-sans'
|
|
3017
|
+
'roboto-mono'
|
|
3018
|
+
'source-sans-pro'
|
|
3019
|
+
'system'
|
|
3020
|
+
'tahoma'
|
|
3021
|
+
'verdana'
|
|
3022
|
+
----------------------------------------
|
|
3023
|
+
Add as many new tokens as you have
|
|
3024
|
+
custom typefaces. Reference your new
|
|
3025
|
+
token(s) in the type-based font settings
|
|
3026
|
+
using the quoted name of the token.
|
|
3027
|
+
|
|
3028
|
+
For example:
|
|
3029
|
+
|
|
3030
|
+
$theme-font-type-cond: 'example-font-token';
|
|
3031
|
+
|
|
3032
|
+
display-name:
|
|
3033
|
+
The display name of your font
|
|
3034
|
+
|
|
3035
|
+
cap-height:
|
|
3036
|
+
The height of a 500px `N` in Sketch
|
|
3037
|
+
----------------------------------------
|
|
3038
|
+
You should change `example-[style]-token`
|
|
3039
|
+
names to something more descriptive.
|
|
3040
|
+
----------------------------------------
|
|
3041
|
+
*/
|
|
3042
|
+
/*
|
|
3043
|
+
----------------------------------------
|
|
3044
|
+
Type-based font settings
|
|
3045
|
+
----------------------------------------
|
|
3046
|
+
Set the type-based tokens for your
|
|
3047
|
+
project from the following tokens,
|
|
3048
|
+
or from any new font tokens you added in
|
|
3049
|
+
$theme-typeface-tokens.
|
|
3050
|
+
----------------------------------------
|
|
3051
|
+
'georgia'
|
|
3052
|
+
'helvetica'
|
|
3053
|
+
'merriweather'
|
|
3054
|
+
'open-sans'
|
|
3055
|
+
'public-sans'
|
|
3056
|
+
'roboto-mono'
|
|
3057
|
+
'source-sans-pro'
|
|
3058
|
+
'system'
|
|
3059
|
+
'tahoma'
|
|
3060
|
+
'verdana'
|
|
3061
|
+
----------------------------------------
|
|
3062
|
+
*/
|
|
3063
|
+
/*
|
|
3064
|
+
----------------------------------------
|
|
3065
|
+
Custom font stacks
|
|
3066
|
+
----------------------------------------
|
|
3067
|
+
Add custom font stacks to any of the
|
|
3068
|
+
type-based fonts. Any USWDS typeface
|
|
3069
|
+
token already has a default stack.
|
|
3070
|
+
|
|
3071
|
+
Custom stacks don't need to include the
|
|
3072
|
+
font's display name. It will
|
|
3073
|
+
automatically appear at the start of
|
|
3074
|
+
the stack.
|
|
3075
|
+
----------------------------------------
|
|
3076
|
+
Example:
|
|
3077
|
+
$theme-font-type-sans: 'source-sans-pro';
|
|
3078
|
+
$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;
|
|
3079
|
+
|
|
3080
|
+
Output:
|
|
3081
|
+
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;
|
|
3082
|
+
----------------------------------------
|
|
3083
|
+
*/
|
|
3084
|
+
/*
|
|
3085
|
+
----------------------------------------
|
|
3086
|
+
Add any custom font source files
|
|
3087
|
+
----------------------------------------
|
|
3088
|
+
If you want USWDS to generate additional
|
|
3089
|
+
@font-face declarations, add your font
|
|
3090
|
+
data below, following the example that
|
|
3091
|
+
follows.
|
|
3092
|
+
----------------------------------------
|
|
3093
|
+
USWDS automatically generates @font-face
|
|
3094
|
+
declarations for the following
|
|
3095
|
+
|
|
3096
|
+
'merriweather'
|
|
3097
|
+
'public-sans'
|
|
3098
|
+
'roboto-mono'
|
|
3099
|
+
'source-sans-pro'
|
|
3100
|
+
|
|
3101
|
+
These typefaces not require custom
|
|
3102
|
+
source files.
|
|
3103
|
+
----------------------------------------
|
|
3104
|
+
EXAMPLE
|
|
3105
|
+
|
|
3106
|
+
- dir:
|
|
3107
|
+
Directory relative to $theme-font-path
|
|
3108
|
+
- This directory should include fonts saved as
|
|
3109
|
+
.woff2
|
|
3110
|
+
ExampleSerif-Normal.woff2
|
|
3111
|
+
|
|
3112
|
+
$theme-font-serif-custom-src: (
|
|
3113
|
+
dir: 'custom/example-serif',
|
|
3114
|
+
roman: (
|
|
3115
|
+
100: false,
|
|
3116
|
+
200: false,
|
|
3117
|
+
300: 'ExampleSerif-Light',
|
|
3118
|
+
400: 'ExampleSerif-Normal',
|
|
3119
|
+
500: false,
|
|
3120
|
+
600: false,
|
|
3121
|
+
700: 'ExampleSerif-Bold',
|
|
3122
|
+
800: false,
|
|
3123
|
+
900: false,
|
|
3124
|
+
),
|
|
3125
|
+
italic: (
|
|
3126
|
+
100: false,
|
|
3127
|
+
200: false,
|
|
3128
|
+
300: 'ExampleSerif-LightItalic',
|
|
3129
|
+
400: 'ExampleSerif-Italic',
|
|
3130
|
+
500: false,
|
|
3131
|
+
600: false,
|
|
3132
|
+
700: 'ExampleSerif-BoldItalic',
|
|
3133
|
+
800: false,
|
|
3134
|
+
900: false,
|
|
3135
|
+
),
|
|
3136
|
+
);
|
|
3137
|
+
----------------------------------------
|
|
3138
|
+
*/
|
|
3139
|
+
/*
|
|
3140
|
+
----------------------------------------
|
|
3141
|
+
Role-based font settings
|
|
3142
|
+
----------------------------------------
|
|
3143
|
+
Set the role-based tokens for your
|
|
3144
|
+
project from the following font-type
|
|
3145
|
+
tokens.
|
|
3146
|
+
----------------------------------------
|
|
3147
|
+
'cond'
|
|
3148
|
+
'icon'
|
|
3149
|
+
'lang'
|
|
3150
|
+
'mono'
|
|
3151
|
+
'sans'
|
|
3152
|
+
'serif'
|
|
3153
|
+
----------------------------------------
|
|
3154
|
+
*/
|
|
3155
|
+
/*
|
|
3156
|
+
----------------------------------------
|
|
3157
|
+
Type scale
|
|
3158
|
+
----------------------------------------
|
|
3159
|
+
Define your project's type scale using
|
|
3160
|
+
values from the USWDS system type scale
|
|
3161
|
+
|
|
3162
|
+
1-20
|
|
3163
|
+
----------------------------------------
|
|
3164
|
+
*/
|
|
3165
|
+
/*
|
|
3166
|
+
----------------------------------------
|
|
3167
|
+
Font weights
|
|
3168
|
+
----------------------------------------
|
|
3169
|
+
Assign weights 100-900
|
|
3170
|
+
Or use `false` for unneeded weights.
|
|
3171
|
+
----------------------------------------
|
|
3172
|
+
*/
|
|
3173
|
+
/*
|
|
3174
|
+
----------------------------------------
|
|
3175
|
+
General typography settings
|
|
3176
|
+
----------------------------------------
|
|
3177
|
+
Type scale tokens
|
|
3178
|
+
----------------------------------------
|
|
3179
|
+
micro: 10px
|
|
3180
|
+
1: 12px
|
|
3181
|
+
2: 13px
|
|
3182
|
+
3: 14px
|
|
3183
|
+
4: 15px
|
|
3184
|
+
5: 16px
|
|
3185
|
+
6: 17px
|
|
3186
|
+
7: 18px
|
|
3187
|
+
8: 20px
|
|
3188
|
+
9: 22px
|
|
3189
|
+
10: 24px
|
|
3190
|
+
11: 28px
|
|
3191
|
+
12: 32px
|
|
3192
|
+
13: 36px
|
|
3193
|
+
14: 40px
|
|
3194
|
+
15: 48px
|
|
3195
|
+
16: 56px
|
|
3196
|
+
17: 64px
|
|
3197
|
+
18: 80px
|
|
3198
|
+
19: 120px
|
|
3199
|
+
20: 140px
|
|
3200
|
+
----------------------------------------
|
|
3201
|
+
Line height tokens
|
|
3202
|
+
----------------------------------------
|
|
3203
|
+
1: 1
|
|
3204
|
+
2: 1.15
|
|
3205
|
+
3: 1.35
|
|
3206
|
+
4: 1.5
|
|
3207
|
+
5: 1.62
|
|
3208
|
+
6: 1.75
|
|
3209
|
+
----------------------------------------
|
|
3210
|
+
Font role tokens
|
|
3211
|
+
----------------------------------------
|
|
3212
|
+
'ui'
|
|
3213
|
+
'heading'
|
|
3214
|
+
'body'
|
|
3215
|
+
'code'
|
|
3216
|
+
'alt'
|
|
3217
|
+
----------------------------------------
|
|
3218
|
+
Measure (max-width) tokens
|
|
3219
|
+
----------------------------------------
|
|
3220
|
+
1: 44ex
|
|
3221
|
+
2: 60ex
|
|
3222
|
+
3: 64ex
|
|
3223
|
+
4: 68ex
|
|
3224
|
+
5: 74ex
|
|
3225
|
+
6: 88ex
|
|
3226
|
+
none: none
|
|
3227
|
+
----------------------------------------
|
|
3228
|
+
*/
|
|
3229
|
+
/*
|
|
3230
|
+
* * * * * ==============================
|
|
3231
|
+
* * * * * ==============================
|
|
3232
|
+
* * * * * ==============================
|
|
3233
|
+
* * * * * ==============================
|
|
3234
|
+
========================================
|
|
3235
|
+
========================================
|
|
3236
|
+
========================================
|
|
3237
|
+
----------------------------------------
|
|
3238
|
+
COLOR SETTINGS
|
|
3239
|
+
----------------------------------------
|
|
3240
|
+
Read more about settings and
|
|
3241
|
+
USWDS color tokens in the documentation:
|
|
3242
|
+
https://designsystem.digital.gov/design-tokens/color
|
|
3243
|
+
----------------------------------------
|
|
3244
|
+
*/
|
|
3245
|
+
/*
|
|
3246
|
+
----------------------------------------
|
|
3247
|
+
Theme palette colors
|
|
3248
|
+
----------------------------------------
|
|
3249
|
+
*/
|
|
3250
|
+
/*
|
|
3251
|
+
----------------------------------------
|
|
3252
|
+
State palette colors
|
|
3253
|
+
----------------------------------------
|
|
3254
|
+
*/
|
|
3255
|
+
/*
|
|
3256
|
+
----------------------------------------
|
|
3257
|
+
General colors
|
|
3258
|
+
----------------------------------------
|
|
3259
|
+
*/
|
|
3260
|
+
/*
|
|
3261
|
+
* * * * * ==============================
|
|
3262
|
+
* * * * * ==============================
|
|
3263
|
+
* * * * * ==============================
|
|
3264
|
+
* * * * * ==============================
|
|
3265
|
+
========================================
|
|
3266
|
+
========================================
|
|
3267
|
+
========================================
|
|
3268
|
+
----------------------------------------
|
|
3269
|
+
COMPONENT SETTINGS
|
|
3270
|
+
----------------------------------------
|
|
3271
|
+
Read more about settings and
|
|
3272
|
+
USWDS style tokens in the documentation:
|
|
3273
|
+
https://designsystem.digital.gov/design-tokens
|
|
3274
|
+
----------------------------------------
|
|
3275
|
+
*/
|
|
3276
|
+
/*
|
|
3277
|
+
* * * * * ==============================
|
|
3278
|
+
* * * * * ==============================
|
|
3279
|
+
* * * * * ==============================
|
|
3280
|
+
* * * * * ==============================
|
|
3281
|
+
========================================
|
|
3282
|
+
========================================
|
|
3283
|
+
========================================
|
|
3284
|
+
----------------------------------------
|
|
3285
|
+
SPACING SETTINGS
|
|
3286
|
+
----------------------------------------
|
|
3287
|
+
Read more about settings and
|
|
3288
|
+
USWDS spacing units tokens in the
|
|
3289
|
+
documentation:
|
|
3290
|
+
https://designsystem.digital.gov/design-tokens/spacing-units
|
|
3291
|
+
----------------------------------------
|
|
3292
|
+
*/
|
|
3293
|
+
/*
|
|
3294
|
+
----------------------------------------
|
|
3295
|
+
Border radius
|
|
3296
|
+
----------------------------------------
|
|
3297
|
+
2px 2px
|
|
3298
|
+
0.5 4px
|
|
3299
|
+
1 8px
|
|
3300
|
+
1.5 12px
|
|
3301
|
+
2 16px
|
|
3302
|
+
2.5 20px
|
|
3303
|
+
3 24px
|
|
3304
|
+
4 32px
|
|
3305
|
+
5 40px
|
|
3306
|
+
6 48px
|
|
3307
|
+
7 56px
|
|
3308
|
+
8 64px
|
|
3309
|
+
9 72px
|
|
3310
|
+
----------------------------------------
|
|
3311
|
+
*/
|
|
3312
|
+
/*
|
|
3313
|
+
----------------------------------------
|
|
3314
|
+
Column gap
|
|
3315
|
+
----------------------------------------
|
|
3316
|
+
2px 2px
|
|
3317
|
+
0.5 4px
|
|
3318
|
+
1 8px
|
|
3319
|
+
2 16px
|
|
3320
|
+
3 24px
|
|
3321
|
+
4 32px
|
|
3322
|
+
5 40px
|
|
3323
|
+
6 48px
|
|
3324
|
+
----------------------------------------
|
|
3325
|
+
*/
|
|
3326
|
+
/*
|
|
3327
|
+
----------------------------------------
|
|
3328
|
+
Grid container max-width
|
|
3329
|
+
----------------------------------------
|
|
3330
|
+
mobile
|
|
3331
|
+
mobile-lg
|
|
3332
|
+
tablet
|
|
3333
|
+
tablet-lg
|
|
3334
|
+
desktop
|
|
3335
|
+
desktop-lg
|
|
3336
|
+
widescreen
|
|
3337
|
+
----------------------------------------
|
|
3338
|
+
*/
|
|
3339
|
+
/*
|
|
3340
|
+
----------------------------------------
|
|
3341
|
+
Site
|
|
3342
|
+
----------------------------------------
|
|
3343
|
+
*/
|
|
3344
|
+
/*
|
|
3345
|
+
* * * * * ==============================
|
|
3346
|
+
* * * * * ==============================
|
|
3347
|
+
* * * * * ==============================
|
|
3348
|
+
* * * * * ==============================
|
|
3349
|
+
========================================
|
|
3350
|
+
========================================
|
|
3351
|
+
========================================
|
|
3352
|
+
----------------------------------------
|
|
3353
|
+
UTILITIES SETTINGS
|
|
3354
|
+
----------------------------------------
|
|
3355
|
+
Read more about settings and
|
|
3356
|
+
USWDS utilities in the documentation:
|
|
3357
|
+
https://designsystem.digital.gov/utilities
|
|
3358
|
+
----------------------------------------
|
|
3359
|
+
*/
|
|
3360
|
+
/*
|
|
3361
|
+
----------------------------------------
|
|
3362
|
+
Utility breakpoints
|
|
3363
|
+
----------------------------------------
|
|
3364
|
+
Which breakpoints does your project
|
|
3365
|
+
need? Select as `true` any breakpoint
|
|
3366
|
+
used by utilities or layout grid
|
|
3367
|
+
----------------------------------------
|
|
3368
|
+
*/
|
|
3369
|
+
/*
|
|
3370
|
+
----------------------------------------
|
|
3371
|
+
Global colors
|
|
3372
|
+
----------------------------------------
|
|
3373
|
+
The following palettes will be added to
|
|
3374
|
+
- background-color
|
|
3375
|
+
- border-color
|
|
3376
|
+
- color
|
|
3377
|
+
- text-decoration-color
|
|
3378
|
+
----------------------------------------
|
|
3379
|
+
*/
|
|
3380
|
+
/*
|
|
3381
|
+
----------------------------------------
|
|
3382
|
+
Settings
|
|
3383
|
+
----------------------------------------
|
|
3384
|
+
*/
|
|
3385
|
+
/*
|
|
3386
|
+
----------------------------------------
|
|
3387
|
+
Values
|
|
3388
|
+
----------------------------------------
|
|
3389
|
+
*/
|
|
3390
|
+
/*
|
|
3391
|
+
----------------------------------------
|
|
3392
|
+
has-important()
|
|
3393
|
+
----------------------------------------
|
|
3394
|
+
Check to see if `!important` is
|
|
3395
|
+
being passed in a mixin's props
|
|
3396
|
+
----------------------------------------
|
|
3397
|
+
*/
|
|
3398
|
+
/*
|
|
3399
|
+
----------------------------------------
|
|
3400
|
+
map-collect()
|
|
3401
|
+
----------------------------------------
|
|
3402
|
+
Collect multiple maps into a single
|
|
3403
|
+
large map
|
|
3404
|
+
source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe
|
|
3405
|
+
----------------------------------------
|
|
3406
|
+
*/
|
|
3407
|
+
/*
|
|
3408
|
+
----------------------------------------
|
|
3409
|
+
map-deep-get()
|
|
3410
|
+
----------------------------------------
|
|
3411
|
+
@author Hugo Giraudel
|
|
3412
|
+
@access public
|
|
3413
|
+
@param {Map} $map - Map
|
|
3414
|
+
@param {Arglist} $keys - Key chain
|
|
3415
|
+
@return {*} - Desired value
|
|
3416
|
+
----------------------------------------
|
|
3417
|
+
*/
|
|
3418
|
+
/*
|
|
3419
|
+
----------------------------------------
|
|
3420
|
+
multi-cat()
|
|
3421
|
+
----------------------------------------
|
|
3422
|
+
Concatenate two lists
|
|
3423
|
+
----------------------------------------
|
|
3424
|
+
*/
|
|
3425
|
+
/*
|
|
3426
|
+
----------------------------------------
|
|
3427
|
+
remove()
|
|
3428
|
+
----------------------------------------
|
|
3429
|
+
Remove a value from a list
|
|
3430
|
+
----------------------------------------
|
|
3431
|
+
*/
|
|
3432
|
+
/*
|
|
3433
|
+
----------------------------------------
|
|
3434
|
+
smart-quote()
|
|
3435
|
+
----------------------------------------
|
|
3436
|
+
Quotes strings
|
|
3437
|
+
Inspects `px`, `xs`, and `xl` numbers
|
|
3438
|
+
Leaves bools as is
|
|
3439
|
+
----------------------------------------
|
|
3440
|
+
*/
|
|
3441
|
+
/*
|
|
3442
|
+
----------------------------------------
|
|
3443
|
+
str-replace()
|
|
3444
|
+
----------------------------------------
|
|
3445
|
+
Replace any substring with another
|
|
3446
|
+
string
|
|
3447
|
+
----------------------------------------
|
|
3448
|
+
*/
|
|
3449
|
+
/*
|
|
3450
|
+
----------------------------------------
|
|
3451
|
+
str-split()
|
|
3452
|
+
----------------------------------------
|
|
3453
|
+
Split a string at a given separator
|
|
3454
|
+
and convert into a list of substrings
|
|
3455
|
+
----------------------------------------
|
|
3456
|
+
*/
|
|
3457
|
+
/*
|
|
3458
|
+
----------------------------------------
|
|
3459
|
+
strip-unit()
|
|
3460
|
+
----------------------------------------
|
|
3461
|
+
Remove the unit of a length
|
|
3462
|
+
@author Hugo Giraudel
|
|
3463
|
+
@param {Number} $number - Number to remove unit from
|
|
3464
|
+
@return {Number} - Unitless number
|
|
3465
|
+
----------------------------------------
|
|
3466
|
+
*/
|
|
3467
|
+
/*
|
|
3468
|
+
----------------------------------------
|
|
3469
|
+
base-to-map()
|
|
3470
|
+
@TODO: Deprecate and delete
|
|
3471
|
+
----------------------------------------
|
|
3472
|
+
Convert a single base to a USWDS
|
|
3473
|
+
value map.
|
|
3474
|
+
|
|
3475
|
+
Candidate for deprecation if we remove
|
|
3476
|
+
isReadable
|
|
3477
|
+
----------------------------------------
|
|
3478
|
+
*/
|
|
3479
|
+
/*
|
|
3480
|
+
----------------------------------------
|
|
3481
|
+
to-number()
|
|
3482
|
+
----------------------------------------
|
|
3483
|
+
Casts a string into a number
|
|
3484
|
+
----------------------------------------
|
|
3485
|
+
@param {String | Number} $value - Value to be parsed
|
|
3486
|
+
@return {Number}
|
|
3487
|
+
----------------------------------------
|
|
3488
|
+
*/
|
|
3489
|
+
/*
|
|
3490
|
+
----------------------------------------
|
|
3491
|
+
unpack()
|
|
3492
|
+
----------------------------------------
|
|
3493
|
+
Create lists of single items from lists
|
|
3494
|
+
of lists.
|
|
3495
|
+
----------------------------------------
|
|
3496
|
+
(1, (2.1, 2.2), 3) -->
|
|
3497
|
+
(1, 2.1, 2.2, 3)
|
|
3498
|
+
----------------------------------------
|
|
3499
|
+
*/
|
|
3500
|
+
/*
|
|
3501
|
+
----------------------------------------
|
|
3502
|
+
color()
|
|
3503
|
+
----------------------------------------
|
|
3504
|
+
Derive a color from a color shortcode
|
|
3505
|
+
----------------------------------------
|
|
3506
|
+
*/
|
|
3507
|
+
/*
|
|
3508
|
+
----------------------------------------
|
|
3509
|
+
get-system-color()
|
|
3510
|
+
----------------------------------------
|
|
3511
|
+
Derive a system color from its
|
|
3512
|
+
family, value, and vivid or a passed
|
|
3513
|
+
variable that is, itself, a list
|
|
3514
|
+
----------------------------------------
|
|
3515
|
+
*/
|
|
3516
|
+
/*
|
|
3517
|
+
----------------------------------------
|
|
3518
|
+
color()
|
|
3519
|
+
----------------------------------------
|
|
3520
|
+
Derive a color from a color shortcode
|
|
3521
|
+
----------------------------------------
|
|
3522
|
+
*/
|
|
3523
|
+
/*
|
|
3524
|
+
----------------------------------------
|
|
3525
|
+
advanced-color()
|
|
3526
|
+
----------------------------------------
|
|
3527
|
+
Derive a color from a color triplet:
|
|
3528
|
+
[family], [grade], [variant]
|
|
3529
|
+
----------------------------------------
|
|
3530
|
+
*/
|
|
3531
|
+
/*
|
|
3532
|
+
----------------------------------------
|
|
3533
|
+
Luminance ranges
|
|
3534
|
+
----------------------------------------
|
|
3535
|
+
*/
|
|
3536
|
+
/*
|
|
3537
|
+
----------------------------------------
|
|
3538
|
+
calculate-grade()
|
|
3539
|
+
----------------------------------------
|
|
3540
|
+
Derive the grade equivalent any color,
|
|
3541
|
+
even non-token colors
|
|
3542
|
+
----------------------------------------
|
|
3543
|
+
*/
|
|
3544
|
+
/*
|
|
3545
|
+
----------------------------------------
|
|
3546
|
+
color-token-assignment()
|
|
3547
|
+
----------------------------------------
|
|
3548
|
+
Get the system token equivalent of any
|
|
3549
|
+
theme color token
|
|
3550
|
+
----------------------------------------
|
|
3551
|
+
*/
|
|
3552
|
+
/*
|
|
3553
|
+
----------------------------------------
|
|
3554
|
+
is-system-color-token()
|
|
3555
|
+
----------------------------------------
|
|
3556
|
+
Return whether a token is a system
|
|
3557
|
+
color token
|
|
3558
|
+
----------------------------------------
|
|
3559
|
+
*/
|
|
3560
|
+
/*
|
|
3561
|
+
----------------------------------------
|
|
3562
|
+
color()
|
|
3563
|
+
----------------------------------------
|
|
3564
|
+
Derive a color from a color shortcode
|
|
3565
|
+
----------------------------------------
|
|
3566
|
+
*/
|
|
3567
|
+
/*
|
|
3568
|
+
----------------------------------------
|
|
3569
|
+
color()
|
|
3570
|
+
----------------------------------------
|
|
3571
|
+
Derive a color from a color shortcode
|
|
3572
|
+
----------------------------------------
|
|
3573
|
+
*/
|
|
3574
|
+
/*
|
|
3575
|
+
----------------------------------------
|
|
3576
|
+
set-theme-color()
|
|
3577
|
+
----------------------------------------
|
|
3578
|
+
Derive a color from a system color token
|
|
3579
|
+
or a hex value
|
|
3580
|
+
----------------------------------------
|
|
3581
|
+
*/
|
|
3582
|
+
/*
|
|
3583
|
+
----------------------------------------
|
|
3584
|
+
is-theme-color-token()
|
|
3585
|
+
----------------------------------------
|
|
3586
|
+
Return whether a token is a theme
|
|
3587
|
+
color token
|
|
3588
|
+
----------------------------------------
|
|
3589
|
+
*/
|
|
3590
|
+
/*
|
|
3591
|
+
----------------------------------------
|
|
3592
|
+
color-token-family()
|
|
3593
|
+
----------------------------------------
|
|
3594
|
+
Returns the family of a color token.
|
|
3595
|
+
Returns: color-family
|
|
3596
|
+
color-token-family("accent-warm-vivid")
|
|
3597
|
+
> "accent-warm"
|
|
3598
|
+
color-token-family("red-50v")
|
|
3599
|
+
> "red"
|
|
3600
|
+
color-token-variant(("red", 50, "vivid"))
|
|
3601
|
+
> "red"
|
|
3602
|
+
----------------------------------------
|
|
3603
|
+
*/
|
|
3604
|
+
/*
|
|
3605
|
+
----------------------------------------
|
|
3606
|
+
decompose()
|
|
3607
|
+
----------------------------------------
|
|
3608
|
+
Convert a color token into into a list
|
|
3609
|
+
of form [family], [grade], [variant]
|
|
3610
|
+
Vivid variants return "vivid" as the
|
|
3611
|
+
variant.
|
|
3612
|
+
If neither grade nor variant exists,
|
|
3613
|
+
returns 'null'
|
|
3614
|
+
----------------------------------------
|
|
3615
|
+
*/
|
|
3616
|
+
/*
|
|
3617
|
+
----------------------------------------
|
|
3618
|
+
color-token-family()
|
|
3619
|
+
----------------------------------------
|
|
3620
|
+
Returns the family of a color token.
|
|
3621
|
+
Returns: color-family
|
|
3622
|
+
color-token-family("accent-warm-vivid")
|
|
3623
|
+
> "accent-warm"
|
|
3624
|
+
color-token-family("red-50v")
|
|
3625
|
+
> "red"
|
|
3626
|
+
color-token-variant(("red", 50, "vivid"))
|
|
3627
|
+
> "red"
|
|
3628
|
+
----------------------------------------
|
|
3629
|
+
*/
|
|
3630
|
+
/*
|
|
3631
|
+
----------------------------------------
|
|
3632
|
+
color-token-grade()
|
|
3633
|
+
----------------------------------------
|
|
3634
|
+
Returns the grade of a USWDS color token.
|
|
3635
|
+
Returns: color-grade
|
|
3636
|
+
color-token-grade("accent-warm")
|
|
3637
|
+
> "root"
|
|
3638
|
+
color-token-grade("accent-warm-vivid")
|
|
3639
|
+
> "root"
|
|
3640
|
+
color-token-grade("accent-warm-darker")
|
|
3641
|
+
> "darker"
|
|
3642
|
+
color-token-grade("red-50v")
|
|
3643
|
+
> 50
|
|
3644
|
+
color-token-variant(("red", 50, "vivid"))
|
|
3645
|
+
> 50
|
|
3646
|
+
----------------------------------------
|
|
3647
|
+
*/
|
|
3648
|
+
/*
|
|
3649
|
+
----------------------------------------
|
|
3650
|
+
color-token-family()
|
|
3651
|
+
----------------------------------------
|
|
3652
|
+
Returns the family of a color token.
|
|
3653
|
+
Returns: color-family
|
|
3654
|
+
color-token-family("accent-warm-vivid")
|
|
3655
|
+
> "accent-warm"
|
|
3656
|
+
color-token-family("red-50v")
|
|
3657
|
+
> "red"
|
|
3658
|
+
color-token-variant(("red", 50, "vivid"))
|
|
3659
|
+
> "red"
|
|
3660
|
+
----------------------------------------
|
|
3661
|
+
*/
|
|
3662
|
+
/*
|
|
3663
|
+
----------------------------------------
|
|
3664
|
+
color()
|
|
3665
|
+
----------------------------------------
|
|
3666
|
+
Derive a color from a color shortcode
|
|
3667
|
+
----------------------------------------
|
|
3668
|
+
*/
|
|
3669
|
+
/*
|
|
3670
|
+
----------------------------------------
|
|
3671
|
+
is-color-token()
|
|
3672
|
+
----------------------------------------
|
|
3673
|
+
Returns whether a given string is a
|
|
3674
|
+
USWDS color token.
|
|
3675
|
+
----------------------------------------
|
|
3676
|
+
*/
|
|
3677
|
+
/*
|
|
3678
|
+
----------------------------------------
|
|
3679
|
+
pow()
|
|
3680
|
+
----------------------------------------
|
|
3681
|
+
Raises a unitless number to the power
|
|
3682
|
+
of another unitless number
|
|
3683
|
+
Includes helper functions
|
|
3684
|
+
----------------------------------------
|
|
3685
|
+
*/
|
|
3686
|
+
/*
|
|
3687
|
+
----------------------------------------
|
|
3688
|
+
Helper functions
|
|
3689
|
+
----------------------------------------
|
|
3690
|
+
*/
|
|
3691
|
+
/* factorial()
|
|
3692
|
+
----------------------------------------
|
|
3693
|
+
*/
|
|
3694
|
+
/* summation()
|
|
3695
|
+
----------------------------------------
|
|
3696
|
+
*/
|
|
3697
|
+
/* exp-maclaurin()
|
|
3698
|
+
----------------------------------------
|
|
3699
|
+
*/
|
|
3700
|
+
/* ln()
|
|
3701
|
+
----------------------------------------
|
|
3702
|
+
*/
|
|
3703
|
+
/*
|
|
3704
|
+
----------------------------------------
|
|
3705
|
+
color-token-type()
|
|
3706
|
+
----------------------------------------
|
|
3707
|
+
Returns the type of a color token.
|
|
3708
|
+
Returns: "system" | "theme"
|
|
3709
|
+
----------------------------------------
|
|
3710
|
+
*/
|
|
3711
|
+
/*
|
|
3712
|
+
----------------------------------------
|
|
3713
|
+
color-token-variant()
|
|
3714
|
+
----------------------------------------
|
|
3715
|
+
Returns the variant of color token.
|
|
3716
|
+
Returns: "vivid" | false
|
|
3717
|
+
color-token-variant("accent-warm")
|
|
3718
|
+
> false
|
|
3719
|
+
color-token-variant("accent-warm-vivid")
|
|
3720
|
+
> "vivid"
|
|
3721
|
+
color-token-variant("red-50v")
|
|
3722
|
+
> "vivid"
|
|
3723
|
+
color-token-variant(("red", 50, "vivid"))
|
|
3724
|
+
> "vivid"
|
|
3725
|
+
----------------------------------------
|
|
3726
|
+
*/
|
|
3727
|
+
/*
|
|
3728
|
+
----------------------------------------
|
|
3729
|
+
magic-number()
|
|
3730
|
+
----------------------------------------
|
|
3731
|
+
Returns the magic number of two color
|
|
3732
|
+
grades. Takes numbers or color tokens.
|
|
3733
|
+
magic-number(50, 10)
|
|
3734
|
+
return: 40
|
|
3735
|
+
magic-number("red-50", "red-10")
|
|
3736
|
+
return: 40
|
|
3737
|
+
----------------------------------------
|
|
3738
|
+
*/
|
|
3739
|
+
/*
|
|
3740
|
+
----------------------------------------
|
|
3741
|
+
is-accessible-magic-number()
|
|
3742
|
+
----------------------------------------
|
|
3743
|
+
Returns whether two grades achieve
|
|
3744
|
+
specified target color contrast
|
|
3745
|
+
Returns: true | false
|
|
3746
|
+
is-accessible-magic-number(10, 50, "AA")
|
|
3747
|
+
> false
|
|
3748
|
+
is-accessible-magic-number(10, 60, "AA")
|
|
3749
|
+
> true
|
|
3750
|
+
----------------------------------------
|
|
3751
|
+
*/
|
|
3752
|
+
/*
|
|
3753
|
+
----------------------------------------
|
|
3754
|
+
wcag-magic-number()
|
|
3755
|
+
----------------------------------------
|
|
3756
|
+
Returns the magic number of a specific
|
|
3757
|
+
wcag grade:
|
|
3758
|
+
"AA"
|
|
3759
|
+
"AA-Large"
|
|
3760
|
+
"AAA"
|
|
3761
|
+
wcag-magic-number("AA")
|
|
3762
|
+
> 50
|
|
3763
|
+
----------------------------------------
|
|
3764
|
+
*/
|
|
3765
|
+
/*
|
|
3766
|
+
----------------------------------------
|
|
3767
|
+
get-link-tokens-from-bg()
|
|
3768
|
+
----------------------------------------
|
|
3769
|
+
Get accessible link colors for a given
|
|
3770
|
+
background color
|
|
3771
|
+
returns: link-token, hover-token
|
|
3772
|
+
get-link-tokens-from-bg(
|
|
3773
|
+
"black",
|
|
3774
|
+
"red-60",
|
|
3775
|
+
"red-10",
|
|
3776
|
+
"AA")
|
|
3777
|
+
> "red-10", "red-5"
|
|
3778
|
+
get-link-tokens-from-bg(
|
|
3779
|
+
"black",
|
|
3780
|
+
"red-60v",
|
|
3781
|
+
"red-10v",
|
|
3782
|
+
"AA-large")
|
|
3783
|
+
> "red-60v", "red-50v"
|
|
3784
|
+
get-link-tokens-from-bg(
|
|
3785
|
+
"black",
|
|
3786
|
+
"red-5v",
|
|
3787
|
+
"red-60v",
|
|
3788
|
+
"AA")
|
|
3789
|
+
> "red-5v", "white"
|
|
3790
|
+
get-link-tokens-from-bg(
|
|
3791
|
+
"black",
|
|
3792
|
+
"white",
|
|
3793
|
+
"red-60v",
|
|
3794
|
+
"AA")
|
|
3795
|
+
> "white", "white"
|
|
3796
|
+
----------------------------------------
|
|
3797
|
+
*/
|
|
3798
|
+
/*
|
|
3799
|
+
----------------------------------------
|
|
3800
|
+
next-token()
|
|
3801
|
+
----------------------------------------
|
|
3802
|
+
Returns next "darker" or "lighter" color
|
|
3803
|
+
token of the same token type and variant.
|
|
3804
|
+
Returns: color-token | false
|
|
3805
|
+
next-token("accent-warm", "lighter")
|
|
3806
|
+
> "accent-warm-light"
|
|
3807
|
+
next-token("gray-10", "lighter")
|
|
3808
|
+
> "gray-5"
|
|
3809
|
+
next-token("gray-5", "lighter")
|
|
3810
|
+
> "white"
|
|
3811
|
+
next-token("white", "lighter")
|
|
3812
|
+
> false
|
|
3813
|
+
next-token("red-50v", "darker")
|
|
3814
|
+
> "red-60v"
|
|
3815
|
+
next-token("red-50", "darker")
|
|
3816
|
+
> "red-60"
|
|
3817
|
+
next-token("red-80v", "darker")
|
|
3818
|
+
> "red-90"
|
|
3819
|
+
next-token("red-90", "darker")
|
|
3820
|
+
> "black"
|
|
3821
|
+
next-token("white", "darker")
|
|
3822
|
+
> "gray-5"
|
|
3823
|
+
next-token("black", "lighter")
|
|
3824
|
+
> "gray-90"
|
|
3825
|
+
----------------------------------------
|
|
3826
|
+
*/
|
|
3827
|
+
/*
|
|
3828
|
+
----------------------------------------
|
|
3829
|
+
color()
|
|
3830
|
+
----------------------------------------
|
|
3831
|
+
Derive a color from a color shortcode
|
|
3832
|
+
----------------------------------------
|
|
3833
|
+
*/
|
|
3834
|
+
/*
|
|
3835
|
+
----------------------------------------
|
|
3836
|
+
test-colors()
|
|
3837
|
+
----------------------------------------
|
|
3838
|
+
Check to see if all system colors
|
|
3839
|
+
fall between the proper relative
|
|
3840
|
+
luminance range for their grade.
|
|
3841
|
+
Has a couple quirks, as the luminance()
|
|
3842
|
+
function returns slightly different
|
|
3843
|
+
results than expected.
|
|
3844
|
+
----------------------------------------
|
|
3845
|
+
*/
|
|
3846
|
+
/*
|
|
3847
|
+
----------------------------------------
|
|
3848
|
+
Line height
|
|
3849
|
+
----------------------------------------
|
|
3850
|
+
*/
|
|
3851
|
+
/*
|
|
3852
|
+
----------------------------------------
|
|
3853
|
+
Measure
|
|
3854
|
+
----------------------------------------
|
|
3855
|
+
*/
|
|
3856
|
+
/*
|
|
3857
|
+
----------------------------------------
|
|
3858
|
+
spacing-multiple()
|
|
3859
|
+
----------------------------------------
|
|
3860
|
+
Converts a spacing unit multiple into
|
|
3861
|
+
the desired final units (currently rem)
|
|
3862
|
+
----------------------------------------
|
|
3863
|
+
*/
|
|
3864
|
+
/*
|
|
3865
|
+
----------------------------------------
|
|
3866
|
+
cap-height()
|
|
3867
|
+
----------------------------------------
|
|
3868
|
+
Get the cap height of a valid typeface
|
|
3869
|
+
----------------------------------------
|
|
3870
|
+
*/
|
|
3871
|
+
/*
|
|
3872
|
+
----------------------------------------
|
|
3873
|
+
validate-typeface-token()
|
|
3874
|
+
----------------------------------------
|
|
3875
|
+
Check to see if a typeface-token exists.
|
|
3876
|
+
Throw an error if a passed token does
|
|
3877
|
+
not exist in the typeface-token map.
|
|
3878
|
+
----------------------------------------
|
|
3879
|
+
*/
|
|
3880
|
+
/*
|
|
3881
|
+
----------------------------------------
|
|
3882
|
+
convert-to-font-type()
|
|
3883
|
+
----------------------------------------
|
|
3884
|
+
Converts a font-role token into a
|
|
3885
|
+
font-type token. Leaves font-type tokens
|
|
3886
|
+
unchanged.
|
|
3887
|
+
----------------------------------------
|
|
3888
|
+
*/
|
|
3889
|
+
/*
|
|
3890
|
+
----------------------------------------
|
|
3891
|
+
font-sources()
|
|
3892
|
+
----------------------------------------
|
|
3893
|
+
Outputs a list of font sources used in
|
|
3894
|
+
a @font-face declaration.
|
|
3895
|
+
|
|
3896
|
+
$theme-font-browser-compatibility: true - output woff2, woff, ttf
|
|
3897
|
+
$theme-font-browser-compatibility: false - output woff2
|
|
3898
|
+
|
|
3899
|
+
@param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]
|
|
3900
|
+
@output: string
|
|
3901
|
+
|
|
3902
|
+
filetypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)
|
|
3903
|
+
----------------------------------------
|
|
3904
|
+
*/
|
|
3905
|
+
/*
|
|
3906
|
+
----------------------------------------
|
|
3907
|
+
Project fonts
|
|
3908
|
+
----------------------------------------
|
|
3909
|
+
Collects font settings in a map for
|
|
3910
|
+
looping.
|
|
3911
|
+
----------------------------------------
|
|
3912
|
+
*/
|
|
3913
|
+
/*
|
|
3914
|
+
----------------------------------------
|
|
3915
|
+
get-font-stack()
|
|
3916
|
+
----------------------------------------
|
|
3917
|
+
Get a font stack from a style- or
|
|
3918
|
+
role-based font token.
|
|
3919
|
+
----------------------------------------
|
|
3920
|
+
*/
|
|
3921
|
+
/*
|
|
3922
|
+
----------------------------------------
|
|
3923
|
+
get-typeface-token()
|
|
3924
|
+
----------------------------------------
|
|
3925
|
+
Get a typeface token from a font-type or
|
|
3926
|
+
font-role token.
|
|
3927
|
+
----------------------------------------
|
|
3928
|
+
*/
|
|
3929
|
+
/*
|
|
3930
|
+
----------------------------------------
|
|
3931
|
+
px-to-rem()
|
|
3932
|
+
----------------------------------------
|
|
3933
|
+
Converts a value in px to a value in rem
|
|
3934
|
+
----------------------------------------
|
|
3935
|
+
*/
|
|
3936
|
+
/*
|
|
3937
|
+
----------------------------------------
|
|
3938
|
+
rem-to-px()
|
|
3939
|
+
----------------------------------------
|
|
3940
|
+
Converts a value in rem to a value in px
|
|
3941
|
+
----------------------------------------
|
|
3942
|
+
*/
|
|
3943
|
+
/*
|
|
3944
|
+
----------------------------------------
|
|
3945
|
+
rem-to-user-em()
|
|
3946
|
+
----------------------------------------
|
|
3947
|
+
Converts a value in rem to a value in
|
|
3948
|
+
[user-settings] em for use in media
|
|
3949
|
+
queries
|
|
3950
|
+
----------------------------------------
|
|
3951
|
+
*/
|
|
3952
|
+
/*
|
|
3953
|
+
----------------------------------------
|
|
3954
|
+
units()
|
|
3955
|
+
----------------------------------------
|
|
3956
|
+
Converts a spacing unit into
|
|
3957
|
+
the desired final units (currently rem)
|
|
3958
|
+
----------------------------------------
|
|
3959
|
+
*/
|
|
3960
|
+
/*
|
|
3961
|
+
----------------------------------------
|
|
3962
|
+
number-to-token()
|
|
3963
|
+
----------------------------------------
|
|
3964
|
+
Converts an integer or numeric value
|
|
3965
|
+
into a system value
|
|
3966
|
+
|
|
3967
|
+
Ex: 0.5 --> '05'
|
|
3968
|
+
-1px --> 'neg-1px'
|
|
3969
|
+
----------------------------------------
|
|
3970
|
+
*/
|
|
3971
|
+
/*
|
|
3972
|
+
----------------------------------------
|
|
3973
|
+
normalize-type-scale()
|
|
3974
|
+
----------------------------------------
|
|
3975
|
+
Normalizes a specific face's optical size
|
|
3976
|
+
to a set target
|
|
3977
|
+
----------------------------------------
|
|
3978
|
+
*/
|
|
3979
|
+
/*
|
|
3980
|
+
----------------------------------------
|
|
3981
|
+
system-type-scale()
|
|
3982
|
+
----------------------------------------
|
|
3983
|
+
Get a value from the system type scale
|
|
3984
|
+
----------------------------------------
|
|
3985
|
+
*/
|
|
3986
|
+
/*
|
|
3987
|
+
----------------------------------------
|
|
3988
|
+
columns()
|
|
3989
|
+
----------------------------------------
|
|
3990
|
+
outputs a grid-col number based on
|
|
3991
|
+
the number of desired columns in the
|
|
3992
|
+
12-column grid
|
|
3993
|
+
|
|
3994
|
+
Ex: columns(2) --> 6
|
|
3995
|
+
grid-col(columns(2))
|
|
3996
|
+
----------------------------------------
|
|
3997
|
+
*/
|
|
3998
|
+
/*
|
|
3999
|
+
----------------------------------------
|
|
4000
|
+
USWDS Properties
|
|
4001
|
+
----------------------------------------
|
|
4002
|
+
*/
|
|
4003
|
+
/*
|
|
4004
|
+
----------------------------------------
|
|
4005
|
+
get-uswds-value()
|
|
4006
|
+
----------------------------------------
|
|
4007
|
+
Finds and outputs a value from the
|
|
4008
|
+
USWDS standard values.
|
|
4009
|
+
|
|
4010
|
+
Used to build other standard utility
|
|
4011
|
+
functions and mixins.
|
|
4012
|
+
----------------------------------------
|
|
4013
|
+
*/
|
|
4014
|
+
/*
|
|
4015
|
+
----------------------------------------
|
|
4016
|
+
get-standard-values()
|
|
4017
|
+
----------------------------------------
|
|
4018
|
+
Gets a map of USWDS standard values
|
|
4019
|
+
for a property
|
|
4020
|
+
----------------------------------------
|
|
4021
|
+
*/
|
|
4022
|
+
/*
|
|
4023
|
+
----------------------------------------
|
|
4024
|
+
ns()
|
|
4025
|
+
----------------------------------------
|
|
4026
|
+
Add a namesspace of $type if that
|
|
4027
|
+
namespace is set to output
|
|
4028
|
+
----------------------------------------
|
|
4029
|
+
*/
|
|
4030
|
+
/*
|
|
4031
|
+
----------------------------------------
|
|
4032
|
+
border-radius()
|
|
4033
|
+
----------------------------------------
|
|
4034
|
+
Get a border-radius from the system
|
|
4035
|
+
border-radii
|
|
4036
|
+
----------------------------------------
|
|
4037
|
+
*/
|
|
4038
|
+
/*
|
|
4039
|
+
----------------------------------------
|
|
4040
|
+
font-weight()
|
|
4041
|
+
fw()
|
|
4042
|
+
----------------------------------------
|
|
4043
|
+
Get a font-weight value from the
|
|
4044
|
+
system font-weight
|
|
4045
|
+
----------------------------------------
|
|
4046
|
+
*/
|
|
4047
|
+
/*
|
|
4048
|
+
----------------------------------------
|
|
4049
|
+
feature()
|
|
4050
|
+
----------------------------------------
|
|
4051
|
+
Gets a valid USWDS font feature setting
|
|
4052
|
+
----------------------------------------
|
|
4053
|
+
*/
|
|
4054
|
+
/*
|
|
4055
|
+
----------------------------------------
|
|
4056
|
+
flex()
|
|
4057
|
+
----------------------------------------
|
|
4058
|
+
Gets a valid USWDS flex value
|
|
4059
|
+
----------------------------------------
|
|
4060
|
+
*/
|
|
4061
|
+
/*
|
|
4062
|
+
----------------------------------------
|
|
4063
|
+
font-family()
|
|
4064
|
+
family()
|
|
4065
|
+
----------------------------------------
|
|
4066
|
+
Get a font-family stack from a
|
|
4067
|
+
role-based or type-based font family
|
|
4068
|
+
----------------------------------------
|
|
4069
|
+
*/
|
|
4070
|
+
/*
|
|
4071
|
+
----------------------------------------
|
|
4072
|
+
letter-spacing()
|
|
4073
|
+
ls()
|
|
4074
|
+
----------------------------------------
|
|
4075
|
+
Get a letter-spacing value from the
|
|
4076
|
+
system letter-spacing
|
|
4077
|
+
----------------------------------------
|
|
4078
|
+
*/
|
|
4079
|
+
/*
|
|
4080
|
+
----------------------------------------
|
|
4081
|
+
measure()
|
|
4082
|
+
----------------------------------------
|
|
4083
|
+
Gets a valid USWDS reading line length
|
|
4084
|
+
----------------------------------------
|
|
4085
|
+
*/
|
|
4086
|
+
/*
|
|
4087
|
+
----------------------------------------
|
|
4088
|
+
opacity()
|
|
4089
|
+
----------------------------------------
|
|
4090
|
+
Get an opacity from the system
|
|
4091
|
+
opacities
|
|
4092
|
+
----------------------------------------
|
|
4093
|
+
*/
|
|
4094
|
+
/*
|
|
4095
|
+
----------------------------------------
|
|
4096
|
+
order()
|
|
4097
|
+
----------------------------------------
|
|
4098
|
+
Get an order value from the
|
|
4099
|
+
system orders
|
|
4100
|
+
----------------------------------------
|
|
4101
|
+
*/
|
|
4102
|
+
/*
|
|
4103
|
+
----------------------------------------
|
|
4104
|
+
radius()
|
|
4105
|
+
----------------------------------------
|
|
4106
|
+
Get a border-radius value from the
|
|
4107
|
+
system letter-spacing
|
|
4108
|
+
----------------------------------------
|
|
4109
|
+
*/
|
|
4110
|
+
/*
|
|
4111
|
+
----------------------------------------
|
|
4112
|
+
font-size()
|
|
4113
|
+
----------------------------------------
|
|
4114
|
+
Get type scale value from a [family] and
|
|
4115
|
+
[scale]
|
|
4116
|
+
----------------------------------------
|
|
4117
|
+
*/
|
|
4118
|
+
/*
|
|
4119
|
+
----------------------------------------
|
|
4120
|
+
z-index()
|
|
4121
|
+
z()
|
|
4122
|
+
----------------------------------------
|
|
4123
|
+
Get a z-index value from the
|
|
4124
|
+
system z-index
|
|
4125
|
+
----------------------------------------
|
|
4126
|
+
*/
|
|
4127
|
+
/*
|
|
4128
|
+
----------------------------------------
|
|
4129
|
+
utility-font()
|
|
4130
|
+
----------------------------------------
|
|
4131
|
+
Get a normalized font-size in rem from
|
|
4132
|
+
a family and a type size in either
|
|
4133
|
+
system scale or project scale
|
|
4134
|
+
----------------------------------------
|
|
4135
|
+
Not the public-facing function.
|
|
4136
|
+
Used for building the utilities and
|
|
4137
|
+
withholds certain errors.
|
|
4138
|
+
----------------------------------------
|
|
4139
|
+
*/
|
|
4140
|
+
/*
|
|
4141
|
+
----------------------------------------
|
|
4142
|
+
family()
|
|
4143
|
+
----------------------------------------
|
|
4144
|
+
Get a font-family stack
|
|
4145
|
+
----------------------------------------
|
|
4146
|
+
*/
|
|
4147
|
+
/*
|
|
4148
|
+
----------------------------------------
|
|
4149
|
+
size()
|
|
4150
|
+
----------------------------------------
|
|
4151
|
+
Get a normalized font-size in rem from
|
|
4152
|
+
a family and a type size in either
|
|
4153
|
+
system scale or project scale
|
|
4154
|
+
----------------------------------------
|
|
4155
|
+
*/
|
|
4156
|
+
/*
|
|
4157
|
+
----------------------------------------
|
|
4158
|
+
font()
|
|
4159
|
+
----------------------------------------
|
|
4160
|
+
Get a font-family stack
|
|
4161
|
+
AND
|
|
4162
|
+
Get a normalized font-size in rem from
|
|
4163
|
+
a family and a type size in either
|
|
4164
|
+
system scale or project scale
|
|
4165
|
+
----------------------------------------
|
|
4166
|
+
*/
|
|
4167
|
+
/*
|
|
4168
|
+
----------------------------------------
|
|
4169
|
+
typeset()
|
|
4170
|
+
----------------------------------------
|
|
4171
|
+
Sets:
|
|
4172
|
+
- family
|
|
4173
|
+
- size
|
|
4174
|
+
- line-height
|
|
4175
|
+
----------------------------------------
|
|
4176
|
+
*/
|
|
4177
|
+
/**
|
|
4178
|
+
Normalization for Source Sans Pro typeface.
|
|
4179
|
+
|
|
4180
|
+
Typefaces vary in optical size. This means that at any
|
|
4181
|
+
specific pixel value, an optically small typeface like
|
|
4182
|
+
Source Sans Pro will appear smaller than an optically
|
|
4183
|
+
large typeface like Merriweather.
|
|
4184
|
+
|
|
4185
|
+
The `typeset()` mixin will calculate the appropriate
|
|
4186
|
+
font-size for a given typeface. The `ui` value will
|
|
4187
|
+
use the default value for $theme-body-font-family.
|
|
4188
|
+
|
|
4189
|
+
font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
|
|
4190
|
+
font-size: 1.06rem;
|
|
4191
|
+
line-height: 1.5;
|
|
4192
|
+
|
|
4193
|
+
https://designsystem.digital.gov/design-tokens/typesetting/overview/
|
|
4194
|
+
*/
|
|
4195
|
+
p, ol, ul, li, dl, dt, dd, form, label {
|
|
4196
|
+
font-family: Source Sans Pro Web, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;
|
|
4197
|
+
font-size: 1.06rem;
|
|
4198
|
+
line-height: 1.5;
|
|
4199
|
+
}
|
|
4200
|
+
|
|
4201
|
+
/**
|
|
4202
|
+
USWDS paragraph style
|
|
4203
|
+
|
|
4204
|
+
p {
|
|
4205
|
+
line-height: 1.5;
|
|
4206
|
+
max-width: 68ex;
|
|
4207
|
+
margin-bottom: 0;
|
|
4208
|
+
margin-top: 0;
|
|
4209
|
+
}
|
|
4210
|
+
*/
|
|
4211
|
+
p {
|
|
4212
|
+
line-height: 1.5;
|
|
4213
|
+
max-width: 68ex;
|
|
4214
|
+
margin-bottom: 0;
|
|
4215
|
+
margin-top: 0;
|
|
4216
|
+
}
|
|
4217
|
+
* + p {
|
|
4218
|
+
margin-top: 1em;
|
|
4219
|
+
}
|
|
4220
|
+
p + * {
|
|
4221
|
+
margin-top: 1em;
|
|
4222
|
+
}
|
|
4223
|
+
|
|
4224
|
+
/*# sourceMappingURL=uswds-typography.css.map */
|