Overwrite components to have color props

[jennur]

As discussed with @kpsherva

Is your feature request related to a problem? Please describe.

Some SUI components (e.g. <Label />, <Icon />, <Button />) have a color prop that is/was frequently used by us, but it only takes hardcoded colors ("red", "blue", "green"...). Therefore, we have introduced general color classes ("positive", "negative", "neutral", "warning", "expired"), but these are currently added to className and thus not following the SUI React structure (as for buttons and the positive/negative prop, e.g. <Button positive />.

In SUI only positive and negative exists, and only for the <Button /> component.

Describe the solution you'd like

Overwrite components that use color-classes (any component that has the prop color), so that our general color classes can be added as props instead of adding the class to className or hardcoding the colors in the color-prop.

Colors should be possible to add like the following:

<SUIElement colorName /> where <SUIElement/> is any element that can have a specified color, and colorName is any of the following: positive, negative, neutral, warning, expired.

Examples

• <Label positive />
• <Icon negative />
• <Button warning />