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

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;
+}

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");