diff --git a/src/addons/block/blogtags/components/blogtags/blogtags.scss b/src/addons/block/blogtags/components/blogtags/blogtags.scss index 0f8abbbd2..0dbdc11a1 100644 --- a/src/addons/block/blogtags/components/blogtags/blogtags.scss +++ b/src/addons/block/blogtags/components/blogtags/blogtags.scss @@ -11,8 +11,8 @@ display: inline-block; a { - background: var(--ion-color-primary); - color: var(--ion-color-primary-contrast); + background: var(--primary); + color: var(--primary-contrast); padding: 3px 8px; -webkit-font-smoothing: antialiased; display: inline-block; diff --git a/src/addons/block/tags/components/tags/tags.scss b/src/addons/block/tags/components/tags/tags.scss index 7856e76c5..658f42de8 100644 --- a/src/addons/block/tags/components/tags/tags.scss +++ b/src/addons/block/tags/components/tags/tags.scss @@ -13,8 +13,8 @@ display: inline-block; a { - background: var(--ion-color-primary); - color: var(--ion-color-primary-contrast); + background: var(--primary); + color: var(--primary-contrast); padding: 3px 8px; -webkit-font-smoothing: antialiased; display: inline-block; diff --git a/src/addons/calendar/calendar-common.scss b/src/addons/calendar/calendar-common.scss index ab19d2db4..3691d26f2 100644 --- a/src/addons/calendar/calendar-common.scss +++ b/src/addons/calendar/calendar-common.scss @@ -1,3 +1,5 @@ +@import "~theme/globals"; + :host { --addon-calendar-blank-day-background-color: var(--light); @@ -9,20 +11,10 @@ padding: 0.7rem; } - &.addon-calendar-eventtype-category > ion-icon { - background-color: var(--addon-calendar-event-category-color); - } - &.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); + @each $category, $value in $calendar-event-category-colors { + &.addon-calendar-eventtype-#{$category} > ion-icon { + background-color: $value; + } } } diff --git a/src/addons/messages/pages/discussion/discussion.scss b/src/addons/messages/pages/discussion/discussion.scss index 1469d3b7c..2f8f0935d 100644 --- a/src/addons/messages/pages/discussion/discussion.scss +++ b/src/addons/messages/pages/discussion/discussion.scss @@ -4,13 +4,13 @@ :host { .addon-messages-unreadfrom { - color: var(--ion-color-primary); + color: var(--primary); background-color: transparent; margin-top: 6px; margin-left: auto; margin-right: auto; ion-icon { - color: var(--ion-color-primary); + color: var(--primary); background-color: transparent; } } diff --git a/src/addons/mod/assign/components/submission/submission.scss b/src/addons/mod/assign/components/submission/submission.scss index 3c8a199a0..51e8c8838 100644 --- a/src/addons/mod/assign/components/submission/submission.scss +++ b/src/addons/mod/assign/components/submission/submission.scss @@ -15,7 +15,7 @@ } div.submissioneditable p { - color: var(--red); + color: var(--danger); } .core-grading-summary .advancedgrade { @@ -25,6 +25,6 @@ :host-context(body.dark) ::ng-deep { div.submissioneditable p { - color: var(--red-light); + color: var(--danger-tint); } } diff --git a/src/addons/mod/data/data-forms.scss b/src/addons/mod/data/data-forms.scss index 51184ba44..1ee47a8c0 100644 --- a/src/addons/mod/data/data-forms.scss +++ b/src/addons/mod/data/data-forms.scss @@ -39,7 +39,7 @@ } &.has-focus { - --input-border-color: var(--ion-color-primary); + --input-border-color: var(--primary); } &.has-focus.ion-valid { --input-border-color: var(--success); diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.scss b/src/addons/mod/lesson/pages/user-retake/user-retake.scss index 87b03856c..8e5d088c2 100644 --- a/src/addons/mod/lesson/pages/user-retake/user-retake.scss +++ b/src/addons/mod/lesson/pages/user-retake/user-retake.scss @@ -4,10 +4,10 @@ } .addon-mod_lesson-highlight { - --background: var(--blue-light); + --background: var(--primary-tint); ion-label, ion-label p { - color: var(--blue-dark); + color: var(--primary-shade); } } diff --git a/src/addons/mod/quiz/components/connection-error/connection-error.scss b/src/addons/mod/quiz/components/connection-error/connection-error.scss index 7658c1e7e..a2fb05f4d 100644 --- a/src/addons/mod/quiz/components/connection-error/connection-error.scss +++ b/src/addons/mod/quiz/components/connection-error/connection-error.scss @@ -1,7 +1,7 @@ :host { - background-color: var(--red-light); + background-color: var(--danger-tint); .item { - --background: var(--red-light); + --background: var(--danger-tint); } } diff --git a/src/addons/mod/quiz/components/index/index.scss b/src/addons/mod/quiz/components/index/index.scss index abf80309f..b7cdadf28 100644 --- a/src/addons/mod/quiz/components/index/index.scss +++ b/src/addons/mod/quiz/components/index/index.scss @@ -14,8 +14,8 @@ .item.addon-mod_quiz-highlighted, .addon-mod_quiz-highlighted p, .item.addon-mod_quiz-highlighted p { - --background: var(--blue-light); - color: var(--blue-dark); + --background: var(--primary-tint); + color: var(--primary-shade); } } } @@ -26,8 +26,8 @@ .item.addon-mod_quiz-highlighted, .addon-mod_quiz-highlighted p, .item.addon-mod_quiz-highlighted p { - --background: var(--blue-dark); - color: var(--blue-light); + --background: var(--primary-shade); + color: var(--primary-tint); } } } diff --git a/src/addons/mod/wiki/components/index/index.scss b/src/addons/mod/wiki/components/index/index.scss index 5efe4c381..f0251ad37 100644 --- a/src/addons/mod/wiki/components/index/index.scss +++ b/src/addons/mod/wiki/components/index/index.scss @@ -3,7 +3,7 @@ $addon-mod-wiki-toc-level-padding: 12px !default; :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-background-color: var(--gray-200); @@ -58,6 +58,6 @@ $addon-mod-wiki-toc-level-padding: 12px !default; } :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); } diff --git a/src/addons/mod/workshop/components/submission/submission.scss b/src/addons/mod/workshop/components/submission/submission.scss index 5490cd6b4..2649f9bbf 100644 --- a/src/addons/mod/workshop/components/submission/submission.scss +++ b/src/addons/mod/workshop/components/submission/submission.scss @@ -1,10 +1,10 @@ :host { p.addon-overriden-grade { - color: var(--ion-color-success); + color: var(--success); } p.addon-has-overriden-grade { - color: var(--ion-color-danger); + color: var(--danger); text-decoration: line-through; } } diff --git a/src/addons/qtype/ddmarker/component/ddmarker.scss b/src/addons/qtype/ddmarker/component/ddmarker.scss index ea1272c1f..980cb3b54 100644 --- a/src/addons/qtype/ddmarker/component/ddmarker.scss +++ b/src/addons/qtype/ddmarker/component/ddmarker.scss @@ -118,18 +118,18 @@ core-format-text ::ng-deep { } div.markertexts span.markertext { z-index: 3; - background-color: var(--yellow-light); + background-color: var(--warning-tint); border-style: solid; border-width: 2px; - border-color: var(--yellow); + border-color: var(--warning); position: absolute; color: var(--gray-900); } span.wrongpart { - background-color: var(--yellow-light); + background-color: var(--warning-tint); border-style: solid; border-width: 2px; - border-color: var(--yellow); + border-color: var(--warning); padding: 5px; border-radius: 10px; opacity: 0.6; diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss index bef06c30c..037d35189 100644 --- a/src/core/components/combobox/combobox.scss +++ b/src/core/components/combobox/combobox.scss @@ -9,9 +9,9 @@ ion-button { --icon-margin: 0 8px; --background: var(--core-combobox-background); - --background-hover: #000000; - --background-activated: #000000; - --background-focused: #000000; + --background-hover: black; + --background-activated: black; + --background-focused: black; --background-hover-opacity: .04; --color: var(--core-combobox-color); diff --git a/src/core/components/input-errors/input-errors.scss b/src/core/components/input-errors/input-errors.scss index de3f96567..32cabaf50 100644 --- a/src/core/components/input-errors/input-errors.scss +++ b/src/core/components/input-errors/input-errors.scss @@ -4,7 +4,7 @@ .core-input-error-container { .core-input-error { padding: 4px; - color: var(--ion-color-danger); + color: var(--danger); font-size: 12px; display: none; diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss index ef26afe30..6f439e64e 100644 --- a/src/core/components/loading/loading.scss +++ b/src/core/components/loading/loading.scss @@ -3,7 +3,7 @@ :host { --loading-background: var(--ion-background-color); --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-inline-margin: 0px; --loading-inline-min-height: 28px; diff --git a/src/core/components/split-view/split-view.scss b/src/core/components/split-view/split-view.scss index a333f7623..089107563 100644 --- a/src/core/components/split-view/split-view.scss +++ b/src/core/components/split-view/split-view.scss @@ -1,9 +1,12 @@ +@import "~theme/globals"; + :host { --menu-min-width: 270px; --menu-max-width: 28%; --menu-box-shadow: var(--core-menu-box-shadow-end); --menu-z: 2; - --menu-border-width: 1; + --menu-border-width: 1px; + --menu-border-color: var(--stroke); --menu-display: flex; --content-display: block; --content-outlet-display: none; @@ -38,8 +41,8 @@ flex-shrink: 0; order: -1; width: 100%; - border-inline-start: 0; - border-inline-end: var(--border); + @include border-start(0); + @include border-end(var(--menu-border-width), solid, var(--menu-border-color)); min-width: var(--menu-min-width); max-width: var(--menu-max-width); } @@ -82,11 +85,3 @@ --content-placeholder-display: none; --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))); -} 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 42ef760a4..d869f7aae 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-info); + border-top: 1px solid var(--info); background: var(--background); flex-shrink: 1; font-size: 1.1rem; .icon { - color: var(--ion-color-info); + color: var(--info); } } } diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss index a679d9d55..9068aaba0 100644 --- a/src/core/features/grades/pages/course/course.scss +++ b/src/core/features/grades/pages/course/course.scss @@ -6,7 +6,8 @@ --even-cell-background: var(--white); --odd-cell-hover: var(--gray-200); --even-cell-hover: var(--light); - --icon-color: #999999; + --icon-color: var(--gray-500); + --border-color: var(--stroke); .odd { --cell-background: var(--odd-cell-background); @@ -26,15 +27,7 @@ --even-cell-background: var(--gray-900); --odd-cell-hover: var(--gray-500); --even-cell-hover: var(--medium); - --icon-color: #eeeeee; -} - -: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))); + --icon-color: var(--gray-200); } .core-grades-table { diff --git a/src/core/features/login/pages/site/site.scss b/src/core/features/login/pages/site/site.scss index 5320d6600..b11602d42 100644 --- a/src/core/features/login/pages/site/site.scss +++ b/src/core/features/login/pages/site/site.scss @@ -25,7 +25,7 @@ width: 50px; height: 50px; border-radius: 20%; - box-shadow: 0 0 4px #eee; + box-shadow: 0 0 4px var(--gray-200); text-align: center; overflow: hidden; @@ -117,8 +117,9 @@ .core-login-entered-site { background-color: var(--light); + ion-thumbnail { - box-shadow: 0 0 4px #ddd; + box-shadow: 0 0 4px var(--gray-300); } } diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss index 993e0cea6..b0302fbde 100644 --- a/src/core/features/mainmenu/pages/menu/menu.scss +++ b/src/core/features/mainmenu/pages/menu/menu.scss @@ -17,7 +17,7 @@ } @else { ion-tabs.tabshidden.placement-bottom ion-tab-bar { pointer-events: none; - + ion-tab-button { height: auto; } @@ -155,9 +155,9 @@ } :host-context(.core-online) .core-network-message { - background: var(--green); + background: var(--success); } :host-context(.core-offline) .core-network-message { - background: var(--red); + background: var(--danger); } diff --git a/src/core/features/mainmenu/pages/more/more.scss b/src/core/features/mainmenu/pages/more/more.scss index 9b1b544d2..edb806fb5 100644 --- a/src/core/features/mainmenu/pages/more/more.scss +++ b/src/core/features/mainmenu/pages/more/more.scss @@ -1,11 +1,7 @@ @import "~theme/globals"; ion-item { - --border-color: var(--core-more-item-border, - var(--ion-item-border-color, - var(--ion-border-color, - var(--ion-color-step-150, - rgba(0, 0, 0, 0.13))))); + --border-color: var(--core-more-item-border, var(--ion-border-color)); ion-icon { color: var(--core-more-icon, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)); diff --git a/src/core/features/question/question.scss b/src/core/features/question/question.scss index b37891d1d..7c94d2f05 100644 --- a/src/core/features/question/question.scss +++ b/src/core/features/question/question.scss @@ -31,10 +31,10 @@ border-radius: 3px; &.incorrect { - background-color: var(--red); + background-color: var(--danger); } &.correct { - background-color: var(--green); + background-color: var(--success); } } } diff --git a/src/theme/components/discussion.scss b/src/theme/components/discussion.scss index 173146469..be9ec19d3 100644 --- a/src/theme/components/discussion.scss +++ b/src/theme/components/discussion.scss @@ -158,7 +158,7 @@ ion-icon { font-size: 1.4em; line-height: initial; - color: var(--ion-color-danger); + color: var(--danger); } } diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index b6c4216fe..b0086039e 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -556,16 +556,15 @@ core-rich-text-editor .core-rte-editor { font-weight: 400; } - @each $color-name, $base in $colors { - + @each $color-name, $unused in $colors { .alert-#{$color-name} { - --color-base: var(--ion-color-#{$color-name}); - color: var(--color-base); + --color-base: var(--#{$color-name}); + color: var(--#{$color-name}-shade); border-color: var(--color-base); - background-color: var(--ion-color-#{$color-name}-lighter); + background-color: var(--#{$color-name}-tint); - .alert-link { - color: var(--ion-color-#{$color-name}-shade); + .alert-link, a { + color: var(--#{$color-name}-shade); } } .alert-#{$color-name} p { @@ -594,9 +593,9 @@ core-rich-text-editor .core-rte-editor { .border-bottom-0 { border-bottom: 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: 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; } .text-white { color: var(--white) !important; } - @each $color-name, $base in $colors { + @each $color-name, $unused in $colors { .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 { - color: var(--ion-color-danger-contrast); - background-color: var(--ion-color-danger); + color: var(--danger-contrast); + background-color: var(--danger); } - @each $color-name, $base in $colors { + @each $color-name, $unused in $colors { .label-#{$color-name} { - color: var(--ion-color-#{$color-name}-contrast); - background-color: var(--ion-color-#{$color-name}); + color: var(--#{$color-name}-contrast); + background-color: var(--#{$color-name}); } } } diff --git a/src/theme/components/rubrics.scss b/src/theme/components/rubrics.scss index 1ab4c4b92..3460509ca 100644 --- a/src/theme/components/rubrics.scss +++ b/src/theme/components/rubrics.scss @@ -9,13 +9,13 @@ core-format-text { } .gradingform_rubric_editform .status.ready { - background-color: var(--green-light); - border-color: var(--green); + background-color: var(--success-tint); + border-color: var(--success); } .gradingform_rubric_editform .status.draft { - background-color: var(--yellow-light); - border-color: var(--yellow); + background-color: var(--warning-tint); + border-color: var(--warning); } .gradingform_rubric { @@ -107,7 +107,7 @@ core-format-text { .gradingform_rubric .criterion .levels .level .score { font-style: italic; - color: var(--green); + color: var(--success); font-weight: bold; margin-top: 5px; white-space: nowrap; @@ -126,11 +126,11 @@ core-format-text { /* evaluation */ .gradingform_rubric .criterion .levels .level.currentchecked { - background-color: #fff0f0; + background-color: var(--danger-tint); } .gradingform_rubric .criterion .levels .level.checked { - background-color: var(--green-light); + background-color: var(--success-tint); border: 1px solid var(--medium); } @@ -154,7 +154,7 @@ core-format-text { } .gradingform_rubric .criterion .levels.error { - border: 1px solid var(--red); + border: 1px solid var(--danger); } .gradingform_rubric .criterion .description.error, @@ -166,19 +166,19 @@ core-format-text { .gradingform_rubric-regrade { padding: 10px; background-color: var(--light); - border: 1px solid var(--red-light); + border: 1px solid var(--danger-tint); margin-bottom: 10px; } .gradingform_rubric-restored { padding: 10px; - background-color: var(--yellow-light); - border: 1px solid var(--yellow); + background-color: var(--warning-tint); + border: 1px solid var(--warning); margin-bottom: 10px; } .gradingform_rubric-error { - color: var(--red); + color: var(--danger); font-weight: bold; } @@ -219,17 +219,17 @@ core-format-text { } .gradingform_rubric.evaluate .criterion .levels .level:hover { - background-color: var(--green-light); + background-color: var(--success-tint); } .gradingform_rubric .criterion .levels .level.checked { - background-color: var(--green-light); + background-color: var(--success-tint); border: none; border-left: 1px solid var(--stroke); } .gradingform_rubric .criterion .levels .level .score { - color: var(--green); + color: var(--success); font-weight: 500; font-style: normal; margin-top: 20px; diff --git a/src/theme/globals.mixins.ionic.scss b/src/theme/globals.mixins.ionic.scss index 2406a70f3..a5fb16e60 100644 --- a/src/theme/globals.mixins.ionic.scss +++ b/src/theme/globals.mixins.ionic.scss @@ -47,14 +47,16 @@ } // Mixes a color with black to create its shade. +// Default to bootstrap level 6. // -------------------------------------------------------------------------------------------- -@function get-color-shade($color) { - @return mix(#000, $color, 12%); +@function get-color-shade($color, $percent: 48%) { + @return mix(#000, $color, $percent); } // 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); } @@ -72,20 +74,35 @@ @mixin generate-color($color-name, $colors) { $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); $shade: get-color-shade($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}-rgb: #{color-to-rgb-list($base)}; --ion-color-#{$color-name}-contrast: #{$contrast}; --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)}; --ion-color-#{$color-name}-shade: #{$shade}; --ion-color-#{$color-name}-tint: #{$tint}; - --ion-color-#{$color-name}-lighter: #{$lighter}; .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-shade: var(--ion-color-#{$color-name}-shade); --ion-color-tint: var(--ion-color-#{$color-name}-tint); - --ion-color-lighter: var(--ion-color-#{$color-name}-lighter); } } diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss index dc509523f..d62c8d2c8 100644 --- a/src/theme/globals.mixins.scss +++ b/src/theme/globals.mixins.scss @@ -1,3 +1,5 @@ +@use "sass:math" as math; + /* * App custom mixins for SCSS * ---------------------------------------------------------------------------- @@ -233,8 +235,59 @@ @return (red($color) + green($color) + blue($color)) / 3; } +// Get the better color contrast using WCAG algorythm. @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); + } } diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index 69580f16f..6b19a3d73 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -4,39 +4,25 @@ * Place here all global variables. */ -$white: #ffffff !default; -$gray-100: #f8f9fa !default; -$gray-200: #e9ecef !default; -$gray-300: #dee2e6 !default; // Stroke -$gray-400: #ced4da !default; -$gray-500: #8f959e !default; -$gray-600: #6a737b !default; -$gray-700: #495057 !default; -$gray-800: #343a40 !default; -$gray-900: #1d2125 !default; // Copy text -$black: #000000 !default; // Avoid usage +$white: #ffffff !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; // Stroke +$gray-400: #ced4da !default; +$gray-500: #8f959e !default; +$gray-600: #6a737b !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #1d2125 !default; // Copy text +$black: #000000 !default; // Avoid usage -$blue: #0f6cbf !default; -$blue-light: mix($blue, white, 20%) !default; -$blue-dark: darken($blue, 10%) !default; +$blue: #0f6cbf !default; +$cyan: #008196 !default; +$green: #357a32 !default; +$red: #ca3120 !default; +$yellow: #f0ad4e !default; -$cyan: #008196 !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; +$brand-color: #ff7518 !default; $text-color: $gray-900 !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-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; $ion-item-background: $white !default; @@ -63,40 +49,17 @@ $light: $gray-100 !default; $medium: $gray-600 !default; $dark: $gray-800 !default; -$stroke: $gray-300 !default; - $colors: ( - primary: $primary, - secondary: $secondary, - success: $success, - warning: $warning, - danger: $danger, - info: $info, - light: $light, - medium: $medium, - dark: $dark -) !default; - -$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, + primary: (light: $primary), + secondary: (light: $secondary), + success: (light: $success), + warning: (light: $warning), + danger: (light: $danger), + info: (light: $info), + light: (light: $light, dark: $dark), + medium: (light: $medium, dark: $gray-200), + dark: (light: $dark, dark: $light), + brand: (light: $brand-color, dark: $brand-color), ) !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-siteurl: $core-more-hide-siteurl !default; +// Activity icon background colors. $activity-icon-colors: ( administration: #5d63f6, assessment: #eb66a2, @@ -161,3 +125,12 @@ $activity-icon-colors: ( content: #399be2, interface: #a378ff ) !default; + +// Calendar event category background colors. +$calendar-event-category-colors: ( + category: #8e24aa, + course: $red, + group: $yellow, + user: $blue, + site: $green +) !default; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index cfd6a58fa..9659d2707 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -217,7 +217,7 @@ ion-button ion-spinner { --color: inherit !important; } -@each $color-name, $value in $colors { +@each $color-name, $unused in $colors { .text-#{$color-name}, p.text-#{$color-name} { color: var(--ion-color-#{$color-name}); @@ -240,7 +240,7 @@ ion-header ion-toolbar { .button.button-solid { --background: transparent; --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, @@ -272,7 +272,7 @@ ion-icon { bottom: 0; left: 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%; mask: url("/assets/fonts/font-awesome/solid/slash.svg") no-repeat 50% 50%; } @@ -303,7 +303,7 @@ button, // Clear buttons will be black. ion-button.button-clear { - --ion-color-primary: var(--primary); + --primary: var(--primary); } [role="button"], @@ -364,7 +364,7 @@ div.core-iframe-network-error { right: -15%; width: 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%; 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 { opacity: 0.7; - --background: var(--ion-color-light); + --background: var(--light); } // Extra text colors. @@ -642,7 +642,7 @@ body.core-iframe-fullscreen ion-router-outlet { } // Card styles -@each $color-name, $base in $colors { +@each $color-name, $unused in $colors { // Message cards. 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 { display: inline !important; } diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 3a547dc07..e61f69665 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -7,7 +7,7 @@ :root body.dark { - // Ionic shades. + // Ionic shades, defined for ionic internal use. --ion-color-step-0: var(--black); --ion-color-step-50: var(--gray-900); --ion-color-step-100: var(--gray-900); @@ -36,45 +36,33 @@ --text-color: #{$text-color-dark}; --ion-text-color: var(--text-color); --ion-text-color-rgb: #{$text-color-dark-rgb}; - --subdued-text-color: #b4b4b4; - - --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); + --subdued-text-color: var(--gray-400); --ion-card-color: var(--text-color); --ion-card-background: var(--ion-item-background); --contrast-background: black; + --stroke: var(--gray-700); + --ion-border-color: var(--stroke); + --ion-item-border-color: var(--stroke); + ion-content { --background: var(--ion-background-color); --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-color: var(--medium); ion-action-sheet { .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-color: var(--white); @@ -101,22 +89,22 @@ --core-login-input-background: var(--core-login-background); --core-login-input-color: var(--core-login-text-color); - --core-question-correct-color: var(--green-light); - --core-question-correct-color-bg: var(--green-dark); - --core-question-incorrect-color: var(--red); - --core-question-incorrect-color-bg: var(--red-dark); - --core-question-feedback-color: var(--yellow-light); - --core-question-feedback-color-bg: var(--yellow-dark); - --core-question-warning-color: var(--red); + --core-question-correct-color: var(--success-tint); + --core-question-correct-color-bg: var(--success-shade); + --core-question-incorrect-color: var(--danger); + --core-question-incorrect-color-bg: var(--danger-shade); + --core-question-feedback-color: var(--warning-tint); + --core-question-feedback-color-bg: var(--warning-shade); + --core-question-warning-color: var(--danger); --core-question-saved-color-bg: var(--gray-500); - --core-question-state-correct-color: var(--green-dark); - --core-question-state-partial-color: var(--yellow-dark); - --core-question-state-partial-text: var(--yellow); - --core-question-state-incorrect-color: var(--red-dark); + --core-question-state-correct-color: var(--success-shade); + --core-question-state-partial-color: var(--warning-shade); + --core-question-state-partial-text: var(--warning); + --core-question-state-incorrect-color: var(--danger-shade); - --core-question-feedback-color: var(--yellow-light); - --core-question-feedback-background-color: var(--yellow-dark); + --core-question-feedback-color: var(--warning-tint); + --core-question-feedback-background-color: var(--warning-shade); --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-200); --core-dd-question-border: var(--gray-200); diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 6d0ff6d15..04f2898b1 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -20,7 +20,7 @@ --gray-100: #{$gray-100}; --white: #{$white}; - // Ionic shades. + // Ionic shades, defined for ionic internal use. --ion-color-step-0: var(--white); --ion-color-step-50: var(--gray-100); --ion-color-step-100: var(--gray-100); @@ -43,50 +43,21 @@ --ion-color-step-950: var(--gray-900); --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}; --background-color: #{$background-color}; - --brand-color: #{$brand-color}; - --brand-color-contrast: var(--text-color); - --core-online-color: #5cb85c; - // Named Color Variables - --primary: #{$primary}; - --secondary: #{$secondary}; - --success: #{$success}; - --danger: #{$danger}; - --warning: #{$warning}; - --info: #{$info}; - --light: #{$light}; - --dark: #{$dark}; - --medium: #{$medium}; + --stroke: var(--gray-300); + --ion-border-color: var(--stroke); + --ion-item-border-color: var(--stroke); - --stroke: #{$stroke}; - - @each $color-name, $value in $colors { + @each $color-name, $unused in $colors { @include generate-color($color-name, $colors); } + --brand-color: var(--brand); + // Accessibility vars. --a11y-min-target-size: 44px; --a11y-focus-color: var(--primary); @@ -102,7 +73,7 @@ --ion-text-color: var(--text-color); --ion-text-color-rgb: #{$text-color-rgb}; - --subdued-text-color: #595959; + --subdued-text-color: var(--gray-700); --small-radius: 4px; --medium-radius: 8px; @@ -128,11 +99,11 @@ } --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-background-selected: transparent; --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; ion-tab-bar.mainmenu-tabs { --background: var(--core-bottom-tabs-background); @@ -141,7 +112,7 @@ --background-selected: var(--core-bottom-tabs-background-selected); } - --core-link-color: var(--blue); + --core-link-color: var(--primary); a { color: var(--core-link-color); } @@ -203,7 +174,7 @@ } .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-color-base: var(--ion-color-primary); - --color: var(--ion-color-primary); + --ion-color-base: var(--core-loading-spinner); + --color: var(--core-loading-spinner); } --core-progressbar-height: 8px; @@ -310,11 +282,6 @@ --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-border-color: var(--stroke); @@ -337,22 +304,22 @@ --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-question-correct-color: var(--green-dark); - --core-question-correct-color-bg: var(--green-light); - --core-question-incorrect-color: var(--red); - --core-question-incorrect-color-bg: var(--red-light); - --core-question-feedback-color: var(--yellow-dark); - --core-question-feedback-color-bg: var(--yellow-light); - --core-question-warning-color: var(--red); + --core-question-correct-color: var(--success-shade); + --core-question-correct-color-bg: var(--success-tint); + --core-question-incorrect-color: var(--danger); + --core-question-incorrect-color-bg: var(--danger-tint); + --core-question-feedback-color: var(--warning-shade); + --core-question-feedback-color-bg: var(--warning-tint); + --core-question-warning-color: var(--danger); --core-question-saved-color-bg: var(--gray-200); - --core-question-state-correct-color: var(--green-light); - --core-question-state-partial-color: var(--yellow-light); - --core-question-state-partial-text: var(--yellow); - --core-question-state-incorrect-color: var(--red-light); + --core-question-state-correct-color: var(--success-tint); + --core-question-state-partial-color: var(--warning-tint); + --core-question-state-partial-text: var(--warning); + --core-question-state-incorrect-color: var(--danger-tint); - --core-question-feedback-color: var(--yellow-dark); - --core-question-feedback-background-color: var(--yellow-light); + --core-question-feedback-color: var(--warning-shade); + --core-question-feedback-background-color: var(--warning-tint); --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-500); --core-dd-question-radius: 10px;