imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a high contrast theme (a variant of the light theme) (#7036)

Browse source 
* Enable choosing a high contrast variant of the Light theme

* Updates to high contrast theme to match design and show focus

* Adjust the outline-offset to match designs

* Don't draw an outline around the active tab

* Prevent cropping of outlines on buttons

* Use the correct colour for links

* Change light grey text to be darker in high contrast theme

* Use a darker text colour in admin panel

* Adjust background colours of back button and font slider
This commit is contained in:
Andy Balaam 2021-10-27 14:31:54 +01:00 • committed by GitHub
parent 8170697bbf
commit abbc39cdec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 123 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

48
res/themes/light-high-contrast/css/_light-high-contrast.scss
View file

@ -1,11 +1,12 @@
//// Reference: https://www.figma.com/file/RnLKnv09glhxGIZtn8zfmh/UI-Themes-%26-Accessibility?node-id=321%3A65847
$accent: #268075;
$alert: #D62C25;
$notice-primary-color: #D61C25;
$links: #0A6ECA;
$secondary-content: #5E6266;
$tertiary-content: #5E6266; // Same as secondary
$quaternary-content: #5E6266; // Same as secondary
$tertiary-content: $secondary-content;
$quaternary-content: $secondary-content;
$quinary-content: $secondary-content;
$roomlist-button-bg-color: rgba(141, 151, 165, 0.2);
$username-variant1-color: #0A6ECA;
$username-variant2-color: #AC3BA8;
@ -18,9 +19,13 @@ $username-variant8-color: #3E810A;
$accent-color: $accent;
$accent-color-50pct: rgba($accent-color, 0.5);
$accent-color-alt: $links;
$input-border-color: $secondary-content;
$input-darker-bg-color: $quinary-content;
$input-darker-fg-color: $secondary-content;
$input-lighter-fg-color: $input-darker-fg-color;
$input-valid-border-color: $accent-color;
$input-focused-border-color: $accent-color;
$button-bg-color: $accent-color;
$resend-button-divider-color: $input-darker-bg-color;
$icon-button-color: $quaternary-content;
@ -41,12 +46,14 @@ $voice-record-stop-border-color: $quinary-content;
$voice-record-icon-color: $tertiary-content;
$appearance-tab-border-color: $input-darker-bg-color;
$eventbubble-reply-color: $quaternary-content;
$notice-primary-color: $alert;
$warning-color: $notice-primary-color; // red
$pinned-unread-color: $notice-primary-color;
$button-danger-bg-color: $notice-primary-color;
$mention-user-pill-bg-color: $warning-color;
$input-invalid-border-color: $warning-color;
$event-highlight-fg-color: $warning-color;
$roomtopic-color: $secondary-content;
@define-mixin mx_DialogButton_danger {
background-color: $accent-color;
@ -64,3 +71,38 @@ $event-highlight-fg-color: $warning-color;
color: $accent-color;
text-decoration: none;
}
.mx_AccessibleButton {
margin-left: 4px;
}
.mx_AccessibleButton:focus {
outline: 2px solid $accent-color;
outline-offset: 2px;
}
.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty > :first-child::before {
color: $secondary-content;
opacity: 1 !important;
}
.mx_TextualEvent {
color: $secondary-content;
opacity: 1 !important;
}
.mx_Dialog, .mx_MatrixChat_wrapper {
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
.mx_textinput input::placeholder {
color: $input-darker-fg-color !important;
}
}
.mx_UserMenu_contextMenu .mx_UserMenu_contextMenu_header .mx_UserMenu_contextMenu_themeButton {
background-color: $roomlist-button-bg-color !important;
}
.mx_FontScalingPanel_fontSlider {
background-color: $roomlist-button-bg-color !important;
}