igx-chip has a different background color

[kdinev]

Description

The igx-chip component looks different in 13.0 from 12.2. Note: to me the chip looks better, but if this is intentional, then it should be documented with an example of how to return its look and feel back to the old version.

• igniteui-angular version: 13.0.0-alpha.7
• browser: all

Steps to reproduce

1. Create an angular view with an igx-chip.
2. Define the following theme:

$primary: white !default;
$secondary: #FF0A3A !default;
$background: #192053;
$banner-background: #2C3D93;
$background-gradient: linear-gradient(to right, $background, #04081D);
$background-gradient-lighter: linear-gradient(135deg, #2f3978 0%, #10193f 100%);
$progress-success: #13FF21;

$app-palette: igx-palette($primary, $secondary);

@include igx-dark-theme(
  $palette: $app-palette
);

.igx-chip {
  margin: 4px 4px 4px 0;
}

Result

Note: chips that are not selected are pretty much unreadable:

Expected result

Attachments

Attach a sample if available, and screenshots, if applicable.

[kdinev]

I got this resolved by adding $grays to my app-palette. However, the transparency is lost.

$primary: white;
$secondary: #FF0A3A;
$grays: white;

$app-palette: igx-palette($primary: $primary, $secondary: $secondary, $grays: $grays);

@include igx-palette-vars($app-palette);