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) {