From b6e0b20e1f72f48622179f0a8859b76df056b484 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Mon, 5 Feb 2024 14:40:08 -0800 Subject: [PATCH] fix(material-experimental/theming): Fix chip trailing icon opacity in M3 (#28530) --- .../theming/_custom-tokens.scss | 3 ++ src/material/chips/chip.scss | 42 +++++++++++++++---- src/material/core/tokens/m2/mat/_chip.scss | 2 + src/material/core/tokens/m2/mdc/_chip.scss | 4 +- 4 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss index 7c8572d65c67..c807b6a72883 100644 --- a/src/material-experimental/theming/_custom-tokens.scss +++ b/src/material-experimental/theming/_custom-tokens.scss @@ -206,6 +206,8 @@ map.get($systems, md-sys-state, hover-state-layer-opacity), trailing-action-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + trailing-action-opacity: _hardcode(1, $exclude-hardcoded), + trailing-action-focus-opacity: _hardcode(1, $exclude-hardcoded), ), ( primary: ( selected-trailing-icon-color: map.get($systems, md-sys-color, on-primary-container), @@ -278,6 +280,7 @@ selected-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), with-icon-disabled-icon-opacity: _hardcode(0.38, $exclude-hardcoded), + with-trailing-icon-disabled-trailing-icon-opacity: _hardcode(0.38, $exclude-hardcoded), ), ), ( // Color variants: diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss index d1fc8fc7efbc..9525013d2710 100644 --- a/src/material/chips/chip.scss +++ b/src/material/chips/chip.scss @@ -23,6 +23,8 @@ } // Add additional slots for the MDC chip tokens, needed in Angular Material. + $disabled-trailing-icon-opacity: 1; + @include token-utils.use-tokens(tokens-mdc-chip.$prefix, $mdc-chip-token-slots) { .mat-mdc-chip-focus-overlay { @include token-utils.create-token-slot(background, focus-state-layer-color); @@ -56,6 +58,14 @@ @include token-utils.create-token-slot(opacity, with-avatar-disabled-avatar-opacity); } + .mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing { + $disabled-trailing-icon-opacity: + token-utils.get-token-variable(with-trailing-icon-disabled-trailing-icon-opacity); + + @include token-utils.create-token-slot( + opacity, with-trailing-icon-disabled-trailing-icon-opacity); + } + .mdc-evolution-chip--disabled.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark { @include token-utils.create-token-slot(opacity, with-icon-disabled-icon-opacity); } @@ -81,6 +91,12 @@ } .mat-mdc-chip-remove { + @include token-utils.create-token-slot(opacity, trailing-action-opacity); + + &:focus { + @include token-utils.create-token-slot(opacity, trailing-action-focus-opacity); + } + &::after { @include token-utils.create-token-slot(background, trailing-action-state-layer-color); } @@ -98,6 +114,24 @@ @include token-utils.create-token-slot( background, selected-trailing-action-state-layer-color); } + + // If the trailing icon is a chip-remove button, we have to factor in the trailing action + // opacity as well as the disabled opacity. + .mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing { + &.mat-mdc-chip-remove { + opacity: calc( + var(#{token-utils.get-token-variable(trailing-action-opacity)}) * + var(#{$disabled-trailing-icon-opacity}) + ); + + &:focus { + opacity: calc( + var(#{token-utils.get-token-variable(trailing-action-focus-opacity)}) * + var(#{$disabled-trailing-icon-opacity}) + ); + } + } + } } } @@ -307,14 +341,6 @@ } .mat-mdc-chip-remove { - // Fades out the trailing icon slightly so that it can become darker when focused. - // The MDC theming has variables for this, but the focus/hover states don't seem to work. - opacity: 0.54; - - &:focus { - opacity: 1; - } - &::before { $default-border-width: focus-indicators-private.$default-border-width; $offset: var(--mat-mdc-focus-indicator-border-width, #{$default-border-width}); diff --git a/src/material/core/tokens/m2/mat/_chip.scss b/src/material/core/tokens/m2/mat/_chip.scss index 1ae160929a6a..6ce840b09f59 100644 --- a/src/material/core/tokens/m2/mat/_chip.scss +++ b/src/material/core/tokens/m2/mat/_chip.scss @@ -12,6 +12,8 @@ $prefix: (mat, chip); @function get-unthemable-tokens() { @return ( disabled-container-opacity: 0.4, + trailing-action-opacity: 0.54, + trailing-action-focus-opacity: 1, trailing-action-state-layer-color: transparent, selected-trailing-action-state-layer-color: transparent, trailing-action-hover-state-layer-opacity: 0, diff --git a/src/material/core/tokens/m2/mdc/_chip.scss b/src/material/core/tokens/m2/mdc/_chip.scss index f0abf986715c..5a6a78304752 100644 --- a/src/material/core/tokens/m2/mdc/_chip.scss +++ b/src/material/core/tokens/m2/mdc/_chip.scss @@ -55,6 +55,8 @@ $prefix: (mdc, chip); flat-selected-outline-width: 0, // The opacity of the chip's state overlay when selected and hovered. selected-hover-state-layer-opacity: 0.04, + // The opacity of the chip's trailing icon when it is disabled. + with-trailing-icon-disabled-trailing-icon-opacity: 1, // The opacity of the chip's leading icon when it is disabled. with-icon-disabled-icon-opacity: 1, // Not used by MDC. @@ -76,8 +78,6 @@ $prefix: (mdc, chip); // Not used by MDC. with-leading-icon-leading-icon-size: null, // Not used by MDC. - with-trailing-icon-disabled-trailing-icon-opacity: null, - // Not used by MDC. with-trailing-icon-trailing-icon-size: null, // Elevated chips not implemented. container-elevation: null,