Merge pull request #6897 from SimonBrandner/task/colors-4

Color de-duplication #4

res/css/structures/_SpacePanel.scss

@@ -19,7 +19,7 @@ $nestedHeight: 24px;
 $gutterSize: 16px;
 $activeBorderTransparentGap: 1px;
 
-$activeBackgroundColor: $roomtile-selected-bg-color;
+$activeBackgroundColor: $panel-actions;
 $activeBorderColor: $secondary-content;
 
 .mx_SpacePanel {

res/css/views/beta/_BetaCard.scss

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_BetaCard {
     margin-bottom: 20px;
     padding: 24px;
-    background-color: $settings-profile-placeholder-bg-color;
+    background-color: $system;
     border-radius: 8px;
     box-sizing: border-box;
 

res/css/views/rooms/_RoomTile.scss

@@ -30,7 +30,7 @@ limitations under the License.
     &:hover,
     &:focus-within,
     &.mx_RoomTile_hasMenuOpen {
-        background-color: $roomtile-selected-bg-color;
+        background-color: $panel-actions;
         border-radius: 8px;
     }
 

res/css/views/settings/_AvatarSetting.scss

@@ -129,5 +129,5 @@ limitations under the License.
 }
 
 .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {
-    background-color: $settings-profile-placeholder-bg-color;
+    background-color: $system;
 }

res/themes/dark/css/_dark.scss

@@ -100,7 +100,6 @@ $lightbox-background-bg-color: #000;
 $lightbox-background-bg-opacity: 0.85;
 
 $settings-grey-fg-color: #a2a2a2;
-$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;
@@ -115,7 +114,6 @@ $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;
-$eventtile-meta-color: $roomtopic-color;
 
 $header-divider-color: $header-panel-text-primary-color;
 $composer-e2e-icon-color: $header-panel-text-primary-color;
@@ -134,7 +132,6 @@ $groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: $secondary-content;
 $roomtile-default-badge-bg-color: #61708b;
-$roomtile-selected-bg-color: rgba(141, 151, 165, 0.2);
 
 // ********************
 

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

@@ -23,13 +23,7 @@ $tertiary-fg-color: $primary-fg-color;
 $primary-bg-color: $bg-color;
 $muted-fg-color: $header-panel-text-primary-color;
 
-// Legacy theme backports
-$primary-content: $primary-fg-color;
-$secondary-content: $secondary-fg-color;
-$tertiary-content: $tertiary-fg-color;
-$quaternary-content: #6F7882;
-$quinary-content: $quaternary-content;
-$background: $primary-bg-color;
+
 
 // used for dialog box text
 $light-fg-color: $header-panel-text-secondary-color;
@@ -99,7 +93,6 @@ $lightbox-background-bg-color: #000;
 $lightbox-background-bg-opacity: 0.85;
 
 $settings-grey-fg-color: #a2a2a2;
-$settings-profile-placeholder-bg-color: #e7e7e7;
 $settings-profile-overlay-placeholder-fg-color: #454545;
 $settings-profile-button-bg-color: #e7e7e7;
 $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
@@ -114,7 +107,6 @@ $groupheader-button-color: $header-panel-text-primary-color;
 $rightpanel-button-color: $header-panel-text-primary-color;
 $icon-button-color: $header-panel-text-primary-color;
 $roomtopic-color: $text-secondary-color;
-$eventtile-meta-color: $roomtopic-color;
 
 $header-divider-color: $header-panel-text-primary-color;
 $composer-e2e-icon-color: $header-panel-text-primary-color;
@@ -223,6 +215,16 @@ $eventbubble-bg-hover: #1C2026;
 $eventbubble-avatar-outline: $bg-color;
 $eventbubble-reply-color: #C1C6CD;
 
+// Legacy theme backports
+$primary-content: $primary-fg-color;
+$secondary-content: $secondary-fg-color;
+$tertiary-content: $tertiary-fg-color;
+$quaternary-content: #6F7882;
+$quinary-content: $quaternary-content;
+$background: $primary-bg-color;
+$panel-actions: $roomtile-selected-bg-color;
+// Legacy theme backports
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

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

@@ -28,24 +28,6 @@ $tertiary-fg-color: $primary-fg-color;
 $primary-bg-color: #ffffff;
 $muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
 
-// Legacy theme backports
-$accent: #0DBD8B;
-$alert: #FF5B55;
-$links: #0086e6;
-$primary-content: $primary-fg-color;
-$secondary-content: $secondary-fg-color;
-$tertiary-content: $tertiary-fg-color;
-$quaternary-content: #C1C6CD;
-$quinary-content: #e3e8f0;
-$system: #F4F6FA;
-$background: $primary-bg-color;
-$panels: rgba($system, 0.9);
-$panel-base: #8D97A5; // This color is not intended for use in the app
-$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);
-
 // used for dialog box text
 $light-fg-color: #747474;
 
@@ -164,7 +146,6 @@ $blockquote-bar-color: #ddd;
 $blockquote-fg-color: #777;
 
 $settings-grey-fg-color: #a2a2a2;
-$settings-profile-placeholder-bg-color: #e7e7e7;
 $settings-profile-overlay-placeholder-fg-color: #2e2f32;
 $settings-profile-button-bg-color: #e7e7e7;
 $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
@@ -188,13 +169,10 @@ $groupheader-button-color: #91a1c0;
 $rightpanel-button-color: #91a1c0;
 $icon-button-color: #91a1c0;
 $roomtopic-color: #9e9e9e;
-$eventtile-meta-color: $roomtopic-color;
 
 $composer-e2e-icon-color: #91a1c0;
 $header-divider-color: #91a1c0;
 
-$voipcall-plinth-color: $system;
-
 // ********************
 
 $theme-button-bg-color: #e3e8f0;
@@ -216,8 +194,29 @@ $presence-online: $accent-color;
 $presence-away: #d9b072;
 $presence-offline: #e3e8f0;
 
+// Legacy theme backports
+$accent: #0DBD8B;
+$alert: #FF5B55;
+$links: #0086e6;
+$primary-content: $primary-fg-color;
+$secondary-content: $secondary-fg-color;
+$tertiary-content: $tertiary-fg-color;
+$quaternary-content: #6F7882;
+$quinary-content: $quaternary-content;
+$system: #F4F6FA;
+$background: $primary-bg-color;
+$panels: rgba($system, 0.9);
+$panel-base: #8D97A5; // This color is not intended for use in the app
+$panel-selected: rgba($tertiary-content, 0.3);
+$panel-hover: rgba($tertiary-content, 0.1);
+$panel-actions: $roomtile-selected-bg-color;
+$space-nav: rgba($tertiary-content, 0.15);
+// Legacy theme backports
+
 // ********************
 
+$voipcall-plinth-color: $system;
+
 $username-variant1-color: #368bd6;
 $username-variant2-color: #ac3ba8;
 $username-variant3-color: #03b381;

res/themes/light-custom/css/_custom.scss

@@ -64,7 +64,7 @@ $authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs
 $roomheader-bg-color: var(--timeline-background-color);
 //
 // --roomlist-highlights-color
-$roomtile-selected-bg-color: var(--roomlist-highlights-color);
+$panel-actions: var(--roomlist-highlights-color);
 //
 // --sidebar-color
 $groupFilterPanel-bg-color: var(--sidebar-color);

res/themes/light/css/_light.scss

@@ -152,7 +152,6 @@ $blockquote-bar-color: #ddd;
 $blockquote-fg-color: #777;
 
 $settings-grey-fg-color: #a2a2a2;
-$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;
@@ -175,7 +174,6 @@ $groupheader-button-color: #91A1C0;
 $rightpanel-button-color: #91A1C0;
 $icon-button-color: $quaternary-content;
 $roomtopic-color: #9e9e9e;
-$eventtile-meta-color: $roomtopic-color;
 
 $composer-e2e-icon-color: #91A1C0;
 $header-divider-color: #91A1C0;
@@ -196,7 +194,6 @@ $groupFilterPanel-divider-color: $roomlist-header-color;
 
 $roomtile-preview-color: $secondary-content;
 $roomtile-default-badge-bg-color: #61708b;
-$roomtile-selected-bg-color: #FFF;
 
 $presence-online: $accent-color;
 $presence-away: #d9b072;