From 0f942215945250c73d8e354e593328fd807c9995 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 27 Jul 2020 17:27:17 -0500
Subject: [PATCH] Refactor static.css with color variables

---
 priv/static/instance/static.css | 48 ++++++++++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/priv/static/instance/static.css b/priv/static/instance/static.css
index e2e946e99..ec0a097bf 100644
--- a/priv/static/instance/static.css
+++ b/priv/static/instance/static.css
@@ -2,17 +2,25 @@
   box-sizing: border-box;
 }
 
+:root {
+  --brand-color: #d8a070;
+  --background-color: #121a24;
+  --foreground-color: #182230;
+  --primary-text-color: #b9b9ba;
+  --muted-text-color: #89898a;
+}
+
 body {
-  background-color: #121a24;
+  background-color: var(--background-color);
   font-family: sans-serif;
-  color: #b9b9ba;
+  color: var(--primary-text-color);
   padding: 0;
   margin: 0;
 }
 
 .instance-header {
   padding: 10px;
-  background: #182230;
+  background: var(--foreground-color);
   box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
 }
 
@@ -37,7 +45,7 @@ body {
 .container {
   max-width: 400px;
   padding: 20px;
-  background-color: #182230;
+  background-color: var(--foreground-color);
   border-radius: 4px;
   margin: auto;
   margin-top: 35px;
@@ -51,14 +59,14 @@ h1 {
 }
 
 h2 {
-  color: #b9b9ba;
+  color: var(--primary-text-color);
   font-weight: normal;
   font-size: 18px;
   margin-bottom: 20px;
 }
 
 a {
-  color: color: #d8a070;
+  color: var(--brand-color);
   text-decoration: none;
 }
 
@@ -67,7 +75,7 @@ form {
 }
 
 .input {
-  color: #89898a;
+  color: var(--muted-text-color);
   display: flex;
   flex-direction: column;
 }
@@ -77,8 +85,8 @@ input {
   padding: 10px;
   margin-top: 5px;
   margin-bottom: 10px;
-  background-color: #121a24;
-  color: #b9b9ba;
+  background-color: var(--background-color);
+  color: var(--primary-text-color);
   border: 0;
   transition-property: border-bottom;
   transition-duration: 0.35s;
@@ -90,7 +98,7 @@ input {
   display: flex;
   flex-direction: column;
   margin: 1em 0;
-  color: #89898a;
+  color: var(--muted-text-color);
 }
 
 .scopes-input label:first-child {
@@ -100,7 +108,7 @@ input {
 .scopes {
   display: flex;
   flex-wrap: wrap;
-  color: #b9b9ba;
+  color: var(--primary-text-color);
 }
 
 .scope {
@@ -111,7 +119,7 @@ input {
 }
 
 .scope:before {
-  color: #b9b9ba;
+  color: var(--primary-text-color);
   content: "✔\fe0e";
   margin-left: 1em;
   margin-right: 1em;
@@ -131,33 +139,33 @@ input {
   cursor: pointer;
   display: inline-block;
   color: white;
-  background-color: #121a24;
-  border: 4px solid #121a24;
-  box-shadow: 0px 0px 1px 0 #d8a070;
+  background-color: var(--background-color);
+  border: 4px solid var(--background-color);
+  box-shadow: 0px 0px 1px 0 var(--brand-color);
   width: 1.2em;
   height: 1.2em;
   margin-right: 1.0em;
   content: "";
   transition-property: background-color;
   transition-duration: 0.35s;
-  color: #121a24;
+  color: var(--background-color);
   margin-bottom: -0.2em;
   border-radius: 2px;
 }
 
 [type="checkbox"]:checked + label:before {
-  background-color: #d8a070;
+  background-color: var(--brand-color);
 }
 
 input:focus {
   outline: none;
-  border-bottom: 2px solid #d8a070;
+  border-bottom: 2px solid var(--brand-color);
 }
 
 button {
   width: 100%;
   background-color: #1c2a3a;
-  color: #b9b9ba;
+  color: var(--primary-text-color);
   border-radius: 4px;
   border: none;
   padding: 10px;
@@ -172,7 +180,7 @@ button {
 
 button:hover {
   cursor: pointer;
-  box-shadow: 0px 0px 0px 1px #d8a070,
+  box-shadow: 0px 0px 0px 1px var(--brand-color),
     0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
     0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 }