diff --git a/scripts/e2e/variables.scss b/scripts/e2e/variables.scss
index 72910b8cc8..a89826721c 100644
--- a/scripts/e2e/variables.scss
+++ b/scripts/e2e/variables.scss
@@ -31,7 +31,15 @@ $colors: (
light: #f4f4f4,
dark: #222,
vibrant: rebeccapurple,
- bright: #ffc125
+ bright: #ffc125,
+ greyYellow: (
+ base:#49606e,
+ contrast:#fbb636
+ ),
+ greyWhite: (
+ base:#49606e,
+ contrast:#fff
+ )
);
diff --git a/src/components/toolbar/test/colors/pages/root-page/root-page.html b/src/components/toolbar/test/colors/pages/root-page/root-page.html
index bd836533da..359b031673 100644
--- a/src/components/toolbar/test/colors/pages/root-page/root-page.html
+++ b/src/components/toolbar/test/colors/pages/root-page/root-page.html
@@ -199,4 +199,11 @@
+
+
+ Grey Yellow
+
+
+ Grey White
+
diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss
index 71cad96362..fa37b1af7f 100644
--- a/src/components/toolbar/toolbar.md.scss
+++ b/src/components/toolbar/toolbar.md.scss
@@ -116,7 +116,6 @@ $toolbar-button-md-strong-font-weight: bold !default;
@mixin md-toolbar-theme($color-name, $color-base, $color-contrast) {
.toolbar-md-#{$color-name} {
- $fg-color: color-contrast($colors-md, $color-base, md);
.toolbar-background-md {
background: $color-base;
@@ -126,19 +125,19 @@ $toolbar-button-md-strong-font-weight: bold !default;
.bar-button-default-md,
.bar-button-outline-md,
.toolbar-title-md {
- color: $fg-color;
+ color: $color-contrast;
}
.bar-button-clear-md,
.bar-button-default-md,
.bar-button-outline-md {
.button-effect {
- background-color: $fg-color;
+ background-color: $color-contrast;
}
}
.bar-button-outline-md {
- border-color: $fg-color;
+ border-color: $color-contrast;
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {