Create consumer button themes

Issue Description

As an application developer, I need predefined consumer button themes available so that i can apply it to terra button.

Example:

import Button from 'terra-button';
import 'terra-button/consumer-button-themes.css';

<Button className='consumer-button-default-theme' />
<Button className='consumer-button-concept1-theme' />

Generating Theme CSS

Solution 1: Basic CSS

consumer-button-themes.css

.consumer-button-default-theme {
  --color: #123456
  --terra-button-active-background-color-default: rgb(--color, 0.2);
  --terra-button-active-border-color-default: rgb(--color, 0.5)
  --terra-button-active-color-default: --color;  
  ....(all 34 color variables)
}

.consumer-button-concept1-theme {
  --color: #adsqew
  --terra-button-active-background-color-default: rgb(--color, 0.2);
  --terra-button-active-border-color-default: rgb(--color, 0.5)
  --terra-button-active-color-default: --color;  
  ....
}
......

Obviously, there is a repeating pattern for generating theme classes.

Solution 2: SCSS

$color-map: (
  default: #123456,
  concept1: #qwerty,
  ...
);

@each $color in $color-map {
   .consumer-button-#{$color}-theme {
        --terra-button-active-background-color-default: rgb($color, 0.2);
        --terra-button-active-border-color-default: rgb($color, 0.5)
        --terra-button-active-color-default: $color;  
        ....
   }
}

Solution 3: PostCSS plugin Need to look into that, would be great if you have an idea.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

[zhongyn]

@mhemesath @alex-bezek how about this:

.consumer-button-theme {
  --color: #123456; 
  --terra-button-active-background-color-default: rgb(var(--color), 0.2);
  --terra-button-active-border-color-default: rgb(var(--color), 0.5)
  --terra-button-active-color-default: var(--color);  
  ....(all 34 color variables)
}

.concept1 { --color: #qwe123; }
.concept2 { --color: #123qwe; }
...

[bjankord]

This will be covered in https://github.com/cerner/terra-core/issues/1038