@department-of-veterans-affairs/css-library 0.13.0 → 0.13.1-rc2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/stylesheets/_mixins.scss +2 -3
  2. package/dist/stylesheets/base/fonts.css +1 -1589
  3. package/dist/stylesheets/base/headings.css +1 -1523
  4. package/dist/stylesheets/base/utils.css +1 -137
  5. package/dist/stylesheets/base/va.css +1 -1843
  6. package/dist/stylesheets/core.css +1 -6033
  7. package/dist/stylesheets/formation-overrides/core/base.css +1 -64
  8. package/dist/stylesheets/formation-overrides/core/fonts.css +1 -46
  9. package/dist/stylesheets/formation-overrides/elements/buttons.css +1 -562
  10. package/dist/stylesheets/formation-overrides/elements/inputs.css +1 -384
  11. package/dist/stylesheets/formation-overrides/elements/labels.css +1 -28
  12. package/dist/stylesheets/formation-overrides/elements/lists.css +1 -57
  13. package/dist/stylesheets/formation-overrides/elements/table.css +1 -78
  14. package/dist/stylesheets/formation-overrides/elements/typography.css +1 -312
  15. package/dist/stylesheets/mobile-typography.css +1 -13
  16. package/dist/stylesheets/modules/m-action-link.css +1 -1447
  17. package/dist/stylesheets/modules/m-additional-info.css +1 -39
  18. package/dist/stylesheets/modules/m-alert.css +1 -248
  19. package/dist/stylesheets/modules/m-breadcrumbs.css +1 -96
  20. package/dist/stylesheets/modules/m-button.css +1 -153
  21. package/dist/stylesheets/modules/m-dropdown.css +1 -47
  22. package/dist/stylesheets/modules/m-emergency-banner.css +1 -33
  23. package/dist/stylesheets/modules/m-external-link.css +1 -14
  24. package/dist/stylesheets/modules/m-form-elements.css +1 -231
  25. package/dist/stylesheets/modules/m-form-process.css +1 -219
  26. package/dist/stylesheets/modules/m-homepage-hero.css +1 -76
  27. package/dist/stylesheets/modules/m-hub-page-link-list.css +1 -40
  28. package/dist/stylesheets/modules/m-loading-indicator.css +1 -41
  29. package/dist/stylesheets/modules/m-maintenance-banner.css +1 -33
  30. package/dist/stylesheets/modules/m-megamenu.css +1 -370
  31. package/dist/stylesheets/modules/m-modal.css +1 -117
  32. package/dist/stylesheets/modules/m-nav-linklist.css +1 -49
  33. package/dist/stylesheets/modules/m-nav-sidebar.css +1 -349
  34. package/dist/stylesheets/modules/m-omb-info.css +0 -5
  35. package/dist/stylesheets/modules/m-overlay.css +1 -72
  36. package/dist/stylesheets/modules/m-print.css +1 -27
  37. package/dist/stylesheets/modules/m-process-list.css +1 -162
  38. package/dist/stylesheets/modules/va-pagination.css +1 -90
  39. package/dist/stylesheets/modules/va-tabs.css +1 -53
  40. package/dist/stylesheets/shame.css +1 -266
  41. package/dist/stylesheets/uswds-typography.css +1 -4201
  42. package/dist/stylesheets/utilities.css +1 -15539
  43. package/dist/tokens/css/variables.css +10 -3
  44. package/dist/tokens/json/variables.json +157 -4
  45. package/dist/tokens/scss/variables.scss +10 -3
  46. package/package.json +3 -3
@@ -1,1523 +1 @@
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
- advanced-color()
533
- ----------------------------------------
534
- Derive a color from a color triplet:
535
- [family], [grade], [variant]
536
- ----------------------------------------
537
- */
538
- /*
539
- ----------------------------------------
540
- append-important()
541
- ----------------------------------------
542
- Append `!important` to a list
543
- ----------------------------------------
544
- */
545
- /*
546
- ----------------------------------------
547
- get-last()
548
- ----------------------------------------
549
- Return the last item of a list,
550
- Return null if the value is null
551
- ----------------------------------------
552
- */
553
- /*
554
- ----------------------------------------
555
- de-list()
556
- ----------------------------------------
557
- Transform a one-element list or arglist
558
- into that single element.
559
- ----------------------------------------
560
- (1) => 1
561
- ((1)) => (1)
562
- ----------------------------------------
563
- */
564
- /*
565
- ----------------------------------------
566
- error-not-token()
567
- ----------------------------------------
568
- Returns a common not-a-token error.
569
- ----------------------------------------
570
- */
571
- /*
572
- ----------------------------------------
573
- uswds-error()
574
- ----------------------------------------
575
- Allow the system to pass an error as text
576
- to test error states in unit testing
577
- ----------------------------------------
578
- */
579
- /*
580
- ----------------------------------------
581
- get-default()
582
- ----------------------------------------
583
- Returns the default value from a map
584
- of project defaults
585
- get-default("bg-color")
586
- > $theme-body-background-color
587
- ----------------------------------------
588
- */
589
- /*
590
- ----------------------------------------
591
- has-important()
592
- ----------------------------------------
593
- Check to see if `!important` is
594
- being passed in a mixin's props
595
- ----------------------------------------
596
- */
597
- /*
598
- ----------------------------------------
599
- map-collect()
600
- ----------------------------------------
601
- Collect multiple maps into a single
602
- large map
603
- source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe
604
- ----------------------------------------
605
- */
606
- /*
607
- ----------------------------------------
608
- map-deep-get()
609
- ----------------------------------------
610
- @author Hugo Giraudel
611
- @access public
612
- @param {Map} $map - Map
613
- @param {Arglist} $keys - Key chain
614
- @return {*} - Desired value
615
- ----------------------------------------
616
- */
617
- /*
618
- ----------------------------------------
619
- multi-cat()
620
- ----------------------------------------
621
- Concatenate two lists
622
- ----------------------------------------
623
- */
624
- /*
625
- ----------------------------------------
626
- remove()
627
- ----------------------------------------
628
- Remove a value from a list
629
- ----------------------------------------
630
- */
631
- /*
632
- ----------------------------------------
633
- smart-quote()
634
- ----------------------------------------
635
- Quotes strings
636
- Inspects `px`, `xs`, and `xl` numbers
637
- Leaves bools as is
638
- ----------------------------------------
639
- */
640
- /*
641
- ----------------------------------------
642
- str-replace()
643
- ----------------------------------------
644
- Replace any substring with another
645
- string
646
- ----------------------------------------
647
- */
648
- /*
649
- ----------------------------------------
650
- str-split()
651
- ----------------------------------------
652
- Split a string at a given separator
653
- and convert into a list of substrings
654
- ----------------------------------------
655
- */
656
- /*
657
- ----------------------------------------
658
- strip-unit()
659
- ----------------------------------------
660
- Remove the unit of a length
661
- @author Hugo Giraudel
662
- @param {Number} $number - Number to remove unit from
663
- @return {Number} - Unitless number
664
- ----------------------------------------
665
- */
666
- /*
667
- ----------------------------------------
668
- base-to-map()
669
- @TODO: Deprecate and delete
670
- ----------------------------------------
671
- Convert a single base to a USWDS
672
- value map.
673
-
674
- Candidate for deprecation if we remove
675
- isReadable
676
- ----------------------------------------
677
- */
678
- /*
679
- ----------------------------------------
680
- to-number()
681
- ----------------------------------------
682
- Casts a string into a number
683
- ----------------------------------------
684
- @param {String | Number} $value - Value to be parsed
685
- @return {Number}
686
- ----------------------------------------
687
- */
688
- /*
689
- ----------------------------------------
690
- unpack()
691
- ----------------------------------------
692
- Create lists of single items from lists
693
- of lists.
694
- ----------------------------------------
695
- (1, (2.1, 2.2), 3) -->
696
- (1, 2.1, 2.2, 3)
697
- ----------------------------------------
698
- */
699
- /*
700
- ----------------------------------------
701
- advanced-color()
702
- ----------------------------------------
703
- Derive a color from a color triplet:
704
- [family], [grade], [variant]
705
- ----------------------------------------
706
- */
707
- /*
708
- ----------------------------------------
709
- get-system-color()
710
- ----------------------------------------
711
- Derive a system color from its
712
- family, value, and vivid or a passed
713
- variable that is, itself, a list
714
- ----------------------------------------
715
- */
716
- /*
717
- ----------------------------------------
718
- advanced-color()
719
- ----------------------------------------
720
- Derive a color from a color triplet:
721
- [family], [grade], [variant]
722
- ----------------------------------------
723
- */
724
- /*
725
- ----------------------------------------
726
- calculate-grade()
727
- ----------------------------------------
728
- Derive the grade equivalent any color,
729
- even non-token colors
730
- ----------------------------------------
731
- */
732
- /*
733
- ----------------------------------------
734
- Luminance ranges
735
- ----------------------------------------
736
- */
737
- /*
738
- ----------------------------------------
739
- color-token-assignment()
740
- ----------------------------------------
741
- Get the system token equivalent of any
742
- theme color token
743
- ----------------------------------------
744
- */
745
- /*
746
- ----------------------------------------
747
- is-system-color-token()
748
- ----------------------------------------
749
- Return whether a token is a system
750
- color token
751
- ----------------------------------------
752
- */
753
- /*
754
- ----------------------------------------
755
- is-theme-color-token()
756
- ----------------------------------------
757
- Return whether a token is a theme
758
- color token
759
- ----------------------------------------
760
- */
761
- /*
762
- ----------------------------------------
763
- is-system-color-token()
764
- ----------------------------------------
765
- Return whether a token is a system
766
- color token
767
- ----------------------------------------
768
- */
769
- /*
770
- ----------------------------------------
771
- set-theme-color()
772
- ----------------------------------------
773
- Derive a color from a system color token
774
- or a hex value
775
- ----------------------------------------
776
- */
777
- /*
778
- ----------------------------------------
779
- color-token-family()
780
- ----------------------------------------
781
- Returns the family of a color token.
782
- Returns: color-family
783
- color-token-family("accent-warm-vivid")
784
- > "accent-warm"
785
- color-token-family("red-50v")
786
- > "red"
787
- color-token-variant(("red", 50, "vivid"))
788
- > "red"
789
- ----------------------------------------
790
- */
791
- /*
792
- ----------------------------------------
793
- decompose()
794
- ----------------------------------------
795
- Convert a color token into into a list
796
- of form [family], [grade], [variant]
797
- Vivid variants return "vivid" as the
798
- variant.
799
- If neither grade nor variant exists,
800
- returns 'null'
801
- ----------------------------------------
802
- */
803
- /*
804
- ----------------------------------------
805
- color-token-family()
806
- ----------------------------------------
807
- Returns the family of a color token.
808
- Returns: color-family
809
- color-token-family("accent-warm-vivid")
810
- > "accent-warm"
811
- color-token-family("red-50v")
812
- > "red"
813
- color-token-variant(("red", 50, "vivid"))
814
- > "red"
815
- ----------------------------------------
816
- */
817
- /*
818
- ----------------------------------------
819
- color-token-grade()
820
- ----------------------------------------
821
- Returns the grade of a USWDS color token.
822
- Returns: color-grade
823
- color-token-grade("accent-warm")
824
- > "root"
825
- color-token-grade("accent-warm-vivid")
826
- > "root"
827
- color-token-grade("accent-warm-darker")
828
- > "darker"
829
- color-token-grade("red-50v")
830
- > 50
831
- color-token-variant(("red", 50, "vivid"))
832
- > 50
833
- ----------------------------------------
834
- */
835
- /*
836
- ----------------------------------------
837
- color-token-family()
838
- ----------------------------------------
839
- Returns the family of a color token.
840
- Returns: color-family
841
- color-token-family("accent-warm-vivid")
842
- > "accent-warm"
843
- color-token-family("red-50v")
844
- > "red"
845
- color-token-variant(("red", 50, "vivid"))
846
- > "red"
847
- ----------------------------------------
848
- */
849
- /*
850
- ----------------------------------------
851
- is-color-token()
852
- ----------------------------------------
853
- Returns whether a given string is a
854
- USWDS color token.
855
- ----------------------------------------
856
- */
857
- /*
858
- ----------------------------------------
859
- is-system-color-token()
860
- ----------------------------------------
861
- Return whether a token is a system
862
- color token
863
- ----------------------------------------
864
- */
865
- /*
866
- ----------------------------------------
867
- is-theme-color-token()
868
- ----------------------------------------
869
- Return whether a token is a theme
870
- color token
871
- ----------------------------------------
872
- */
873
- /*
874
- ----------------------------------------
875
- pow()
876
- ----------------------------------------
877
- Raises a unitless number to the power
878
- of another unitless number
879
- Includes helper functions
880
- ----------------------------------------
881
- */
882
- /*
883
- ----------------------------------------
884
- Helper functions
885
- ----------------------------------------
886
- */
887
- /* factorial()
888
- ----------------------------------------
889
- */
890
- /* summation()
891
- ----------------------------------------
892
- */
893
- /* exp-maclaurin()
894
- ----------------------------------------
895
- */
896
- /* ln()
897
- ----------------------------------------
898
- */
899
- /*
900
- ----------------------------------------
901
- color-token-type()
902
- ----------------------------------------
903
- Returns the type of a color token.
904
- Returns: "system" | "theme"
905
- ----------------------------------------
906
- */
907
- /*
908
- ----------------------------------------
909
- color-token-variant()
910
- ----------------------------------------
911
- Returns the variant of color token.
912
- Returns: "vivid" | false
913
- color-token-variant("accent-warm")
914
- > false
915
- color-token-variant("accent-warm-vivid")
916
- > "vivid"
917
- color-token-variant("red-50v")
918
- > "vivid"
919
- color-token-variant(("red", 50, "vivid"))
920
- > "vivid"
921
- ----------------------------------------
922
- */
923
- /*
924
- ----------------------------------------
925
- magic-number()
926
- ----------------------------------------
927
- Returns the magic number of two color
928
- grades. Takes numbers or color tokens.
929
- magic-number(50, 10)
930
- return: 40
931
- magic-number("red-50", "red-10")
932
- return: 40
933
- ----------------------------------------
934
- */
935
- /*
936
- ----------------------------------------
937
- is-accessible-magic-number()
938
- ----------------------------------------
939
- Returns whether two grades achieve
940
- specified target color contrast
941
- Returns: true | false
942
- is-accessible-magic-number(10, 50, "AA")
943
- > false
944
- is-accessible-magic-number(10, 60, "AA")
945
- > true
946
- ----------------------------------------
947
- */
948
- /*
949
- ----------------------------------------
950
- wcag-magic-number()
951
- ----------------------------------------
952
- Returns the magic number of a specific
953
- wcag grade:
954
- "AA"
955
- "AA-Large"
956
- "AAA"
957
- wcag-magic-number("AA")
958
- > 50
959
- ----------------------------------------
960
- */
961
- /*
962
- ----------------------------------------
963
- get-link-tokens-from-bg()
964
- ----------------------------------------
965
- Get accessible link colors for a given
966
- background color
967
- returns: link-token, hover-token
968
- get-link-tokens-from-bg(
969
- "black",
970
- "red-60",
971
- "red-10",
972
- "AA")
973
- > "red-10", "red-5"
974
- get-link-tokens-from-bg(
975
- "black",
976
- "red-60v",
977
- "red-10v",
978
- "AA-large")
979
- > "red-60v", "red-50v"
980
- get-link-tokens-from-bg(
981
- "black",
982
- "red-5v",
983
- "red-60v",
984
- "AA")
985
- > "red-5v", "white"
986
- get-link-tokens-from-bg(
987
- "black",
988
- "white",
989
- "red-60v",
990
- "AA")
991
- > "white", "white"
992
- ----------------------------------------
993
- */
994
- /*
995
- ----------------------------------------
996
- next-token()
997
- ----------------------------------------
998
- Returns next "darker" or "lighter" color
999
- token of the same token type and variant.
1000
- Returns: color-token | false
1001
- next-token("accent-warm", "lighter")
1002
- > "accent-warm-light"
1003
- next-token("gray-10", "lighter")
1004
- > "gray-5"
1005
- next-token("gray-5", "lighter")
1006
- > "white"
1007
- next-token("white", "lighter")
1008
- > false
1009
- next-token("red-50v", "darker")
1010
- > "red-60v"
1011
- next-token("red-50", "darker")
1012
- > "red-60"
1013
- next-token("red-80v", "darker")
1014
- > "red-90"
1015
- next-token("red-90", "darker")
1016
- > "black"
1017
- next-token("white", "darker")
1018
- > "gray-5"
1019
- next-token("black", "lighter")
1020
- > "gray-90"
1021
- ----------------------------------------
1022
- */
1023
- /*
1024
- ----------------------------------------
1025
- color()
1026
- ----------------------------------------
1027
- Derive a color from a color shortcode
1028
- ----------------------------------------
1029
- */
1030
- /*
1031
- ----------------------------------------
1032
- test-colors()
1033
- ----------------------------------------
1034
- Check to see if all system colors
1035
- fall between the proper relative
1036
- luminance range for their grade.
1037
- Has a couple quirks, as the luminance()
1038
- function returns slightly different
1039
- results than expected.
1040
- ----------------------------------------
1041
- */
1042
- /*
1043
- ----------------------------------------
1044
- cap-height()
1045
- ----------------------------------------
1046
- Get the cap height of a valid typeface
1047
- ----------------------------------------
1048
- */
1049
- /*
1050
- ----------------------------------------
1051
- Line height
1052
- ----------------------------------------
1053
- */
1054
- /*
1055
- ----------------------------------------
1056
- Measure
1057
- ----------------------------------------
1058
- */
1059
- /*
1060
- ----------------------------------------
1061
- spacing-multiple()
1062
- ----------------------------------------
1063
- Converts a spacing unit multiple into
1064
- the desired final units (currently rem)
1065
- ----------------------------------------
1066
- */
1067
- /*
1068
- ----------------------------------------
1069
- cap-height()
1070
- ----------------------------------------
1071
- Get the cap height of a valid typeface
1072
- ----------------------------------------
1073
- */
1074
- /*
1075
- ----------------------------------------
1076
- validate-typeface-token()
1077
- ----------------------------------------
1078
- Check to see if a typeface-token exists.
1079
- Throw an error if a passed token does
1080
- not exist in the typeface-token map.
1081
- ----------------------------------------
1082
- */
1083
- /*
1084
- ----------------------------------------
1085
- convert-to-font-type()
1086
- ----------------------------------------
1087
- Converts a font-role token into a
1088
- font-type token. Leaves font-type tokens
1089
- unchanged.
1090
- ----------------------------------------
1091
- */
1092
- /*
1093
- ----------------------------------------
1094
- font-sources()
1095
- ----------------------------------------
1096
- Outputs a list of font sources used in
1097
- a @font-face declaration.
1098
-
1099
- $theme-font-browser-compatibility: true - output woff2, woff, ttf
1100
- $theme-font-browser-compatibility: false - output woff2
1101
-
1102
- @param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]
1103
- @output: string
1104
-
1105
- filetypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)
1106
- ----------------------------------------
1107
- */
1108
- /*
1109
- ----------------------------------------
1110
- get-font-stack()
1111
- ----------------------------------------
1112
- Get a font stack from a style- or
1113
- role-based font token.
1114
- ----------------------------------------
1115
- */
1116
- /*
1117
- ----------------------------------------
1118
- Project fonts
1119
- ----------------------------------------
1120
- Collects font settings in a map for
1121
- looping.
1122
- ----------------------------------------
1123
- */
1124
- /*
1125
- ----------------------------------------
1126
- get-typeface-token()
1127
- ----------------------------------------
1128
- Get a typeface token from a font-type or
1129
- font-role token.
1130
- ----------------------------------------
1131
- */
1132
- /*
1133
- ----------------------------------------
1134
- normalize-type-scale()
1135
- ----------------------------------------
1136
- Normalizes a specific face's optical size
1137
- to a set target
1138
- ----------------------------------------
1139
- */
1140
- /*
1141
- ----------------------------------------
1142
- px-to-rem()
1143
- ----------------------------------------
1144
- Converts a value in px to a value in rem
1145
- ----------------------------------------
1146
- */
1147
- /*
1148
- ----------------------------------------
1149
- rem-to-px()
1150
- ----------------------------------------
1151
- Converts a value in rem to a value in px
1152
- ----------------------------------------
1153
- */
1154
- /*
1155
- ----------------------------------------
1156
- rem-to-user-em()
1157
- ----------------------------------------
1158
- Converts a value in rem to a value in
1159
- [user-settings] em for use in media
1160
- queries
1161
- ----------------------------------------
1162
- */
1163
- /*
1164
- ----------------------------------------
1165
- units()
1166
- ----------------------------------------
1167
- Converts a spacing unit into
1168
- the desired final units (currently rem)
1169
- ----------------------------------------
1170
- */
1171
- /*
1172
- ----------------------------------------
1173
- number-to-token()
1174
- ----------------------------------------
1175
- Converts an integer or numeric value
1176
- into a system value
1177
-
1178
- Ex: 0.5 --> '05'
1179
- -1px --> 'neg-1px'
1180
- ----------------------------------------
1181
- */
1182
- /*
1183
- ----------------------------------------
1184
- system-type-scale()
1185
- ----------------------------------------
1186
- Get a value from the system type scale
1187
- ----------------------------------------
1188
- */
1189
- /*
1190
- ----------------------------------------
1191
- columns()
1192
- ----------------------------------------
1193
- outputs a grid-col number based on
1194
- the number of desired columns in the
1195
- 12-column grid
1196
-
1197
- Ex: columns(2) --> 6
1198
- grid-col(columns(2))
1199
- ----------------------------------------
1200
- */
1201
- /*
1202
- ----------------------------------------
1203
- USWDS Properties
1204
- ----------------------------------------
1205
- */
1206
- /*
1207
- ----------------------------------------
1208
- get-uswds-value()
1209
- ----------------------------------------
1210
- Finds and outputs a value from the
1211
- USWDS standard values.
1212
-
1213
- Used to build other standard utility
1214
- functions and mixins.
1215
- ----------------------------------------
1216
- */
1217
- /*
1218
- ----------------------------------------
1219
- get-standard-values()
1220
- ----------------------------------------
1221
- Gets a map of USWDS standard values
1222
- for a property
1223
- ----------------------------------------
1224
- */
1225
- /*
1226
- ----------------------------------------
1227
- ns()
1228
- ----------------------------------------
1229
- Add a namesspace of $type if that
1230
- namespace is set to output
1231
- ----------------------------------------
1232
- */
1233
- /*
1234
- ----------------------------------------
1235
- border-radius()
1236
- ----------------------------------------
1237
- Get a border-radius from the system
1238
- border-radii
1239
- ----------------------------------------
1240
- */
1241
- /*
1242
- ----------------------------------------
1243
- font-weight()
1244
- fw()
1245
- ----------------------------------------
1246
- Get a font-weight value from the
1247
- system font-weight
1248
- ----------------------------------------
1249
- */
1250
- /*
1251
- ----------------------------------------
1252
- feature()
1253
- ----------------------------------------
1254
- Gets a valid USWDS font feature setting
1255
- ----------------------------------------
1256
- */
1257
- /*
1258
- ----------------------------------------
1259
- flex()
1260
- ----------------------------------------
1261
- Gets a valid USWDS flex value
1262
- ----------------------------------------
1263
- */
1264
- /*
1265
- ----------------------------------------
1266
- font-family()
1267
- family()
1268
- ----------------------------------------
1269
- Get a font-family stack from a
1270
- role-based or type-based font family
1271
- ----------------------------------------
1272
- */
1273
- /*
1274
- ----------------------------------------
1275
- letter-spacing()
1276
- ls()
1277
- ----------------------------------------
1278
- Get a letter-spacing value from the
1279
- system letter-spacing
1280
- ----------------------------------------
1281
- */
1282
- /*
1283
- ----------------------------------------
1284
- measure()
1285
- ----------------------------------------
1286
- Gets a valid USWDS reading line length
1287
- ----------------------------------------
1288
- */
1289
- /*
1290
- ----------------------------------------
1291
- opacity()
1292
- ----------------------------------------
1293
- Get an opacity from the system
1294
- opacities
1295
- ----------------------------------------
1296
- */
1297
- /*
1298
- ----------------------------------------
1299
- order()
1300
- ----------------------------------------
1301
- Get an order value from the
1302
- system orders
1303
- ----------------------------------------
1304
- */
1305
- /*
1306
- ----------------------------------------
1307
- radius()
1308
- ----------------------------------------
1309
- Get a border-radius value from the
1310
- system letter-spacing
1311
- ----------------------------------------
1312
- */
1313
- /*
1314
- ----------------------------------------
1315
- font-size()
1316
- ----------------------------------------
1317
- Get type scale value from a [family] and
1318
- [scale]
1319
- ----------------------------------------
1320
- */
1321
- /*
1322
- ----------------------------------------
1323
- z-index()
1324
- z()
1325
- ----------------------------------------
1326
- Get a z-index value from the
1327
- system z-index
1328
- ----------------------------------------
1329
- */
1330
- /*
1331
- ----------------------------------------
1332
- utility-font()
1333
- ----------------------------------------
1334
- Get a normalized font-size in rem from
1335
- a family and a type size in either
1336
- system scale or project scale
1337
- ----------------------------------------
1338
- Not the public-facing function.
1339
- Used for building the utilities and
1340
- withholds certain errors.
1341
- ----------------------------------------
1342
- */
1343
- /*
1344
- ----------------------------------------
1345
- family()
1346
- ----------------------------------------
1347
- Get a font-family stack
1348
- ----------------------------------------
1349
- */
1350
- /*
1351
- ----------------------------------------
1352
- size()
1353
- ----------------------------------------
1354
- Get a normalized font-size in rem from
1355
- a family and a type size in either
1356
- system scale or project scale
1357
- ----------------------------------------
1358
- */
1359
- /*
1360
- ----------------------------------------
1361
- font()
1362
- ----------------------------------------
1363
- Get a font-family stack
1364
- AND
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
- typeset()
1373
- ----------------------------------------
1374
- Sets:
1375
- - family
1376
- - size
1377
- - line-height
1378
- ----------------------------------------
1379
- */
1380
- /*
1381
- ----------------------------------------
1382
- Easing
1383
- ----------------------------------------
1384
- */
1385
- h1 {
1386
- margin-top: 0;
1387
- }
1388
-
1389
- h1,
1390
- h2,
1391
- h3,
1392
- h4,
1393
- h5,
1394
- h6 {
1395
- margin-bottom: 0;
1396
- margin-top: 0;
1397
- clear: both;
1398
- }
1399
- * + h1,
1400
- * + h2,
1401
- * + h3,
1402
- * + h4,
1403
- * + h5,
1404
- * + h6 {
1405
- margin-top: 1.5em;
1406
- }
1407
- h1 + *,
1408
- h2 + *,
1409
- h3 + *,
1410
- h4 + *,
1411
- h5 + *,
1412
- h6 + * {
1413
- margin-top: 1em;
1414
- }
1415
-
1416
- h1 {
1417
- font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
1418
- font-size: 2.44rem;
1419
- line-height: 1.2;
1420
- font-weight: 700;
1421
- }
1422
-
1423
- h2 {
1424
- font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
1425
- font-size: 1.95rem;
1426
- line-height: 1.2;
1427
- font-weight: 700;
1428
- }
1429
-
1430
- h3 {
1431
- font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
1432
- font-size: 1.34rem;
1433
- line-height: 1.2;
1434
- font-weight: 700;
1435
- }
1436
-
1437
- h4 {
1438
- font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
1439
- font-size: 0.98rem;
1440
- line-height: 1.2;
1441
- font-weight: 700;
1442
- }
1443
-
1444
- h5 {
1445
- font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
1446
- font-size: 0.91rem;
1447
- line-height: 1.2;
1448
- font-weight: 700;
1449
- }
1450
-
1451
- h6 {
1452
- font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
1453
- font-size: 0.87rem;
1454
- line-height: 1.1;
1455
- font-weight: normal;
1456
- letter-spacing: 0.025em;
1457
- text-transform: uppercase;
1458
- }
1459
-
1460
- h1, h2, h3, h4, h5 {
1461
- font-family: Bitter, Georgia, Cambria, "Times New Roman", Times, serif;
1462
- font-weight: 700;
1463
- }
1464
-
1465
- h6 {
1466
- font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
1467
- font-weight: 700;
1468
- }
1469
-
1470
- h1 {
1471
- margin-top: 0;
1472
- font-size: 2.5rem;
1473
- }
1474
-
1475
- h2 {
1476
- font-size: 1.875rem;
1477
- }
1478
-
1479
- h3 {
1480
- font-size: 1.25rem;
1481
- }
1482
-
1483
- h4 {
1484
- font-size: 1.0625rem;
1485
- }
1486
-
1487
- h5 {
1488
- font-size: 0.9375rem;
1489
- }
1490
-
1491
- h6 {
1492
- font-size: 0.9375rem;
1493
- }
1494
-
1495
- @media (max-width: 481px) {
1496
- h1 {
1497
- font-size: 30px;
1498
- }
1499
- h2 {
1500
- font-size: 24px;
1501
- }
1502
- }
1503
- h6 {
1504
- margin: 0.5em 0 0;
1505
- text-transform: none;
1506
- font-weight: 700;
1507
- }
1508
-
1509
- @media (max-width: 481px) {
1510
- h1 {
1511
- font-size: 30px;
1512
- }
1513
- h2 {
1514
- font-size: 24px;
1515
- }
1516
- }
1517
- h6 {
1518
- margin: 0.5em 0 0;
1519
- text-transform: none;
1520
- font-weight: 700;
1521
- }
1522
-
1523
- /*# sourceMappingURL=headings.css.map */
1
+ h1{margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:0;margin-top:0;clear:both}*+h1,*+h2,*+h3,*+h4,*+h5,*+h6{margin-top:1.5em}h1+*,h2+*,h3+*,h4+*,h5+*,h6+*{margin-top:1em}h1{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:2.44rem;line-height:1.2;font-weight:700}h2{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.95rem;line-height:1.2;font-weight:700}h3{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:1.34rem;line-height:1.2;font-weight:700}h4{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:.98rem;line-height:1.2;font-weight:700}h5{font-family:Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;font-size:.91rem;line-height:1.2;font-weight:700}h6{font-family:Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;font-size:.87rem;line-height:1.1;font-weight:normal;letter-spacing:.025em;text-transform:uppercase}h1,h2,h3,h4,h5{font-family:Bitter,Georgia,Cambria,"Times New Roman",Times,serif;font-weight:700}h6{font-family:"Source Sans Pro Web","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;font-weight:700}h1{margin-top:0;font-size:2.5rem}h2{font-size:1.875rem}h3{font-size:1.25rem}h4{font-size:1.0625rem}h5{font-size:.9375rem}h6{font-size:.9375rem}@media(max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:.5em 0 0;text-transform:none;font-weight:700}@media(max-width: 481px){h1{font-size:30px}h2{font-size:24px}}h6{margin:.5em 0 0;text-transform:none;font-weight:700}/*# sourceMappingURL=headings.css.map */