From 1a5634b23759836ab5a03a7d2789fa462f10306e Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 30 Nov 2020 09:00:43 -0500
Subject: [PATCH] Fixes #276

---
 docs/getting-started/changelog.md             |  1 +
 src/components/progress-bar/progress-bar.scss | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index 73e21a79c..9d083ff8d 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added `sl-format-date` component
 - Added `indeterminate` state to `sl-progress-bar` [#274](https://github.com/shoelace-style/shoelace/issues/274)
+- Added `--track-color`, `--indicator-color`, and `--label-color` to `sl-progress-bar` [#276](https://github.com/shoelace-style/shoelace/issues/276)
 - Fixed a bug where `sl-menu-item` color variable was incorrect [#272](https://github.com/shoelace-style/shoelace/issues/272)
 - Fixed a bug where `sl-dialog` and `sl-drawer` would emit the `sl-hide` event twice [#275](https://github.com/shoelace-style/shoelace/issues/275)
 
diff --git a/src/components/progress-bar/progress-bar.scss b/src/components/progress-bar/progress-bar.scss
index 5b283d7fb..46da8cd4f 100644
--- a/src/components/progress-bar/progress-bar.scss
+++ b/src/components/progress-bar/progress-bar.scss
@@ -2,16 +2,22 @@
 
 /**
  * @prop --height: The progress bar's height.
+ * @prop --track-color: The track color.
+ * @prop --indicator-color: The indicator color.
+ * @prop --label-color: The label color.
  */
 :host {
   --height: 16px;
+  --track-color: var(--sl-color-gray-90);
+  --indicator-color: var(--sl-color-primary-50);
+  --label-color: var(--sl-color-white);
 
   display: block;
 }
 
 .progress-bar {
   position: relative;
-  background-color: var(--sl-color-gray-90);
+  background-color: var(--track-color);
   height: var(--height);
   border-radius: var(--sl-border-radius-pill);
   overflow: hidden;
@@ -22,8 +28,8 @@
   font-family: var(--sl-font-sans);
   font-size: 12px;
   font-weight: var(--sl-font-weight-normal);
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-white);
+  background-color: var(--indicator-color);
+  color: var(--label-color);
   text-align: center;
   line-height: var(--height);
   white-space: nowrap;