From 5d7e5ee3a0a242714eea0952a37d67c12a08fd7b Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Wed, 20 Aug 2025 11:02:35 -0400
Subject: [PATCH] Improve rendering with high-contrast theme

Related issue:
https://github.com/uBlockOrigin/uBlock-issues/issues/3385
---
 src/css/common.css         | 8 +++++---
 src/css/themes/default.css | 6 +++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/css/common.css b/src/css/common.css
index 42b196dfd..1089a7c59 100644
--- 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,7 +243,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%;
     }
@@ -250,6 +251,7 @@ label:hover .checkbox:not([disabled]) {
     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
index f627c35ff..8a6378aa6 100644
--- 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;
     }
 }