From 76a596bdabeef258c1b12d19dfc5ae0020ffadc4 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sun, 6 Feb 2022 10:27:13 -0500
Subject: [PATCH] Fix un-schemed rendering of error condition in element picker

---
 src/css/epicker-ui.css     | 5 +++--
 src/css/themes/default.css | 8 ++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css
index d81ff70d0..7dd7eb709 100644
--- a/src/css/epicker-ui.css
+++ b/src/css/epicker-ui.css
@@ -68,7 +68,7 @@ html#ublock0-epicker,
     position: relative;
 }
 #ublock0-epicker section.invalidFilter > div:first-child {
-    border-color: red;
+    border-color: var(--error-surface);
 }
 #ublock0-epicker section .codeMirrorContainer {
     border: none;
@@ -162,7 +162,8 @@ html#ublock0-epicker,
     min-width: 2.2em;
     }
 #ublock0-epicker section.invalidFilter #resultsetCount {
-    background-color: red;
+    background-color: var(--error-surface);
+    color: var(--ink-100);
 }
 #ublock0-epicker section > div:first-child + div {
     direction: ltr;
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index c9a2f2cb8..88520a0a7 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -215,6 +215,7 @@
     /* https://material.io/design/color/text-legibility.html#text-backgrounds */
     --ink-rgb: var(--ink-80);
     --ink-0: black;
+    --ink-100: white;
 
     --border-1: rgb(var(--gray-75));
     --border-2: rgb(var(--gray-70));
@@ -246,6 +247,9 @@
     --cloud-total-used-surface: rgb(var(--violet-60) / 25%);
     --cloud-used-surface: rgb(var(--violet-60));
 
+    /* misc */
+    --error-surface: #c00004; /* h:12 S:100 Luv:40 */
+
     /* codemirror */
     --cm-active-line: rgb(var(--gray-90));
     --cm-cursor: var(--ink-0);
@@ -302,6 +306,7 @@
 
     --ink-rgb: var(--gray-95);
     --ink-0: white;
+    --ink-100: black;
 
     --border-1: rgb(var(--gray-35));
     --border-2: rgb(var(--gray-40));
@@ -329,6 +334,9 @@
     --cloud-total-used-surface: rgb(var(--violet-20) / 25%);
     --cloud-used-surface: rgb(var(--violet-20));
 
+    /* misc */
+    --error-surface: #ff5354; /* h:12 S:100 Luv:60 */
+
     /* codemirror */
     --cm-active-line: rgb(var(--gray-20));
     --cm-merge-copy-ink: rgb(var(--blue-30));