Ionic-framework: bug: Ionic 4 card color only affects the text color.

[Domvel]

Bug Report

Ionic version:
4.7.1

Current behavior:
The color property of ion-card only affects the text color.

<ion-card color="danger">
  <ion-card-header>
    Hello World
  </ion-card-header>
</ion-card>

Results to:

Expected behavior:
The color attribut of ion-card should also affect to the background-color.
And the text color in contrast. (like already works.)

Steps to reproduce: / Related code:
There is no official Ionic 4 template in Stackblitz.
But I think this does not need a demo.
Because the code snippets here and screenshots completely describes the issue.
Please let me know, if you still want some demos.
See the Current behavior section above for an example.

[domske]

In the current master and the tag 4.7.1 the card color works as expected. 🤔 See source code test.

I also tested it in a new Ionic project. (4.7.1) It works. Please check your stylings (scss) on your page and globally. Maybe it affects to it.

My project result:

[paulstelzer]

Thanks for your issue! There is an official Ionic4 template on Stackblitz. You can find it here -> https://stackblitz.com/edit/ionic-v4-angular-tabs

I tried your code and it works like your described -> https://stackblitz.com/edit/ionic-v4-angular-tabs-8sw5fv?file=src/app/tab1/tab1.page.html

[Domvel]

Thanks and sorry. It was a variable in variable.scss.

// Default
--ion-item-background: #ffffff;
// Dark
--ion-item-background: #1a1b1e;

But I want this variable. I thought it's the default value.
I expected that the color attribute on an item / element is dominant.
Is this a bug? Or is there another way to set the default color.
I thinks it's a bug. Because I don't want to overwrite the color-attribute (danger, etc.).
You can close this issue if this works like expected. But I wondering how to set the default background of items in themes?

Please look at this:
https://stackblitz.com/edit/ionic-v4-angular-tabs-3d4cz6?embed=1&file=src/styles.css
Bug or not? If not, how to set the default color of an item?
PS: I see that the card-background is by default the --ion-background-color. (e.g. ion-content)
Therefore I have to set --ion-item-background to white. This should be the default color.

[Domvel]

A workaround is:

.my-card {
  --background: var(--ion-color-danger);
}

See demo

But I want the official way color attribute. :baby: I think it's a bug.

[brandyscarney]

Yes, this seems like a bug. It should use the color attribute background. Here's where the source of the problem likely is: https://github.com/ionic-team/ionic/blob/master/core/src/components/card/card.scss#L30-L39

:host(.ion-color) {
  background: current-color(base);
  color: current-color(contrast);
}

:host(.ion-color)::slotted(*) ion-card-header,
:host(.ion-color)::slotted(*) ion-card-title,
:host(.ion-color)::slotted(*) ion-card-subtitle {
  color: current-color(contrast);
}

[domske]

The problem is not the ion-card itself, it's the ion-card-header. As you can see in the demo posted before.
Because the header also has a background color and uses the ion-item-background.

Solution:

card.scss

:host(.ion-color) {
  background: current-color(base);
  color: current-color(contrast);
}

:host(.ion-color)::slotted(*) ion-card-header,
:host(.ion-color)::slotted(*) ion-card-title,
:host(.ion-color)::slotted(*) ion-card-subtitle {
  background: current-color(base);
  color: current-color(contrast);
}

Or should we set the background to transparent? Or change the ion-card-header?
Please see my pull-request. (above)

[adamdbradley]

In the next major release of Ionic we'll be switching ion-card to use shadow dom, and within this PR it should fix this issue: https://github.com/ionic-team/ionic/pull/19395

Thanks for filing the issue and helping to debug!

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