Testing Ionic 4 - Standard color names are not recognized

[peterennis]

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."
b4976dd

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>

[peterennis]

@brandyscarney Great! Thanks for the note. I will play with this and check the docs.

[peterennis]

@brandyscarney
I have an initial working demo for all named colors here: https://aesvg.adaept.com/
div background colors are hard coded to show some contrast with the icon colors.

How can I reference the base/contrast... colors with vars?
How would this be passed into the component as an option?

I want to test the color presentation effects more thoroughly.

[brandyscarney]

Thanks for the issue! At this time we are not going to be adding this functionality to the color attribute. Please use CSS and the CSS variables available to change specific background/colors.

See this forum post for ways to reference the added color's base/contrast: https://forum.ionicframework.com/t/ionic-4-how-to-get-color-values-from-element-styled-with-color-directive/145458

I also created an issue to document that here: ionic-team/ionic-docs#159

For future theming questions, please ask on the forum as it will help other people out, as well. Thanks! 🙂

[ionitron-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.