From 5682b89f01a74b596384bc41b993ad442a80915f Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Fri, 3 Feb 2023 13:27:26 +0530
Subject: [PATCH 1/2] fix variance, consolidate styles into shared selector

---
 .../Drawer/DrawerPanel/DesignColors.js        |  6 +-
 .../Drawer/DrawerPanel/DesignTypography.js    |  8 +-
 .../components/Drawer/stylesheet.scss         | 83 +++++++------------
 3 files changed, 40 insertions(+), 57 deletions(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
index ecc6d11ba..2c8eba42b 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -277,9 +277,9 @@ const DesignColors = () => {
 			paletteRenderedList.push(
 				<div
 					key={ colorStyle }
-					className={ `color-palette ${
+					className={ `color-palette drawer-palette--button ${
 						colorStyle == selectedColors?.slug
-							? 'color-palette-selected'
+							? 'color-palette-selected drawer-palette--button--selected'
 							: ''
 					} ` }
 					onClick={ ( e ) => handleClick( colorStyle ) }
@@ -304,7 +304,7 @@ const DesignColors = () => {
 							} }
 						/>
 					</div>
-					<div className="color-palette__name">
+					<div className="color-palette__name drawer-palette--button__text">
 						{ colorStyle?.charAt( 0 ).toUpperCase() +
 							colorStyle?.slice( 1 ) }
 					</div>
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index 8d831f38c..b4184f611 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -134,8 +134,10 @@ const DesignTypography = () => {
 			if ( splitLabel.length == 0 ) continue;
 			paletteRenderedList.push(
 				<div
-					className={ `font-palette ${
-						selectedFont == fontStyle ? 'font-palette-selected' : ''
+					className={ `font-palette drawer-palette--button ${
+						selectedFont == fontStyle
+							? 'font-palette-selected drawer-palette--button--selected'
+							: ''
 					} ` }
 					onClick={ ( e ) => handleClick( fontStyle ) }
 				>
@@ -149,7 +151,7 @@ const DesignTypography = () => {
 					>
 						Aa
 					</div>
-					<div className="font-palette__name">
+					<div className="font-palette__name drawer-palette--button__text">
 						<span
 							style={ {
 								fontFamily:
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index 9802393c3..da439f438 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -361,29 +361,8 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 }
 
 .color-palette {
-
-	width: 88%;
-	height: 30px;
-	display: flex;
-	margin: 8px 4px;
-	cursor: pointer;
-	position: relative;
-	padding: 10px 16px;
-	align-items: center;
-	background-color: white;
 	justify-content: space-between;
 
-	&:hover {
-		background-color: var(--nfd-onboarding-drawer-icon-fill);
-	}
-
-	&-selected {
-		background-color: $main-border-main;
-		.color-palette__name {
-			color: var(--nfd-onboarding-light);
-		}
-	}
-
 	&__colors {
 
 		display: flex;
@@ -416,12 +395,39 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 			border: 1px solid rgba(0, 0, 0, 0.3);
 		}
 	}
+}
 
-	&__name {
-		color: black;
-		font-size: 12px;
-		font-weight: 700;
-		line-height: 16px;
+.drawer-palette {
+
+	&--button {
+		width: 88%;
+		height: 30px;
+		display: flex;
+		margin: 8px 4px;
+		cursor: pointer;
+		position: relative;
+		padding: 10px 16px;
+		align-items: center;
+		background-color: var(--nfd-onboarding-white);
+
+		&:hover {
+			background-color: var(--nfd-onboarding-tertiary);
+		}
+
+		&--selected {
+			background-color: var(--nfd-onboarding-primary-alt);
+
+			.drawer-palette--button__text {
+				color: var(--nfd-onboarding-white);
+			}
+		}
+
+		&__text {
+			color: black;
+			font-size: 12px;
+			font-weight: 700;
+			line-height: 16px;
+		}
 	}
 }
 
@@ -521,36 +527,11 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 
 .font-palette {
 
-	width: 88%;
-	height: 30px;
-	display: flex;
-	margin: 8px 4px;
-	cursor: pointer;
-	position: relative;
-	padding: 10px 16px;
-	align-items: center;
-	background-color: white;
-
-	&:hover {
-		background-color: var(--nfd-onboarding-drawer-icon-fill);
-	}
-
-	&-selected {
-		background-color: $main-border-main;
-	}
-
 	&__icon {
 		color: black;
 		font-weight: 700;
 		margin-right: 16px;
 	}
-
-	&__name {
-		color: black;
-		font-size: 12px;
-		font-weight: 700;
-		line-height: 16px;
-	}
 }
 
 .custom-font-palette {

From 8491531a16b02954de1c158be64f6ecf2fc42634 Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Tue, 7 Feb 2023 18:13:02 +0530
Subject: [PATCH 2/2] match color pairing with Aa text

---
 .../components/Drawer/DrawerPanel/DesignTypography.js           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
index b4184f611..644081e50 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -142,7 +142,7 @@ const DesignTypography = () => {
 					onClick={ ( e ) => handleClick( fontStyle ) }
 				>
 					<div
-						className="font-palette__icon"
+						className="font-palette__icon drawer-palette--button__text"
 						style={ {
 							fontFamily:
 								fontPalettes[ fontStyle ]?.styles?.typography