refactor: Move neutrals into a new dark variable

newrelic · Jun 23, 2020 · 6a583fc · 6a583fc
1 parent 82c6209
commit 6a583fc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/src/components/styles.scss b/src/components/styles.scss
@@ -18,6 +18,17 @@
   --color-neutrals-800: #2a3434;
   --color-neutrals-900: #000d0d;
 
+  --color-dark-050: #131f23;
+  --color-dark-100: #22353c;
+  --color-dark-200: #233940;
+  --color-dark-300: #2a4249;
+  --color-dark-400: #37484e;
+  --color-dark-500: #495b5c;
+  --color-dark-600: #7c9799;
+  --color-dark-700: #a5bbbd;
+  --color-dark-800: #cedede;
+  --color-dark-900: #e8eaea;
+
   --color-brand-050: #f7ffff;
   --color-brand-100: #edffff;
   --color-brand-400: #70ccd2;

diff --git a/src/theme.scss b/src/theme.scss
@@ -21,35 +21,24 @@
 }
 
 .dark-mode {
-  --color-neutrals-050: #131f23;
-  --color-neutrals-100: #22353c;
-  --color-neutrals-200: #233940;
-  --color-neutrals-300: #2a4249;
-  --color-neutrals-400: #37484e;
-  --color-neutrals-500: #495b5c;
-  --color-neutrals-600: #7c9799;
-  --color-neutrals-700: #a5bbbd;
-  --color-neutrals-800: #cedede;
-  --color-neutrals-900: #e8eaea;
-
   --primary-background-color: #1c2a2f;
   --primary-text-color: var(--color-white);
   --primary-button-background-color: var(--color-brand-800);
   --primary-button-text-color: var(--color-brand-800);
   --primary-surface-background-color: var(--primary-background-color);
 
-  --secondary-background-color: var(--color-neutrals-100);
-  --secondary-text-color: var(--color-neutrals-600);
+  --secondary-background-color: var(--color-dark-100);
+  --secondary-text-color: var(--color-dark-600);
   --secondary-button-background-color: var(--color-white);
   --secondary-button-text-color: var(--color-brand-800);
-  --secondary-hover-background-color: var(--color-neutrals-300);
-  --secondary-hover-text-color: var(--color-neutrals-800);
-  --secondary-surface-background-color: var(--color-neutrals-300);
+  --secondary-hover-background-color: var(--color-dark-300);
+  --secondary-hover-text-color: var(--color-dark-800);
+  --secondary-surface-background-color: var(--color-dark-300);
 
-  --tertiary-background-color: var(--color-neutrals-100);
+  --tertiary-background-color: var(--color-dark-100);
 
-  --accent-text-color: var(--color-neutrals-600);
+  --accent-text-color: var(--color-dark-600);
   --link-color: var(--color-brand-400);
-  --border-color: var(--color-neutrals-300);
-  --divider-color: var(--color-neutrals-200);
+  --border-color: var(--color-dark-300);
+  --divider-color: var(--color-dark-200);
 }