factor out remaining # colours

src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss

@@ -77,12 +77,12 @@ limitations under the License.
 
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
     font-style: italic;
-    font-color: $primary-fg-color;
+    color: $primary-fg-color;
 }
 
 .mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
     font-style: italic;
-    font-color: $primary-fg-color;
+    color: $primary-fg-color;
 }
 
 .mx_EntityTile_unavailable .mx_EntityTile_avatar,

src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss

@@ -19,8 +19,8 @@ limitations under the License.
     margin-right: 15px;
     margin-bottom: 15px;
     display: flex;
-    border-left: 4px solid #ddd;
+    border-left: 4px solid $preview-widget-bar-color;
-    color: #888;
+    color: $preview-widget-fg-color;
 }
 
 .mx_LinkPreviewWidget_image {

src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss

@@ -69,7 +69,6 @@ limitations under the License.
 }
 
 .mx_MemberInfo_profileField {
-    font-color: #999999;
     font-size: 13px;
     position: relative;
     background-color: $primary-bg-color;

src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss

@@ -57,7 +57,7 @@ limitations under the License.
     height: 60px;
     text-align: center;
     font-style: italic;
-    color: #888;
+    color: $greyed-fg-color;
 }
 
 .mx_MessageComposer_input_wrapper {
@@ -90,10 +90,10 @@ limitations under the License.
 }
 
 .mx_MessageComposer_input blockquote {
-    color: rgb(119, 119, 119);
+    color: $blockquote-fg-color;
     margin: 0 0 16px;
     padding: 0 15px;
-    border-left: 4px solid rgb(221, 221, 221);
+    border-left: 4px solid $blockquote-bar-color;
 }
 
 .mx_MessageComposer_input textarea {
@@ -151,7 +151,7 @@ limitations under the License.
 
 .mx_MessageComposer_formatbar_wrapper {
     width: 100%;
-    background-color: #f7f7f7;
+    background-color: $menu-bg-color;
     box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
 }
 
@@ -168,7 +168,7 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     font-size: 10px;
-    color: #888;
+    color: $greyed-fg-color;
 }
 
 .mx_MessageComposer_formatbar * {

src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss

@@ -16,7 +16,6 @@ limitations under the License.
 
 /* add 20px to the height of the header when editing */
 .mx_RoomHeader_editing {
-    -webit-flex: 0 0 93px ! important;
     flex: 0 0 93px ! important;
 }
 
@@ -24,25 +23,19 @@ limitations under the License.
     max-width: 960px;
     margin: auto;
     height: 70px;
-
     align-items: center;
-
     display: flex;
 }
 
 .mx_RoomHeader_leftRow {
     margin-left: -2px;
-
     order: 1;
-
     flex: 1;
 }
 
 .mx_RoomHeader_spinner {
     height: 36px;
-
     order: 2;
-
     padding-left: 12px;
     padding-right: 12px;
 }
@@ -56,9 +49,7 @@ limitations under the License.
     line-height: 34px;
     margin-top: -2px;
     text-align: center;
-
     order: 2;
-
     cursor: pointer;
 
 /*
@@ -70,9 +61,7 @@ limitations under the License.
 
 .mx_RoomHeader_cancelButton {
     order: 2;
-
     cursor: pointer;
-
     padding-left: 12px;
     padding-right: 12px;
 }
@@ -126,7 +115,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_settingsHint {
-    color: #a2a2a2 ! important;
+    color: $settings-grey-fg-color ! important;
 }
 
 .mx_RoomHeader_searchStatus {
@@ -151,7 +140,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_placeholder {
-    color: #a2a2a2 ! important;
+    color: $settings-grey-fg-color ! important;
 }
 
 .mx_RoomHeader_editable {
@@ -170,7 +159,7 @@ limitations under the License.
     vertical-align: bottom;
     float: left;
     max-height: 42px;
-    color: #A2A2A2;
+    color: $settings-grey-fg-color;
     font-weight: 300;
     font-size: 13px;
     margin-left: 19px;

src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss

@@ -17,13 +17,9 @@ limitations under the License.
 .mx_RoomPreviewBar {
     text-align: center;
     height: 176px;
-
     align-items: center;
-
     flex-direction: column;
-
     justify-content: center;
-
     display: flex;
 }
 
@@ -40,7 +36,7 @@ limitations under the License.
 
 .mx_RoomPreviewBar_preview_text {
     margin-top: 25px;
-    color: #a4a4a4;
+    color: $settings-grey-fg-color;
 }
 
 .mx_RoomPreviewBar_join_text a {

src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss

@@ -205,7 +205,7 @@ limitations under the License.
 }
 
 .mx_RoomSettings_aliasPlaceholder {
-    color: #a2a2a2;
+    color: $settings-grey-fg-color;
 }
 
 .mx_RoomSettings_buttons {

src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss

@@ -69,8 +69,8 @@ limitations under the License.
 .mx_SearchableEntityList hr {
     height: 1px;
     border: 0px;
-    color: #e1dddd;
+    color: $primary-fg-color;
-    background-color: #e1dddd;
+    background-color: $primary-fg-color;
     margin-right: 15px;
     margin-top: 11px;
     margin-bottom: 11px;

src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss

@@ -61,9 +61,9 @@ limitations under the License.
 }
 
 .mx_IncomingCallBox_buttons_decline {
-    background-color: #f48080;
+    background-color: $voip-decline-color;
 }
 
 .mx_IncomingCallBox_buttons_accept {
-    background-color: #80f480;
+    background-color: $voip-accept-color;
 }

src/skins/vector/css/themes/_base.scss

@@ -55,6 +55,19 @@ $h3-color: #3d3b39;
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
 
+$greyed-fg-color: #888;
+
+$preview-widget-bar-color: #ddd;
+$preview-widget-fg-color: $greyed-fg-color;
+
+$blockquote-bar-color: #ddd;
+$blockquote-fg-color: #777;
+
+$settings-grey-fg-color: #a2a2a2;
+
+$voip-decline-color: #f48080;
+$voip-accept-color: #80f480;
+
 // ********************
 
 $roomtile-name-color: rgba(69, 69, 69, 0.8);

src/skins/vector/css/themes/_dark.scss

@@ -55,6 +55,19 @@ $h3-color: $primary-fg-color;
 $dialog-background-bg-color: #000;
 $lightbox-background-bg-color: #000;
 
+$greyed-fg-color: #888;
+
+$preview-widget-bar-color: $menu-bg-color;
+$preview-widget-fg-color: $greyed-fg-color;
+
+$blockquote-bar-color: #ddd;
+$blockquote-fg-color: #777;
+
+$settings-grey-fg-color: #a2a2a2;
+
+$voip-decline-color: #f48080;
+$voip-accept-color: #80f480;
+
 // ********************
 
 $roomtile-name-color: rgba(186, 186, 186, 0.8);

src/skins/vector/css/vector-web/structures/_RoomDirectory.scss

@@ -101,7 +101,7 @@ limitations under the License.
     text-transform: uppercase;
     font-weight: 600;
     font-size: 11px;
-    color: #61c295;
+    color: $accent-fg-color;
 }
 
 .mx_RoomDirectory_topic {
@@ -110,7 +110,7 @@ limitations under the License.
 
 .mx_RoomDirectory_alias {
     font-size: 12px;
-    color: #b3b3b3;
+    color: $settings-grey-fg-color;
 }
 
 .mx_RoomDirectory_roomMemberCount {

src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss

@@ -70,8 +70,7 @@ limitations under the License.
     border-right-style: none;
     border-top-style: solid;
     border-top-width: 1px;
-    border-color: #bbbbbb;
+    border-color: $menu-border-color;
-    opacity: 0.4;
 }
 
 .mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {

src/skins/vector/css/vector-web/views/elements/_ImageView.scss

@@ -29,10 +29,8 @@ limitations under the License.
     order: 1;
     flex: 1 1 10%;
     min-width: 60px;
-    /*
+    // background-color: #080;
-    background-color: #080;
+    // height: 20px;
-    height: 20px;
-    */
 }
 
 .mx_ImageView_content {
@@ -41,7 +39,6 @@ limitations under the License.
     min-width: 0px;
     height: 90%;
     flex: 15 15 0;
-
     display: flex;
     align-items: center;
     justify-content: center;
@@ -132,8 +129,6 @@ limitations under the License.
     order: 3;
     flex: 1 1 10%;
     min-width: 300px;
-    /*
+    // background-color: #800;
-    background-color: #800;
+    // height: 20px;
-    height: 20px;
-    */
 }