feat(colorarea): S2 migration

[cdransf]

Description

CSS-1032

This change migrates the colorarea component to S2. It updates the --spectrum-colorarea-border-radius token to --spectrum-colorarea-border-rounding. Additionally, it leverages updated tokens and the rgba(...) color function, replacing the existing TODO and hardcoded values.

Validation steps

1. Run Storybook locally or open the link for the PR.
2. Navigate to the colorarea component.
3. Verify that no regressions are visible.

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

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

This PR includes changesets to release 2 packages

Name	Type
@spectrum-css/colorarea	Major
@spectrum-css/colorwheel	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-3388--spectrum-css.netlify.app

[github-actions]

File metrics

Summary

Total size: 4.29 MB^*
Total change (Δ): ⬆ 0.73 KB (0.02%)

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

Package	Size	Δ
colorarea	3.66 KB	⬆ 0.20 KB

Details

colorarea

File	Head	Base	Δ
index-base.css	3.66 KB	3.46 KB	⬆ 0.20 KB (5.73%)
index-vars.css	3.66 KB	3.46 KB	⬆ 0.20 KB (5.73%)
index.css	3.66 KB	3.46 KB	⬆ 0.20 KB (5.73%)
metadata.json	1.69 KB	1.57 KB	⬆ 0.12 KB (7.53%)

* 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 one seems pretty straightforward. I did come away with some questions after reviewing.

• The designs make a point to include the color loupe in the list of components for color area. Should we add some documentation regarding that? I'm not sure we need to add the color loupe to this template, but I was thinking at least a blurb about "implementations can use the color loupe to..." I don't think there's anything on the main about color loupe with this color area component, but it is mentioned in the Spectrum guidelines: https://spectrum.adobe.com/page/color-area/#Color-loupe-on-down/touch-state Or maybe we link to the color handle docs page, where it talks about color loupe? https://opensource.adobe.com/spectrum-css/preview/index.html?path=/docs/components-color-handle--docs Feel free to get other opinions on this!
• Something I just thought of- I wonder if we should move the forced-colors query. I would have to check with Rise and Josh (or dig through old PRs), but I think when we were doing these components before, we were trying to move the forced-colors block to the bottom of the CSS file to work with the cascade.

[rise-erpelding]

Looks like everything is connecting to the right tokens, there are some duplicated custom properties being used for the border-radii that we'd probably want to sort out though.

Comparing this branch with main, I'm noticing that the component sizes are different, which is fine, but zooming in on the smaller size in this branch I noticed that there's a gap in the corners between the border and the gradient:

This happens in main too, but I'm wondering if that's a thing we can fix for S2. We'd probably want to set the border-radius in .spectrum-ColorArea-gradient to something like calc(var(--spectrum-colorarea-border-radius) - var(--spectrum-colorarea-border-width)) and maybe leave a comment explaining it (I didn't include the mods here but you'd want to add them in too).

[cdransf]

Looks like everything is connecting to the right tokens, there are some duplicated custom properties being used for the border-radii that we'd probably want to sort out though.

Comparing this branch with main, I'm noticing that the component sizes are different, which is fine, but zooming in on the smaller size in this branch I noticed that there's a gap in the corners between the border and the gradient:

This happens in main too, but I'm wondering if that's a thing we can fix for S2. We'd probably want to set the border-radius in .spectrum-ColorArea-gradient to something like calc(var(--spectrum-colorarea-border-radius) - var(--spectrum-colorarea-border-width)) and maybe leave a comment explaining it (I didn't include the mods here but you'd want to add them in too).

I'd noticed that too but I wasn't sure how best to approach it — thanks so much for clarifying! Just pushed up a fix for that.

[rise-erpelding]

Looks great! I think the changeset needs updating to match the changes that have been made here, but otherwise I think this is good to go!

[rise-erpelding]

Do we need "It updates the --spectrum-colorarea-border-radius token to --spectrum-colorarea-border-rounding."? We took out the --spectrum-colorarea-border-rounding custom prop, if I'm remembering correctly?

[cdransf]

Just updated this — thanks so much for catching it! ✨

[marissahuysentruyt]

Thanks for making all of the changes. Looks like everything was take care of from my perspective and things are looking great. I think the only thing we should do is update that changeset like Rise mentioned, but I'm going to approve. Nice work!