From 516373abd5f4ffce3f964e0026e7c5eb581dc95e Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Fri, 21 Feb 2025 20:06:49 +0530
Subject: [PATCH 1/2] Toolbar: Adjust colors for dark mode support

---
 packages/components/src/toolbar/toolbar-group/style.scss | 8 ++++----
 packages/components/src/toolbar/toolbar/style.scss       | 9 +++------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/toolbar/toolbar-group/style.scss b/packages/components/src/toolbar/toolbar-group/style.scss
index 668968d40babbe..96f7874cc3670e 100644
--- a/packages/components/src/toolbar/toolbar-group/style.scss
+++ b/packages/components/src/toolbar/toolbar-group/style.scss
@@ -1,7 +1,7 @@
 .components-toolbar-group {
 	min-height: $block-toolbar-height;
-	border-right: $border-width solid $gray-900;
-	background-color: $white;
+	border-right: $border-width solid $components-color-foreground;
+	background-color: $components-color-foreground-inverted;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
@@ -41,8 +41,8 @@
 .components-toolbar {
 	min-height: $block-toolbar-height;
 	margin: 0;
-	border: $border-width solid $gray-900;
-	background-color: $white;
+	border: $border-width solid $components-color-foreground;
+	background-color: $components-color-foreground-inverted;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss
index b53df6303e0fbf..2da8219146fd5a 100644
--- a/packages/components/src/toolbar/toolbar/style.scss
+++ b/packages/components/src/toolbar/toolbar/style.scss
@@ -1,6 +1,6 @@
 .components-accessible-toolbar {
 	display: inline-flex;
-	border: $border-width solid $gray-900;
+	border: $border-width solid $components-color-foreground;
 	border-radius: $radius-small;
 	flex-shrink: 0;
 
@@ -14,13 +14,11 @@
 		& > .components-toolbar-group {
 			border-right: none;
 		}
-
 	}
 }
 
 .components-accessible-toolbar,
 .components-toolbar {
-
 	&[aria-orientation="vertical"] {
 		display: flex;
 		flex-direction: column;
@@ -56,7 +54,7 @@
 			z-index: -1;
 
 			// Animate in.
-			@media not (prefers-reduced-motion) {
+			@media not ( prefers-reduced-motion ) {
 				animation: components-button__appear-animation 0.1s ease;
 				animation-fill-mode: forwards;
 			}
@@ -79,7 +77,7 @@
 			}
 
 			&::before {
-				background: $gray-900;
+				background: $components-color-foreground;
 			}
 		}
 
@@ -99,7 +97,6 @@
 	}
 }
 
-
 @keyframes components-button__appear-animation {
 	from {
 		transform: scaleY(0);

From 997606b15d6f2e614d6008f3c9377b559699b5d3 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Mon, 24 Feb 2025 13:12:12 +0530
Subject: [PATCH 2/2] Toolbar: Use $components-color-background for background

---
 packages/components/src/toolbar/toolbar-group/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/toolbar/toolbar-group/style.scss b/packages/components/src/toolbar/toolbar-group/style.scss
index 96f7874cc3670e..5271f8d9225d6e 100644
--- a/packages/components/src/toolbar/toolbar-group/style.scss
+++ b/packages/components/src/toolbar/toolbar-group/style.scss
@@ -1,7 +1,7 @@
 .components-toolbar-group {
 	min-height: $block-toolbar-height;
 	border-right: $border-width solid $components-color-foreground;
-	background-color: $components-color-foreground-inverted;
+	background-color: $components-color-background;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
@@ -42,7 +42,7 @@
 	min-height: $block-toolbar-height;
 	margin: 0;
 	border: $border-width solid $components-color-foreground;
-	background-color: $components-color-foreground-inverted;
+	background-color: $components-color-background;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;