Closed lboehling closed 1 week ago
I see a couple different solutions for this:
First option would be:
-Base token updates:
nonstatus--gray--100
to gray-60
, nonstatus--gray--200
to gray-50
and nonstatus--gray--300
to gray-40
)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:
icon--color--on-brand
icon--color--on-disabled
border--radius--sharp
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
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.
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: