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 fd34195

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 5a98cc6 commit fd34195

File tree

2 files changed

+26
-2
lines changed

2 files changed

+26
-2
lines changed

‎src/material/button/button.scss‎

Lines changed: 17 additions & 0 deletions
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‎

Lines changed: 9 additions & 2 deletions
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)

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