Skip to content

Commit 2e0f34b

Browse files
amyleademamyleadem
authored
Merge pull request #2016 from uswds/al-audit-settings-fix
USWDS-Site - Settings: Fix code audit issues
2 parents d52053e + d1b2885 commit 2e0f34b

24 files changed

+216
-199
lines changed

‎_data/changelogs/docs-settings.yml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,17 @@ title: Settings
22
type: utility
33
changelogURL:
44
items:
5+
- date: 2023-03-20
6+
summary: Updated settings information to match what is found in USWDS.
7+
summaryAdditional:
8+
affectsAccessibility:
9+
affectsAssets:
10+
affectsGuidance: true
11+
affectsJavascript:
12+
affectsMarkup:
13+
affectsStyles:
14+
githubPr: 2016
15+
githubRepo: uswds-site
516
- date: 2023-03-09
617
summary: Added `$theme-font-browser-compatibility` setting.
718
summaryAdditional: We now only output `woff2` fonts in our `@font-face` rules. If you need `woff` and `ttf` for IE11 compatibility, set this new setting to `true`.

‎_data/settings/01-general.yml‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,30 @@ contents:
3030
value: '"grid-"'
3131
type: string
3232
- key: grid.output
33-
description: Output grid prefix.
33+
description: Output the grid prefix.
3434
value: "true"
3535
type: boolean
3636
- key: utility.namespace
3737
description: The utility class prefix.
3838
value: '"u-"'
3939
type: string
4040
- key: utility.output
41-
description: Output utility prefix.
42-
value: "true"
41+
description: Output the utility prefix.
42+
value: "false"
4343
type: boolean
4444

45+
- name: Prefix separator
46+
description: |
47+
Set the character that separates responsive and state prefixes from the main class name.
48+
The default (":") is preceded by two backslashes so that it is properly escaped.
49+
var: $theme-prefix-separator
50+
default: |
51+
"\\:"
52+
type: string
53+
4554
- name: Important layout grid
4655
description: |
47-
Output grid classes output with "!important."
56+
Output grid classes with `!important`.
4857
var: $theme-layout-grid-use-important
4958
default: "false"
5059
type: boolean
@@ -58,7 +67,7 @@ contents:
5867

5968
- name: Focus
6069
subsection: color
61-
description: The default color of the focus outline.
70+
description: The color of the focus outline.
6271
var: $theme-focus-color
6372
default: '"blue-40v"'
6473
type: color

‎_data/settings/color.yml‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ contents:
213213
var: $theme-color-accent-warm-darker
214214
default: '"orange-60"'
215215
type: color
216-
- name: accent-warm-lightest
216+
- name: accent-warm-darkest
217217
subsection: theme color token
218218
description: Use grades 70-90.
219219
var: $theme-color-accent-warm-darkest
@@ -438,19 +438,19 @@ contents:
438438
var: $theme-color-disabled-family
439439
default: '"gray"'
440440
type: color
441-
- name: info-light
441+
- name: disabled-light
442442
subsection: state color token
443443
description: Use grade 10.
444444
var: $theme-color-disabled-light
445445
default: '"gray-10"'
446446
type: color
447-
- name: info
447+
- name: disabled
448448
subsection: state color token
449449
description: Use grade 20.
450450
var: $theme-color-disabled
451451
default: '"gray-20"'
452452
type: color
453-
- name: info-dark
453+
- name: disabled-dark
454454
subsection: state color token
455455
description: Use grade 30.
456456
var: $theme-color-disabled-dark
@@ -464,7 +464,7 @@ contents:
464464
default: '"white"'
465465
type: color
466466
- name: Body text color
467-
description: Color of body text
467+
description: Color of body text.
468468
var: $theme-text-color
469469
default: '"ink"'
470470
type: color
@@ -481,7 +481,7 @@ contents:
481481
default: '"primary"'
482482
type: color
483483
- name: Visited link color
484-
description: Color for `:visted` text links
484+
description: Color for `:visited` text links
485485
var: $theme-link-visited-color
486486
default: '"violet-70v"'
487487
type: color
@@ -496,17 +496,17 @@ contents:
496496
default: '"primary-darker"'
497497
type: color
498498
- name: Link reverse color
499-
description: Color for reverse text links.
499+
description: Color for text links on dark backgrounds.
500500
var: $theme-link-reverse-color
501501
default: '"base-lighter"'
502502
type: color
503503
- name: Link reverse hover color
504-
description: Color for reverse `:hover` text links.
504+
description: Color for `:hover` text links on dark backgrounds.
505505
var: $theme-link-reverse-hover-color
506506
default: '"base-lightest"'
507507
type: color
508-
- name: Link reverse hover color
509-
description: Color for reverse `:active` text links.
508+
- name: Link reverse active color
509+
description: Color for `:active` text links on dark backgrounds.
510510
var: $theme-link-reverse-active-color
511511
default: '"white"'
512512
type: color

‎_data/settings/components/alert.yml‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,26 @@ contents:
2020
var: $theme-alert-padding-x
2121
default: 2.5
2222
type: units
23+
- name: Vertical padding
24+
description: Padding on the top and bottom of the alert.
25+
var: $theme-alert-padding-y
26+
default: 2
27+
type: units
2328
- name: Text color
2429
description: Text color on light backgrounds. `Default` uses text color set in `$theme-text-color`.
2530
var: $theme-alert-text-color
2631
default: "default"
2732
type: color
33+
- name: Link color
34+
description: Link color on light backgrounds. `Default` uses text color set in `$theme-text-color`.
35+
var: $theme-alert-link-color
36+
default: "default"
37+
type: color
2838
- name: Reverse text color
2939
description: Text color on dark backgrounds. `Default` uses reverse text color set in `$theme-text-reverse-color`.
3040
var: $theme-alert-text-reverse-color
3141
default: "default"
3242
type: color
33-
- name: Link color
34-
description: Link color on light backgrounds. `Default` uses link color set in `$theme-link-color`.
35-
var: $theme-alert-text-color
36-
default: "default"
37-
type: color
3843
- name: Reverse link color
3944
description: Link color on dark backgrounds. `Default` uses reverse link color set in `$theme-link-reverse-color`.
4045
var: $theme-alert-link-reverse-color

‎_data/settings/components/breadcrumb.yml‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,13 @@ contents:
88
- name: Font family
99
description: The family of the breadcrumb text.
1010
var: $theme-breadcrumb-font-family
11-
default: '"sm"'
11+
default: '"body"'
1212
type: family
1313
- name: Font size
1414
description: The size of the breadcrumb text.
1515
var: $theme-breadcrumb-font-size
1616
default: '"sm"'
1717
type: units
18-
- name: Breadcrumb gap
19-
description: The space between indicator icons and text.
20-
var: $theme-breadcrumb-gap
21-
default: 1.5
22-
type: units
2318
- name: Link color
2419
description: The color of breadcrumb link. Add the link color and the system will generate the hover state. `Default` uses the default link settings calculated from your background color.
2520
var: $theme-breadcrumb-link-color
@@ -28,10 +23,10 @@ contents:
2823
- name: Full breadcrumb minimum width
2924
description: The width at which the breadcrumb displays the full breadcrumb list.
3025
var: $theme-breadcrumb-min-width
31-
default: "mobile-lg"
26+
default: '"mobile-lg"'
3227
type: units
3328
- name: Bottom padding
34-
description: Padding under the breadcrumb.
29+
description: Padding below the breadcrumb.
3530
var: $theme-breadcrumb-padding-bottom
3631
default: 2
3732
type: units
@@ -48,5 +43,5 @@ contents:
4843
- name: Separator color
4944
description: Color of the breadcrumb separator. This value needs AA contrast against the background.
5045
var: $theme-breadcrumb-separator-color
51-
default: "base"
46+
default: '"base"'
5247
type: color

‎_data/settings/components/button.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ contents:
1111
default: '"md"'
1212
type: units
1313
- name: Small width
14-
description: Size of the header search button.
14+
description: Width of small buttons. Used to define the size of the header search button and small language selector button.
1515
var: $theme-button-small-width
1616
default: 6
1717
type: units

‎_data/settings/components/card.yml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,11 @@ contents:
3838
- name: Header typeset
3939
description: Family, size, and line height of the heading.
4040
var: $theme-card-header-typeset
41-
default: "'heading', 'lg', 2"
42-
type: family
41+
default: '"heading", "lg", 2'
42+
type:
43+
- family
44+
- size
45+
- line-height
4346
- name: Margin bottom
4447
description: Bottom margin for card.
4548
var: $theme-card-margin-bottom

‎_data/settings/components/checkbox.yml‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ contents:
55
default: '"sm"'
66
type: units
77
description: Checkbox border radius for rounded corners.
8-
- name: Selected background color
9-
var: $theme-input-tile-background-color-selected
10-
default: '"accent-cool-lighter"'
8+
- name: Background color
9+
var: $theme-input-background-color
10+
default: 'default'
1111
type: color
12-
description: Tile background color when selected.
12+
description: "Background color for radio and checkbox inputs."
1313
- name: Tile border radius
1414
var: $theme-input-tile-border-radius
1515
default: '"md"'
@@ -20,13 +20,4 @@ contents:
2020
default: '"2px"'
2121
type: units
2222
description: "Tile border thickness"
23-
- name: Tile border color
24-
var: $theme-input-tile-border-color
25-
default: '"base-lighter"'
26-
type: color
27-
description: Tile border color.
28-
- name: Tile border color selected
29-
var: $theme-input-tile-border-color-selected
30-
default: '"accent-cool-light"'
31-
type: color
32-
description: Tile border color when selected.
23+

‎_data/settings/components/collection.yml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,7 @@ contents:
99
description: Family, size, and line height of the heading.
1010
var: $theme-collection-header-typeset
1111
default: '"ui", "md", 3'
12-
type: family
12+
type:
13+
- family
14+
- size
15+
- line-height

‎_data/settings/components/in-page-navigation.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ contents:
2020
var: $theme-in-page-nav-bar-color
2121
default: '"default"'
2222
type: color
23-
- name: Active state line width
23+
- name: Active state vertical line width
2424
description: Width of the colored bar representing the active state of a link in the in-page nav.
2525
var: $theme-in-page-nav-bar-width
2626
default: '"05"'
@@ -35,7 +35,7 @@ contents:
3535
var: $theme-in-page-nav-link-color
3636
default: '"default"'
3737
type: color
38-
- name: Content width
38+
- name: Main content max width
3939
description: Maximum width of the main element.
4040
var: $theme-in-page-nav-main-content-max-width
4141
default: '"desktop"'

0 commit comments

Comments
 (0)