From 1231369cdc3ddde271ab187bc514effd6ca1f60f Mon Sep 17 00:00:00 2001
From: prssanna <prssud@gmail.com>
Date: Mon, 27 Jul 2020 13:42:18 +0530
Subject: [PATCH] fix: use css variables for list and page style

---
 frappe/public/scss/list.scss      | 8 ++++----
 frappe/public/scss/page.scss      | 2 +-
 frappe/public/scss/variables.scss | 4 +++-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frappe/public/scss/list.scss b/frappe/public/scss/list.scss
index 321a10639b..383c14a9f4 100644
--- a/frappe/public/scss/list.scss
+++ b/frappe/public/scss/list.scss
@@ -89,7 +89,7 @@
 	font-size: var(--text-md);
 
 	&:hover {
-		background-color: $gray-50;
+		background-color: var(--control-bg);
 	}
 	&:last-child {
 		border-bottom: 0px;
@@ -179,7 +179,7 @@
 }
 
 .list-paging-area, .footnote-area {
-	border-top: 1px sol var(--gray-100);
+	border-top: 1px sol var(--border-color);
 }
 
 .frappe-card {
@@ -244,7 +244,7 @@ input.list-check-all, input.list-row-checkbox {
 	font-size: var(--text-md);
 
 	&:hover {
-		background-color: $gray-50;
+		background-color: var(--control-bg);
 	}
 
 	// @media (max-width: $screen-xs) {
@@ -256,7 +256,7 @@ input.list-check-all, input.list-row-checkbox {
 	// }
 
 	&--head {
-		background-color: $gray-50;
+		background-color: var(--control-bg);
 		border-bottom: 1px solid $border-color;
 		cursor: auto;
 	}
diff --git a/frappe/public/scss/page.scss b/frappe/public/scss/page.scss
index 2e8d7a0271..f1c958164c 100644
--- a/frappe/public/scss/page.scss
+++ b/frappe/public/scss/page.scss
@@ -79,7 +79,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	background-color: var(--card-bg);
-	border-bottom: 1px solid var(--gray-100);
+	border-bottom: 1px solid var(--border-color);
 
 	.form-group {
 		padding: 0px 5px;
diff --git a/frappe/public/scss/variables.scss b/frappe/public/scss/variables.scss
index 86f373a5ef..89a4c4c683 100644
--- a/frappe/public/scss/variables.scss
+++ b/frappe/public/scss/variables.scss
@@ -104,7 +104,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 	--orange-300: #FDAE8C;
 	--orange-200: #FECDB8;
 	--orange-100: #FFEAE1;
-	--orange-050: #FFF5F0;
+	--orange-50: #FFF5F0;
 
 	--purple-900: #343360;
 	--purple-800: #45438F;
@@ -167,6 +167,7 @@ $card-box-shadow: 0px 0px 1px rgba(17, 43, 66, 0.16), 0px 1px 3px rgba(17, 43, 6
 	--control-bg: var(--gray-100);
 	--modal-bg: white;
 	--toast-bg: var(--modal-bg);
+	--popover-bg: white;
 
 	--sidebar-select-color: var(--gray-200);
 
@@ -260,6 +261,7 @@ $dropdown-item-padding-x: 0.5rem !default;
 	--control-bg: var(--gray-700);
 	--modal-bg: var(--gray-700);
 	--toast-bg: var(--modal-bg);
+	--popover-bg: var(--bg-color);
 
 	--sidebar-select-color: var(--gray-800);