Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 931ac3c

Browse files
fix(material/chips): Adjust trailing icon opacity based on chip state (#31828)
1 parent 878700d commit 931ac3c

File tree

2 files changed

+23
-7
lines changed

2 files changed

+23
-7
lines changed

‎src/material/chips/_m3-chip.scss

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,8 @@
4949
chip-selected-label-text-color: map.get($system, on-secondary-container),
5050
chip-selected-trailing-action-state-layer-color: map.get($system, on-secondary-container),
5151
chip-selected-trailing-icon-color: map.get($system, on-secondary-container),
52-
// Parent chips will show focus/hover state as well so need stronger focus/hover styling here
53-
chip-trailing-action-focus-state-layer-opacity:
54-
calc(map.get($system, focus-state-layer-opacity) * 2),
55-
chip-trailing-action-hover-state-layer-opacity:
56-
calc(map.get($system, hover-state-layer-opacity) * 2),
52+
chip-trailing-action-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
53+
chip-trailing-action-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
5754
chip-trailing-action-state-layer-color: map.get($system, on-surface-variant),
5855
chip-with-icon-disabled-icon-color: map.get($system, on-surface),
5956
chip-with-icon-icon-color: map.get($system, on-surface-variant),

‎src/material/chips/chip.scss

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -520,6 +520,7 @@ $fallbacks: m3-chip.get-tokens();
520520
}
521521

522522
.mat-mdc-chip-edit, .mat-mdc-chip-remove {
523+
$chip-opacity: token-utils.slot(chip-hover-state-layer-opacity, $fallbacks);
523524
opacity: token-utils.slot(chip-trailing-action-opacity, $fallbacks);
524525

525526
&:focus {
@@ -531,11 +532,13 @@ $fallbacks: m3-chip.get-tokens();
531532
}
532533

533534
&:hover::after {
534-
opacity: token-utils.slot(chip-trailing-action-hover-state-layer-opacity, $fallbacks);
535+
$action-opacity: token-utils.slot(chip-trailing-action-hover-state-layer-opacity, $fallbacks);
536+
opacity: calc($chip-opacity + $action-opacity);
535537
}
536538

537539
&:focus::after {
538-
opacity: token-utils.slot(chip-trailing-action-focus-state-layer-opacity, $fallbacks);
540+
$action-opacity: token-utils.slot(chip-trailing-action-focus-state-layer-opacity, $fallbacks);
541+
opacity: calc($chip-opacity + $action-opacity);
539542
}
540543
}
541544

@@ -544,6 +547,22 @@ $fallbacks: m3-chip.get-tokens();
544547
background-color: token-utils.slot(chip-selected-trailing-action-state-layer-color, $fallbacks);
545548
}
546549

550+
.mat-mdc-chip.cdk-focused {
551+
$chip-opacity: token-utils.slot(chip-selected-focus-state-layer-opacity, $fallbacks);
552+
553+
.mat-mdc-chip-edit, .mat-mdc-chip-remove {
554+
&:focus::after {
555+
$action-opacity: token-utils.slot(chip-trailing-action-focus-state-layer-opacity, $fallbacks);
556+
opacity: calc($chip-opacity + $action-opacity);
557+
}
558+
559+
&:hover::after {
560+
$action-opacity: token-utils.slot(chip-trailing-action-hover-state-layer-opacity, $fallbacks);
561+
opacity: calc($chip-opacity + $action-opacity);
562+
}
563+
}
564+
}
565+
547566
.mat-mdc-standard-chip {
548567
-webkit-tap-highlight-color: transparent;
549568

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /