From 62ca89b10f0cefeb0a4fc0d22b5d4e7b0bcdbc57 Mon Sep 17 00:00:00 2001
From: RitvikSardana <65544983+RitvikSardana@users.noreply.github.com>
Date: Tue, 25 Jul 2023 13:01:10 +0530
Subject: [PATCH] fix: POS background color optimized in dark mode (#36287)

fix: POS dark theme compatability

Co-authored-by: Ritvik Sardana <ritviksardana@Ritviks-MacBook-Air.local>
---
 erpnext/public/scss/point-of-sale.scss | 30 +++++++++++---------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/erpnext/public/scss/point-of-sale.scss b/erpnext/public/scss/point-of-sale.scss
index 7b7530b150..c9d001c127 100644
--- a/erpnext/public/scss/point-of-sale.scss
+++ b/erpnext/public/scss/point-of-sale.scss
@@ -34,7 +34,7 @@
 	}
 
 	.abbr {
-		background-color: var(--gray-50);
+		background-color: var(--control-bg);
 		font-size: var(--text-3xl);
 	}
 
@@ -72,7 +72,7 @@
 	.highlighted-numpad-btn {
 		box-shadow: inset 0 0px 4px 0px rgba(0, 0, 0, 0.15) !important;
 		font-weight: 700;
-		background-color: var(--gray-50);
+		background-color: var(--control-bg);
 	}
 
 	> .items-selector {
@@ -152,7 +152,6 @@
 					margin-bottom: 0px;
 					min-height: 8rem;
 					height: 8rem;
-					color: var(--gray-500);
 
 					> img {
 						@extend .image;
@@ -242,7 +241,7 @@
 						width: 3rem;
 						height: 3rem;
 						border-radius: 50%;
-						color: var(--gray-500);
+						color: var(--text-light);
 						margin-right: var(--margin-md);
 
 						> img {
@@ -268,7 +267,6 @@
 						}
 
 						>.customer-desc {
-							color: var(--gray-600);
 							font-weight: 500;
 							font-size: var(--text-sm);
 						}
@@ -363,7 +361,7 @@
 					display: flex;
 					align-items: center;
 					justify-content: center;
-					background-color: var(--gray-50);
+					background-color: var(--control-bg);
 					border-radius: var(--border-radius-md);
 					font-size: var(--text-md);
 					font-weight: 500;
@@ -385,7 +383,7 @@
 						border-radius: var(--border-radius-md);
 
 						&:hover {
-							background-color: var(--gray-50);
+							background-color: var(--control-bg);
 						}
 
 						> .item-image {
@@ -395,7 +393,7 @@
 							width: 2rem;
 							height: 2rem;
 							border-radius: var(--border-radius-md);
-							color: var(--gray-500);
+							color: var(--text-light);
 							margin-right: var(--margin-md);
 
 							> img {
@@ -537,13 +535,13 @@
 					> .edit-cart-btn {
 						@extend .primary-action;
 						display: none;
-						background-color: var(--gray-300);
+						background-color: var(--control-bg);
 						font-weight: 500;
 						transition: all 0.15s ease-in-out;
 
 						&:hover {
-							background-color: var(--gray-600);
-							color: white;
+							background-color: var(--control-bg);
+							color: var(--text-light);
 							font-weight: 700;
 						}
 					}
@@ -832,13 +830,13 @@
 						> .shortcut {
 							@extend .pointer-no-select;
 							border-radius: var(--border-radius-sm);
-							background-color: var(--gray-100);
+							background-color: var(--control-bg);
 							font-weight: 500;
 							padding: var(--padding-xs) var(--padding-sm);
 							transition: all 0.15s ease-in-out;
 
 							&:hover {
-								background-color: var(--gray-300);
+								background-color: var(--control-bg);
 							}
 						}
 					}
@@ -912,7 +910,7 @@
 
 			> .totals {
 				display: flex;
-				background-color: var(--gray-100);
+				background-color: var(--control-bg);
 				justify-content: center;
 				padding: var(--padding-md);
 				border-radius: var(--border-radius-md);
@@ -924,7 +922,6 @@
 					> .total-label {
 						font-size: var(--text-md);
 						font-weight: 500;
-						color: var(--gray-600);
 					}
 
 					> .value {
@@ -1036,7 +1033,6 @@
 						> .customer-email {
 							font-size: var(--text-md);
 							font-weight: 500;
-							color: var(--gray-600);
 						}
 
 						> .cashier {
@@ -1071,7 +1067,7 @@
 					display: flex;
 					flex-direction: column;
 					border-radius: var(--border-radius-md);
-					background-color: var(--gray-50);
+					background-color: var(--control-bg);
 					margin: var(--margin-md) 0px;
 
 					> .summary-row-wrapper {