EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3745 a11y: Fix most a11y color issues by changing base primary

main
Pau Ferrer Ocaña 2021-05-07 10:31:06 +02:00
parent 82f40e60e9
commit 4f9f694298
16 changed files with 264 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addons/messages/pages/discussion/discussion.scss
View File

@ -20,11 +20,11 @@
} }
.addon-messages-unreadfrom { .addon-messages-unreadfrom {
color: var(--core-color); color: var(--ion-color-primary);
background-color: transparent; background-color: transparent;
margin-top: 6px; margin-top: 6px;
ion-icon { ion-icon {
color: var(--core-color); color: var(--ion-color-primary);
background-color: transparent; background-color: transparent;
} }
} }

2
src/addons/mod/data/data-forms.scss
View File

@ -41,7 +41,7 @@
} }
&.has-focus { &.has-focus {
--input-border-color: var(--core-color); --input-border-color: var(--ion-color-primary);
} }
&.has-focus.ion-valid { &.has-focus.ion-valid {
--input-border-color: var(--success); --input-border-color: var(--success);

2
src/addons/mod/forum/components/index/index.scss
View File

@ -3,7 +3,7 @@
:host { :host {
.addon-forum-star { .addon-forum-star {
color: var(--core-color); color: var(--core-star-color);
} }
.addon-mod-forum-discussion.item { .addon-mod-forum-discussion.item {

2
src/addons/mod/forum/components/post/post.scss
View File

@ -5,7 +5,7 @@
border-bottom: 1px solid var(--addon-forum-border-color); border-bottom: 1px solid var(--addon-forum-border-color);
.addon-forum-star { .addon-forum-star {
color: var(--core-color); color: var(--core-star-color);
} }
ion-card-header .item { ion-card-header .item {

4
src/core/components/progress-bar/progress-bar.scss
View File

@ -1,5 +1,6 @@
:host { :host {
display: flex; display: flex;
width: 100%;
.core-progress-text { .core-progress-text {
line-height: 40px; line-height: 40px;
@ -16,7 +17,8 @@
margin: 16px 0; margin: 16px 0;
padding: 0; padding: 0;
display: block; display: block;
width: calc(100% - 55px); width: 100%;
flex: 1;
&[value]::-webkit-progress-bar { &[value]::-webkit-progress-bar {
background-color: var(--background); background-color: var(--background);

7
src/core/components/user-avatar/user-avatar.scss
View File

@ -28,9 +28,10 @@
} }
&.core-bar-button-image img { &.core-bar-button-image img {
padding: 0; padding: 0;
width: var(--core-toolbar-button-image-width); width: var(--core-header-toolbar-button-image-size);
height: var(--core-toolbar-button-image-width); height: var(--core-header-toolbar-button-image-size);
max-width: var(--core-toolbar-button-image-width); max-width: var(--core-header-toolbar-button-image-size);
max-height: var(--core-header-toolbar-button-image-size);
border-radius: 50%; border-radius: 50%;
} }

12
src/core/features/course/components/format/core-course-format.html
View File

@ -49,15 +49,15 @@
</ion-item> </ion-item>
<ion-item *ngIf="selectedSection && selectedSection.id != allSectionsId && <ion-item *ngIf="selectedSection && selectedSection.id != allSectionsId &&
(selectedSection.availabilityinfo || selectedSection.visible === 0)"> (selectedSection.availabilityinfo || selectedSection.visible === 0)">
<ion-badge color="secondary" class="ion-text-wrap" <ion-badge color="info" class="ion-text-wrap"
*ngIf="selectedSection.visible === 0 && selectedSection.uservisible !== false"> *ngIf="selectedSection.visible === 0 && selectedSection.uservisible !== false">
{{ 'core.course.hiddenfromstudents' | translate }} {{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge> </ion-badge>
<ion-badge color="secondary" class="ion-text-wrap" <ion-badge color="info" class="ion-text-wrap"
*ngIf="selectedSection.visible === 0 && selectedSection.uservisible === false"> *ngIf="selectedSection.visible === 0 && selectedSection.uservisible === false">
{{ 'core.notavailable' | translate }} {{ 'core.notavailable' | translate }}
</ion-badge> </ion-badge>
<ion-badge color="secondary" class="ion-text-wrap" *ngIf="selectedSection.availabilityinfo"> <ion-badge color="info" class="ion-text-wrap" *ngIf="selectedSection.availabilityinfo">
<core-format-text [text]="selectedSection.availabilityinfo" contextLevel="course" <core-format-text [text]="selectedSection.availabilityinfo" contextLevel="course"
[contextInstanceId]="course?.id"> [contextInstanceId]="course?.id">
</core-format-text> </core-format-text>
@ -125,13 +125,13 @@
<!-- Section download. --> <!-- Section download. -->
<ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: section}"></ng-container> <ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: section}"></ng-container>
<p *ngIf="section.visible === 0 || section.availabilityinfo"> <p *ngIf="section.visible === 0 || section.availabilityinfo">
<ion-badge color="secondary" *ngIf="section.visible === 0 && section.uservisible !== false" class="ion-text-wrap"> <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible !== false" class="ion-text-wrap">
{{ 'core.course.hiddenfromstudents' | translate }} {{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge> </ion-badge>
<ion-badge color="secondary" *ngIf="section.visible === 0 && section.uservisible === false" class="ion-text-wrap"> <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible === false" class="ion-text-wrap">
{{ 'core.notavailable' | translate }} {{ 'core.notavailable' | translate }}
</ion-badge> </ion-badge>
<ion-badge color="secondary" *ngIf="section.availabilityinfo" class="ion-text-wrap"> <ion-badge color="info" *ngIf="section.availabilityinfo" class="ion-text-wrap">
<core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course?.id"> <core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course?.id">
</core-format-text> </core-format-text>
</ion-badge> </ion-badge>

6
src/core/features/course/components/section-selector/section-selector.html
View File

@ -22,15 +22,15 @@
</core-format-text></h2> </core-format-text></h2>
<core-progress-bar *ngIf="section.progress >= 0" [progress]="section.progress"></core-progress-bar> <core-progress-bar *ngIf="section.progress >= 0" [progress]="section.progress"></core-progress-bar>
<ion-badge color="secondary" *ngIf="section.visible === 0 && section.uservisible !== false" <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible !== false"
class="ion-text-wrap"> class="ion-text-wrap">
{{ 'core.course.hiddenfromstudents' | translate }} {{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge> </ion-badge>
<ion-badge color="secondary" *ngIf="section.visible === 0 && section.uservisible === false" <ion-badge color="info" *ngIf="section.visible === 0 && section.uservisible === false"
class="ion-text-wrap"> class="ion-text-wrap">
{{ 'core.notavailable' | translate }} {{ 'core.notavailable' | translate }}
</ion-badge> </ion-badge>
<ion-badge color="secondary" *ngIf="section.availabilityinfo" class="ion-text-wrap"> <ion-badge color="info" *ngIf="section.availabilityinfo" class="ion-text-wrap">
<core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course?.id"> <core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course?.id">
</core-format-text> </core-format-text>
</ion-badge> </ion-badge>

4
src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
View File

@ -37,13 +37,13 @@
.core-rte-info-message { .core-rte-info-message {
padding: 5px; padding: 5px;
border-top: 1px solid var(--ion-color-secondary); border-top: 1px solid var(--ion-color-info);
background: var(--background); background: var(--background);
flex-shrink: 1; flex-shrink: 1;
font-size: 1.1rem; font-size: 1.1rem;
.icon { .icon {
color: var(--ion-color-secondary); color: var(--ion-color-info);
} }
} }
} }

4
src/core/features/settings/pages/site/site.html
View File

@ -41,7 +41,7 @@
<ion-item class="ion-text-wrap" *ngIf="spaceUsage"> <ion-item class="ion-text-wrap" *ngIf="spaceUsage">
<ion-label> <ion-label>
<h2 class="ion-text-wrap">{{ 'core.settings.spaceusage' | translate }} <ion-icon <h2 class="ion-text-wrap">{{ 'core.settings.spaceusage' | translate }} <ion-icon
name="fas-info-circle" color="secondary" [attr.aria-label]="'core.info' | translate" name="fas-info-circle" color="info" [attr.aria-label]="'core.info' | translate"
(click)="showSpaceInfo()"></ion-icon> (click)="showSpaceInfo()"></ion-icon>
</h2> </h2>
<p *ngIf="spaceUsage.spaceUsage">{{ spaceUsage.spaceUsage | coreBytesToSize }}</p> <p *ngIf="spaceUsage.spaceUsage">{{ spaceUsage.spaceUsage | coreBytesToSize }}</p>
@ -55,7 +55,7 @@
<ion-item class="ion-text-wrap"> <ion-item class="ion-text-wrap">
<ion-label> <ion-label>
<h2>{{ 'core.settings.synchronizenow' | translate }} <ion-icon name="fas-info-circle" <h2>{{ 'core.settings.synchronizenow' | translate }} <ion-icon name="fas-info-circle"
color="secondary" [attr.aria-label]="'core.info' | translate" (click)="showSyncInfo()"> color="info" [attr.aria-label]="'core.info' | translate" (click)="showSyncInfo()">
</ion-icon> </ion-icon>
</h2> </h2>
</ion-label> </ion-label>

2
src/core/services/app.ts
View File

@ -623,7 +623,7 @@ export class CoreAppProvider {
setStatusBarColor(color?: string): void { setStatusBarColor(color?: string): void {
if (!color) { if (!color) {
// Get the default color to reset it. // Get the default color to reset it.
color = getComputedStyle(document.documentElement).getPropertyValue('--ion-statusbar-background').trim(); color = getComputedStyle(document.documentElement).getPropertyValue('--core-header-toolbar-background').trim();
} }
// Make darker on Android. // Make darker on Android.

12
src/theme/globals.mixins.scss
View File

@ -214,3 +214,15 @@
} }
} }
} }
// Color mixins.
@function get_brightness($color) {
@return (red($color) + green($color) + blue($color)) / 3;
}
@function get_contrast_color($color) {
$brightness: get_brightness($color);
@return if($brightness < 127, white, black);
}

130
src/theme/globals.variables.scss
View File

@ -7,8 +7,8 @@
/* /*
* App colors * App colors
*/ */
$black: #3a3a3a !default; // Headings, standard text. $black: #282828 !default; // Headings, standard text.
$gray-darker: #626262 !default; // Text (emphasis-detail), placeholder, background. $gray-darker: #686566 !default; // Text (emphasis-detail), placeholder, background.
$gray-dark: #9e9e9e !default; // Borders (never text). $gray-dark: #9e9e9e !default; // Borders (never text).
$gray: #dddddd !default; $gray: #dddddd !default;
$gray-light: #e9e9e9 !default; // Background. $gray-light: #e9e9e9 !default; // Background.
@ -40,19 +40,24 @@ $orange-light: lighten($orange, 10%) !default;
$yellow-light: mix($yellow, white, 20%) !default; $yellow-light: mix($yellow, white, 20%) !default;
$yellow-dark: mix($yellow, black, 40%) !default; $yellow-dark: mix($yellow, black, 40%) !default;
$core-color: $orange !default; $brand-color: $orange !default;
$core-color-light: lighten($core-color, 10%) !default; $brand-color-light: lighten($brand-color, 10%) !default;
$core-color-dark: darken($core-color, 10%) !default; $brand-color-dark: darken($brand-color, 10%) !default;
$text-color: $black !default; $text-color: $black !default;
$link-color: $blue !default; $text-color-dark: $white !default;
$background-color: $gray-light !default; $link-color: $blue !default;
$subdued-text-color: $gray-darker !default; $background-color: $gray-light !default;
$background-color-dark: #1e1e1e !default;
$subdued-text-color: $gray-darker !default;
$ion-item-background: $white !default;
$ion-item-background-dark: #1e1e1e !default;
$core-online-color: #5cb85c !default; $core-online-color: #5cb85c !default;
$primary: $core-color !default; $primary: $blue !default;
$secondary: $blue !default; $secondary: $brand-color !default;
$tertiary: $turquoise !default; $tertiary: $turquoise !default;
$danger: $red !default; $danger: $red !default;
$warning: $yellow !default; $warning: $yellow !default;
@ -65,61 +70,61 @@ $dark: $black !default;
$colors: ( $colors: (
primary: ( primary: (
base: $primary, base: $primary,
contrast: #fff, contrast: get_contrast_color($primary),
shade: get-color-shade($primary), shade: get-color-shade($primary),
tint: get-color-tint($primary) tint: get-color-tint($primary)
), ),
secondary: ( secondary: (
base: $secondary, base: $secondary,
contrast: #fff, contrast: get_contrast_color($secondary),
shade: get-color-shade($secondary), shade: get-color-shade($secondary),
tint: get-color-tint($secondary) tint: get-color-tint($secondary)
), ),
tertiary: ( tertiary: (
base: $tertiary, base: $tertiary,
contrast: #fff, contrast: get_contrast_color($tertiary),
shade: get-color-shade($tertiary), shade: get-color-shade($tertiary),
tint: get-color-tint($tertiary) tint: get-color-tint($tertiary)
), ),
success: ( success: (
base: $success, base: $success,
contrast: #fff, contrast: get_contrast_color($success),
shade: get-color-shade($success), shade: get-color-shade($success),
tint: get-color-tint($success) tint: get-color-tint($success)
), ),
warning: ( warning: (
base: $warning, base: $warning,
contrast: #000, contrast: get_contrast_color($warning),
shade: get-color-shade($warning), shade: get-color-shade($warning),
tint: get-color-tint($warning) tint: get-color-tint($warning)
), ),
danger: ( danger: (
base: $danger, base: $danger,
contrast: #fff, contrast: get_contrast_color($danger),
shade: get-color-shade($danger), shade: get-color-shade($danger),
tint: get-color-tint($danger) tint: get-color-tint($danger)
), ),
info: ( info: (
base: $info, base: $info,
contrast: #fff, contrast: get_contrast_color($info),
shade: get-color-shade($info), shade: get-color-shade($info),
tint: get-color-tint($info) tint: get-color-tint($info)
), ),
light: ( light: (
base: $light, base: $light,
contrast: #000, contrast: get_contrast_color($light),
shade: get-color-shade($light), shade: get-color-shade($light),
tint: get-color-tint($light) tint: get-color-tint($light)
), ),
medium: ( medium: (
base: $medium, base: $medium,
contrast: #fff, contrast: get_contrast_color($medium),
shade: get-color-shade($medium), shade: get-color-shade($medium),
tint: get-color-tint($medium) tint: get-color-tint($medium)
), ),
dark: ( dark: (
base: $dark, base: $dark,
contrast: #fff, contrast: get_contrast_color($dark),
shade: get-color-shade($dark), shade: get-color-shade($dark),
tint: get-color-tint($dark) tint: get-color-tint($dark)
) )
@ -170,3 +175,86 @@ $breakpoint-tablet: map-get($screen-breakpoints, tablet), !default;
$z-index-overlay: 1001; $z-index-overlay: 1001;
$z-index-overlay-wrapper: 10; $z-index-overlay-wrapper: 10;
// Top header bar.
$toolbar-background: $brand-color !default;
$toolbar-color: get_contrast_color($toolbar-background) !default;
$toolbar-button-image-size: 44px !default;
// Bottom tab bar.
$bottom-tabs-background: $white !default;
$bottom-tabs-color: $gray-darker !default;
$bottom-tabs-color-selected: $primary !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-border-color: $gray !default;
$core-tab-color-active: $primary !default;
$core-tab-border-color-active: $core-tab-color-active !default;
$core-tabs-background-dark: $black !default;
$core-tab-background-dark: $core-tabs-background-dark !default;
$core-tab-color-dark: $white !default;
$core-tab-border-color-dark: $gray-light !default;
$core-progressbar-color: $primary !default;
$core-progressbar-text-color: $gray-darker !default;
$core-progressbar-background: $gray-lighter !default;
$core-progressbar-height: 8px !default;
$core-progressbar-text-color-dark: $gray-lighter !default;
$core-side-blocks-max-width: 30% !default;
$core-side-blocks-min-width: 280px !default;
////
$core-combobox-color: $primary !default;
$core-selected-item-color: $primary !default;
$core-selected-item-border-width: 5px !default;
$core-login-background: $white !default;
$core-login-text-color: $black !default;
$core-login-background-dark: $black !default;
$core-login-text-color-dark: $white !default;
$core-star-color: $brand-color !default;
$core-large-avatar-size: 90px !default;
$core-avatar-size: 40px !default;
$core-send-message-input-background: $gray !default;
$core-send-message-input-color: $black !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-color: $white !default;
$addon-calendar-border-color: $gray !default;
$addon-messages-message-bg: $white !default;
$addon-messages-message-activated-bg: $gray-light !default;
$addon-messages-message-note-text: $gray-dark !default;
$addon-messages-message-note-font-size: 75% !default;
$addon-messages-message-mine-bg: $gray-light !default;
$addon-messages-message-mine-activated-bg: $gray !default;
$addon-messages-avatar-size: 30px !default;
$addon-messages-discussion-badge: $primary !default;
$addon-messages-discussion-badge-text: $white !default;
$addon-forum-avatar-size: 28px !default;
$addon-forum-border-color: $gray !default;
$addon-forum-highlight-color: $gray-lighter !default;
$addon-forum-border-color-dark: $gray-darker !default;
$addon-forum-highlight-color-dark: $gray-dark !default;

32
src/theme/theme.base.scss
View File

@ -50,11 +50,6 @@ ion-item.ion-text-wrap ion-label {
white-space: normal !important; white-space: normal !important;
} }
// Buttons.
.button-clear {
--ion-color-primary: var(--ion-text-color);
}
// It fixes the click on links where ion-ripple-effect is present. // It fixes the click on links where ion-ripple-effect is present.
.ion-activatable ion-label, .ion-activatable ion-label,
.item-multiple-items ion-label { .item-multiple-items ion-label {
@ -78,14 +73,24 @@ ion-item.ion-text-wrap ion-label {
// Ionic toolbar. // Ionic toolbar.
ion-toolbar ion-back-button, ion-toolbar ion-back-button,
ion-toolbar .in-toolbar.button-clear { ion-toolbar .in-toolbar.button-clear {
--color: var(--ion-color-primary-contrast); --color: var(--core-header-toolbar-color);
--ion-toolbar-color: var(--ion-color-primary-contrast); --ion-toolbar-color: var(--core-header-toolbar-color);
} }
ion-header ion-toolbar .button.button-clear { ion-header ion-toolbar .button.button-clear,
--color: var(--ion-color-primary-contrast); ion-header ion-toolbar .button.button-solid {
--color: var(--core-header-toolbar-color);
--ion-color-primary: var(--core-header-toolbar-color);
} }
ion-header ion-toolbar .button.button-clear.button-has-icon-only,
ion-header ion-toolbar .button.button-solid.button-has-icon-only {
--border-radius: 50%;
width: 48px;
height: 48px;
}
ion-toolbar .core-navbar-button-hidden { ion-toolbar .core-navbar-button-hidden {
display: none !important; display: none !important;
} }
@ -379,9 +384,10 @@ ion-item img.core-module-icon[slot="start"] {
ion-toolbar ion-title img.core-bar-button-image, ion-toolbar ion-title img.core-bar-button-image,
ion-toolbar ion-title .core-bar-button-image img { ion-toolbar ion-title .core-bar-button-image img {
padding: 0; padding: 0;
width: var(--core-toolbar-button-image-width); width: var(--core-header-toolbar-button-image-size);
height: var(--core-toolbar-button-image-width); height: var(--core-header-toolbar-button-image-size);
max-width: var(--core-toolbar-button-image-width); max-width: var(--core-header-toolbar-button-image-size);
max-height: var(--core-header-toolbar-button-image-size);
border-radius: 50%; border-radius: 50%;
} }
@ -422,7 +428,7 @@ ion-select::part(text) {
} }
.core-anchor, core-format-text a { .core-anchor, core-format-text a {
color: -webkit-link; color: var(--core-link-color);
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} }

40
src/theme/theme.dark.scss
View File

@ -6,11 +6,11 @@
*/ */
:root body.dark { :root body.dark {
--ion-background-color: #1e1e1e; --ion-background-color: #{$background-color-dark};
--ion-background-color-rgb: 18,18,18; --ion-background-color-rgb: color-to-rgb-list(var(--ion-background-color));
--ion-text-color: #ffffff; --ion-text-color: #{$text-color-dark};
--ion-text-color-rgb: 255,255,255; --ion-text-color-rgb: color-to-rgb-list(var(--ion-text-color));
--ion-border-color: #3f3f3f; --ion-border-color: #3f3f3f;
@ -51,26 +51,30 @@
--contrast-background: var(--ion-background-color); --contrast-background: var(--ion-background-color);
} }
--core-tabs-background: var(--custom-tabs-background, #3a3a3a); ion-action-sheet {
--core-tab-background: var(--custom-tab-background, #3a3a3a); .action-sheet-cancel {
--core-tab-color: var(--custom-tab-color, var(--white)); --button-color: var(--ion-color-danger-tint);
--core-tab-border-color: var(--custom-tab-border-color, var(--gray-light)); }
core-progress-bar {
--text-color: var(--custom-progress-text-color, var(--gray-lighter));
} }
--ion-item-background: #1e1e1e; --core-tabs-background: #{$core-tabs-background-dark};
--core-tab-background: #{$core-tab-background-dark};
--core-tab-color: #{$core-tab-color-dark};
--core-tab-border-color: #{$core-tab-border-color-dark};
core-progress-bar {
--text-color: #{$core-progressbar-text-color-dark};
}
--ion-item-background: #{$ion-item-background-dark};
--ion-item-detail-icon-color: var(--white); --ion-item-detail-icon-color: var(--white);
ion-item-divider { ion-item-divider {
--background: var(--black); --background: var(--black);
--color: var(--white); --color: var(--white);
} }
--core-combobox-background: var(--custom-combobox-background, #3a3a3a); --core-login-background: #{$core-login-background-dark};
--core-login-text-color: #{$core-login-text-color-dark};
--core-login-background: var(--custom-login-background, #3a3a3a);
--core-login-text-color: var(--custom-login-text-color, white);
--core-question-correct-color: var(--green-light); --core-question-correct-color: var(--green-light);
--core-question-correct-color-bg: var(--green-dark); --core-question-correct-color-bg: var(--green-dark);
@ -91,6 +95,6 @@
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light); --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light);
--addon-forum-border-color: var(--custom-forum-border-color, var(--gray-darker)); --addon-forum-border-color: #{$addon-forum-border-color-dark};
--addon-forum-highlight-color: var(--custom-forum-highlight-color, var(--gray-dark)); --addon-forum-highlight-color: #{$addon-forum-highlight-color-dark};
} }

139
src/theme/theme.light.scss
View File

@ -40,9 +40,9 @@
--yellow-dark: #{$yellow-dark}; --yellow-dark: #{$yellow-dark};
--purple: #{$purple}; --purple: #{$purple};
--core-color: #{$core-color}; --brand-color: #{$brand-color};
--core-color-light: #{$core-color-light}; --brand-color-light: #{$brand-color-light};
--core-color-dark: #{$core-color-dark}; --brand-color-dark: #{$brand-color-dark};
--core-online-color: #{$core-online-color}; --core-online-color: #{$core-online-color};
@ -69,7 +69,7 @@
--ion-text-color-rgb: 58,58,58; --ion-text-color-rgb: 58,58,58;
--ion-card-color: var(--ion-text-color); --ion-card-color: var(--ion-text-color);
--text-hightlight-background-color: var(--custom-text-hightlight-background-color, #99c1ed); --text-hightlight-background-color: #{$core-text-hightlight-background-color};
ion-content { ion-content {
--background: #{$background-color}; --background: #{$background-color};
@ -77,30 +77,43 @@
--contrast-background: var(--white); --contrast-background: var(--white);
} }
--core-bottom-tabs-background: #{$bottom-tabs-background};
--core-bottom-tabs-color: #{$bottom-tabs-color};
--core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected};
ion-tab-bar { ion-tab-bar {
--background: var(--custom-bottom-tabs-background, var(--gray-darker)); --background: var(--core-bottom-tabs-background);
--color: var(--custom-bottom-tabs-color, var(--white)); --color: var(--core-bottom-tabs-color);
--color-selected: var(--core-bottom-tabs-color-selected);
} }
--core-toolbar-button-image-width: var(--custom-toolbar-button-image-width, 32px); --core-link-color: #{$link-color};
--ion-statusbar-background: var(--custom-toolbar-background, var(--ion-color-primary)); a {
color: var(--core-link-color);
}
--core-header-toolbar-button-image-size: #{$toolbar-button-image-size};
--core-header-toolbar-background: #{$toolbar-background};
--core-header-toolbar-color: #{$toolbar-color};
ion-toolbar { ion-toolbar {
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast)); --color: var(--core-header-toolbar-color);
--background: var(--ion-statusbar-background); --background: var(--core-header-toolbar-background);
ion-button { ion-button {
--ion-toolbar-color: transparent; --ion-toolbar-color: transparent;
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast)); --color: var(--core-header-toolbar-color);
} }
ion-spinner { ion-spinner {
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast)); --color: var(--core-header-toolbar-color);
} }
} }
ion-action-sheet { ion-action-sheet {
--action-sheet-shadow-color: var(--custom--action-sheet-shadow-color, 0, 0, 0, 1); --button-color-selected: #{$action-sheet-selected};
--button-color-selected: var(--custom--action-sheet-selected-color, var(--core-color)); --title-border-color: var(--gray);
--title-border-color: var(--custom-title-border-color, var(--gray));
.action-sheet-title {
--color: #{$action-sheet-title-color};
}
@media (min-height: 500px) { @media (min-height: 500px) {
--max-height: 50%; --max-height: 50%;
@ -112,12 +125,12 @@
} }
} }
--core-tabs-background: var(--custom-tabs-background, var(--white)); --core-tabs-background: #{$core-tabs-background};
--core-tab-background: var(--custom-tab-background, var(--core-tabs-background)); --core-tab-background: #{$core-tab-background};
--core-tab-color: var(--custom-tab-color, var(--gray-dark)); --core-tab-color: #{$core-tab-color};
--core-tab-border-color: var(--custom-tab-border-color, var(--gray)); --core-tab-border-color: #{$core-tab-border-color};
--core-tab-color-active: var(--custom-tab-color-active, var(--core-color)); --core-tab-color-active: #{$core-tab-color-active};
--core-tab-border-color-active: var(--custom-tab-border-color-active, var(--core-color)); --core-tab-border-color-active: #{$core-tab-border-color-active};
core-tabs, core-tabs-outlet { core-tabs, core-tabs-outlet {
--background: var(--core-tabs-background); --background: var(--core-tabs-background);
@ -131,22 +144,22 @@
} }
ion-spinner { ion-spinner {
--color: var(--core-color); --color: var(--ion-color-primary);
} }
core-progress-bar { core-progress-bar {
--height: var(--custom-progress-bar-height, 8px); --height: #{$core-progressbar-height};
--color: var(--custom-progress-color, var(--core-color)); --color: #{$core-progressbar-color};
--text-color: var(--custom-progress-text-color, var(--gray-darker)); --text-color: #{$core-progressbar-text-color};
--background: var(--custom-progress-background, var(--gray-lighter)); --background: #{$core-progressbar-background};
} }
core-block-course-blocks { core-block-course-blocks {
--side-blocks-max-width: var(--custom-side-blocks-max-width, 30%); --side-blocks-max-width: #{$core-side-blocks-max-width};
--side-blocks-min-width: var(--custom-side-blocks-min-width, 280px); --side-blocks-min-width: #{$core-side-blocks-min-width};
} }
--ion-item-background: var(--white); --ion-item-background: #{$ion-item-background};
--ion-item-detail-icon-color: var(--gray-darker); --ion-item-detail-icon-color: var(--gray-darker);
--ion-item-detail-icon-font-size: 20px; --ion-item-detail-icon-font-size: 20px;
--ion-item-detail-icon-opacity: 1; --ion-item-detail-icon-opacity: 1;
@ -162,50 +175,50 @@
min-height: calc(var(--a11y-min-target-size) + 8px); min-height: calc(var(--a11y-min-target-size) + 8px);
} }
--core-combobox-background: var(--custom-combobox-background, var(--ion-item-background)); --core-combobox-background: var(--ion-item-background);
--core-combobox-color: var(--custom-combobox-color, var(--ion-color-primary)); --core-combobox-color: #{$core-combobox-color};
--selected-item-color: var(--custom-selected-item-color, var(--core-color)); --selected-item-color: #{$core-selected-item-color};
--selected-item-border-width: var(--custom-selected-item-border-width, 5px); --selected-item-border-width: #{$core-selected-item-border-width};
--core-login-background: var(--custom-login-background, var(--white)); --core-login-background: #{$core-login-background};
--core-login-text-color: var(--custom-login-text-color, var(--black)); --core-login-text-color: #{$core-login-text-color};
--core-star-color: var(--custom-star-color, var(--core-color)); --core-star-color: #{$core-star-color};
--core-large-avatar-size: var(--custom-large-avatar-size, 90px); --core-large-avatar-size: #{$core-large-avatar-size};
--core-avatar-size: var(--custom-avatar-size, 40px); --core-avatar-size: #{$core-avatar-size};
--core-send-message-input-background: var(--custom-send-message-input-background, var(--gray)); --core-send-message-input-background: #{$core-send-message-input-background};
--core-send-message-input-color: var(--custom-send-message-input-color, var(--black)); --core-send-message-input-color: #{$core-send-message-input-color};
--addon-calendar-event-category-color: var(--custom-calendar-event-category-color, var(--purple)); --addon-calendar-event-category-color: #{$addon-calendar-event-category-color};
--addon-calendar-event-course-color: var(--custom-calendar-event-course-color, var(--red)); --addon-calendar-event-course-color: #{$addon-calendar-event-course-color};
--addon-calendar-event-group-color: var(--custom-calendar-event-group-color, var(--yellow)); --addon-calendar-event-group-color: #{$addon-calendar-event-group-color};
--addon-calendar-event-user-color: var(--custom-calendar-event-user-color, var(--blue)); --addon-calendar-event-user-color: #{$addon-calendar-event-user-color};
--addon-calendar-event-site-color: var(--custom-calendar-event-site-color, var(--green)); --addon-calendar-event-site-color: #{$addon-calendar-event-site-color};
--addon-calendar-today-bgcolor: var(--custom-calendar-today-bgcolor, var(--core-color)); --addon-calendar-today-bgcolor: #{$addon-calendar-today-bgcolor};
--addon-calendar-today-color: var(--custom-calendar-today-color, var(--white)); --addon-calendar-today-color: #{$addon-calendar-today-color};
--addon-calendar-border-color: var(--custom-calendar-border-color, var(--gray)); --addon-calendar-border-color: #{$addon-calendar-border-color};
--addon-messages-message-bg: var(--custom-messages-message-bg, var(--white)); --addon-messages-message-bg: #{$addon-messages-message-bg};
--addon-messages-message-activated-bg: var(--custom-messages-message-activated-bg, var(--gray-light)); --addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg};
--addon-messages-message-note-text: var(--custom-messages-message-note-text, var(--gray-dark)); --addon-messages-message-note-text: #{$addon-messages-message-note-text};
--addon-messages-message-note-font-size: var(--custom-messages-message-note-font-size, 75%); --addon-messages-message-note-font-size: #{$addon-messages-message-note-font-size};
--addon-messages-message-mine-bg: var(--custom-messages-message-mine-bg, var(--gray-light)); --addon-messages-message-mine-bg: #{$addon-messages-message-mine-bg};
--addon-messages-message-mine-activated-bg: var(--custom-messages-message-mine-activated-bg, var(--gray)); --addon-messages-message-mine-activated-bg: #{$addon-messages-message-mine-activated-bg};
--addon-messages-avatar-size: var(--custom-messages-avatar-size, 30px); --addon-messages-avatar-size: #{$addon-messages-avatar-size};
--addon-messages-discussion-badge: var(--custom-messages-discussion-badge, var(--core-color)); --addon-messages-discussion-badge: #{$addon-messages-discussion-badge};
--addon-messages-discussion-badge-text: var(--custom-messages-discussion-badge-text, var(--white)); --addon-messages-discussion-badge-text: #{$addon-messages-discussion-badge-text};
--addon-forum-avatar-size: var(--custom-forum-avatar-size, 28px); --addon-forum-avatar-size: #{$addon-forum-avatar-size};
--addon-forum-border-color: var(--custom-forum-border-color, var(--gray)); --addon-forum-border-color: #{$addon-forum-border-color};
--addon-forum-highlight-color: var(--custom-forum-highlight-color, var(--gray-lighter)); --addon-forum-highlight-color: #{$addon-forum-highlight-color};
--drop-shadow: var(--custom-drop-shadow, 0, 0, 0, 0.2); --drop-shadow: 0, 0, 0, 0.2;
--core-menu-box-shadow-end: var(--custom-menu-box-shadow-end, -4px 0px 16px rgba(0, 0, 0, 0.18)); --core-menu-box-shadow-end: -4px 0px 16px rgba(0, 0, 0, 0.18);
--core-menu-box-shadow-start: var(--custom-menu-box-shadow-start, 4px 0px 16px rgba(0, 0, 0, 0.18)); --core-menu-box-shadow-start: 4px 0px 16px rgba(0, 0, 0, 0.18);
--core-question-correct-color: var(--green-dark); --core-question-correct-color: var(--green-dark);
--core-question-correct-color-bg: var(--green-light); --core-question-correct-color-bg: var(--green-light);