feat(button): migrate to Spectrum 2

[jawinn]

Description

Migrates the Button component to Spectrum 2. Button now uses the tokens defined on the Spectrum 2 design spec. This includes a lot of color changes for the different variants. It removes the express.css and spectrum.css theme files, and combines their contents into the main index.css.

Medium as default, and removing fill class

Medium size is now the default. The class .spectrum-Button--sizeM is now unnecessary for this size, and has been removed. This follows the same type of change being progressively made to all components.

All references to .spectrum-Button--fill have been removed, as it is now unnecessary. It was only used in the CSS for one high contrast mode selector, which has been changed. The fill style has already been the default without the need for this class.

Cleanup work

This also includes a bit of cleanup and refactoring work, that is detailed in the commit messages and noted where necessary in the migration guide. This includes:

• Re-organizes some CSS and selectors, and removes some repeated and unnecessary declarations. Of note, there were some older skin.css styles separated from the main styles, and several spread out styles related to the focus indicator---some of which were overriding each other.
• A good chunk of the custom properties that came from the spectrum.css theme file are consolidated and slimmed down.
• Removes some leftover classes from the theme files that do not apply to button: .is-selected, .spectrum-Button--emphasized, and .spectrum-Button--quiet. Quiet was removed previously, and it looks like selected and emphasized are not a feature of button and do not have any implementation in SWC, reference within our docs, or reference within the design.

Some other changes of note:

• Renames --mod-bold-font-weight to --mod-button-font-weight
• Updates the Migration guide to include versions and dates
• A high contrast fix that sets the foreground to HighlightText when the background was set to Highlight, to ensure contrast by using a matching background-foreground pair.

CSS-616

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

• [ ] Design team validation approval [@jawinn]
• [ ] Tokens used match the updated tokens on the Spectrum 2 token specs Figma
• [ ] Button renders correctly in the docs and in Storybook stories. Include testing with all size options, dark & light themes, and platform scale.
• [x] Proofread Button's migration guide
• [ ] The Icon only button is the same height as the other buttons

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• [ ] The pages render correctly, are accessible, and are responsive.

2. If components have been modified, VRTs have been run on this branch:

• [ ] VRTs have been run and looked at.
• [ ] Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

• [x] I have read the contribution guidelines.
• [x] I have updated relevant storybook stories and templates.
• [x] I have tested these changes in Windows High Contrast mode.
• [ ] If my change impacts other components, I have tested to make sure they don't break.
• [x] If my change impacts documentation, I have updated the documentation accordingly.
• [ ] ✨ This pull request is ready to merge. ✨

[github-actions[bot]]

🚀 Deployed on https://pr-2600--spectrum-css.netlify.app

[github-actions[bot]]

File metrics

Summary

Total size: 4.33 MB^* Total change (Δ): ⬇ 239.58 KB (-5.13%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
button	30.88 KB	⬇ 52.63 KB

Details

button

File	Head	Base	Δ
index-base.css	30.88 KB	53.56 KB	⬇ 22.68 KB (-42.35%)
index-vars.css	30.88 KB	83.51 KB	⬇ 52.63 KB (-63.03%)
index.css	30.88 KB	83.51 KB	⬇ 52.63 KB (-63.03%)
metadata.json	11.50 KB	33.87 KB	⬇ 22.37 KB (-66.04%)
index-theme.css	-	30.53 KB	🚨 deleted, moved, or renamed
themes/express.css	-	29.33 KB	🚨 deleted, moved, or renamed
themes/spectrum.css	-	29.40 KB	🚨 deleted, moved, or renamed

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: bcb00e0be34a9c07e0edb6f1237231705911618c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/button	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jawinn]

This looks awesome, @jawinn! I really like the Docs page.

One question: can accent or negative have an outline treatment, or do they always receive fill and only fill? If they can't receive the outline treatment, can we conditionally disable the fill and outline control?

I'd love to disable that control when the variant control has either of those two values. I looked into that and so far Storybook doesn't have a way to have multiple conditionals, a custom conditional function, or a conditional that checks against two values, though there is some progress on it: https://github.com/storybookjs/storybook/issues/21281