Adding theming css

Author: willshowell

src/lib/tabs/_tabs-theme.scss

@@ -23,42 +23,120 @@
     }
   }
 
+  .mat-tab-label, .mat-tab-link {
+    color: mat-color($foreground, text);
+
+    &.mat-tab-disabled {
+      color: mat-color($foreground, disabled-text);
+    }
+  }
+
+  .mat-tab-header-pagination-chevron {
+    border-color: mat-color($foreground, text);
+  }
+
+  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
+    border-color: mat-color($foreground, disabled-text);
+  }
+
   .mat-tab-group, .mat-tab-nav-bar {
-    .mat-tab-label:focus, .mat-tab-link:focus {
-      background-color: mat-color($primary, lighter, 0.3);
+    &.mat-primary {
+      @include _mat-tabs-color($primary);
+
+      &.mat-background-primary {
+        @include _mat-tabs-color($primary, $primary);
+      }
+
+      &.mat-background-accent {
+        @include _mat-tabs-color($primary, $accent);
+      }
+
+      &.mat-background-warn {
+        @include _mat-tabs-color($primary, $warn);
+      }
     }
 
     &.mat-accent {
-      .mat-tab-label:focus, .mat-tab-link:focus {
-        background-color: mat-color($accent, lighter, 0.3);
+      @include _mat-tabs-color($accent);
+
+      &.mat-background-primary {
+        @include _mat-tabs-color($accent, $primary);
+      }
+
+      &.mat-background-accent {
+        @include _mat-tabs-color($accent, $accent);
+      }
+
+      &.mat-background-warn {
+        @include _mat-tabs-color($accent, $warn);
       }
     }
 
     &.mat-warn {
-      .mat-tab-label:focus, .mat-tab-link:focus {
-        background-color: mat-color($warn, lighter, 0.3);
+      @include _mat-tabs-color($warn);
+
+      &.mat-background-primary {
+        @include _mat-tabs-color($warn, $primary);
+      }
+
+      &.mat-background-accent {
+        @include _mat-tabs-color($warn, $accent);
+      }
+
+      &.mat-background-warn {
+        @include _mat-tabs-color($warn, $warn);
       }
     }
+  }
+}
 
-    .mat-ink-bar {
-      background-color: mat-color($primary);
+@mixin _mat-tabs-color($color, $background-color: null) {
+
+  $tab-focus-color: if($background-color, $background-color, $color);
+
+  // Focus the tab label
+  .mat-tab-label:focus, .mat-tab-link:focus {
+    background-color: mat-color($tab-focus-color, lighter, 0.3);
+  }
+
+  // Set the ink bar to the theme color or default-contrast if
+  // the theme color and background color are the same
+  .mat-ink-bar {
+    background-color: mat-color($color);
+
+    @if $background-color == $color {
+      background-color: mat-color($background-color, default-contrast);
     }
+  }
 
-    &.mat-accent .mat-ink-bar {
-      background-color: mat-color($accent);
+  @if $background-color {
+    // Set background color for the tab group
+    .mat-tab-header, .mat-tab-links {
+      background-color: mat-color($background-color);
     }
 
-    &.mat-warn .mat-ink-bar {
-      background-color: mat-color($warn);
+    // Set labels to contrast against background
+    .mat-tab-label, .mat-tab-link {
+      color: mat-color($background-color, default-contrast);
+
+      &.mat-tab-disabled {
+        color: mat-color($background-color, default-contrast, 0.4);
+      }
     }
 
-  }
+    // Set pagination chevrons to contrast background
+    .mat-tab-header-pagination-chevron {
+      border-color: mat-color($background-color, default-contrast);
+    }
 
-  .mat-tab-label, .mat-tab-link {
-    color: mat-color($foreground, text);
+    .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
+      border-color: mat-color($background-color, default-contrast, 0.4);
+    }
 
-    &.mat-tab-disabled {
-      color: mat-color($foreground, disabled-text);
+    // Remove header border
+    .mat-tab-header {
+      border-bottom: none;
+      border-top: none;
     }
   }
 }

src/lib/tabs/tab-header.scss

@@ -65,10 +65,6 @@
 .mat-tab-header-pagination-disabled {
   box-shadow: none;
   cursor: default;
-
-  .mat-tab-header-pagination-chevron {
-    border-color: #ccc;
-  }
 }
 
 .mat-tab-label-container {