Card Header Not Using Brand Colors

[intellow]

Expected Behavior

If I have customized the $brand colors, such as $brand-primary, then when I create a card with the class "card-header-primary", I expect my custom color to be used.

Current Behavior

Instead, the default values are hard coded in line 164 of _cards.scss. Here is an example of the card-header-primary where purple colors are hard coded instead of the brand colors:

.card-header-primary .card-icon,
    .card-header-primary .card-text,
    .card-header-primary:not(.card-header-icon):not(.card-header-text),
    &.bg-primary,
    &.card-rotate.bg-primary .front,
    &.card-rotate.bg-primary .back{
      background: linear-gradient(60deg, $purple-400, $purple-600);
    }

Recommendation

I recommend using the brand colors for these css classes. Since the card headers are currently using a gradient, I fixed mine by adding a darken($brand-color, 5%). Please see the code below. You should be able to use this or something similar to fix this issue.

.card-header-primary .card-icon,
    .card-header-primary .card-text,
    .card-header-primary:not(.card-header-icon):not(.card-header-text),
    &.bg-primary,
    &.card-rotate.bg-primary .front,
    &.card-rotate.bg-primary .back{
      background: linear-gradient(60deg, darken($brand-primary, 5%), $brand-primary);
    }
    .card-header-info .card-icon,
    .card-header-info .card-text,
    .card-header-info:not(.card-header-icon):not(.card-header-text),
    &.bg-info,
    &.card-rotate.bg-info .front,
    &.card-rotate.bg-info .back{
      background: linear-gradient(60deg, darken($brand-info, 5%), $brand-info);
    }
    .card-header-success .card-icon,
    .card-header-success .card-text,
    .card-header-success:not(.card-header-icon):not(.card-header-text),
    &.bg-success,
    &.card-rotate.bg-success .front,
    &.card-rotate.bg-success .back{
      background: linear-gradient(60deg, darken($brand-success, 5%), $brand-success);
    }
    .card-header-warning .card-icon,
    .card-header-warning .card-text,
    .card-header-warning:not(.card-header-icon):not(.card-header-text),
    &.bg-warning,
    &.card-rotate.bg-warning .front,
    &.card-rotate.bg-warning .back{
      background: linear-gradient(60deg, darken($brand-warning, 5%), $brand-warning);
    }
    .card-header-danger .card-icon,
    .card-header-danger .card-text,
    .card-header-danger:not(.card-header-icon):not(.card-header-text),
    &.bg-danger,
    &.card-rotate.bg-danger .front,
    &.card-rotate.bg-danger .back{
      background: linear-gradient(60deg, darken($brand-danger, 5%), $brand-danger);
    }

[groovemen]

Hello @intellow,

Thank you for using our products and for your useful recommendation, we will integrate these properties into the next update. Please let us know if we can help you with anything else.

All the best, Stefan