From 754981b7289b9ad51b420735303c77ea7cff368a Mon Sep 17 00:00:00 2001
From: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>
Date: Wed, 21 Aug 2019 22:19:21 +0900
Subject: [PATCH] fix: Global color vars (#36653)

* Added colors from the style guide to :root so they're available globally. Also switched out hex codes for named variables in .dark-palette and .light-palette wherever possible.

* feat: add success and danger colors to root
---
 client/src/components/layouts/variables.css | 75 +++++++++++++--------
 1 file changed, 46 insertions(+), 29 deletions(-)

diff --git a/client/src/components/layouts/variables.css b/client/src/components/layouts/variables.css
index adf5e68b82..cc260f4a9b 100644
--- a/client/src/components/layouts/variables.css
+++ b/client/src/components/layouts/variables.css
@@ -1,40 +1,57 @@
 :root {
   --header-height: 38px;
   --theme-color: #0a0a23;
+  --gray-00: #ffffff;
   --gray-05: #f5f6f7;
-  --gray-mid: #858591;
+  --gray-10: #dfdfe2;
+  --gray-15: #d0d0d5;
+  --gray-45: #858591;
+  --gray-75: #3b3b4f;
+  --gray-80: #2a2a40;
+  --gray-85: #1b1b32;
+  --gray-90: #0a0a23;
+  --purple-light: #dbb8ff;
+  --purple-dark: #5a01a7;
+  --yellow-light: #f1be32;
+  --yellow-dark: #4d3800;
+  --blue-light: #99c9ff;
+  --blue-dark: #002ead;
+  --green-light: #acd157;
+  --green-dark: #00471b;
+  --red-light: #ffadad;
+  --red-dark: #850000;
 }
 
 .dark-palette {
-  --primary-color: #ffffff;
-  --secondary-color: #f5f6f7;
-  --tertiary-color: #dfdfe2;
-  --quaternary-color: #d0d0d5;
-  --quaternary-background: #3b3b4f;
-  --tertiary-background: #2a2a40;
-  --secondary-background: #1b1b32;
-  --primary-background: #0a0a23;
-  --highlight-color: #99c9ff;
-  --highlight-background: #002ead;
-  --success-color: #87d98e;
-  --success-background: #004d00;
-  --danger-color: #ffadad;
-  --danger-background: #850000;
+  --primary-color: var(--gray-00);
+  --secondary-color: var(--gray-05);
+  --tertiary-color: var(--gray-10);
+  --quaternary-color: var(--gray-15);
+  --quaternary-background: var(--gray-75);
+  --tertiary-background: var(--gray-80);
+  --secondary-background: var(--gray-85);
+  --primary-background: var(--gray-90);
+  --highlight-color: var(--blue-light);
+  --highlight-background: var(--blue-dark);
+  --success-color: var(--green-light);
+  --success-background: var(--green-dark);
+  --danger-color: var(--red-light);
+  --danger-background: var(--red-dark);
 }
 
 .light-palette {
-  --primary-color: #0a0a23;
-  --secondary-color: #1b1b32;
-  --tertiary-color: #2a2a40;
-  --quaternary-color: #3b3b4f;
-  --quaternary-background: #d0d0d5;
-  --tertiary-background: #dfdfe2;
-  --secondary-background: #f5f6f7;
-  --primary-background: #ffffff;
-  --highlight-color: #002ead;
-  --highlight-background: #99c9ff;
-  --success-color: #004d00;
-  --success-background: #87d98e;
-  --danger-color: #850000;
-  --danger-background: #ffadad;
+  --primary-color: var(--gray-90);
+  --secondary-color: var(--gray-85);
+  --tertiary-color: var(--gray-80);
+  --quaternary-color: var(--gray-75);
+  --quaternary-background: var(--gray-15);
+  --tertiary-background: var(--gray-10);
+  --secondary-background: var(--gray-05);
+  --primary-background: var(--gray-00);
+  --highlight-color: var(--blue-dark);
+  --highlight-background: var(--blue-light);
+  --success-color: var(--green-dark);
+  --success-background: var(--green-light);
+  --danger-color: var(--red-dark);
+  --danger-background: var(--red-light);
 }