Upgrade to Login.gov Design System v7

[aduth]

🛠 Summary of changes

This pull request implements the upgrade to the Login.gov Design System v7. This includes an upgrade of the USWDS from v2.13.3 to v3.4.1, incorporates a rename of the design system package from identity-style-guide to @18f/identity-design-system, and upgrades Sass syntax to support the new @use / @forward semantics required by USWDS v3.

Draft: This pull request depends on several upstream changes, including 18F/identity-design-system#331 and 18F/identity-design-system#321, and is not ready to merge. It's shared here as a demonstration of what the upgrade will look like, and to iterate toward further improvements prior to publishing v7 of the design system. Edit: The new, stable version of @18f/identity-design-system@7.0.0 is now published!

[aduth]

Problem 1: Long path references to LGDS and direct references to USWDS:

identity-idp/app/assets/stylesheets/_required.scss

Line 1 in 40b49f5

@use '@18f/identity-design-system/dist/assets/scss/uswds-theme' with (

identity-idp/package.json

Line 21 in 40b49f5

"build:css": "build-sass app/assets/stylesheets/*.css.scss --load-path=node_modules/@uswds/uswds/packages --out-dir=app/assets/builds"

Problem 2: No direct support of new optimization options from USWDS.

Possible solution: Restructure published folder hierarchy of @18f/identity-design-system to mimic USWDS, pointing to original USWDS paths if unaffected, and including any relevant overriding styles.

node_modules/@18f/identity-design-system/
├─ packages/
   ├─ _usa-accordion.scss

Then change --load-path from node_modules/@uswds/uswds/packages to node_modules/@18f/identity-design-system/packages.

# Before:
# @use '@18f/identity-design-system/dist/assets/scss/uswds-theme' with ( 
# After:
@use 'uswds-core' with (
  # ...
);

[aduth]

Observing an issue after upgrading with alert display, where the icon is not shown in full:

This appears to be related to an upstream issue I identified in USWDS which, combined with our use of LightningCSS postprocessor, results in a truncated icon (see uswds/uswds#5187 (comment)).

[aduth]

Observing an issue after upgrading with alert display, where the icon is not shown in full:

Temporary patch in efc6876.

[aduth]

One of the most interesting features of USWDS 3.0 is the ability to optimize the compilation by cherry-picking the individual component styles we need. I've added this in c53dff8 based on a quick pass at what we're currently using, and indeed it seems to have had a nice impact.

main: 46.2kb brotli'd
aduth-lgds-7: 29.5kb brotli'd
Diff: -16.7kb (-36.1%)

[aduth]

18F/identity-design-system#344

[mitchellhenke]

This is really neat!

[aduth]

Yeah, I was pretty happy about this, both from the perspective that this should be a feature we support anyways from an accessibility perspective, and also that it's a nice hack to avoid animation timing prolonging the feature specs.

And it also highlights the DevTools features we can use. In particular, I'm really interested in the Accessibility APIs (see related code comment in #8327).