From 425eb173f91c622eb7c4827dfd1e0ab602b71fe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 2 Jun 2021 12:44:34 +0200 Subject: [PATCH] MOBILE-3320 styles: Change primary color and styles for a11y --- .../components/calendar/calendar.scss | 5 +- .../messages/pages/settings/settings.html | 4 +- .../mod/forum/components/post/post.html | 4 +- .../courses-storage/courses-storage.scss | 4 -- src/core/components/combobox/combobox.scss | 7 +++ src/theme/globals.variables.scss | 57 +++++++++++-------- src/theme/theme.base.scss | 48 +++++++++++++--- src/theme/theme.dark.scss | 10 +++- src/theme/theme.light.scss | 27 ++++++--- 9 files changed, 114 insertions(+), 52 deletions(-) diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss index 0fd053dfa..4d9303f3b 100644 --- a/src/addons/calendar/components/calendar/calendar.scss +++ b/src/addons/calendar/components/calendar/calendar.scss @@ -55,9 +55,8 @@ } &.today .addon-calendar-day-number span { - background-color: var(--addon-calendar-today-bgcolor); - color: var(--addon-calendar-today-color); - + border: 2px solid var(--addon-calendar-today-border-color); + line-height: 20px;; border-radius: 50%; } &.dayblank { diff --git a/src/addons/messages/pages/settings/settings.html b/src/addons/messages/pages/settings/settings.html index 4f3aafeac..e0c38e675 100644 --- a/src/addons/messages/pages/settings/settings.html +++ b/src/addons/messages/pages/settings/settings.html @@ -135,9 +135,9 @@

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

 -

{{ 'addon.messages.useentertosend' | translate }}

+

{{ 'addon.messages.useentertosend' | translate }}

 - + diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html index e6b7a3da7..0b1f4d993 100644 --- a/src/addons/mod/forum/components/post/post.html +++ b/src/addons/mod/forum/components/post/post.html @@ -130,9 +130,9 @@ [attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId" [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate" > + + - -

{{ 'addon.mod_forum.advanced' | translate }}

 diff --git a/src/addons/storagemanager/pages/courses-storage/courses-storage.scss b/src/addons/storagemanager/pages/courses-storage/courses-storage.scss index 1861562ad..18d5a6e54 100644 --- a/src/addons/storagemanager/pages/courses-storage/courses-storage.scss +++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.scss @@ -5,10 +5,6 @@ .item-heading { font-weight: bold; } - - .item-heading.item-heading-secondary { - color: $subdued-text-color; - } } } diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss index 974e201f9..85f428f01 100644 --- a/src/core/components/combobox/combobox.scss +++ b/src/core/components/combobox/combobox.scss @@ -12,6 +12,9 @@ --color: var(--core-combobox-color); --color-activated: var(--core-combobox-color); + --border-color: var(--core-combobox-border-color); + --border-width: 0 0 var(--core-combobox-border-width) 0; + --border-style: solid; --color-focused: currentcolor; --color-hover: currentcolor; @@ -50,6 +53,10 @@ ion-button { } ion-select { + border-color: var(--border-color); + border-width: var(--border-width); + border-style: var(--border-style); + &::part(icon) { margin: var(--icon-margin); opacity: 1; diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index 18da1f961..007c42c53 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -64,16 +64,19 @@ $yellow-light: mix($yellow, white, 40%) !default; $yellow-dark: mix($yellow, black, 40%) !default; $brand-color: $orange !default; -$brand-color-light: lighten($brand-color, 10%) !default; -$brand-color-dark: darken($brand-color, 10%) !default; $text-color: $black !default; $text-color-dark: $white !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: $gray-darker !default; +$subdued-text-color-dark: $gray-lighter !default; $ion-item-background: $white !default; $ion-item-background-dark: $shade-80 !default; @@ -86,8 +89,8 @@ $core-spacer-background-dark: $shade-100 !default; $core-online-color: #5cb85c !default; -$primary: $blue !default; -$secondary: $brand-color !default; +$primary: $brand-color !default; +$secondary: $blue !default; $tertiary: $turquoise !default; $danger: $red !default; $warning: $yellow !default; @@ -160,8 +163,8 @@ $colors: ( ) ) !default; -$primary-dark: $blue-light !default; -$secondary-dark: $brand-color !default; +$primary-dark: $brand-color !default; +$secondary-dark: $blue-light !default; $tertiary-dark: $turquoise-light !default; $danger-dark: $red-light !default; $warning-dark: $yellow-light !default; @@ -268,42 +271,44 @@ $z-index-overlay: 1001; $z-index-overlay-wrapper: 10; // Top header bar. -$toolbar-background: $brand-color !default; +$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-height-md: 56px !default; $toolbar-height-ios: 54px !default; // Bottom tab bar. -$bottom-tabs-background: $white !default; -$bottom-tabs-background-dark: $shade-85 !default; -$bottom-tabs-color: $gray-darker !default; -$bottom-tabs-color-dark: $white !default; +$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-dark !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-dark !default; +$bottom-tabs-badge-color-dark: $primary !default; $bottom-tabs-badge-text-color-dark: get_contrast_color($bottom-tabs-badge-color-dark) !default; $core-text-hightlight-background-color: lighten($blue, 40%) !default; -$action-sheet-title-color: $primary !default; -$action-sheet-selected: $primary !default; - $core-tabs-background: $white !default; $core-tab-background: $core-tabs-background !default; $core-tab-color: $gray-dark !default; +$core-tab-color-active: $dark !default; $core-tab-border-color: $gray !default; -$core-tab-color-active: $primary !default; -$core-tab-color-active-dark: $primary-dark !default; +$core-tab-border-color-active: $primary !default; $core-tabs-background-dark: $shade-75 !default; $core-tab-background-dark: $core-tabs-background-dark !default; $core-tab-color-dark: $white !default; +$core-tab-color-active-dark: $dark-dark !default; $core-tab-border-color-dark: $gray-light !default; -$core-tab-border-color-active: $core-tab-color-active !default; -$core-tab-border-color-active-dark: $core-tab-color-active-dark !default; +$core-tab-border-color-active-dark: $core-tab-border-color-active !default; $core-progressbar-color: $primary !default; $core-progressbar-color-dark: $primary !default; @@ -312,13 +317,15 @@ $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: $primary !default; -$core-combobox-color-dark: $primary-dark !default; +$core-combobox-color: $black !default; +$core-combobox-color-dark: $white !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; @@ -351,7 +358,7 @@ $addon-calendar-event-course-color: $red !default; $addon-calendar-event-group-color: $yellow !default; $addon-calendar-event-user-color: $blue !default; $addon-calendar-event-site-color: $green !default; -$addon-calendar-today-bgcolor: $primary !default; +$addon-calendar-today-border-color: $primary !default; $addon-calendar-today-color: $white !default; $addon-calendar-border-color: $gray !default; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index d110bb84a..d5c8ad73d 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -12,9 +12,10 @@ clear: both; } } - .core-bold { + +.core-bold { font-weight: bold; - } +} .img-responsive { display: block; @@ -51,12 +52,23 @@ // Headings. // Some styles taken from ion-label -ion-label .item-heading { +.md ion-label .item-heading, +.ios ion-label .item-heading { text-overflow: inherit; overflow: inherit; --color: initial; color: var(--color); line-height: 20px; + + &.item-heading-secondary { + --color: var(--subdued-text-color); + } +} + +.ios ion-label > p, +.md ion-label > p { + --color: var(--subdued-text-color); + color: var(--color); } .md ion-label .item-heading { @@ -230,6 +242,11 @@ button, min-width: var(--a11y-min-target-size); } +// Clear buttons will be black. +ion-button.button-clear { + --ion-color-primary: var(--brand-contrast-color); +} + [role="button"], .clickable { cursor: pointer; @@ -284,11 +301,13 @@ div.core-iframe-network-error { mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%; } } + [dir=rtl] ion-alert.core-alert-network-error .alert-head::after, [dir=rtl] div.core-iframe-network-error::after { right: unset; left: -15%; } + ion-alert.core-nohead { .alert-head { padding-bottom: 0; @@ -299,6 +318,10 @@ ion-alert .alert-message { user-select: text; } +ion-alert .alert-wrapper button.alert-button { + color: var(--brand-contrast-color); +} + // Ionic list. ion-list.list-md { padding: 0; @@ -521,6 +544,21 @@ ion-toolbar h1 .core-bar-button-image img { } } +// Radio. +ion-radio { + --color: var(--brand-contrast-color); + --color-checked: var(--color); +} + +// Checkbox. +ion-checkbox { + --border-radius: 2px; + --border-color-checked: var(--brand-contrast-color); + --background-checked: var(--brand-contrast-color); + --checkmark-color: var(--contrast-background); +} + + // Select. ion-select::part(text) { white-space: normal; @@ -757,10 +795,6 @@ ion-input .native-input { } } -ion-checkbox { - --border-radius: 2px; -} - // Disable scroll on parent ion contents to enabled PTR on the ones inside the splitview. See split-view component for more info. ion-content.disable-scroll-y::part(scroll) { touch-action: auto; diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 8bc2df0ef..73405f465 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -11,6 +11,7 @@ --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; @@ -33,6 +34,8 @@ --ion-color-step-900: #e7e7e7; --ion-color-step-950: #f3f3f3; + --brand-contrast-color: #{$brand-contrast-color-dark}; + --primary: #{$primary-dark}; --secondary: #{$secondary-dark}; --tertiary: #{$tertiary-dark}; @@ -53,10 +56,11 @@ --ion-card-color: #{$text-color-dark}; --ion-card-background: #{$ion-item-background-dark}; + --contrast-background: black; + ion-content { --background: var(--ion-background-color); --background-alternative: var(--black); - --contrast-background: var(--ion-background-color); } --core-bottom-tabs-background: #{$bottom-tabs-background-dark}; @@ -73,6 +77,10 @@ --core-link-color: #{$link-color-dark}; + --core-header-toolbar-background: #{$toolbar-background-dark}; + --core-header-toolbar-border-color: #{$toolbar-border-color-dark}; + --core-header-toolbar-color: #{$toolbar-color-dark}; + --core-tabs-background: #{$core-tabs-background-dark}; --core-tab-background: #{$core-tab-background-dark}; --core-tab-color: #{$core-tab-color-dark}; diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 8e1044e95..2bed42ebd 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -41,8 +41,7 @@ --purple: #{$purple}; --brand-color: #{$brand-color}; - --brand-color-light: #{$brand-color-light}; - --brand-color-dark: #{$brand-color-dark}; + --brand-contrast-color: #{$brand-contrast-color}; --core-online-color: #{$core-online-color}; @@ -72,8 +71,12 @@ --ion-background-color: #{$background-color}; --ion-background-color-rgb: #{color-to-rgb-list($background-color)}; + --contrast-background: white; + --ion-text-color: #{$text-color}; - --ion-text-color-rgb: 58,58,58; + --ion-text-color-rgb: #{color-to-rgb-list($text-color)}; + --subdued-text-color: #{$subdued-text-color}; + --ion-card-color: var(--ion-text-color); --text-hightlight-background-color: #{$core-text-hightlight-background-color}; @@ -81,7 +84,6 @@ ion-content { --background: var(--ion-background-color); --background-alternative: var(--gray-lighter); - --contrast-background: var(--white); } --core-bottom-tabs-background: #{$bottom-tabs-background}; @@ -106,10 +108,16 @@ --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}; - ion-header ion-toolbar { + ion-header ion-toolbar, + ion-header.header-ios ion-toolbar:last-of-type { --color: var(--core-header-toolbar-color); --background: var(--core-header-toolbar-background); + --border-width: 0 0 var(--core-header-toolbar-border-width) 0; + --border-color: var(--core-header-toolbar-border-color); + ion-button { --ion-toolbar-color: transparent; --color: var(--core-header-toolbar-color); @@ -129,11 +137,12 @@ } ion-action-sheet { - --button-color-selected: #{$action-sheet-selected}; + --button-color: var(--ion-text-color); + --button-color-selected: var(--ion-text-color); --title-border-color: var(--gray); .action-sheet-title { - --color: #{$action-sheet-title-color}; + --color: var(--ion-text-color); } @media (min-height: 500px) { @@ -211,6 +220,8 @@ --core-combobox-background: var(--ion-item-background); --core-combobox-color: #{$core-combobox-color}; + --core-combobox-border-color: #{$core-combobox-border-color}; + --core-combobox-border-width: #{$core-combobox-border-width}; --selected-item-color: #{$core-selected-item-color}; --selected-item-border-width: #{$core-selected-item-border-width}; @@ -233,7 +244,7 @@ --addon-calendar-event-group-color: #{$addon-calendar-event-group-color}; --addon-calendar-event-user-color: #{$addon-calendar-event-user-color}; --addon-calendar-event-site-color: #{$addon-calendar-event-site-color}; - --addon-calendar-today-bgcolor: #{$addon-calendar-today-bgcolor}; + --addon-calendar-today-border-color: #{$addon-calendar-today-border-color}; --addon-calendar-today-color: #{$addon-calendar-today-color}; --addon-calendar-border-color: #{$addon-calendar-border-color};