feat(slider)!: migrating tokens

[bernhard-adobe]

Core tokens migration for Slider.
Includes t-shirt sizing

Description

Migrated and modded all vars.
Added t-shirt sizing

ticket: https://jira.corp.adobe.com/projects/CSS/issues/CSS-177

Issues Addressed

• Slider Handle Animation Issue 2917
• Slider Cursor Pointer Issue 2918
• Slider Controls Margin Issue 711
• Slider Tick Alignment Issue 2990

How and where has this been tested?

• How this was tested: comparing http://localhost:3000/docs/slider.html vs https://opensource.adobe.com/spectrum-css/slider.html#withlabel
• Browser(s) and OS(s) this was tested with: Chrome Version 110.0.5419.3 (Official Build) canary (arm64)

Screenshots

Firefox:

Safari:

QA notes

• Validate circle alignment on tick marks
• Validate circle alignment at edges

To-do list

• 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.
• I have read the CONTRIBUTING document.
• I have tested these changes in Windows High Contrast mode.
• This pull request is ready to merge.

[github-actions]

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

[lunarfusion]

Ignore anything that isn't helpful, of course!

[lunarfusion]

I think lines 176 and 177 are redundant of lines 158 and 159.

[bernhard-adobe]

they all are! unclear why they were added in the non-core-tokens version.

[bernhard-adobe]

@lunarfusion I addressed your feedback! Thanks a lot for the impressive review, excellent work!

The only thing missing here is the top centering that I can't get to work as mentioned above. The handle aligns in the center of the entire Slider height, not just the center of the track.
Did you try this out in the browser or did you check out the branch locally and pasted in the code?

Thanks for pointing me to a good solution!

[pfulton]

It looks like there might be a mismatch between the track color and the tick color (zoomed in to see the difference) - or - maybe there's a z-index issue here?

Also, with regard to the tick position & the handle, there's an open PR from last year that you might be able to get some info from.

[bernhard-adobe]

It looks like there might be a mismatch between the track color and the tick color (zoomed in to see the difference) - or - maybe there's a z-index issue here?

Also, with regard to the tick position & the handle, there's an open PR from last year that you might be able to get some info from.

Nah, it's just the wrong color. we don't use tokens for the ticks and even in the current version of slider there is a color bug for the disabled ticks.

https://opensource.adobe.com/spectrum-css/slider.html#tickwithlabels

I have fixed the wrong color. good catch.

[pfulton]

Thanks for fixing up the positioning of the tick and the handle!

I noticed a few new things in this most recent review:

It looks like the spacing on the right side of the handle has been adversely affected by the recent changes:

It's particularly noticeable on the slider with two handles:

Also, the tick/track color difference seems to still be an issue:

Finally, would you mind double-checking on the Windows High Contrast Mode styles? It looks like (at least) the standard, non-disabled version of the track color needs to be fixed:

Your branch:

Current production:

[pfulton]

We're almost there on the Windows High Contrast Mode styles! Two things I noticed: the ticks are missing, and the ramp seems to be different now vs. what's live in production.

Your branch:

Production:

Could you fix up those examples?

[bernhard-adobe]

I'm not sure that this suggestion actually got implemented (or, at least it doesn't seem to be in the codebase, so maybe it didn't get committed?) because I still see the misalignment. Mind taking a quick look?

@pfulton this actually adds a wider space between the slider handle on the right side between the handle and the track. I would suggest to maybe not implement this solution.

[pfulton]

@pfulton this actually adds a wider space between the slider handle on the right side between the handle and the track. I would suggest to maybe not implement this solution.

Ok. Because this has been a long-standing issue with this component in our docs site, we still need to fix this problem before we merge the PR in. If you get stuck on finding a solution, please mention it in the spectrum_css_dev channel so that more folks can lend a hand.

[castastrophe]

In case they haven't been highlighted yet, I wanted to make sure we'd addressed the following PRs here since their updates won't apply once this merges: #1005, #1133, #1206, #1289

[bernhard-adobe]

Thanks @castastrophe .
We got the following PRs covered in https://jira.corp.adobe.com/browse/CSS-332 Clean up old Slider PRs:
#1206 and #1289

I will add to the ticket the PRs and ping @pfulton about the updates.
#1005, #1133