Merge pull request #6606 from SimonBrandner/fix/toast-colors

Fix toast colors

Author: James Salter

res/css/structures/_ToastContainer.scss

@@ -28,7 +28,7 @@ limitations under the License.
         margin: 0 4px;
         grid-row: 2 / 4;
         grid-column: 1;
-        background-color: $toast-bg-color;
+        background-color: $system;
         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
     }
@@ -37,7 +37,7 @@ limitations under the License.
         grid-row: 1 / 3;
         grid-column: 1;
         color: $primary-fg-color;
-        background-color: $toast-bg-color;
+        background-color: $system;
         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
         overflow: hidden;

res/css/views/voip/_CallView.scss

@@ -39,7 +39,7 @@ limitations under the License.
 .mx_CallView_pip {
     width: 320px;
     padding-bottom: 8px;
-    background-color: $toast-bg-color;
+    background-color: $system;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
     border-radius: 8px;
 

res/themes/dark/css/_dark.scss

@@ -7,9 +7,9 @@ $secondary-content: #A9B2BC;
 $tertiary-content: #8E99A4;
 $quaternary-content: #6F7882;
 $quinary-content: #394049;
-$system-dark: #21262C;
+$system: #21262C;
 $background: #15191E;
-$panels: rgba($system-dark, 0.9);
+$panels: rgba($system, 0.9);
 $panel-base: #8D97A5; // This color is not intended for use in the app
 $panel-selected: rgba($panel-base, 0.3);
 $panel-hover: rgba($panel-base, 0.1);
@@ -67,7 +67,7 @@ $inverted-bg-color: $base-color;
 $selected-color: $room-highlight-color;
 
 // selected for hoverover & selected event tiles
-$event-selected-color: $system-dark;
+$event-selected-color: $system;
 
 // used for the hairline dividers in RoomView
 $primary-hairline-color: transparent;
@@ -111,7 +111,7 @@ $lightbox-background-bg-color: #000;
 $lightbox-background-bg-opacity: 0.85;
 
 $settings-grey-fg-color: #a2a2a2;
-$settings-profile-placeholder-bg-color: $system-dark;
+$settings-profile-placeholder-bg-color: $system;
 $settings-profile-overlay-placeholder-fg-color: #454545;
 $settings-profile-button-bg-color: #e7e7e7;
 $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
@@ -132,8 +132,6 @@ $eventtile-meta-color: $roomtopic-color;
 $header-divider-color: $header-panel-text-primary-color;
 $composer-e2e-icon-color: $header-panel-text-primary-color;
 
-$toast-bg-color: $quinary-content;
-
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
@@ -194,7 +192,7 @@ $button-link-bg-color: transparent;
 $togglesw-off-color: $room-highlight-color;
 
 $progressbar-fg-color: $accent-color;
-$progressbar-bg-color: $system-dark;
+$progressbar-bg-color: $system;
 
 $visual-bell-bg-color: #800;
 
@@ -229,7 +227,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 $message-body-panel-fg-color: $secondary-fg-color;
 $message-body-panel-bg-color: $quinary-content;
 $message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $system-dark; // "System Dark"
+$message-body-panel-icon-bg-color: $system; // "System Dark"
 
 $voice-record-stop-border-color: $quaternary-fg-color;
 $voice-record-waveform-incomplete-fg-color: $quaternary-fg-color;

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -1,3 +1,6 @@
+// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
+$system: #21262C;
+
 // unified palette
 // try to use these colors when possible
 $bg-color: #181b21;
@@ -111,9 +114,6 @@ $eventtile-meta-color: $roomtopic-color;
 $header-divider-color: $header-panel-text-primary-color;
 $composer-e2e-icon-color: $header-panel-text-primary-color;
 
-$quinary-content-color: #394049;
-$toast-bg-color: $quinary-content-color;
-
 // ********************
 
 $theme-button-bg-color: #e3e8f0;

res/themes/legacy-light/css/_legacy-light.scss

@@ -13,7 +13,7 @@ $font-family: 'Nunito', '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=557%3A0
-$system-light: #F4F6FA;
+$system: #F4F6FA;
 
 // unified palette
 // try to use these colors when possible
@@ -181,8 +181,7 @@ $eventtile-meta-color: $roomtopic-color;
 $composer-e2e-icon-color: #91a1c0;
 $header-divider-color: #91a1c0;
 
-$toast-bg-color: $system-light;
-$voipcall-plinth-color: $system-light;
+$voipcall-plinth-color: $system;
 
 // ********************
 
@@ -334,7 +333,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 $message-body-panel-fg-color: $secondary-fg-color;
 $message-body-panel-bg-color: #E3E8F0;
 $message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $system-light;
+$message-body-panel-icon-bg-color: $system;
 
 // See non-legacy _light for variable information
 $voice-record-stop-symbol-color: #ff4b55;
@@ -352,7 +351,7 @@ $composer-shadow-color: tranparent;
 
 // Bubble tiles
 $eventbubble-self-bg: #F0FBF8;
-$eventbubble-others-bg: $system-light;
+$eventbubble-others-bg: $system;
 $eventbubble-bg-hover: #FAFBFD;
 $eventbubble-avatar-outline: #fff;
 $eventbubble-reply-color: #C1C6CD;

res/themes/light/css/_light.scss

@@ -21,9 +21,9 @@ $secondary-content: #737D8C;
 $tertiary-content: #8D97A5;
 $quaternary-content: #c1c6cd;
 $quinary-content: #E3E8F0;
-$system-light: #F4F6FA;
+$system: #F4F6FA;
 $background: #ffffff;
-$panels: rgba($system-light, 0.9);
+$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);
@@ -157,7 +157,7 @@ $blockquote-bar-color: #ddd;
 $blockquote-fg-color: #777;
 
 $settings-grey-fg-color: #a2a2a2;
-$settings-profile-placeholder-bg-color: $system-light;
+$settings-profile-placeholder-bg-color: $system;
 $settings-profile-overlay-placeholder-fg-color: #2e2f32;
 $settings-profile-button-bg-color: #e7e7e7;
 $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
@@ -186,8 +186,7 @@ $eventtile-meta-color: $roomtopic-color;
 $composer-e2e-icon-color: #91A1C0;
 $header-divider-color: #91A1C0;
 
-$toast-bg-color: $system-light;
-$voipcall-plinth-color: $system-light;
+$voipcall-plinth-color: $system;
 
 // ********************
 
@@ -346,7 +345,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 $message-body-panel-fg-color: $secondary-fg-color;
 $message-body-panel-bg-color: $quinary-content;
 $message-body-panel-icon-fg-color: $secondary-fg-color;
-$message-body-panel-icon-bg-color: $system-light;
+$message-body-panel-icon-bg-color: $system;
 
 // These two don't change between themes. They are the $warning-color, but we don't
 // want custom themes to affect them by accident.
@@ -370,7 +369,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.04);
 
 // Bubble tiles
 $eventbubble-self-bg: #F0FBF8;
-$eventbubble-others-bg: $system-light;
+$eventbubble-others-bg: $system;
 $eventbubble-bg-hover: #FAFBFD;
 $eventbubble-avatar-outline: $primary-bg-color;
 $eventbubble-reply-color: $quaternary-content;