Task/colors 12 (reorganize theme files again) (#7212)

res/themes/dark/css/_dark.scss

@@ -1,17 +1,16 @@
 // Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
 // ********************
-$accent: #0DBD8B;
-$alert: #FF5B55;
-$links: #0086e6;
 $primary-content: #ffffff;
 $secondary-content: #A9B2BC;
 $tertiary-content: #8E99A4;
 $quaternary-content: #6F7882;
 $quinary-content: #394049;
+
 $system: #21262C;
 $background: #15191E;
-$panels: rgba($system, 0.9);
+
 $panel-base: #8D97A5; // This color is not intended for use in the app
+$panels: rgba($system, 0.9);
 $panel-selected: rgba($panel-base, 0.3);
 $panel-hover: rgba($panel-base, 0.1);
 $panel-actions: rgba($panel-base, 0.2);
@@ -29,48 +28,40 @@ $header-panel-bg-color: #20252B;
 $icon-button-color: $tertiary-content;
 // ********************
 
-// Colors that aren't in Figma - we need to get rid of these
+// Colors that aren't in Figma and are theme specific - we need to get rid of these
 // ********************
-$header-panel-text-primary-color: #B9BEC6;
-$text-secondary-color: $header-panel-text-primary-color;
 $header-panel-text-secondary-color: #c8c8cd;
 $room-highlight-color: #343a46;
-$event-highlight-bg-color: #25271F;
+$text-secondary-color: #B9BEC6;
-$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
+// ********************
-$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
+
-$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
+// Colors that aren't in Figma - we need to get rid of these
-$event-selected-color: $system;
+// ********************
-$progressbar-bg-color: $system;
-$topleftmenu-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;
-$muted-fg-color: $header-panel-text-primary-color;
-$info-plinth-bg-color: $header-panel-bg-color;
 $dark-panel-bg-color: $header-panel-bg-color;
+$muted-fg-color: $header-panel-text-primary-color;
+$light-fg-color: $header-panel-text-secondary-color;
+$focus-bg-color: $room-highlight-color;
+$info-plinth-bg-color: $header-panel-bg-color;
+$event-selected-color: $system;
+$topleftmenu-color: $primary-content;
+$roomtopic-color: $text-secondary-color;
+$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
+$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
+$h3-color: $primary-content;
+$event-highlight-bg-color: #25271F;
+$header-panel-text-primary-color: $text-secondary-color;
 // ********************
 
-// Settings
+// Tooltip
 // ********************
-$settings-grey-fg-color: #a2a2a2;
+$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
-$settings-profile-overlay-placeholder-fg-color: #454545;
+$tooltip-timeline-fg-color: $primary-content;
-$settings-profile-button-bg-color: #e7e7e7;
-$settings-subsection-fg-color: $text-secondary-color;
 // ********************
 
-// Rich-text editor
+// Widget
 // ********************
-$rte-room-pill-color: $room-highlight-color;
+$widget-menu-bar-bg-color: $header-panel-bg-color;
-// ********************
+$widget-body-bg-color: $panel-actions;
-
-// Inputs
-// ********************
-$input-border-color: rgba(231, 231, 231, 0.2);
-$input-darker-bg-color: #181b21;
-$input-darker-fg-color: #61708b;
-$input-lighter-bg-color: #f2f5f8;
 // ********************
 
 // Menu
@@ -81,20 +72,40 @@ $menu-box-shadow-color: $background;
 $menu-selected-color: $room-highlight-color;
 // ********************
 
-// Dialogs
+// 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;
+// ********************
+
+// RoomHeader
+// ********************
+$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
+$roomheader-addroom-fg-color: $primary-content;
+// ********************
+// Rich-text-editor
+// ********************
+$rte-room-pill-color: $room-highlight-color;
+$other-user-pill-bg-color: $room-highlight-color;
+// ********************
+
+// Inputs
+// ********************
+$input-border-color: rgba(231, 231, 231, 0.2);
+$input-darker-bg-color: #181b21;
+$input-darker-fg-color: #61708b;
+$input-lighter-bg-color: #f2f5f8;
+// ********************
+
+// Dialog
 // ********************
 $dialog-title-fg-color: $primary-content;
 $dialog-backdrop-color: $menu-border-color;
-$dialog-shadow-color: rgba(0, 0, 0, 0.48);
 $dialog-close-fg-color: #9fa9ba;
 // ********************
 
-// Lightbox
-// ********************
-$lightbox-background-bg-color: $menu-border-color;
-$lightbox-background-bg-opacity: 0.85;
-// ********************
-
 // RoomList
 // ********************
 $roomlist-bg-color: rgba($system, 0.90);
@@ -102,12 +113,6 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%)
 $roomtile-default-badge-bg-color: $input-darker-fg-color;
 // ********************
 
-// Widgets
-// ********************
-$widget-menu-bar-bg-color: $header-panel-bg-color;
-$widget-body-bg-color: $panel-actions;
-// ********************
-
 // Tabbed views
 // ********************
 $tab-label-fg-color: $primary-content;
@@ -120,7 +125,6 @@ $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
@@ -148,12 +152,6 @@ $reaction-row-button-hover-border-color: $header-panel-text-primary-color;
 $reaction-row-button-selected-bg-color: #1f6954;
 // ********************
 
-// Tooltips
-// ********************
-$tooltip-timeline-bg-color: $groupFilterPanel-bg-color;
-$tooltip-timeline-fg-color: $primary-content;
-// ********************
-
 // Voice messages
 // ********************
 $voice-record-stop-border-color: $quaternary-content;
@@ -168,6 +166,12 @@ $eventbubble-bg-hover: #1C2026;
 $eventbubble-reply-color: #C1C6CD;
 // ********************
 
+// Lightbox
+// ********************
+$lightbox-background-bg-color: $menu-border-color;
+$lightbox-background-bg-opacity: 0.85;
+// ********************
+
 // VoIP
 // ********************
 $call-view-button-on-foreground: $primary-content;
@@ -180,21 +184,19 @@ $video-feed-secondary-background: $system;
 
 // One-off colors
 // ********************
+$progressbar-bg-color: $system;
 $kbd-border-color: $menu-border-color;
 $visual-bell-bg-color: #800;
-$avatar-initial-color: $primary-content;
-$theme-button-bg-color: #e3e8f0;
-$codeblock-background-color: #2a3039;
-$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74); // muted-text with a 0.74 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;
+$slider-background-color: $quinary-content;
-$other-user-pill-bg-color: $room-highlight-color;
 $appearance-tab-border-color: $room-highlight-color;
+$composer-shadow-color: rgba(0, 0, 0, 0.28);
+$breadcrumb-placeholder-bg-color: #272c35;
+$theme-button-bg-color: #e3e8f0;
+$resend-button-divider-color: rgba($header-panel-text-primary-color, 0.74);
+$codeblock-background-color: #2a3039;
+$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
+$selected-color: $room-highlight-color;
 // ********************
 
 // blur amounts for left left panel (only for element theme)

res/themes/light/css/_light.scss

@@ -14,22 +14,25 @@ $monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI
 
 // Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120
 // ********************
-$accent: #0DBD8B;
-$alert: #FF5B55;
-$links: #0086e6;
 $primary-content: #17191C;
 $secondary-content: #737D8C;
 $tertiary-content: #8D97A5;
 $quaternary-content: #c1c6cd;
 $quinary-content: #E3E8F0;
+
 $system: #F4F6FA;
 $background: #ffffff;
+
 $panels: rgba($system, 0.9);
 $panel-selected: rgba($tertiary-content, 0.3);
 $panel-hover: rgba($tertiary-content, 0.1);
 $panel-actions: rgba($tertiary-content, 0.2);
 $space-nav: rgba($tertiary-content, 0.15);
 
+$accent: #0DBD8B;
+$alert: #FF5B55;
+$links: #0086e6;
+
 $username-variant1-color: #368bd6;
 $username-variant2-color: #ac3ba8;
 $username-variant3-color: #0DBD8B;
@@ -51,32 +54,35 @@ $header-panel-bg-color: #f3f8fd;
 $icon-button-color: $quaternary-content;
 // ********************
 
+// Colors that aren't in Figma and are theme specific - we need to get rid of these
+// ********************
+$selection-fg-color: $background;
+$yellow-background:  #fff8e3;
+$secondary-accent-color: #f2f5f8;
+$button-fg-color: $background;
+$neutral-badge-color: #dbdbdb;
+$strong-input-border-color: #c7c7c7;
+$preview-widget-bar-color: #dddddd;
+$accent-fg-color: $background;
+$accent-alt: #238CF5;
+$info-plinth-fg-color: #888;
+// ********************
+
 // Colors that aren't in Figma - we need to get rid of these
 // ********************
-$header-panel-text-primary-color: #91A1C0;
+$dark-panel-bg-color: $secondary-accent-color;
 $muted-fg-color: #61708b;
 $light-fg-color: #747474;
-$focus-bg-color: #dddddd;
+$focus-bg-color: $preview-widget-bar-color;
 $info-plinth-bg-color: #f7f7f7;
-$info-plinth-fg-color: #888;
-$secondary-accent-color: #f2f5f8;
 $event-selected-color: #f6f7f8;
-$button-fg-color: $background;
-$h3-color: #3d3b39;
-$yellow-background: #fff8e3;
-$accent-alt: #238CF5;
-$strong-input-border-color: #c7c7c7;
-$neutral-badge-color: #dbdbdb;
-$preview-widget-bar-color: $focus-bg-color;
 $topleftmenu-color: #212121;
 $roomtopic-color: #9e9e9e;
 $groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77);
-$progressbar-bg-color: $panel-actions;
 $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
-$accent-fg-color: $background;
+$h3-color: #3d3b39;
-$selection-fg-color: $background;
-$dark-panel-bg-color: $secondary-accent-color;
 $event-highlight-bg-color: $yellow-background;
+$header-panel-text-primary-color: #91A1C0;
 // ********************
 
 // Blockquote
@@ -120,9 +126,10 @@ $roomheader-addroom-fg-color: #5c6470;
 
 // Rich-text-editor
 // ********************
+$rte-room-pill-color: #aaa;
+$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
 $rte-bg-color: #e9e9e9;
 $rte-code-bg-color: rgba(0, 0, 0, 0.04);
-$rte-room-pill-color: #aaa;
 // ********************
 
 // Presence
@@ -133,20 +140,20 @@ $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: $menu-border-color;
 $input-darker-bg-color: $quinary-content;
 $input-darker-fg-color: #9fa9ba;
 $input-lighter-bg-color: $secondary-accent-color;
+$input-underline-color: rgba(151, 151, 151, 0.5);
+$input-fg-color: rgba(74, 74, 74, 0.9);
 // ********************
 
 // 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;
+$dialog-shadow-color: rgba(0, 0, 0, 0.48);
 // ********************
 
 // ImageBody
@@ -194,11 +201,11 @@ $togglesw-ball-color: $background;
 
 // Authpage
 // ********************
+$authpage-primary-color: #232f32;
 $authpage-bg-color: #2e3649;
 $authpage-modal-bg-color: $roomlist-bg-color;
 $authpage-focus-bg-color: $focus-bg-color;
 $authpage-lang-color: #4e5054;
-$authpage-primary-color: #232f32;
 $authpage-secondary-color: $muted-fg-color;
 // ********************
 
@@ -244,37 +251,37 @@ $lightbox-background-bg-opacity: 0.95;
 
 // VoIP
 // ********************
-$voipcall-plinth-color: $system;
-
 $call-view-button-on-foreground: $secondary-content;
 $call-view-button-on-background: $background;
 $call-view-button-off-foreground: $background;
 $call-view-button-off-background: $secondary-content;
 
 $video-feed-secondary-background: #394049; // XXX: Color from dark theme
+$voipcall-plinth-color: $system;
 // ********************
 
 // One-off colors
 // ********************
+$progressbar-bg-color: $panel-actions;
+$kbd-border-color: $reaction-row-button-border-color;
 $visual-bell-bg-color: #faa;
 $event-timestamp-color: #acacac;
 $slider-background-color: $togglesw-off-color;
-$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;
+$composer-shadow-color: rgba(0, 0, 0, 0.04);
-$avatar-initial-color: $background;
+$breadcrumb-placeholder-bg-color: #e8eef5;
 $theme-button-bg-color: $quinary-content;
-$selected-color: $secondary-accent-color;
+$resend-button-divider-color: $input-darker-bg-color;
 $codeblock-background-color: $header-panel-bg-color;
-$kbd-border-color: $reaction-row-button-border-color;
+$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
+$selected-color: $secondary-accent-color;
 // ********************
 
+// One-off global colors - these apply to both themes
 // ********************
+$pinned-color: $tertiary-content;
+$avatar-initial-color: $background;
+$primary-hairline-color: transparent;
 $focus-brightness: 105%;
 // ********************