From fb7b2b24cc6747a8d6e74989299626a7e5c2ef71 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 15 Nov 2021 17:53:25 +0300
Subject: [PATCH] Fixed  #1752 - ProgressBar text color enhancements

---
 public/themes/arya-blue/theme.css             |  2 +-
 public/themes/arya-green/theme.css            |  2 +-
 public/themes/arya-orange/theme.css           |  2 +-
 public/themes/arya-purple/theme.css           |  2 +-
 public/themes/bootstrap4-dark-blue/theme.css  |  2 +-
 .../themes/bootstrap4-dark-purple/theme.css   |  2 +-
 public/themes/bootstrap4-light-blue/theme.css |  2 +-
 .../themes/bootstrap4-light-purple/theme.css  |  2 +-
 public/themes/fluent-light/theme.css          |  2 +-
 public/themes/lara-dark-blue/theme.css        |  2 +-
 public/themes/lara-dark-indigo/theme.css      |  2 +-
 public/themes/lara-dark-purple/theme.css      |  2 +-
 public/themes/lara-dark-teal/theme.css        |  2 +-
 public/themes/lara-light-blue/theme.css       |  2 +-
 public/themes/lara-light-indigo/theme.css     |  2 +-
 public/themes/lara-light-purple/theme.css     |  2 +-
 public/themes/lara-light-teal/theme.css       |  2 +-
 public/themes/luna-amber/theme.css            |  2 +-
 public/themes/luna-blue/theme.css             |  2 +-
 public/themes/luna-green/theme.css            |  2 +-
 public/themes/luna-pink/theme.css             |  2 +-
 public/themes/md-dark-deeppurple/theme.css    |  4 +--
 public/themes/md-dark-indigo/theme.css        |  4 +--
 public/themes/md-light-deeppurple/theme.css   |  4 +--
 public/themes/md-light-indigo/theme.css       |  4 +--
 public/themes/mdc-dark-deeppurple/theme.css   |  4 +--
 public/themes/mdc-dark-indigo/theme.css       |  4 +--
 public/themes/mdc-light-deeppurple/theme.css  |  4 +--
 public/themes/mdc-light-indigo/theme.css      |  4 +--
 public/themes/nova-accent/theme.css           |  2 +-
 public/themes/nova-alt/theme.css              |  2 +-
 public/themes/nova-vue/theme.css              |  2 +-
 public/themes/nova/theme.css                  |  2 +-
 public/themes/rhea/theme.css                  |  2 +-
 public/themes/saga-blue/theme.css             |  2 +-
 public/themes/saga-green/theme.css            |  2 +-
 public/themes/saga-orange/theme.css           |  2 +-
 public/themes/saga-purple/theme.css           |  2 +-
 public/themes/tailwind-light/theme.css        |  2 +-
 public/themes/vela-blue/theme.css             |  2 +-
 public/themes/vela-green/theme.css            |  2 +-
 public/themes/vela-orange/theme.css           |  2 +-
 public/themes/vela-purple/theme.css           |  2 +-
 src/components/progressbar/ProgressBar.vue    | 25 ++++++++++---------
 44 files changed, 64 insertions(+), 63 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 418c83f18..7b45c6b5e 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -5293,7 +5293,7 @@
   background: #64B5F6;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #212529;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 3519c1fe2..315781afb 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -5293,7 +5293,7 @@
   background: #81C784;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #212529;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 27c4d3075..7f516685c 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -5293,7 +5293,7 @@
   background: #FFD54F;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #212529;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 88eb94a96..1bbc94971 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -5293,7 +5293,7 @@
   background: #BA68C8;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 9041d6f4e..ffc8ec6d7 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -5305,7 +5305,7 @@
   background: #8dd0ff;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #151515;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 47151e70d..472430d59 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -5305,7 +5305,7 @@
   background: #c298d8;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #151515;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 4260c60b6..1c28aafc0 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -5305,7 +5305,7 @@
   background: #007bff;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index a16547ed1..b686e3ef5 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -5305,7 +5305,7 @@
   background: #883cae;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index faf566c13..11aab740c 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -5244,7 +5244,7 @@
   background: #0078d4;
 }
 .p-progressbar .p-progressbar-label {
-  color: #323130;
+  color: #ffffff;
   line-height: 2px;
 }
 
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index bd9f0f706..0aa299a4f 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -5279,7 +5279,7 @@
   background: #93C5FD;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #1c2127;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 172a3ca03..30c823059 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -5279,7 +5279,7 @@
   background: #A5B4FC;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #1c2127;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 308e94664..f58d5d1e9 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -5279,7 +5279,7 @@
   background: #C4B5FD;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #1c2127;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 44fb49190..b3b57b623 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -5279,7 +5279,7 @@
   background: #5EEAD4;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #1c2127;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 5dab37b78..1b4d79d16 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -5279,7 +5279,7 @@
   background: #3B82F6;
 }
 .p-progressbar .p-progressbar-label {
-  color: #495057;
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 5caf5458b..eeb6b692c 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -5279,7 +5279,7 @@
   background: #6366F1;
 }
 .p-progressbar .p-progressbar-label {
-  color: #495057;
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 3125e16e1..a961dd5f0 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -5279,7 +5279,7 @@
   background: #8B5CF6;
 }
 .p-progressbar .p-progressbar-label {
-  color: #495057;
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 3c04c300f..5f458a792 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -5279,7 +5279,7 @@
   background: #14B8A6;
 }
 .p-progressbar .p-progressbar-label {
-  color: #495057;
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 2f84fcd2c..9004ece1d 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -5256,7 +5256,7 @@
   background: #FFE082;
 }
 .p-progressbar .p-progressbar-label {
-  color: #dedede;
+  color: #212529;
   line-height: 24px;
 }
 
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 1d33d0ed6..413308fba 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -5256,7 +5256,7 @@
   background: #81D4FA;
 }
 .p-progressbar .p-progressbar-label {
-  color: #dedede;
+  color: #212529;
   line-height: 24px;
 }
 
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index df20997d1..75c3c277b 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -5256,7 +5256,7 @@
   background: #C5E1A5;
 }
 .p-progressbar .p-progressbar-label {
-  color: #dedede;
+  color: #212529;
   line-height: 24px;
 }
 
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index d559d8595..5b1a0ad82 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -5256,7 +5256,7 @@
   background: #F48FB1;
 }
 .p-progressbar .p-progressbar-label {
-  color: #dedede;
+  color: #212529;
   line-height: 24px;
 }
 
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index c3b97e5ac..3614f2469 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -5317,7 +5317,7 @@
   background: #CE93D8;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #121212;
   line-height: 4px;
 }
 
@@ -6507,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar .p-progressbar-label {
+.p-progressbar.p-progressbar-determinate .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index f230f9fd6..f23a6b829 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -5317,7 +5317,7 @@
   background: #9FA8DA;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #121212;
   line-height: 4px;
 }
 
@@ -6507,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar .p-progressbar-label {
+.p-progressbar.p-progressbar-determinate .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index c1c1f8026..08fc7f972 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -5317,7 +5317,7 @@
   background: #673AB7;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(0, 0, 0, 0.87);
+  color: #ffffff;
   line-height: 4px;
 }
 
@@ -6507,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar .p-progressbar-label {
+.p-progressbar.p-progressbar-determinate .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 6626d2190..b169a7411 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -5317,7 +5317,7 @@
   background: #3F51B5;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(0, 0, 0, 0.87);
+  color: #ffffff;
   line-height: 4px;
 }
 
@@ -6507,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar .p-progressbar-label {
+.p-progressbar.p-progressbar-determinate .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index e5292a1ca..cfa2f35b7 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -5317,7 +5317,7 @@
   background: #CE93D8;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #121212;
   line-height: 4px;
 }
 
@@ -6507,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar .p-progressbar-label {
+.p-progressbar.p-progressbar-determinate .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 03506a8d7..026c6deef 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -5317,7 +5317,7 @@
   background: #9FA8DA;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #121212;
   line-height: 4px;
 }
 
@@ -6507,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar .p-progressbar-label {
+.p-progressbar.p-progressbar-determinate .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index e9e152184..f7376b901 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -5317,7 +5317,7 @@
   background: #673AB7;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(0, 0, 0, 0.87);
+  color: #ffffff;
   line-height: 4px;
 }
 
@@ -6507,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar .p-progressbar-label {
+.p-progressbar.p-progressbar-determinate .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index c59df9bcb..7d17a6d9c 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -5317,7 +5317,7 @@
   background: #3F51B5;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(0, 0, 0, 0.87);
+  color: #ffffff;
   line-height: 4px;
 }
 
@@ -6507,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar .p-progressbar-label {
+.p-progressbar.p-progressbar-determinate .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 97376110e..2e4405bf3 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -5244,7 +5244,7 @@
   background: #007ad9;
 }
 .p-progressbar .p-progressbar-label {
-  color: #333333;
+  color: #ffffff;
   line-height: 24px;
 }
 
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 8d1004e7c..9f727e7d0 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -5256,7 +5256,7 @@
   background: #007ad9;
 }
 .p-progressbar .p-progressbar-label {
-  color: #333333;
+  color: #ffffff;
   line-height: 24px;
 }
 
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 89a019939..92e71eae8 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -5256,7 +5256,7 @@
   background: #41b883;
 }
 .p-progressbar .p-progressbar-label {
-  color: #333333;
+  color: #ffffff;
   line-height: 24px;
 }
 
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index c208dfd4a..475ba31ad 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -5256,7 +5256,7 @@
   background: #007ad9;
 }
 .p-progressbar .p-progressbar-label {
-  color: #333333;
+  color: #ffffff;
   line-height: 24px;
 }
 
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 38d0b9c3a..f6df79c0a 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -5244,7 +5244,7 @@
   background: #7B95A3;
 }
 .p-progressbar .p-progressbar-label {
-  color: #666666;
+  color: #ffffff;
   line-height: 24px;
 }
 
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 46e71bc49..d129f9f75 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -5293,7 +5293,7 @@
   background: #2196F3;
 }
 .p-progressbar .p-progressbar-label {
-  color: #495057;
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 64e82e0a3..6e5e6713d 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -5293,7 +5293,7 @@
   background: #4CAF50;
 }
 .p-progressbar .p-progressbar-label {
-  color: #495057;
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index bc057dcd1..d4ad04181 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -5293,7 +5293,7 @@
   background: #FFC107;
 }
 .p-progressbar .p-progressbar-label {
-  color: #495057;
+  color: #212529;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index dba797857..9a3a6d5ca 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -5293,7 +5293,7 @@
   background: #9C27B0;
 }
 .p-progressbar .p-progressbar-label {
-  color: #495057;
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 4cfb1de6b..16e641d25 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -5328,7 +5328,7 @@
   background: #4F46E5;
 }
 .p-progressbar .p-progressbar-label {
-  color: #3f3f46;
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 16ea2d688..fc2c170cb 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -5293,7 +5293,7 @@
   background: #64B5F6;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #212529;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 8a8512d93..73ce67e99 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -5293,7 +5293,7 @@
   background: #81C784;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #212529;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 74fec24d3..7fc8e545d 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -5293,7 +5293,7 @@
   background: #FFD54F;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #212529;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index ed54edd2f..2366646ec 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -5293,7 +5293,7 @@
   background: #BA68C8;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #ffffff;
   line-height: 1.5rem;
 }
 
diff --git a/src/components/progressbar/ProgressBar.vue b/src/components/progressbar/ProgressBar.vue
index 4288b831e..22ded083e 100755
--- a/src/components/progressbar/ProgressBar.vue
+++ b/src/components/progressbar/ProgressBar.vue
@@ -1,8 +1,9 @@
 <template>
     <div role="progressbar" :class="containerClass" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100">
-        <div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle"></div>
-        <div v-if="determinate && (value !== null) && showValue" class="p-progressbar-label">
-            <slot>{{value + '%'}}</slot>
+        <div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle">
+          <div v-if="(value != null && value !== 0) && showValue" class="p-progressbar-label">
+              <slot>{{value + '%'}}</slot>
+          </div>
         </div>
         <div v-if="indeterminate" class="p-progressbar-indeterminate-container">
             <div class="p-progressbar-value p-progressbar-value-animate"></div>
@@ -40,7 +41,7 @@ export default {
         progressStyle() {
             return {
                 width: this.value + '%',
-                display: 'block'
+                display: 'flex'
             };
         },
         indeterminate() {
@@ -65,20 +66,20 @@ export default {
     position: absolute;
     display: none;
     border: 0 none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.p-progressbar-determinate .p-progressbar-label {
+    display: inline-flex;
 }
 
 .p-progressbar-determinate .p-progressbar-value-animate {
     transition: width 1s ease-in-out;
 }
 
-.p-progressbar-determinate .p-progressbar-label {
-    text-align: center;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    font-weight: bold;
-}
-
 .p-progressbar-indeterminate .p-progressbar-value::before {
       content: '';
       position: absolute;