search

jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customisation and ease-of-use
https://www.saltdesignsystem.com
Apache License 2.0
111 stars 78 forks source link

Secondary variant on Switch #3052

Open nathanmmiller opened 4 months ago

nathanmmiller commented 4 months ago

Area

UI Components

The problem

Button has a secondary variant. Icon has a secondary color. When you have a secondary icon next to a switch, the switch looks too bright. I would like there to be a "secondary" variant or color for Switch, similar to the Icon (or similar to the Button). Primarily the label of the switch is what I'm concerned with here.

The solution

I envision a prop for Switch called variant that, when the value is "secondary" the .saltSwitch-label will use --salt-content-secondary-foreground for its color.

Alternatives and examples

N/A

Are you a JPMorgan Chase & Co. employee?

joshwooding commented 4 months ago

Hi @nathanmmiller,

We recommend using a primary icon colour. Could you share your use case where you need to use the secondary icon colour?

nathanmmiller commented 4 months ago

@joshwooding It's not actually the icon that's the issue, it's the label text. We have a header component that has icons and text in it, all secondary, but also a switch, which ends up with a much brighter label, which therefore attracts the eyes unnecessarily.

Btw if there are contribution guidelines I'd be very happy to contribute a solution for this.