add option for switch to take custom colors

[apfister]

Description

let the <Switch> take a color option to change the bg & border colors

Related Issue

n/a

Motivation and Context

I want moar colors!

How Has This Been Tested?

just cloned the repo locally, built the docs, and added a sample section in the docs

Screenshots (if appropriate):

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [x] My code follows the code style of this project. (i think??)
• [x] My change requires a change to the documentation.
• [x] I have updated the documentation accordingly.
• [x] I have read the CONTRIBUTING document.

[codylawson]

@apfister In our Card component we allow custom colored bars similar to what you're doing here. One difference is that when the user provides a color name, like "green", we try to match the color to a variable in our theme palette. Do you think this is something we can incorporate in the case of Switch? Using browser named colors seems less useful than providing an easy method to use the theme variables.

[apfister]

@codylawson if i were trying to use the Switch component and i was providing "red" for the color, and "red" did not exist in the theme palette, i'm not sure i'd know why my Switch control isn't red. Isn't using well known color names more intuitive?

[codylawson]

@apfister Hmm, I'm not sure how red or any common color names wouldn't exist as it's built into the default theme and there is a fallback provided to all components. I'm trying to picture a scenario where someone would prefer a browser defined named color over a theme color. Would you be satisfied with having a fallback to the browser named color if the name doesn't exist in the palette? If we're going to go with browser named colors then I think we should provide an example in the docs to show how to provide theme values from a react component.

[apfister]

@codylawson ok that makes sense. i was just worried that if i had no idea that the color param had to take in a name that existed in the theme palette, i would be stuck. Can you still put in the hex/rgb values if you wanted?

[codylawson]

@apfister Yeah maybe something along the lines of:

background-color: `theme.palette[color] || color`;

So if the color doesn't exist as a property name on the theme then you would fallback to just using the string as is.

[apfister]

right on. so if i understand this correctly, if a user has setup a theme, this approach will try to follow that theme first and then fall back to just the browser name color, rgb, hex?

[codylawson]

@apfister All calcite react components have a default theme so it won't matter if they didn't set it up. But yes, if the color string doesn't match any theme property names then it will just be passed to the browser as is.