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

resolves #20098

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

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

@@ -39,22 +39,34 @@
 .progress-indeterminate,
 .indeterminate-bar-primary,
 .indeterminate-bar-secondary,
-.progress-buffer-bar,
-.progress-buffer-bar:before,
-.buffer-circles {
+.progress-buffer-bar {
   @include position(0, 0, 0, 0);
-
   position: absolute;
 
   width: 100%;
   height: 100%;
 }
 
+.buffer-circles-container,
+.buffer-circles {
+  @include position(0, 0, 0, 0);
+  position: absolute;
+}
+
+// Extend a bit to overflow. The size of animated distance.
+.buffer-circles {
+  /* stylelint-disable property-blacklist */
+  right: -10px;
+  left: -10px;
+  /* stylelint-enable property-blacklist */
+}
+
 // Determinate progress bar
 // --------------------------------------------------
 
 .progress,
-.progress-buffer-bar {
+.progress-buffer-bar,
+.buffer-circles-container {
   /* stylelint-disable-next-line property-blacklist */
   transform-origin: left top;
 
@@ -74,10 +86,13 @@
 .progress-buffer-bar {
   background: var(--buffer-background);
 
-  // Make it behind the progress
   z-index: 1;
 }
 
+.buffer-circles-container {
+  overflow: hidden;
+}
+
 // MD based animation on indeterminate type
 // --------------------------------------------------
 
@@ -116,28 +131,8 @@
 // Buffer style
 // --------------------------------------------------
 
-.buffer-circles.buffer-circles-reversed {
-  /* stylelint-disable property-blacklist */
-  right: unset;
-  left: 2px;
-
-  background-position: right;
-  /* stylelint-enable property-blacklist */
-}
-
 .buffer-circles {
-  /* stylelint-disable property-blacklist */
-  right: -8px;
-
-  left: unset;
-
-  transition: width 150ms linear;
-  /* 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: radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px center;
   background-size: 10px 10px;
 
   z-index: 0;
@@ -149,18 +144,7 @@
 // --------------------------------------------------
 
 :host(.progress-bar-reversed) {
-  .progress,
-  .progress-buffer-bar {
-    /* stylelint-disable-next-line property-blacklist */
-    transform-origin: right top;
-  }
-
-  .buffer-circles,
-  .indeterminate-bar-primary,
-  .indeterminate-bar-secondary,
-  .progress-indeterminate {
-    animation-direction: reverse;
-  }
+  transform: scaleX(-1);
 }
 
 // Progress paused

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

@@ -54,7 +54,6 @@ 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"
@@ -65,12 +64,12 @@ export class ProgressBar implements ComponentInterface {
           [mode]: true,
           [`progress-bar-${type}`]: true,
           'progress-paused': paused,
-          'progress-bar-reversed': isReversed
+          'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed
         })}
       >
         {type === 'indeterminate'
           ? renderIndeterminate()
-          : renderProgress(value, buffer, isReversed)
+          : renderProgress(value, buffer)
         }
       </Host>
     );
@@ -84,13 +83,24 @@ const renderIndeterminate = () => {
   ];
 };
 
-const renderProgress = (value: number, buffer: number, reversed: boolean) => {
+const renderProgress = (value: number, buffer: number) => {
   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': true, 'buffer-circles-reversed': reversed }} style={{ width: `calc(${(1 - finalBuffer) * 100}%)` }}></div>,
+    /**
+     * Buffer circles with two container to move
+     * the circles behind the buffer progress
+     * with respecting the animation.
+     * When finalBuffer === 1, we use display: none
+     * instead of removing the element to avoid flickering.
+     */
+    <div class={{ 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }} style={{ transform: `translateX(${finalBuffer * 100}%)` }}>
+      <div class="buffer-circles-container" style={{ transform: `translateX(-${finalBuffer * 100}%)` }}>
+        <div class="buffer-circles"></div>
+      </div>
+    </div>,
     <div class="progress-buffer-bar" style={{ transform: `scaleX(${finalBuffer})` }}></div>,
   ];
 };