chore: font organization

[stephiescastle]

Checklist

• Include a description of your pull request and instructions for the reviewer to verify your work.
• Link to the issue if this PR is issue-specific.
• Create/update the corresponding story if this includes a UI component.
• Create/update documentation. If not included, tell us why.
• List the environments / browsers in which you tested your changes.
• Tests, linting, or other required checks are passing.
• PR has an informative and human-readable title
  • PR titles are used to generate the change log in releases; good ones make that easier to scan.
  • PRs will be broadly categorized in the change log, but for even easier scanning, consider prefixing with a component name or other useful categorization, e.g., "BaseButton: fix layout bug", or "Storybook: Update dependencies".
• PR has been tagged with a SemVer label and a general category label, or skip-changelog.
  • These tags are used to do the aforementioned broad categorization in the change log and determine what the next release's version number should be.
  • Release Drafter will attempt to do the category labeling for you! Please double-check its work.

Description

• Reorganizes fonts to allow consuming projects to load fonts separately.
• styles.scss no longer imports font-face styles
• if a project wants to include font-face styles, they should use styles-with-fonts.scss
• Unrelated: adjusts MixinCarousel to not allow clicking on slides that are "out of view" (partially visible or transparent) as it was failing accessibility tests in some instances.

Note: I did consider making the default styles.scss include fonts and creating a separate file that excludes them, but the way I've done it in this PR is the most efficient code-wise.

Breaking Changes

• Sites that are importing styles.scss will need to now import fonts separately or use styles-with-fonts.scss instead

Instructions to test

Tested in the following environments/browsers:

Operating System

• macOS
• iOS
• iPadOS
• Windows

Browser

• Chrome
• Firefox ESR
• Firefox
• Safari
• Edge

[Scotchester]

A question borne of my ignorance about the new multi-package structure: As the HTML and Vue packages are now including styles-with-fonts, how does a consumer opt to use styles(-without-fonts)? I gather that the docs for this revamp are still a WIP, but we'll definitely want to remember to explain this there later.

[stephiescastle]

how does a consumer opt to use styles(-without-fonts)?

It depends on how the user wants to optimize their fonts. For us, we are going with @nuxt/fonts, which we will likely add docs on how to use.

Nuxt-less, users can optimize fonts the way we did originally in www-frontend (load the _fonts.scss file as css on the frontend). We can include a way to generate a 'font-face.css' from the scss file in the docs, but I don't think it's urgent now. I created a stub issue for this, though really we need a stub issue for docs overhaul.