From 0126ae1bd6cd0d24f18b8e3a32313b065afb5cce Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Thu, 6 Jan 2022 21:26:11 +0530
Subject: [PATCH 1/8] added css for monochrome button

---
 assets/scss/shared-ui/_sui-button.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/assets/scss/shared-ui/_sui-button.scss b/assets/scss/shared-ui/_sui-button.scss
index ad490672..9b09ba8f 100644
--- a/assets/scss/shared-ui/_sui-button.scss
+++ b/assets/scss/shared-ui/_sui-button.scss
@@ -149,4 +149,21 @@ $button-sizes: (
 			}
 		}
 	}
+}
+
+@include body-class($wrap: true, $monochrome: true) { 
+	%button-basics {
+		color: $accessible-light;
+		background: $accessible-dark;
+		border-color: $accessible-dark;
+		&:hover{
+			background: $nightrider;
+			border-color: $nightrider;
+		}
+		&:focus{
+			outline: $black;
+			border-color: $black;
+			background: $nightrider;
+		}
+	}
 }
\ No newline at end of file

From af50fe0f068c985a505b44de0b270eeecad162a1 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Thu, 6 Jan 2022 21:34:10 +0530
Subject: [PATCH 2/8] added css for monochrome button

---
 assets/scss/shared-ui/_sui-button.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/scss/shared-ui/_sui-button.scss b/assets/scss/shared-ui/_sui-button.scss
index 9b09ba8f..f3ba829d 100644
--- a/assets/scss/shared-ui/_sui-button.scss
+++ b/assets/scss/shared-ui/_sui-button.scss
@@ -152,7 +152,7 @@ $button-sizes: (
 }
 
 @include body-class($wrap: true, $monochrome: true) { 
-	%button-basics {
+	@include block('button') {
 		color: $accessible-light;
 		background: $accessible-dark;
 		border-color: $accessible-dark;

From b8713fb78bfb90320c34f8ebcd0ea41dc68ea575 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Fri, 7 Jan 2022 17:20:24 +0530
Subject: [PATCH 3/8] added monochrome variation for button

---
 .../scss/shared-ui/_color-accessibility.scss  |  2 +-
 assets/scss/shared-ui/_sui-button.scss        | 36 +++++++++++++------
 page-buttons.html                             |  4 +--
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/assets/scss/shared-ui/_color-accessibility.scss b/assets/scss/shared-ui/_color-accessibility.scss
index e7def78e..63c171af 100644
--- a/assets/scss/shared-ui/_color-accessibility.scss
+++ b/assets/scss/shared-ui/_color-accessibility.scss
@@ -141,7 +141,7 @@
 		}
 
 		// Icons.
-		[class*="sui-icon-"],
+		// [class*="sui-icon-"],
 		.sui-dialog-close {
 			&:before {
 				color: $accessible-dark !important;
diff --git a/assets/scss/shared-ui/_sui-button.scss b/assets/scss/shared-ui/_sui-button.scss
index df346ad2..7ce485be 100644
--- a/assets/scss/shared-ui/_sui-button.scss
+++ b/assets/scss/shared-ui/_sui-button.scss
@@ -178,19 +178,35 @@ $button-sizes: (
 	}
 }
 
-@include body-class($wrap: true, $monochrome: true) { 
+@include body-class($wrap: true, $rtl: false, $monochrome: true) { 
 	@include block('button') {
-		color: $accessible-light;
-		background: $accessible-dark;
-		border-color: $accessible-dark;
-		&:hover{
-			background: $nightrider;
-			border-color: $nightrider;
+		color: $accessible-dark;
+		
+		&.sui-button--solid,
+		&[class*="sui-button--solid-"],
+		&.sui-button--light,
+		&[class*="sui-button--light-"],
+		&[disabled],
+		&:hover {
+			background: $accessible-dark;
+			border-color: $accessible-dark;
+			color: $accessible-light;
 		}
-		&:focus{
-			outline: $black;
-			border-color: $black;
+
+		&.sui-button--ghost,
+		&[class*="sui-button--ghost-"] {
+			border-color: $accessible-dark;
+		}
+
+		&:hover {
+			box-shadow: 0 3px 6px 1px rgba(0,0,0,0.2);
+		}
+
+		&:focus {
+			outline: $ironmike;
+			border-color: $ironmike;
 			background: $nightrider;
+			color: $accessible-light;
 		}
 	}
 }
\ No newline at end of file
diff --git a/page-buttons.html b/page-buttons.html
index 421da8b6..562daf5c 100644
--- a/page-buttons.html
+++ b/page-buttons.html
@@ -344,7 +344,7 @@ <h2 class="sui-box-title">Button Design</h2>
 									</button>
 								</div>
 								<div style="margin-bottom: 30px;">
-									<button class="sui-button sui-button--green sui-button--loading" disabled>
+									<button class="sui-button sui-button--solid-green sui-button--loading" disabled>
 										<span class="sui-button__label">Button</span>
 										<span class="sui-button__loader sui-icon-loader sui-loading sui-sm" aria-hidden="true"></span>
 									</button>
@@ -478,7 +478,7 @@ <h2 class="sui-box-title">Button Design</h2>
 									</button>
 								</div>
 								<div style="margin-bottom: 30px;">
-									<button class="sui-button sui-button--green sui-button--loading" disabled>
+									<button class="sui-button sui-button--solid-green sui-button--loading" disabled>
 										<span class="sui-button__label">Button</span>
 										<span class="sui-button__loader sui-icon-loader sui-loading sui-sm" aria-hidden="true"></span>
 									</button>

From 0b02df4acae877fea9275c41938b1c66617b64dd Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 12 Jan 2022 13:43:21 +0530
Subject: [PATCH 4/8] added button solid light monochrome css

---
 assets/scss/shared-ui/_sui-button.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/assets/scss/shared-ui/_sui-button.scss b/assets/scss/shared-ui/_sui-button.scss
index 83921d1d..208a6542 100644
--- a/assets/scss/shared-ui/_sui-button.scss
+++ b/assets/scss/shared-ui/_sui-button.scss
@@ -39,8 +39,13 @@ $height--default: 30;
 	@include block('button') {
 		color: $accessible-dark;
 
+		&[class*="sui-button--light"]{
+			background: $smoke;
+			color: $accessible-dark;
+			border-color: $smoke;
+		}
+
 		&[class*="sui-button--solid"],
-		&[class*="sui-button--light"],
 		&[disabled],
 		&:hover {
 			background: $accessible-dark;
@@ -49,7 +54,9 @@ $height--default: 30;
 		}
 
 		&[class*="sui-button--ghost"] {
+			background: $accessible-light;
 			border-color: $accessible-dark;
+			color: $accessible-dark;
 		}
 
 		&:hover {

From 5c271bdea9290f1a2257eaa876009ae8b1bef0a9 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 12 Jan 2022 13:47:05 +0530
Subject: [PATCH 5/8] css fixes

---
 assets/scss/shared-ui/_sui-button.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/scss/shared-ui/_sui-button.scss b/assets/scss/shared-ui/_sui-button.scss
index 208a6542..25f0f481 100644
--- a/assets/scss/shared-ui/_sui-button.scss
+++ b/assets/scss/shared-ui/_sui-button.scss
@@ -45,6 +45,12 @@ $height--default: 30;
 			border-color: $smoke;
 		}
 
+		&[class*="sui-button--ghost"] {
+			background: $accessible-light;
+			border-color: $accessible-dark;
+			color: $accessible-dark;
+		}
+
 		&[class*="sui-button--solid"],
 		&[disabled],
 		&:hover {
@@ -53,12 +59,6 @@ $height--default: 30;
 			color: $accessible-light;
 		}
 
-		&[class*="sui-button--ghost"] {
-			background: $accessible-light;
-			border-color: $accessible-dark;
-			color: $accessible-dark;
-		}
-
 		&:hover {
 			box-shadow: 0 3px 6px 1px rgba(0,0,0,0.2);
 		}

From 1fe5116cf20f06fe84fe5df22f30e6765ac6bca7 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Mon, 24 Jan 2022 21:27:48 +0530
Subject: [PATCH 6/8] added monochrome css

---
 .../_button-design--color.scss                | 31 +++++++++++++++
 .../_button-themes/_button-theme-ghost.scss   | 29 +++++++++++++-
 .../_button-themes/_button-theme-light.scss   | 27 +++++++++++++
 .../_button-themes/_button-theme-solid.scss   | 29 +++++++++++++-
 .../_button-themes/_button-theme-text.scss    | 27 ++++++++++++-
 .../shared-ui/_sui-button/_sui-button.scss    | 39 ++++++++++++++++++-
 page-buttons.html                             |  2 +-
 7 files changed, 179 insertions(+), 5 deletions(-)

diff --git a/assets/scss/shared-ui/_sui-button/_button-modifiers/_button-design--color.scss b/assets/scss/shared-ui/_sui-button/_button-modifiers/_button-design--color.scss
index 8502ccb9..1aa80b72 100644
--- a/assets/scss/shared-ui/_sui-button/_button-modifiers/_button-design--color.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-modifiers/_button-design--color.scss
@@ -41,4 +41,35 @@
 
 	// DIR: Right-to-Left.
 	// No need.
+
+	// DIR: Monochrome.
+	@include body-class($wrap: true, $rtl: false, $monochrome: true) {
+
+		@include block($block) {
+
+			// Build text button.
+			@include sui-button--tool.button-theme-constructor(default, sui-button--palette.$button-theme-text-mono);
+
+			// // Build solid button.
+			@include sui-button--tool.button-theme-constructor(modifier, sui-button--palette.$button-theme-solid-mono, 'solid');
+
+			// Build light button.
+			@include sui-button--tool.button-theme-constructor(modifier, sui-button--palette.$button-theme-light-mono, 'light');
+
+			// // Build ghost button.
+			@include sui-button--tool.button-theme-constructor(modifier, sui-button--palette.$button-theme-ghost-mono, 'ghost');
+		}
+
+		// Disabled container.
+		*[disabled],
+		*:disabled,
+		*.disabled {
+
+			@include block($block) {
+
+				// Set disabled button styles.
+				// @include sui-button--tool.button-theme-constructor(disabled-container, sui-button--palette.$button-theme-mono);
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-ghost.scss b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-ghost.scss
index 92aa17c6..e1ba778e 100644
--- a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-ghost.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-ghost.scss
@@ -81,4 +81,31 @@ $button-theme-ghost: (
 			color: color.$white
 		)
 	),
-);
\ No newline at end of file
+);
+
+// mono color styling for buttons
+$ghost-monostyle: (
+	static: (
+		border: color.$black,
+		background: color.$white,
+		color: color.$black
+	),
+	hover: (
+		border: color.$black,
+		background: color.$black
+	),
+	focus: (
+		outline: color.$ironmike,
+		border-color: color.$ironmike,
+		background: color.$nightrider,
+		color: color.$white
+	),
+);
+
+$button-theme-ghost-mono: (
+	'grey': $ghost-monostyle,
+	'blue': $ghost-monostyle,
+	'red': $ghost-monostyle,
+	'purple': $ghost-monostyle,
+	'green': $ghost-monostyle,
+);
diff --git a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-light.scss b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-light.scss
index 089a14e7..aeb5545f 100644
--- a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-light.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-light.scss
@@ -86,4 +86,31 @@ $button-theme-light: (
 			color: color.$white
 		)
 	),
+);
+
+// mono color styling for buttons
+$light-monostyle: (
+	static: (
+		border: color.$smoke,
+		background: color.$smoke,
+		color: color.$black
+	),
+	hover: (
+		border: color.$grey,
+		background: color.$grey,
+		color: color.$white
+	),
+	focus: (
+		border: color.$overcast,
+		background: color.$grey,
+		color: color.$white
+	)
+);
+
+$button-theme-light-mono: (
+	'grey': $light-monostyle,
+	'blue': $light-monostyle,
+	'red': $light-monostyle,
+	'purple': $light-monostyle,
+	'green': $light-monostyle,
 );
\ No newline at end of file
diff --git a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-solid.scss b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-solid.scss
index 8c675e0f..a59e1740 100644
--- a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-solid.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-solid.scss
@@ -76,4 +76,31 @@ $button-theme-solid: (
 			background: color.$green-dark
 		)
 	),
-);
\ No newline at end of file
+);
+
+// mono color styling for buttons
+$solid-monostyle: (
+	static: (
+		border: color.$black,
+		background: color.$black,
+		color: color.$white
+	),
+	hover: (
+		border: color.$black,
+		background: color.$black
+	),
+	focus: (
+		outline: color.$ironmike,
+		border-color: color.$ironmike,
+		background: color.$nightrider,
+		color: color.$white
+	),
+);
+
+$button-theme-solid-mono: (
+	'grey': $solid-monostyle,
+	'blue': $solid-monostyle,
+	'red': $solid-monostyle,
+	'purple': $solid-monostyle,
+	'green': $solid-monostyle,
+);
diff --git a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss
index cfb0edea..39d7f544 100644
--- a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss
@@ -72,4 +72,29 @@ $button-theme-text: (
 			background: color.$green-ghost
 		)
 	),
-);
\ No newline at end of file
+);
+
+// mono color styling for buttons
+$text-monostyle: (
+	static: (
+		color: color.$black,
+	),
+	hover: (
+		border: color.$black,
+		background: color.$black
+	),
+	focus: (
+		outline: color.$ironmike,
+		border-color: color.$ironmike,
+		background: color.$nightrider,
+		color: color.$white
+	),
+);
+
+$button-theme-text-mono: (
+	'grey': $text-monostyle,
+	'blue': $text-monostyle,
+	'red': $text-monostyle,
+	'purple': $text-monostyle,
+	'green': $text-monostyle,
+);
diff --git a/assets/scss/shared-ui/_sui-button/_sui-button.scss b/assets/scss/shared-ui/_sui-button/_sui-button.scss
index b439f51c..0b646e60 100644
--- a/assets/scss/shared-ui/_sui-button/_sui-button.scss
+++ b/assets/scss/shared-ui/_sui-button/_sui-button.scss
@@ -15,4 +15,41 @@ $block-name: button;
 @include sui-button--modifier.button-size($block-name);
 @include sui-button--modifier.button-design--type($block-name);
 @include sui-button--modifier.button-design--color($block-name);
-@include sui-button--modifier.button-state($block-name);
\ No newline at end of file
+@include sui-button--modifier.button-state($block-name);
+
+// @include body-class($wrap: true, $rtl: false, $monochrome: true) { 
+// 	@include block('button') {
+// 		color: $accessible-dark;
+
+// 		&[class*="sui-button--light"]{
+// 			background: $smoke;
+// 			color: $accessible-dark;
+// 			border-color: $smoke;
+// 		}
+
+// 		&[class*="sui-button--ghost"] {
+// 			background: $accessible-light;
+// 			border-color: $accessible-dark;
+// 			color: $accessible-dark;
+// 		}
+
+// 		&[class*="sui-button--solid"],
+// 		&[disabled],
+// 		&:hover {
+// 			background: $accessible-dark;
+// 			border-color: $accessible-dark;
+// 			color: $accessible-light;
+// 		}
+
+// 		&:hover {
+// 			box-shadow: 0 3px 6px 1px rgba(0,0,0,0.2);
+// 		}
+
+// 		&:focus {
+// 			outline: $ironmike;
+// 			border-color: $ironmike;
+// 			background: $nightrider;
+// 			color: $accessible-light;
+// 		}
+// 	}
+// } 
diff --git a/page-buttons.html b/page-buttons.html
index 25beff1b..975442c4 100644
--- a/page-buttons.html
+++ b/page-buttons.html
@@ -344,7 +344,7 @@ <h2 class="sui-box-title">Button Design</h2>
 									</button>
 								</div>
 								<div style="margin-bottom: 30px;">
-									<button class="sui-button sui-button--solid-green sui-button--loading" disabled>
+									<button class="sui-button sui-button--green sui-button--loading" disabled>
 										<span class="sui-button__label">Button</span>
 										<span class="sui-button__loader sui-icon-loader sui-loading sui-sm" aria-hidden="true"></span>
 									</button>

From a18d39ad4fa5a91bab8a27bea548f30423d2d612 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 26 Jan 2022 11:00:11 +0530
Subject: [PATCH 7/8] added hover and focus styl

---
 .../scss/shared-ui/_color-accessibility.scss  |  1 -
 .../_button-design--color.scss                |  4 +-
 .../_button-themes/_button-theme-ghost.scss   | 54 ++++++++++-------
 .../_button-themes/_button-theme-light.scss   | 56 +++++++++++-------
 .../_button-themes/_button-theme-solid.scss   | 54 ++++++++++-------
 .../_button-themes/_button-theme-text.scss    | 59 +++++++++++++------
 .../_button-utilities/_build-theme.scss       |  6 ++
 .../shared-ui/_sui-button/_sui-button.scss    | 37 ------------
 8 files changed, 148 insertions(+), 123 deletions(-)

diff --git a/assets/scss/shared-ui/_color-accessibility.scss b/assets/scss/shared-ui/_color-accessibility.scss
index 63c171af..33f9e9af 100644
--- a/assets/scss/shared-ui/_color-accessibility.scss
+++ b/assets/scss/shared-ui/_color-accessibility.scss
@@ -141,7 +141,6 @@
 		}
 
 		// Icons.
-		// [class*="sui-icon-"],
 		.sui-dialog-close {
 			&:before {
 				color: $accessible-dark !important;
diff --git a/assets/scss/shared-ui/_sui-button/_button-modifiers/_button-design--color.scss b/assets/scss/shared-ui/_sui-button/_button-modifiers/_button-design--color.scss
index 1aa80b72..f1c2702f 100644
--- a/assets/scss/shared-ui/_sui-button/_button-modifiers/_button-design--color.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-modifiers/_button-design--color.scss
@@ -66,9 +66,9 @@
 		*.disabled {
 
 			@include block($block) {
-
+				
 				// Set disabled button styles.
-				// @include sui-button--tool.button-theme-constructor(disabled-container, sui-button--palette.$button-theme-mono);
+				@include sui-button--tool.button-theme-constructor(disabled-container, sui-button--palette.$button-theme-text-mono);
 			}
 		}
 	}
diff --git a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-ghost.scss b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-ghost.scss
index e1ba778e..d3ac73bf 100644
--- a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-ghost.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-ghost.scss
@@ -84,28 +84,40 @@ $button-theme-ghost: (
 );
 
 // mono color styling for buttons
-$ghost-monostyle: (
-	static: (
-		border: color.$black,
-		background: color.$white,
-		color: color.$black
+$button-theme-ghost-mono: (
+	'grey': (
+		static: (
+			border: color.$black,
+			background: color.$white,
+			color: color.$black
+		),
 	),
-	hover: (
-		border: color.$black,
-		background: color.$black
+	'blue': (
+		static: (
+			border: color.$black,
+			background: color.$white,
+			color: color.$black
+		),
 	),
-	focus: (
-		outline: color.$ironmike,
-		border-color: color.$ironmike,
-		background: color.$nightrider,
-		color: color.$white
+	'red': (
+		static: (
+			border: color.$black,
+			background: color.$white,
+			color: color.$black
+		),
+	),
+	'purple': (
+		static: (
+			border: color.$black,
+			background: color.$white,
+			color: color.$black
+		),
+	),
+	'green': (
+		static: (
+			border: color.$black,
+			background: color.$white,
+			color: color.$black
+		),
 	),
-);
-
-$button-theme-ghost-mono: (
-	'grey': $ghost-monostyle,
-	'blue': $ghost-monostyle,
-	'red': $ghost-monostyle,
-	'purple': $ghost-monostyle,
-	'green': $ghost-monostyle,
 );
diff --git a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-light.scss b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-light.scss
index aeb5545f..ef86c12c 100644
--- a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-light.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-light.scss
@@ -89,28 +89,40 @@ $button-theme-light: (
 );
 
 // mono color styling for buttons
-$light-monostyle: (
-	static: (
-		border: color.$smoke,
-		background: color.$smoke,
-		color: color.$black
+$button-theme-light-mono: (
+	'grey': (
+		static: (
+			border: color.$smoke,
+			background: color.$smoke,
+			color: color.$black
+		),
 	),
-	hover: (
-		border: color.$grey,
-		background: color.$grey,
-		color: color.$white
+	'blue': (
+		static: (
+			border: color.$smoke,
+			background: color.$smoke,
+			color: color.$black
+		),
+	),
+	'red': (
+		static: (
+			border: color.$smoke,
+			background: color.$smoke,
+			color: color.$black
+		),
+	),
+	'purple': (
+		static: (
+			border: color.$smoke,
+			background: color.$smoke,
+			color: color.$black
+		),
+	),
+	'green': (
+		static: (
+			border: color.$smoke,
+			background: color.$smoke,
+			color: color.$black
+		),
 	),
-	focus: (
-		border: color.$overcast,
-		background: color.$grey,
-		color: color.$white
-	)
-);
-
-$button-theme-light-mono: (
-	'grey': $light-monostyle,
-	'blue': $light-monostyle,
-	'red': $light-monostyle,
-	'purple': $light-monostyle,
-	'green': $light-monostyle,
 );
\ No newline at end of file
diff --git a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-solid.scss b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-solid.scss
index a59e1740..015cac0a 100644
--- a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-solid.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-solid.scss
@@ -79,28 +79,40 @@ $button-theme-solid: (
 );
 
 // mono color styling for buttons
-$solid-monostyle: (
-	static: (
-		border: color.$black,
-		background: color.$black,
-		color: color.$white
+$button-theme-solid-mono: (
+	'grey': (
+		static: (
+			border: color.$black,
+			background: color.$black,
+			color: color.$white
+		),
+	),
+	'blue': (
+		static: (
+			border: color.$black,
+			background: color.$black,
+			color: color.$white
+		),
+	),
+	'red': (
+		static: (
+			border: color.$black,
+			background: color.$black,
+			color: color.$white
+		),
 	),
-	hover: (
-		border: color.$black,
-		background: color.$black
+	'purple': (
+		static: (
+			border: color.$black,
+			background: color.$black,
+			color: color.$white
+		),
 	),
-	focus: (
-		outline: color.$ironmike,
-		border-color: color.$ironmike,
-		background: color.$nightrider,
-		color: color.$white
+	'green': (
+		static: (
+			border: color.$black,
+			background: color.$black,
+			color: color.$white
+		),
 	),
 );
-
-$button-theme-solid-mono: (
-	'grey': $solid-monostyle,
-	'blue': $solid-monostyle,
-	'red': $solid-monostyle,
-	'purple': $solid-monostyle,
-	'green': $solid-monostyle,
-);
diff --git a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss
index 39d7f544..89006aa7 100644
--- a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss
@@ -75,26 +75,47 @@ $button-theme-text: (
 );
 
 // mono color styling for buttons
-$text-monostyle: (
-	static: (
-		color: color.$black,
+$button-theme-text-mono: (
+	'grey': (
+		static: (
+			color: color.$black,
+		),
+		hover: (
+			border: color.$black,
+			background: color.$black,
+			color: color.$white,
+			box-shadow: 0px 0px 0px 2px color.$fiftyshades,
+		),
+		focus: (
+			background: color.$black,
+			color: color.$white,
+			border: color.$white,
+			box-shadow: 0px 0px 0px 3px color.$black,
+		),
+		disabled: (
+			border: color.$black,
+			background: color.$black,
+			color: color.$white
+		)
 	),
-	hover: (
-		border: color.$black,
-		background: color.$black
+	'blue': (
+		static: (
+			color: color.$black,
+		),
 	),
-	focus: (
-		outline: color.$ironmike,
-		border-color: color.$ironmike,
-		background: color.$nightrider,
-		color: color.$white
+	'red': (
+		static: (
+			color: color.$black,
+		),
+	),
+	'purple': (
+		static: (
+			color: color.$black,
+		),
+	),
+	'green': (
+		static: (
+			color: color.$black,
+		),
 	),
-);
-
-$button-theme-text-mono: (
-	'grey': $text-monostyle,
-	'blue': $text-monostyle,
-	'red': $text-monostyle,
-	'purple': $text-monostyle,
-	'green': $text-monostyle,
 );
diff --git a/assets/scss/shared-ui/_sui-button/_button-utilities/_build-theme.scss b/assets/scss/shared-ui/_sui-button/_button-utilities/_build-theme.scss
index 06e55838..5a2d06d2 100644
--- a/assets/scss/shared-ui/_sui-button/_button-utilities/_build-theme.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-utilities/_build-theme.scss
@@ -179,6 +179,9 @@
 						@if map.has-key($palette, $colour, hover, color) {
 							color: map.get($palette, $colour, hover, color);
 						}
+						@if map.has-key($palette, $colour, hover, box-shadow) {
+							box-shadow: map.get($palette, $colour, hover, box-shadow);
+						}
 					}
 				}
 
@@ -194,6 +197,9 @@
 						@if map.has-key($palette, $colour, focus, color) {
 							color: map.get($palette, $colour, focus, color);
 						}
+						@if map.has-key($palette, $colour, focus, box-shadow) {
+							box-shadow: map.get($palette, $colour, focus, box-shadow);
+						}
 					}
 				}
 
diff --git a/assets/scss/shared-ui/_sui-button/_sui-button.scss b/assets/scss/shared-ui/_sui-button/_sui-button.scss
index 0b646e60..a9a09e95 100644
--- a/assets/scss/shared-ui/_sui-button/_sui-button.scss
+++ b/assets/scss/shared-ui/_sui-button/_sui-button.scss
@@ -16,40 +16,3 @@ $block-name: button;
 @include sui-button--modifier.button-design--type($block-name);
 @include sui-button--modifier.button-design--color($block-name);
 @include sui-button--modifier.button-state($block-name);
-
-// @include body-class($wrap: true, $rtl: false, $monochrome: true) { 
-// 	@include block('button') {
-// 		color: $accessible-dark;
-
-// 		&[class*="sui-button--light"]{
-// 			background: $smoke;
-// 			color: $accessible-dark;
-// 			border-color: $smoke;
-// 		}
-
-// 		&[class*="sui-button--ghost"] {
-// 			background: $accessible-light;
-// 			border-color: $accessible-dark;
-// 			color: $accessible-dark;
-// 		}
-
-// 		&[class*="sui-button--solid"],
-// 		&[disabled],
-// 		&:hover {
-// 			background: $accessible-dark;
-// 			border-color: $accessible-dark;
-// 			color: $accessible-light;
-// 		}
-
-// 		&:hover {
-// 			box-shadow: 0 3px 6px 1px rgba(0,0,0,0.2);
-// 		}
-
-// 		&:focus {
-// 			outline: $ironmike;
-// 			border-color: $ironmike;
-// 			background: $nightrider;
-// 			color: $accessible-light;
-// 		}
-// 	}
-// } 

From 1ca579456287e1bd14218152299b3b7bc40d892d Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 26 Jan 2022 11:11:47 +0530
Subject: [PATCH 8/8] added hover and focus style

---
 .../_sui-button/_button-themes/_button-theme-text.scss      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss
index 89006aa7..4d9c12b2 100644
--- a/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss
+++ b/assets/scss/shared-ui/_sui-button/_button-themes/_button-theme-text.scss
@@ -93,9 +93,9 @@ $button-theme-text-mono: (
 			box-shadow: 0px 0px 0px 3px color.$black,
 		),
 		disabled: (
-			border: color.$black,
-			background: color.$black,
-			color: color.$white
+			border: color.$overcast,
+			background: color.$overcast,
+			color: color.$ironmike,
 		)
 	),
 	'blue': (