fix(components): wrong use of accent and primary colors

- Accent colors was 600, should be from the accent palette A700

- ripple accent color was 600, should be from the accent palette A700

- Accent color was 500 and not default (A400) as should be
- In case the user changed the default color, primary color was 500 and not deafult as should be

- Accent colors was 100, should be from the accent palette A100

- ripple accent color was 600, should be from the accent palette A700

- Accent color was 500 and not default (A400) as should be
- hover accent color was 600, should be from the accent palette A700

- focus accent color was 200, should be from the accent palette A200

- Accent colors was 100, should be from the accent palette A100

- Accent color was A200 and not default (A400) as should be

fixed #7879

Closes #7890

Author: EladBezalel

src/components/button/button-theme.scss

@@ -20,10 +20,10 @@
     }
     &:not([disabled]) {
       &:hover {
-        background-color: '{{accent-600}}';
+        background-color: '{{accent-A700}}';
       }
       &.md-focused {
-        background-color: '{{accent-600}}';
+        background-color: '{{accent-A700}}';
       }
     }
   }
@@ -60,10 +60,10 @@
         color: '{{accent-contrast}}';
       }
       &:hover {
-        background-color: '{{accent-600}}';
+        background-color: '{{accent-A700}}';
       }
       &.md-focused {
-        background-color: '{{accent-600}}';
+        background-color: '{{accent-A700}}';
       }
     }
   }
@@ -121,10 +121,10 @@
           color: '{{accent-contrast}}';
         }
         &:hover {
-          background-color: '{{accent-600}}';
+          background-color: '{{accent-A700}}';
         }
         &.md-focused {
-          background-color: '{{accent-600}}';
+          background-color: '{{accent-A700}}';
         }
       }
     }
@@ -157,12 +157,6 @@
 }
 
 a.md-THEME_NAME-theme:not(.md-button) {
-  color: '{{accent-color}}';
-
-  &:hover {
-    color: '{{accent-700}}';
-  }
-
   &.md-primary {
     color: '{{primary-color}}';
 
@@ -171,6 +165,14 @@ a.md-THEME_NAME-theme:not(.md-button) {
     }
   }
 
+  &.md-accent {
+    color: '{{accent-color}}';
+
+    &:hover {
+      color: '{{accent-A700}}';
+    }
+  }
+
   &.md-warn {
     color: '{{warn-color}}';
 

src/components/checkbox/checkbox-theme.scss

@@ -1,6 +1,6 @@
 md-checkbox.md-THEME_NAME-theme {
   .md-ripple {
-    color: '{{accent-600}}';
+    color: '{{accent-A700}}';
   }
 
   &.md-checked .md-ripple {

src/components/input/input-theme.scss

@@ -37,20 +37,20 @@ md-input-container.md-THEME_NAME-theme {
     }
     &.md-input-focused {
       .md-input {
-        border-color: '{{primary-500}}';
+        border-color: '{{primary-color}}';
       }
       label {
-        color: '{{primary-500}}';
+        color: '{{primary-color}}';
       }
       md-icon {
-        color: '{{primary-500}}';
+        color: '{{primary-color}}';
       }
       &.md-accent {
         .md-input {
-          border-color: '{{accent-500}}';
+          border-color: '{{accent-color}}';
         }
         label {
-          color: '{{accent-500}}';
+          color: '{{accent-color}}';
         }
       }
       &.md-warn {

src/components/progressLinear/progress-linear-theme.scss

@@ -19,7 +19,7 @@ md-progress-linear.md-THEME_NAME-theme {
 
   &.md-accent {
     ._md-container {
-      background-color: '{{accent-100}}';
+      background-color: '{{accent-A100}}';
     }
 
     ._md-bar {
@@ -38,10 +38,10 @@ md-progress-linear.md-THEME_NAME-theme {
     }
     &.md-accent {
       ._md-bar1 {
-        background-color: '{{accent-100}}';
+        background-color: '{{accent-A100}}';
       }
       ._md-dashed:before {
-        background: radial-gradient('{{accent-100}}' 0%, '{{accent-100}}' 16%, transparent 42%);
+        background: radial-gradient('{{accent-A100}}' 0%, '{{accent-A100}}' 16%, transparent 42%);
       }
     }
   }

src/components/radioButton/radio-button-theme.scss

@@ -14,7 +14,7 @@ md-radio-button.md-THEME_NAME-theme {
     color: '{{accent-color-0.87}}';
   }
   ._md-container .md-ripple {
-    color: '{{accent-600}}';
+    color: '{{accent-A700}}';
   }
 }
 

src/components/select/select-theme.scss

@@ -71,9 +71,9 @@ md-select-menu.md-THEME_NAME-theme {
           color: '{{primary-600}}';
         }
         &.md-accent {
-          color: '{{accent-500}}';
+          color: '{{accent-color}}';
           &:focus {
-            color: '{{accent-600}}';
+            color: '{{accent-A700}}';
           }
         }
       }

src/components/slider/slider-theme.scss

@@ -7,7 +7,7 @@ md-slider.md-THEME_NAME-theme {
     color: '{{background-contrast}}';
   }
   ._md-focus-ring {
-    background-color: '{{accent-200-0.38}}';
+    background-color: '{{accent-A200-0.2}}';
   }
   ._md-disabled-thumb {
     border-color: '{{background-color}}';

src/components/tabs/tabs-theme.scss

@@ -44,7 +44,7 @@
     > md-tabs-canvas {
       > md-pagination-wrapper {
         > md-tab-item:not([disabled]) {
-          color: '{{accent-100}}';
+          color: '{{accent-A100}}';
           &.md-active, &.md-focused {
             &, md-icon {
               color: '{{accent-contrast}}';
@@ -93,7 +93,7 @@ md-tabs.md-THEME_NAME-theme {
       background: '{{primary-color-0.1}}';
     }
     .md-ripple-container {
-      color: '{{accent-100}}';
+      color: '{{accent-A100}}';
     }
   }
 

src/components/toast/toast-theme.scss

@@ -9,14 +9,14 @@ md-toast.md-THEME_NAME-theme {
 
       &.md-highlight {
         // By default the toast should use the accent color as the primary highlight color
-        color: '{{accent-A200}}';
+        color: '{{accent-color}}';
 
         &.md-primary {
-          color: '{{primary-A200}}';
+          color: '{{primary-color}}';
         }
 
         &.md-warn {
-          color: '{{warn-A200}}';
+          color: '{{warn-color}}';
         }
       }
     }