Release 2.12.0

[thisisdano]

What's new in USWDS 2.12.0

New component

We have one new component in this release. Learn more about it on our website:

Pagination: Pagination is navigation for paginated content.

New Spanish-language templates

We now have Spanish-language versions of our 404 template and our Authentication page templates

Other improvements and bug fixes

Added more negative margin tokens to margin utilities. Now you can use utilities like margin-neg-4 and margin-neg-5. Thanks @mahoneycm! (#4212)

Card's body exdent modifier now works as documented. Now adding the .usa-card__body--exdent modifier will work as expected. Thanks @btwegmann! (#4165)

Checkbox and radio buttons now include automatic accessible color. Now checkbox and radio buttons will display in the proper accessible color, and adapt to the text, link, and background colors you set in your projects's settings. You can also declare a custom background color for checkbox and radio buttons with $theme-input-background-color. The selected tile color is now based on the accessible link color, and is not a custom setting. (#4199)

We also added a new mixin to make it easier to scope custom checkbox and radio button colors: checkbox-and-radio-colors($bg-color, $selected-color)

It takes two color token inputs, $bg-color and $selected-color. Neither are required and will assume the values in settings if omitted. It returns all the code necessary to set checkbox and radio inputs for the desired scope.

For instance, if you wanted to change the color of all checkbox and radio elements within a .checkbox-tests container, you could do something like the following

.checkbox-tests {
  @include set-text-and-bg("green-80");
  @include checkbox-and-radio-colors("green-80", "green-warm-10v");
  padding: units(2);
  border-radius: radius("md");
}

State color tokens available in default utilities. Now you can use utilities like text-primary-dark in the default utility set. (#4198)

The success-dark color token now looks better. We updated the value of success-dark to be more vivid and look more like success. Thanks @maya! (#4183)

Cleaner margins in radio tiles. Now radio tiles have cleaner, more reliable styling for their margin. Thanks @maya! (#4181)

Settings

Status	Item	New	Old	Notes
Changed	$theme-color-success-dark	green-cool-50	green-cool-50v	—
Changed	$theme-color-success-darker	green-cool-80	green-cool-60v	—
New	$theme-input-background-color	2	—	A value of default uses the value of $theme-body-background-color.
New	$theme-pagination-background-color	default	—	A value of default uses the value of $theme-body-background-color.
New	$theme-pagination-breakpoint	tablet	—
New	$theme-pagination-button-border-radius	md	—
New	$theme-pagination-button-border-width	1px	—
New	$theme-pagination-font-family	ui	—
Removed	$theme-input-tile-background-color-selected	—	primary-lighter	Input tiles are now automatically calculated from the site link color.
Removed	$theme-input-tile-border-color	—	base-lighter	This value is now calculated automatically.
Removed	$theme-input-tile-border-color-selected	—	primary-lighter	This value is now automatically calculated from the site link color.

Dependencies and security

dependency	old	new
elem-dataset	2.0.0	removed
@babel/preset-env	7.13.15	7.14.5
@frctl/fractal	1.5.6	1.5.8
@types/node	14.14.43	14.17.3
autoprefixer	10.2.5	10.2.6
axe-core	4.2.1	4.2.2
chrome-launcher	0.13.4	0.14.0
chrome-remote-interface	0.28.2	0.30.1
eslint	7.25.0	7.28.0
eslint-plugin-import	2.22.1	2.23.4
gulp-changed	4.0.2	4.0.3
gulp-sass	4.1.0	removed
postcss	8.2.13	8.3.4
prettier	2.2.0	2.3.1
sass	1.32.11	1.35.1
snyk	1.570.0	1.634.0
typescript	4.2.4	4.3.2

---

0 vulnerabilities in regular dependencies (dependencies for USWDS projects installed with npm install uswds)

8 low, 4 moderate, 4 high vulnerabilities in devDependencies (development dependencies)

Release ZIP SHA-256 hash: 95be7f97ad592f68384d6cbbea87e1cd154b585207f35ca3ae2b7bdc6ffd1270

[mejiaj]

We also added a new mixin to make it easier to scope custom checkbox and radio button colors: checkbox-and-radio-colors($bg-color, $checked-color)

Minor, but $selected-color is used in the mixin vs $checked-color.