Use functional color variables in ButtonClose

primer · Mar 2, 2021 · 9259750 · 9259750
1 parent 8f2b4d2
commit 9259750
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/violet-months-give.md 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
@@ -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
@@ -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 {