diff --git a/.changeset/violet-months-give.md b/.changeset/violet-months-give.md
new file mode 100644
index 00000000000..20450347680
--- /dev/null
+++ b/.changeset/violet-months-give.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in ButtonClose
diff --git a/src/Button/ButtonClose.tsx b/src/Button/ButtonClose.tsx
index 1b4dc8e85ec..ea20514cb8d 100644
--- a/src/Button/ButtonClose.tsx
+++ b/src/Button/ButtonClose.tsx
@@ -17,11 +17,11 @@ const StyledButton = styled.button<StyledButtonProps>`
   border-radius: ${get('radii.2')};
 
   &:focus {
-    box-shadow: ${get('buttons.close.shadow.focus')};
+    box-shadow: ${get('shadows.btn.shadow')};
   }
 
   &:active {
-    color: ${get('buttons.close.color.default')};
+    color: ${get('colors.btn.text')};
   }
   ${COMMON};
   ${LAYOUT};
diff --git a/src/__tests__/__snapshots__/Dialog.tsx.snap b/src/__tests__/__snapshots__/Dialog.tsx.snap
index d54c7127f66..551f8fec4e9 100644
--- a/src/__tests__/__snapshots__/Dialog.tsx.snap
+++ b/src/__tests__/__snapshots__/Dialog.tsx.snap
@@ -80,7 +80,7 @@ Array [
 }
 
 .c1:focus {
-  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
+  box-shadow: 0 1px 0 rgba(27,31,35,0.04);
 }
 
 .c1:active {