From 002339fb86ffcd128ba90a0508d85e22a94255fa Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 16 Jan 2017 02:10:45 +0000
Subject: [PATCH] factor out some more colours

---
 src/skins/vector/css/_common.scss             |  4 +--
 .../structures/_UserSettings.scss             |  6 ++---
 .../structures/login/_Login.scss              |  2 +-
 .../views/elements/_DirectorySearchBox.scss   |  2 +-
 .../views/elements/_ProgressBar.scss          |  4 +--
 .../views/rooms/_MemberInfo.scss              |  2 +-
 .../views/rooms/_MemberList.scss              |  2 +-
 .../views/rooms/_RoomSettings.scss            |  2 +-
 src/skins/vector/css/themes/_base.scss        | 26 +++++++++++++++----
 src/skins/vector/css/themes/_dark.scss        | 20 +++++++++++++-
 .../vector-web/structures/_RoomDirectory.scss |  2 +-
 .../views/rooms/_RoomDropTarget.scss          |  2 +-
 12 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index ed96b48c22..9e2ac1f468 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -174,13 +174,13 @@ textarea {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #e9e9e9;
+    background-color: $dialog-background-bg-color;
     opacity: 0.8;
 }
 
 .mx_Dialog_lightbox .mx_Dialog_background {
     opacity: 0.85;
-    background-color: #000;
+    background-color: $lightbox-background-bg-color;
 }
 
 .mx_Dialog_lightbox .mx_Dialog {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
index 6ba1002bf9..1379063dc9 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
@@ -58,7 +58,7 @@ limitations under the License.
     clear: both;
     margin-left: 63px;
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 26px;
@@ -166,10 +166,10 @@ limitations under the License.
 {
     display: inline-block;
     border: 0px;
-    border-bottom: 1px solid rgba(151, 151, 151, 0.5);
+    border-bottom: 1px solid $input-underline-color;
     padding: 0px;
     width: 240px;
-    color: rgba(74, 74, 74, 0.9);
+    color: $input-fg-color;
     font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
     font-size: 16px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 5f4164e894..75dc71806e 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -147,7 +147,7 @@ limitations under the License.
 }
 
 .mx_Login_error {
-    color: #ff2020;
+    color: $warning-color;
     font-weight: bold;
     text-align: center;
 /*
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
index dd953ab955..66063733a6 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
@@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     padding: 3px;
     padding-left: 10px;
     padding-right: 10px;
-    background-color: #efefef;
+    background-color: $plinth-bg-color;
     border-radius: 3px;
     background-image: url('img/icon-return.svg');
     background-position: 8px 70%;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
index 7b5e0c7461..a3fee232d0 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
@@ -16,10 +16,10 @@ limitations under the License.
 
 .mx_ProgressBar {
     height: 5px;
-    border: 1px solid black;
+    border: 1px solid $progressbar-color;
 }
 
 .mx_ProgressBar_fill {
     height: 100%;
-    background-color: #000;
+    background-color: $progressbar-color;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
index 3b4b653e55..970c2496b4 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
@@ -61,7 +61,7 @@ limitations under the License.
 
 .mx_MemberInfo h3 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 16px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
index 3c7e3ec5e6..8a6f117240 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
@@ -96,7 +96,7 @@ limitations under the License.
 
 .mx_MemberList_invited h2 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     padding-left: 3px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
index 132c979232..d9de0e8a2d 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
@@ -81,7 +81,7 @@ limitations under the License.
 
 .mx_RoomSettings h3 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 36px;
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index b9fd2d12bc..e623372afc 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -1,5 +1,4 @@
 
-
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #454545;
 $primary-bg-color: #ffffff;
@@ -20,6 +19,12 @@ $warning-color: #ff0064;
 // left-panel style muted accent color
 $secondary-accent-color: #eaf5f0;
 
+// used by RoomDirectory permissions
+$plinth-bg-color: $secondary-accent-color;
+
+// used by RoomDropTarget
+$droptarget-bg-color: rgba(255,255,255,0.5);
+
 // used by AddressSelector
 $selected-color: #eaf5f0;
 
@@ -35,18 +40,27 @@ $input-border-color: #f0f0f0;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #c7c7c7;
 
+// used for UserSettings EditableText
+$input-underline-color: rgba(151, 151, 151, 0.5);
+$input-fg-color: rgba(74, 74, 74, 0.9);
+
 // context menus
 $menu-border-color: rgba(187, 187, 187, 0.5);
 $menu-bg-color: #f6f6f6;
 
 $avatar-initial-color: #ffffff;
 
+$h3-color: #3d3b39;
+
+$dialog-background-bg-color: #e9e9e9;
+$lightbox-background-bg-color: #000;
+
 // ********************
 
 $roomtile-name-color: rgba(69, 69, 69, 0.8);
 $roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
 
-$roomsublist-label-fg-color: #3d3b39;
+$roomsublist-label-fg-color: $h3-color;
 $roomsublist-label-bg-color: #d3efe1;
 
 // ********************
@@ -64,8 +78,10 @@ $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
 $e2e-unverified-color: #e8bf37;
 $e2e-warning-color: #ba6363;
 
-// ********************
-
+/*** ImageView ***/
 $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;
-$lightbox-border-color: #ffffff;
\ No newline at end of file
+$lightbox-border-color: #ffffff;
+
+// unused?
+$progressbar-color: #000;
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index e2c33e3e7c..1d93c1a4d6 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -19,6 +19,12 @@ $warning-color: #ff0064;
 // left-panel style muted accent color
 $secondary-accent-color: $primary-bg-color;
 
+// used by RoomDirectory permissions
+$plinth-bg-color: #474747;
+
+// used by RoomDropTarget
+$droptarget-bg-color: rgba(45,45,45,0.5);
+
 // used by AddressSelector
 $selected-color: #eaf5f0;
 
@@ -34,18 +40,27 @@ $input-border-color: #3a3a3a;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #656565;
 
+// used for UserSettings EditableText
+$input-underline-color: $primary-fg-color;
+$input-fg-color: $primary-fg-color;
+
 // context menus
 $menu-border-color: rgba(187, 187, 187, 0.5);
 $menu-bg-color: #373737;
 
 $avatar-initial-color: #2d2d2d;
 
+$h3-color: $primary-fg-color;
+
+$dialog-background-bg-color: #000;
+$lightbox-background-bg-color: #000;
+
 // ********************
 
 $roomtile-name-color: rgba(186, 186, 186, 0.8);
 $roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
 
-$roomsublist-label-fg-color: $primary-fg-color;
+$roomsublist-label-fg-color: $h3-color;
 $roomsublist-label-bg-color: #454545;
 
 // ********************
@@ -67,3 +82,6 @@ $e2e-warning-color: #ba6363;
 $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;
 $lightbox-border-color: #ffffff;
+
+// unused?
+$progressbar-color: #000;
\ No newline at end of file
diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
index e5df8741d1..3dd885ba47 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
@@ -110,7 +110,7 @@ limitations under the License.
     padding-right: 5px;
     height: 15px;
     border-radius: 11px;
-    background-color: $secondary-accent-color;
+    background-color: $plinth-bg-color;
     text-transform: uppercase;
     font-weight: 600;
     font-size: 11px;
diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
index 2fe16ca949..e91658e8a8 100644
--- a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
+++ b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
@@ -24,7 +24,7 @@ limitations under the License.
     padding-bottom: 5px;
     border: 1px dashed $accent-color;
     color: $primary-fg-color;
-    background-color: rgba(255,255,255,0.5);
+    background-color: $droptarget-bg-color;
     border-radius: 4px;
 }