From b179dc026816f72cccef60791d0a5f43320d8816 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sat, 3 Oct 2020 06:00:48 -0400
Subject: [PATCH] Add more CSS variables for theming

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/401
---
 src/css/cloud-ui.css       |  2 +-
 src/css/common.css         |  2 +-
 src/css/epicker-ui.css     |  8 ++++----
 src/css/popup-fenix.css    |  2 +-
 src/css/themes/default.css | 11 ++++++++---
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/css/cloud-ui.css b/src/css/cloud-ui.css
index 02d28001d..4944fda03 100644
--- a/src/css/cloud-ui.css
+++ b/src/css/cloud-ui.css
@@ -1,5 +1,5 @@
 #cloudWidget {
-    background: url("../img/cloud.png") hsl(216, 100%, 93%);
+    background-color: var(--cloud-widget-surface);
     margin: 0.5em 0;
     min-width: max-content;
     position: relative;
diff --git a/src/css/common.css b/src/css/common.css
index b91fa15f4..a2af2f934 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -79,7 +79,7 @@ code, .code {
     }
 hr {
     border: 0;
-    border-top: 1px solid var(--hor-separator-color);
+    border-top: 1px solid var(--hr-ink);
     margin: 1em 0;
     }
 textarea {
diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css
index f62f6d2bc..efe685f76 100644
--- a/src/css/epicker-ui.css
+++ b/src/css/epicker-ui.css
@@ -1,7 +1,7 @@
 html#ublock0-epicker,
 #ublock0-epicker body {
     background: transparent;
-    color: black;
+    color: var(--default-ink);
     cursor: not-allowed;
     font: 12px sans-serif;
     height: 100vh;
@@ -86,10 +86,10 @@ html#ublock0-epicker,
     border-color: red;
 }
 #ublock0-epicker section textarea {
-    background-color: #fff;
+    background-color: var(--default-surface);
     border: none;
     box-sizing: border-box;
-    color: #000;
+    color: var(--default-ink);
     font: 11px monospace;
     height: 8em;
     margin: 0;
@@ -225,7 +225,7 @@ html#ublock0-epicker,
     border: 1px dotted var(--blue-50);
     }
 #ublock0-epicker #candidateFilters .changeFilter li:hover {
-    background-color: white;
+    background-color: var(--default-surface-hover);
 }
 
 /**
diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css
index 20452d82a..15d9cbbd0 100644
--- a/src/css/popup-fenix.css
+++ b/src/css/popup-fenix.css
@@ -49,7 +49,7 @@ a {
     }
 hr {
     border: 0;
-    border-top: 1px solid #e3e2e3;
+    border-top: 1px solid var(--hr-ink);
     margin: 0;
     padding: 0;
     }
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index eafa247bf..c0eb56789 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -19,6 +19,7 @@
     --dark-gray-30: #42414d;
     --dark-gray-40: #3a3944;
     --dark-gray-50: #32313c;
+    --dark-gray-70: #23222b;
     --dark-gray-80: #1c1b22;
     --dark-gray-90: #15141a;
     --ink-20: #312a65;
@@ -100,8 +101,6 @@
     --fieldset-header-surface: transparent;
     --fieldset-header-ink: var(--ink-20);
 
-    --hor-separator-color: var(--light-gray-30);
-
     --button-surface: var(--light-gray-30);
     --button-ink: var(--ink-20);
     --button-surface-hover: var(--light-gray-40);
@@ -167,6 +166,12 @@
     --bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
     --popup-icon-x-ink: var(--red-60);
 
+    /* horizontal line separator */
+    --hr-ink: var(--light-gray-30);
+
+    /* cloud widget */
+    --cloud-widget-surface: var(--light-gray-20);
+
     /* codemirror */
     --cm-gutter-border: var(--light-gray-40);
     --cm-gutter-ink: var(--light-gray-90);
@@ -252,7 +257,7 @@
     --link-ink: #bb86fc;
     --fieldset-header-surface: transparent;
     --fieldset-header-ink: var(--light-gray-30);
-    --hor-separator-color: var(--dark-gray-50);
+    --hr-ink: var(--dark-gray-50);
     --button-surface: var(--light-gray-10-a12);
     --button-ink: var(--default-ink);
     --button-surface-hover: var(--light-gray-10-a12);