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 {
color: var(--core-color);
color: var(--ion-color-primary);
background-color: transparent;
margin-top: 6px;
ion-icon {
color: var(--core-color);
color: var(--ion-color-primary);
background-color: transparent;
}
}

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

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

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

@ -3,7 +3,7 @@
:host {
.addon-forum-star {
color: var(--core-color);
color: var(--core-star-color);
}
.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);
.addon-forum-star {
color: var(--core-color);
color: var(--core-star-color);
}
ion-card-header .item {

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

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

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

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

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

@ -49,15 +49,15 @@
</ion-item>
<ion-item *ngIf="selectedSection && selectedSection.id != allSectionsId &&
(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">
{{ 'core.course.hiddenfromstudents' | translate }}
</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">
{{ 'core.notavailable' | translate }}
</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"
[contextInstanceId]="course?.id">
</core-format-text>
@ -125,13 +125,13 @@
<!-- Section download. -->
<ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: section}"></ng-container>
<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 }}
</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 }}
</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>
</ion-badge>

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

@ -22,15 +22,15 @@
</core-format-text></h2>
<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">
{{ 'core.course.hiddenfromstudents' | translate }}
</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">
{{ 'core.notavailable' | translate }}
</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>
</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 {
padding: 5px;
border-top: 1px solid var(--ion-color-secondary);
border-top: 1px solid var(--ion-color-info);
background: var(--background);
flex-shrink: 1;
font-size: 1.1rem;
.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-label>
<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>
</h2>
<p *ngIf="spaceUsage.spaceUsage">{{ spaceUsage.spaceUsage | coreBytesToSize }}</p>
@ -55,7 +55,7 @@
<ion-item class="ion-text-wrap">
<ion-label>
<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>
</h2>
</ion-label>

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

@ -623,7 +623,7 @@ export class CoreAppProvider {
setStatusBarColor(color?: string): void {
if (!color) {
// 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.

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
*/
$black: #3a3a3a !default; // Headings, standard text.
$gray-darker: #626262 !default; // Text (emphasis-detail), placeholder, background.
$black: #282828 !default; // Headings, standard text.
$gray-darker: #686566 !default; // Text (emphasis-detail), placeholder, background.
$gray-dark: #9e9e9e !default; // Borders (never text).
$gray: #dddddd !default;
$gray-light: #e9e9e9 !default; // Background.
@ -40,19 +40,24 @@ $orange-light: lighten($orange, 10%) !default;
$yellow-light: mix($yellow, white, 20%) !default;
$yellow-dark: mix($yellow, black, 40%) !default;
$core-color: $orange !default;
$core-color-light: lighten($core-color, 10%) !default;
$core-color-dark: darken($core-color, 10%) !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;
$link-color: $blue !default;
$background-color: $gray-light !default;
$subdued-text-color: $gray-darker !default;
$text-color: $black !default;
$text-color-dark: $white !default;
$link-color: $blue !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;
$primary: $core-color !default;
$secondary: $blue !default;
$primary: $blue !default;
$secondary: $brand-color !default;
$tertiary: $turquoise !default;
$danger: $red !default;
$warning: $yellow !default;
@ -65,61 +70,61 @@ $dark: $black !default;
$colors: (
primary: (
base: $primary,
contrast: #fff,
contrast: get_contrast_color($primary),
shade: get-color-shade($primary),
tint: get-color-tint($primary)
),
secondary: (
base: $secondary,
contrast: #fff,
contrast: get_contrast_color($secondary),
shade: get-color-shade($secondary),
tint: get-color-tint($secondary)
),
tertiary: (
base: $tertiary,
contrast: #fff,
contrast: get_contrast_color($tertiary),
shade: get-color-shade($tertiary),
tint: get-color-tint($tertiary)
),
success: (
base: $success,
contrast: #fff,
contrast: get_contrast_color($success),
shade: get-color-shade($success),
tint: get-color-tint($success)
),
warning: (
base: $warning,
contrast: #000,
contrast: get_contrast_color($warning),
shade: get-color-shade($warning),
tint: get-color-tint($warning)
),
danger: (
base: $danger,
contrast: #fff,
contrast: get_contrast_color($danger),
shade: get-color-shade($danger),
tint: get-color-tint($danger)
),
info: (
base: $info,
contrast: #fff,
contrast: get_contrast_color($info),
shade: get-color-shade($info),
tint: get-color-tint($info)
),
light: (
base: $light,
contrast: #000,
contrast: get_contrast_color($light),
shade: get-color-shade($light),
tint: get-color-tint($light)
),
medium: (
base: $medium,
contrast: #fff,
contrast: get_contrast_color($medium),
shade: get-color-shade($medium),
tint: get-color-tint($medium)
),
dark: (
base: $dark,
contrast: #fff,
contrast: get_contrast_color($dark),
shade: get-color-shade($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-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;
}
// Buttons.
.button-clear {
--ion-color-primary: var(--ion-text-color);
}
// It fixes the click on links where ion-ripple-effect is present.
.ion-activatable ion-label,
.item-multiple-items ion-label {
@ -78,14 +73,24 @@ ion-item.ion-text-wrap ion-label {
// Ionic toolbar.
ion-toolbar ion-back-button,
ion-toolbar .in-toolbar.button-clear {
--color: var(--ion-color-primary-contrast);
--ion-toolbar-color: var(--ion-color-primary-contrast);
--color: var(--core-header-toolbar-color);
--ion-toolbar-color: var(--core-header-toolbar-color);
}
ion-header ion-toolbar .button.button-clear {
--color: var(--ion-color-primary-contrast);
ion-header ion-toolbar .button.button-clear,
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 {
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 .core-bar-button-image img {
padding: 0;
width: var(--core-toolbar-button-image-width);
height: var(--core-toolbar-button-image-width);
max-width: var(--core-toolbar-button-image-width);
width: var(--core-header-toolbar-button-image-size);
height: var(--core-header-toolbar-button-image-size);
max-width: var(--core-header-toolbar-button-image-size);
max-height: var(--core-header-toolbar-button-image-size);
border-radius: 50%;
}
@ -422,7 +428,7 @@ ion-select::part(text) {
}
.core-anchor, core-format-text a {
color: -webkit-link;
color: var(--core-link-color);
cursor: pointer;
text-decoration: underline;
}

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

@ -6,11 +6,11 @@
*/
:root body.dark {
--ion-background-color: #1e1e1e;
--ion-background-color-rgb: 18,18,18;
--ion-background-color: #{$background-color-dark};
--ion-background-color-rgb: color-to-rgb-list(var(--ion-background-color));
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-text-color: #{$text-color-dark};
--ion-text-color-rgb: color-to-rgb-list(var(--ion-text-color));
--ion-border-color: #3f3f3f;
@ -51,26 +51,30 @@
--contrast-background: var(--ion-background-color);
}
--core-tabs-background: var(--custom-tabs-background, #3a3a3a);
--core-tab-background: var(--custom-tab-background, #3a3a3a);
--core-tab-color: var(--custom-tab-color, var(--white));
--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-action-sheet {
.action-sheet-cancel {
--button-color: var(--ion-color-danger-tint);
}
}
--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-divider {
--background: var(--black);
--color: var(--white);
}
--core-combobox-background: var(--custom-combobox-background, #3a3a3a);
--core-login-background: var(--custom-login-background, #3a3a3a);
--core-login-text-color: var(--custom-login-text-color, white);
--core-login-background: #{$core-login-background-dark};
--core-login-text-color: #{$core-login-text-color-dark};
--core-question-correct-color: var(--green-light);
--core-question-correct-color-bg: var(--green-dark);
@ -91,6 +95,6 @@
--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-highlight-color: var(--custom-forum-highlight-color, var(--gray-dark));
--addon-forum-border-color: #{$addon-forum-border-color-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};
--purple: #{$purple};
--core-color: #{$core-color};
--core-color-light: #{$core-color-light};
--core-color-dark: #{$core-color-dark};
--brand-color: #{$brand-color};
--brand-color-light: #{$brand-color-light};
--brand-color-dark: #{$brand-color-dark};
--core-online-color: #{$core-online-color};
@ -69,7 +69,7 @@
--ion-text-color-rgb: 58,58,58;
--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 {
--background: #{$background-color};
@ -77,30 +77,43 @@
--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 {
--background: var(--custom-bottom-tabs-background, var(--gray-darker));
--color: var(--custom-bottom-tabs-color, var(--white));
--background: var(--core-bottom-tabs-background);
--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);
--ion-statusbar-background: var(--custom-toolbar-background, var(--ion-color-primary));
--core-link-color: #{$link-color};
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 {
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
--background: var(--ion-statusbar-background);
--color: var(--core-header-toolbar-color);
--background: var(--core-header-toolbar-background);
ion-button {
--ion-toolbar-color: transparent;
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
--color: var(--core-header-toolbar-color);
}
ion-spinner {
--color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
--color: var(--core-header-toolbar-color);
}
}
ion-action-sheet {
--action-sheet-shadow-color: var(--custom--action-sheet-shadow-color, 0, 0, 0, 1);
--button-color-selected: var(--custom--action-sheet-selected-color, var(--core-color));
--title-border-color: var(--custom-title-border-color, var(--gray));
--button-color-selected: #{$action-sheet-selected};
--title-border-color: var(--gray);
.action-sheet-title {
--color: #{$action-sheet-title-color};
}
@media (min-height: 500px) {
--max-height: 50%;
@ -112,12 +125,12 @@
}
}
--core-tabs-background: var(--custom-tabs-background, var(--white));
--core-tab-background: var(--custom-tab-background, var(--core-tabs-background));
--core-tab-color: var(--custom-tab-color, var(--gray-dark));
--core-tab-border-color: var(--custom-tab-border-color, var(--gray));
--core-tab-color-active: var(--custom-tab-color-active, var(--core-color));
--core-tab-border-color-active: var(--custom-tab-border-color-active, var(--core-color));
--core-tabs-background: #{$core-tabs-background};
--core-tab-background: #{$core-tab-background};
--core-tab-color: #{$core-tab-color};
--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-tabs, core-tabs-outlet {
--background: var(--core-tabs-background);
@ -131,22 +144,22 @@
}
ion-spinner {
--color: var(--core-color);
--color: var(--ion-color-primary);
}
core-progress-bar {
--height: var(--custom-progress-bar-height, 8px);
--color: var(--custom-progress-color, var(--core-color));
--text-color: var(--custom-progress-text-color, var(--gray-darker));
--background: var(--custom-progress-background, var(--gray-lighter));
--height: #{$core-progressbar-height};
--color: #{$core-progressbar-color};
--text-color: #{$core-progressbar-text-color};
--background: #{$core-progressbar-background};
}
core-block-course-blocks {
--side-blocks-max-width: var(--custom-side-blocks-max-width, 30%);
--side-blocks-min-width: var(--custom-side-blocks-min-width, 280px);
--side-blocks-max-width: #{$core-side-blocks-max-width};
--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-font-size: 20px;
--ion-item-detail-icon-opacity: 1;
@ -162,50 +175,50 @@
min-height: calc(var(--a11y-min-target-size) + 8px);
}
--core-combobox-background: var(--custom-combobox-background, var(--ion-item-background));
--core-combobox-color: var(--custom-combobox-color, var(--ion-color-primary));
--core-combobox-background: var(--ion-item-background);
--core-combobox-color: #{$core-combobox-color};
--selected-item-color: var(--custom-selected-item-color, var(--core-color));
--selected-item-border-width: var(--custom-selected-item-border-width, 5px);
--selected-item-color: #{$core-selected-item-color};
--selected-item-border-width: #{$core-selected-item-border-width};
--core-login-background: var(--custom-login-background, var(--white));
--core-login-text-color: var(--custom-login-text-color, var(--black));
--core-login-background: #{$core-login-background};
--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-avatar-size: var(--custom-avatar-size, 40px);
--core-large-avatar-size: #{$core-large-avatar-size};
--core-avatar-size: #{$core-avatar-size};
--core-send-message-input-background: var(--custom-send-message-input-background, var(--gray));
--core-send-message-input-color: var(--custom-send-message-input-color, var(--black));
--core-send-message-input-background: #{$core-send-message-input-background};
--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-course-color: var(--custom-calendar-event-course-color, var(--red));
--addon-calendar-event-group-color: var(--custom-calendar-event-group-color, var(--yellow));
--addon-calendar-event-user-color: var(--custom-calendar-event-user-color, var(--blue));
--addon-calendar-event-site-color: var(--custom-calendar-event-site-color, var(--green));
--addon-calendar-today-bgcolor: var(--custom-calendar-today-bgcolor, var(--core-color));
--addon-calendar-today-color: var(--custom-calendar-today-color, var(--white));
--addon-calendar-border-color: var(--custom-calendar-border-color, var(--gray));
--addon-calendar-event-category-color: #{$addon-calendar-event-category-color};
--addon-calendar-event-course-color: #{$addon-calendar-event-course-color};
--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-color: #{$addon-calendar-today-color};
--addon-calendar-border-color: #{$addon-calendar-border-color};
--addon-messages-message-bg: var(--custom-messages-message-bg, var(--white));
--addon-messages-message-activated-bg: var(--custom-messages-message-activated-bg, var(--gray-light));
--addon-messages-message-note-text: var(--custom-messages-message-note-text, var(--gray-dark));
--addon-messages-message-note-font-size: var(--custom-messages-message-note-font-size, 75%);
--addon-messages-message-mine-bg: var(--custom-messages-message-mine-bg, var(--gray-light));
--addon-messages-message-mine-activated-bg: var(--custom-messages-message-mine-activated-bg, var(--gray));
--addon-messages-avatar-size: var(--custom-messages-avatar-size, 30px);
--addon-messages-discussion-badge: var(--custom-messages-discussion-badge, var(--core-color));
--addon-messages-discussion-badge-text: var(--custom-messages-discussion-badge-text, var(--white));
--addon-messages-message-bg: #{$addon-messages-message-bg};
--addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg};
--addon-messages-message-note-text: #{$addon-messages-message-note-text};
--addon-messages-message-note-font-size: #{$addon-messages-message-note-font-size};
--addon-messages-message-mine-bg: #{$addon-messages-message-mine-bg};
--addon-messages-message-mine-activated-bg: #{$addon-messages-message-mine-activated-bg};
--addon-messages-avatar-size: #{$addon-messages-avatar-size};
--addon-messages-discussion-badge: #{$addon-messages-discussion-badge};
--addon-messages-discussion-badge-text: #{$addon-messages-discussion-badge-text};
--addon-forum-avatar-size: var(--custom-forum-avatar-size, 28px);
--addon-forum-border-color: var(--custom-forum-border-color, var(--gray));
--addon-forum-highlight-color: var(--custom-forum-highlight-color, var(--gray-lighter));
--addon-forum-avatar-size: #{$addon-forum-avatar-size};
--addon-forum-border-color: #{$addon-forum-border-color};
--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-start: var(--custom-menu-box-shadow-start, 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: 4px 0px 16px rgba(0, 0, 0, 0.18);
--core-question-correct-color: var(--green-dark);
--core-question-correct-color-bg: var(--green-light);