enhancement: stop overriding ion-color variables

[brandyscarney]

We should stop overriding the ion-color-* variables in our components such as:

--ion-color-base
--ion-color-contrast
--ion-color-*

This caused conflicts with tabs and probably others. We should instead have some consistent naming that makes it easy for users to know what the property is affecting such as:

--background: #{ion-color(primary, base)};
--color: #{ion-color(primary, contrast)};

Up for discussion but we should get this done sooner rather than later to avoid another API change. cc @manucorporat @camwiegert

[manucorporat]

So, you meant we should start using:

:host(.ion-color) {
  --background: #{ion-color(primary, base)};
}

Note, most of the time we don't need CSS vars for text, we can just inherit these from light dom, we can just use color.

[camwiegert]

Agreed that --ion-color-* vars should be read-only. Seems like a simple convention is best for var names? (e.g. --component-property => --button-background-color)

[manucorporat]

i think scoping CSS vars with the component name is a different topic thought, what's the problem with the current CSS var naming?

[brandyscarney]

Remaining components with these overrides:

• back-button
• fab-button
• item-divider
• item-option
• item
• label
• list-header

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