From 243d0c040d0ba856370ced265a75d32c72ee43c1 Mon Sep 17 00:00:00 2001
From: Sagar Vora <sagar@resilient.tech>
Date: Thu, 29 Apr 2021 15:17:17 +0530
Subject: [PATCH] fix: use css variable for themeability

(cherry picked from commit 2fefa244628d62f4f35024821edcc94f0284a934)
---
 frappe/public/scss/common/global.scss      | 8 ++------
 frappe/public/scss/desk/css_variables.scss | 1 +
 frappe/public/scss/desk/dark.scss          | 3 +++
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss
index 6696c2eb4b..726b3a98a6 100644
--- a/frappe/public/scss/common/global.scss
+++ b/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 {
diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss
index ee9ccd7ba5..135bb7a9f5 100644
--- a/frappe/public/scss/desk/css_variables.scss
+++ b/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;
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index 4e83f4db47..76dcf90bc3 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/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 {