Improve rendering with high-contrast theme

gorhill · gorhill · commit 5d7e5ee3a0a2 · 2025-08-20T11:02:35.000-04:00
Related issue: uBlockOrigin/uBlock-issues#3385
diff --git a/src/css/common.css b/src/css/common.css
@@ -80,7 +80,7 @@ button {
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
-    border: 0;
+    border: var(--button-border-size) solid var(--ink-1);
     border-radius: var(--button-border-radius);
     background-color: var(--button-surface);
     color: var(--button-ink);
@@ -193,7 +193,7 @@ label:hover .checkbox:not([disabled]) {
     height: 100%;
     margin: 0;
     min-width: var(--checkbox-size);
-    opacity: 0;
+    opacity: var(--native-control-opacity);
     position: absolute;
     width: 100%;
     }
@@ -204,6 +204,7 @@ label:hover .checkbox:not([disabled]) {
     box-sizing: border-box;
     fill: none;
     height: 100%;
+    opacity: calc(1 - var(--native-control-opacity));
     pointer-events: none;
     position: absolute;
     stroke: none;
@@ -242,14 +243,15 @@ label:hover .checkbox:not([disabled]) {
     height: 100%;
     margin: 0;
     min-width: var(--checkbox-size);
-    opacity: 0;
+    opacity: var(--native-control-opacity);
     position: absolute;
     width: 100%;
     }
 .radio > input[type="radio"] + svg {
     background-color: transparent;
     box-sizing: border-box;
     height: 100%;
+    opacity: calc(1 - var(--native-control-opacity));
     pointer-events: none;
     position: absolute;
     width: 100%;
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
@@ -408,8 +408,11 @@
     --fieldset-header-surface: transparent;
     --fieldset-header-ink: var(--ink-2);
 
+    --native-control-opacity: 0;
+
     --button-ink: var(--ink-1);
     --button-surface: rgb(var(--button-surface-rgb));
+    --button-border-size: 0;
     --button-border-radius: 5px;
     --button-preferred-ink: var(--accent-ink-1);
     --button-preferred-surface: var(--accent-surface-1);
@@ -462,7 +465,8 @@
 
 @media (prefers-contrast: more) {
     :root {
-        --checkbox-checked-ink: var(--ink-1);
+        --native-control-opacity: 1;
+        --button-border-size: 1px;
     }
 }
 
