update slider to use semantic tokens

[rachethecreator]

Updates react-slider to use semantic tokens.

Gaps noted here

[github-actions]

Pull request demo site: URL

[Mitch-At-Work]

Looks good!

Semantic theme has one weird feature where the bar itself shrinks vs default state on hover/press if they are variant sizes - can see this happening in Kumo theme.

Let's see if we can fix this up so that when indicator size changes the progress bar remains constant, we'll likely need to account for the indicator width during hover/pressed states in width style (or set styles to display the thumb in absolute space to avoid it affecting width at all)

[rachethecreator]

Looks good!

Semantic theme has one weird feature where the bar itself shrinks vs default state on hover/press if they are variant sizes - can see this happening in Kumo theme.

Let's see if we can fix this up so that when indicator size changes the progress bar remains constant, we'll likely need to account for the indicator width during hover/pressed states in width style (or set styles to display the thumb in absolute space to avoid it affecting width at all)

So figured out that the rail width would change depending on thumb size because of this gridTemplateColumns/Rows: 1fr calc(100% - var(${sliderThumbSizeVar})) 1fr. I've updated it so that each side is set by a padding semantic token, which is how it's done in designs, and the rail takes up rest of the space in between. I've also made sure that the padding tokens in variant fallbacks is set as the same as the current implementation. You can see these changes in the second commit.

The thumb size changing on hover/press is due to the semantic tokens all being different - you have to set ctrlSliderThumbSizeRest/Hover/Pressed all separately for the thumb size to stay the same during all states.