Skip to content

Commit 7f28810

Browse files
amysortommalerba
authored andcommitted
fix(material/toolbar): Update icon button color to match label text color token
1 parent 3a1a0b3 commit 7f28810

File tree

1 file changed

+21
-7
lines changed

1 file changed

+21
-7
lines changed

src/material/toolbar/toolbar.scss

+21-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '@angular/cdk';
2+
@use '../button/m2-icon-button';
23
@use '../button/m2-outlined-button';
34
@use '../button/m2-text-button';
45
@use '../core/style/variables';
@@ -19,7 +20,13 @@ $height-mobile-portrait: 56px !default;
1920
background: token-utils.slot(container-background-color);
2021
color: token-utils.slot(container-text-color);
2122

22-
&, h1, h2, h3, h4, h5, h6 {
23+
&,
24+
h1,
25+
h2,
26+
h3,
27+
h4,
28+
h5,
29+
h6 {
2330
font-family: token-utils.slot(title-text-font);
2431
font-size: token-utils.slot(title-text-size);
2532
line-height: token-utils.slot(title-text-line-height);
@@ -55,26 +62,33 @@ $height-mobile-portrait: 56px !default;
5562
.mat-mdc-button-base.mat-mdc-button-base.mat-unthemed {
5663
$color-token: null;
5764

58-
@include token-utils.use-tokens(
59-
$token-prefix, $token-slots) {
65+
@include token-utils.use-tokens($token-prefix, $token-slots) {
6066
$color-token: token-utils.slot(container-text-color);
6167
}
6268

63-
@include token-utils.use-tokens(
64-
m2-text-button.$prefix, m2-text-button.get-token-slots()) {
69+
@include token-utils.use-tokens(m2-text-button.$prefix, m2-text-button.get-token-slots()) {
6570
$token: token-utils.get-token-variable-name(label-text-color);
6671
#{$token}: #{$color-token};
6772
}
6873

6974
@include token-utils.use-tokens(
70-
m2-outlined-button.$prefix, m2-outlined-button.get-token-slots()) {
75+
m2-outlined-button.$prefix,
76+
m2-outlined-button.get-token-slots()
77+
) {
7178
$token: token-utils.get-token-variable-name(label-text-color);
7279
#{$token}: #{$color-token};
7380
}
81+
82+
@include token-utils.use-tokens(m2-icon-button.$prefix, m2-icon-button.get-token-slots()) {
83+
// Update icon button color to match label text color for consistency while overriding.
84+
$token: token-utils.get-token-variable-name(icon-color);
85+
#{$token}: #{$color-token};
86+
}
7487
}
7588
}
7689

77-
.mat-toolbar-row, .mat-toolbar-single-row {
90+
.mat-toolbar-row,
91+
.mat-toolbar-single-row {
7892
display: flex;
7993
box-sizing: border-box;
8094

0 commit comments

Comments
 (0)