Skip to content

Commit bf9e795

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

File tree

1 file changed

+22
-7
lines changed

1 file changed

+22
-7
lines changed

src/material/toolbar/toolbar.scss

+22-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
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';
56
@use '../core/tokens/token-utils';
67
@use './m2-toolbar';
8+
@use '../core/style/variables';
79

810
$row-padding: 16px !default;
911

@@ -19,7 +21,13 @@ $height-mobile-portrait: 56px !default;
1921
background: token-utils.slot(container-background-color);
2022
color: token-utils.slot(container-text-color);
2123

22-
&, h1, h2, h3, h4, h5, h6 {
24+
&,
25+
h1,
26+
h2,
27+
h3,
28+
h4,
29+
h5,
30+
h6 {
2331
font-family: token-utils.slot(title-text-font);
2432
font-size: token-utils.slot(title-text-size);
2533
line-height: token-utils.slot(title-text-line-height);
@@ -55,26 +63,33 @@ $height-mobile-portrait: 56px !default;
5563
.mat-mdc-button-base.mat-mdc-button-base.mat-unthemed {
5664
$color-token: null;
5765

58-
@include token-utils.use-tokens(
59-
$token-prefix, $token-slots) {
66+
@include token-utils.use-tokens($token-prefix, $token-slots) {
6067
$color-token: token-utils.slot(container-text-color);
6168
}
6269

63-
@include token-utils.use-tokens(
64-
m2-text-button.$prefix, m2-text-button.get-token-slots()) {
70+
@include token-utils.use-tokens(m2-text-button.$prefix, m2-text-button.get-token-slots()) {
6571
$token: token-utils.get-token-variable-name(label-text-color);
6672
#{$token}: #{$color-token};
6773
}
6874

6975
@include token-utils.use-tokens(
70-
m2-outlined-button.$prefix, m2-outlined-button.get-token-slots()) {
76+
m2-outlined-button.$prefix,
77+
m2-outlined-button.get-token-slots()
78+
) {
7179
$token: token-utils.get-token-variable-name(label-text-color);
7280
#{$token}: #{$color-token};
7381
}
82+
83+
@include token-utils.use-tokens(m2-icon-button.$prefix, m2-icon-button.get-token-slots()) {
84+
// Update icon button color to match label text color for consistency while overriding.
85+
$token: token-utils.get-token-variable-name(icon-color);
86+
#{$token}: #{$color-token};
87+
}
7488
}
7589
}
7690

77-
.mat-toolbar-row, .mat-toolbar-single-row {
91+
.mat-toolbar-row,
92+
.mat-toolbar-single-row {
7893
display: flex;
7994
box-sizing: border-box;
8095

0 commit comments

Comments
 (0)