feat(table): Changed theming of rows to Custom properties.

libs/barista-components/table/src/expandable/expandable-row.scss

@@ -1,8 +1,51 @@
 @import '../../../core/src/style/variables';
 @import '../../../core/src/style/table';
-@import '../../../core/src/theming/theming';
 @import '../table-mixins';
-@import './expandable-row-theme';
+
+:host {
+  --dt-expandable-row-border-color: #{$turquoise-500};
+  --dt-expandable-row-background-color: #{$turquoise-100};
+}
+:host-context(.dt-theme-turquoise) {
+  --dt-expandable-row-border-color: #{$turquoise-500};
+  --dt-expandable-row-background-color: #{$turquoise-100};
+}
+:host-context(.dt-theme-blue) {
+  --dt-expandable-row-border-color: #{$blue-500};
+  --dt-expandable-row-background-color: #{$blue-100};
+}
+:host-context(.dt-theme-purple) {
+  --dt-expandable-row-border-color: #{$purple-500};
+  --dt-expandable-row-background-color: #{$purple-100};
+}
+:host-context(.dt-theme-royalblue) {
+  --dt-expandable-row-border-color: #{$royalblue-500};
+  --dt-expandable-row-background-color: #{$royalblue-100};
+}
+
+:host {
+  > .dt-expandable-row-base-expanded {
+    border-top-color: var(--dt-expandable-row-border-color);
+    background-color: var(--dt-expandable-row-background-color);
+  }
+  .dt-expandable-row-expandable-expanded {
+    border-bottom-color: var(--dt-expandable-row-border-color);
+  }
+}
+
+:host.dt-table-row-indicator.dt-color-warning
+  > .dt-expandable-row-base::before {
+  background-color: var(--dt-warning-default-color);
+}
+
+:host.dt-table-row-indicator.dt-color-error > .dt-expandable-row-base::before {
+  background-color: var(--dt-error-default-color);
+}
+
+:host.dt-table-row-indicator.dt-color-recovered
+  > .dt-expandable-row-base::before {
+  background-color: var(--dt-recovered-default-color);
+}
 
 :host.dt-expandable-row {
   &:nth-child(even) {
@@ -72,8 +115,3 @@
     left: 4px;
   }
 }
-
-// Apply current theme
-@include dt-apply-theme() {
-  @include dt-theme-expandable-row($dt-current-theme, $dt-current-theme-name);
-}

libs/barista-components/table/src/row.scss

@@ -1,8 +1,12 @@
 @import '../../core/src/style/variables';
 @import '../../core/src/style/table';
-@import '../../core/src/theming/theming';
 @import './table-mixins';
-@import './row-theme';
+
+:host {
+  --dt-row-color-even: #{$dt-table-row-color-even};
+  --dt-row-color-odd: #{$white};
+  --interactive-border-color: #{$gray-500};
+}
 
 :host {
   min-height: $dt-table-row-height;
@@ -24,10 +28,17 @@
 }
 
 :host-context(.dt-table-interactive-rows):hover {
-  border: solid 1px $gray-500;
+  border: solid 1px var(--interactive-border-color);
 }
 
-// Apply the row theme to all theme definitions
-@include dt-apply-theme() {
-  @include dt-theme-row($dt-current-theme);
+:host.dt-table-row-indicator {
+  &.dt-color-error::before {
+    background-color: var(--dt-error-default-color);
+  }
+  &.dt-color-warning::before {
+    background-color: var(--dt-warning-default-color);
+  }
+  &.dt-color-recovered::before {
+    background-color: var(--dt-recovered-default-color);
+  }
 }

libs/barista-components/tree-table/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")
 
@@ -65,12 +65,6 @@ sass_binary(
 sass_binary(
     name = "styles_row",
     src = "src/tree-table-row.scss",
-    deps = ["styles_row_theme"]
-)
-
-sass_library(
-    name = "styles_row_theme",
-    srcs = ["src/_tree-table-row-theme.scss"],
 )
 
 sass_binary(

libs/barista-components/tree-table/src/tree-table-row.scss

@@ -1,13 +1,27 @@
 @import '../../core/src/style/variables';
 @import '../../core/src/style/table';
-@import '../../core/src/theming/theming';
-@import './tree-table-row-theme';
 
 :host {
   display: table-row;
   position: relative;
   min-height: $dt-table-row-height;
 
+  &.dt-table-row-indicator.dt-color-error
+    ::ng-deep
+    .dt-tree-table-toggle-cell-wrap::before {
+    background-color: var(--dt-error-default-color);
+  }
+  &.dt-table-row-indicator.dt-color-warning
+    ::ng-deep
+    .dt-tree-table-toggle-cell-wrap::before {
+    background-color: var(--dt-warning-default-color);
+  }
+  &.dt-table-row-indicator.dt-color-recovered
+    ::ng-deep
+    .dt-tree-table-toggle-cell-wrap::before {
+    background-color: var(--dt-recovered-default-color);
+  }
+
   &:nth-child(even) ::ng-deep .dt-cell {
     background-color: $dt-table-row-color-even;
     border-top: solid 1px $dt-table-row-color-even;
@@ -57,8 +71,3 @@
 :host-context(.dt-table-interactive-rows):hover ::ng-deep .dt-tree-toggle-cell {
   border-left: solid 1px $gray-500;
 }
-
-// Apply the row theme to all theme definitions
-@include dt-apply-theme() {
-  @include dt-theme-tree-table-row($dt-current-theme);
-}