feat(colorloupe): migrate to s2 drop-shadow tokens

[rise-erpelding]

Description

Migrates color loupe to Spectrum 2 tokens. According to the S2 token spec and S2 components changelog for color loupe, the only updated tokens concern the drop shadow. Color loupe now uses the new drop shadow tokens drop-shadow-elevated-x, drop-shadow-elevated-y, drop-shadow-elevated-blur, and drop-shadow-elevated-color rather than specific color loupe tokens.

CSS-707
S1 Guidelines: https://spectrum.adobe.com/page/color-loupe/

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

@marissahuysentruyt

• Confirm in components/colorloupe/index.css that the color loupe component for S2 is using the tokens listed in the S2 token spec
• Check out the branch locally or use the PR preview to view color loupe in Storybook. Inspect the component (search for the spectrum-ColorLoupe class if needed) and confirm that tokens, especially changed tokens, appear to match the S2 token specs

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: 1749019

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

This PR includes changesets to release 5 packages

Name	Type
@spectrum-css/colorloupe	Major
@spectrum-css/colorhandle	Major
@spectrum-css/colorwheel	Major
@spectrum-css/colorarea	Major
@spectrum-css/colorslider	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

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 4.29 MB^*

🎉 No changes detected in any packages

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

[marissahuysentruyt]

This looks great! Seems like it was a really simple migration- we probably won't get many of those! 😆

Maybe it's just a weird, rendering thing on my end, but does the docs color loupe not have the opacity checkerboard, while the default story does? The markup certainly looks identical to me (I ran it through diffchecker), but I don't know why the checkerboard isn't rendering on the docs instance.

The docs color loupe just seems to behave a little differently to me, even when I change the stroke/stroke width on the svgs:

I see both of these locally and in the PR preview. Any ideas for that? I'm not sure if that's something that would block the approval. 🤷‍♀️ I don't think I see either one of these issues on production so...maybe it's just an old bug. I'm approving anyways!

[marissahuysentruyt]

Should we let design know that there's just a typo in the Border section of the tokens file? I think the second color-loupe-outer-border (which is supposed to be transparent black 200) is meant to say color-loupe-inner-border. Do they want to update and correct that?

[rise-erpelding]

@marissahuysentruyt This is a known bug that I just noticed in Jira earlier today when I was looking for the design verification ticket! https://jira.corp.adobe.com/browse/CSS-775 It looks like it got closed out because it couldn't be reproduced, but I'm seeing it too in Chrome and Firefox with the url that points to the main branch, so it might need to be resurrected!

Maybe it's just a weird, rendering thing on my end, but does the docs color loupe not have the opacity checkerboard, while the default story does? The markup certainly looks identical to me (I ran it through diffchecker), but I don't know why the checkerboard isn't rendering on the docs instance.

The docs color loupe just seems to behave a little differently to me, even when I change the stroke/stroke width on the svgs:

I see both of these locally and in the PR preview. Any ideas for that? I'm not sure if that's something that would block the approval. 🤷‍♀️ I don't think I see either one of these issues on production so...maybe it's just an old bug. I'm approving anyways!