Reorganize theme files (#7130)

res/themes/dark/css/_dark.scss

@@ -1,4 +1,5 @@
 // Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
+// ********************
 $accent: #0DBD8B;
 $alert: #FF5B55;
 $links: #0086e6;
@@ -15,182 +16,198 @@ $panel-selected: rgba($panel-base, 0.3);
 $panel-hover: rgba($panel-base, 0.1);
 $panel-actions: rgba($panel-base, 0.2);
 $space-nav: rgba($panel-base, 0.1);
+// ********************
 
-// TODO: Move userId colors here
+// Reused Figma non-compound colors
-
+// ********************
-// unified palette
+$inverted-bg-color: $background;
-// try to use these colors when possible
 $header-panel-bg-color: #20252B;
+// ********************
+
+// Theme specific colors
+// ********************
+$icon-button-color: $tertiary-content;
+// ********************
+
+// Colors that aren't in Figma - we need to get rid of these
+// ********************
 $header-panel-text-primary-color: #B9BEC6;
-$header-panel-text-secondary-color: #c8c8cd;
 $text-secondary-color: #B9BEC6;
+$header-panel-text-secondary-color: #c8c8cd;
 $room-highlight-color: #343a46;
-
+$info-plinth-fg-color: #888;
-// typical text (dark-on-white in light skin)
+$event-highlight-bg-color: #25271F;
-$muted-fg-color: $header-panel-text-primary-color;
+$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
-
+$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
-// used for dialog box text
+$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
-$light-fg-color: $header-panel-text-secondary-color;
+$event-selected-color: $system;
-
+$progressbar-bg-color: $system;
-// used for focusing form controls
+$topleftmenu-color: $primary-content;
+$roomheader-color: $primary-content;
+$roomheader-addroom-fg-color: $primary-content;
+$h3-color: $primary-content;
 $focus-bg-color: $room-highlight-color;
+$roomtopic-color: $text-secondary-color;
+$light-fg-color: $header-panel-text-secondary-color;
+$composer-e2e-icon-color: $header-panel-text-primary-color;
+$header-divider-color: $header-panel-text-primary-color;
+$groupFilterPanel-button-color: $header-panel-text-primary-color;
+$groupheader-button-color: $header-panel-text-primary-color;
+$rightpanel-button-color: $header-panel-text-primary-color;
+$muted-fg-color: $header-panel-text-primary-color;
+$info-plinth-bg-color: $header-panel-bg-color;
+$dark-panel-bg-color: $header-panel-bg-color;
+$preview-bar-bg-color: $header-panel-bg-color;
+// ********************
 
-$other-user-pill-bg-color: $room-highlight-color;
+// Settings
+// ********************
+$settings-grey-fg-color: #a2a2a2;
+$settings-profile-overlay-placeholder-fg-color: #454545;
+$settings-profile-button-bg-color: #e7e7e7;
+$settings-subsection-fg-color: $text-secondary-color;
+// ********************
+
+// Rich-text editor
+// ********************
 $rte-room-pill-color: $room-highlight-color;
 $rte-group-pill-color: $room-highlight-color;
+// ********************
 
-// informational plinth
+// Inputs
-$info-plinth-bg-color: $header-panel-bg-color;
+// ********************
-$info-plinth-fg-color: #888;
-
-$preview-bar-bg-color: $header-panel-bg-color;
-
-$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
-$inverted-bg-color: $background;
-
-// used by AddressSelector
-$selected-color: $room-highlight-color;
-
-// selected for hoverover & selected event tiles
-$event-selected-color: $system;
-
-// used for the hairline dividers in RoomView
-$primary-hairline-color: transparent;
-
-// used for the border of input text fields
 $input-border-color: rgba(231, 231, 231, 0.2);
 $input-darker-bg-color: #181b21;
 $input-darker-fg-color: #61708b;
 $input-lighter-bg-color: #f2f5f8;
 $input-focused-border-color: #238cf5;
+// ********************
 
-$resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity.
+// Menu
-
+// ********************
-// scrollbars
-$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
-
-// context menus
 $menu-border-color: #000000;
 $menu-bg-color: $header-panel-bg-color;
 $menu-box-shadow-color: $background;
 $menu-selected-color: $room-highlight-color;
+// ********************
 
-$avatar-initial-color: #ffffff;
+// Dialogs
-
+// ********************
-$h3-color: $primary-content;
-
 $dialog-title-fg-color: $primary-content;
 $dialog-backdrop-color: #000;
 $dialog-shadow-color: rgba(0, 0, 0, 0.48);
 $dialog-close-fg-color: #9fa9ba;
-
-$lightbox-background-bg-color: #000;
-$lightbox-background-bg-opacity: 0.85;
-
-$settings-grey-fg-color: #a2a2a2;
-$settings-profile-overlay-placeholder-fg-color: #454545;
-$settings-profile-button-bg-color: #e7e7e7;
-$settings-subsection-fg-color: $text-secondary-color;
-
-$topleftmenu-color: $primary-content;
-$roomheader-color: $primary-content;
-$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
-$roomheader-addroom-fg-color: $primary-content;
-$groupFilterPanel-button-color: $header-panel-text-primary-color;
-$groupheader-button-color: $header-panel-text-primary-color;
-$rightpanel-button-color: $header-panel-text-primary-color;
-$icon-button-color: $tertiary-content;
-$roomtopic-color: $text-secondary-color;
-
-$header-divider-color: $header-panel-text-primary-color;
-$composer-e2e-icon-color: $header-panel-text-primary-color;
-
 // ********************
 
-$theme-button-bg-color: #e3e8f0;
+// Lightbox
+// ********************
+$lightbox-background-bg-color: #000;
+$lightbox-background-bg-opacity: 0.85;
+// ********************
 
+// RoomList
+// ********************
 $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
 $roomlist-bg-color: rgba(33, 38, 44, 0.90);
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
-
 $roomtile-default-badge-bg-color: #61708b;
-
 // ********************
 
+// Widgets
+// ********************
 $widget-menu-bar-bg-color: $header-panel-bg-color;
 $widget-body-bg-color: rgba(141, 151, 165, 0.2);
-
+// ********************
-$event-highlight-bg-color: #25271F;
-
-// event timestamp
-$event-timestamp-color: $text-secondary-color;
 
 // Tabbed views
+// ********************
 $tab-label-fg-color: $primary-content;
 $tab-label-active-fg-color: $primary-content;
 $tab-label-active-icon-bg-color: $primary-content;
+// ********************
 
 // Buttons
+// ********************
 $button-primary-fg-color: $primary-content;
 $button-secondary-bg-color: transparent;
 $button-danger-fg-color: $primary-content;
 $button-danger-disabled-fg-color: $primary-content;
 $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
+// ********************
 
 // Toggle switch
+// ********************
 $togglesw-off-color: $room-highlight-color;
+// ********************
 
-// Slider
+// Authpage
-$slider-background-color: $quinary-content;
+// ********************
-
-$progressbar-bg-color: $system;
-
-$visual-bell-bg-color: #800;
-
 $authpage-primary-color: $primary-content;
+// ********************
 
-$dark-panel-bg-color: $header-panel-bg-color;
+// Message action bar
-$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
+// ********************
-
 $message-action-bar-bg-color: $header-panel-bg-color;
 $message-action-bar-fg-color: $header-panel-text-primary-color;
 $message-action-bar-border-color: #616b7f;
 $message-action-bar-hover-border-color: $header-panel-text-primary-color;
+// ********************
 
+// Reaction row
+// ********************
 $reaction-row-button-border-color: #616b7f;
 $reaction-row-button-hover-border-color: $header-panel-text-primary-color;
 $reaction-row-button-selected-bg-color: #1f6954;
+// ********************
 
-$kbd-border-color: #000000;
+// Tooltips
-
+// ********************
 $tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
 $tooltip-timeline-fg-color: $primary-content;
+// ********************
 
-$breadcrumb-placeholder-bg-color: #272c35;
+// Voice messages
-
+// ********************
 $voice-record-stop-border-color: $quaternary-content;
 $voice-record-icon-color: $quaternary-content;
-
+// ********************
-// Appearance tab colors
-$appearance-tab-border-color: $room-highlight-color;
-
-// blur amounts for left left panel (only for element theme)
-:root {
-    --lp-background-blur: 45px;
-}
-
-$composer-shadow-color: rgba(0, 0, 0, 0.28);
-
-$codeblock-background-color: #2a3039;
 
 // Bubble tiles
+// ********************
 $eventbubble-self-bg: #14322E;
 $eventbubble-others-bg: $event-selected-color;
 $eventbubble-bg-hover: #1C2026;
 $eventbubble-reply-color: #C1C6CD;
+// ********************
 
-// ***** Mixins! *****
+// One-off colors
+// ********************
+$kbd-border-color: #000000;
+$visual-bell-bg-color: #800;
+$avatar-initial-color: #ffffff;
+$theme-button-bg-color: #e3e8f0;
+$codeblock-background-color: #2a3039;
+$resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity.
+$breadcrumb-placeholder-bg-color: #272c35;
+$composer-shadow-color: rgba(0, 0, 0, 0.28);
+$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
+$primary-hairline-color: transparent;
+$slider-background-color: $quinary-content;
+$event-timestamp-color: $text-secondary-color;
+$selected-color: $room-highlight-color;
+$other-user-pill-bg-color: $room-highlight-color;
+$appearance-tab-border-color: $room-highlight-color;
+// ********************
 
+// blur amounts for left left panel (only for element theme)
+// ********************
+:root {
+    --lp-background-blur: 45px;
+}
+// ********************
+
+// Mixins
+// ********************
 @define-mixin mx_DialogButton {
     /* align images in buttons (eg spinners) */
     vertical-align: middle;
@@ -225,15 +242,19 @@ $eventbubble-reply-color: #C1C6CD;
     color: $accent;
     text-decoration: none;
 }
+// ********************
 
 // Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
 // better match the theme.  Typically applied to dark grey 'off' buttons or
 // light grey 'on' buttons.
+// ********************
 .mx_filterFlipColor {
     filter: invert(1);
 }
+// ********************
 
-// markdown overrides:
+// markdown overrides
+// ********************
 .mx_EventTile_content .markdown-body {
     table {
         tr {
@@ -245,8 +266,10 @@ $eventbubble-reply-color: #C1C6CD;
         }
     }
 }
+// ********************
 
-// highlight.js overrides
+// diff highlight colors
+// ********************
 .hljs-tag {
     color: inherit; // Without this they'd be weirdly blue which doesn't match the theme
 }
@@ -258,3 +281,4 @@ $eventbubble-reply-color: #C1C6CD;
 .hljs-deletion {
     background: #53232a;
 }
+// ********************

res/themes/light/css/_light.scss

@@ -13,6 +13,7 @@ $font-family: 'Inter', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial'
 $monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji';
 
 // Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120
+// ********************
 $accent: #0DBD8B;
 $alert: #FF5B55;
 $links: #0086e6;
@@ -29,142 +30,6 @@ $panel-hover: rgba($tertiary-content, 0.1);
 $panel-actions: rgba($tertiary-content, 0.2);
 $space-nav: rgba($tertiary-content, 0.15);
 
-// TODO: Move userId colors here
-
-// unified palette
-// try to use these colors when possible
-$header-panel-bg-color: #f3f8fd;
-
-// typical text (dark-on-white in light skin)
-$muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
-
-// used for dialog box text
-$light-fg-color: #747474;
-
-// used for focusing form controls
-$focus-bg-color: #dddddd;
-
-// button UI (white-on-green in light skin)
-$accent-fg-color: $background;
-$accent-alt: #238CF5;
-
-$selection-fg-color: $background;
-
-$focus-brightness: 105%;
-
-$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
-
-// informational plinth
-$info-plinth-bg-color: #f7f7f7;
-$info-plinth-fg-color: #888;
-
-$preview-bar-bg-color: #f7f7f7;
-
-// left-panel style muted accent color
-$secondary-accent-color: #f2f5f8;
-$tertiary-accent-color: #d3efe1;
-
-$groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
-
-// used by AddressSelector
-$selected-color: $secondary-accent-color;
-
-// selected for hoverover & selected event tiles
-$event-selected-color: #f6f7f8;
-
-// used for the hairline dividers in RoomView
-$primary-hairline-color: transparent;
-
-// used for the border of input text fields
-$input-border-color: #e7e7e7;
-$input-darker-bg-color: $quinary-content;
-$input-darker-fg-color: #9fa9ba;
-$input-lighter-bg-color: #f2f5f8;
-$input-focused-border-color: #238cf5;
-
-$button-fg-color: white;
-
-$resend-button-divider-color: $input-darker-bg-color;
-
-// apart from login forms, which have stronger border
-$strong-input-border-color: #c7c7c7;
-
-// used for UserSettings EditableText
-$input-underline-color: rgba(151, 151, 151, 0.5);
-$input-fg-color: rgba(74, 74, 74, 0.9);
-// scrollbars
-$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
-// context menus
-$menu-border-color: #e7e7e7;
-$menu-bg-color: #fff;
-$menu-box-shadow-color: rgba(118, 131, 156, 0.6);
-$menu-selected-color: #f5f8fa;
-
-$avatar-initial-color: $background;
-
-$h3-color: #3d3b39;
-
-$dialog-title-fg-color: #45474a;
-$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
-$dialog-shadow-color: rgba(0, 0, 0, 0.48);
-$dialog-close-fg-color: #c1c1c1;
-
-$lightbox-background-bg-color: #000;
-$lightbox-background-bg-opacity: 0.95;
-
-$imagebody-giflabel: rgba(0, 0, 0, 0.7);
-$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
-$imagebody-giflabel-color: rgba(255, 255, 255, 1);
-
-$greyed-fg-color: #888;
-
-$neutral-badge-color: #dbdbdb;
-
-$preview-widget-bar-color: #ddd;
-
-$blockquote-bar-color: #ddd;
-$blockquote-fg-color: #777;
-
-$settings-grey-fg-color: #a2a2a2;
-$settings-profile-overlay-placeholder-fg-color: #2e2f32;
-$settings-profile-button-bg-color: #e7e7e7;
-$settings-subsection-fg-color: #61708b;
-
-$rte-bg-color: #e9e9e9;
-$rte-code-bg-color: rgba(0, 0, 0, 0.04);
-$rte-room-pill-color: #aaa;
-$rte-group-pill-color: #aaa;
-
-$topleftmenu-color: #212121;
-$roomheader-color: #45474a;
-$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
-$roomheader-addroom-fg-color: #5c6470;
-$groupFilterPanel-button-color: #91A1C0;
-$groupheader-button-color: #91A1C0;
-$rightpanel-button-color: #91A1C0;
-$icon-button-color: $quaternary-content;
-$roomtopic-color: #9e9e9e;
-
-$composer-e2e-icon-color: #91A1C0;
-$header-divider-color: #91A1C0;
-
-$voipcall-plinth-color: $system;
-
-// ********************
-
-$theme-button-bg-color: $quinary-content;
-
-$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
-$roomlist-bg-color: rgba(245, 245, 245, 0.90);
-$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
-
-$roomtile-default-badge-bg-color: #61708b;
-
-$presence-away: #d9b072;
-$presence-offline: $quinary-content;
-
-// ********************
-
 $username-variant1-color: #368bd6;
 $username-variant2-color: #ac3ba8;
 $username-variant3-color: #0DBD8B;
@@ -173,124 +38,271 @@ $username-variant5-color: #ff812d;
 $username-variant6-color: #2dc2c5;
 $username-variant7-color: #5c56f5;
 $username-variant8-color: #74d12c;
-
-// pinned events indicator
-$pinned-color: $tertiary-content;
-
 // ********************
 
+// Reused Figma non-compound colors
+// ********************
+$inverted-bg-color: #27303a;
+$header-panel-bg-color: #f3f8fd;
+// ********************
+
+// Theme specific colors
+// ********************
+$icon-button-color: $quaternary-content;
+// ********************
+
+// Colors that aren't in Figma - we need to get rid of these
+// ********************
+$muted-fg-color: #61708b;
+$light-fg-color: #747474;
+$focus-bg-color: #dddddd;
+$info-plinth-bg-color: #f7f7f7;
+$info-plinth-fg-color: #888;
+$preview-bar-bg-color: #f7f7f7;
+$secondary-accent-color: #f2f5f8;
+$tertiary-accent-color: #d3efe1;
+$event-selected-color: #f6f7f8;
+$button-fg-color: white;
+$h3-color: #3d3b39;
+$yellow-background: #fff8e3;
+$greyed-fg-color: #888;
+$event-notsent-color: #f44;
+$accent-alt: #238CF5;
+$strong-input-border-color: #c7c7c7;
+$neutral-badge-color: #dbdbdb;
+$preview-widget-bar-color: #ddd;
+$topleftmenu-color: #212121;
+$groupFilterPanel-button-color: #91A1C0;
+$groupheader-button-color: #91A1C0;
+$rightpanel-button-color: #91A1C0;
+$roomtopic-color: #9e9e9e;
+$composer-e2e-icon-color: #91A1C0;
+$header-divider-color: #91A1C0;
+$groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
+$progressbar-bg-color: rgba(141, 151, 165, 0.2);
+$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
+$accent-fg-color: $background;
+$selection-fg-color: $background;
+$dark-panel-bg-color: $secondary-accent-color;
+$event-highlight-bg-color: $yellow-background;
+$memberstatus-placeholder-color: $muted-fg-color;
+// ********************
+
+// Blockquote
+// ********************
+$blockquote-bar-color: #ddd;
+$blockquote-fg-color: #777;
+// ********************
+
+// Tooltip
+// ********************
+$tooltip-timeline-bg-color: $inverted-bg-color;
+$tooltip-timeline-fg-color: $background;
+// ********************
+
+// Widget
+// ********************
 $widget-menu-bar-bg-color: $secondary-accent-color;
 $widget-body-bg-color: #FFF;
-
 // ********************
 
-// $event-highlight-bg-color shares this value,
+// Menu
-// so to not make their order dependent on who depends on who, have a shared value
+// ********************
-// defined before both
+$menu-border-color: #e7e7e7;
-$yellow-background: #fff8e3;
+$menu-bg-color: #fff;
+$menu-box-shadow-color: rgba(118, 131, 156, 0.6);
+$menu-selected-color: #f5f8fa;
+// ********************
 
-// event tile lifecycle
+// Settings
-$event-notsent-color: #f44;
+// ********************
+$settings-grey-fg-color: #a2a2a2;
+$settings-profile-overlay-placeholder-fg-color: #2e2f32;
+$settings-profile-button-bg-color: #e7e7e7;
+$settings-subsection-fg-color: #61708b;
+// ********************
 
-$event-highlight-bg-color: $yellow-background;
+// RoomHeader
+// ********************
+$roomheader-color: #45474a;
+$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
+$roomheader-addroom-fg-color: #5c6470;
+// ********************
 
-// event timestamp
+// Rich-text-editor
-$event-timestamp-color: #acacac;
+// ********************
+$rte-bg-color: #e9e9e9;
+$rte-code-bg-color: rgba(0, 0, 0, 0.04);
+$rte-room-pill-color: #aaa;
+$rte-group-pill-color: #aaa;
+// ********************
 
-$copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
+// Presence
-$collapse-button-url: "$(res)/img/feather-customised/minimise.svg";
+// ********************
-$expand-button-url: "$(res)/img/feather-customised/maximise.svg";
+$presence-away: #d9b072;
+$presence-offline: $quinary-content;
+// ********************
+
+// Inputs
+// ********************
+$input-underline-color: rgba(151, 151, 151, 0.5);
+$input-fg-color: rgba(74, 74, 74, 0.9);
+$input-border-color: #e7e7e7;
+$input-darker-bg-color: $quinary-content;
+$input-darker-fg-color: #9fa9ba;
+$input-lighter-bg-color: #f2f5f8;
+$input-focused-border-color: #238cf5;
+// ********************
+
+// Dialog
+// ********************
+$dialog-title-fg-color: #45474a;
+$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
+$dialog-shadow-color: rgba(0, 0, 0, 0.48);
+$dialog-close-fg-color: #c1c1c1;
+// ********************
+
+// ImageBody
+// ********************
+$imagebody-giflabel: rgba(0, 0, 0, 0.7);
+$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
+$imagebody-giflabel-color: rgba(255, 255, 255, 1);
+// ********************
+
+// RoomList
+// ********************
+$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons
+$roomlist-bg-color: rgba(245, 245, 245, 0.90);
+$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
+$roomtile-default-badge-bg-color: #61708b;
+// ********************
 
 // e2e
+// ********************
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent
 $e2e-unknown-color: #e8bf37;
 $e2e-unverified-color: #e8bf37;
 $e2e-warning-color: #ba6363;
-
+// ********************
-/*** ImageView ***/
-$lightbox-bg-color: #454545;
-$lightbox-fg-color: #ffffff;
-$lightbox-border-color: #ffffff;
 
 // Tabbed views
+// ********************
 $tab-label-fg-color: #45474a;
 $tab-label-active-fg-color: $background;
 $tab-label-active-icon-bg-color: $tab-label-active-fg-color;
+// ********************
 
 // Buttons
+// ********************
 $button-primary-fg-color: #ffffff;
 $button-secondary-bg-color: $accent-fg-color;
 $button-danger-fg-color: $background;
 $button-danger-disabled-fg-color: $background;
 $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
-
+// ********************
-$visual-bell-bg-color: #faa;
 
 // Toggle switch
+// ********************
 $togglesw-off-color: #c1c9d6;
 $togglesw-ball-color: #fff;
+// ********************
 
-// Slider
+// Authpage
-$slider-background-color: #c1c9d6;
+// ********************
-
-$progressbar-bg-color: rgba(141, 151, 165, 0.2);
-
-$memberstatus-placeholder-color: $muted-fg-color;
-
 $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: rgba(245, 245, 245, 0.90);
 $authpage-focus-bg-color: #dddddd;
 $authpage-lang-color: #4e5054;
 $authpage-primary-color: #232f32;
 $authpage-secondary-color: #61708b;
+// ********************
 
-$dark-panel-bg-color: $secondary-accent-color;
+// Message action bar
-$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
+// ********************
-
 $message-action-bar-bg-color: $background;
 $message-action-bar-fg-color: $primary-content;
 $message-action-bar-border-color: #e9edf1;
 $message-action-bar-hover-border-color: $focus-bg-color;
+// ********************
 
+// Reaction row
+// ********************
 $reaction-row-button-border-color: #e9edf1;
 $reaction-row-button-hover-border-color: $focus-bg-color;
 $reaction-row-button-selected-bg-color: #e9fff9;
+// ********************
 
-$kbd-border-color: $reaction-row-button-border-color;
+// Voice messages
-
+// ********************
-$inverted-bg-color: #27303a;
+// These two don't change between themes. They are the $alert, but we don't want
-$tooltip-timeline-bg-color: $inverted-bg-color;
+// custom themes to affect them by accident.
-$tooltip-timeline-fg-color: $background;
-
-$breadcrumb-placeholder-bg-color: #e8eef5;
-
-// These two don't change between themes. They are the $alert, but we don't
-// want custom themes to affect them by accident.
 $voice-record-stop-symbol-color: #ff5b55;
 $voice-record-live-circle-color: #ff5b55;
-
 $voice-record-stop-border-color: $quinary-content;
 $voice-record-icon-color: $tertiary-content;
-
+// ********************
-// FontSlider colors
-$appearance-tab-border-color: $input-darker-bg-color;
-
-// blur amounts for left left panel (only for element theme)
-:root {
-    --lp-background-blur: 40px;
-}
-$composer-shadow-color: rgba(0, 0, 0, 0.04);
-
-$codeblock-background-color: $header-panel-bg-color;
 
 // Bubble tiles
+// ********************
 $eventbubble-self-bg: #F0FBF8;
 $eventbubble-others-bg: $system;
 $eventbubble-bg-hover: #FAFBFD;
 $eventbubble-reply-color: $quaternary-content;
+// ********************
 
-// ***** Mixins! *****
+// Lightbox
+// ********************
+$lightbox-fg-color: #ffffff;
+$lightbox-background-bg-color: #000;
+$lightbox-background-bg-opacity: 0.95;
+// ********************
 
+// VoIP
+// ********************
+$voipcall-plinth-color: $system;
+// more colors to come
+// ********************
+
+// One-off colors
+// ********************
+$visual-bell-bg-color: #faa;
+$event-timestamp-color: #acacac;
+$slider-background-color: #c1c9d6;
+$breadcrumb-placeholder-bg-color: #e8eef5;
+$primary-hairline-color: transparent;
+$composer-shadow-color: rgba(0, 0, 0, 0.04);
+$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
+$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
+$resend-button-divider-color: $input-darker-bg-color;
+$appearance-tab-border-color: $input-darker-bg-color;
+$pinned-color: $tertiary-content;
+$avatar-initial-color: $background;
+$theme-button-bg-color: $quinary-content;
+$selected-color: $secondary-accent-color;
+$codeblock-background-color: $header-panel-bg-color;
+$kbd-border-color: $reaction-row-button-border-color;
+// ********************
+
+// ********************
+$focus-brightness: 105%;
+// ********************
+
+// blur amounts for left left panel (only for element theme)
+// ********************
+:root {
+    --lp-background-blur: 40px;
+}
+// ********************
+
+// Icon URLs
+// ********************
+$copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
+$collapse-button-url: "$(res)/img/feather-customised/minimise.svg";
+$expand-button-url: "$(res)/img/feather-customised/maximise.svg";
+// ********************
+
+// Mixins
+// ********************
 @define-mixin mx_DialogButton {
     /* align images in buttons (eg spinners) */
     vertical-align: middle;
@@ -334,8 +346,10 @@ $eventbubble-reply-color: $quaternary-content;
     color: $accent;
     text-decoration: none;
 }
+// ********************
 
 // diff highlight colors
+// ********************
 .hljs-addition {
     background: #dfd;
 }
@@ -343,3 +357,4 @@ $eventbubble-reply-color: $quaternary-content;
 .hljs-deletion {
     background: #fdd;
 }
+// ********************