Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 98a94db

Browse files
committed
fix(toolbar): default to 500 hue and contrasts when using accent/warn palettes
- they provide better contrast for a11y - they better align with the examples in the Material Design spec - they align with the theming changes to `md-tabs` in #7685
1 parent d237715 commit 98a94db

File tree

1 file changed

+21
-21
lines changed

1 file changed

+21
-21
lines changed

src/components/toolbar/toolbar-theme.scss

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -49,33 +49,33 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
4949
}
5050

5151
&.md-accent {
52-
background-color: '{{accent-color}}';
53-
color: '{{accent-contrast}}';
52+
background-color: '{{accent-500}}';
53+
color: '{{accent-500-contrast}}';
5454

5555
.md-ink-ripple {
56-
color: '{{accent-contrast}}';
56+
color: '{{accent-500-contrast}}';
5757
}
5858

5959
md-icon {
60-
color: '{{accent-contrast}}';
61-
fill: '{{accent-contrast}}';
60+
color: '{{accent-500-contrast}}';
61+
fill: '{{accent-500-contrast}}';
6262
}
6363

6464
.md-button[disabled] md-icon {
65-
color: '{{accent-contrast-0.26}}';
66-
fill: '{{accent-contrast-0.26}}';
65+
color: '{{accent-500-contrast-0.26}}';
66+
fill: '{{accent-500-contrast-0.26}}';
6767
}
6868

6969
md-input-container[md-no-float] {
7070
.md-input {
71-
@include input-placeholder-color('\'{{accent-default-contrast-hint}}\'');
72-
color: '{{accent-default-contrast}}';
73-
border-color: '{{accent-default-contrast-divider}}';
71+
@include input-placeholder-color('\'{{accent-500-contrast-hint}}\'');
72+
color: '{{accent-500-contrast}}';
73+
border-color: '{{accent-500-contrast-divider}}';
7474
}
7575

7676
&.md-input-focused {
7777
.md-input {
78-
@include input-placeholder-color('\'{{accent-default-contrast-secondary}}\'');
78+
@include input-placeholder-color('\'{{accent-500-contrast-secondary}}\'');
7979
}
8080
}
8181

@@ -90,7 +90,7 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
9090
&.md-input-focused {
9191
&.md-accent {
9292
.md-input {
93-
border-color: '{{accent-contrast}}';
93+
border-color: '{{accent-500-contrast}}';
9494
}
9595
}
9696
&.md-warn {
@@ -104,24 +104,24 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
104104
}
105105

106106
&.md-warn {
107-
background-color: '{{warn-color}}';
108-
color: '{{warn-contrast}}';
107+
background-color: '{{warn-500}}';
108+
color: '{{warn-500-contrast}}';
109109

110110
md-icon {
111-
color: '{{accent-contrast}}';
112-
fill: '{{accent-contrast}}';
111+
color: '{{warn-500-contrast}}';
112+
fill: '{{warn-500-contrast}}';
113113
}
114114

115115
md-input-container[md-no-float] {
116116
.md-input {
117-
@include input-placeholder-color('\'{{warn-default-contrast-hint}}\'');
118-
color: '{{warn-default-contrast}}';
119-
border-color: '{{warn-default-contrast-divider}}';
117+
@include input-placeholder-color('\'{{warn-500-contrast-hint}}\'');
118+
color: '{{warn-500-contrast}}';
119+
border-color: '{{warn-500-contrast-divider}}';
120120
}
121121

122122
&.md-input-focused {
123123
.md-input {
124-
@include input-placeholder-color('\'{{warn-default-contrast-secondary}}\'');
124+
@include input-placeholder-color('\'{{warn-500-contrast-secondary}}\'');
125125
}
126126
}
127127

@@ -141,7 +141,7 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
141141
}
142142
&.md-warn {
143143
.md-input {
144-
border-color: '{{warn-contrast}}';
144+
border-color: '{{warn-500-contrast}}';
145145
}
146146
}
147147
}

0 commit comments

Comments
 (0)