PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

First draft of light-high-contrast theme (#7009)

Browse source
This commit is contained in:
Andy Balaam 2021-10-22 15:18:49 +01:00 committed by GitHub
parent a4e3c4090c
commit 1f5d8a95e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 74 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,66 @@
//// 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
$username-variant1-color: #0A6ECA;
$username-variant2-color: #AC3BA8;
$username-variant3-color: #078662;
$username-variant4-color: #CC1449;
$username-variant5-color: #BE4C00;
$username-variant6-color: #1C7274;
$username-variant7-color: #5C56F5;
$username-variant8-color: #3E810A;
$accent-color: $accent;
$accent-color-50pct: rgba($accent-color, 0.5);
$input-darker-bg-color: $quinary-content;
$input-lighter-fg-color: $input-darker-fg-color;
$input-valid-border-color: $accent-color;
$button-bg-color: $accent-color;
$resend-button-divider-color: $input-darker-bg-color;
$icon-button-color: $quaternary-content;
$theme-button-bg-color: $quinary-content;
$presence-online: $accent-color;
$presence-offline: $quinary-content;
$pinned-color: $tertiary-content;
$tab-label-active-bg-color: $accent-color;
$button-primary-bg-color: $accent-color;
$button-secondary-bg-color: $accent-fg-color;
$button-link-fg-color: $accent-color;
$togglesw-on-color: $accent-color;
$slider-selection-color: $accent-color;
$progressbar-fg-color: $accent-color;
$message-action-bar-fg-color: $primary-content;
$reaction-row-button-selected-border-color: $accent-color;
$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;
$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;
@define-mixin mx_DialogButton_danger {
background-color: $accent-color;
}
@define-mixin mx_DialogButton_secondary {
// flip colours for the secondary ones
font-weight: 600;
border: 1px solid $accent-color !important;
color: $accent-color;
background-color: $button-secondary-bg-color;
}
@define-mixin mx_Dialog_link {
color: $accent-color;
text-decoration: none;
}

8
res/themes/light-high-contrast/css/light-high-contrast.scss Normal file
View file

@ -0,0 +1,8 @@
@import "../../../../res/css/_font-sizes.scss";
@import "../../light/css/_paths.scss";
@import "../../light/css/_fonts.scss";
@import "../../light/css/_light.scss";
@import "_light-high-contrast.scss";
@import "../../light/css/_mods.scss";
@import "../../../../res/css/_components.scss";
@import url("highlight.js/styles/atom-one-light.css");