Skip to content

USWDS-Site - Settings: Fix code audit issues #2016

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amyleadem merged 28 commits into from
Mar 20, 2023
Merged

USWDS-Site - Settings: Fix code audit issues #2016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
03d3fb3
Fixed errors in breadcrumb settings
Feb 27, 2023
03bc0fe
Fixed errors in alert settings
Feb 27, 2023
aadba5d
Fixed errors in color settings
Feb 27, 2023
93b26f1
Fixed errors in button settings
Feb 27, 2023
6e3f5bd
Fix missing map content; show all related token types
Mar 3, 2023
29605a4
Add tooltip settings
Mar 3, 2023
1ac769f
Fix small text formatting issues and typos
Mar 3, 2023
d8c14af
Add additional types
Mar 3, 2023
969833f
Update type values
Mar 3, 2023
36d099a
Add missing settings
Mar 3, 2023
423e81d
Update default value for -pagination-background-color
Mar 3, 2023
e1ef1b2
Update spacing token names and subsections
Mar 7, 2023
77f920e
Add description for Body line height
Mar 7, 2023
d89a4f3
Remove accessible color setting text from pagination bg
Mar 7, 2023
fe078d6
Update values for -color-success-dark, -color-success-darker
Mar 7, 2023
1728fd8
Merge branch 'main' of https://github.com/uswds/uswds-site into al-au…
Mar 7, 2023
614e378
Remove settings.yml file
Mar 7, 2023
58f2068
Replace 'reverse' with 'on dark backgrounds'
Mar 7, 2023
9b32ee7
Convert single quotes to double
Mar 7, 2023
1d5b18c
Add changelog
Mar 7, 2023
d9c4618
Update description and type
Mar 7, 2023
5db7093
Merge branch 'main' into al-audit-settings-fix
thisisdano Mar 20, 2023
f89f1d6
Small copyedit fixes
thisisdano Mar 20, 2023
34e659b
Update changelog item for PR 2016
Mar 20, 2023
840cfec
Fix typos
Mar 20, 2023
bc77235
Remove duplicate map
Mar 20, 2023
bee7397
Alphabetize table settings
Mar 20, 2023
d1b2885
Alphabetize better
Mar 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions _data/changelogs/docs-settings.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,17 @@ title: Settings
type: utility
changelogURL:
items:
- date: 2023-03-20
summary: Updated settings information to match what is found in USWDS.
summaryAdditional:
affectsAccessibility:
affectsAssets:
affectsGuidance: true
affectsJavascript:
affectsMarkup:
affectsStyles:
githubPr: 2016
githubRepo: uswds-site
- date: 2023-03-09
summary: Added `$theme-font-browser-compatibility` setting.
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`.
Expand Down
19 changes: 14 additions & 5 deletions _data/settings/01-general.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,21 +30,30 @@ contents:
value: '"grid-"'
type: string
- key: grid.output
description: Output grid prefix.
description: Output the grid prefix.
value: "true"
type: boolean
- key: utility.namespace
description: The utility class prefix.
value: '"u-"'
type: string
- key: utility.output
description: Output utility prefix.
value: "true"
description: Output the utility prefix.
value: "false"
type: boolean

- name: Prefix separator
description: |
Set the character that separates responsive and state prefixes from the main class name.
The default (":") is preceded by two backslashes so that it is properly escaped.
var: $theme-prefix-separator
default: |
"\\:"
type: string

- name: Important layout grid
description: |
Output grid classes output with "!important."
Output grid classes with `!important`.
var: $theme-layout-grid-use-important
default: "false"
type: boolean
Expand All @@ -58,7 +67,7 @@ contents:

- name: Focus
subsection: color
description: The default color of the focus outline.
description: The color of the focus outline.
var: $theme-focus-color
default: '"blue-40v"'
type: color
Expand Down
20 changes: 10 additions & 10 deletions _data/settings/color.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ contents:
var: $theme-color-accent-warm-darker
default: '"orange-60"'
type: color
- name: accent-warm-lightest
- name: accent-warm-darkest
subsection: theme color token
description: Use grades 70-90.
var: $theme-color-accent-warm-darkest
Expand Down Expand Up @@ -438,19 +438,19 @@ contents:
var: $theme-color-disabled-family
default: '"gray"'
type: color
- name: info-light
- name: disabled-light
subsection: state color token
description: Use grade 10.
var: $theme-color-disabled-light
default: '"gray-10"'
type: color
- name: info
- name: disabled
subsection: state color token
description: Use grade 20.
var: $theme-color-disabled
default: '"gray-20"'
type: color
- name: info-dark
- name: disabled-dark
subsection: state color token
description: Use grade 30.
var: $theme-color-disabled-dark
Expand All @@ -464,7 +464,7 @@ contents:
default: '"white"'
type: color
- name: Body text color
description: Color of body text
description: Color of body text.
var: $theme-text-color
default: '"ink"'
type: color
Expand All @@ -481,7 +481,7 @@ contents:
default: '"primary"'
type: color
- name: Visited link color
description: Color for `:visted` text links
description: Color for `:visited` text links
var: $theme-link-visited-color
default: '"violet-70v"'
type: color
Expand All @@ -496,17 +496,17 @@ contents:
default: '"primary-darker"'
type: color
- name: Link reverse color
description: Color for reverse text links.
description: Color for text links on dark backgrounds.
var: $theme-link-reverse-color
default: '"base-lighter"'
type: color
- name: Link reverse hover color
description: Color for reverse `:hover` text links.
description: Color for `:hover` text links on dark backgrounds.
var: $theme-link-reverse-hover-color
default: '"base-lightest"'
type: color
- name: Link reverse hover color
description: Color for reverse `:active` text links.
- name: Link reverse active color
description: Color for `:active` text links on dark backgrounds.
var: $theme-link-reverse-active-color
default: '"white"'
type: color
15 changes: 10 additions & 5 deletions _data/settings/components/alert.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,26 @@ contents:
var: $theme-alert-padding-x
default: 2.5
type: units
- name: Vertical padding
description: Padding on the top and bottom of the alert.
var: $theme-alert-padding-y
default: 2
type: units
- name: Text color
description: Text color on light backgrounds. `Default` uses text color set in `$theme-text-color`.
var: $theme-alert-text-color
default: "default"
type: color
- name: Link color
description: Link color on light backgrounds. `Default` uses text color set in `$theme-text-color`.
var: $theme-alert-link-color
default: "default"
type: color
- name: Reverse text color
description: Text color on dark backgrounds. `Default` uses reverse text color set in `$theme-text-reverse-color`.
var: $theme-alert-text-reverse-color
default: "default"
type: color
- name: Link color
description: Link color on light backgrounds. `Default` uses link color set in `$theme-link-color`.
var: $theme-alert-text-color
default: "default"
type: color
- name: Reverse link color
description: Link color on dark backgrounds. `Default` uses reverse link color set in `$theme-link-reverse-color`.
var: $theme-alert-link-reverse-color
Expand Down
13 changes: 4 additions & 9 deletions _data/settings/components/breadcrumb.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,13 @@ contents:
- name: Font family
description: The family of the breadcrumb text.
var: $theme-breadcrumb-font-family
default: '"sm"'
default: '"body"'
type: family
- name: Font size
description: The size of the breadcrumb text.
var: $theme-breadcrumb-font-size
default: '"sm"'
type: units
- name: Breadcrumb gap
description: The space between indicator icons and text.
var: $theme-breadcrumb-gap
default: 1.5
type: units
- name: Link color
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.
var: $theme-breadcrumb-link-color
Expand All @@ -28,10 +23,10 @@ contents:
- name: Full breadcrumb minimum width
description: The width at which the breadcrumb displays the full breadcrumb list.
var: $theme-breadcrumb-min-width
default: "mobile-lg"
default: '"mobile-lg"'
type: units
- name: Bottom padding
description: Padding under the breadcrumb.
description: Padding below the breadcrumb.
var: $theme-breadcrumb-padding-bottom
default: 2
type: units
Expand All @@ -48,5 +43,5 @@ contents:
- name: Separator color
description: Color of the breadcrumb separator. This value needs AA contrast against the background.
var: $theme-breadcrumb-separator-color
default: "base"
default: '"base"'
type: color
2 changes: 1 addition & 1 deletion _data/settings/components/button.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ contents:
default: '"md"'
type: units
- name: Small width
description: Size of the header search button.
description: Width of small buttons. Used to define the size of the header search button and small language selector button.
var: $theme-button-small-width
default: 6
type: units
Expand Down
7 changes: 5 additions & 2 deletions _data/settings/components/card.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,11 @@ contents:
- name: Header typeset
description: Family, size, and line height of the heading.
var: $theme-card-header-typeset
default: "'heading', 'lg', 2"
type: family
default: '"heading", "lg", 2'
type:
- family
- size
- line-height
- name: Margin bottom
description: Bottom margin for card.
var: $theme-card-margin-bottom
Expand Down
19 changes: 5 additions & 14 deletions _data/settings/components/checkbox.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ contents:
default: '"sm"'
type: units
description: Checkbox border radius for rounded corners.
- name: Selected background color
var: $theme-input-tile-background-color-selected
default: '"accent-cool-lighter"'
- name: Background color
var: $theme-input-background-color
default: 'default'
type: color
description: Tile background color when selected.
description: "Background color for radio and checkbox inputs."
- name: Tile border radius
var: $theme-input-tile-border-radius
default: '"md"'
Expand All @@ -20,13 +20,4 @@ contents:
default: '"2px"'
type: units
description: "Tile border thickness"
- name: Tile border color
var: $theme-input-tile-border-color
default: '"base-lighter"'
type: color
description: Tile border color.
- name: Tile border color selected
var: $theme-input-tile-border-color-selected
default: '"accent-cool-light"'
type: color
description: Tile border color when selected.

5 changes: 4 additions & 1 deletion _data/settings/components/collection.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,7 @@ contents:
description: Family, size, and line height of the heading.
var: $theme-collection-header-typeset
default: '"ui", "md", 3'
type: family
type:
- family
- size
- line-height
4 changes: 2 additions & 2 deletions _data/settings/components/in-page-navigation.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ contents:
var: $theme-in-page-nav-bar-color
default: '"default"'
type: color
- name: Active state line width
- name: Active state vertical line width
description: Width of the colored bar representing the active state of a link in the in-page nav.
var: $theme-in-page-nav-bar-width
default: '"05"'
Expand All @@ -35,7 +35,7 @@ contents:
var: $theme-in-page-nav-link-color
default: '"default"'
type: color
- name: Content width
- name: Main content max width
description: Maximum width of the main element.
var: $theme-in-page-nav-main-content-max-width
default: '"desktop"'
Expand Down
2 changes: 1 addition & 1 deletion _data/settings/components/input.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ contents:
default: '"mobile-lg"'
type: units
- name: Border width when selected
description: Border width when selected.
description: Border width of selection element for checkbox, radio, and range.
var: $theme-input-select-border-width
default: 2px
type: units
Expand Down
14 changes: 7 additions & 7 deletions _data/settings/components/modal.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
name: Modal
contents:
- name: Border Radius
- name: Border radius
description: The border radius of the modal window.
var: $theme-modal-border-radius
default: "'lg'"
default: '"lg"'
type: units
- name: Max width
description: Maximum width of default modal window.
var: $theme-modal-default-max-width
default: "'mobile-lg'"
default: '"mobile-lg"'
type: units
- name: Max width
- name: Large max width
description: Maximum width of large modal window.
var: $theme-modal-lg-max-width
default: "'tablet-lg'"
default: '"tablet-lg"'
type: units
- name: Max width
- name: Large content max width
description: Maximum width of content area within large modal window.
var: $theme-modal-lg-content-max-width
default: "'tablet'"
default: '"tablet"'
type: units
2 changes: 1 addition & 1 deletion _data/settings/components/navigation.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ contents:
var: $theme-navigation-font-family
default: '"ui"'
type: family
- name: Megamenu columns
- name: Megamenu column count
description: Number of columns in the megamenu.
var: $theme-megamenu-columns
default: 3
Expand Down
4 changes: 2 additions & 2 deletions _data/settings/components/pagination.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
name: Pagination
contents:
- name: Pagination background color
description: The background color of the entire pagination component, used for accessible color setting.
description: The background color of the entire pagination component.
var: $theme-pagination-background-color
default: '"white"'
default: '"default"'
type: color
- name: Breakpoint
description: Breakpoint at which full pagination displays.
Expand Down
12 changes: 6 additions & 6 deletions _data/settings/components/process-list.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ contents:
description: Size of the border around the counter circle.
var: $theme-process-list-counter-border-width
default: 0.5
type: size
type: units
- name: Counter font family
description: Font family of the counter text.
var: $theme-process-list-counter-font-family
Expand All @@ -29,7 +29,7 @@ contents:
description: Color of gap between counter and connector. This should the the same as the background color behind the component.
var: $theme-process-list-counter-gap-color
default: '"white"'
type: units
type: color
- name: Counter gap width
description: Size of gap between counter and connector.
var: $theme-process-list-counter-gap-width
Expand All @@ -39,7 +39,7 @@ contents:
description: Size of the counter circle.
var: $theme-process-list-counter-size
default: 5
type: size
type: units
- name: Counter text color
description: Color of the number text inside the counter circle.
var: $theme-process-list-counter-text-color
Expand All @@ -54,8 +54,8 @@ contents:
description: Width of the connector line between counter circles.
var: $theme-process-list-connector-width
default: 1
type: size
- name: Font family of content
type: units
- name: Content font family
description: Font family of the content text.
var: $theme-process-list-font-family
default: '"ui"'
Expand All @@ -70,7 +70,7 @@ contents:
var: $theme-process-list-heading-color
default: '"ink"'
type: color
- name: Font family of heading
- name: Heading font family
description: Font family of the heading text.
var: $theme-process-list-heading-font-family
default: '"ui"'
Expand Down
Loading