From e20c8e6b953d3fdb7f08b5929848cb4f021d0fed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?netop=3A//=E3=82=A6=E3=82=A8=E3=83=8F?= <paul@webb.page>
Date: Mon, 1 Jul 2019 13:42:32 -0500
Subject: [PATCH] Replaced raw values with variables

---
 src/ui/scss/component/_badge.scss      |  2 +-
 src/ui/scss/component/_card.scss       |  2 +-
 src/ui/scss/component/_claim-list.scss | 10 +++++-----
 src/ui/scss/component/_expandable.scss |  4 ++--
 src/ui/scss/component/_form-field.scss |  2 +-
 src/ui/scss/component/_header.scss     |  6 +++---
 src/ui/scss/component/_main.scss       |  2 +-
 src/ui/scss/component/_media.scss      |  2 +-
 src/ui/scss/component/_navigation.scss |  6 ++++--
 src/ui/scss/component/_spinner.scss    |  2 +-
 src/ui/scss/component/_wunderbar.scss  |  4 ++--
 src/ui/scss/init/_gui.scss             | 14 +++++++-------
 src/ui/scss/init/_mixins.scss          |  2 +-
 src/ui/scss/init/_vars.scss            | 10 ++++++++++
 static/locales/en.json                 |  1 -
 15 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/ui/scss/component/_badge.scss b/src/ui/scss/component/_badge.scss
index 9c00dc082..4ca0e8ba6 100644
--- a/src/ui/scss/component/_badge.scss
+++ b/src/ui/scss/component/_badge.scss
@@ -9,7 +9,7 @@
   }
 
   [data-mode='dark'] & {
-    color: #ddd;
+    color: var(--dm-color-01);
     background-color: rgba($lbry-teal-5, 0.3);
   }
 }
diff --git a/src/ui/scss/component/_card.scss b/src/ui/scss/component/_card.scss
index 93ac1f190..0832d00f4 100644
--- a/src/ui/scss/component/_card.scss
+++ b/src/ui/scss/component/_card.scss
@@ -8,7 +8,7 @@
   font-size: 1.25rem;
 
   [data-mode='dark'] & {
-    background-color: #353434;
+    background-color: var(--dm-color-05);
     box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%);
   }
 }
diff --git a/src/ui/scss/component/_claim-list.scss b/src/ui/scss/component/_claim-list.scss
index 1789927a8..952ab0fa6 100644
--- a/src/ui/scss/component/_claim-list.scss
+++ b/src/ui/scss/component/_claim-list.scss
@@ -32,7 +32,7 @@
   }
 
   [data-mode='dark'] & {
-    color: #ddd;
+    color: var(--dm-color-01);
   }
 }
 
@@ -57,7 +57,7 @@
   background-color: lighten($lbry-black, 10%);
 
   [data-mode='dark'] & {
-    color: #ddd;
+    color: var(--dm-color-01);
   }
 }
 
@@ -66,7 +66,7 @@
   background-color: lighten($lbry-black, 10%);
 
   [data-mode='dark'] & {
-    background-color: #252424;
+    background-color: var(--dm-color-07);
   }
 }
 
@@ -93,7 +93,7 @@
     background-color: darken($lbry-white, 5%);
 
     [data-mode='dark'] & {
-      background-color: #555254;
+      background-color: var(--dm-color-04);
     }
   }
 
@@ -115,7 +115,7 @@
   border-bottom: 1px solid rgba($lbry-teal-5, 0.1);
 
   [data-mode='dark'] & {
-    border-bottom: 1px solid #555254;
+    border-top: 1px solid var(--dm-color-04);
   }
 }
 
diff --git a/src/ui/scss/component/_expandable.scss b/src/ui/scss/component/_expandable.scss
index d788870f7..fde9977d5 100644
--- a/src/ui/scss/component/_expandable.scss
+++ b/src/ui/scss/component/_expandable.scss
@@ -4,7 +4,7 @@
   padding-bottom: var(--spacing-medium);
 
   [data-mode='dark'] & {
-    border-color: #555254;
+    border-color: var(--dm-color-04);
   }
 }
 
@@ -34,7 +34,7 @@
     position: absolute;
 
     [data-mode='dark'] & {
-      background-image: linear-gradient(to bottom, transparent 0%, #1e1e1e 90%);
+      background-image: linear-gradient(to bottom, transparent 0%, var(--dm-color-08) 90%);
     }
   }
 }
diff --git a/src/ui/scss/component/_form-field.scss b/src/ui/scss/component/_form-field.scss
index 23ce502fc..f8bddebba 100644
--- a/src/ui/scss/component/_form-field.scss
+++ b/src/ui/scss/component/_form-field.scss
@@ -255,7 +255,7 @@ fieldset-section {
     input:not(:focus):not(.form-field--copyable),
     textarea:not(:focus),
     select:not(:focus) {
-      border-color: #555254;
+      border-color: var(--dm-color-04);
     }
   }
 }
diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss
index cb759b94b..95e7e663d 100644
--- a/src/ui/scss/component/_header.scss
+++ b/src/ui/scss/component/_header.scss
@@ -10,8 +10,8 @@
   padding-right: var(--spacing-large);
 
   [data-mode='dark'] & {
-    background-color: #353434;
-    color: #ddd;
+    background-color: var(--dm-color-05);
+    color: var(--dm-color-01);
     border-bottom: none;
     box-shadow: var(--card-box-shadow) $lbry-black;
   }
@@ -88,7 +88,7 @@
     }
 
     svg {
-      stroke: #ddd;
+      stroke: var(--dm-color-01);
     }
   }
 }
diff --git a/src/ui/scss/component/_main.scss b/src/ui/scss/component/_main.scss
index 86ccf7d8a..f996e5a0e 100644
--- a/src/ui/scss/component/_main.scss
+++ b/src/ui/scss/component/_main.scss
@@ -9,7 +9,7 @@
   display: flex;
 
   [data-mode='dark'] & {
-    background-color: #1e1e1e;
+    background-color: var(--dm-color-08);
   }
 }
 
diff --git a/src/ui/scss/component/_media.scss b/src/ui/scss/component/_media.scss
index c79bed5e0..bf9cbed3a 100644
--- a/src/ui/scss/component/_media.scss
+++ b/src/ui/scss/component/_media.scss
@@ -35,7 +35,7 @@
     background-size: cover;
 
     [data-mode='dark'] & {
-      background-color: #555254;
+      background-color: var(--dm-color-04);
     }
   }
 }
diff --git a/src/ui/scss/component/_navigation.scss b/src/ui/scss/component/_navigation.scss
index 3981cd687..c1bf90836 100644
--- a/src/ui/scss/component/_navigation.scss
+++ b/src/ui/scss/component/_navigation.scss
@@ -55,14 +55,16 @@
   }
 
   [data-mode='dark'] & {
-    color: #ddd;
+    color: var(--dm-color-01);
+
     svg {
-      color: #ddd;
+      color: var(--dm-color-01);
     }
 
     &:hover,
     &.navigation__link--active {
       color: $lbry-teal-4;
+
       .icon {
         color: $lbry-teal-4;
       }
diff --git a/src/ui/scss/component/_spinner.scss b/src/ui/scss/component/_spinner.scss
index 9b63c3c59..d9e3bf3b8 100644
--- a/src/ui/scss/component/_spinner.scss
+++ b/src/ui/scss/component/_spinner.scss
@@ -43,7 +43,7 @@
     background-color: $lbry-white;
 
     [data-mode='dark'] & {
-      background-color: #ddd;
+      background-color: var(--dm-color-01);
     }
   }
 }
diff --git a/src/ui/scss/component/_wunderbar.scss b/src/ui/scss/component/_wunderbar.scss
index 58045012c..e3266c463 100644
--- a/src/ui/scss/component/_wunderbar.scss
+++ b/src/ui/scss/component/_wunderbar.scss
@@ -58,11 +58,11 @@
   }
 
   [data-mode='dark'] & {
-    background-color: #6a6a6a;
+    background-color: var(--dm-color-03);
     color: $lbry-white;
 
     &::placeholder {
-      color: #90908f;
+      color: var(--dm-color-02);
     }
   }
 }
diff --git a/src/ui/scss/init/_gui.scss b/src/ui/scss/init/_gui.scss
index 505e99795..10d2d6534 100644
--- a/src/ui/scss/init/_gui.scss
+++ b/src/ui/scss/init/_gui.scss
@@ -9,7 +9,7 @@ html {
   overflow-x: hidden;
 
   &[data-mode='dark'] {
-    background-color: #1e1e1e;
+    background-color: var(--dm-color-08);
   }
 }
 
@@ -24,8 +24,8 @@ body {
   background-color: mix($lbry-white, $lbry-gray-1, 70%);
 
   [data-mode='dark'] & {
-    background-color: #1e1e1e;
-    color: #ddd;
+    background-color: var(--dm-color-08);
+    color: var(--dm-color-01);
   }
 }
 
@@ -54,7 +54,7 @@ hr {
   background-color: $lbry-gray-1;
 
   [data-mode='dark'] & {
-    background-color: #555254;
+    background-color: var(--dm-color-04);
   }
 }
 
@@ -147,7 +147,7 @@ hr {
   border-radius: 5px;
 
   [data-mode='dark'] & {
-    background-color: #2e2d2e;
+    background-color: var(--dm-color-06);
     color: inherit;
   }
 }
@@ -231,7 +231,7 @@ hr {
 fieldset,
 .fieldset {
   [data-mode='dark'] & {
-    border-top-color: #555254;
+    border-top-color: var(--dm-color-04);
   }
 }
 
@@ -246,6 +246,6 @@ checkbox-toggle,
 radio-toggle,
 .radio-toggle {
   [data-mode='dark'] & {
-    border-color: #555254;
+    border-color: var(--dm-color-04);
   }
 }
diff --git a/src/ui/scss/init/_mixins.scss b/src/ui/scss/init/_mixins.scss
index bcaf2be8e..b00476aa7 100644
--- a/src/ui/scss/init/_mixins.scss
+++ b/src/ui/scss/init/_mixins.scss
@@ -4,7 +4,7 @@
   border-radius: var(--card-radius);
 
   [data-mode='dark'] & {
-    background-color: #555254;
+    background-color: var(--dm-color-04);
   }
 }
 
diff --git a/src/ui/scss/init/_vars.scss b/src/ui/scss/init/_vars.scss
index bc7fb44aa..68ed9c726 100644
--- a/src/ui/scss/init/_vars.scss
+++ b/src/ui/scss/init/_vars.scss
@@ -26,6 +26,16 @@ $large-breakpoint: 1921px;
   // Color
   --color-background: #270f34;
 
+  // Dark Mode
+  --dm-color-01: #ddd;
+  --dm-color-02: #90908f;
+  --dm-color-03: #6a6a6a;
+  --dm-color-04: #555254;
+  --dm-color-05: #353434;
+  --dm-color-06: #2e2d2e;
+  --dm-color-07: #252424;
+  --dm-color-08: #1e1e1e;
+
   // Text
   --text-max-width: 660px;
   --text-link-padding: 4px;
diff --git a/static/locales/en.json b/static/locales/en.json
index 95f23dcce..0572b956c 100644
--- a/static/locales/en.json
+++ b/static/locales/en.json
@@ -458,7 +458,6 @@
   "This will appear as a tip for \"Original LBRY porn - Nude Hot Girl masturbates FREE\".": "This will appear as a tip for \"Original LBRY porn - Nude Hot Girl masturbates FREE\".",
   "You sent 25 LBC as a tip, Mahalo!": "You sent 25 LBC as a tip, Mahalo!",
   "LBRY names cannot contain that symbol ($, #, @)": "LBRY names cannot contain that symbol ($, #, @)",
-  "Invalid character %s in name: %s.": "Invalid character %s in name: %s.",
   "Path copied.": "Path copied.",
   "Open Folder": "Open Folder",
   "Create Backup": "Create Backup"