fix(progress-bar): use correct theme colors in dark mode (#22957)

resolves #20098

Co-authored-by: Dominik Geng <domske@users.noreply.github.com>

core/src/components/progress-bar/progress-bar.scss

@@ -10,7 +10,7 @@
   * @prop --progress-background: Color of the progress bar
   * @prop --buffer-background: Color of the buffer bar
   */
-  --background: #{ion-color(primary, base, 0.2)};
+  --background: #{ion-color(primary, base, 0.3)};
   --progress-background: #{ion-color(primary, base)};
   --buffer-background: var(--background);
   display: block;
@@ -27,7 +27,7 @@
 
 :host(.ion-color) {
   --progress-background: #{current-color(base)};
-  --buffer-background: #{current-color(base, 0.2)};
+  --buffer-background: #{current-color(base, 0.3)};
 }
 
 // indeterminate has no progress-buffer-bar, so it will be added to the host
@@ -72,17 +72,10 @@
 }
 
 .progress-buffer-bar {
-  // It's currently here because --buffer-background has an alpha
+  background: var(--buffer-background);
-  // Otherwise the buffer circles would be seen through
-  background: #fff;
-
-  z-index: 1; // Make it behind the progress
-
-  &:before {
-    background: var(--buffer-background);
 
-    content: "";
+  // Make it behind the progress
-  }
+  z-index: 1;
 }
 
 // MD based animation on indeterminate type
@@ -109,7 +102,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  left:  -54.888891%;
+  left: -54.888891%;
   /* stylelint-enable property-blacklist */
 
   animation: secondary-indeterminate-translate 2s infinite linear;
@@ -123,8 +116,26 @@
 // Buffer style
 // --------------------------------------------------
 
+.buffer-circles.buffer-circles-reversed {
+  /* stylelint-disable property-blacklist */
+  right: unset;
+  left: 2px;
+
+  background-position: right;
+  /* stylelint-enable property-blacklist */
+}
+
 .buffer-circles {
-  background: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px center;
+  /* stylelint-disable property-blacklist */
+  right: -8px;
+
+  left: unset;
+  /* stylelint-enable property-blacklist */
+
+  background: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px;
+
+  /* stylelint-disable-next-line property-blacklist */
+  background-position: left;
   background-size: 10px 10px;
 
   z-index: 0;

core/src/components/progress-bar/progress-bar.tsx

@@ -54,6 +54,7 @@ export class ProgressBar implements ComponentInterface {
     const { color, type, reversed, value, buffer } = this;
     const paused = config.getBoolean('_testing');
     const mode = getIonMode(this);
+    const isReversed = document.dir === 'rtl' ? !reversed : reversed;
     return (
       <Host
         role="progressbar"
@@ -64,12 +65,12 @@ export class ProgressBar implements ComponentInterface {
           [mode]: true,
           [`progress-bar-${type}`]: true,
           'progress-paused': paused,
-          'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed
+          'progress-bar-reversed': isReversed
         })}
       >
         {type === 'indeterminate'
           ? renderIndeterminate()
-          : renderProgress(value, buffer)
+          : renderProgress(value, buffer, isReversed)
         }
       </Host>
     );
@@ -83,13 +84,13 @@ const renderIndeterminate = () => {
   ];
 };
 
-const renderProgress = (value: number, buffer: number) => {
+const renderProgress = (value: number, buffer: number, reversed: boolean) => {
   const finalValue = clamp(0, value, 1);
   const finalBuffer = clamp(0, buffer, 1);
 
   return [
     <div class="progress" style={{ transform: `scaleX(${finalValue})` }}></div>,
-    finalBuffer !== 1 && <div class="buffer-circles"></div>,
+    finalBuffer !== 1 && <div class={{ 'buffer-circles': true, 'buffer-circles-reversed': reversed }} style={{ width: `calc(${(1 - finalBuffer) * 100}%)` }}></div>,
     <div class="progress-buffer-bar" style={{ transform: `scaleX(${finalBuffer})` }}></div>,
   ];
 };

core/src/components/progress-bar/test/basic/index.html

@@ -9,7 +9,9 @@
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>  <style>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+  <style>
     .custom-bar-background {
       --buffer-background: red;
     }
@@ -126,13 +128,26 @@
         </ion-list-header>
         <ion-progress-bar color="tertiary" buffer="0"></ion-progress-bar>
 
-      </ion-list>
+        <ion-list-header>
+          <ion-label>
+            Buffer (change buffer with slider)
+          </ion-label>
+        </ion-list-header>
+        <ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4"></ion-progress-bar>
+        <ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
 
+        <ion-item>
+          <ion-range pin="true" value="0" id="progressValueBuffer">
+            <ion-label slot="start">0</ion-label>
+            <ion-label slot="end">100</ion-label>
+          </ion-range>
+        </ion-item>
+      </ion-list>
     </ion-content>
-
   </ion-app>
 
   <script>
+    // Progress Bar Value
     const progressValue = document.getElementById('progressValue');
     const progressBar = document.getElementById('progressBar');
 
@@ -140,6 +155,13 @@
       progressBar.value = ev.detail.value / 100;
     });
 
+    // Progress Bar Buffer
+    const progressValueBuffer = document.getElementById('progressValueBuffer');
+    const progressBarBuffer = document.querySelectorAll('.progressBarBuffer');
+
+    progressValueBuffer.addEventListener('ionChange', function (ev) {
+      progressBarBuffer.forEach(ele => ele.buffer = ev.detail.value / 100);
+    });
   </script>
 </body>
 

core/src/themes/test/css-variables/index.html

@@ -52,6 +52,9 @@
       font-size: 48px;
     }
 
+    ion-progress-bar {
+      margin-bottom: 10px;
+    }
   </style>
 </head>
 
@@ -619,10 +622,6 @@
 
             <section>
               <p>
-                <ion-toolbar>
-                  <ion-title>Default</ion-title>
-                </ion-toolbar>
-
                 <ion-toolbar>
                   <ion-buttons slot="start">
                     <ion-button color="danger">
@@ -759,6 +758,18 @@
                   <ion-title>Dark</ion-title>
                 </ion-toolbar>
               </p>
+
+              <p>
+                <ion-progress-bar value="0.5"></ion-progress-bar>
+                <ion-progress-bar value="0.5" color="secondary"></ion-progress-bar>
+                <ion-progress-bar value="0.5" color="tertiary"></ion-progress-bar>
+                <ion-progress-bar type="indeterminate" color="danger"></ion-progress-bar>
+                <ion-progress-bar type="indeterminate" color="warning"></ion-progress-bar>
+                <ion-progress-bar value="0.2" buffer="0.3" color="success"></ion-progress-bar>
+                <ion-progress-bar value="0.5" color="light"></ion-progress-bar>
+                <ion-progress-bar value="0.5" color="medium"></ion-progress-bar>
+                <ion-progress-bar value="0.2" buffer="0.3" color="dark"></ion-progress-bar>
+              </p>
             </section>
           </div>
         </ion-content>