Testing Ionic 4 - Standard color names are not recognized

Bug Report / Feature Request ???

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

4.0.0-alpha.11

Describe the Bug Using a standard color name does not work for a component

Steps to Reproduce

Related Code https://github.com/peterennis/ae-svg-components/blob/master/src/index.html#L34-L37

Expected Behavior Use known names (preferred) or hex codes Ref: https://en.wikipedia.org/wiki/Web_colors

Additional Context This commit refers to “The color to use from your application’s color palette.” https://github.com/ionic-team/ionic/commit/b4976dd914e47c78a743a640f1221836498c2153

I would like to use named colors in my component. It may be necessary to extend Ionic theming. Where is a good place to start?

[brandyscarney]

You can add new colors by creating classes that define them, for example with yellow it would be:

.ion-color-yellow {
  --ion-color-base: #ffff00;
  --ion-color-base-rgb: 255,255,0;
  --ion-color-contrast: #000000;
  --ion-color-contrast-rgb: 0,0,0;
  --ion-color-shade: #e0e000;
  --ion-color-tint: #ffff1a;
}

You could use our color generator to auto generate some of these values here: https://beta.ionicframework.com/docs/theming/color-generator/

We have some documentation on the different layers that make up a color and why they’re needed here: https://beta.ionicframework.com/docs/theming/advanced/#color-language

The documentation does need to be updated to include the new way of adding a color though.

Example for yellow:

<ion-button color="yellow">yellow</ion-button>
<ion-button class="activated" color="yellow">yellow.activated</ion-button>

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.