Toolbar: Adjust colors for dark mode support

WordPress · Feb 21, 2025 · 516373a · 516373a
1 parent 563c891
commit 516373a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git 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
@@ -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);