From baff67baa4782fb64dd44868e7ada9cbd6d97a8f Mon Sep 17 00:00:00 2001
From: Maharshi Patel <maharshi.patel988@gmail.com>
Date: Wed, 23 Aug 2023 17:03:24 +0530
Subject: [PATCH] fix: update buttons, breadcrumb and global scss

- updated some styles in global scss
- updated buttons scss
- updated breadcrumb style to be consistent with new design
---
 frappe/public/scss/common/buttons.scss  | 29 ++++++++++++++-----------
 frappe/public/scss/desk/breadcrumb.scss |  6 ++---
 frappe/public/scss/desk/global.scss     | 19 ++++++++++------
 3 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/frappe/public/scss/common/buttons.scss b/frappe/public/scss/common/buttons.scss
index 62479e7a7a..e8a326f972 100644
--- a/frappe/public/scss/common/buttons.scss
+++ b/frappe/public/scss/common/buttons.scss
@@ -6,9 +6,11 @@
 
 .btn {
 	border: none;
+	padding: 4px 8px;
+	background-color: var(--white);
 	border-radius: var(--border-radius);
-	box-shadow: var(--btn-shadow);
-	font-size: var(--text-md);
+	box-shadow: none;
+	font-size: var(--text-base);
 	&.icon-btn {
 		height: var(--btn-height);
 		padding: 0px;
@@ -40,12 +42,13 @@
 
 .btn-primary-light {
 	@include button-variant(
-		$background: $primary-light,
-		$border: $primary-light,
-		$hover-background: lighten($primary-light, 1%),
-		$hover-border: $primary-light,
-		$active-background: lighten($primary-light, 1%),
-		$active-border: darken($primary-light, 12.5%)
+		// not happy with this
+		$background: $gray-300,
+		$border: $gray-800,
+		$hover-background: $gray-200,
+		$hover-border: $gray-300,
+		$active-background: $gray-300,
+		$active-border: $gray-200
 	);
 
 	color: var(--primary);
@@ -54,7 +57,7 @@
 	}
 
 	&:focus {
-		box-shadow: 0 0 0 0.2rem var(--primary-light);
+		box-shadow: var(--focus-default);
 	}
 }
 
@@ -62,16 +65,16 @@
 	background-color: var(--control-bg);
 	color: var(--text-color);
 	&:hover, &:active {
-		background-color: var(--gray-400);
+		background-color: var(--gray-300);
 		color: var(--text-color);
 	}
 }
 
 .btn.btn-default {
-	background-color: var(--fg-color);
+	background-color: var(--control-bg);
 	color: var(--text-color);
 	&:hover, &:active {
-		background: var(--fg-hover-color);
+		background: var(--gray-300);
 		color: var(--text-color);
 	}
 }
@@ -85,7 +88,7 @@
 }
 
 .btn.btn-danger {
-	background-color: var(--red-400);
+	background-color: var(--danger);
 	color: $white;
 }
 
diff --git a/frappe/public/scss/desk/breadcrumb.scss b/frappe/public/scss/desk/breadcrumb.scss
index b466bab7ae..8b6868124d 100644
--- a/frappe/public/scss/desk/breadcrumb.scss
+++ b/frappe/public/scss/desk/breadcrumb.scss
@@ -7,9 +7,9 @@
 /*! This comment will be included even in compressed mode. */
 #navbar-breadcrumbs {
 	margin-left: var(--margin-md);
-	font-size: var(--text-sm);
+	font-size: var(--text-base);
+	font-weight: var(--weight-regular);
 	a {
-		font-size: var(--text-md);
 		margin-right: 10px;
 		&:before {
 			content: #{"/*!rtl:var(--left-arrow-svg);*/"}var(--right-arrow-svg);
@@ -20,7 +20,7 @@
 
 	li.disabled {
 		a {
-			color: var(--text-muted);
+			color: var(--gray-600);
 			pointer-events: none;
 		}
 	}
diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss
index 98aeacf55d..64fcd4531d 100644
--- a/frappe/public/scss/desk/global.scss
+++ b/frappe/public/scss/desk/global.scss
@@ -5,7 +5,8 @@ html {
 body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	color: var(--text-light);
+	color: var(--text-muted);
+	font-weight: var(--weight-regular);
 	background-color: var(--bg-color);
 
 	&.full-width {
@@ -231,7 +232,7 @@ h2 {
 
 .btn-group-sm > .btn, .btn-sm {
 	padding: var(--padding-xs) var(--padding-sm);
-	font-size: var(--text-md);
+	font-size: var(--text-base);
 }
 
 .btn-group {
@@ -284,7 +285,7 @@ h2 {
 
 .input-xs {
 	height: 26px;
-	font-size: var(--text-md);
+	font-size: var(--text-base);
 }
 
 select.input-xs {
@@ -308,12 +309,13 @@ select.input-xs {
 /* dropdowns */
 
 .dropdown-item {
-	border-radius: 4px;
+	border-radius: 8px;
+	padding : var(--dropdown-padding) !important;
 }
 
 .dropdown-menu {
 	padding: 4px;
-	font-size: var(--text-md);
+	font-size: var(--text-base);
 	max-height: 500px;
 	overflow: auto;
 
@@ -351,7 +353,7 @@ select.input-xs {
 }
 
 .custom-control.custom-switch {
-	font-size: var(--text-md);
+	font-size: var(--text-base);
 	line-height: 1.6;
 
 	.custom-control-input ~ .custom-control-label {
@@ -534,6 +536,9 @@ body.no-sidebar {
 
 .app-logo {
 	width: 24px;
+	h4 {
+		margin-top: 0;
+	}
 }
 
 .alt-pressed .alt-underline {
@@ -578,7 +583,7 @@ details > summary:focus {
 }
 
 .text-medium {
-	font-size: var(--text-md);
+	font-size: var(--text-base);
 }
 
 .text-small {