fix: use css variable for themeability

(cherry picked from commit 2fefa24462)

frappe/public/scss/common/global.scss

@@ -30,7 +30,7 @@ input[type="checkbox"] {
 	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 	border-radius: 4px;
 
-	// Reset Browser Behavior
+	// Reset browser behavior
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
@@ -52,11 +52,7 @@ input[type="checkbox"] {
 
 	&:focus {
 		outline: none; // Prevent browser behavior
-		box-shadow: 0 0 0 2px var(--gray-300);
-
-		[data-theme="dark"] & {
-			box-shadow: 0 0 0 2px var(--gray-600);
-		}
+		box-shadow: var(--checkbox-focus-shadow);
 	}
 
 	&.disabled-deselected, &:disabled {

frappe/public/scss/desk/css_variables.scss

@@ -52,6 +52,7 @@ $input-height: 28px !default;
 	// checkbox
 	--checkbox-right-margin: var(--margin-xs);
 	--checkbox-size: 14px;
+	--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
 
 	// timeline
 	--timeline-item-icon-size: 34px;

frappe/public/scss/desk/dark.scss

@@ -78,6 +78,9 @@
 	// input
 	--input-disabled-bg: none;
 
+	// checkbox
+	--checkbox-focus-shadow: 0 0 0 2px var(--gray-600);
+
 	color-scheme: dark;
 
 	.frappe-card {