feat(toggle-button-group): Switched theming to custom properties.

libs/barista-components/toggle-button-group/BUILD.bazel

@@ -1,4 +1,4 @@
-load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("@npm//@bazel/typescript:index.bzl", "ts_config")
 load("//tools/bazel_rules:index.bzl", "jest", "ng_module_view_engine", "stylelint")
 
@@ -23,9 +23,9 @@ ng_module_view_engine(
     tsconfig = "tsconfig_lib",
     deps = [
         "//libs/barista-components/core:compile",
-        "@npm//@angular/core",
         "@npm//@angular/cdk",
         "@npm//@angular/common",
+        "@npm//@angular/core",
         "@npm//rxjs",
     ],
 )
@@ -47,12 +47,6 @@ filegroup(
 sass_binary(
     name = "styles",
     src = "src/toggle-button-group.scss",
-    deps = [":styles_theme"],
-)
-
-sass_library(
-    name = "styles_theme",
-    srcs = ["src/_toggle-button-item-theme.scss"],
 )
 
 sass_binary(
@@ -73,12 +67,12 @@ jest(
     ts_config = ":tsconfig_test",
     deps = [
         ":compile",
-        "//libs/testing/browser",
-        "@npm//@angular/platform-browser",
         "//libs/barista-components/core:compile",
-        "@npm//@angular/core",
+        "//libs/testing/browser",
         "@npm//@angular/cdk",
         "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
         "@npm//rxjs",
     ],
 )

libs/barista-components/toggle-button-group/src/toggle-button-item.scss

@@ -1,8 +1,6 @@
 @import '../../core/src/style/variables';
 @import '../../style/font-mixins';
 @import '../../core/src/style/interactive-common';
-@import '../../core/src/theming/theming';
-@import './toggle-button-item-theme';
 
 :host {
   @include dt-main-font();
@@ -46,14 +44,39 @@
   align-items: center;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
+  background-color: var(--dt-theme-main-default-color);
+}
+
+/** Hover state of the toggle button */
+:host:hover ::ng-deep .dt-toggle-button-item-icon,
+:host:hover.dt-toggle-button-item-selected
+  ::ng-deep
+  .dt-toggle-button-item-icon {
+  background-color: var(--dt-theme-main-hover-color);
+}
+:host.dt-toggle-button-item-selected:hover {
+  border-color: var(--dt-theme-main-hover-color);
+}
+
+/** Active state of the button */
+:host.dt-toggle-button-item-selected {
+  border-color: var(--dt-theme-main-default-color);
+}
+:host.dt-toggle-button-item-selected ::ng-deep .dt-toggle-button-item-icon {
+  background-color: var(--dt-theme-main-default-color);
+}
+
+/* Disabled state */
+:host.dt-toggle-button-item-disabled {
+  color: $gray-300;
+}
+
+:host.dt-toggle-button-item-disabled ::ng-deep .dt-toggle-button-item-icon {
+  background-color: $gray-300;
 }
 
 :host ::ng-deep .dt-icon {
   fill: #ffffff;
   width: 32px;
   height: 32px;
 }
-
-@include dt-apply-theme() {
-  @include dt-theme-toggle-button-item($dt-current-theme);
-}