diff --git a/src/addons/block/activityresults/components/activityresults/activityresults.scss b/src/addons/block/activityresults/components/activityresults/activityresults.scss index 40e29efef..b1442e17c 100644 --- a/src/addons/block/activityresults/components/activityresults/activityresults.scss +++ b/src/addons/block/activityresults/components/activityresults/activityresults.scss @@ -21,7 +21,7 @@ text-align: start; padding-top: .75rem; padding-bottom: .75rem; - color: var(--gray-darker); + color: var(--medium); font-weight: bold; font-size: 18px; } diff --git a/src/addons/block/myoverview/components/filteroptions/filteroptions.html b/src/addons/block/myoverview/components/filteroptions/filteroptions.html index dc8db1c6d..39dcd2491 100644 --- a/src/addons/block/myoverview/components/filteroptions/filteroptions.html +++ b/src/addons/block/myoverview/components/filteroptions/filteroptions.html @@ -5,7 +5,7 @@ - + diff --git a/src/addons/block/rssclient/components/rssclient/rssclient.scss b/src/addons/block/rssclient/components/rssclient/rssclient.scss index bd23c6bc0..2d9e3bc3a 100644 --- a/src/addons/block/rssclient/components/rssclient/rssclient.scss +++ b/src/addons/block/rssclient/components/rssclient/rssclient.scss @@ -6,7 +6,7 @@ -webkit-padding-start: 0; li { - border-top: 1px solid var(--gray); + border-top: 1px solid var(--stroke); padding: 5px; padding-bottom: 8px; } diff --git a/src/addons/calendar/calendar-common.scss b/src/addons/calendar/calendar-common.scss index c12303e90..ab19d2db4 100644 --- a/src/addons/calendar/calendar-common.scss +++ b/src/addons/calendar/calendar-common.scss @@ -1,6 +1,6 @@ :host { - --addon-calendar-blank-day-background-color: var(--gray-lighter); + --addon-calendar-blank-day-background-color: var(--light); .item.addon-calendar-event { > ion-icon { diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss index f293233fc..2c63bfa24 100644 --- a/src/addons/calendar/components/calendar/calendar.scss +++ b/src/addons/calendar/components/calendar/calendar.scss @@ -1,5 +1,5 @@ :host { - --addon-calendar-blank-day-background-color: var(--gray-lighter); + --addon-calendar-blank-day-background-color: var(--light); .addon-calendar-navigation { padding-top: 5px; @@ -189,5 +189,5 @@ } :host-context(body.dark) { - --addon-calendar-blank-day-background-color: var(--black); + --addon-calendar-blank-day-background-color: var(--gray-900); } diff --git a/src/addons/mod/data/data-forms.scss b/src/addons/mod/data/data-forms.scss index 17b000650..51184ba44 100644 --- a/src/addons/mod/data/data-forms.scss +++ b/src/addons/mod/data/data-forms.scss @@ -2,7 +2,7 @@ // Edit and search modal. :host { - --input-border-color: var(--gray); + --input-border-color: var(--stroke); --input-border-width: 1px; --select-border-width: 0px; diff --git a/src/addons/mod/data/data.scss b/src/addons/mod/data/data.scss index 6b7862a8d..0714c8760 100644 --- a/src/addons/mod/data/data.scss +++ b/src/addons/mod/data/data.scss @@ -13,7 +13,7 @@ $grid-column-paddings: ( ) !default; :host { - --border-color: var(--gray); + --border-color: var(--stroke); } .addon-data-contents { diff --git a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.scss b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.scss index 006127a5b..ef4832daf 100644 --- a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.scss +++ b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.scss @@ -27,7 +27,7 @@ } .addon-mod_h5pactivity-result-table-row.item:nth-child(even) { - --background: var(--gray-lighter); + --background: var(--light); } .addon-mod_h5pactivity-result-score { @@ -37,6 +37,6 @@ :host-context(body.dark) { .addon-mod_h5pactivity-result-table-row.item:nth-child(even) { - --background: var(--black); + --background: var(--gray-900); } } diff --git a/src/addons/mod/lesson/pages/player/player.scss b/src/addons/mod/lesson/pages/player/player.scss index 8733de161..011192f4c 100644 --- a/src/addons/mod/lesson/pages/player/player.scss +++ b/src/addons/mod/lesson/pages/player/player.scss @@ -1,9 +1,9 @@ :host { - --background-odd: var(--gray-lighter); + --background-odd: var(--light); } :host-context(body.dark) { - --background-odd: var(--gray-darker); + --background-odd: var(--medium); } :host ::ng-deep { @@ -32,7 +32,7 @@ td { padding: 5px; line-height: 1.5; - border-bottom: 1px solid var(--gray); + border-bottom: 1px solid var(--stroke); } } } diff --git a/src/addons/mod/quiz/pages/player/player.scss b/src/addons/mod/quiz/pages/player/player.scss index 1005ff202..7d68762c8 100644 --- a/src/addons/mod/quiz/pages/player/player.scss +++ b/src/addons/mod/quiz/pages/player/player.scss @@ -5,6 +5,6 @@ } ion-content ion-toolbar { - border-bottom: 1px solid var(--gray); + border-bottom: 1px solid var(--stroke); } } diff --git a/src/addons/mod/survey/components/index/index.scss b/src/addons/mod/survey/components/index/index.scss index 87933f475..6f557a178 100644 --- a/src/addons/mod/survey/components/index/index.scss +++ b/src/addons/mod/survey/components/index/index.scss @@ -1,13 +1,13 @@ :host { --grid-background: var(--white); - --even-background: var(--gray-light); + --even-background: var(--gray-200); .option-name { font-size: 14px; } .addon-mod_survey-question { - border-top: 1px solid var(--gray); + border-top: 1px solid var(--stroke); } ion-row { @@ -26,6 +26,6 @@ } :host-context(body.dark) { - --grid-background: var(--black); - --even-background: var(--gray-darker); + --grid-background: var(--gray-900); + --even-background: var(--medium); } diff --git a/src/addons/mod/wiki/components/index/index.scss b/src/addons/mod/wiki/components/index/index.scss index 7b98cde4c..5efe4c381 100644 --- a/src/addons/mod/wiki/components/index/index.scss +++ b/src/addons/mod/wiki/components/index/index.scss @@ -4,14 +4,14 @@ $addon-mod-wiki-toc-level-padding: 12px !default; :host { --addon-mod-wiki-newentry-link-color: var(--red); - --addon-mod-wiki-toc-border-color: var(--gray-dark); - --addon-mod-wiki-toc-background-color: var(--gray-light); + --addon-mod-wiki-toc-border-color: var(--gray-500); + --addon-mod-wiki-toc-background-color: var(--gray-200); background-color: var(--ion-item-background); .addon-mod_wiki-page-content { background-color: var(--ion-item-background); - border-top: 1px solid var(--gray); + border-top: 1px solid var(--stroke); padding-bottom: 10px; } @@ -59,5 +59,5 @@ $addon-mod-wiki-toc-level-padding: 12px !default; :host-context(body.dark) { --addon-mod-wiki-newentry-link-color: var(--red-light); - --addon-mod-wiki-toc-background-color: var(--gray-darker); + --addon-mod-wiki-toc-background-color: var(--medium); } diff --git a/src/addons/notifications/notifications.scss b/src/addons/notifications/notifications.scss index 360723b32..23e962567 100644 --- a/src/addons/notifications/notifications.scss +++ b/src/addons/notifications/notifications.scss @@ -28,7 +28,7 @@ .item core-format-text ::ng-deep { .forumpost { - border: 1px solid var(--gray-light); + border: 1px solid var(--gray-200); width: 100%; margin: 0 0 1em 0; @@ -37,7 +37,7 @@ } .header { - background-color: var(--gray-lighter); + background-color: var(--light); .picture { width: 48px; @@ -82,7 +82,7 @@ hr { margin-top: 1.5rem; margin-bottom: 1.5rem; - background-color: var(--gray-light); + background-color: var(--gray-200); } } } diff --git a/src/addons/qtype/ddimageortext/component/ddimageortext.scss b/src/addons/qtype/ddimageortext/component/ddimageortext.scss index 0430a5d3e..dfb6f7f01 100644 --- a/src/addons/qtype/ddimageortext/component/ddimageortext.scss +++ b/src/addons/qtype/ddimageortext/component/ddimageortext.scss @@ -2,7 +2,7 @@ // Style ddimageortext content a bit. Almost all these styles are copied from Moodle. :host { - --ddimageortext-border-drop: var(--gray-darker); + --ddimageortext-border-drop: var(--medium); --ddimageortext-draghome-background: var(--core-dd-question-color-2); } diff --git a/src/addons/qtype/ddmarker/component/ddmarker.scss b/src/addons/qtype/ddmarker/component/ddmarker.scss index b62ffbfcd..ea1272c1f 100644 --- a/src/addons/qtype/ddmarker/component/ddmarker.scss +++ b/src/addons/qtype/ddmarker/component/ddmarker.scss @@ -123,7 +123,7 @@ core-format-text ::ng-deep { border-width: 2px; border-color: var(--yellow); position: absolute; - color: var(--black); + color: var(--gray-900); } span.wrongpart { background-color: var(--yellow-light); @@ -135,7 +135,7 @@ core-format-text ::ng-deep { opacity: 0.6; margin: 5px; display: inline-block; - color: var(--black); + color: var(--gray-900); } div.dragitems img.target, div.draghomes img.target { diff --git a/src/core/components/mod-icon/mod-icon.scss b/src/core/components/mod-icon/mod-icon.scss index 23ae48ea3..5cd4a8cca 100644 --- a/src/core/components/mod-icon/mod-icon.scss +++ b/src/core/components/mod-icon/mod-icon.scss @@ -12,7 +12,7 @@ border-radius: 4px; padding: 0.7rem; - background-color: $gray-lighter; + background-color: $gray-100; line-height: var(--size); @each $type, $value in $activity-icon-colors { diff --git a/src/core/features/block/components/side-blocks-button/side-blocks-button.html b/src/core/features/block/components/side-blocks-button/side-blocks-button.html index d38d89e7f..07dcf6632 100644 --- a/src/core/features/block/components/side-blocks-button/side-blocks-button.html +++ b/src/core/features/block/components/side-blocks-button/side-blocks-button.html @@ -1,3 +1,3 @@ - + diff --git a/src/core/features/block/components/side-blocks-button/side-blocks-button.scss b/src/core/features/block/components/side-blocks-button/side-blocks-button.scss index 3e9277bfc..579196d50 100644 --- a/src/core/features/block/components/side-blocks-button/side-blocks-button.scss +++ b/src/core/features/block/components/side-blocks-button/side-blocks-button.scss @@ -10,11 +10,12 @@ --padding-start: 0.5em; --padding-end: 0; --border-radius: 2em 0 0 2em; + height: 56px; &::part(native) { @include core-transition(padding, 200ms); } - + &:hover { --padding-end: 1.2em; --padding-start: 1em; diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss index 76335d842..e7d109381 100644 --- a/src/core/features/course/components/format/format.scss +++ b/src/core/features/course/components/format/format.scss @@ -24,7 +24,7 @@ pointer-events: auto; position: relative; background: var(--ion-item-background); - border-bottom: 1px solid var(--gray); + border-bottom: 1px solid var(--stroke); img { position: absolute; diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss index 928f993e2..2835c6aa9 100644 --- a/src/core/features/courses/components/course-list-item/course-list-item.scss +++ b/src/core/features/courses/components/course-list-item/course-list-item.scss @@ -3,7 +3,7 @@ .core-course-list-item { .course-icon { color: white; - background: var(--gray-light); + background: var(--gray-200); padding: 8px; font-size: 24px; border-radius: 50%; @@ -39,7 +39,7 @@ ion-card { --vertical-margin: 12px; - + --border-radius: 16px; display: flex; flex-direction: column; align-self: stretch; @@ -161,7 +161,7 @@ button { :host-context(.core-horizontal-scroll) { @include horizontal_scroll_item(80%, 250px, 300px); - + ion-card { .core-course-thumb { padding-top: 30%; @@ -169,7 +169,7 @@ button { ion-item.core-course-header { --padding-start: 4px; - + .core-course-title { margin: 7px 0; diff --git a/src/core/features/courses/pages/my/my.scss b/src/core/features/courses/pages/my/my.scss index 4d244fdc8..7c90901e1 100644 --- a/src/core/features/courses/pages/my/my.scss +++ b/src/core/features/courses/pages/my/my.scss @@ -1,3 +1,5 @@ +@import "~theme/globals"; + :host ::ng-deep ion-item-divider { display: none !important; } @@ -8,3 +10,17 @@ :host-context(ion-tabs.placement-bottom) ::ng-deep core-loading { --internal-loading-inline-min-height: calc(100vh - var(--core-header-toolbar-height) - var(--bottom-tabs-size) - 2px); } + +@if ($core-dashboard-logo) { + .in-toolbar h1 .core-header-logo { + max-height: calc(var(--core-header-toolbar-height) - 24px); + } + + .in-toolbar h1 core-format-text { + display: none; + } +} @else { + .in-toolbar h1 .core-header-logo { + display: none; + } +} 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 454c740d9..1656bbb80 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 @@ -3,16 +3,16 @@ --placeholder-color: var(--ion-placeholder-color); --toobar-background: var(--white); --button-color: var(--ion-text-color); - --button-active-color: var(--gray); + --button-active-color: var(--gray-300); --background: var(--ion-item-background); } :host-context(body.dark) { - --background: var(--gray-darker); + --background: var(--medium); --color: var(--white); - --button-color: var(--gray-light); - --button-active-color: var(--gray-dark); - --toobar-background: var(--black); + --button-color: var(--gray-200); + --button-active-color: var(--gray-500); + --toobar-background: var(--gray-900); } :host { @@ -107,7 +107,7 @@ flex-shrink: 0; background-color: var(--toobar-background); padding-top: 5px; - border-top: 1px solid var(--gray); + border-top: 1px solid var(--stroke); ion-slides { width: 240px; diff --git a/src/core/features/emulator/components/capture-media/capture-media.scss b/src/core/features/emulator/components/capture-media/capture-media.scss index 58abf90e7..57d6b0351 100644 --- a/src/core/features/emulator/components/capture-media/capture-media.scss +++ b/src/core/features/emulator/components/capture-media/capture-media.scss @@ -63,7 +63,7 @@ } ion-footer { - background-color: var(--gray); - border-top: 1px solid var(--gray-dark); + background-color: var(--gray-300); + border-top: 1px solid var(--gray-500); } } diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss index e93bebfff..a679d9d55 100644 --- a/src/core/features/grades/pages/course/course.scss +++ b/src/core/features/grades/pages/course/course.scss @@ -2,10 +2,10 @@ :host { --header-background: var(--white); - --odd-cell-background: var(--gray-lighter); + --odd-cell-background: var(--light); --even-cell-background: var(--white); - --odd-cell-hover: var(--gray-light); - --even-cell-hover: var(--gray-lighter); + --odd-cell-hover: var(--gray-200); + --even-cell-hover: var(--light); --icon-color: #999999; .odd { @@ -21,11 +21,11 @@ } :host-context(body.dark) { - --header-background: var(--black); - --odd-cell-background: var(--gray-darker); - --even-cell-background: var(--black); - --odd-cell-hover: var(--gray-dark); - --even-cell-hover: var(--gray-darker); + --header-background: var(--gray-900); + --odd-cell-background: var(--medium); + --even-cell-background: var(--gray-900); + --odd-cell-hover: var(--gray-500); + --even-cell-hover: var(--medium); --icon-color: #eeeeee; } diff --git a/src/core/features/h5p/components/h5p-player/h5p-player.scss b/src/core/features/h5p/components/h5p-player/h5p-player.scss index 6e1803220..1761f096a 100644 --- a/src/core/features/h5p/components/h5p-player/h5p-player.scss +++ b/src/core/features/h5p/components/h5p-player/h5p-player.scss @@ -1,5 +1,5 @@ :host { - --core-h5p-placeholder-bg-color: var(--gray); + --core-h5p-placeholder-bg-color: var(--gray-300); --core-h5p-placeholder-text-color: var(--ion-text-color); .core-h5p-placeholder { diff --git a/src/core/features/login/pages/site/site.scss b/src/core/features/login/pages/site/site.scss index dcec7cfc7..5320d6600 100644 --- a/src/core/features/login/pages/site/site.scss +++ b/src/core/features/login/pages/site/site.scss @@ -116,7 +116,7 @@ } .core-login-entered-site { - background-color: var(--gray-lighter); + background-color: var(--light); ion-thumbnail { box-shadow: 0 0 4px #ddd; } diff --git a/src/core/features/question/question.scss b/src/core/features/question/question.scss index 1dce88eb1..b37891d1d 100644 --- a/src/core/features/question/question.scss +++ b/src/core/features/question/question.scss @@ -26,7 +26,7 @@ line-height: 14px; color: var(--white); text-shadow: 0 -1px 0 rgba(0,0,0,0.25); - background-color: var(--gray-dark); + background-color: var(--gray-500); -webkit-border-radius: 3px; border-radius: 3px; diff --git a/src/core/features/search/components/search-box/search-box.scss b/src/core/features/search/components/search-box/search-box.scss index 4848d54b9..9649ae962 100644 --- a/src/core/features/search/components/search-box/search-box.scss +++ b/src/core/features/search/components/search-box/search-box.scss @@ -21,7 +21,7 @@ overflow-y: auto; .item:hover { - --background: var(--gray-lighter); + --background: var(--light); cursor: pointer; } } diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss index 90dc443cc..9951ed0ae 100644 --- a/src/core/features/sitehome/pages/index/index.scss +++ b/src/core/features/sitehome/pages/index/index.scss @@ -4,7 +4,7 @@ ion-item ion-icon { display: inline-block; border-radius: 4px; padding: 0.7rem; - background-color: $gray-lighter; + background-color: $gray-100; line-height: var(--size); --margin-end: 1rem; @include margin-horizontal(null, var(--margin-end)); diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index 02ba8bf71..562764e50 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -371,7 +371,7 @@ core-rich-text-editor .core-rte-editor { input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { height: 30px; display: inline-block; - border: 1px solid var(--gray-dark); + border: 1px solid var(--gray-500); background: var(--contrast-background); padding: 6px 8px; border-radius: 4px; @@ -582,11 +582,11 @@ core-rich-text-editor .core-rte-editor { .align-text-top { vertical-align: text-top !important; } // utilities/_border.scss - .border { border: 1px solid var(--gray-dark) !important; } - .border-top { border-top: 1px solid var(--gray-dark) !important; } - .border-right { border-right: 1px solid var(--gray-dark) !important; } - .border-bottom { border-bottom: 1px solid var(--gray-dark) !important; } - .border-left { border-left: 1px solid var(--gray-dark) !important; } + .border { border: 1px solid var(--gray-500) !important; } + .border-top { border-top: 1px solid var(--gray-500) !important; } + .border-right { border-right: 1px solid var(--gray-500) !important; } + .border-bottom { border-bottom: 1px solid var(--gray-500) !important; } + .border-left { border-left: 1px solid var(--gray-500) !important; } .border-0 { border: 0 !important; } .border-top-0 { border-top: 0 !important; } @@ -706,7 +706,7 @@ core-rich-text-editor .core-rte-editor { vertical-align: baseline; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; color: var(--white); - background-color: var(--gray-darker); + background-color: var(--medium); } .label-important { diff --git a/src/theme/components/rubrics.scss b/src/theme/components/rubrics.scss index 329ef82d9..1ab4c4b92 100644 --- a/src/theme/components/rubrics.scss +++ b/src/theme/components/rubrics.scss @@ -5,7 +5,7 @@ core-format-text { text-transform: uppercase; font-size: 60%; padding: 0.25em; - border: 1px solid var(--gray-light); + border: 1px solid var(--gray-200); } .gradingform_rubric_editform .status.ready { @@ -57,12 +57,12 @@ core-format-text { } .gradingform_rubric .criterion { - border: 1px solid var(--gray); + border: 1px solid var(--stroke); overflow: hidden; } .gradingform_rubric .criterion.even { - background-color: var(--gray-lighter); + background-color: var(--light); } .gradingform_rubric .criterion .description { @@ -83,7 +83,7 @@ core-format-text { } .gradingform_rubric .criterion .levels .level { - border-left: 1px solid var(--gray); + border-left: 1px solid var(--stroke); max-width: 150px; } @@ -92,12 +92,12 @@ core-format-text { } .gradingform_rubric .criterion .levels .level.last { - border-right: 1px solid var(--gray); + border-right: 1px solid var(--stroke); } .gradingform_rubric .plainvalue.empty { font-style: italic; - color: var(--gray-dark); + color: var(--gray-500); } .gradingform_rubric.editor .criterion .levels .level .delete { @@ -131,7 +131,7 @@ core-format-text { .gradingform_rubric .criterion .levels .level.checked { background-color: var(--green-light); - border: 1px solid var(--gray-darker); + border: 1px solid var(--medium); } .gradingform_rubric .options .optionsheading { @@ -160,12 +160,12 @@ core-format-text { .gradingform_rubric .criterion .description.error, .gradingform_rubric .criterion .levels .level .definition.error, .gradingform_rubric .criterion .levels .level .score.error { - background-color: var(--gray-lighter); + background-color: var(--light); } .gradingform_rubric-regrade { padding: 10px; - background-color: var(--gray-lighter); + background-color: var(--light); border: 1px solid var(--red-light); margin-bottom: 10px; } @@ -225,7 +225,7 @@ core-format-text { .gradingform_rubric .criterion .levels .level.checked { background-color: var(--green-light); border: none; - border-left: 1px solid var(--gray); + border-left: 1px solid var(--stroke); } .gradingform_rubric .criterion .levels .level .score { diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index 4e1d7e57a..09b789740 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -4,38 +4,46 @@ * Place here all global variables. */ -$black: #282828 !default; // Headings, standard text. -$gray-darker: #686566 !default; -$gray-dark: #9e9e9e !default; -$gray: #dddddd !default; -$gray-light: #e9e9e9 !default; // Background. -$gray-lighter: #f5f5f5 !default; -$white: #ffffff !default; // Background, reversed text. +$white: #ffffff !default; +$gray-100: #f8f9fa !default; // Old gray-lighter +$gray-200: #e9ecef !default; // Old gray-light +$gray-300: #dee2e6 !default; // Old gray // Stroke +$gray-400: #ced4da !default; +$gray-500: #8f959e !default; // Old gray-dark +$gray-600: #6a737b !default; // Old gray-darker +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #1d2125 !default; // Old black // Copy +$black: #000000 !default; -$blue: #0064d2 !default; // Link, background. -$blue-light: mix($blue, white, 20%) !default; // Background. +$blue: #0f6cbf !default; +$blue-light: mix($blue, white, 20%) !default; $blue-dark: darken($blue, 10%) !default; -$green: #5e8100 !default; // Accent. +$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: #cb3d4d !default; +$red: #ca3120 !default; $red-light: mix($red, white, 20%) !default; $red-dark: darken($red, 10%) !default; -$yellow: #fbad1a !default; // Accent (never text). +$yellow: #f0ad4e !default; $yellow-light: mix($yellow, white, 20%) !default; $yellow-dark: mix($yellow, black, 40%) !default; -$brand-color: #f98012 !default; +$brand-color: #ff7518 !default; -$text-color: $black !default; +$text-color: $gray-900 !default; $text-color-rgb: color-to-rgb-list($text-color) !default; $text-color-dark: $white !default; $text-color-dark-rgb: color-to-rgb-list($text-color-dark) !default; -$background-color: $gray-light !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-rgb: color-to-rgb-list($background-color-dark) !default; @@ -45,17 +53,21 @@ $ion-item-background-rgb: color-to-rgb-list($ion-item-background) !default; $ion-item-background-dark: mix(#ffffff, #000000, 20%) !default; // #333333 $ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default; -$primary: $brand-color !default; +$primary: $blue !default; +$secondary: $gray-400 !default; $danger: $red !default; $warning: $yellow !default; $success: $green !default; -$info: $blue !default; -$light: $gray-lighter !default; -$medium: $gray-light !default; -$dark: $black !default; +$info: $cyan !default; +$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, @@ -65,17 +77,19 @@ $colors: ( dark: $dark ) !default; -$primary-dark: $brand-color !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($blue, white, 40%) !default; +$info-dark: mix($cyan, white, 40%) !default; $light-dark: $dark !default; -$medium-dark: $gray-light !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, diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 204469c4c..855294dff 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -303,7 +303,7 @@ button, // Clear buttons will be black. ion-button.button-clear { - --ion-color-primary: var(--brand-color); + --ion-color-primary: var(--primary); } [role="button"], @@ -392,7 +392,7 @@ ion-alert .alert-message { } ion-alert .alert-wrapper button.alert-button { - color: var(--brand-color); + color: var(--primary); } // Ionic list. @@ -634,7 +634,7 @@ body.core-iframe-fullscreen ion-router-outlet { // Extra text colors. .text-gray { - color: var(--gray-dark); + color: var(--gray-500); } // Card styles @@ -688,7 +688,7 @@ img.large-avatar, margin-bottom: 10px; border-radius : 50%; padding: 4px; - border: 1px solid var(--gray); + border: 1px solid var(--stroke); background-color: transparent; } @@ -699,7 +699,7 @@ ion-avatar.large-avatar { ion-avatar ion-img, ion-avatar img { text-indent: -99999px; - background-color: var(--gray-light); + background-color: var(--gray-200); } // Wait to load before showing the image. @@ -707,8 +707,16 @@ img[core-external-content]:not([src]) { visibility: hidden; } -ion-card ion-item:only-child { - --inner-border-width: 0px; +ion-card { + border-width: var(--border-width); + border-style: var(--border-style); + border-color: var(--border-color); + box-shadow: var(--box-shadow); + border-radius: var(--border-radius); + + ion-item:only-child { + --inner-border-width: 0px; + } } .core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div { diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 8d1529b36..3a547dc07 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -6,28 +6,29 @@ */ :root body.dark { - // Enlighten the ionic shades. - --ion-color-step-0: #000000; - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - --ion-color-step-1000: #ffffff; + + // Ionic shades. + --ion-color-step-0: var(--black); + --ion-color-step-50: var(--gray-900); + --ion-color-step-100: var(--gray-900); + --ion-color-step-150: var(--gray-900); + --ion-color-step-200: var(--gray-800); + --ion-color-step-250: var(--gray-800); + --ion-color-step-300: var(--gray-700); + --ion-color-step-350: var(--gray-700); + --ion-color-step-400: var(--gray-600); + --ion-color-step-450: var(--gray-600); + --ion-color-step-500: var(--gray-500); + --ion-color-step-550: var(--gray-500); + --ion-color-step-600: var(--gray-400); + --ion-color-step-650: var(--gray-400); + --ion-color-step-700: var(--gray-300); + --ion-color-step-750: var(--gray-300); + --ion-color-step-800: var(--gray-200); + --ion-color-step-850: var(--gray-200); + --ion-color-step-900: var(--gray-100); + --ion-color-step-950: var(--gray-100); + --ion-color-step-1000: var(--white); --ion-background-color: #{$background-color-dark}; --ion-background-color-rgb: #{$background-color-dark-rgb}; @@ -37,7 +38,8 @@ --ion-text-color-rgb: #{$text-color-dark-rgb}; --subdued-text-color: #b4b4b4; - --primary: var(--brand-color); + --primary: #{$primary-dark}; + --secondary: #{$secondary-dark}; --success: #{$success-dark}; --danger: #{$danger-dark}; --warning: #{$warning-dark}; @@ -50,7 +52,7 @@ @include generate-color($color-name, $colors-dark); } - --ion-border-color: var(--ion-color-step-100); + --ion-border-color: var(--gray-900); --ion-card-color: var(--text-color); --ion-card-background: var(--ion-item-background); @@ -59,10 +61,12 @@ ion-content { --background: var(--ion-background-color); - --background-alternative: var(--black); + --background-alternative: var(--gray-900); } --core-bottom-tabs-badge-text-color: var(--brand-color-contrast); + --core-bottom-tabs-background: var(--gray-900); + --core-bottom-tabs-color: var(--medium); ion-action-sheet { .action-sheet-cancel { @@ -72,27 +76,27 @@ --core-link-color: var(--blue-light); - --core-header-toolbar-background: var(--black); + --core-header-toolbar-background: var(--gray-900); --core-header-toolbar-color: var(--white); - --core-tabs-background: var(--ion-color-step-200); + --core-tabs-background: var(--gray-800); --core-tab-background: var(--core-tabs-background); --core-tab-color: var(--subdued-text-color); - --core-tab-border-color: var(--gray-light); + --core-tab-border-color: var(--gray-200); --core-tab-color-active: var(--dark); - --core-progressbar-text-color: var(--gray-lighter); + --core-progressbar-text-color: var(--light); --ion-item-background: #{$ion-item-background-dark}; --ion-item-detail-icon-color: var(--white); - --item-divider-background: var(--ion-color-step-200); + --item-divider-background: var(--gray-800); --item-divider-color: var(--text-color); - --spacer-background: var(--ion-color-step-0); + --spacer-background: var(--gray-100); --core-combobox-background: var(--ion-item-background); --core-combobox-color: var(--white); - --core-login-background: var(--black); + --core-login-background: var(--gray-900); --core-login-text-color: var(--white); --core-login-input-background: var(--core-login-background); --core-login-input-color: var(--core-login-text-color); @@ -104,7 +108,7 @@ --core-question-feedback-color: var(--yellow-light); --core-question-feedback-color-bg: var(--yellow-dark); --core-question-warning-color: var(--red); - --core-question-saved-color-bg: var(--gray-dark); + --core-question-saved-color-bg: var(--gray-500); --core-question-state-correct-color: var(--green-dark); --core-question-state-partial-color: var(--yellow-dark); @@ -114,20 +118,20 @@ --core-question-feedback-color: var(--yellow-light); --core-question-feedback-background-color: var(--yellow-dark); - --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light); - --core-dd-question-border: var(--gray-light); + --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-200); + --core-dd-question-border: var(--gray-200); - --core-send-message-input-background: var(--black); + --core-send-message-input-background: var(--gray-900); --core-send-message-input-color: var(--white); - --addon-messages-message-bg: var(--ion-color-step-200); - --addon-messages-message-activated-bg: var(--ion-color-step-300); + --addon-messages-message-bg: var(--gray-800); + --addon-messages-message-activated-bg: var(--gray-700); --addon-messages-message-note-text: var(--subdued-text-color); - --addon-messages-message-mine-bg: var(--ion-color-step-350); - --addon-messages-message-mine-activated-bg: var(--ion-color-step-450); + --addon-messages-message-mine-bg: var(--gray-700); + --addon-messages-message-mine-activated-bg: var(--gray-600); --addon-messages-discussion-badge: var(--primary); --addon-messages-discussion-badge-text: var(--dark); - --addon-forum-border-color: var(--gray-dark); - --addon-forum-highlight-color: var(--gray-darker); + --addon-forum-border-color: var(--gray-500); + --addon-forum-highlight-color: var(--medium); } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 93f62f078..c7840b8cb 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -8,13 +8,40 @@ :root { // Color palette - --black: #{$black}; // Headings, standard text. - --gray-darker: #{$gray-darker}; // Text (emphasis-detail), placeholder, background. - --gray-dark: #{$gray-dark}; // Borders (never text). - --gray: #{$gray}; - --gray-light: #{$gray-light}; // Background. - --gray-lighter: #{$gray-lighter}; - --white: #{$white}; // Background, reversed text. + --black: #{$black}; + --gray-900: #{$gray-900}; + --gray-800: #{$gray-800}; + --gray-700: #{$gray-700}; + --gray-600: #{$gray-600}; + --gray-500: #{$gray-500}; + --gray-400: #{$gray-400}; + --gray-300: #{$gray-300}; + --gray-200: #{$gray-200}; + --gray-100: #{$gray-100}; + --white: #{$white}; + + // Ionic shades. + --ion-color-step-0: var(--white); + --ion-color-step-50: var(--gray-100); + --ion-color-step-100: var(--gray-100); + --ion-color-step-150: var(--gray-100); + --ion-color-step-200: var(--gray-200); + --ion-color-step-250: var(--gray-200); + --ion-color-step-300: var(--gray-300); + --ion-color-step-350: var(--gray-300); + --ion-color-step-400: var(--gray-400); + --ion-color-step-450: var(--gray-400); + --ion-color-step-500: var(--gray-500); + --ion-color-step-550: var(--gray-500); + --ion-color-step-600: var(--gray-600); + --ion-color-step-650: var(--gray-600); + --ion-color-step-700: var(--gray-700); + --ion-color-step-750: var(--gray-700); + --ion-color-step-800: var(--gray-800); + --ion-color-step-850: var(--gray-800); + --ion-color-step-900: var(--gray-900); + --ion-color-step-950: var(--gray-900); + --ion-color-step-1000: var(--black); --blue: #{$blue}; --blue-light: #{$blue-light}; @@ -44,7 +71,8 @@ --core-online-color: #5cb85c; // Named Color Variables - --primary: var(--brand-color); + --primary: #{$primary}; + --secondary: #{$secondary}; --success: #{$success}; --danger: #{$danger}; --warning: #{$warning}; @@ -53,6 +81,8 @@ --dark: #{$dark}; --medium: #{$medium}; + --stroke: #{$stroke}; + @each $color-name, $value in $colors { @include generate-color($color-name, $colors); } @@ -75,6 +105,13 @@ --subdued-text-color: #595959; --ion-card-color: var(--text-color); + ion-card { + --border-width: 1px; + --border-style: solid; + --border-color: var(--stroke); + --box-shadow: none; + --border-radius: 8px; + } --text-hightlight-background-color: #{$core-text-hightlight-background-color}; @@ -82,11 +119,11 @@ ion-content { --background: var(--ion-background-color); - --background-alternative: var(--gray-lighter); + --background-alternative: var(--light); } - --core-bottom-tabs-background: var(--black); - --core-bottom-tabs-color: var(--gray-lighter); + --core-bottom-tabs-background: var(--white); + --core-bottom-tabs-color: var(--medium); --core-bottom-tabs-color-selected: var(--brand-color); --core-bottom-tabs-background-selected: transparent; --core-bottom-tabs-badge-color: var(--brand-color); @@ -108,7 +145,7 @@ --core-header-toolbar-background: var(--white); --core-header-toolbar-border-width: 3px; --core-header-toolbar-border-color: var(--brand-color); - --core-header-toolbar-color: var(--black); + --core-header-toolbar-color: var(--gray-900); --core-header-toolbar-height: 56px; html.ios { --core-header-toolbar-height: 54px; @@ -165,7 +202,7 @@ --core-tabs-background: var(--white); --core-tab-background: var(--core-tabs-background); --core-tab-color: var(--subdued-text-color); - --core-tab-border-color: var(--gray); + --core-tab-border-color: var(--stroke); --core-tab-color-active: var(--dark); --core-tab-border-color-active: var(--brand-color); --core-tab-font-weight-active: normal; @@ -188,8 +225,8 @@ --core-progressbar-height: 8px; --core-progressbar-color: var(--brand-color); - --core-progressbar-text-color: var(--gray-darker); - --core-progressbar-background: var(--gray-lighter); + --core-progressbar-text-color: var(--medium); + --core-progressbar-background: var(--light); core-progress-bar { --height: var(--core-progressbar-height); --color: var(--core-progressbar-color); @@ -198,7 +235,7 @@ } --ion-item-background: #{$ion-item-background}; - --ion-item-detail-icon-color: var(--gray-darker); + --ion-item-detail-icon-color: var(--medium); --ion-item-detail-icon-font-size: 20px; --ion-item-detail-icon-opacity: 1; ion-item { @@ -208,7 +245,7 @@ } --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px); - --item-divider-background: var(--gray-lighter); + --item-divider-background: var(--light); --item-divider-color: var(--text-color); ion-item-divider, ion-item.divider { --background: var(--item-divider-background); @@ -236,7 +273,7 @@ } --core-combobox-background: var(--ion-item-background); - --core-combobox-color: var(--black); + --core-combobox-color: var(--gray-900); --core-combobox-border-color: var(--primary); --core-combobox-border-width: 3px; --core-combobox-border-all-width: 0 0 var(--core-combobox-border-width) 0; @@ -247,17 +284,17 @@ --selected-item-border-width: 5px; --core-login-background: var(--white); - --core-login-text-color: var(--black); + --core-login-text-color: var(--gray-900); --core-login-input-background: var(--white); - --core-login-input-color: var(--black); + --core-login-input-color: var(--gray-900); --core-star-color: var(--brand-color); --core-large-avatar-size: 90px; --core-avatar-size: 44px; - --core-send-message-input-background: var(--gray-light); - --core-send-message-input-color: var(--black); + --core-send-message-input-background: var(--gray-200); + --core-send-message-input-color: var(--gray-900); --core-courseimage-on-course-height: 150px; @@ -272,21 +309,21 @@ --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(--gray); + --addon-calendar-border-color: var(--stroke); --addon-messages-message-bg: var(--white); - --addon-messages-message-activated-bg: var(--gray-light); - --addon-messages-message-note-text: var(--gray-dark); + --addon-messages-message-activated-bg: var(--gray-200); + --addon-messages-message-note-text: var(--gray-500); --addon-messages-message-note-font-size: 75%; - --addon-messages-message-mine-bg: var(--gray-light); - --addon-messages-message-mine-activated-bg: var(--gray); + --addon-messages-message-mine-bg: var(--gray-200); + --addon-messages-message-mine-activated-bg: var(--gray-300); --addon-messages-avatar-size: 30px; --addon-messages-discussion-badge: var(--primary); --addon-messages-discussion-badge-text: var(--white); --addon-forum-avatar-size: var(--core-avatar-size); - --addon-forum-border-color: var(--gray); - --addon-forum-highlight-color: var(--gray-lighter); + --addon-forum-border-color: var(--stroke); + --addon-forum-highlight-color: var(--light); --drop-shadow: 0, 0, 0, 0.18; @@ -300,7 +337,7 @@ --core-question-feedback-color: var(--yellow-dark); --core-question-feedback-color-bg: var(--yellow-light); --core-question-warning-color: var(--red); - --core-question-saved-color-bg: var(--gray-light); + --core-question-saved-color-bg: var(--gray-200); --core-question-state-correct-color: var(--green-light); --core-question-state-partial-color: var(--yellow-light); @@ -310,9 +347,9 @@ --core-question-feedback-color: var(--yellow-dark); --core-question-feedback-background-color: var(--yellow-light); - --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark); + --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-500); --core-dd-question-radius: 10px; - --core-dd-question-border: var(--gray-darker); + --core-dd-question-border: var(--medium); @for $i from 0 to length($core-course-image-background) { --core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)};