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

Commit f5f1f18

Browse files
SimonBrandnerSimonBrandner
authored
Task/colors 12 (reorganize theme files again) (#7212)
1 parent 8860916 commit f5f1f18

File tree

2 files changed

+102
-93
lines changed

2 files changed

+102
-93
lines changed

‎res/themes/dark/css/_dark.scss

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
22
// ********************
3-
$accent: #0DBD8B;
4-
$alert: #FF5B55;
5-
$links: #0086e6;
63
$primary-content: #ffffff;
74
$secondary-content: #A9B2BC;
85
$tertiary-content: #8E99A4;
96
$quaternary-content: #6F7882;
107
$quinary-content: #394049;
8+
119
$system: #21262C;
1210
$background: #15191E;
13-
$panels: rgba($system, 0.9);
11+
1412
$panel-base: #8D97A5; // This color is not intended for use in the app
13+
$panels: rgba($system, 0.9);
1514
$panel-selected: rgba($panel-base, 0.3);
1615
$panel-hover: rgba($panel-base, 0.1);
1716
$panel-actions: rgba($panel-base, 0.2);
@@ -29,27 +28,48 @@ $header-panel-bg-color: #20252B;
2928
$icon-button-color: $tertiary-content;
3029
// ********************
3130

32-
// Colors that aren't in Figma - we need to get rid of these
31+
// Colors that aren't in Figma and are theme specific - we need to get rid of these
3332
// ********************
34-
$header-panel-text-primary-color: #B9BEC6;
35-
$text-secondary-color: $header-panel-text-primary-color;
3633
$header-panel-text-secondary-color: #c8c8cd;
3734
$room-highlight-color: #343a46;
38-
$event-highlight-bg-color: #25271F;
39-
$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
40-
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
41-
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
35+
$text-secondary-color: #B9BEC6;
36+
// ********************
37+
38+
// Colors that aren't in Figma - we need to get rid of these
39+
// ********************
40+
$dark-panel-bg-color: $header-panel-bg-color;
41+
$muted-fg-color: $header-panel-text-primary-color;
42+
$light-fg-color: $header-panel-text-secondary-color;
43+
$focus-bg-color: $room-highlight-color;
44+
$info-plinth-bg-color: $header-panel-bg-color;
4245
$event-selected-color: $system;
43-
$progressbar-bg-color: $system;
4446
$topleftmenu-color: $primary-content;
45-
$roomheader-addroom-fg-color: $primary-content;
46-
$h3-color: $primary-content;
47-
$focus-bg-color: $room-highlight-color;
4847
$roomtopic-color: $text-secondary-color;
49-
$light-fg-color: $header-panel-text-secondary-color;
50-
$muted-fg-color: $header-panel-text-primary-color;
51-
$info-plinth-bg-color: $header-panel-bg-color;
52-
$dark-panel-bg-color: $header-panel-bg-color;
48+
$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
49+
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
50+
$h3-color: $primary-content;
51+
$event-highlight-bg-color: #25271F;
52+
$header-panel-text-primary-color: $text-secondary-color;
53+
// ********************
54+
55+
// Tooltip
56+
// ********************
57+
$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
58+
$tooltip-timeline-fg-color: $primary-content;
59+
// ********************
60+
61+
// Widget
62+
// ********************
63+
$widget-menu-bar-bg-color: $header-panel-bg-color;
64+
$widget-body-bg-color: $panel-actions;
65+
// ********************
66+
67+
// Menu
68+
// ********************
69+
$menu-border-color: #000000;
70+
$menu-bg-color: $header-panel-bg-color;
71+
$menu-box-shadow-color: $background;
72+
$menu-selected-color: $room-highlight-color;
5373
// ********************
5474

5575
// Settings
@@ -60,9 +80,15 @@ $settings-profile-button-bg-color: #e7e7e7;
6080
$settings-subsection-fg-color: $text-secondary-color;
6181
// ********************
6282

63-
// Rich-text editor
83+
// RoomHeader
84+
// ********************
85+
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
86+
$roomheader-addroom-fg-color: $primary-content;
87+
// ********************
88+
// Rich-text-editor
6489
// ********************
6590
$rte-room-pill-color: $room-highlight-color;
91+
$other-user-pill-bg-color: $room-highlight-color;
6692
// ********************
6793

6894
// Inputs
@@ -73,41 +99,20 @@ $input-darker-fg-color: #61708b;
7399
$input-lighter-bg-color: #f2f5f8;
74100
// ********************
75101

76-
// Menu
77-
// ********************
78-
$menu-border-color: #000000;
79-
$menu-bg-color: $header-panel-bg-color;
80-
$menu-box-shadow-color: $background;
81-
$menu-selected-color: $room-highlight-color;
82-
// ********************
83-
84-
// Dialogs
102+
// Dialog
85103
// ********************
86104
$dialog-title-fg-color: $primary-content;
87105
$dialog-backdrop-color: $menu-border-color;
88-
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
89106
$dialog-close-fg-color: #9fa9ba;
90107
// ********************
91108

92-
// Lightbox
93-
// ********************
94-
$lightbox-background-bg-color: $menu-border-color;
95-
$lightbox-background-bg-opacity: 0.85;
96-
// ********************
97-
98109
// RoomList
99110
// ********************
100111
$roomlist-bg-color: rgba($system, 0.90);
101112
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
102113
$roomtile-default-badge-bg-color: $input-darker-fg-color;
103114
// ********************
104115

105-
// Widgets
106-
// ********************
107-
$widget-menu-bar-bg-color: $header-panel-bg-color;
108-
$widget-body-bg-color: $panel-actions;
109-
// ********************
110-
111116
// Tabbed views
112117
// ********************
113118
$tab-label-fg-color: $primary-content;
@@ -120,7 +125,6 @@ $button-primary-fg-color: $primary-content;
120125
$button-secondary-bg-color: transparent;
121126
$button-danger-fg-color: $primary-content;
122127
$button-danger-disabled-fg-color: $primary-content;
123-
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
124128
// ********************
125129

126130
// Toggle switch
@@ -148,12 +152,6 @@ $reaction-row-button-hover-border-color: $header-panel-text-primary-color;
148152
$reaction-row-button-selected-bg-color: #1f6954;
149153
// ********************
150154

151-
// Tooltips
152-
// ********************
153-
$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
154-
$tooltip-timeline-fg-color: $primary-content;
155-
// ********************
156-
157155
// Voice messages
158156
// ********************
159157
$voice-record-stop-border-color: $quaternary-content;
@@ -168,6 +166,12 @@ $eventbubble-bg-hover: #1C2026;
168166
$eventbubble-reply-color: #C1C6CD;
169167
// ********************
170168

169+
// Lightbox
170+
// ********************
171+
$lightbox-background-bg-color: $menu-border-color;
172+
$lightbox-background-bg-opacity: 0.85;
173+
// ********************
174+
171175
// VoIP
172176
// ********************
173177
$call-view-button-on-foreground: $primary-content;
@@ -180,21 +184,19 @@ $video-feed-secondary-background: $system;
180184

181185
// One-off colors
182186
// ********************
187+
$progressbar-bg-color: $system;
183188
$kbd-border-color: $menu-border-color;
184189
$visual-bell-bg-color: #800;
185-
$avatar-initial-color: $primary-content;
190+
$event-timestamp-color: $text-secondary-color;
191+
$slider-background-color: $quinary-content;
192+
$appearance-tab-border-color: $room-highlight-color;
193+
$composer-shadow-color: rgba(0, 0, 0, 0.28);
194+
$breadcrumb-placeholder-bg-color: #272c35;
186195
$theme-button-bg-color: #e3e8f0;
196+
$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74);
187197
$codeblock-background-color: #2a3039;
188-
$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74); // muted-text with a 0.74 opacity.
189-
$breadcrumb-placeholder-bg-color: #272c35;
190-
$composer-shadow-color: rgba(0, 0, 0, 0.28);
191198
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
192-
$primary-hairline-color: transparent;
193-
$slider-background-color: $quinary-content;
194-
$event-timestamp-color: $text-secondary-color;
195199
$selected-color: $room-highlight-color;
196-
$other-user-pill-bg-color: $room-highlight-color;
197-
$appearance-tab-border-color: $room-highlight-color;
198200
// ********************
199201

200202
// blur amounts for left left panel (only for element theme)

‎res/themes/light/css/_light.scss

Lines changed: 42 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,25 @@ $monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI
1414

1515
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120
1616
// ********************
17-
$accent: #0DBD8B;
18-
$alert: #FF5B55;
19-
$links: #0086e6;
2017
$primary-content: #17191C;
2118
$secondary-content: #737D8C;
2219
$tertiary-content: #8D97A5;
2320
$quaternary-content: #c1c6cd;
2421
$quinary-content: #E3E8F0;
22+
2523
$system: #F4F6FA;
2624
$background: #ffffff;
25+
2726
$panels: rgba($system, 0.9);
2827
$panel-selected: rgba($tertiary-content, 0.3);
2928
$panel-hover: rgba($tertiary-content, 0.1);
3029
$panel-actions: rgba($tertiary-content, 0.2);
3130
$space-nav: rgba($tertiary-content, 0.15);
3231

32+
$accent: #0DBD8B;
33+
$alert: #FF5B55;
34+
$links: #0086e6;
35+
3336
$username-variant1-color: #368bd6;
3437
$username-variant2-color: #ac3ba8;
3538
$username-variant3-color: #0DBD8B;
@@ -51,32 +54,35 @@ $header-panel-bg-color: #f3f8fd;
5154
$icon-button-color: $quaternary-content;
5255
// ********************
5356

57+
// Colors that aren't in Figma and are theme specific - we need to get rid of these
58+
// ********************
59+
$selection-fg-color: $background;
60+
$yellow-background: #fff8e3;
61+
$secondary-accent-color: #f2f5f8;
62+
$button-fg-color: $background;
63+
$neutral-badge-color: #dbdbdb;
64+
$strong-input-border-color: #c7c7c7;
65+
$preview-widget-bar-color: #dddddd;
66+
$accent-fg-color: $background;
67+
$accent-alt: #238CF5;
68+
$info-plinth-fg-color: #888;
69+
// ********************
70+
5471
// Colors that aren't in Figma - we need to get rid of these
5572
// ********************
56-
$header-panel-text-primary-color: #91A1C0;
73+
$dark-panel-bg-color: $secondary-accent-color;
5774
$muted-fg-color: #61708b;
5875
$light-fg-color: #747474;
59-
$focus-bg-color: #dddddd;
76+
$focus-bg-color: $preview-widget-bar-color;
6077
$info-plinth-bg-color: #f7f7f7;
61-
$info-plinth-fg-color: #888;
62-
$secondary-accent-color: #f2f5f8;
6378
$event-selected-color: #f6f7f8;
64-
$button-fg-color: $background;
65-
$h3-color: #3d3b39;
66-
$yellow-background: #fff8e3;
67-
$accent-alt: #238CF5;
68-
$strong-input-border-color: #c7c7c7;
69-
$neutral-badge-color: #dbdbdb;
70-
$preview-widget-bar-color: $focus-bg-color;
7179
$topleftmenu-color: #212121;
7280
$roomtopic-color: #9e9e9e;
7381
$groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
74-
$progressbar-bg-color: $panel-actions;
7582
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
76-
$accent-fg-color: $background;
77-
$selection-fg-color: $background;
78-
$dark-panel-bg-color: $secondary-accent-color;
83+
$h3-color: #3d3b39;
7984
$event-highlight-bg-color: $yellow-background;
85+
$header-panel-text-primary-color: #91A1C0;
8086
// ********************
8187

8288
// Blockquote
@@ -120,9 +126,10 @@ $roomheader-addroom-fg-color: #5c6470;
120126

121127
// Rich-text-editor
122128
// ********************
129+
$rte-room-pill-color: #aaa;
130+
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
123131
$rte-bg-color: #e9e9e9;
124132
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
125-
$rte-room-pill-color: #aaa;
126133
// ********************
127134

128135
// Presence
@@ -133,20 +140,20 @@ $presence-offline: $quinary-content;
133140

134141
// Inputs
135142
// ********************
136-
$input-underline-color: rgba(151, 151, 151, 0.5);
137-
$input-fg-color: rgba(74, 74, 74, 0.9);
138143
$input-border-color: $menu-border-color;
139144
$input-darker-bg-color: $quinary-content;
140145
$input-darker-fg-color: #9fa9ba;
141146
$input-lighter-bg-color: $secondary-accent-color;
147+
$input-underline-color: rgba(151, 151, 151, 0.5);
148+
$input-fg-color: rgba(74, 74, 74, 0.9);
142149
// ********************
143150

144151
// Dialog
145152
// ********************
146153
$dialog-title-fg-color: #45474a;
147154
$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
148-
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
149155
$dialog-close-fg-color: #c1c1c1;
156+
$dialog-shadow-color: rgba(0, 0, 0, 0.48);
150157
// ********************
151158

152159
// ImageBody
@@ -194,11 +201,11 @@ $togglesw-ball-color: $background;
194201

195202
// Authpage
196203
// ********************
204+
$authpage-primary-color: #232f32;
197205
$authpage-bg-color: #2e3649;
198206
$authpage-modal-bg-color: $roomlist-bg-color;
199207
$authpage-focus-bg-color: $focus-bg-color;
200208
$authpage-lang-color: #4e5054;
201-
$authpage-primary-color: #232f32;
202209
$authpage-secondary-color: $muted-fg-color;
203210
// ********************
204211

@@ -244,37 +251,37 @@ $lightbox-background-bg-opacity: 0.95;
244251

245252
// VoIP
246253
// ********************
247-
$voipcall-plinth-color: $system;
248-
249254
$call-view-button-on-foreground: $secondary-content;
250255
$call-view-button-on-background: $background;
251256
$call-view-button-off-foreground: $background;
252257
$call-view-button-off-background: $secondary-content;
253258

254259
$video-feed-secondary-background: #394049; // XXX: Color from dark theme
260+
$voipcall-plinth-color: $system;
255261
// ********************
256262

257263
// One-off colors
258264
// ********************
265+
$progressbar-bg-color: $panel-actions;
266+
$kbd-border-color: $reaction-row-button-border-color;
259267
$visual-bell-bg-color: #faa;
260268
$event-timestamp-color: #acacac;
261269
$slider-background-color: $togglesw-off-color;
262-
$breadcrumb-placeholder-bg-color: #e8eef5;
263-
$primary-hairline-color: transparent;
264-
$composer-shadow-color: rgba(0, 0, 0, 0.04);
265-
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
266-
$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
267-
$resend-button-divider-color: $input-darker-bg-color;
268270
$appearance-tab-border-color: $input-darker-bg-color;
269-
$pinned-color: $tertiary-content;
270-
$avatar-initial-color: $background;
271+
$composer-shadow-color: rgba(0, 0, 0, 0.04);
272+
$breadcrumb-placeholder-bg-color: #e8eef5;
271273
$theme-button-bg-color: $quinary-content;
272-
$selected-color: $secondary-accent-color;
274+
$resend-button-divider-color: $input-darker-bg-color;
273275
$codeblock-background-color: $header-panel-bg-color;
274-
$kbd-border-color: $reaction-row-button-border-color;
276+
$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
277+
$selected-color: $secondary-accent-color;
275278
// ********************
276279

280+
// One-off global colors - these apply to both themes
277281
// ********************
282+
$pinned-color: $tertiary-content;
283+
$avatar-initial-color: $background;
284+
$primary-hairline-color: transparent;
278285
$focus-brightness: 105%;
279286
// ********************
280287

0 commit comments

Comments
 (0)