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

src/components/toolbar/toolbar-theme.scss

@@ -49,33 +49,33 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
   }
 
   &.md-accent {
-    background-color: '{{accent-color}}';
-    color: '{{accent-contrast}}';
+    background-color: '{{accent-500}}';
+    color: '{{accent-500-contrast}}';
 
     .md-ink-ripple {
-      color: '{{accent-contrast}}';
+      color: '{{accent-500-contrast}}';
     }
 
     md-icon {
-      color: '{{accent-contrast}}';
-      fill: '{{accent-contrast}}';
+      color: '{{accent-500-contrast}}';
+      fill: '{{accent-500-contrast}}';
     }
 
     .md-button[disabled] md-icon {
-      color: '{{accent-contrast-0.26}}';
-      fill: '{{accent-contrast-0.26}}';
+      color: '{{accent-500-contrast-0.26}}';
+      fill: '{{accent-500-contrast-0.26}}';
     }
 
     md-input-container[md-no-float] {
       .md-input {
-        @include input-placeholder-color('\'{{accent-default-contrast-hint}}\'');
-        color: '{{accent-default-contrast}}';
-        border-color: '{{accent-default-contrast-divider}}';
+        @include input-placeholder-color('\'{{accent-500-contrast-hint}}\'');
+        color: '{{accent-500-contrast}}';
+        border-color: '{{accent-500-contrast-divider}}';
       }
 
       &.md-input-focused {
         .md-input {
-          @include input-placeholder-color('\'{{accent-default-contrast-secondary}}\'');
+          @include input-placeholder-color('\'{{accent-500-contrast-secondary}}\'');
         }
       }
 
@@ -90,7 +90,7 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
         &.md-input-focused {
           &.md-accent {
             .md-input {
-              border-color: '{{accent-contrast}}';
+              border-color: '{{accent-500-contrast}}';
             }
           }
           &.md-warn {
@@ -104,24 +104,24 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
   }
 
   &.md-warn {
-    background-color: '{{warn-color}}';
-    color: '{{warn-contrast}}';
+    background-color: '{{warn-500}}';
+    color: '{{warn-500-contrast}}';
 
     md-icon {
-      color: '{{accent-contrast}}';
-      fill: '{{accent-contrast}}';
+      color: '{{warn-500-contrast}}';
+      fill: '{{warn-500-contrast}}';
     }
 
     md-input-container[md-no-float] {
       .md-input {
-        @include input-placeholder-color('\'{{warn-default-contrast-hint}}\'');
-        color: '{{warn-default-contrast}}';
-        border-color: '{{warn-default-contrast-divider}}';
+        @include input-placeholder-color('\'{{warn-500-contrast-hint}}\'');
+        color: '{{warn-500-contrast}}';
+        border-color: '{{warn-500-contrast-divider}}';
       }
 
       &.md-input-focused {
         .md-input {
-          @include input-placeholder-color('\'{{warn-default-contrast-secondary}}\'');
+          @include input-placeholder-color('\'{{warn-500-contrast-secondary}}\'');
         }
       }
 
@@ -141,7 +141,7 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
           }
           &.md-warn {
             .md-input {
-              border-color: '{{warn-contrast}}';
+              border-color: '{{warn-500-contrast}}';
             }
           }
         }