Improve contrast with dark theme

packages/test-in-browser/driver.css

@@ -4,15 +4,19 @@
     /* for reference: https://tailwindcss.com/docs/customizing-colors */
 
     --bg-black: #18181b;
-    --neutral-black: #262626;
+    --neutral-black: #343333;
     --primary-white: #F9FAFB;
     --red-50: #fef2f2;
     --red-200: #fecaca;
+    --red-400: #ea5555;
     --red-600: #dc2626;
     --red-900: #7f1d1d;
     --gray-300: #d6d3d1;
+    --gray-400: #a09d9a;
     --gray-500: #737373;
 
+    --blue-gray-400: #5f6373;
+
 
     --blue-500: #6366f1;
     --blue-50: #eef2ff;
@@ -61,18 +65,17 @@ body {
 }
 
 .header.pass {
-    color: #16a34a; /* green */
+    color: #16a34a;
     color: var(--green-600); /* green */
 }
 
 .header.fail {
-    color: #7f1d1d; /* red */
-    color: var(--red-900); /* red */
+    color: var(--red-400);
+    color: #ea5555;
     font-weight: bold;
 }
 
 .header .time {
-    color: var(--gray-500);
     color: #737373;
     font-size: 14px;
 }
@@ -83,8 +86,8 @@ body {
 }
 
 .test_table .group {
-    border-left: 1px solid #fef2f2;
-    border-left: 1px solid var(--red-50);
+    border-left: 1px solid #313131;
+    border-left: 1px solid var(--neutral-black);
 }
 
 .test_table .group .group {
@@ -106,7 +109,7 @@ body {
 .test_table .groupname {
     font-weight: bold;
     background: var(--neutral-black);
-    background: #262626;
+    background: #313131;
     padding-left: 5px;
     line-height: 24px;
     vertical-align: middle;
@@ -118,8 +121,8 @@ body {
 .test_table .event {
     margin-left: 20px;
     font-size: 14px;
-    border-left: 2px solid var(--blue-50);
-    border-left: 2px solid #eef2ff;
+    border-left: 2px solid var(--blue-gray-400);
+    border-left: 2px solid #5f6373;
     padding: 4px;
     position: relative;
 }
@@ -135,8 +138,8 @@ body {
 }
 
 .test_table .failed .testname {
-    color: var(--red-900);
-    color: #7f1d1d;
+    color: var(--red-400);
+    color: #ea5555;
 }
 
 .test_table .succeeded .testname {
@@ -150,7 +153,7 @@ body {
     width: 100px;
     left: 0px;
     top: 0;
-    text-align: center;
+    text-align: left;
     line-height: 24px;
     vertical-align: middle;
 }
@@ -178,9 +181,9 @@ body {
 }
 
 .test_table .failed .teststatus {
-    color: var(--red-900); /* red */
+    color: var(--red-400); /* red */
     background: var(--bg-black);
-    color:  #7F1D1D; /* red */
+    color:  #ea5555; /* red */
     background: #18181b;
 }
 
@@ -190,21 +193,21 @@ body {
 }
 
 .test_table .event .expected_fail {
-    color: var(--red-900);
-    color: #7f1d1d;
+    color: var(--red-400);
+    color: #ea5555;
 }
 
 .test_table .event .fail {
-    color: var(--red-600);
-    color: #dc2626;
+    color: var(--red-400);
+    color: #ea5555;
 }
 
 .test_table .event .exception {
-    color: var(--red-600);
-    color: #dc2626;
+    color: var(--red-400);
+    color: #ea5555;
 }
 
-.exception pre {
+pre {
     color: var(--primary-white);
     color: #F9FAFB;
 }
@@ -225,8 +228,8 @@ body {
 
 .test_table .event:hover .debug {
     display: inline;
-    color: var(--gray-500);
-    color: #737373;
+    color: var(--gray-400);
+    color: #a09d9a;
     text-decoration: underline;
     cursor: pointer;
 }
@@ -247,7 +250,6 @@ body {
 }
 
 .string_equal_expected ins {
-    background: var(--yellow-400);
     background: #f59e0b;
 }
 
@@ -265,6 +267,15 @@ body {
 }
 
 .failedTests {
-    color: var(--red-900);
-    color: #7f1d1d;
+    color: var(--red-400);
+    color: #ea5555;
+}
+
+#testProgressBar {
+    background: --var(--blue-gray-400);
+    background: #5f6373;
+}
+
+.progress-bar.bg-warning {
+    background-color: #f59e0b !important;
 }