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

MOBILE-3814 styles: Adapt colors to match LMS

main
Pau Ferrer Ocaña 2022-02-03 15:28:40 +01:00
parent cb5508fc72
commit 5040f70da8
31 changed files with 264 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addons/block/blogtags/components/blogtags/blogtags.scss
View File

@ -11,8 +11,8 @@
display: inline-block; display: inline-block;
a { a {
background: var(--ion-color-primary); background: var(--primary);
color: var(--ion-color-primary-contrast); color: var(--primary-contrast);
padding: 3px 8px; padding: 3px 8px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
display: inline-block; display: inline-block;

4
src/addons/block/tags/components/tags/tags.scss
View File

@ -13,8 +13,8 @@
display: inline-block; display: inline-block;
a { a {
background: var(--ion-color-primary); background: var(--primary);
color: var(--ion-color-primary-contrast); color: var(--primary-contrast);
padding: 3px 8px; padding: 3px 8px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
display: inline-block; display: inline-block;

20
src/addons/calendar/calendar-common.scss
View File

@ -1,3 +1,5 @@
@import "~theme/globals";
:host { :host {
--addon-calendar-blank-day-background-color: var(--light); --addon-calendar-blank-day-background-color: var(--light);
@ -9,20 +11,10 @@
padding: 0.7rem; padding: 0.7rem;
} }
&.addon-calendar-eventtype-category > ion-icon { @each $category, $value in $calendar-event-category-colors {
background-color: var(--addon-calendar-event-category-color); &.addon-calendar-eventtype-#{$category} > ion-icon {
} background-color: $value;
&.addon-calendar-eventtype-course > ion-icon { }
background-color: var(--addon-calendar-event-course-color);
}
&.addon-calendar-eventtype-group > ion-icon {
background-color: var(--addon-calendar-event-group-color);
}
&.addon-calendar-eventtype-user > ion-icon {
background-color: var(--addon-calendar-event-user-color);
}
&.addon-calendar-eventtype-site > ion-icon {
background-color: var(--addon-calendar-event-site-color);
} }
} }

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

@ -4,13 +4,13 @@
:host { :host {
.addon-messages-unreadfrom { .addon-messages-unreadfrom {
color: var(--ion-color-primary); color: var(--primary);
background-color: transparent; background-color: transparent;
margin-top: 6px; margin-top: 6px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
ion-icon { ion-icon {
color: var(--ion-color-primary); color: var(--primary);
background-color: transparent; background-color: transparent;
} }
} }

4
src/addons/mod/assign/components/submission/submission.scss
View File

@ -15,7 +15,7 @@
} }
div.submissioneditable p { div.submissioneditable p {
color: var(--red); color: var(--danger);
} }
.core-grading-summary .advancedgrade { .core-grading-summary .advancedgrade {
@ -25,6 +25,6 @@
:host-context(body.dark) ::ng-deep { :host-context(body.dark) ::ng-deep {
div.submissioneditable p { div.submissioneditable p {
color: var(--red-light); color: var(--danger-tint);
} }
} }

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

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

4
src/addons/mod/lesson/pages/user-retake/user-retake.scss
View File

@ -4,10 +4,10 @@
} }
.addon-mod_lesson-highlight { .addon-mod_lesson-highlight {
--background: var(--blue-light); --background: var(--primary-tint);
ion-label, ion-label p { ion-label, ion-label p {
color: var(--blue-dark); color: var(--primary-shade);
} }
} }

4
src/addons/mod/quiz/components/connection-error/connection-error.scss
View File

@ -1,7 +1,7 @@
:host { :host {
background-color: var(--red-light); background-color: var(--danger-tint);
.item { .item {
--background: var(--red-light); --background: var(--danger-tint);
} }
} }

8
src/addons/mod/quiz/components/index/index.scss
View File

@ -14,8 +14,8 @@
.item.addon-mod_quiz-highlighted, .item.addon-mod_quiz-highlighted,
.addon-mod_quiz-highlighted p, .addon-mod_quiz-highlighted p,
.item.addon-mod_quiz-highlighted p { .item.addon-mod_quiz-highlighted p {
--background: var(--blue-light); --background: var(--primary-tint);
color: var(--blue-dark); color: var(--primary-shade);
} }
} }
} }
@ -26,8 +26,8 @@
.item.addon-mod_quiz-highlighted, .item.addon-mod_quiz-highlighted,
.addon-mod_quiz-highlighted p, .addon-mod_quiz-highlighted p,
.item.addon-mod_quiz-highlighted p { .item.addon-mod_quiz-highlighted p {
--background: var(--blue-dark); --background: var(--primary-shade);
color: var(--blue-light); color: var(--primary-tint);
} }
} }
} }

4
src/addons/mod/wiki/components/index/index.scss
View File

@ -3,7 +3,7 @@
$addon-mod-wiki-toc-level-padding: 12px !default; $addon-mod-wiki-toc-level-padding: 12px !default;
:host { :host {
--addon-mod-wiki-newentry-link-color: var(--red); --addon-mod-wiki-newentry-link-color: var(--danger);
--addon-mod-wiki-toc-border-color: var(--gray-500); --addon-mod-wiki-toc-border-color: var(--gray-500);
--addon-mod-wiki-toc-background-color: var(--gray-200); --addon-mod-wiki-toc-background-color: var(--gray-200);
@ -58,6 +58,6 @@ $addon-mod-wiki-toc-level-padding: 12px !default;
} }
:host-context(body.dark) { :host-context(body.dark) {
--addon-mod-wiki-newentry-link-color: var(--red-light); --addon-mod-wiki-newentry-link-color: var(--danger-tint);
--addon-mod-wiki-toc-background-color: var(--medium); --addon-mod-wiki-toc-background-color: var(--medium);
} }

4
src/addons/mod/workshop/components/submission/submission.scss
View File

@ -1,10 +1,10 @@
:host { :host {
p.addon-overriden-grade { p.addon-overriden-grade {
color: var(--ion-color-success); color: var(--success);
} }
p.addon-has-overriden-grade { p.addon-has-overriden-grade {
color: var(--ion-color-danger); color: var(--danger);
text-decoration: line-through; text-decoration: line-through;
} }
} }

8
src/addons/qtype/ddmarker/component/ddmarker.scss
View File

@ -118,18 +118,18 @@ core-format-text ::ng-deep {
} }
div.markertexts span.markertext { div.markertexts span.markertext {
z-index: 3; z-index: 3;
background-color: var(--yellow-light); background-color: var(--warning-tint);
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
border-color: var(--yellow); border-color: var(--warning);
position: absolute; position: absolute;
color: var(--gray-900); color: var(--gray-900);
} }
span.wrongpart { span.wrongpart {
background-color: var(--yellow-light); background-color: var(--warning-tint);
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
border-color: var(--yellow); border-color: var(--warning);
padding: 5px; padding: 5px;
border-radius: 10px; border-radius: 10px;
opacity: 0.6; opacity: 0.6;

6
src/core/components/combobox/combobox.scss
View File

@ -9,9 +9,9 @@
ion-button { ion-button {
--icon-margin: 0 8px; --icon-margin: 0 8px;
--background: var(--core-combobox-background); --background: var(--core-combobox-background);
--background-hover: #000000; --background-hover: black;
--background-activated: #000000; --background-activated: black;
--background-focused: #000000; --background-focused: black;
--background-hover-opacity: .04; --background-hover-opacity: .04;
--color: var(--core-combobox-color); --color: var(--core-combobox-color);

2
src/core/components/input-errors/input-errors.scss
View File

@ -4,7 +4,7 @@
.core-input-error-container { .core-input-error-container {
.core-input-error { .core-input-error {
padding: 4px; padding: 4px;
color: var(--ion-color-danger); color: var(--danger);
font-size: 12px; font-size: 12px;
display: none; display: none;

2
src/core/components/loading/loading.scss
View File

@ -3,7 +3,7 @@
:host { :host {
--loading-background: var(--ion-background-color); --loading-background: var(--ion-background-color);
--loading-background-inline: var(--ion-background-color-rgb); --loading-background-inline: var(--ion-background-color-rgb);
--loading-spinner: var(--ion-color-primary); --loading-spinner: var(--core-loading-spinner);
--loading-text-color: var(--ion-text-color); --loading-text-color: var(--ion-text-color);
--loading-inline-margin: 0px; --loading-inline-margin: 0px;
--loading-inline-min-height: 28px; --loading-inline-min-height: 28px;

17
src/core/components/split-view/split-view.scss
View File

@ -1,9 +1,12 @@
@import "~theme/globals";
:host { :host {
--menu-min-width: 270px; --menu-min-width: 270px;
--menu-max-width: 28%; --menu-max-width: 28%;
--menu-box-shadow: var(--core-menu-box-shadow-end); --menu-box-shadow: var(--core-menu-box-shadow-end);
--menu-z: 2; --menu-z: 2;
--menu-border-width: 1; --menu-border-width: 1px;
--menu-border-color: var(--stroke);
--menu-display: flex; --menu-display: flex;
--content-display: block; --content-display: block;
--content-outlet-display: none; --content-outlet-display: none;
@ -38,8 +41,8 @@
flex-shrink: 0; flex-shrink: 0;
order: -1; order: -1;
width: 100%; width: 100%;
border-inline-start: 0; @include border-start(0);
border-inline-end: var(--border); @include border-end(var(--menu-border-width), solid, var(--menu-border-color));
min-width: var(--menu-min-width); min-width: var(--menu-min-width);
max-width: var(--menu-max-width); max-width: var(--menu-max-width);
} }
@ -82,11 +85,3 @@
--content-placeholder-display: none; --content-placeholder-display: none;
--content-outlet-display: var(--content-display); --content-outlet-display: var(--content-display);
} }
:host-context(ion-app.md) {
--border: calc(var(--menu-border-width) * 1px) solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13))));
}
:host-context(ion-app.ios) {
--border: calc(var(--menu-border-width) * .55px) solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
}

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-info); border-top: 1px solid var(--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-info); color: var(--info);
} }
} }
} }

13
src/core/features/grades/pages/course/course.scss
View File

@ -6,7 +6,8 @@
--even-cell-background: var(--white); --even-cell-background: var(--white);
--odd-cell-hover: var(--gray-200); --odd-cell-hover: var(--gray-200);
--even-cell-hover: var(--light); --even-cell-hover: var(--light);
--icon-color: #999999; --icon-color: var(--gray-500);
--border-color: var(--stroke);
.odd { .odd {
--cell-background: var(--odd-cell-background); --cell-background: var(--odd-cell-background);
@ -26,15 +27,7 @@
--even-cell-background: var(--gray-900); --even-cell-background: var(--gray-900);
--odd-cell-hover: var(--gray-500); --odd-cell-hover: var(--gray-500);
--even-cell-hover: var(--medium); --even-cell-hover: var(--medium);
--icon-color: #eeeeee; --icon-color: var(--gray-200);
}
:host-context(ion-app.md) {
--border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13))));
}
:host-context(ion-app.ios) {
--border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
} }
.core-grades-table { .core-grades-table {

5
src/core/features/login/pages/site/site.scss
View File

@ -25,7 +25,7 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 20%; border-radius: 20%;
box-shadow: 0 0 4px #eee; box-shadow: 0 0 4px var(--gray-200);
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@ -117,8 +117,9 @@
.core-login-entered-site { .core-login-entered-site {
background-color: var(--light); background-color: var(--light);
ion-thumbnail { ion-thumbnail {
box-shadow: 0 0 4px #ddd; box-shadow: 0 0 4px var(--gray-300);
} }
} }

6
src/core/features/mainmenu/pages/menu/menu.scss
View File

@ -17,7 +17,7 @@
} @else { } @else {
ion-tabs.tabshidden.placement-bottom ion-tab-bar { ion-tabs.tabshidden.placement-bottom ion-tab-bar {
pointer-events: none; pointer-events: none;
ion-tab-button { ion-tab-button {
height: auto; height: auto;
} }
@ -155,9 +155,9 @@
} }
:host-context(.core-online) .core-network-message { :host-context(.core-online) .core-network-message {
background: var(--green); background: var(--success);
} }
:host-context(.core-offline) .core-network-message { :host-context(.core-offline) .core-network-message {
background: var(--red); background: var(--danger);
} }

6
src/core/features/mainmenu/pages/more/more.scss
View File

@ -1,11 +1,7 @@
@import "~theme/globals"; @import "~theme/globals";
ion-item { ion-item {
--border-color: var(--core-more-item-border, --border-color: var(--core-more-item-border, var(--ion-border-color));
var(--ion-item-border-color,
var(--ion-border-color,
var(--ion-color-step-150,
rgba(0, 0, 0, 0.13)))));
ion-icon { ion-icon {
color: var(--core-more-icon, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)); color: var(--core-more-icon, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54));

4
src/core/features/question/question.scss
View File

@ -31,10 +31,10 @@
border-radius: 3px; border-radius: 3px;
&.incorrect { &.incorrect {
background-color: var(--red); background-color: var(--danger);
} }
&.correct { &.correct {
background-color: var(--green); background-color: var(--success);
} }
} }
} }

2
src/theme/components/discussion.scss
View File

@ -158,7 +158,7 @@
ion-icon { ion-icon {
font-size: 1.4em; font-size: 1.4em;
line-height: initial; line-height: initial;
color: var(--ion-color-danger); color: var(--danger);
} }
} }

31
src/theme/components/format-text.scss
View File

@ -556,16 +556,15 @@ core-rich-text-editor .core-rte-editor {
font-weight: 400; font-weight: 400;
} }
@each $color-name, $base in $colors { @each $color-name, $unused in $colors {
.alert-#{$color-name} { .alert-#{$color-name} {
--color-base: var(--ion-color-#{$color-name}); --color-base: var(--#{$color-name});
color: var(--color-base); color: var(--#{$color-name}-shade);
border-color: var(--color-base); border-color: var(--color-base);
background-color: var(--ion-color-#{$color-name}-lighter); background-color: var(--#{$color-name}-tint);
.alert-link { .alert-link, a {
color: var(--ion-color-#{$color-name}-shade); color: var(--#{$color-name}-shade);
} }
} }
.alert-#{$color-name} p { .alert-#{$color-name} p {
@ -594,9 +593,9 @@ core-rich-text-editor .core-rte-editor {
.border-bottom-0 { border-bottom: 0 !important; } .border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; } .border-left-0 { border-left: 0 !important; }
@each $color-name, $base in $colors { @each $color-name, $unused in $colors {
.border-#{$color-name} { .border-#{$color-name} {
border-color: var(--ion-color-#{$color-name}) !important; border-color: var(--#{$color-name}) !important;
} }
} }
@ -678,9 +677,9 @@ core-rich-text-editor .core-rte-editor {
.font-italic { font-style: italic !important; } .font-italic { font-style: italic !important; }
.text-white { color: var(--white) !important; } .text-white { color: var(--white) !important; }
@each $color-name, $base in $colors { @each $color-name, $unused in $colors {
.text-#{$color-name} { .text-#{$color-name} {
color: var(--ion-color-#{$color-name}); color: var(--#{$color-name});
} }
} }
@ -710,14 +709,14 @@ core-rich-text-editor .core-rte-editor {
} }
.label-important { .label-important {
color: var(--ion-color-danger-contrast); color: var(--danger-contrast);
background-color: var(--ion-color-danger); background-color: var(--danger);
} }
@each $color-name, $base in $colors { @each $color-name, $unused in $colors {
.label-#{$color-name} { .label-#{$color-name} {
color: var(--ion-color-#{$color-name}-contrast); color: var(--#{$color-name}-contrast);
background-color: var(--ion-color-#{$color-name}); background-color: var(--#{$color-name});
} }
} }
} }

30
src/theme/components/rubrics.scss
View File

@ -9,13 +9,13 @@ core-format-text {
} }
.gradingform_rubric_editform .status.ready { .gradingform_rubric_editform .status.ready {
background-color: var(--green-light); background-color: var(--success-tint);
border-color: var(--green); border-color: var(--success);
} }
.gradingform_rubric_editform .status.draft { .gradingform_rubric_editform .status.draft {
background-color: var(--yellow-light); background-color: var(--warning-tint);
border-color: var(--yellow); border-color: var(--warning);
} }
.gradingform_rubric { .gradingform_rubric {
@ -107,7 +107,7 @@ core-format-text {
.gradingform_rubric .criterion .levels .level .score { .gradingform_rubric .criterion .levels .level .score {
font-style: italic; font-style: italic;
color: var(--green); color: var(--success);
font-weight: bold; font-weight: bold;
margin-top: 5px; margin-top: 5px;
white-space: nowrap; white-space: nowrap;
@ -126,11 +126,11 @@ core-format-text {
/* evaluation */ /* evaluation */
.gradingform_rubric .criterion .levels .level.currentchecked { .gradingform_rubric .criterion .levels .level.currentchecked {
background-color: #fff0f0; background-color: var(--danger-tint);
} }
.gradingform_rubric .criterion .levels .level.checked { .gradingform_rubric .criterion .levels .level.checked {
background-color: var(--green-light); background-color: var(--success-tint);
border: 1px solid var(--medium); border: 1px solid var(--medium);
} }
@ -154,7 +154,7 @@ core-format-text {
} }
.gradingform_rubric .criterion .levels.error { .gradingform_rubric .criterion .levels.error {
border: 1px solid var(--red); border: 1px solid var(--danger);
} }
.gradingform_rubric .criterion .description.error, .gradingform_rubric .criterion .description.error,
@ -166,19 +166,19 @@ core-format-text {
.gradingform_rubric-regrade { .gradingform_rubric-regrade {
padding: 10px; padding: 10px;
background-color: var(--light); background-color: var(--light);
border: 1px solid var(--red-light); border: 1px solid var(--danger-tint);
margin-bottom: 10px; margin-bottom: 10px;
} }
.gradingform_rubric-restored { .gradingform_rubric-restored {
padding: 10px; padding: 10px;
background-color: var(--yellow-light); background-color: var(--warning-tint);
border: 1px solid var(--yellow); border: 1px solid var(--warning);
margin-bottom: 10px; margin-bottom: 10px;
} }
.gradingform_rubric-error { .gradingform_rubric-error {
color: var(--red); color: var(--danger);
font-weight: bold; font-weight: bold;
} }
@ -219,17 +219,17 @@ core-format-text {
} }
.gradingform_rubric.evaluate .criterion .levels .level:hover { .gradingform_rubric.evaluate .criterion .levels .level:hover {
background-color: var(--green-light); background-color: var(--success-tint);
} }
.gradingform_rubric .criterion .levels .level.checked { .gradingform_rubric .criterion .levels .level.checked {
background-color: var(--green-light); background-color: var(--success-tint);
border: none; border: none;
border-left: 1px solid var(--stroke); border-left: 1px solid var(--stroke);
} }
.gradingform_rubric .criterion .levels .level .score { .gradingform_rubric .criterion .levels .level .score {
color: var(--green); color: var(--success);
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
margin-top: 20px; margin-top: 20px;

30
src/theme/globals.mixins.ionic.scss
View File

@ -47,14 +47,16 @@
} }
// Mixes a color with black to create its shade. // Mixes a color with black to create its shade.
// Default to bootstrap level 6.
// -------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------
@function get-color-shade($color) { @function get-color-shade($color, $percent: 48%) {
@return mix(#000, $color, 12%); @return mix(#000, $color, $percent);
} }
// Mixes a color with white to create its tint. // Mixes a color with white to create its tint.
// Default to bootstrap level -10.
// -------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------
@function get-color-tint($color, $percent: 10%) { @function get-color-tint($color, $percent: 80%) {
@return mix(#fff, $color, $percent); @return mix(#fff, $color, $percent);
} }
@ -72,20 +74,35 @@
@mixin generate-color($color-name, $colors) { @mixin generate-color($color-name, $colors) {
$base: map-get($colors, $color-name); $base: map-get($colors, $color-name);
$light: map-get($base, 'light');
@include generate-color-variants($color-name, $light);
body.dark {
$dark: map-get($base, 'dark');
$dark: mix($light, white, 40%) !default;
@include generate-color-variants($color-name, $dark);
}
}
@mixin generate-color-variants($color-name, $base) {
$contrast: get_contrast_color($base); $contrast: get_contrast_color($base);
$shade: get-color-shade($base); $shade: get-color-shade($base);
$tint: get-color-tint($base); $tint: get-color-tint($base);
$lighter: get-color-tint($base, 90%);
--ion-color-#{$color-name}: var(--#{$color-name}, #{$base}); --#{$color-name}: #{$base};
--#{$color-name}-shade: #{$shade};
--#{$color-name}-tint: #{$tint};
--#{$color-name}-contrast: #{$contrast};
// Internal ionic use only.
--ion-color-#{$color-name}: var(--#{$color-name});
--ion-color-#{$color-name}-base: var(--ion-color-#{$color-name}); --ion-color-#{$color-name}-base: var(--ion-color-#{$color-name});
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)}; --ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
--ion-color-#{$color-name}-contrast: #{$contrast}; --ion-color-#{$color-name}-contrast: #{$contrast};
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)}; --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
--ion-color-#{$color-name}-shade: #{$shade}; --ion-color-#{$color-name}-shade: #{$shade};
--ion-color-#{$color-name}-tint: #{$tint}; --ion-color-#{$color-name}-tint: #{$tint};
--ion-color-#{$color-name}-lighter: #{$lighter};
.ion-color-#{$color-name} { .ion-color-#{$color-name} {
--ion-color: var(--ion-color-#{$color-name}); --ion-color: var(--ion-color-#{$color-name});
@ -95,7 +112,6 @@
--ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb); --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb);
--ion-color-shade: var(--ion-color-#{$color-name}-shade); --ion-color-shade: var(--ion-color-#{$color-name}-shade);
--ion-color-tint: var(--ion-color-#{$color-name}-tint); --ion-color-tint: var(--ion-color-#{$color-name}-tint);
--ion-color-lighter: var(--ion-color-#{$color-name}-lighter);
} }
} }

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

@ -1,3 +1,5 @@
@use "sass:math" as math;
/* /*
* App custom mixins for SCSS * App custom mixins for SCSS
* ---------------------------------------------------------------------------- * ----------------------------------------------------------------------------
@ -233,8 +235,59 @@
@return (red($color) + green($color) + blue($color)) / 3; @return (red($color) + green($color) + blue($color)) / 3;
} }
// Get the better color contrast using WCAG algorythm.
@function get_contrast_color($color) { @function get_contrast_color($color) {
$brightness: get_brightness($color); $lumiance: luminance($color);
@return if($brightness < 127, white, black); // White lumiance is 1.
$whiteContrast: ($lumiance + 0.05) / (1 + 0.05);
// White lumiance is 0.
$blackContrast: (0.05) / ($lumiance + 0.05);
@return if($whiteContrast < $blackContrast, white, black);
}
// Color contrast using yiq aproximation with 150 threshold.
@function get_contrast_color_yiq($color, $dark: black, $light: white) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@return if($yiq >= 128, $dark, $light);
}
// WCAG contrast algorythm
@function check-contrast($foreground, $background) {
$foregroundLumiance: luminance($foreground);
$backgroundLuminance: luminance($background);
@if ($backgroundLuminance < $foregroundLumiance) {
@return ($backgroundLuminance + 0.05) / ($foregroundLumiance + 0.05);
} @else {
@return ($foregroundLumiance + 0.05) / ($backgroundLuminance + 0.05);
}
}
@function luminance($color) {
$r: red($color);
$g: green($color);
$b: blue($color);
$r: component-luminance($r);
$g: component-luminance($g);
$b: component-luminance($b);
@return $r * 0.2126 + $g * 0.7152 + $b * 0.0722;
}
@function component-luminance($value) {
$value: $value / 255;
@if ($value <= 0.03928) {
@return $value / 12.92;
} @else {
@return math.pow(($value + 0.055) / 1.055, 2.4);
}
} }

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

@ -4,39 +4,25 @@
* Place here all global variables. * Place here all global variables.
*/ */
$white: #ffffff !default; $white: #ffffff !default;
$gray-100: #f8f9fa !default; $gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default; $gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default; // Stroke $gray-300: #dee2e6 !default; // Stroke
$gray-400: #ced4da !default; $gray-400: #ced4da !default;
$gray-500: #8f959e !default; $gray-500: #8f959e !default;
$gray-600: #6a737b !default; $gray-600: #6a737b !default;
$gray-700: #495057 !default; $gray-700: #495057 !default;
$gray-800: #343a40 !default; $gray-800: #343a40 !default;
$gray-900: #1d2125 !default; // Copy text $gray-900: #1d2125 !default; // Copy text
$black: #000000 !default; // Avoid usage $black: #000000 !default; // Avoid usage
$blue: #0f6cbf !default; $blue: #0f6cbf !default;
$blue-light: mix($blue, white, 20%) !default; $cyan: #008196 !default;
$blue-dark: darken($blue, 10%) !default; $green: #357a32 !default;
$red: #ca3120 !default;
$yellow: #f0ad4e !default;
$cyan: #008196 !default; $brand-color: #ff7518 !default;
$cyan-light: mix($cyan, white, 20%) !default;
$cyan-dark: darken($cyan, 10%) !default;
$green: #357a32 !default; // Accent.
$green-light: mix($green, white, 20%) !default;
$green-dark: darken($green, 10%) !default;
$red: #ca3120 !default;
$red-light: mix($red, white, 20%) !default;
$red-dark: darken($red, 10%) !default;
$yellow: #f0ad4e !default;
$yellow-light: mix($yellow, white, 20%) !default;
$yellow-dark: mix($yellow, black, 40%) !default;
$brand-color: #ff7518 !default;
$text-color: $gray-900 !default; $text-color: $gray-900 !default;
$text-color-rgb: color-to-rgb-list($text-color) !default; $text-color-rgb: color-to-rgb-list($text-color) !default;
@ -45,7 +31,7 @@ $text-color-dark-rgb: color-to-rgb-list($text-color-dark) !default;
$background-color: $white !default; $background-color: $white !default;
$background-color-rgb: color-to-rgb-list($background-color) !default; $background-color-rgb: color-to-rgb-list($background-color) !default;
$background-color-dark: mix(#ffffff, #000000, 10%) !default; // #1a1a1a $background-color-dark: $gray-900 !default; // #1a1a1a
$background-color-dark-rgb: color-to-rgb-list($background-color-dark) !default; $background-color-dark-rgb: color-to-rgb-list($background-color-dark) !default;
$ion-item-background: $white !default; $ion-item-background: $white !default;
@ -63,40 +49,17 @@ $light: $gray-100 !default;
$medium: $gray-600 !default; $medium: $gray-600 !default;
$dark: $gray-800 !default; $dark: $gray-800 !default;
$stroke: $gray-300 !default;
$colors: ( $colors: (
primary: $primary, primary: (light: $primary),
secondary: $secondary, secondary: (light: $secondary),
success: $success, success: (light: $success),
warning: $warning, warning: (light: $warning),
danger: $danger, danger: (light: $danger),
info: $info, info: (light: $info),
light: $light, light: (light: $light, dark: $dark),
medium: $medium, medium: (light: $medium, dark: $gray-200),
dark: $dark dark: (light: $dark, dark: $light),
) !default; brand: (light: $brand-color, dark: $brand-color),
$primary-dark: mix($blue, white, 40%) !default;
$secondary-dark: mix($secondary, white, 40%) !default;
$danger-dark: mix($red, white, 40%) !default;
$warning-dark: mix($yellow, white, 40%) !default;
$success-dark: mix($green, white, 40%) !default;
$info-dark: mix($cyan, white, 40%) !default;
$light-dark: $dark !default;
$medium-dark: $gray-200 !default;
$dark-dark: $light !default;
$colors-dark: (
primary: $primary-dark,
secondary: $secondary-dark,
success: $success-dark,
warning: $warning-dark,
danger: $danger-dark,
info: $info-dark,
light: $light-dark,
medium: $medium-dark,
dark: $dark-dark,
) !default; ) !default;
/** /**
@ -153,6 +116,7 @@ $core-user-hide-siteinfo: $core-more-hide-siteinfo !default;
$core-user-hide-sitename: $core-more-hide-sitename !default; $core-user-hide-sitename: $core-more-hide-sitename !default;
$core-user-hide-siteurl: $core-more-hide-siteurl !default; $core-user-hide-siteurl: $core-more-hide-siteurl !default;
// Activity icon background colors.
$activity-icon-colors: ( $activity-icon-colors: (
administration: #5d63f6, administration: #5d63f6,
assessment: #eb66a2, assessment: #eb66a2,
@ -161,3 +125,12 @@ $activity-icon-colors: (
content: #399be2, content: #399be2,
interface: #a378ff interface: #a378ff
) !default; ) !default;
// Calendar event category background colors.
$calendar-event-category-colors: (
category: #8e24aa,
course: $red,
group: $yellow,
user: $blue,
site: $green
) !default;

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

@ -217,7 +217,7 @@ ion-button ion-spinner {
--color: inherit !important; --color: inherit !important;
} }
@each $color-name, $value in $colors { @each $color-name, $unused in $colors {
.text-#{$color-name}, .text-#{$color-name},
p.text-#{$color-name} { p.text-#{$color-name} {
color: var(--ion-color-#{$color-name}); color: var(--ion-color-#{$color-name});
@ -240,7 +240,7 @@ ion-header ion-toolbar {
.button.button-solid { .button.button-solid {
--background: transparent; --background: transparent;
--color: var(--core-header-toolbar-color); --color: var(--core-header-toolbar-color);
--ion-color-primary: var(--core-header-toolbar-color); --primary: var(--core-header-toolbar-color);
} }
.button.button-clear.button-has-icon-only, .button.button-clear.button-has-icon-only,
@ -272,7 +272,7 @@ ion-icon {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: var(--ion-color-danger); background-color: var(--danger);
-webkit-mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%; -webkit-mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%;
mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%; mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%;
} }
@ -303,7 +303,7 @@ button,
// Clear buttons will be black. // Clear buttons will be black.
ion-button.button-clear { ion-button.button-clear {
--ion-color-primary: var(--primary); --primary: var(--primary);
} }
[role="button"], [role="button"],
@ -364,7 +364,7 @@ div.core-iframe-network-error {
right: -15%; right: -15%;
width: 50%; width: 50%;
height: 50%; height: 50%;
background-color: var(--ion-color-danger); background-color: var(--danger);
-webkit-mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%; -webkit-mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%;
mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%; mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%;
} }
@ -633,7 +633,7 @@ body.core-iframe-fullscreen ion-router-outlet {
.item-dimmed { .item-dimmed {
opacity: 0.7; opacity: 0.7;
--background: var(--ion-color-light); --background: var(--light);
} }
// Extra text colors. // Extra text colors.
@ -642,7 +642,7 @@ body.core-iframe-fullscreen ion-router-outlet {
} }
// Card styles // Card styles
@each $color-name, $base in $colors { @each $color-name, $unused in $colors {
// Message cards. // Message cards.
ion-card.core-#{$color-name}-card { ion-card.core-#{$color-name}-card {
@ -723,6 +723,10 @@ ion-card {
} }
} }
ion-chip.ion-color {
background: var(--ion-color-tint);
}
.core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div { .core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div {
display: inline !important; display: inline !important;
} }

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

@ -7,7 +7,7 @@
:root body.dark { :root body.dark {
// Ionic shades. // Ionic shades, defined for ionic internal use.
--ion-color-step-0: var(--black); --ion-color-step-0: var(--black);
--ion-color-step-50: var(--gray-900); --ion-color-step-50: var(--gray-900);
--ion-color-step-100: var(--gray-900); --ion-color-step-100: var(--gray-900);
@ -36,45 +36,33 @@
--text-color: #{$text-color-dark}; --text-color: #{$text-color-dark};
--ion-text-color: var(--text-color); --ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-dark-rgb}; --ion-text-color-rgb: #{$text-color-dark-rgb};
--subdued-text-color: #b4b4b4; --subdued-text-color: var(--gray-400);
--primary: #{$primary-dark};
--secondary: #{$secondary-dark};
--success: #{$success-dark};
--danger: #{$danger-dark};
--warning: #{$warning-dark};
--info: #{$info-dark};
--light: #{$light-dark};
--dark: #{$dark-dark};
--medium: #{$medium-dark};
@each $color-name, $value in $colors-dark {
@include generate-color($color-name, $colors-dark);
}
--ion-border-color: var(--gray-900);
--ion-card-color: var(--text-color); --ion-card-color: var(--text-color);
--ion-card-background: var(--ion-item-background); --ion-card-background: var(--ion-item-background);
--contrast-background: black; --contrast-background: black;
--stroke: var(--gray-700);
--ion-border-color: var(--stroke);
--ion-item-border-color: var(--stroke);
ion-content { ion-content {
--background: var(--ion-background-color); --background: var(--ion-background-color);
--background-alternative: var(--gray-900); --background-alternative: var(--gray-900);
} }
--core-bottom-tabs-badge-text-color: var(--brand-color-contrast); --core-bottom-tabs-badge-text-color: var(--brand-contrast);
--core-bottom-tabs-background: var(--gray-900); --core-bottom-tabs-background: var(--gray-900);
--core-bottom-tabs-color: var(--medium); --core-bottom-tabs-color: var(--medium);
ion-action-sheet { ion-action-sheet {
.action-sheet-cancel { .action-sheet-cancel {
--button-color: var(--ion-color-danger-tint); --button-color: var(--danger-tint);
} }
} }
--core-link-color: var(--blue-light); --core-link-color: var(--primary-tint);
--core-header-toolbar-background: var(--gray-900); --core-header-toolbar-background: var(--gray-900);
--core-header-toolbar-color: var(--white); --core-header-toolbar-color: var(--white);
@ -101,22 +89,22 @@
--core-login-input-background: var(--core-login-background); --core-login-input-background: var(--core-login-background);
--core-login-input-color: var(--core-login-text-color); --core-login-input-color: var(--core-login-text-color);
--core-question-correct-color: var(--green-light); --core-question-correct-color: var(--success-tint);
--core-question-correct-color-bg: var(--green-dark); --core-question-correct-color-bg: var(--success-shade);
--core-question-incorrect-color: var(--red); --core-question-incorrect-color: var(--danger);
--core-question-incorrect-color-bg: var(--red-dark); --core-question-incorrect-color-bg: var(--danger-shade);
--core-question-feedback-color: var(--yellow-light); --core-question-feedback-color: var(--warning-tint);
--core-question-feedback-color-bg: var(--yellow-dark); --core-question-feedback-color-bg: var(--warning-shade);
--core-question-warning-color: var(--red); --core-question-warning-color: var(--danger);
--core-question-saved-color-bg: var(--gray-500); --core-question-saved-color-bg: var(--gray-500);
--core-question-state-correct-color: var(--green-dark); --core-question-state-correct-color: var(--success-shade);
--core-question-state-partial-color: var(--yellow-dark); --core-question-state-partial-color: var(--warning-shade);
--core-question-state-partial-text: var(--yellow); --core-question-state-partial-text: var(--warning);
--core-question-state-incorrect-color: var(--red-dark); --core-question-state-incorrect-color: var(--danger-shade);
--core-question-feedback-color: var(--yellow-light); --core-question-feedback-color: var(--warning-tint);
--core-question-feedback-background-color: var(--yellow-dark); --core-question-feedback-background-color: var(--warning-shade);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-200); --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-200);
--core-dd-question-border: var(--gray-200); --core-dd-question-border: var(--gray-200);

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

@ -20,7 +20,7 @@
--gray-100: #{$gray-100}; --gray-100: #{$gray-100};
--white: #{$white}; --white: #{$white};
// Ionic shades. // Ionic shades, defined for ionic internal use.
--ion-color-step-0: var(--white); --ion-color-step-0: var(--white);
--ion-color-step-50: var(--gray-100); --ion-color-step-50: var(--gray-100);
--ion-color-step-100: var(--gray-100); --ion-color-step-100: var(--gray-100);
@ -43,50 +43,21 @@
--ion-color-step-950: var(--gray-900); --ion-color-step-950: var(--gray-900);
--ion-color-step-1000: var(--black); --ion-color-step-1000: var(--black);
--blue: #{$blue};
--blue-light: #{$blue-light};
--blue-dark: #{$blue-dark};
--green: #{$green};
--green-light: #{$green-light};
--green-dark: #{$green-dark};
--red: #{$red};
--red-light: #{$red-light};
--red-dark: #{$red-dark};
--yellow: #{$yellow};
--yellow-light: #{$yellow-light};
--yellow-dark: #{$yellow-dark};
--turquoise: #007982; // Accent.
--purple: #8e24aa;
--text-color: #{$text-color}; --text-color: #{$text-color};
--background-color: #{$background-color}; --background-color: #{$background-color};
--brand-color: #{$brand-color};
--brand-color-contrast: var(--text-color);
--core-online-color: #5cb85c; --core-online-color: #5cb85c;
// Named Color Variables --stroke: var(--gray-300);
--primary: #{$primary}; --ion-border-color: var(--stroke);
--secondary: #{$secondary}; --ion-item-border-color: var(--stroke);
--success: #{$success};
--danger: #{$danger};
--warning: #{$warning};
--info: #{$info};
--light: #{$light};
--dark: #{$dark};
--medium: #{$medium};
--stroke: #{$stroke}; @each $color-name, $unused in $colors {
@each $color-name, $value in $colors {
@include generate-color($color-name, $colors); @include generate-color($color-name, $colors);
} }
--brand-color: var(--brand);
// Accessibility vars. // Accessibility vars.
--a11y-min-target-size: 44px; --a11y-min-target-size: 44px;
--a11y-focus-color: var(--primary); --a11y-focus-color: var(--primary);
@ -102,7 +73,7 @@
--ion-text-color: var(--text-color); --ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-rgb}; --ion-text-color-rgb: #{$text-color-rgb};
--subdued-text-color: #595959; --subdued-text-color: var(--gray-700);
--small-radius: 4px; --small-radius: 4px;
--medium-radius: 8px; --medium-radius: 8px;
@ -128,11 +99,11 @@
} }
--core-bottom-tabs-background: var(--white); --core-bottom-tabs-background: var(--white);
--core-bottom-tabs-color: var(--medium); --core-bottom-tabs-color: var(--gray-700);
--core-bottom-tabs-color-selected: var(--brand-color); --core-bottom-tabs-color-selected: var(--brand-color);
--core-bottom-tabs-background-selected: transparent; --core-bottom-tabs-background-selected: transparent;
--core-bottom-tabs-badge-color: var(--brand-color); --core-bottom-tabs-badge-color: var(--brand-color);
--core-bottom-tabs-badge-text-color: var(--brand-color-contrast); --core-bottom-tabs-badge-text-color: var(--brand-contrast);
--bottom-tabs-size: 56px; --bottom-tabs-size: 56px;
ion-tab-bar.mainmenu-tabs { ion-tab-bar.mainmenu-tabs {
--background: var(--core-bottom-tabs-background); --background: var(--core-bottom-tabs-background);
@ -141,7 +112,7 @@
--background-selected: var(--core-bottom-tabs-background-selected); --background-selected: var(--core-bottom-tabs-background-selected);
} }
--core-link-color: var(--blue); --core-link-color: var(--primary);
a { a {
color: var(--core-link-color); color: var(--core-link-color);
} }
@ -203,7 +174,7 @@
} }
.action-sheet-cancel { .action-sheet-cancel {
--button-color: var(--ion-color-danger); --button-color: var(--danger);
} }
} }
@ -226,9 +197,10 @@
} }
} }
--core-loading-spinner: var(--primary);
ion-spinner { ion-spinner {
--ion-color-base: var(--ion-color-primary); --ion-color-base: var(--core-loading-spinner);
--color: var(--ion-color-primary); --color: var(--core-loading-spinner);
} }
--core-progressbar-height: 8px; --core-progressbar-height: 8px;
@ -310,11 +282,6 @@
--core-user-menu-site-logo-max-height: 32px; --core-user-menu-site-logo-max-height: 32px;
--addon-calendar-event-category-color: var(--purple);
--addon-calendar-event-course-color: var(--red);
--addon-calendar-event-group-color: var(--yellow);
--addon-calendar-event-user-color: var(--blue);
--addon-calendar-event-site-color: var(--green);
--addon-calendar-today-border-color: var(--primary); --addon-calendar-today-border-color: var(--primary);
--addon-calendar-border-color: var(--stroke); --addon-calendar-border-color: var(--stroke);
@ -337,22 +304,22 @@
--core-menu-box-shadow-end: -4px 0px 16px rgba(var(--drop-shadow)); --core-menu-box-shadow-end: -4px 0px 16px rgba(var(--drop-shadow));
--core-menu-box-shadow-start: 4px 0px 16px rgba(var(--drop-shadow)); --core-menu-box-shadow-start: 4px 0px 16px rgba(var(--drop-shadow));
--core-question-correct-color: var(--green-dark); --core-question-correct-color: var(--success-shade);
--core-question-correct-color-bg: var(--green-light); --core-question-correct-color-bg: var(--success-tint);
--core-question-incorrect-color: var(--red); --core-question-incorrect-color: var(--danger);
--core-question-incorrect-color-bg: var(--red-light); --core-question-incorrect-color-bg: var(--danger-tint);
--core-question-feedback-color: var(--yellow-dark); --core-question-feedback-color: var(--warning-shade);
--core-question-feedback-color-bg: var(--yellow-light); --core-question-feedback-color-bg: var(--warning-tint);
--core-question-warning-color: var(--red); --core-question-warning-color: var(--danger);
--core-question-saved-color-bg: var(--gray-200); --core-question-saved-color-bg: var(--gray-200);
--core-question-state-correct-color: var(--green-light); --core-question-state-correct-color: var(--success-tint);
--core-question-state-partial-color: var(--yellow-light); --core-question-state-partial-color: var(--warning-tint);
--core-question-state-partial-text: var(--yellow); --core-question-state-partial-text: var(--warning);
--core-question-state-incorrect-color: var(--red-light); --core-question-state-incorrect-color: var(--danger-tint);
--core-question-feedback-color: var(--yellow-dark); --core-question-feedback-color: var(--warning-shade);
--core-question-feedback-background-color: var(--yellow-light); --core-question-feedback-background-color: var(--warning-tint);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-500); --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-500);
--core-dd-question-radius: 10px; --core-dd-question-radius: 10px;