From 4f9f69429880f7854ded4a63c075d16672a650ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 7 May 2021 10:31:06 +0200 Subject: [PATCH] MOBILE-3745 a11y: Fix most a11y color issues by changing base primary --- .../messages/pages/discussion/discussion.scss | 4 +- src/addons/mod/data/data-forms.scss | 2 +- .../mod/forum/components/index/index.scss | 2 +- .../mod/forum/components/post/post.scss | 2 +- .../components/progress-bar/progress-bar.scss | 4 +- .../components/user-avatar/user-avatar.scss | 7 +- .../components/format/core-course-format.html | 12 +- .../section-selector/section-selector.html | 6 +- .../rich-text-editor/rich-text-editor.scss | 4 +- .../features/settings/pages/site/site.html | 4 +- src/core/services/app.ts | 2 +- src/theme/globals.mixins.scss | 12 ++ src/theme/globals.variables.scss | 130 +++++++++++++--- src/theme/theme.base.scss | 32 ++-- src/theme/theme.dark.scss | 40 ++--- src/theme/theme.light.scss | 139 ++++++++++-------- 16 files changed, 264 insertions(+), 138 deletions(-) diff --git a/src/addons/messages/pages/discussion/discussion.scss b/src/addons/messages/pages/discussion/discussion.scss index 477aa2305..88e6b41f5 100644 --- a/src/addons/messages/pages/discussion/discussion.scss +++ b/src/addons/messages/pages/discussion/discussion.scss @@ -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; } } diff --git a/src/addons/mod/data/data-forms.scss b/src/addons/mod/data/data-forms.scss index 365655ab4..02b7e4ec3 100644 --- a/src/addons/mod/data/data-forms.scss +++ b/src/addons/mod/data/data-forms.scss @@ -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); diff --git a/src/addons/mod/forum/components/index/index.scss b/src/addons/mod/forum/components/index/index.scss index 8e3bee0bf..f5baa1efb 100644 --- a/src/addons/mod/forum/components/index/index.scss +++ b/src/addons/mod/forum/components/index/index.scss @@ -3,7 +3,7 @@ :host { .addon-forum-star { - color: var(--core-color); + color: var(--core-star-color); } .addon-mod-forum-discussion.item { diff --git a/src/addons/mod/forum/components/post/post.scss b/src/addons/mod/forum/components/post/post.scss index b9d4db52a..dfb13f112 100644 --- a/src/addons/mod/forum/components/post/post.scss +++ b/src/addons/mod/forum/components/post/post.scss @@ -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 { diff --git a/src/core/components/progress-bar/progress-bar.scss b/src/core/components/progress-bar/progress-bar.scss index e82f88fa1..11b6a5f70 100644 --- a/src/core/components/progress-bar/progress-bar.scss +++ b/src/core/components/progress-bar/progress-bar.scss @@ -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); diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss index ae730b0e0..9047b0a10 100644 --- a/src/core/components/user-avatar/user-avatar.scss +++ b/src/core/components/user-avatar/user-avatar.scss @@ -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%; } diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html index c721d5f5f..fb53e6f8c 100644 --- a/src/core/features/course/components/format/core-course-format.html +++ b/src/core/features/course/components/format/core-course-format.html @@ -49,15 +49,15 @@ - {{ 'core.course.hiddenfromstudents' | translate }} - {{ 'core.notavailable' | translate }} - + @@ -125,13 +125,13 @@

- + {{ 'core.course.hiddenfromstudents' | translate }} - + {{ 'core.notavailable' | translate }} - + diff --git a/src/core/features/course/components/section-selector/section-selector.html b/src/core/features/course/components/section-selector/section-selector.html index a439b13e0..ce654d4df 100644 --- a/src/core/features/course/components/section-selector/section-selector.html +++ b/src/core/features/course/components/section-selector/section-selector.html @@ -22,15 +22,15 @@ - {{ 'core.course.hiddenfromstudents' | translate }} - {{ 'core.notavailable' | translate }} - + diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss index e8edb8955..75d85bb6b 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss +++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss @@ -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); } } } diff --git a/src/core/features/settings/pages/site/site.html b/src/core/features/settings/pages/site/site.html index e3ed64325..e24c54f74 100644 --- a/src/core/features/settings/pages/site/site.html +++ b/src/core/features/settings/pages/site/site.html @@ -41,7 +41,7 @@

{{ 'core.settings.spaceusage' | translate }}

{{ spaceUsage.spaceUsage | coreBytesToSize }}

@@ -55,7 +55,7 @@

{{ 'core.settings.synchronizenow' | translate }} + color="info" [attr.aria-label]="'core.info' | translate" (click)="showSyncInfo()">

diff --git a/src/core/services/app.ts b/src/core/services/app.ts index 5045ad68f..6f233f83f 100644 --- a/src/core/services/app.ts +++ b/src/core/services/app.ts @@ -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. diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss index 45233a3a1..59a3476d6 100644 --- a/src/theme/globals.mixins.scss +++ b/src/theme/globals.mixins.scss @@ -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); +} diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index 327dd8f23..23e5aa06d 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -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; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 7f7cb6b09..aae067e92 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -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; } diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 096f833ae..25b8887cc 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -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}; } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index d4796e3bf..93b975c55 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -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);