diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index 2d803d95c..e22c7b298 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -172,7 +172,7 @@
 }
 
 [data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] {
-  background-color: var(--surface-base-active);
+  background-color: var(--surface-raised-base-active);
 }
 
 [data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] [data-slot="icon-svg"] {
@@ -180,5 +180,5 @@
 }
 
 [data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"]:hover:not(:disabled) {
-  background-color: var(--surface-base-active);
+  background-color: var(--surface-raised-base-active);
 }
diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css
index 10337bbcc..01c555bfc 100644
--- a/packages/ui/src/components/icon-button.css
+++ b/packages/ui/src/components/icon-button.css
@@ -169,7 +169,7 @@
 }
 
 [data-component="icon-button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] {
-  background-color: var(--surface-base-active);
+  background-color: var(--surface-raised-base-active);
 }
 
 [data-component="icon-button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] [data-slot="icon-svg"] {
@@ -177,5 +177,5 @@
 }
 
 [data-component="icon-button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"]:hover:not(:disabled) {
-  background-color: var(--surface-base-active);
+  background-color: var(--surface-raised-base-active);
 }