Fixes #276

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)
 

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;