Merge pull request #6604 from SimonBrandner/task/colors-2

Color de-duplication #2

Author: turt2live

res/css/_common.scss

@@ -53,8 +53,8 @@ html {
 body {
     font-family: $font-family;
     font-size: $font-15px;
-    background-color: $primary-bg-color;
-    color: $primary-fg-color;
+    background-color: $background;
+    color: $primary-content;
     border: 0px;
     margin: 0px;
 
@@ -89,7 +89,7 @@ b {
 }
 
 h2 {
-    color: $primary-fg-color;
+    color: $primary-content;
     font-weight: 400;
     font-size: $font-18px;
     margin-top: 16px;
@@ -142,12 +142,12 @@ textarea::placeholder {
 
 input[type=text], input[type=password], textarea {
     background-color: transparent;
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 /* Required by Firefox */
 textarea {
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 input[type=text]:focus, input[type=password]:focus, textarea:focus {
@@ -173,7 +173,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     .mx_textinput > input[type=search] {
         border: none;
         flex: 1;
-        color: $primary-fg-color;
+        color: $primary-content;
     }
 
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
@@ -184,7 +184,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
         background-color: transparent;
         color: $input-darker-fg-color;
         border-radius: 4px;
-        border: 1px solid rgba($primary-fg-color, .1);
+        border: 1px solid rgba($primary-content, .1);
         // these things should probably not be defined globally
         margin: 9px;
     }
@@ -209,7 +209,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
     .mx_textinput {
         color: $input-darker-fg-color;
-        background-color: $primary-bg-color;
+        background-color: $background;
         border: none;
     }
 }
@@ -271,7 +271,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog {
-    background-color: $primary-bg-color;
+    background-color: $background;
     color: $light-fg-color;
     z-index: 4012;
     font-weight: 300;
@@ -379,7 +379,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 .mx_Dialog_content {
     margin: 24px 0 68px;
     font-size: $font-14px;
-    color: $primary-fg-color;
+    color: $primary-content;
     word-wrap: break-word;
 
     a {
@@ -493,8 +493,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
-    color: $primary-fg-color;
-    background-color: $primary-bg-color;
+    color: $primary-content;
+    background-color: $background;
 }
 
 .mx_textButton {

res/css/structures/_ContextualMenu.scss

@@ -34,7 +34,7 @@ limitations under the License.
     border-radius: 8px;
     box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
     background-color: $menu-bg-color;
-    color: $primary-fg-color;
+    color: $primary-content;
     position: absolute;
     font-size: $font-14px;
     z-index: 5001;

res/css/structures/_CreateRoom.scss

@@ -18,7 +18,7 @@ limitations under the License.
     width: 960px;
     margin-left: auto;
     margin-right: auto;
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_CreateRoom input,

res/css/structures/_GroupFilterPanel.scss

@@ -92,13 +92,13 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
 }
 
 .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_selected_prototype {
-    background-color: $primary-bg-color;
+    background-color: $background;
     border-radius: 6px;
 }
 
 .mx_TagTile_selected_prototype {
     .mx_TagTile_homeIcon::before {
-        background-color: $primary-fg-color; // dark-on-light
+        background-color: $primary-content; // dark-on-light
     }
 }
 

res/css/structures/_GroupView.scss

@@ -132,7 +132,7 @@ limitations under the License.
     width: 100%;
     height: 31px;
     overflow: hidden;
-    color: $primary-fg-color;
+    color: $primary-content;
     font-weight: bold;
     font-size: $font-22px;
     padding-left: 19px;
@@ -397,7 +397,7 @@ limitations under the License.
         mask-position: center;
         mask-size: contain;
         mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-        background-color: $secondary-fg-color;
+        background-color: $secondary-content;
     }
 
     .mx_AccessibleButton_kind_link {
@@ -422,7 +422,7 @@ limitations under the License.
             mask-position: center;
             mask-size: 8px;
             mask-image: url('$(res)/img/image-view/close.svg');
-            background-color: $secondary-fg-color;
+            background-color: $secondary-content;
         }
     }
 }

res/css/structures/_LeftPanel.scss

@@ -146,7 +146,7 @@ $roomListCollapsedWidth: 68px;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-fg-color;
+                    background: $secondary-content;
                 }
             }
 
@@ -169,7 +169,7 @@ $roomListCollapsedWidth: 68px;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-fg-color;
+                    background: $secondary-content;
                 }
 
                 &.mx_LeftPanel_exploreButton_space::before {

res/css/structures/_LeftPanelWidget.scss

@@ -113,7 +113,7 @@ limitations under the License.
 
     &:hover .mx_LeftPanelWidget_resizerHandle {
         opacity: 0.8;
-        background-color: $primary-fg-color;
+        background-color: $primary-content;
     }
 
     .mx_LeftPanelWidget_maximizeButton {

res/css/structures/_MainSplit.scss

@@ -38,7 +38,7 @@ limitations under the License.
         width: 4px !important;
         border-radius: 4px !important;
 
-        background-color: $primary-fg-color;
+        background-color: $primary-content;
         opacity: 0.8;
     }
 }

res/css/structures/_MatrixChat.scss

@@ -64,7 +64,7 @@ limitations under the License.
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
 .mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_wrapper) {
-    background-color: $primary-bg-color;
+    background-color: $background;
 
     flex: 1 1 0;
     min-width: 0;
@@ -91,7 +91,7 @@ limitations under the License.
 
         content: ' ';
 
-        background-color: $primary-fg-color;
+        background-color: $primary-content;
         opacity: 0.8;
     }
 }

res/css/structures/_NotificationPanel.scss

@@ -49,7 +49,7 @@ limitations under the License.
         bottom: 0;
         left: 0;
         right: 0;
-        background-color: $tertiary-fg-color;
+        background-color: $tertiary-content;
         height: 1px;
         opacity: 0.4;
         content: '';
@@ -70,7 +70,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
-    color: $primary-fg-color;
+    color: $primary-content;
 }
 
 .mx_NotificationPanel .mx_EventTile_avatar {
@@ -79,7 +79,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
-    color: $primary-fg-color;
+    color: $primary-content;
     font-size: $font-12px;
     display: inline;
 }
@@ -118,7 +118,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $primary-bg-color;
+    background-color: $background;
 }
 
 .mx_NotificationPanel .mx_EventTile_content {