MOBILE-3814 styles: Style progress bars

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

@@ -8,4 +8,4 @@
     </div>
 </ng-container>
 
-<ion-progress-bar *ngIf="progress < 0" type="indeterminate"></ion-progress-bar>
+<ion-progress-bar *ngIf="progress < 0" [color]="color" type="indeterminate"></ion-progress-bar>

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

@@ -1,13 +1,27 @@
+@import "~theme/globals";
+
 :host {
     display: flex;
     width: 100%;
 
     --line-height: 40px;
     --bar-margin: 16px 0;
+    --height: var(--core-progressbar-height);
+
+    --text-color: var(--core-progressbar-text-color);
+    --progressbar-color: var(--core-progressbar-color);
+    --progressbar-background: var(--core-progressbar-background);
+
+    @each $color-name, $unused in $colors {
+        &.ion-color-#{$color-name} {
+            --progressbar-color: var(--#{$color-name});
+            --progressbar-background: var(--#{$color-name}-tint);
+        }
+    }
 
     .core-progress-text {
         line-height: var(--line-height);
-        font-size: 1rem;
+        font-size: 0.9rem;
         color: var(--text-color);
         width: 55px;
         text-align: center;
@@ -24,22 +38,28 @@
         flex: 1;
 
         &[value]::-webkit-progress-bar {
-            background-color: var(--background);
+            background-color: var(--progressbar-background);
-            border-radius: 0;
+            border-radius: var(--height);
             border: 0;
             box-shadow: none;
         }
 
         &[value]::-webkit-progress-value {
-            background-color: var(--color);
+            background-color: var(--progressbar-color);
-            border-radius: 0;
+            border-radius: var(--height);
         }
     }
 
     ion-progress-bar {
-        --progress-background: var(--color);
+        --progress-background: var(--progressbar-color);
+        --buffer-background: var(--progressbar-background);
+        border-radius: var(--height);
         height: var(--height);
         margin-top: calc((var(--line-height) - var(--height)) /2);
         margin-bottom: calc((var(--line-height) - var(--height)) /2);
+
+        &::part(progress) {
+            border-radius: var(--height);
+        }
     }
 }

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

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy, ElementRef, OnInit } from '@angular/core';
 import { SafeStyle } from '@angular/platform-browser';
 import { DomSanitizer, Translate } from '@singletons';
 
@@ -28,22 +28,44 @@ import { DomSanitizer, Translate } from '@singletons';
     styleUrls: ['progress-bar.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CoreProgressBarComponent implements OnChanges {
+export class CoreProgressBarComponent implements OnInit, OnChanges {
 
     @Input() progress!: number | string; // Percentage from 0 to 100. Negative number will show an indeterminate progress bar.
     @Input() text?: string; // Percentage in text to be shown at the right. If not defined, progress will be used.
     @Input() a11yText?: string; // Accessibility text to read before the percentage.
     @Input() ariaDescribedBy?: string; // ID of the element that described the progress, if any.
+    @Input() color = '';
 
     width?: SafeStyle;
     progressBarValueText?: string;
 
     protected textSupplied = false;
+    protected element: HTMLElement;
+
+    constructor(elementRef: ElementRef) {
+        this.element = elementRef.nativeElement;
+    }
 
     /**
-     * Detect changes on input properties.
+     * @inheritdoc
+     */
+    ngOnInit(): void {
+        if (this.color) {
+            this.element.classList.add('ion-color', 'ion-color-' + this.color);
+        }
+    }
+
+    /**
+     * @inheritdoc
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
+        if (changes.color) {
+            this.element.classList.remove('ion-color', 'ion-color-' + changes.color.previousValue);
+            if (changes.color.currentValue) {
+                this.element.classList.add('ion-color', 'ion-color-' + changes.color.currentValue);
+            }
+        }
+
         if (changes.text && changes.text.currentValue !== undefined) {
             // User provided a custom text, don't use default.
             this.textSupplied = true;

src/theme/theme.base.scss

@@ -723,10 +723,6 @@ ion-card {
     }
 }
 
-ion-chip.ion-color {
-    background: var(--ion-color-tint);
-}
-
 .core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div {
     display: inline !important;
 }
@@ -854,6 +850,10 @@ ion-chip {
     line-height: 1.1;
     border-radius: var(--medium-radius);
     @include padding-horizontal(16px);
+
+    &.ion-color {
+        background: var(--ion-color-tint);
+    }
 }
 
 ion-searchbar {

src/theme/theme.dark.scss

@@ -54,7 +54,7 @@
 
     --core-bottom-tabs-badge-text-color: var(--brand-contrast);
     --core-bottom-tabs-background: var(--gray-900);
-    --core-bottom-tabs-color: var(--medium);
+    --core-bottom-tabs-color: var(--gray-200);
 
     ion-action-sheet {
         .action-sheet-cancel {
@@ -73,7 +73,7 @@
     --core-tab-border-color: var(--gray-200);
     --core-tab-color-active: var(--dark);
 
-    --core-progressbar-text-color: var(--light);
+    --core-progressbar-text-color: var(--gray-100);
 
     --ion-item-background: #{$ion-item-background-dark};
     --ion-item-detail-icon-color: var(--white);
@@ -118,8 +118,8 @@
     --addon-messages-message-mine-bg: var(--gray-700);
     --addon-messages-message-mine-activated-bg: var(--gray-600);
     --addon-messages-discussion-badge: var(--primary);
-    --addon-messages-discussion-badge-text: var(--dark);
+    --addon-messages-discussion-badge-text: var(--gray-100);
 
     --addon-forum-border-color: var(--gray-500);
-    --addon-forum-highlight-color: var(--medium);
+    --addon-forum-highlight-color: var(--gray-200);
 }

src/theme/theme.light.scss

@@ -100,9 +100,9 @@
 
     --core-bottom-tabs-background: var(--white);
     --core-bottom-tabs-color: var(--gray-700);
-    --core-bottom-tabs-color-selected: var(--brand-color);
+    --core-bottom-tabs-color-selected: var(--brand);
     --core-bottom-tabs-background-selected: transparent;
-    --core-bottom-tabs-badge-color: var(--brand-color);
+    --core-bottom-tabs-badge-color: var(--brand);
     --core-bottom-tabs-badge-text-color: var(--brand-contrast);
     --bottom-tabs-size: 56px;
     ion-tab-bar.mainmenu-tabs {
@@ -120,7 +120,7 @@
     --core-header-toolbar-button-image-size: 44px;
     --core-header-toolbar-background: var(--white);
     --core-header-toolbar-border-width: 3px;
-    --core-header-toolbar-border-color: var(--brand-color);
+    --core-header-toolbar-border-color: var(--brand);
     --core-header-toolbar-color: var(--gray-900);
     --core-header-toolbar-height: 56px;
     html.ios {
@@ -161,7 +161,7 @@
     ion-action-sheet {
         --button-color: var(--ion-text-color);
         --button-color-selected: var(--ion-text-color);
-        --title-border-color: var(--brand-color);
+        --title-border-color: var(--brand);
 
         .action-sheet-title {
             --color: var(--ion-text-color);
@@ -183,7 +183,7 @@
     --core-tab-color: var(--subdued-text-color);
     --core-tab-border-color: var(--stroke);
     --core-tab-color-active: var(--dark);
-    --core-tab-border-color-active: var(--brand-color);
+    --core-tab-border-color-active: var(--brand);
     --core-tab-font-weight-active: normal;
     --core-tabs-height: 56px;
     core-tabs, core-tabs-outlet {
@@ -204,15 +204,9 @@
     }
 
     --core-progressbar-height: 8px;
-    --core-progressbar-color: var(--brand-color);
+    --core-progressbar-color: var(--brand);
     --core-progressbar-text-color: var(--medium);
-    --core-progressbar-background: var(--light);
+    --core-progressbar-background: var(--brand-tint);
-    core-progress-bar {
-        --height: var(--core-progressbar-height);
-        --color: var(--core-progressbar-color);
-        --text-color: var(--core-progressbar-text-color);
-        --background: var(--core-progressbar-background);
-    }
 
     --ion-item-background:        #{$ion-item-background};
     --ion-item-detail-icon-color: var(--medium);
@@ -267,7 +261,7 @@
     --core-login-input-background: var(--white);
     --core-login-input-color: var(--gray-900);
 
-    --core-star-color: var(--brand-color);
+    --core-star-color: var(--brand);
 
     --core-large-avatar-size: 90px;
     --core-avatar-size: 44px;