feat(bar-indicator): Changes styling to use custom properties

libs/barista-components/bar-indicator/src/_bar-indicator-theme.scss

@@ -1,20 +1,15 @@
-@import '../../core/src/theming/theming';
-
-@mixin dt-theme-bar-indicator($theme) {
-  $palette-names: 'main', 'recovered', 'error';
-  $default-palette: 'main';
+:host.dt-color-main {
+  --dt-bar-indicator-background-color: var(--dt-theme-main-default-color);
+}
 
-  @each $name in $palette-names {
-    $palette: dt-get-theme-palette($theme, $name);
-    $default-color: dt-get-theme-color($palette, 'default');
+:host.dt-color-error {
+  --dt-bar-indicator-background-color: var(--dt-error-default-color);
+}
 
-    $namespace: ':host';
-    @if $name != $default-palette {
-      $namespace: ':host.dt-color-#{$name}';
-    }
+:host.dt-color-recovered {
+  --dt-bar-indicator-background-color: var(--dt-recovered-default-color);
+}
 
-    #{$namespace} .dt-bar-indicator-bar {
-      background-color: $default-color;
-    }
-  }
+:host .dt-bar-indicator-bar {
+  background: var(--dt-bar-indicator-background-color);
 }

libs/barista-components/bar-indicator/src/bar-indicator.scss

@@ -1,5 +1,3 @@
-@import '../../core/src/style/variables';
-@import '../../core/src/theming/theming';
 @import './bar-indicator-theme';
 
 :host {
@@ -22,7 +20,3 @@
   left: auto;
   right: 0;
 }
-
-@include dt-apply-theme() {
-  @include dt-theme-bar-indicator($dt-current-theme);
-}