diff --git a/src/material/button/button.scss b/src/material/button/button.scss index e82f5305d9d1..a37df7bb627c 100644 --- a/src/material/button/button.scss +++ b/src/material/button/button.scss @@ -258,6 +258,23 @@ @include token-utils.create-token-slot(border-color, outline-color); } + &:hover { + @include token-utils.create-token-slot(border-color, hover-outline-color); + @include token-utils.create-token-slot(color, hover-label-text-color); + } + + &.cdk-program-focused, + &.cdk-keyboard-focused, + &.mat-mdc-button-disabled-interactive:focus { + @include token-utils.create-token-slot(border-color, focus-outline-color); + @include token-utils.create-token-slot(color, focus-label-text-color); + } + + &:active { + @include token-utils.create-token-slot(border-color, pressed-outline-color); + @include token-utils.create-token-slot(color, pressed-label-text-color); + } + // We need to re-apply the disabled tokens since MDC uses // `:disabled` which doesn't apply to anchors. @include button-base.mat-private-button-disabled { diff --git a/src/material/core/tokens/m2/mdc/_outlined-button.scss b/src/material/core/tokens/m2/mdc/_outlined-button.scss index 8240384bf5a8..f03fd1b328c2 100644 --- a/src/material/core/tokens/m2/mdc/_outlined-button.scss +++ b/src/material/core/tokens/m2/mdc/_outlined-button.scss @@ -61,13 +61,20 @@ $prefix: (mdc, outlined-button); rgba(if($is-dark, #fff, #000), 0.12), inspection.get-theme-color($theme, foreground, divider) ); + $color: inspection.get-theme-color($theme, foreground, text, 1); @return ( + outline-color: $outline, disabled-outline-color: $outline, + hover-outline-color: $outline, + focus-outline-color: $outline, + pressed-outline-color: $outline, disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)), - label-text-color: inspection.get-theme-color($theme, foreground, text, 1), - outline-color: $outline, + hover-label-text-color: $color, + focus-label-text-color: $color, + pressed-label-text-color: $color, + label-text-color: $color, ); }