What's new in USWDS 2.4.0

Allow non-token values in theme color settings. While USWDS promotes and encourages using our system tokens in theme color settings, agencies have a real need to occasionally use non-token colors. This includes instances where certain colors are mandated by law and cannot be easily changed. Now, teams can add non-token colors to theme color settings like $theme-color-primary: #f00. This new non-token value of 'primary' will apply anywhere the 'primary' token is used: functions, mixins, settings, and utilities. Using non-token values will throw a warning in the compile process, but this, like all compile warnings, can be disabled by setting $theme-show-compile-warnings: false. (#3258)

Handle deprecations more gracefully. Occasionally the design system will deprecate variables or functionality. Now we'll display a deprecation message in the terminal when compiling USWDS Sass to better communicate these changes. (This notification can be disabled in settings.) We're also improving backward compatibility by supporting deprecated variables, functions, and mixins throughout the major version cycle. This way, we can continue to improve how our code is structured while minimizing the effects of this restructuring on your projects. (#3261)

This is how the deprecation warning prints in the terminal:

--------------------------------------------------------------------
✉ USWDS Notifications
--------------------------------------------------------------------
2.4.0: If your component settings aren't working as expected, make
sure you're importing the components settings in your Sass entry
point (often styles.scss) with `@import "uswds-theme-components"`.
A bug in 2.0 omitted that import.
--------------------------------------------------------------------
2.2.0: We changed the names of some settings.
$theme-navigation-width → $theme-header-min-width
$theme-megamenu-logo-text-width → $theme-header-logo-text-width
--------------------------------------------------------------------
2.0.2: We changed the names of some settings and mixins.
$theme-title-font-size → $theme-display-font-size
@include title → @include display
@include typeset-title → @include typeset-display
--------------------------------------------------------------------
These are notifications from the USWDS team, not necessarily a
problem with your code.

Disable notifications using $theme-show-notifications: false
--------------------------------------------------------------------

Now components reliably respect their font settings. Setting values like $theme-footer-font-family should set the font face for the entire component, but some CSS specificity quirks were overriding these values in some instances. Now, setting a component's font face works as expected, with no secret overrides. (#3253)

Bugfixes

• Added a border-collapse: collapse rule to our tables to to fix a bug introduced when we upgraded our version of Normalize. Thanks for the heads up @maya! (Add border-collapse rule to tables #3250)
• Removed a duplicate layout grid import (USWDS - styles.scss Imports: Remove duplicate layout-grid import. #3252)
• Fixed the focus outline's offset, which was being overridden by a specificity bug (Issue-3256: Prevent focus outline from being overridden. #3259)