feat(swatch): add support for lightBorder

[marissahuysentruyt]

Description

During the documentation migration work in #2925, it was noticed that the "light border" variant didn't have corresponding CSS. After some digging, I found that we did support it at one point, but it may have accidentally gotten deleted. When reading the Slack messages linked in #1501, it sounds like a light border variant should have been supported, but I believe that was one of the "open questions" related to that PR. This PR re-implements the modifier class .spectrum-Swatch--lightBorder based on a new conversation with design.

I restarted this conversation with Miruna and got clarification from her:

me:
...I've been migrating a bunch of documentation from our static site to storybook. I saw on the static site there was a "light border" variant that we don't currently support, and also found on the Spectrum guidance page that there should be a border around a swatch with low contrast to its background. Right now, we don't have any CSS for this. I was just going to add it during my docs migration, but wanted to double check first that we still should be supporting this, or if I just found outdated info.

Miruna:

...yes the border with low contrast (20% opacity) should be applied to Swatch only when they are in a Swatch group. This helps with comparing colors in a Swatch group better than the 42% opacity border that is applied to the single swatch...I think for Spectrum 1 the border was applied individually by product teams cause it was depending on the color of the Swatch ( it was not applied to all colors in a Swatch group, but dont quote me on that tho lol). But we decided that for S2 we are gonna be more restrictive with this and give the guidance to have a border for single swatch or swatch group cause its an important spectrum component so there should be a design POV in place

me: For the lightBorder, do the values change at all between light/dark modes?

Miruna:

it just stays linked to gray-1000 20% for both

This PR does not address any S2 design recommendations, but does set up CSS support for swatches to have a light border. Further implementation of --lightBorder should be seen in #2925 after this PR is merged.

Jira ticket

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

• Double check with design that lightBorder should be supported, and the value does not change between light and dark modes @marissahuysentruyt
• Visit the swatch docs page
• Inspect the swatch and find .spectrum-Swatch. Verify the swatch has its default border (rgba(0, 0, 0, 0.51)) in light mode.
• Toggle the light and dark modes in the toolbar switcher. The default border should change based on the color mode as before. (rgba(255, 255, 255, 0.51) is for dark/darkest mode)
• Add the .spectrum-Swatch--lightBorder class to the element. Verify the border has changed to rgba(0, 0, 0, 0.2).
• Toggle light and dark modes in the toolbar switcher. The spectrum-Swatch--lightBorder class should mimic the border behavior from before, but now uses --spectrum-Swatch-border-color-light that has a 20% opacity (instead of 51%). You may have to re-add the --lightBorder class each time you change color modes. 😩

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

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• 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.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: fd3914f

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/swatch	Minor

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

[github-actions]

File metrics

Summary

Total size: 4.63 MB^*
Total change (Δ): ⬆ 1.41 KB (0.03%)

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

Package	Size	Δ
swatch	11.46 KB	⬆ 0.42 KB

Details

swatch

File	Head	Base	Δ
index-base.css	11.46 KB	11.05 KB	⬆ 0.42 KB (3.68%)
index-vars.css	11.46 KB	11.05 KB	⬆ 0.42 KB (3.68%)
index.css	11.46 KB	11.05 KB	⬆ 0.42 KB (3.68%)
metadata.json	5.71 KB	5.51 KB	⬆ 0.20 KB (3.49%)

* 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.

[github-actions]

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

[rise-erpelding]

This is good and it works! I left some questions about the code, but another question I have is about what color this light border should be. In the PR description, you note that Miruna said gray-1000 20% for both dark and light mode, but I think this might be a color token that only exists in Spectrum 2? But in that case, it does have different rgb values for dark and light, so maybe rgba(0, 0, 0, 20%) wouldn't be used for both dark and light mode?

Clarification on the color would be great, I think that's about the only thing holding me back from approval here!

[rise-erpelding]

Looks great in dark and light mode! 🎉 Thanks @marissahuysentruyt!