feat(tabs): Switched theming to custom properties.

libs/barista-components/tabs/BUILD.bazel

@@ -1,4 +1,4 @@
-load("@io_bazel_rules_sass//:defs.bzl", "multi_sass_binary", "sass_library")
+load("@io_bazel_rules_sass//:defs.bzl", "multi_sass_binary")
 load("@npm//@bazel/typescript:index.bzl", "ts_config")
 load("//tools/bazel_rules:index.bzl", "jest", "ng_module_view_engine", "stylelint")
 
@@ -45,17 +45,11 @@ ng_module_view_engine(
     ],
 )
 
-sass_library(
-    name = "theme",
-    srcs = ["src/_tab-group-theme.scss"],
-)
-
 multi_sass_binary(
     name = "styles",
     srcs = [
         "src/tab-group.scss",
         "src/tab/tab-body.scss",
-        ":theme",
     ],
 )
 
@@ -75,9 +69,9 @@ jest(
         "//libs/barista-components/core:compile",
         "//libs/testing/browser",
         "@npm//@angular/common",
-        "@npm//@angular/router",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
+        "@npm//@angular/router",
         "@npm//rxjs",
     ],
 )

libs/barista-components/tabs/src/tab-group.scss

@@ -1,9 +1,25 @@
 @import '../../style/font-mixins';
 @import '../../core/src/style/variables';
-@import '../../core/src/theming/theming';
-@import './tab-group-theme';
 @import '../../core/src/style/interactive-common';
 
+:host .dt-color-main {
+  --dt-tabgroup-default-color: var(--dt-theme-main-default-color);
+}
+
+:host .dt-color-recovered {
+  --dt-tabgroup-default-color: var(--dt-recovered-default-color);
+  &.dt-tab-label {
+    color: var(--dt-tabgroup-default-color);
+  }
+}
+
+:host .dt-color-error {
+  --dt-tabgroup-default-color: var(--dt-error-default-color);
+  &.dt-tab-label {
+    color: var(--dt-tabgroup-default-color);
+  }
+}
+
 :host .dt-tab-header-wrapper {
   display: flex;
 }
@@ -37,12 +53,18 @@
     bottom: 0;
     left: 0;
     transition: height 100ms ease-out;
+    background-color: var(--dt-tabgroup-default-color);
   }
 
   &:hover::after {
     height: 4px;
   }
 
+  &.dt-tab-label-active {
+    background-color: var(--dt-tabgroup-default-color);
+    color: #ffffff;
+  }
+
   @include dt-cdkmonitor-focus-style();
 
   /** disabled
@@ -63,7 +85,3 @@
     }
   }
 }
-
-@include dt-apply-theme() {
-  @include dt-theme-tabs($dt-current-theme);
-}