Add more CSS variables for theming

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/401

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;

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 {

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);
 }
 
 /**

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;
     }

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);