From dd542b5d0500a8a9858bdad934b576fbea0d3f66 Mon Sep 17 00:00:00 2001
From: jqlio18 <jqlio18@gmail.com>
Date: Mon, 12 Dec 2022 22:06:50 -0500
Subject: [PATCH] ProgressBar: Removed the css variables and use carbon-css
 instead. The way of assigning the ProgressBar value has change. It is now a
 style variable and scale-x is calculated in the css. This way prevent the
 override of carbon css.

---
 src/ProgressBar/ProgressBar.svelte | 38 +++++-------------------------
 1 file changed, 6 insertions(+), 32 deletions(-)

diff --git a/src/ProgressBar/ProgressBar.svelte b/src/ProgressBar/ProgressBar.svelte
index 8cea35af..b79afc41 100644
--- a/src/ProgressBar/ProgressBar.svelte
+++ b/src/ProgressBar/ProgressBar.svelte
@@ -88,7 +88,7 @@
   >
     <div
       class:bx--progress-bar__bar="{true}"
-      style="transform: scaleX({capped / max})"
+      style="--scale-x: {indeterminate ? 0 : capped / max}"
     ></div>
   </div>
   {#if helperText}
@@ -99,36 +99,10 @@
 </div>
 
 <style>
-  .bx--progress-bar--error .bx--progress-bar__bar {
-    background-color: var(--cds-support-error, #da1e28);
-  }
-
-  .bx--progress-bar__status-icon {
-    float: right;
-  }
-
-  .bx--progress-bar--error .bx--progress-bar__helper-text,
-  .bx--progress-bar--error .bx--progress-bar__status-icon {
-    color: var(--cds-support-error, #da1e28);
-  }
-
-  .bx--progress-bar--finished .bx--progress-bar__bar {
-    background-color: var(--cds-support-success, #198038);
-  }
-
-  .bx--progress-bar--finished .bx--progress-bar__status-icon {
-    color: var(--cds-support-success, #198038);
-  }
-
-  .bx--progress-bar__status-icon {
-    flex-shrink: 0;
-    margin-left: 1rem;
-  }
-
-  .bx--progress-bar--error .bx--progress-bar__bar,
-  .bx--progress-bar--finished .bx--progress-bar__bar {
-    transform: scaleX(
-      1
-    ) !important; /* Overwrite the style applied to the div */
+  .bx--progress-bar:not(.bx--progress-bar--indeterminate):not(
+      .bx--progress-bar--error
+    ):not(.bx--progress-bar--finished)
+    .bx--progress-bar__bar {
+    transform: scaleX(var(--scale-x));
   }
 </style>