Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 1f5d8a9

Browse files
authored
First draft of light-high-contrast theme (#7009)
1 parent a4e3c40 commit 1f5d8a9

File tree

2 files changed

+74
-0
lines changed

2 files changed

+74
-0
lines changed
Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
//// Reference: https://www.figma.com/file/RnLKnv09glhxGIZtn8zfmh/UI-Themes-%26-Accessibility?node-id=321%3A65847
2+
$accent: #268075;
3+
$alert: #D62C25;
4+
$notice-primary-color: #D61C25;
5+
$links: #0A6ECA;
6+
$secondary-content: #5E6266;
7+
$tertiary-content: #5E6266; // Same as secondary
8+
$quaternary-content: #5E6266; // Same as secondary
9+
10+
$username-variant1-color: #0A6ECA;
11+
$username-variant2-color: #AC3BA8;
12+
$username-variant3-color: #078662;
13+
$username-variant4-color: #CC1449;
14+
$username-variant5-color: #BE4C00;
15+
$username-variant6-color: #1C7274;
16+
$username-variant7-color: #5C56F5;
17+
$username-variant8-color: #3E810A;
18+
19+
$accent-color: $accent;
20+
$accent-color-50pct: rgba($accent-color, 0.5);
21+
$input-darker-bg-color: $quinary-content;
22+
$input-lighter-fg-color: $input-darker-fg-color;
23+
$input-valid-border-color: $accent-color;
24+
$button-bg-color: $accent-color;
25+
$resend-button-divider-color: $input-darker-bg-color;
26+
$icon-button-color: $quaternary-content;
27+
$theme-button-bg-color: $quinary-content;
28+
$presence-online: $accent-color;
29+
$presence-offline: $quinary-content;
30+
$pinned-color: $tertiary-content;
31+
$tab-label-active-bg-color: $accent-color;
32+
$button-primary-bg-color: $accent-color;
33+
$button-secondary-bg-color: $accent-fg-color;
34+
$button-link-fg-color: $accent-color;
35+
$togglesw-on-color: $accent-color;
36+
$slider-selection-color: $accent-color;
37+
$progressbar-fg-color: $accent-color;
38+
$message-action-bar-fg-color: $primary-content;
39+
$reaction-row-button-selected-border-color: $accent-color;
40+
$voice-record-stop-border-color: $quinary-content;
41+
$voice-record-icon-color: $tertiary-content;
42+
$appearance-tab-border-color: $input-darker-bg-color;
43+
$eventbubble-reply-color: $quaternary-content;
44+
$warning-color: $notice-primary-color; // red
45+
$pinned-unread-color: $notice-primary-color;
46+
$button-danger-bg-color: $notice-primary-color;
47+
$mention-user-pill-bg-color: $warning-color;
48+
$input-invalid-border-color: $warning-color;
49+
$event-highlight-fg-color: $warning-color;
50+
51+
@define-mixin mx_DialogButton_danger {
52+
background-color: $accent-color;
53+
}
54+
55+
@define-mixin mx_DialogButton_secondary {
56+
// flip colours for the secondary ones
57+
font-weight: 600;
58+
border: 1px solid $accent-color !important;
59+
color: $accent-color;
60+
background-color: $button-secondary-bg-color;
61+
}
62+
63+
@define-mixin mx_Dialog_link {
64+
color: $accent-color;
65+
text-decoration: none;
66+
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import "../../../../res/css/_font-sizes.scss";
2+
@import "../../light/css/_paths.scss";
3+
@import "../../light/css/_fonts.scss";
4+
@import "../../light/css/_light.scss";
5+
@import "_light-high-contrast.scss";
6+
@import "../../light/css/_mods.scss";
7+
@import "../../../../res/css/_components.scss";
8+
@import url("highlight.js/styles/atom-one-light.css");

0 commit comments

Comments
 (0)