MOBILE-3320 styles: Change primary color and styles for a11y

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/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,44 @@ $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-height-ios: 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;
 
 $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-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-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 +317,15 @@ $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-color-dark: $white !default;
-$core-combobox-color-dark: $primary-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;
@@ -351,7 +358,7 @@ $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;
 

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 {
@@ -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;
@@ -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};

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) {
@@ -211,6 +220,8 @@
 
     --core-combobox-background: var(--ion-item-background);
     --core-combobox-color: #{$core-combobox-color};
+    --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};
@@ -233,7 +244,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};