diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.scss b/res/themes/light-high-contrast/css/_light-high-contrast.scss new file mode 100644 index 0000000000..bb5fa16056 --- /dev/null +++ b/res/themes/light-high-contrast/css/_light-high-contrast.scss @@ -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; +} diff --git a/res/themes/light-high-contrast/css/light-high-contrast.scss b/res/themes/light-high-contrast/css/light-high-contrast.scss new file mode 100644 index 0000000000..fa58913b73 --- /dev/null +++ b/res/themes/light-high-contrast/css/light-high-contrast.scss @@ -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");