Skip to content

Commit d114251

Browse files
committed
feat(material/button): add missing tokens for hover, focus, and active pseudo-classes
Add missing tokens for overriding hover, focus, and active outlines, as well as the label styling of the `outlined-button` in Angular Material. Fixes #30573
1 parent db090ca commit d114251

File tree

2 files changed

+26
-2
lines changed

2 files changed

+26
-2
lines changed

src/material/button/button.scss

+17
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,23 @@
258258
@include token-utils.create-token-slot(border-color, outline-color);
259259
}
260260

261+
&:hover {
262+
@include token-utils.create-token-slot(border-color, hover-outline-color);
263+
@include token-utils.create-token-slot(color, hover-label-text-color);
264+
}
265+
266+
&.cdk-program-focused,
267+
&.cdk-keyboard-focused,
268+
&.mat-mdc-button-disabled-interactive:focus {
269+
@include token-utils.create-token-slot(border-color, focus-outline-color);
270+
@include token-utils.create-token-slot(color, focus-label-text-color);
271+
}
272+
273+
&:active {
274+
@include token-utils.create-token-slot(border-color, pressed-outline-color);
275+
@include token-utils.create-token-slot(color, pressed-label-text-color);
276+
}
277+
261278
// We need to re-apply the disabled tokens since MDC uses
262279
// `:disabled` which doesn't apply to anchors.
263280
@include button-base.mat-private-button-disabled {

src/material/core/tokens/m2/mdc/_outlined-button.scss

+9-2
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,20 @@ $prefix: (mdc, outlined-button);
6161
rgba(if($is-dark, #fff, #000), 0.12),
6262
inspection.get-theme-color($theme, foreground, divider)
6363
);
64+
$color: inspection.get-theme-color($theme, foreground, text, 1);
6465

6566
@return (
67+
outline-color: $outline,
6668
disabled-outline-color: $outline,
69+
hover-outline-color: $outline,
70+
focus-outline-color: $outline,
71+
pressed-outline-color: $outline,
6772
disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button,
6873
if($is-dark, 0.5, 0.38)),
69-
label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
70-
outline-color: $outline,
74+
hover-label-text-color: $color,
75+
focus-label-text-color: $color,
76+
pressed-label-text-color: $color,
77+
label-text-color: $color,
7178
);
7279
}
7380

0 commit comments

Comments
 (0)