From 03eaed38ab997cc1026abda7bdcaa0df2f7a6cd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 16 Jun 2021 18:00:21 +0200 Subject: [PATCH] MOBILE-3320 style: Reduce usage of scss variables --- .../component/ddimageortext.scss | 6 +- src/addons/qtype/ddwtos/component/ddwtos.scss | 4 +- src/core/components/tabs/tabs.scss | 2 +- src/core/components/timer/timer.scss | 4 +- .../course/components/format/format.scss | 2 +- .../course-list-item/course-list-item.scss | 2 +- .../course-progress/course-progress.scss | 2 +- .../features/mainmenu/pages/home/home.scss | 8 +- .../features/mainmenu/pages/menu/menu.scss | 2 +- src/theme/components/format-text.scss | 60 ++- src/theme/globals.mixins.ionic.scss | 55 +-- src/theme/globals.variables.scss | 392 +++--------------- src/theme/theme.base.scss | 49 +-- src/theme/theme.dark.scss | 147 +++---- src/theme/theme.light.scss | 207 ++++----- 15 files changed, 301 insertions(+), 641 deletions(-) diff --git a/src/addons/qtype/ddimageortext/component/ddimageortext.scss b/src/addons/qtype/ddimageortext/component/ddimageortext.scss index f39426055..0430a5d3e 100644 --- a/src/addons/qtype/ddimageortext/component/ddimageortext.scss +++ b/src/addons/qtype/ddimageortext/component/ddimageortext.scss @@ -3,7 +3,7 @@ // Style ddimageortext content a bit. Almost all these styles are copied from Moodle. :host { --ddimageortext-border-drop: var(--gray-darker); - --ddimageortext-draghome-background: nth($core-dd-question-colors, 2); + --ddimageortext-draghome-background: var(--core-dd-question-color-2); } .addon-qtype-ddimageortext-container { @@ -49,8 +49,8 @@ core-format-text ::ng-deep { @for $i from 0 to length($core-dd-question-colors) { .group#{$i + 1} { - background: nth($core-dd-question-colors, $i + 1); - color: get_contrast_color(nth($core-dd-question-colors, $i + 1)); + background: var(--core-dd-question-color-#{$i + 1}); + color: var(--core-dd-question-color-#{$i + 1}-contrast); } } diff --git a/src/addons/qtype/ddwtos/component/ddwtos.scss b/src/addons/qtype/ddwtos/component/ddwtos.scss index bc6bc852b..9c7bed139 100644 --- a/src/addons/qtype/ddwtos/component/ddwtos.scss +++ b/src/addons/qtype/ddwtos/component/ddwtos.scss @@ -80,8 +80,8 @@ core-format-text ::ng-deep, .drags ::ng-deep { @for $i from 0 to length($core-dd-question-colors) { .group#{$i + 1} { - background: nth($core-dd-question-colors, $i + 1); - color: get_contrast_color(nth($core-dd-question-colors, $i + 1)); + background: var(--core-dd-question-color-#{$i + 1}); + color: var(--core-dd-question-color-#{$i + 1}-contrast); } } diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss index 64368d56d..2c383ab5b 100644 --- a/src/core/components/tabs/tabs.scss +++ b/src/core/components/tabs/tabs.scss @@ -3,7 +3,7 @@ :host { --tabs-background: var(--core-tabs-background); --tabs-color: var(--core-tab-color); - --height: #{$core-tabs-height}; + --height: var(--core-tabs-height); height: 100%; display: flex; flex-direction: column; diff --git a/src/core/components/timer/timer.scss b/src/core/components/timer/timer.scss index 11da83db4..077ea389d 100644 --- a/src/core/components/timer/timer.scss +++ b/src/core/components/timer/timer.scss @@ -1,4 +1,6 @@ -$core-timer-warn-color: #cb3d4d !default; +@import "~theme/globals"; + +$core-timer-warn-color: $red !default; $core-timer-iterations: 15 !default; :host { diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss index 2d6ee98e1..46ca0f415 100644 --- a/src/core/features/course/components/format/format.scss +++ b/src/core/features/course/components/format/format.scss @@ -17,7 +17,7 @@ .core-course-thumb { display: none; - height: #{$core-courseimage-on-course-height}; + height: var(--core-courseimage-on-course-height); width: 100%; overflow: hidden; cursor: pointer; 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 5d2625e0e..4807e1b59 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 @@ -14,7 +14,7 @@ @for $i from 0 to length($core-course-image-background) { ion-icon[course-color="#{$i}"] { - color: nth($core-course-image-background, $i + 1); + color: var(--core-course-color-#{$i}); } } diff --git a/src/core/features/courses/components/course-progress/course-progress.scss b/src/core/features/courses/components/course-progress/course-progress.scss index 4fee81ed6..cd25112ae 100644 --- a/src/core/features/courses/components/course-progress/course-progress.scss +++ b/src/core/features/courses/components/course-progress/course-progress.scss @@ -13,7 +13,7 @@ @for $i from 0 to length($core-course-image-background) { &[course-color="#{$i}"] .core-course-thumb { - background: nth($core-course-image-background, $i + 1); + background: var(--core-course-color-#{$i}); } } diff --git a/src/core/features/mainmenu/pages/home/home.scss b/src/core/features/mainmenu/pages/home/home.scss index 7c7901130..b8ba15df9 100644 --- a/src/core/features/mainmenu/pages/home/home.scss +++ b/src/core/features/mainmenu/pages/home/home.scss @@ -1,12 +1,8 @@ @import "~theme/globals"; @if ($core-dashboard-logo) { - .in-toolbar.md h1 .core-header-logo { - max-height: $toolbar-md-height - 24; - } - - .in-toolbar.ios h1 .core-header-logo { - max-height: $toolbar-ios-height - 24; + .in-toolbar h1 .core-header-logo { + max-height: calc(var(--core-header-toolbar-height) - 24px); } .in-toolbar h1 core-format-text { diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss index 48bde4dd0..1aea5ca86 100644 --- a/src/core/features/mainmenu/pages/menu/menu.scss +++ b/src/core/features/mainmenu/pages/menu/menu.scss @@ -1,7 +1,7 @@ @import "~theme/globals"; :host{ - --menutabbar-size: #{$bottom-tabs-size}; + --menutabbar-size: var(--bottom-tabs-size); ion-tab-bar { height: var(--menutabbar-size); diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index fd498c32b..3c2905e80 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -3,15 +3,14 @@ @import "~theme/globals"; core-format-text { - --core-format-text-background: var(--background, #{$ion-item-background}); - --core-format-text-background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background)}); + --core-format-text-background: var(--background, var(--ion-item-background)); + --core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-rgb}); --core-format-text-viewer-icon-background: rgba(255, 255, 255, .5); --core-format-text-loader-shine: 251,251,251; } body.dark core-format-text { - --core-format-text-background: var(--background, #{$ion-item-background-dark}); - --core-format-text-background-gradient-rgb: var(--background-rgb, #{color-to-rgb-list($ion-item-background-dark)}); + --core-format-text-background-gradient-rgb: var(--background-rgb, #{$ion-item-background-dark-rgb}); --core-format-text-viewer-icon-background: rgba(0, 0, 0, .5); --core-format-text-loader-shine: 90,90,90; } @@ -367,7 +366,7 @@ core-rich-text-editor .core-rte-editor { input[type=checkbox] { position: relative; - --color: var(--brand-contrast-color); + --color: var(--brand-color-contrast); --color-checked: var(--color); width: var(--size); @@ -519,7 +518,7 @@ core-rich-text-editor .core-rte-editor { // Headings for larger alerts .alert-heading { - // Specified to prevent conflicts of changing $headings-color + // Specified to prevent conflicts of changing headings-color color: inherit; } @@ -528,20 +527,20 @@ core-rich-text-editor .core-rte-editor { font-weight: 400; } - @each $color-name, $value in $colors { - $base: map-get($value, base); + @each $color-name, $base in $colors { .alert-#{$color-name} { - color: $base; - border-color: $base; - background-color: mix($base, white, 20%); + --color-base: var(--ion-color-#{$color-name}); + color: var(--color-base); + border-color: var(--color-base); + background-color: var(--ion-color-#{$color-name}-tint); .alert-link { - color: darken($base, 10%); + color: var(--ion-color-#{$color-name}-shade); } } .alert-#{$color-name} p { - color: $base; + color: var(--color-base); } } @@ -554,11 +553,11 @@ core-rich-text-editor .core-rte-editor { .align-text-top { vertical-align: text-top !important; } // utilities/_border.scss - .border { border: 1px solid $gray-dark !important; } - .border-top { border-top: 1px solid $gray-dark !important; } - .border-right { border-right: 1px solid $gray-dark !important; } - .border-bottom { border-bottom: 1px solid $gray-dark !important; } - .border-left { border-left: 1px solid $gray-dark !important; } + .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-0 { border: 0 !important; } .border-top-0 { border-top: 0 !important; } @@ -566,11 +565,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, $value in $colors { - $base: map-get($value, base); - + @each $color-name, $base in $colors { .border-#{$color-name} { - border-color: $base !important; + border-color: var(--ion-color-#{$color-name}) !important; } } @@ -652,18 +649,16 @@ core-rich-text-editor .core-rte-editor { .font-italic { font-style: italic !important; } .text-white { color: var(--white) !important; } - @each $color-name, $value in $colors { - $base: map-get($value, base); - $contrast: map-get($value, contrast); + @each $color-name, $base in $colors { .text-#{$color-name} { - color: $base; + color: var(--ion-color-#{$color-name}); } } .text-body { color: var(--ion-text-color) !important; } .text-muted { color: var(--subdued-text-color) !important; } - .text-black-50 { color: rgba($black, .5) !important; } - .text-white-50 { color: rgba($white, .5) !important; } + .text-black-50 { color: rgba(0, 0, 0, .5) !important; } + .text-white-50 { color: rgba(255, 255, 255, .5) !important; } .text-decoration-none { text-decoration: none !important; } .text-break { word-break: break-word !important; // Deprecated, but avoids issues with flex containers @@ -690,13 +685,10 @@ core-rich-text-editor .core-rte-editor { background-color: var(--ion-color-danger); } - @each $color-name, $value in $colors { - $base: map-get($value, base); - $contrast: map-get($value, contrast); - + @each $color-name, $base in $colors { .label-#{$color-name} { - color: $contrast; - background-color: $base; + color: var(--ion-color-#{$color-name}-contrast); + background-color: var(--ion-color-#{$color-name}); } } } diff --git a/src/theme/globals.mixins.ionic.scss b/src/theme/globals.mixins.ionic.scss index c5333ec8a..351f1080f 100644 --- a/src/theme/globals.mixins.ionic.scss +++ b/src/theme/globals.mixins.ionic.scss @@ -46,34 +46,6 @@ } } -// Gets the specific color's css variable from the name and variation. Alpha/rgb are optional. -// -------------------------------------------------------------------------------------------- -// Example usage: -// ion-color(primary, base) => var(--ion-color-primary, #3880ff) -// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast) -// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5) -// -------------------------------------------------------------------------------------------- -@function ion-color($name, $variation, $alpha: null, $rgb: null) { - $values: map-get($colors, $name); - $value: map-get($values, $variation); - $variable: --ion-color-#{$name}-#{$variation}; - - @if ($variation == base) { - $variable: --ion-color-#{$name}; - } - - @if ($alpha) { - $value: color-to-rgb-list($value); - @return rgba(var(#{$variable}-rgb, $value), $alpha); - } - @if ($rgb) { - $value: color-to-rgb-list($value); - $variable: #{$variable}-rgb; - } - - @return var(#{$variable}, $value); -} - // Mixes a color with black to create its shade. // -------------------------------------------------------------------------------------------- @function get-color-shade($color) { @@ -99,15 +71,14 @@ // colors map @mixin generate-color($color-name, $colors) { - $value: map-get($colors, $color-name); + $base: map-get($colors, $color-name); - $base: map-get($value, base); - $contrast: map-get($value, contrast); - $shade: map-get($value, shade); - $tint: map-get($value, tint); + $contrast: get_contrast_color($base); + $shade: get-color-shade($base); + $tint: get-color-tint($base); - --ion-color-#{$color-name}: #{$base}; - --ion-color-#{$color-name}-base: #{$base}; + --ion-color-#{$color-name}: var(--#{$color-name}, #{$base}); + --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)}; @@ -115,13 +86,13 @@ --ion-color-#{$color-name}-tint: #{$tint}; .ion-color-#{$color-name} { - --ion-color: #{$base}; - --ion-color-base: #{$base}; - --ion-color-rgb: #{color-to-rgb-list($base)}; - --ion-color-contrast: #{$contrast}; - --ion-color-contrast-rgb: #{color-to-rgb-list($contrast)}; - --ion-color-shade: #{$shade}; - --ion-color-tint: #{$tint}; + --ion-color: var(--ion-color-#{$color-name}); + --ion-color-base: var(--ion-color-#{$color-name}-base); + --ion-color-rgb: var(--ion-color-#{$color-name}-rgb); + --ion-color-contrast: var(--ion-color-#{$color-name}-contrast); + --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); } } diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index ae2d7c558..e5212d19a 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -4,98 +4,49 @@ * Place here all global variables. */ -/* - * App colors - */ -$shade-0: #ffffff !default; -$shade-100: #000000 !default; -$shade-5: mix($shade-100, $shade-0, 5%) !default; // #f2f2f2 -$shade-10: mix($shade-100, $shade-0, 10%) !default; // #e6e6e6 -$shade-15: mix($shade-100, $shade-0, 15%) !default; // #d9d9d9 -$shade-20: mix($shade-100, $shade-0, 20%) !default; // #cccccc -$shade-25: mix($shade-100, $shade-0, 25%) !default; // #bfbfbf -$shade-30: mix($shade-100, $shade-0, 30%) !default; // #b3b3b3 -$shade-35: mix($shade-100, $shade-0, 35%) !default; // #a6a6a6 -$shade-40: mix($shade-100, $shade-0, 40%) !default; // #999999 -$shade-45: mix($shade-100, $shade-0, 45%) !default; // #8c8c8c -$shade-50: mix($shade-100, $shade-0, 50%) !default; // #808080 -$shade-55: mix($shade-100, $shade-0, 55%) !default; // #737373 -$shade-60: mix($shade-100, $shade-0, 60%) !default; // #666666 -$shade-65: mix($shade-100, $shade-0, 65%) !default; // #595959 -$shade-70: mix($shade-100, $shade-0, 70%) !default; // #4d4d4d -$shade-75: mix($shade-100, $shade-0, 75%) !default; // #404040 -$shade-80: mix($shade-100, $shade-0, 80%) !default; // #333333 -$shade-85: mix($shade-100, $shade-0, 85%) !default; // #262626 -$shade-90: mix($shade-100, $shade-0, 90%) !default; // #1a1a1a -$shade-95: mix($shade-100, $shade-0, 95%) !default; // #0d0d0d - $black: #282828 !default; // Headings, standard text. -$gray-darker: #686566 !default; // Text (emphasis-detail), placeholder, background. -$gray-dark: #9e9e9e !default; // Borders (never text). +$gray-darker: #686566 !default; +$gray-dark: #9e9e9e !default; $gray: #dddddd !default; $gray-light: #e9e9e9 !default; // Background. $gray-lighter: #f5f5f5 !default; -$white: $shade-0 !default; // Background, reversed text. - +$white: #ffffff !default; // Background, reversed text. $blue: #0064d2 !default; // Link, background. -$turquoise: #007982 !default; // Accent. -$green: #5e8100 !default; // Accent. -$red: #cb3d4d !default; -$orange: #f98012 !default; // Accent (never text). -$yellow: #fbad1a !default; // Accent (never text). -$purple: #8e24aa !default; // Accent (never text). - $blue-light: mix($blue, white, 20%) !default; // Background. $blue-dark: darken($blue, 10%) !default; -$turquoise-light: mix($turquoise, white, 20%) !default; // Background. -$turquoise-dark: darken($turquoise, 10%) !default; - +$green: #5e8100 !default; // Accent. $green-light: mix($green, white, 20%) !default; $green-dark: darken($green, 10%) !default; +$red: #cb3d4d !default; $red-light: mix($red, white, 20%) !default; $red-dark: darken($red, 10%) !default; -$orange-light: lighten($orange, 10%) !default; - +$yellow: #fbad1a !default; // Accent (never text). $yellow-light: mix($yellow, white, 20%) !default; $yellow-dark: mix($yellow, black, 40%) !default; -$brand-color: $orange !default; +$brand-color: #f98012 !default; $text-color: $black !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; -$brand-contrast-color: $text-color !default; // Used in radio and other controls where brand color needs contrast. -$brand-contrast-color-dark: $text-color-dark !default; // Used in radio and other controls where brand color needs contrast - -$link-color: $blue !default; -$link-color-dark: $blue-light !default; -$background-color: $gray-light !default; -$background-color-dark: $shade-90 !default; -$subdued-text-color: #595959 !default; -$subdued-text-color-dark: #b4b4b4 !default; +$background-color: $gray-light !default; +$background-color-rgb: color-to-rgb-list($background-color) !default; +$background-color-dark: mix(#ffffff, #000000, 90%) !default; // #1a1a1a +$background-color-dark-rgb: color-to-rgb-list($background-color-dark) !default; $ion-item-background: $white !default; -$ion-item-background-dark: $shade-80 !default; -$ion-item-divider-background: $gray-lighter !default; -$ion-item-divider-color: $text-color !default; -$core-spacer-background: $ion-item-divider-background !default; -$ion-item-divider-background-dark: $shade-75 !default; -$ion-item-divider-color-dark: $text-color-dark !default; -$core-spacer-background-dark: $shade-100 !default; - -$ion-placeholder-color: $subdued-text-color; -$ion-placeholder-color-dark: $subdued-text-color-dark; -$color: #d0c9b9; -$color: #fcf5e3; -$core-online-color: #5cb85c !default; +$ion-item-background-rgb: color-to-rgb-list($ion-item-background) !default; +$ion-item-background-dark: mix(#ffffff, #000000, 80%) !default; // #333333 +$ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default; $primary: $brand-color !default; $secondary: $blue !default; -$tertiary: $turquoise !default; $danger: $red !default; $warning: $yellow !default; $success: $green !default; @@ -105,71 +56,19 @@ $medium: $gray-light !default; $dark: $black !default; $colors: ( - primary: ( - base: $primary, - contrast: get_contrast_color($primary), - shade: get-color-shade($primary), - tint: get-color-tint($primary) - ), - secondary: ( - base: $secondary, - contrast: get_contrast_color($secondary), - shade: get-color-shade($secondary), - tint: get-color-tint($secondary) - ), - tertiary: ( - base: $tertiary, - contrast: get_contrast_color($tertiary), - shade: get-color-shade($tertiary), - tint: get-color-tint($tertiary) - ), - success: ( - base: $success, - contrast: get_contrast_color($success), - shade: get-color-shade($success), - tint: get-color-tint($success) - ), - warning: ( - base: $warning, - contrast: get_contrast_color($warning), - shade: get-color-shade($warning), - tint: get-color-tint($warning) - ), - danger: ( - base: $danger, - contrast: get_contrast_color($danger), - shade: get-color-shade($danger), - tint: get-color-tint($danger) - ), - info: ( - base: $info, - contrast: get_contrast_color($info), - shade: get-color-shade($info), - tint: get-color-tint($info) - ), - light: ( - base: $light, - contrast: get_contrast_color($light), - shade: get-color-shade($light), - tint: get-color-tint($light) - ), - medium: ( - base: $medium, - contrast: get_contrast_color($medium), - shade: get-color-shade($medium), - tint: get-color-tint($medium) - ), - dark: ( - base: $dark, - contrast: get_contrast_color($dark), - shade: get-color-shade($dark), - tint: get-color-tint($dark) - ) + primary: $primary, + secondary: $secondary, + success: $success, + warning: $warning, + danger: $danger, + info: $info, + light: $light, + medium: $medium, + dark: $dark ) !default; $primary-dark: $brand-color !default; $secondary-dark: mix($blue, white, 40%) !default; -$tertiary-dark: mix($turquoise, white, 40%) !default; $danger-dark: mix($red, white, 40%) !default; $warning-dark: mix($yellow, white, 40%) !default; $success-dark: mix($green, white, 40%) !default; @@ -178,75 +77,19 @@ $light-dark: $dark !default; $medium-dark: $gray-light !default; $dark-dark: $light !default; -// Just swipe light and dark. $colors-dark: ( - primary: ( - base: $primary-dark, - contrast: get_contrast_color($primary-dark), - shade: get-color-shade($primary-dark), - tint: get-color-tint($primary-dark) - ), - secondary: ( - base: $secondary-dark, - contrast: get_contrast_color($secondary-dark), - shade: get-color-shade($secondary-dark), - tint: get-color-tint($secondary-dark) - ), - tertiary: ( - base: $tertiary-dark, - contrast: get_contrast_color($tertiary-dark), - shade: get-color-shade($tertiary-dark), - tint: get-color-tint($tertiary-dark) - ), - success: ( - base: $success-dark, - contrast: get_contrast_color($success-dark), - shade: get-color-shade($success-dark), - tint: get-color-tint($success-dark) - ), - warning: ( - base: $warning-dark, - contrast: get_contrast_color($warning-dark), - shade: get-color-shade($warning-dark), - tint: get-color-tint($warning-dark) - ), - danger: ( - base: $danger-dark, - contrast: get_contrast_color($danger-dark), - shade: get-color-shade($danger-dark), - tint: get-color-tint($danger-dark) - ), - info: ( - base: $info-dark, - contrast: get_contrast_color($info-dark), - shade: get-color-shade($info-dark), - tint: get-color-tint($info-dark) - ), - light: ( - base: $light-dark, - contrast: get_contrast_color($light-dark), - shade: get-color-shade($light-dark), - tint: get-color-tint($light-dark) - ), - medium: ( - base: $medium-dark, - contrast: get_contrast_color($medium-dark), - shade: get-color-shade($medium-dark), - tint: get-color-tint($medium-dark) - ), - dark: ( - base: $dark-dark, - contrast: get_contrast_color($dark-dark), - shade: get-color-shade($dark-dark), - tint: get-color-tint($dark-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; -$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default; - -$core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default; - -/* +/** * Layout Breakpoints * * https://ionicframework.com/docs/layout/grid#default-breakpoints @@ -255,122 +98,18 @@ $core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, // The minimum dimensions at which your layout will change, // adapting to different screen sizes, for use in media queries $screen-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - tablet: 992px, - xl: 1200px + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + tablet: 992px, + xl: 1200px ) !default; -$breakpoint-tablet: map-get($screen-breakpoints, tablet), !default; - -/* - * Z-indexes. - * - * https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.globals.scss - */ - -$z-index-overlay: 1001; -$z-index-overlay-wrapper: 10; - -// Top header bar. -$toolbar-background: $white !default; -$toolbar-background-dark: $black !default; -$toolbar-border-color: $brand-color !default; -$toolbar-border-color-dark: $toolbar-border-color !default; -$toolbar-color: get_contrast_color($toolbar-background) !default; -$toolbar-color-dark: get_contrast_color($toolbar-background-dark) !default; -$toolbar-border-width: 3px !default; -$toolbar-button-image-size: 44px !default; -$toolbar-md-height: 56px !default; -$toolbar-ios-height: 54px !default; - -// Bottom tab bar. -$bottom-tabs-background: $black !default; -$bottom-tabs-background-dark: $black !default; -$bottom-tabs-color: $gray-lighter !default; -$bottom-tabs-color-dark: $gray-lighter !default; -$bottom-tabs-color-selected: $primary !default; -$bottom-tabs-color-selected-dark: $primary !default; -$bottom-tabs-badge-color: $primary !default; -$bottom-tabs-badge-text-color: get_contrast_color($bottom-tabs-badge-color) !default; -$bottom-tabs-badge-color-dark: $primary !default; -$bottom-tabs-badge-text-color-dark: get_contrast_color($bottom-tabs-badge-color-dark) !default; -$bottom-tabs-size: 56px !default; - +$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default; +$core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default; $core-text-hightlight-background-color: lighten($blue, 40%) !default; -$core-tabs-background: $white !default; -$core-tab-background: $core-tabs-background !default; -$core-tab-color: $subdued-text-color !default; -$core-tab-color-active: $dark !default; -$core-tab-font-weight-active: normal !default; -$core-tab-border-color: $gray !default; -$core-tab-border-color-active: $primary !default; -$core-tabs-height: 56px !default; - -$core-tabs-background-dark: $shade-75 !default; -$core-tab-background-dark: $core-tabs-background-dark !default; -$core-tab-color-dark: $subdued-text-color-dark !default; -$core-tab-color-active-dark: $dark-dark !default; -$core-tab-border-color-dark: $gray-light !default; -$core-tab-border-color-active-dark: $core-tab-border-color-active !default; - -$core-progressbar-color: $primary !default; -$core-progressbar-color-dark: $primary !default; -$core-progressbar-text-color: $gray-darker !default; -$core-progressbar-text-color-dark: $gray-lighter !default; -$core-progressbar-background: $gray-lighter !default; -$core-progressbar-height: 8px !default; - -$core-side-blocks-max-width: 30% !default; -$core-side-blocks-min-width: 280px !default; - -$core-combobox-color: $black !default; -$core-combobox-background: $ion-item-background !default; -$core-combobox-color-dark: $white !default; -$core-combobox-background-dark: $ion-item-background-dark !default; -$core-combobox-border-color: $primary !default; -$core-combobox-border-color-dark: $primary-dark !default; -$core-combobox-border-width: 3px !default; - -$core-selected-item-color: $primary !default; -$core-selected-item-color-dark: $primary-dark !default; -$core-selected-item-border-width: 5px !default; - -$core-login-background: $white !default; -$core-login-background-dark: $black !default; -$core-login-text-color: $black !default; -$core-login-text-color-dark: $white !default; -$core-login-input-background: $white !default; -$core-login-input-background-dark: $core-login-background-dark !default; -$core-login-input-color: $black !default; -$core-login-input-color-dark: $core-login-text-color-dark !default; - -$core-login-button-outline: false !default; -$core-login-button-outline-dark: $core-login-button-outline !default; -$core-login-loading-color: false !default; -$core-login-loading-color-dark: $text-color-dark !default; -$core-login-hide-forgot-password: false !default; -$core-login-hide-need-help: false !default; - -$core-star-color: $brand-color !default; - -$core-large-avatar-size: 90px !default; -$core-avatar-size: 44px !default; - -$core-send-message-input-background: $gray-light !default; -$core-send-message-input-color: $black !default; -$core-send-message-input-background-dark: $black !default; -$core-send-message-input-color-dark: $white !default; - -$core-more-icon-color: null !default; -$core-more-item-border: null !default; -$core-more-hide-siteinfo: false !default; -$core-more-hide-sitename: false !default; -$core-more-hide-siteurl: false !default; - $core-fixed-url: false !default; $core-dashboard-logo: false !default; $core-always-show-main-menu: false !default; @@ -378,44 +117,21 @@ $core-format-text-never-shorten: false !default; $core-show-courseimage-on-course: false !default; $core-hide-progress-on-course: false !default; -$core-courseimage-on-course-height: 150px !default; $core-hide-progress-on-section-selector: false !default; $core-course-hide-thumb-on-cards: false !default; $core-course-thumb-on-cards-background: null !default; $core-course-hide-progress-on-cards: false !default; -$addon-calendar-event-category-color: $purple !default; -$addon-calendar-event-course-color: $red !default; -$addon-calendar-event-group-color: $yellow !default; -$addon-calendar-event-user-color: $blue !default; -$addon-calendar-event-site-color: $green !default; -$addon-calendar-today-border-color: $primary !default; -$addon-calendar-today-color: $white !default; -$addon-calendar-border-color: $gray !default; +// Configuration options for login page. +$core-login-button-outline: false !default; +$core-login-button-outline-dark: $core-login-button-outline !default; +$core-login-loading-color: false !default; +$core-login-loading-color-dark: $text-color-dark !default; +$core-login-hide-forgot-password: false !default; +$core-login-hide-need-help: false !default; -$addon-messages-message-bg: $white !default; -$addon-messages-message-activated-bg: $gray-light !default; -$addon-messages-message-note-text: $gray-dark !default; -$addon-messages-message-note-font-size: 75% !default; -$addon-messages-message-mine-bg: $gray-light !default; -$addon-messages-message-mine-activated-bg: $gray !default; -$addon-messages-avatar-size: 30px !default; -$addon-messages-discussion-badge: $primary !default; -$addon-messages-discussion-badge-text: $white !default; - -$addon-messages-message-bg-dark: $shade-75 !default; - -$addon-messages-message-activated-bg-dark: $shade-65 !default; -$addon-messages-message-note-text-dark: $gray-light !default; -$addon-messages-message-mine-bg-dark: $shade-60 !default; -$addon-messages-message-mine-activated-bg-dark: $shade-50 !default; -$addon-messages-discussion-badge-dark: $primary-dark !default; -$addon-messages-discussion-badge-text-dark: $black !default; - -$addon-forum-avatar-size: 44px !default; -$addon-forum-border-color: $gray !default; -$addon-forum-highlight-color: $gray-lighter !default; - -$addon-forum-border-color-dark: $gray-dark !default; -$addon-forum-highlight-color-dark: $gray-darker !default; +// Configuration options for more page. +$core-more-hide-siteinfo: false !default; +$core-more-hide-sitename: false !default; +$core-more-hide-siteurl: false !default; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index e5feb8e46..4c80e76de 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -143,7 +143,7 @@ ion-app.ios ion-header h2 { text-align: center; font-size: 17px; font-weight: 600; - line-height: #{$toolbar-ios-height}; + line-height: var(--core-header-toolbar-height); box-sizing: border-box; pointer-events: none; } @@ -192,22 +192,15 @@ ion-button.ion-text-wrap { } @each $color-name, $value in $colors { - $value: map-get($colors, $color-name); - $base: map-get($value, base); - .text-#{$color-name}, p.text-#{$color-name} { - color: $base; + color: var(--ion-color-#{$color-name}); } } // Ionic toolbar on header. -ion-app.md ion-toolbar { - --min-height: #{$toolbar-md-height}; -} - -ion-app.ios ion-toolbar { - --min-height: #{$toolbar-ios-height}; +ion-toolbar { + --min-height: var(--core-header-toolbar-height); } ion-header ion-toolbar { @@ -280,7 +273,7 @@ button, // Clear buttons will be black. ion-button.button-clear { - --ion-color-primary: var(--brand-contrast-color); + --ion-color-primary: var(--brand-color-contrast); } [role="button"], @@ -364,7 +357,7 @@ ion-alert .alert-message { } ion-alert .alert-wrapper button.alert-button { - color: var(--brand-contrast-color); + color: var(--brand-color-contrast); } // Ionic list. @@ -455,17 +448,13 @@ ion-toolbar { } // Card styles -@each $color-name, $value in $colors { - $value: map-get($colors, $color-name); - - $base: map-get($value, base); - $contrast: map-get($value, contrast); - $shade: map-get($value, shade); - $tint: map-get($value, tint); +@each $color-name, $base in $colors { // Message cards. ion-card.core-#{$color-name}-card { - border-bottom: 3px solid $base; + --color-base: var(--ion-color-#{$color-name}); + + border-bottom: 3px solid var(--color-base); ion-item::part(native) { --inner-border-width: 0; @@ -474,22 +463,24 @@ ion-toolbar { white-space: normal !important; } ion-icon { - color: $base; + color: var(--color-base); } } .item.core-#{$color-name}-item { + --color-base: var(--ion-color-#{$color-name}); + --inner-border-width: 0 0 3px 0; --border-width: 0; - border-bottom: 3px solid $base !important; + border-bottom: 3px solid var(--color-base) !important; ion-icon { - color: $base; + color: var(--color-base); } } ion-icon.ion-color-#{$color-name} { - color: $base; - --ion-color-base: #{$base}; + --ion-color-base: var(--ion-color-#{$color-name}); + color: var(--ion-color-base); } } @@ -592,7 +583,7 @@ ion-toolbar h1 .core-bar-button-image img { // Radio. ion-radio, input[type=radio] { - --color: var(--brand-contrast-color); + --color: var(--brand-color-contrast); --color-checked: var(--color); --border-radius: 50%; --border-width: 2px; @@ -646,8 +637,8 @@ input[type=radio] { ion-checkbox, input[type=checkbox] { --border-radius: 2px; - --border-color-checked: var(--brand-contrast-color); - --background-checked: var(--brand-contrast-color); + --border-color-checked: var(--brand-color-contrast); + --background-checked: var(--brand-color-contrast); --checkmark-color: var(--contrast-background); --border-width: 2px; --outer-border-width: 2px; diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index d582bc97d..d90d81b5f 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -6,70 +6,64 @@ */ :root body.dark { - --ion-background-color: #{$background-color-dark}; - --ion-background-color-rgb: #{color-to-rgb-list($background-color-dark)}; - - --ion-text-color: #{$text-color-dark}; - --ion-text-color-rgb: #{color-to-rgb-list($text-color-dark)}; - --subdued-text-color: #{$subdued-text-color-dark}; - // Enlighten the ionic shades. - --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-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; - --brand-contrast-color: #{$brand-contrast-color-dark}; + --ion-background-color: #{$background-color-dark}; + --ion-background-color-rgb: #{$background-color-dark-rgb}; - --primary: #{$primary-dark}; - --secondary: #{$secondary-dark}; - --tertiary: #{$tertiary-dark}; - --success: #{$success-dark}; - --danger: #{$danger-dark}; - --warning: #{$warning-dark}; - --info: #{$info-dark}; - --light: #{$light-dark}; - --dark: #{$dark-dark}; - --medium: #{$medium-dark}; + --text-color: #{$text-color-dark}; + --ion-text-color: var(--text-color); + --ion-text-color-rgb: #{$text-color-dark-rgb}; + --subdued-text-color: #b4b4b4; + + --primary: var(--brand-color); + --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: #{$shade-85}; + --ion-border-color: var(--ion-color-step-100); - --ion-card-color: #{$text-color-dark}; - --ion-card-background: #{$ion-item-background-dark}; + --ion-card-color: var(--text-color); + --ion-card-background: var(--ion-item-background); --contrast-background: black; - --ion-placeholder-color: #{$ion-placeholder-color-dark}; - ion-content { --background: var(--ion-background-color); --background-alternative: var(--black); } - --core-bottom-tabs-background: #{$bottom-tabs-background-dark}; - --core-bottom-tabs-color: #{$bottom-tabs-color-dark}; - --core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected-dark}; - --core-bottom-tabs-badge-color: #{$bottom-tabs-badge-color-dark}; - --core-bottom-tabs-badge-text-color: #{$bottom-tabs-badge-text-color-dark}; + --core-bottom-tabs-badge-text-color: var(--brand-color-contrast); ion-action-sheet { .action-sheet-cancel { @@ -77,37 +71,28 @@ } } - --core-link-color: #{$link-color-dark}; + --core-link-color: var(--blue-light); - --core-header-toolbar-background: #{$toolbar-background-dark}; - --core-header-toolbar-border-color: #{$toolbar-border-color-dark}; - --core-header-toolbar-color: #{$toolbar-color-dark}; + --core-header-toolbar-background: var(--black); + --core-header-toolbar-color: var(--white); - --core-tabs-background: #{$core-tabs-background-dark}; - --core-tab-background: #{$core-tab-background-dark}; - --core-tab-color: #{$core-tab-color-dark}; - --core-tab-border-color: #{$core-tab-border-color-dark}; - --core-tab-color-active: #{$core-tab-color-active-dark}; - --core-tab-border-color-active: #{$core-tab-border-color-active-dark}; + --core-tabs-background: var(--ion-color-step-200); + --core-tab-border-color: var(--gray-light); + --core-tab-color-active: var(--dark); - --core-progressbar-color: #{$core-progressbar-color-dark}; - --core-progressbar-text-color: #{$core-progressbar-text-color-dark}; + --core-progressbar-text-color: var(--gray-lighter); --ion-item-background: #{$ion-item-background-dark}; --ion-item-detail-icon-color: var(--white); - --item-divider-background: #{$ion-item-divider-background-dark}; - --item-divider-color: #{$ion-item-divider-color-dark}; - --spacer-background: #{$core-spacer-background-dark}; + --item-divider-background: var(--ion-color-step-200); + --spacer-background: var(--ion-color-step-1000); - --core-combobox-background: #{$core-combobox-background-dark}; - --core-combobox-color: #{$core-combobox-color-dark}; + --core-combobox-color: var(--white); - --selected-item-color: #{$core-selected-item-color-dark}; - - --core-login-background: #{$core-login-background-dark}; - --core-login-text-color: #{$core-login-text-color-dark}; - --core-login-input-background: #{$core-login-input-background-dark}; - --core-login-input-color: #{$core-login-input-color-dark}; + --core-login-background: var(--black); + --core-login-text-color: var(--white); + --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); @@ -129,17 +114,17 @@ --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light); --core-dd-question-border: var(--gray-light); - --core-send-message-input-background: #{$core-send-message-input-background-dark}; - --core-send-message-input-color: #{$core-send-message-input-color-dark}; + --core-send-message-input-background: var(--black); + --core-send-message-input-color: var(--white); - --addon-messages-message-bg: #{$addon-messages-message-bg-dark}; - --addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark}; - --addon-messages-message-note-text: #{$addon-messages-message-note-text-dark}; - --addon-messages-message-mine-bg: #{$addon-messages-message-mine-bg-dark}; - --addon-messages-message-mine-activated-bg: #{$addon-messages-message-mine-activated-bg-dark}; - --addon-messages-discussion-badge: #{$addon-messages-discussion-badge-dark}; - --addon-messages-discussion-badge-text: #{$addon-messages-discussion-badge-text-dark}; + --addon-messages-message-bg: var(--ion-color-step-200); + --addon-messages-message-activated-bg: var(--ion-color-step-300); + --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-discussion-badge: var(--primary); + --addon-messages-discussion-badge-text: var(--dark); - --addon-forum-border-color: #{$addon-forum-border-color-dark}; - --addon-forum-highlight-color: #{$addon-forum-highlight-color-dark}; + --addon-forum-border-color: var(--gray-dark); + --addon-forum-highlight-color: var(--gray-darker); } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index fbca663e8..ee8f53df9 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -9,21 +9,17 @@ // Color palette --black: #{$black}; // Headings, standard text. - --gray-darker: #{$gray-darker}; - --gray-dark: #{$gray-dark}; + --gray-darker: #{$gray-darker}; // Text (emphasis-detail), placeholder, background. + --gray-dark: #{$gray-dark}; // Borders (never text). --gray: #{$gray}; - --gray-light: #{$gray-light}; + --gray-light: #{$gray-light}; // Background. --gray-lighter: #{$gray-lighter}; - --white: #{$white}; + --white: #{$white}; // Background, reversed text. --blue: #{$blue}; --blue-light: #{$blue-light}; --blue-dark: #{$blue-dark}; - --turquoise: #{$turquoise}; - --turquoise-light: #{$turquoise-light}; - --turquoise-dark: #{$turquoise-dark}; - --green: #{$green}; --green-light: #{$green-light}; --green-dark: #{$green-dark}; @@ -32,30 +28,31 @@ --red-light: #{$red-light}; --red-dark: #{$red-dark}; - --orange: #{$orange}; - --orange-light: #{$orange-light}; - --yellow: #{$yellow}; --yellow-light: #{$yellow-light}; --yellow-dark: #{$yellow-dark}; - --purple: #{$purple}; - --brand-color: #{$brand-color}; - --brand-contrast-color: #{$brand-contrast-color}; + --turquoise: #007982; // Accent. + --purple: #8e24aa; - --core-online-color: #{$core-online-color}; + --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}; - --tertiary: #{$tertiary}; - --success: #{$success}; - --danger: #{$danger}; - --warning: #{$warning}; - --info: #{$info}; - --light: #{$light}; - --dark: #{$dark}; - --medium: #{$medium}; + --primary: var(--brand-color); + --secondary: #{$secondary}; + --success: #{$success}; + --danger: #{$danger}; + --warning: #{$warning}; + --info: #{$info}; + --light: #{$light}; + --dark: #{$dark}; + --medium: #{$medium}; @each $color-name, $value in $colors { @include generate-color($color-name, $colors); @@ -68,31 +65,32 @@ --module-icon-size: 24px; - --ion-background-color: #{$background-color}; - --ion-background-color-rgb: #{color-to-rgb-list($background-color)}; + --ion-background-color: var(--background-color); + --ion-background-color-rgb: #{$background-color-rgb}; --contrast-background: white; - --ion-text-color: #{$text-color}; - --ion-text-color-rgb: #{color-to-rgb-list($text-color)}; - --subdued-text-color: #{$subdued-text-color}; + --ion-text-color: var(--text-color); + --ion-text-color-rgb: #{$text-color-rgb}; + --subdued-text-color: #595959; - --ion-card-color: var(--ion-text-color); + --ion-card-color: var(--text-color); --text-hightlight-background-color: #{$core-text-hightlight-background-color}; - --ion-placeholder-color: #{$ion-placeholder-color}; + --ion-placeholder-color: var(--subdued-text-color); ion-content { --background: var(--ion-background-color); --background-alternative: var(--gray-lighter); } - --core-bottom-tabs-background: #{$bottom-tabs-background}; - --core-bottom-tabs-color: #{$bottom-tabs-color}; - --core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected}; - --core-bottom-tabs-badge-color: #{$bottom-tabs-badge-color}; - --core-bottom-tabs-badge-text-color: #{$bottom-tabs-badge-text-color}; + --core-bottom-tabs-background: var(--black); + --core-bottom-tabs-color: var(--gray-lighter); + --core-bottom-tabs-color-selected: var(--brand-color); + --core-bottom-tabs-badge-color: var(--brand-color); + --core-bottom-tabs-badge-text-color: var(--brand-color-contrast); + --bottom-tabs-size: 56px; ion-tab-bar.mainmenu-tabs { --background: var(--core-bottom-tabs-background); --color: var(--core-bottom-tabs-color); @@ -103,16 +101,21 @@ } } - --core-link-color: #{$link-color}; + --core-link-color: var(--blue); a { color: var(--core-link-color); } - --core-header-toolbar-button-image-size: #{$toolbar-button-image-size}; - --core-header-toolbar-background: #{$toolbar-background}; - --core-header-toolbar-border-width: #{$toolbar-border-width}; - --core-header-toolbar-border-color: #{$toolbar-border-color}; - --core-header-toolbar-color: #{$toolbar-color}; + --core-header-toolbar-button-image-size: 44px; + --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-height: 56px; + html.ios { + --core-header-toolbar-height: 54px; + } + ion-header ion-toolbar { --color: var(--core-header-toolbar-color); --background: var(--core-header-toolbar-background); @@ -160,14 +163,14 @@ } } - --core-tabs-background: #{$core-tabs-background}; - --core-tab-background: #{$core-tab-background}; - --core-tab-color: #{$core-tab-color}; - --core-tab-border-color: #{$core-tab-border-color}; - --core-tab-color-active: #{$core-tab-color-active}; - --core-tab-border-color-active: #{$core-tab-border-color-active}; - --core-tab-font-weight-active: #{$core-tab-font-weight-active}; - + --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-color-active: var(--dark); + --core-tab-border-color-active: var(--brand-color); + --core-tab-font-weight-active: normal; + --core-tabs-height: 56px; core-tabs, core-tabs-outlet { ion-slide { --background: var(--core-tab-background); @@ -184,10 +187,10 @@ --color: var(--ion-color-primary); } - --core-progressbar-height: #{$core-progressbar-height}; - --core-progressbar-color: #{$core-progressbar-color}; - --core-progressbar-text-color: #{$core-progressbar-text-color}; - --core-progressbar-background: #{$core-progressbar-background}; + --core-progressbar-height: 8px; + --core-progressbar-color: var(--brand-color); + --core-progressbar-text-color: var(--gray-darker); + --core-progressbar-background: var(--gray-lighter); core-progress-bar { --height: var(--core-progressbar-height); --color: var(--core-progressbar-color); @@ -195,12 +198,14 @@ --background: var(--core-progressbar-background); } + --core-side-blocks-max-width: 30%; + --core-side-blocks-min-width: 280px; core-block-course-blocks { - --side-blocks-max-width: #{$core-side-blocks-max-width}; - --side-blocks-min-width: #{$core-side-blocks-min-width}; + --side-blocks-max-width: var(--core-side-blocks-max-width); + --side-blocks-min-width: var(--core-side-blocks-min-width); } - --ion-item-background: #{$ion-item-background}; + --ion-item-background: #{$ion-item-background}; --ion-item-detail-icon-color: var(--gray-darker); --ion-item-detail-icon-font-size: 20px; --ion-item-detail-icon-opacity: 1; @@ -211,8 +216,8 @@ } --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px); - --item-divider-background: #{$ion-item-divider-background}; - --item-divider-color: #{$ion-item-divider-color}; + --item-divider-background: var(--gray-lighter); + --item-divider-color: var(--text-color); ion-item-divider, ion-item.divider { --background: var(--item-divider-background); --color: var(--item-divider-color); @@ -220,7 +225,7 @@ min-height: var(--min-height); } - --spacer-background: #{$core-spacer-background}; + --spacer-background: var(--item-divider-background); core-spacer { --item-divider-background: var(--spacer-background); } @@ -230,49 +235,50 @@ } --core-combobox-background: var(--ion-item-background); - --core-combobox-color: #{$core-combobox-color}; - --core-combobox-background: #{$core-combobox-background}; - --core-combobox-border-color: #{$core-combobox-border-color}; - --core-combobox-border-width: #{$core-combobox-border-width}; + --core-combobox-color: var(--black); + --core-combobox-border-color: var(--primary); + --core-combobox-border-width: 3px; - --selected-item-color: #{$core-selected-item-color}; - --selected-item-border-width: #{$core-selected-item-border-width}; + --selected-item-color: var(--primary); + --selected-item-border-width: 5px; - --core-login-background: #{$core-login-background}; - --core-login-text-color: #{$core-login-text-color}; - --core-login-input-background: #{$core-login-input-background}; - --core-login-input-color: #{$core-login-input-color}; + --core-login-background: var(--white); + --core-login-text-color: var(--black); + --core-login-input-background: var(--white); + --core-login-input-color: var(--black); - --core-star-color: #{$core-star-color}; + --core-star-color: var(--brand-color); - --core-large-avatar-size: #{$core-large-avatar-size}; - --core-avatar-size: #{$core-avatar-size}; + --core-large-avatar-size: 90px; + --core-avatar-size: 44px; - --core-send-message-input-background: #{$core-send-message-input-background}; - --core-send-message-input-color: #{$core-send-message-input-color}; + --core-send-message-input-background: var(--gray-light); + --core-send-message-input-color: var(--black); - --addon-calendar-event-category-color: #{$addon-calendar-event-category-color}; - --addon-calendar-event-course-color: #{$addon-calendar-event-course-color}; - --addon-calendar-event-group-color: #{$addon-calendar-event-group-color}; - --addon-calendar-event-user-color: #{$addon-calendar-event-user-color}; - --addon-calendar-event-site-color: #{$addon-calendar-event-site-color}; - --addon-calendar-today-border-color: #{$addon-calendar-today-border-color}; - --addon-calendar-today-color: #{$addon-calendar-today-color}; - --addon-calendar-border-color: #{$addon-calendar-border-color}; + --core-courseimage-on-course-height: 150px; - --addon-messages-message-bg: #{$addon-messages-message-bg}; - --addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg}; - --addon-messages-message-note-text: #{$addon-messages-message-note-text}; - --addon-messages-message-note-font-size: #{$addon-messages-message-note-font-size}; - --addon-messages-message-mine-bg: #{$addon-messages-message-mine-bg}; - --addon-messages-message-mine-activated-bg: #{$addon-messages-message-mine-activated-bg}; - --addon-messages-avatar-size: #{$addon-messages-avatar-size}; - --addon-messages-discussion-badge: #{$addon-messages-discussion-badge}; - --addon-messages-discussion-badge-text: #{$addon-messages-discussion-badge-text}; + --addon-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-color: var(--white); + --addon-calendar-border-color: var(--gray); - --addon-forum-avatar-size: #{$addon-forum-avatar-size}; - --addon-forum-border-color: #{$addon-forum-border-color}; - --addon-forum-highlight-color: #{$addon-forum-highlight-color}; + --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-note-font-size: 75%; + --addon-messages-message-mine-bg: var(--gray-light); + --addon-messages-message-mine-activated-bg: var(--gray); + --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); --drop-shadow: 0, 0, 0, 0.18; @@ -300,11 +306,12 @@ --core-dd-question-radius: 10px; --core-dd-question-border: var(--gray-darker); - @if ($core-more-icon-color) { - --core-more-icon: #{$core-more-icon-color}; + @for $i from 0 to length($core-course-image-background) { + --core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)}; } - @if ($core-more-item-border) { - --core-more-item-border: #{$core-more-item-border}; + @for $i from 0 to length($core-dd-question-colors) { + --core-dd-question-color-#{$i + 1}: #{nth($core-dd-question-colors, $i + 1)}; + --core-dd-question-color-#{$i + 1}-contrast: #{get_contrast_color(nth($core-dd-question-colors, $i + 1))}; } }