Merge pull request #2808 from crazyserver/MOBILE-3320

Mobile 3320

src/addons/calendar/components/calendar/calendar.scss

@@ -55,9 +55,8 @@
         }
 
         &.today .addon-calendar-day-number span {
-            background-color: var(--addon-calendar-today-bgcolor);
+            border: 2px solid var(--addon-calendar-today-border-color);
-            color: var(--addon-calendar-today-color);
+            line-height: 20px;;
-
             border-radius: 50%;
         }
         &.dayblank {

src/addons/messages/pages/settings/settings.html

@@ -135,9 +135,9 @@
                 <ion-item-divider><ion-label><h2>{{ 'core.settings.general' | translate }}</h2></ion-label></ion-item-divider>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'addon.messages.useentertosend' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.messages.useentertosend' | translate }}</p>
                     </ion-label>
-                    <ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()"></ion-toggle>
+                    <ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()" slot="end"></ion-toggle>
                 </ion-item>
             </ion-list>
         </ion-card>

src/addons/mod/forum/components/post/post.html

@@ -130,9 +130,9 @@
                 [attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId"
                 [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"
             >
-                <ion-label>
                 <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
                 <ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
+                <ion-label>
                     <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
                 </ion-label>
             </ion-item>

src/addons/storagemanager/pages/courses-storage/courses-storage.scss

@@ -5,10 +5,6 @@
         .item-heading {
             font-weight: bold;
         }
-
-        .item-heading.item-heading-secondary {
-            color: $subdued-text-color;
-        }
     }
 
 }

src/core/components/combobox/combobox.scss

@@ -12,6 +12,9 @@
 
         --color: var(--core-combobox-color);
         --color-activated: var(--core-combobox-color);
+        --border-color: var(--core-combobox-border-color);
+        --border-width: 0 0 var(--core-combobox-border-width) 0;
+        --border-style: solid;
         --color-focused: currentcolor;
         --color-hover: currentcolor;
 
@@ -50,6 +53,10 @@ ion-button {
 }
 
 ion-select {
+    border-color: var(--border-color);
+    border-width: var(--border-width);
+    border-style: var(--border-style);
+
     &::part(icon) {
         margin: var(--icon-margin);
         opacity: 1;

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

@@ -2,8 +2,11 @@
     display: flex;
     width: 100%;
 
+    --line-height: 40px;
+    --bar-margin: 16px 0;
+
     .core-progress-text {
-        line-height: 40px;
+        line-height: var(--line-height);
         font-size: 1rem;
         color: var(--text-color);
         width: 55px;
@@ -14,7 +17,7 @@
         -webkit-appearance: none;
         appearance: none;
         height: var(--height);
-        margin: 16px 0;
+        margin: var(--bar-margin);
         padding: 0;
         display: block;
         width: 100%;

src/core/components/tabs/tabs.scss

@@ -1,7 +1,9 @@
+@import "~theme/globals";
+
 :host {
     --tabs-background: var(--core-tabs-background);
     --tabs-color: var(--core-tab-color);
-    --height: 56px;
+    --height: #{$core-tabs-height};
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -54,6 +56,9 @@
                 border-bottom-color: var(--border-color-active);
                 ion-tab-button {
                     color: var(--color-active);
+                    ion-label {
+                        font-weight: var(--font-weight-active);
+                    }
                 }
             }
         }

src/core/features/course/components/format/format.scss

@@ -17,13 +17,14 @@
 
     .core-course-thumb {
         display: none;
-        height: 150px;
+        height: #{$core-courseimage-on-course-height};
         width: 100%;
         overflow: hidden;
         cursor: pointer;
         pointer-events: auto;
         position: relative;
         background: var(--ion-item-background);
+        border-bottom: 1px solid var(--gray);
 
         img {
             position: absolute;
@@ -34,6 +35,19 @@
         }
     }
 
+    @if ($core-show-courseimage-on-course) {
+        .core-course-thumb {
+            display: block;
+        }
+    }
+
+    @if ($core-hide-progress-on-course) {
+        .core-course-progress {
+            display: none;
+        }
+    }
+
+
     .core-button-selector-row {
         display: flex;
         core-combobox {

src/core/features/course/components/section-selector/section-selector.scss

@@ -1,17 +1,15 @@
-:host {
+@import '~theme/globals.scss';
 core-progress-bar {
-        .core-progress-text {
+    --bar-margin: 8px 0 4px 0;
-            line-height: 24px;
+    --line-height: 20px;
-            position: absolute;
-            top: -8px;
-            right: 10px;
 }
-        progress {
+
-            margin: 8px 0 4px 0;
+@if ($core-hide-progress-on-section-selector) {
+    core-progress-bar {
+        display: none;
     }
 }
 
 ion-badge {
     text-align: start;
 }
-}

src/core/features/course/components/section-selector/section-selector.ts

@@ -26,6 +26,7 @@ import { ModalController } from '@singletons';
 @Component({
     selector: 'core-course-section-selector',
     templateUrl: 'section-selector.html',
+    styleUrls: ['section-selector.scss'],
 })
 export class CoreCourseSectionSelectorComponent implements OnInit {
 

src/core/features/courses/components/course-progress/core-courses-course-progress.html

@@ -55,7 +55,8 @@
             </ion-button>
         </div>
     </ion-item>
-    <ion-item *ngIf="showAll && course.progress! >= 0 && course.completionusertracked !== false" lines="none">
+    <ion-item *ngIf="showAll && course.progress! >= 0 && course.completionusertracked !== false" lines="none"
+        class="core-course-progress">
         <ion-label>
             <core-progress-bar [progress]="course.progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
         </ion-label>

src/core/features/courses/components/course-progress/course-progress.scss

@@ -41,6 +41,18 @@
             }
         }
 
+        @if ($core-course-hide-thumb-on-cards) {
+            .core-course-thumb {
+                display: none;
+            }
+        }
+
+        @if ($core-course-thumb-on-cards-background) {
+            .core-course-thumb {
+                background: $core-course-thumb-on-cards-background !important;
+            }
+        }
+
         .core-course-additional-info {
             margin-bottom: 8px;
         }
@@ -86,6 +98,12 @@
                 width: 50px;
             }
         }
+
+        @if ($core-course-hide-progress-on-cards) {
+            .core-course-progress {
+                display: none;
+            }
+        }
     }
 
     button {

src/core/features/login/login.scss

@@ -12,7 +12,7 @@
         --color: var(--core-login-text-color);
 
         p, h2, h3, .core-oauth-icon {
-            color: var(--core-login-text-color);
+            color: var(--color);
         }
     }
     ion-button.core-button-as-link {
@@ -29,13 +29,17 @@
         margin-bottom: 16px;
     }
 
-    form .item {
+    form .item,
+    form .item ion-label {
         --background: var(--core-login-input-background);
         --color: var(--core-login-input-color);
     }
 
     form .core-username.item p {
         font-size: 16px;
+    }
+
+    form .core-username.item.md p {
         @include padding-horizontal(8px, null);
     }
 
@@ -62,8 +66,15 @@
         text-decoration: underline;
     }
 
-    .core-login-reconnect-warning {
+    @if ($core-login-hide-forgot-password) {
+        .core-login-forgotten-password {
+            display: none;
+        }
+    }
+
+    .core-login-reconnect-warning ion-item {
         font-size: 0.9em;
+        --background: var(--core-login-input-background);
     }
 
     @if ($core-fixed-url) {
@@ -86,8 +97,6 @@
             --loading-spinner: #{$core-login-loading-color};
         }
     }
-
-
 }
 
 :host-context(body.dark) {

src/core/features/login/pages/reconnect/reconnect.html

@@ -24,12 +24,12 @@
         </p>
         <p class="core-siteurl">{{siteUrl}}</p>
 
-        <ion-item *ngIf="!isLoggedOut" class="ion-text-center core-login-reconnect-warning" lines="none">
+        <ion-card *ngIf="!isLoggedOut" class="core-danger-card core-login-reconnect-warning">
-            <ion-label color="danger" class="ion-text-wrap">
+            <ion-item>
                 <ion-icon name="fas-exclamation-circle" slot="start" aria-hidden="true"></ion-icon>
-                {{ 'core.login.reconnectdescription' | translate }}
+                <ion-label color="danger">{{ 'core.login.reconnectdescription' | translate }}</ion-label>
-            </ion-label>
             </ion-item>
+        </ion-card>
     </div>
     <form *ngIf="!isOAuth" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
         <ion-item class="ion-text-wrap core-username item-interactive">

src/core/features/login/pages/site/site.scss

@@ -1,3 +1,5 @@
+@import "~theme/globals";
+
 .item-input:last-child {
     margin-bottom: 20px;
 }
@@ -13,6 +15,12 @@
     }
 }
 
+@if ($core-login-hide-need-help) {
+    .core-login-need-help {
+        display: none;
+    }
+}
+
 .core-login-site-connect {
     margin-top: 1.4rem;
 }

src/core/features/mainmenu/pages/home/home.html

@@ -5,7 +5,7 @@
         </ion-buttons>
         <h1>
             <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0"></core-format-text>
-            <img src="assets/img/toolbar_logo.png" class="core-header-logo" [alt]="siteName">
+            <img src="assets/img/top_logo.png" class="core-header-logo" [alt]="siteName">
         </h1>
         <ion-buttons slot="end">
         </ion-buttons>

src/core/features/mainmenu/pages/menu/menu.scss

@@ -1,12 +1,19 @@
 @import "~theme/globals";
 
 :host{
-    --menutabbar-size: 60px;
+    --menutabbar-size: #{$bottom-tabs-size};
 
     ion-tab-bar {
+        height: var(--menutabbar-size);
         box-shadow: 0px -3px 3px rgba(var(--drop-shadow));
     }
 
+    @if ($core-always-show-main-menu) {
+        ion-tab-bar[hidden] {
+            display: flex !important;
+        }
+    }
+
     ion-tab-button ion-icon {
         text-overflow: unset;
         overflow: visible;

src/core/features/mainmenu/pages/more/more.html

@@ -13,12 +13,12 @@
             <ion-item button *ngIf="siteInfo" class="ion-text-wrap" core-user-link [userId]="siteInfo.userid">
                 <core-user-avatar [user]="siteInfo" slot="start"></core-user-avatar>
                 <ion-label>
-                    <h2>{{siteInfo.fullname}}</h2>
+                    <p class="item-heading">{{siteInfo.fullname}}</p>
-                    <p>
+                    <p class="core-moremenu-siteinfo core-moremenu-sitename">
                         <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
                         </core-format-text>
                     </p>
-                    <p>{{ siteUrl }}</p>
+                    <p class="core-moremenu-siteinfo core-moremenu-siteurl">{{ siteUrl }}</p>
                 </ion-label>
             </ion-item>
             <core-spacer></core-spacer>

src/core/features/mainmenu/pages/more/more.scss

@@ -1,3 +1,5 @@
+@import "~theme/globals";
+
 ion-item {
 	--border-color: var(--core-more-item-border,
         var(--ion-item-border-color,
@@ -15,3 +17,21 @@ ion-item {
         color: var(--core-more-icon, inherit);
     }
 }
+
+@if ($core-more-hide-siteinfo) {
+    .core-moremenu-siteinfo {
+        display: none;
+    }
+}
+
+@if ($core-more-hide-sitename) {
+    .core-moremenu-sitename {
+        display: none;
+    }
+}
+
+@if ($core-more-hide-siteurl) {
+    .core-moremenu-siteurl {
+        display: none;
+    }
+}

src/theme/components/format-text.scss

@@ -95,6 +95,23 @@ core-format-text {
         }
     }
 
+    @if ($core-format-text-never-shorten) {
+        &[maxHeight],
+        &[ng-reflect-max-height] {
+            &.core-text-formatted.core-shortened {
+                max-height: none !important;
+
+                .core-show-more {
+                    display: none !important;
+                }
+
+                &:before {
+                    display: none !important;
+                }
+            }
+        }
+    }
+
     .core-adapted-img-container {
         position: relative;
         display: inline-block;

src/theme/globals.variables.scss

@@ -64,16 +64,19 @@ $yellow-light:    mix($yellow, white, 40%) !default;
 $yellow-dark:     mix($yellow, black, 40%) !default;
 
 $brand-color:          $orange !default;
-$brand-color-light:    lighten($brand-color, 10%) !default;
-$brand-color-dark:     darken($brand-color, 10%) !default;
 
 $text-color:               $black !default;
 $text-color-dark:          $white !default;
+
+$brand-contrast-color: $text-color !default; // Used in radio and other controls where brand color needs contrast.
+$brand-contrast-color-dark: $text-color-dark !default; // Used in radio and other controls where brand color needs contrast
+
 $link-color:               $blue !default;
 $link-color-dark:          $blue-light !default;
 $background-color:         $gray-light !default;
 $background-color-dark:    $shade-90 !default;
 $subdued-text-color:       $gray-darker !default;
+$subdued-text-color-dark:  $gray-lighter !default;
 
 $ion-item-background:      $white !default;
 $ion-item-background-dark: $shade-80 !default;
@@ -86,8 +89,8 @@ $core-spacer-background-dark: $shade-100 !default;
 
 $core-online-color: #5cb85c !default;
 
-$primary:    $blue !default;
+$primary:    $brand-color !default;
-$secondary:  $brand-color !default;
+$secondary:  $blue !default;
 $tertiary:   $turquoise !default;
 $danger:     $red !default;
 $warning:    $yellow !default;
@@ -160,8 +163,8 @@ $colors:  (
     )
 ) !default;
 
-$primary-dark:    $blue-light !default;
+$primary-dark:    $brand-color !default;
-$secondary-dark:  $brand-color !default;
+$secondary-dark:  $blue-light !default;
 $tertiary-dark:   $turquoise-light !default;
 $danger-dark:     $red-light !default;
 $warning-dark:    $yellow-light !default;
@@ -268,42 +271,47 @@ $z-index-overlay: 1001;
 $z-index-overlay-wrapper: 10;
 
 // Top header bar.
-$toolbar-background: $brand-color !default;
+$toolbar-background: $white !default;
+$toolbar-background-dark: $black !default;
+$toolbar-border-color: $brand-color !default;
+$toolbar-border-color-dark: $toolbar-border-color !default;
 $toolbar-color: get_contrast_color($toolbar-background) !default;
+$toolbar-color-dark: get_contrast_color($toolbar-background-dark) !default;
+$toolbar-border-width: 3px !default;
 $toolbar-button-image-size: 44px !default;
-$toolbar-height-md: 56px !default;
+$toolbar-md-height: 56px !default;
-$toolbar-height-ios: 54px !default;
+$toolbar-ios-height: 54px !default;
 
 // Bottom tab bar.
-$bottom-tabs-background: $white !default;
+$bottom-tabs-background: $black !default;
-$bottom-tabs-background-dark: $shade-85 !default;
+$bottom-tabs-background-dark: $black !default;
-$bottom-tabs-color: $gray-darker !default;
+$bottom-tabs-color: $gray-lighter !default;
-$bottom-tabs-color-dark: $white !default;
+$bottom-tabs-color-dark: $gray-lighter !default;
 $bottom-tabs-color-selected: $primary !default;
-$bottom-tabs-color-selected-dark: $primary-dark !default;
+$bottom-tabs-color-selected-dark: $primary !default;
 $bottom-tabs-badge-color: $primary !default;
 $bottom-tabs-badge-text-color: get_contrast_color($bottom-tabs-badge-color) !default;
-$bottom-tabs-badge-color-dark: $primary-dark !default;
+$bottom-tabs-badge-color-dark: $primary !default;
 $bottom-tabs-badge-text-color-dark: get_contrast_color($bottom-tabs-badge-color-dark) !default;
+$bottom-tabs-size: 56px !default;
 
 $core-text-hightlight-background-color: lighten($blue, 40%) !default;
 
-$action-sheet-title-color: $primary !default;
-$action-sheet-selected: $primary !default;
-
 $core-tabs-background: $white !default;
 $core-tab-background: $core-tabs-background !default;
 $core-tab-color: $gray-dark !default;
+$core-tab-color-active: $dark !default;
+$core-tab-font-weight-active: normal !default;
 $core-tab-border-color: $gray !default;
-$core-tab-color-active: $primary !default;
+$core-tab-border-color-active: $primary !default;
-$core-tab-color-active-dark: $primary-dark !default;
+$core-tabs-height: 56px !default;
 
 $core-tabs-background-dark: $shade-75 !default;
 $core-tab-background-dark: $core-tabs-background-dark !default;
 $core-tab-color-dark: $white !default;
+$core-tab-color-active-dark: $dark-dark !default;
 $core-tab-border-color-dark: $gray-light !default;
-$core-tab-border-color-active: $core-tab-color-active !default;
+$core-tab-border-color-active-dark: $core-tab-border-color-active !default;
-$core-tab-border-color-active-dark: $core-tab-color-active-dark !default;
 
 $core-progressbar-color: $primary !default;
 $core-progressbar-color-dark: $primary !default;
@@ -312,13 +320,16 @@ $core-progressbar-text-color-dark: $gray-lighter !default;
 $core-progressbar-background: $gray-lighter !default;
 $core-progressbar-height: 8px !default;
 
-
 $core-side-blocks-max-width: 30% !default;
 $core-side-blocks-min-width: 280px !default;
 
-////
+$core-combobox-color: $black !default;
-$core-combobox-color: $primary !default;
+$core-combobox-background: $ion-item-background !default;
-$core-combobox-color-dark: $primary-dark !default;
+$core-combobox-color-dark: $white !default;
+$core-combobox-background-dark: $ion-item-background-dark !default;
+$core-combobox-border-color: $primary !default;
+$core-combobox-border-color-dark: $primary-dark !default;
+$core-combobox-border-width: 3px !default;
 
 $core-selected-item-color: $primary !default;
 $core-selected-item-color-dark: $primary-dark !default;
@@ -337,6 +348,8 @@ $core-login-button-outline: false !default;
 $core-login-button-outline-dark: $core-login-button-outline !default;
 $core-login-loading-color: false !default;
 $core-login-loading-color-dark: $text-color-dark !default;
+$core-login-hide-forgot-password: false !default;
+$core-login-hide-need-help: false !default;
 
 $core-star-color: $brand-color !default;
 
@@ -346,12 +359,32 @@ $core-avatar-size:  44px !default;
 $core-send-message-input-background: $gray !default;
 $core-send-message-input-color: $black !default;
 
+$core-more-icon-color: null !default;
+$core-more-item-border: null !default;
+$core-more-hide-siteinfo: false !default;
+$core-more-hide-sitename: false !default;
+$core-more-hide-siteurl: false !default;
+
+$core-fixed-url: false !default;
+$core-dashboard-logo: false !default;
+$core-always-show-main-menu: false !default;
+$core-format-text-never-shorten: false !default;
+
+$core-show-courseimage-on-course: false !default;
+$core-hide-progress-on-course: false !default;
+$core-courseimage-on-course-height: 150px !default;
+$core-hide-progress-on-section-selector: false !default;
+
+$core-course-hide-thumb-on-cards: false !default;
+$core-course-thumb-on-cards-background: null !default;
+$core-course-hide-progress-on-cards: false !default;
+
 $addon-calendar-event-category-color: $purple !default;
 $addon-calendar-event-course-color: $red !default;
 $addon-calendar-event-group-color: $yellow !default;
 $addon-calendar-event-user-color: $blue !default;
 $addon-calendar-event-site-color: $green !default;
-$addon-calendar-today-bgcolor: $primary !default;
+$addon-calendar-today-border-color: $primary !default;
 $addon-calendar-today-color: $white !default;
 $addon-calendar-border-color: $gray !default;
 
@@ -380,8 +413,3 @@ $addon-forum-highlight-color: $gray-lighter !default;
 
 $addon-forum-border-color-dark: $gray-dark !default;
 $addon-forum-highlight-color-dark: $gray-darker !default;
-
-$core-more-icon: null !default;
-$core-more-item-border: null !default;
-$core-fixed-url: false !default;
-$core-dashboard-logo: false !default;

src/theme/theme.base.scss

@@ -12,6 +12,7 @@
         clear: both;
     }
 }
+
 .core-bold {
     font-weight: bold;
 }
@@ -51,12 +52,23 @@
 
 // Headings.
 // Some styles taken from ion-label
-ion-label .item-heading {
+.md ion-label .item-heading,
+.ios ion-label .item-heading {
     text-overflow: inherit;
     overflow: inherit;
     --color: initial;
     color: var(--color);
     line-height: 20px;
+
+    &.item-heading-secondary {
+        --color: var(--subdued-text-color);
+    }
+}
+
+.ios ion-label > p,
+.md ion-label > p {
+    --color: var(--subdued-text-color);
+    color: var(--color);
 }
 
 .md ion-label .item-heading {
@@ -127,7 +139,7 @@ ion-app.ios ion-header h2 {
     text-align: center;
     font-size: 17px;
     font-weight: 600;
-    line-height: #{$toolbar-height-ios};
+    line-height: #{$toolbar-ios-height};
     box-sizing: border-box;
     pointer-events: none;
 }
@@ -149,11 +161,11 @@ ion-item.ion-text-wrap ion-label {
 
 // Ionic toolbar on header.
 ion-app.md ion-toolbar {
-    --min-height: #{$toolbar-height-md};
+    --min-height: #{$toolbar-md-height};
 }
 
 ion-app.ios ion-toolbar {
-    --min-height: #{$toolbar-height-ios};
+    --min-height: #{$toolbar-ios-height};
 }
 
 ion-header ion-toolbar {
@@ -230,6 +242,11 @@ button,
     min-width: var(--a11y-min-target-size);
 }
 
+// Clear buttons will be black.
+ion-button.button-clear {
+    --ion-color-primary: var(--brand-contrast-color);
+}
+
 [role="button"],
 .clickable {
     cursor: pointer;
@@ -284,11 +301,13 @@ div.core-iframe-network-error {
         mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%;
     }
 }
+
 [dir=rtl] ion-alert.core-alert-network-error .alert-head::after,
 [dir=rtl] div.core-iframe-network-error::after {
     right: unset;
     left: -15%;
 }
+
 ion-alert.core-nohead {
     .alert-head {
         padding-bottom: 0;
@@ -299,6 +318,10 @@ ion-alert .alert-message {
     user-select: text;
 }
 
+ion-alert .alert-wrapper button.alert-button {
+    color: var(--brand-contrast-color);
+}
+
 // Ionic list.
 ion-list.list-md {
     padding: 0;
@@ -439,7 +462,7 @@ img.large-avatar,
     margin-bottom: 10px;
     border-radius : 50%;
     padding: 4px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--gray);
     background-color: transparent;
 }
 
@@ -521,6 +544,21 @@ ion-toolbar h1 .core-bar-button-image img {
     }
 }
 
+// Radio.
+ion-radio {
+    --color: var(--brand-contrast-color);
+    --color-checked: var(--color);
+}
+
+// Checkbox.
+ion-checkbox {
+    --border-radius: 2px;
+    --border-color-checked: var(--brand-contrast-color);
+    --background-checked: var(--brand-contrast-color);
+    --checkmark-color: var(--contrast-background);
+}
+
+
 // Select.
 ion-select::part(text) {
     white-space: normal;
@@ -757,10 +795,6 @@ ion-input .native-input {
     }
 }
 
-ion-checkbox {
-    --border-radius: 2px;
-}
-
 // Disable scroll on parent ion contents to enabled PTR on the ones inside the splitview. See split-view component for more info.
 ion-content.disable-scroll-y::part(scroll) {
     touch-action: auto;

src/theme/theme.dark.scss

@@ -11,6 +11,7 @@
 
     --ion-text-color: #{$text-color-dark};
     --ion-text-color-rgb: #{color-to-rgb-list($text-color-dark)};
+    --subdued-text-color: #{$subdued-text-color-dark};
 
     // Enlighten the ionic shades.
     --ion-color-step-50: #1e1e1e;
@@ -33,6 +34,8 @@
     --ion-color-step-900: #e7e7e7;
     --ion-color-step-950: #f3f3f3;
 
+    --brand-contrast-color: #{$brand-contrast-color-dark};
+
     --primary: #{$primary-dark};
     --secondary: #{$secondary-dark};
     --tertiary: #{$tertiary-dark};
@@ -53,10 +56,11 @@
     --ion-card-color: #{$text-color-dark};
     --ion-card-background: #{$ion-item-background-dark};
 
+    --contrast-background: black;
+
     ion-content {
         --background: var(--ion-background-color);
         --background-alternative: var(--black);
-        --contrast-background: var(--ion-background-color);
     }
 
     --core-bottom-tabs-background: #{$bottom-tabs-background-dark};
@@ -73,6 +77,10 @@
 
     --core-link-color: #{$link-color-dark};
 
+    --core-header-toolbar-background: #{$toolbar-background-dark};
+    --core-header-toolbar-border-color: #{$toolbar-border-color-dark};
+    --core-header-toolbar-color: #{$toolbar-color-dark};
+
     --core-tabs-background: #{$core-tabs-background-dark};
     --core-tab-background: #{$core-tab-background-dark};
     --core-tab-color: #{$core-tab-color-dark};
@@ -89,7 +97,7 @@
     --item-divider-color: #{$ion-item-divider-color-dark};
     --spacer-background: #{$core-spacer-background-dark};
 
-    --core-combobox-background: var(--ion-item-background);
+    --core-combobox-background: #{$core-combobox-background-dark};
     --core-combobox-color: #{$core-combobox-color-dark};
 
     --selected-item-color: #{$core-selected-item-color-dark};

src/theme/theme.light.scss

@@ -41,8 +41,7 @@
     --purple:          #{$purple};
 
     --brand-color:      #{$brand-color};
-    --brand-color-light: #{$brand-color-light};
+    --brand-contrast-color: #{$brand-contrast-color};
-    --brand-color-dark:  #{$brand-color-dark};
 
     --core-online-color: #{$core-online-color};
 
@@ -72,8 +71,12 @@
     --ion-background-color: #{$background-color};
     --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
 
+    --contrast-background: white;
+
     --ion-text-color: #{$text-color};
-    --ion-text-color-rgb: 58,58,58;
+    --ion-text-color-rgb: #{color-to-rgb-list($text-color)};
+    --subdued-text-color: #{$subdued-text-color};
+
     --ion-card-color: var(--ion-text-color);
 
     --text-hightlight-background-color: #{$core-text-hightlight-background-color};
@@ -81,7 +84,6 @@
     ion-content {
         --background: var(--ion-background-color);
         --background-alternative: var(--gray-lighter);
-        --contrast-background: var(--white);
     }
 
     --core-bottom-tabs-background: #{$bottom-tabs-background};
@@ -106,10 +108,16 @@
 
     --core-header-toolbar-button-image-size: #{$toolbar-button-image-size};
     --core-header-toolbar-background: #{$toolbar-background};
+    --core-header-toolbar-border-width: #{$toolbar-border-width};
+    --core-header-toolbar-border-color: #{$toolbar-border-color};
     --core-header-toolbar-color: #{$toolbar-color};
-    ion-header ion-toolbar {
+    ion-header ion-toolbar,
+    ion-header.header-ios ion-toolbar:last-of-type {
         --color: var(--core-header-toolbar-color);
         --background: var(--core-header-toolbar-background);
+        --border-width: 0 0 var(--core-header-toolbar-border-width) 0;
+        --border-color: var(--core-header-toolbar-border-color);
+
         ion-button {
             --ion-toolbar-color: transparent;
             --color: var(--core-header-toolbar-color);
@@ -129,11 +137,12 @@
     }
 
     ion-action-sheet {
-        --button-color-selected: #{$action-sheet-selected};
+        --button-color: var(--ion-text-color);
+        --button-color-selected: var(--ion-text-color);
         --title-border-color: var(--gray);
 
         .action-sheet-title {
-            --color: #{$action-sheet-title-color};
+            --color: var(--ion-text-color);
         }
 
         @media (min-height: 500px) {
@@ -152,6 +161,7 @@
     --core-tab-border-color: #{$core-tab-border-color};
     --core-tab-color-active: #{$core-tab-color-active};
     --core-tab-border-color-active: #{$core-tab-border-color-active};
+    --core-tab-font-weight-active: #{$core-tab-font-weight-active};
 
     core-tabs, core-tabs-outlet {
         ion-slide {
@@ -160,6 +170,7 @@
             --border-color: var(--core-tab-border-color);
             --color-active: var(--core-tab-color-active);
             --border-color-active: var(--core-tab-border-color-active);
+            --font-weight-active: var(--core-tab-font-weight-active);
         }
     }
 
@@ -209,9 +220,11 @@
         --item-divider-background: var(--spacer-background);
     }
 
-
     --core-combobox-background: var(--ion-item-background);
     --core-combobox-color: #{$core-combobox-color};
+    --core-combobox-background: #{$core-combobox-background};
+    --core-combobox-border-color: #{$core-combobox-border-color};
+    --core-combobox-border-width: #{$core-combobox-border-width};
 
     --selected-item-color: #{$core-selected-item-color};
     --selected-item-border-width: #{$core-selected-item-border-width};
@@ -234,7 +247,7 @@
     --addon-calendar-event-group-color: #{$addon-calendar-event-group-color};
     --addon-calendar-event-user-color: #{$addon-calendar-event-user-color};
     --addon-calendar-event-site-color: #{$addon-calendar-event-site-color};
-    --addon-calendar-today-bgcolor: #{$addon-calendar-today-bgcolor};
+    --addon-calendar-today-border-color: #{$addon-calendar-today-border-color};
     --addon-calendar-today-color: #{$addon-calendar-today-color};
     --addon-calendar-border-color: #{$addon-calendar-border-color};
 
@@ -278,8 +291,8 @@
     --core-dd-question-radius: 10px;
     --core-dd-question-border: var(--gray-darker);
 
-    @if ($core-more-icon) {
+    @if ($core-more-icon-color) {
-        --core-more-icon: #{$core-more-icon};
+        --core-more-icon: #{$core-more-icon-color};
     }
 
     @if ($core-more-item-border) {