CSS Library: add USWDS theme setting for medium-screen breakpoint utilities

[jamigibbs]

Chromatic

https://3400-uwsds-utility-breakpoint--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

With the $theme-utility-breakpoints-custom setting now available in the latest USWDS release, we can replace our custom Sass code with it. This PR:

• updates the CSS Library to USWDS v3.9.0
• adds the custom breakpoint utility setting to the USWDS theme
• removes the medium-screen workaround Sass code

Closes department-of-veterans-affairs/vets-design-system-documentation#3400

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Acceptance criteria

• QA checklist has been completed
• Screenshots have been attached that cover desktop and mobile screens

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[jamigibbs]

USWDS added a new Sass function in this update and comments for it are getting output in a bunch of stylesheets. Functionally those stylesheets have not changed though.

[jamigibbs]

I'm not sure why this was needed here. We don't run yarn build in the repo's root folder as part of our development build steps. We run it in web-components, core, react-components, and storybook.

As far as I can tell, css-library is just needed in the web-components package.json so I'm going to clean this up to avoid confusion (it's me, I was the confused one 🙋🏼‍♀️).

[jamigibbs]

I have observed that there are less utilities getting generated now than what we had before when we were using our custom breakpoint code.

The reason I think this is happening is because the custom code did not take into account the utility settings that identified the ones that we didn't want to be generated with responsive breakpoints. For example, text-decoration utilities has responsive: false:

component-library/packages/css-library/src/utilities/settings.scss

Lines 136 to 143 in a001910

	$text-decoration-settings: (
	output: true,
	responsive: false,
	active: false,
	focus: false,
	hover: false,
	visited: false,
	) !default;

Now that it's respecting those settings, we should expect to see less of them generated (smaller build! yay!)

[jamigibbs]

This was originally in the dependencies list but I think because this repo is set up using workspaces, I could not update the USWDS package in the css-library without also needing it done in the web-components packages. Moving it to devDependencies fixed the build issue I was having.

We have a separate ticket for updating USWDS in other packages.