fix(tabs): not selected tab text color as spec

- In da48b6c the color changed from 100 to A100, after checking the spec, the color should be:
> Unfocused tab color: #fff 70%
- made the tabs mixin use parameters and simplified usage

Closes #7920

Author: EladBezalel

src/components/tabs/tabs-theme.scss

@@ -1,68 +1,22 @@
-@mixin md-tab-primary {
+@mixin md-tab-theme($theme) {
   > md-tabs-wrapper {
-    background-color: '{{primary-color}}';
+    background-color: '{{#{$theme}-color}}';
     > md-tabs-canvas {
       > md-pagination-wrapper {
         > md-tab-item:not([disabled]) {
-          color: '{{primary-100}}';
           &.md-active, &.md-focused {
             &, md-icon {
-              color: '{{primary-contrast}}';
+              color: '{{#{$theme}-contrast}}';
             }
           }
           &.md-focused {
-            background: '{{primary-contrast-0.1}}';
+            background: '{{#{$theme}-contrast-0.1}}';
           }
         }
       }
     }
   }
 }
-@mixin md-tab-warn {
-  > md-tabs-wrapper {
-    background-color: '{{warn-color}}';
-    > md-tabs-canvas {
-      > md-pagination-wrapper {
-        > md-tab-item:not([disabled]) {
-          color: '{{warn-100}}';
-          &.md-active, &.md-focused {
-            &, md-icon {
-              color: '{{warn-contrast}}';
-            }
-          }
-          &.md-focused {
-            background: '{{warn-contrast-0.1}}';
-          }
-        }
-      }
-    }
-  }
-}
-@mixin md-tab-accent {
-  > md-tabs-wrapper {
-    background-color: '{{accent-color}}';
-    > md-tabs-canvas {
-      > md-pagination-wrapper {
-        > md-tab-item:not([disabled]) {
-          color: '{{accent-A100}}';
-          &.md-active, &.md-focused {
-            &, md-icon {
-              color: '{{accent-contrast}}';
-            }
-          }
-          &.md-focused {
-            background: '{{accent-contrast-0.1}}';
-          }
-        }
-        > md-ink-bar {
-          color: '{{primary-600-1}}';
-          background: '{{primary-600-1}}';
-        }
-      }
-    }
-  }
-
-}
 md-tabs.md-THEME_NAME-theme {
   md-tabs-wrapper {
     background-color: transparent;
@@ -97,25 +51,37 @@ md-tabs.md-THEME_NAME-theme {
     }
   }
 
+  &.md-accent, &.md-primary, &.md-warn{
+    > md-tabs-wrapper {
+      > md-tabs-canvas {
+        > md-pagination-wrapper {
+          > md-tab-item:not([disabled]) {
+            color: rgba(255, 255, 255, 0.7);
+          }
+        }
+      }
+    }
+  }
+
   &.md-accent {
-    @include md-tab-accent();
+    @include md-tab-theme('accent');
   }
 
   &.md-primary {
-    @include md-tab-primary();
+    @include md-tab-theme('primary');
   }
 
   &.md-warn {
-    @include md-tab-warn();
+    @include md-tab-theme('warn');
   }
 }
 
 md-toolbar > md-tabs.md-THEME_NAME-theme {
-  @include md-tab-primary();
+  @include md-tab-theme('primary');
 }
 md-toolbar.md-accent > md-tabs.md-THEME_NAME-theme {
-  @include md-tab-accent();
+  @include md-tab-theme('accent');
 }
 md-toolbar.md-warn > md-tabs.md-THEME_NAME-theme {
-  @include md-tab-warn();
+  @include md-tab-theme('warn');
 }