From 193b3e5b80303c2753a8cd8253a0b376df4cb577 Mon Sep 17 00:00:00 2001
From: rowa-audil <rowa.audil@dynatrace.com>
Date: Thu, 14 May 2020 17:13:32 +0200
Subject: [PATCH] feat(bar-indicator): Changes styling to use custom properties

---
 .../src/_bar-indicator-theme.scss             | 27 ++++++++-----------
 .../bar-indicator/src/bar-indicator.scss      |  6 -----
 2 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/libs/barista-components/bar-indicator/src/_bar-indicator-theme.scss b/libs/barista-components/bar-indicator/src/_bar-indicator-theme.scss
index 53cb09acc6..471061675b 100644
--- a/libs/barista-components/bar-indicator/src/_bar-indicator-theme.scss
+++ b/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);
 }
diff --git a/libs/barista-components/bar-indicator/src/bar-indicator.scss b/libs/barista-components/bar-indicator/src/bar-indicator.scss
index 7a16c76df1..e0ba699dd8 100644
--- a/libs/barista-components/bar-indicator/src/bar-indicator.scss
+++ b/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);
-}