@import '../core/style/elevation'; @import '../core/theming/palette'; @import '../core/theming/theming'; @import '../core/theming/check-duplicate-styles'; @import '../core/typography/typography-utils'; $mat-chip-remove-font-size: 18px; @mixin _mat-chip-element-color($foreground, $background) { background-color: $background; color: $foreground; .mat-chip-remove { color: $foreground; opacity: 0.4; } } // Applies the background color for a ripple element. // If the color value provided is not a Sass color, // we assume that we've been given a CSS variable. // Since we can't perform alpha-blending on a CSS variable, // we instead add the opacity directly to the ripple element. @mixin _mat-chips-ripple-background($palette, $default-contrast, $opacity) { $background-color: mat-color($palette, $default-contrast, $opacity); background-color: $background-color; @if (type-of($background-color) != color) { opacity: $opacity; } } @mixin _mat-chip-theme-color($palette) { @include _mat-chip-element-color(mat-color($palette, default-contrast), mat-color($palette)); .mat-ripple-element { @include _mat-chips-ripple-background($palette, default-contrast, 0.1); } } @mixin mat-chips-color($config-or-theme) { $config: mat-get-color-config($config-or-theme); $is-dark-theme: map-get($config, is-dark); $primary: map-get($config, primary); $accent: map-get($config, accent); $warn: map-get($config, warn); $background: map-get($config, background); $foreground: map-get($config, foreground); $unselected-background: mat-color($background, unselected-chip); $unselected-foreground: mat-color($foreground, text); .mat-chip.mat-standard-chip { @include _mat-chip-element-color($unselected-foreground, $unselected-background); &:not(.mat-chip-disabled) { &:active { @include _mat-theme-elevation(3, $config); } .mat-chip-remove:hover { opacity: 0.54; } } &.mat-chip-disabled { opacity: 0.4; } &::after { background: map_get($foreground, base); } } .mat-chip.mat-standard-chip.mat-chip-selected { &.mat-primary { @include _mat-chip-theme-color($primary); } &.mat-warn { @include _mat-chip-theme-color($warn); } &.mat-accent { @include _mat-chip-theme-color($accent); } } } @mixin mat-chips-typography($config-or-theme) { $config: mat-get-typography-config($config-or-theme); .mat-chip { font-size: mat-font-size($config, body-2); font-weight: mat-font-weight($config, body-2); .mat-chip-trailing-icon.mat-icon, .mat-chip-remove.mat-icon { font-size: $mat-chip-remove-font-size; } } } @mixin _mat-chips-density($config-or-theme) {} @mixin mat-chips-theme($theme-or-color-config) { $theme: _mat-legacy-get-theme($theme-or-color-config); @include _mat-check-duplicate-theme-styles($theme, 'mat-chips') { $color: mat-get-color-config($theme); $density: mat-get-density-config($theme); $typography: mat-get-typography-config($theme); @if $color != null { @include mat-chips-color($color); } @if $density != null { @include _mat-chips-density($density); } @if $typography != null { @include mat-chips-typography($typography); } } }