Update colour variables

6 files changed, 63 insertions, 42 deletions

diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css
index caa50ed..d34eb87 100644
--- a/ui/styles/app-bar.css
+++ b/ui/styles/app-bar.css
@@ -5,7 +5,7 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
-  background-color: var(--colour-background);
+  background-color: var(--colour-header-bg);
 }
 
 .app-bar > * {
diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css
index ef1eb10..53f003c 100644
--- a/ui/styles/app-layout.css
+++ b/ui/styles/app-layout.css
@@ -26,7 +26,7 @@ nav#sidebar {
 
   border-radius: 0 1.4rem 1.4rem 0;
 
-  background-color: var(--colour-background-alt);
+  background-color: var(--colour-navbar-bg);
 
   @media (width > 640px) {
     height: calc(100vh - var(--app-bar-height));
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index bd46baf..ebb01c9 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -1,24 +1,32 @@
 .message-run {
   position: relative;
   border-radius: 0.25rem;
-  border: 1px solid var(--colour-border);
   padding: 0 0 0.5rem 0;
   margin-bottom: 1rem;
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
 }
 
-/* TODO: replace these with colour variables. */
 .own-message {
-  background-color: rgb(32, 42, 74);
+  background-color: var(--colour-message-run-self-bg);
+  border: 1px solid var(--colour-message-run-self-bg);
 }
 
 .own-message * {
-  color: rgb(198, 198, 198);
+  color: var(--colour-message-run-text);
+}
+
+.other-message {
+  background-color: var(--colour-message-run-other-bg);
+  border: 1px solid var(--colour-message-run-other-bg);
+}
+
+.other-message * {
+  color: var(--colour-message-run-text);
 }
 
 .message-run > span {
   /* Username */
-  color: var(--colour-text);
+  color: var(--colour-message-run-text);
   background-color: rgb(67, 88, 156);
 }
 
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index e9098f2..7fe5ca0 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -1,6 +1,6 @@
 /* Sidebar and channel selector */
 #sidebar {
-  background-color: var(--colour-background-alt);
+  background-color: var(--colour-navbar-bg);
 }
 
 .list-nav ul {
@@ -10,16 +10,16 @@
 .list-nav li {
   padding: 0.5rem;
   border-radius: 0.5rem;
-  border: 1px solid var(--colour-border);
+  border: 1px solid var(--colour-navbar-bg);
   margin: 0.25rem;
 }
 
 .list-nav li.active {
-  background-color: var(--colour-okay);
+  background-color: var(--colour-navbar-bg);
 }
 
 .list-nav li:hover {
-  background-color: var(--colour-warn);
+  background-color: var(--colour-navbar-bg);
 }
 
 /* create channel form */
@@ -33,18 +33,18 @@
 .create-channel input {
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
-  border: 1px solid var(--colour-border);
+  border: 1px solid var(--colour-input-bg);
   z-index: 1;  /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
-  background-color: var(--colour-text);
-  color: var(--colour-background);
+  background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
 }
 
 .create-channel button {
   border-radius: 0 0.5rem 0.5rem 0;
-  border: 1px solid var(--colour-border);
-  background-color: var(--colour-text);
-  color: var(--colour-background);
+  border: 1px solid var(--colour-input-bg);
+  background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
 }
 
 /* TODO: media-query stuff. Margin-left at a constant zero? */
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
index 72d727f..3a28d1b 100644
--- a/ui/styles/textarea.css
+++ b/ui/styles/textarea.css
@@ -9,25 +9,25 @@
 .create-message textarea {
   padding: 0.5rem;
   border-radius: 0.5rem 0 0 0.5rem;
-  border: 1px solid var(--colour-border);
+  border: 1px solid var(--colour-input-bg);
   z-index: 1;  /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
-  background-color: var(--colour-text);
-  color: var(--colour-background);
+  background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
 }
 
 .create-message button {
   border-radius: 0 0.5rem 0.5rem 0;
-  border: 1px solid var(--colour-border);
-  background-color: var(--colour-text);
-  color: var(--colour-background);
+  border: 1px solid var(--colour-input-bg);
+  background-color: var(--colour-input-bg);
+  color: var(--colour-input-text);
 }
 
 .active-channel {
   overflow: auto;
   flex-grow: 1;
   /* TODO: make this all-app background */
-  background-color: var(--colour-background);
+  background-color: var(--colour-active-channel-bg);
 }
 
 main {
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index 5ea4d74..0f5cd0e 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -8,25 +8,38 @@
   --nav-width: 21rem;
 
   /* coloUrs */
-  /* Really, we need:
-   * - Dark header background
-   * - Medium sidebar background
-   * - Light channel background
-   * - okay/warn/error
-   * - Border colours?
-   * - Text colour
-   * - Hover colour
-   * - Active colour
-   */
-  --colour-background: #253031;
-  --colour-border: #192122;
-
-  --colour-background-alt: #426A5A;
-  --colour-border-alt: #2E4A3E;
-
-  --colour-text: #FFFFEA;
-
   --colour-okay: #6A994E;
   --colour-warn: #EBC3BE;
   --colour-error: #DE5F55;
+
+  /* Header BG (dark) */
+  --colour-header-bg: rgb(66, 66, 66);
+  /* Header text (light) */
+  --colour-header-text: rgb(245, 245, 245);
+  /* Navbar BG (medium) */
+  --colour-navbar-bg: rgb(117, 117, 117);
+  /* Navbar text (light) */
+  --colour-navbar-text: rgb(224, 224, 224);
+  /* Input BG (light) */
+  --colour-input-bg: rgb(224, 224, 224);
+  /* Input text (dark) */
+  --colour-input-text: rgb(66, 66, 66);
+  /* Active channel BG (light) */
+  --colour-active-channel-bg: rgb(224, 224, 224);
+  /* MessageRun self BG (medium) */
+  --colour-message-run-self-bg: rgb(117, 117, 117);
+  /* MessageRun other BG (medium) */
+  --colour-message-run-other-bg: rgb(117, 117, 117);
+  /* Message hover BG (medium-dark) */
+  --colour-message-hover-bg: rgb(170, 170, 170);
+  /* Message handle BG (medium-light) */
+  --colour-message-handle-bg: rgb(224, 224, 224);
+  /* Message handle text */
+  --colour-message-handle-text: rgb(170, 170, 170);
+  /* Navbar active BG */
+  --colour-navbar-active-bg: rgb(117, 117, 117);
+  /* Navbar hover BG */
+  --colour-navbar-hover-bg: rgb(170, 170, 170);
+  /* MessageRun text */
+  --colour-message-run-text: rgb(170, 170, 170);
 }