Rethink styles used for slider ticks/tracks and progress bar tracks

[lboehling]

The tokens we use in v6 for our sliders and progress bars work well for the light themes but don't translate well to the dark themes. The slider/progress tracks don't have enough contrast with the dark brand token value, and the slider tick marks in the dark theme don't show against the track color. Need to either use different existing tokens here or create new tokens.

Sliders:

Progress bars:

[lboehling]

I see a couple different solutions for this:

First option would be:

-Base token updates:

• Adjust dark palette base values for color--nonstatus--gray (nonstatus--gray--100 to gray-60, nonstatus--gray--200 to gray-50 and nonstatus--gray--300 to gray-40)
• Adjust semantic tokens for on-gray text & on-gray icon to use text--color--regular and icon--color--regular note: this will change the dark theme gray label, but i think it's a nice update actually since the current gray label looks very similar to the disabled label in dark theme

-Progress bar: (No changes in core needed, would be handled at token level with the adjustments above)

-Slider:

• track: adjust bkg color to use nonstatus gray bkg color token
• tick: adjust filled tick color to use icon--color--on-brand
• tick: adjust disabled tick color to use icon--color--on-disabled
• tick: adjust border radius to border--radius--sharp
• tick: adjust width to .15rem

OR second option:

Possibly consider adding in new tokens for track/tick bkg color that would be used across slider/progress components. this would require more updates in core to both progress and slider components once made. --global--color--track--unfilled--default --global--color--track--filled--brand --global--color--track--filled--warning --global--color--track--filled--danger --global--color--track--filled--success --global--icon--color--tick--unfilled--default --global--icon--color--tick--filled--on-brand --global--icon--color--tick--filled--on-warning --global--icon--color--tick--filled--on-danger --global--icon--color--tick--filled--on-success

[lboehling]

After reviewing with @andrew-ronaldson and @mcoker, we decided to go with option 1. Tokens and components have been updated in Figma! Opening a follow up issue in core.