Use functional color variables in ButtonDanger

primer · Mar 2, 2021 · 198e24a · 198e24a
1 parent f95018b
commit 198e24a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 38 deletions.
diff --git a/.changeset/tender-ways-battle.md b/.changeset/tender-ways-battle.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in ButtonDanger
diff --git a/src/Button/ButtonDanger.tsx b/src/Button/ButtonDanger.tsx
@@ -6,34 +6,34 @@ import sx, {SxProp} from '../sx'
 import {ComponentProps} from '../utils/types'
 
 const ButtonDanger = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
-  color: ${get('buttons.danger.color.default')};
-  border: 1px solid ${get('buttons.danger.border.default')};
-  background-color: ${get('buttons.danger.bg.default')};
-  box-shadow: ${get('buttons.danger.shadow.default')};
+  color: ${get('colors.btn.danger.text')};
+  border: 1px solid ${get('colors.btn.border')};
+  background-color: ${get('colors.btn.bg')};
+  box-shadow: ${get('shadows.btn.shadow')};
 
   &:hover {
-    color: ${get('buttons.danger.color.hover')};
-    background-color: ${get('buttons.danger.bg.hover')};
-    border-color: ${get('buttons.danger.border.hover')};
-    box-shadow: ${get('buttons.danger.shadow.hover')};
+    color: ${get('colors.btn.danger.hoverText')};
+    background-color: ${get('colors.btn.danger.hoverBg')};
+    border-color: ${get('colors.btn.danger.hoverBorder')};
+    box-shadow: ${get('shadows.btn.danger.hoverShadow')};
   }
   // focus must come before :active so that the active box shadow overrides
   &:focus {
     border-color: transparent;
-    box-shadow: ${get('buttons.danger.shadow.focus')};
+    box-shadow: ${get('colors.btn.danger.focusShadow')};
   }
 
   &:active {
-    color: ${get('buttons.danger.color.active')};
-    background-color: ${get('buttons.danger.bg.active')};
-    box-shadow: ${get('buttons.danger.shadow.active')};
-    border-color: ${get('buttons.danger.border.active')};
+    color: ${get('colors.btn.danger.selectedText')};
+    background-color: ${get('colors.btn.danger.selectedBg')};
+    box-shadow: ${get('shadows.btn.danger.selectedShadow')};
+    border-color: ${get('shadows.btn.danger.selectedBorder')};
   }
 
   &:disabled {
-    color: ${get('buttons.danger.color.disabled')};
-    background-color: ${get('buttons.danger.bg.disabled')};
-    border: 1px solid ${get('buttons.danger.border.default')};
+    color: ${get('colors.btn.danger.disabledText')};
+    background-color: ${get('buttons.danger.disabledBg')};
+    border: ${get('buttons.danger.disabledBorder')};
   }
 
   ${buttonSystemProps};

diff --git a/src/__tests__/__snapshots__/Button.tsx.snap b/src/__tests__/__snapshots__/Button.tsx.snap
@@ -170,10 +170,10 @@ exports[`ButtonDanger renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #cb2431;
-  border: 1px solid #e1e4e8;
+  color: #d73a49;
+  border: 1px solid rgba(27,31,35,0.15);
   background-color: #fafbfc;
-  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.25);
+  box-shadow: 0 1px 0 rgba(27,31,35,0.04);
 }
 
 .c0:hover {
@@ -197,25 +197,21 @@ exports[`ButtonDanger renders consistently 1`] = `
   color: #ffffff;
   background-color: #cb2431;
   border-color: rgba(27,31,35,0.15);
-  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
+  box-shadow: 0 1px 0 rgba(27,31,35,0.1);
 }
 
 .c0:focus {
   border-color: transparent;
-  box-shadow: 0 0 0 3px rgba(203,36,49,0.4);
 }
 
 .c0:active {
   color: #ffffff;
-  background-color: #be222e;
-  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
-  border-color: rgba(27,31,35,0.15);
+  background-color: #d42d3d;
+  box-shadow: inset 0 1px 0 rgba(134,24,29,0.2);
 }
 
 .c0:disabled {
-  color: rgba(203,36,49,.5);
-  background-color: #F3F4F6;
-  border: 1px solid #e1e4e8;
+  color: rgba(215,58,73,0.5);
 }
 
 <button
@@ -246,10 +242,10 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #cb2431;
-  border: 1px solid #e1e4e8;
+  color: #d73a49;
+  border: 1px solid rgba(27,31,35,0.15);
   background-color: #fafbfc;
-  box-shadow: 0px 1px 0px rgba(149,157,165,0.1),inset 0px 2px 0px rgba(255,255,255,0.25);
+  box-shadow: 0 1px 0 rgba(27,31,35,0.04);
 }
 
 .c0:hover {
@@ -273,25 +269,21 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
   color: #ffffff;
   background-color: #cb2431;
   border-color: rgba(27,31,35,0.15);
-  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
+  box-shadow: 0 1px 0 rgba(27,31,35,0.1);
 }
 
 .c0:focus {
   border-color: transparent;
-  box-shadow: 0 0 0 3px rgba(203,36,49,0.4);
 }
 
 .c0:active {
   color: #ffffff;
-  background-color: #be222e;
-  box-shadow: 0px 1px 0px rgba(27,31,35,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
-  border-color: rgba(27,31,35,0.15);
+  background-color: #d42d3d;
+  box-shadow: inset 0 1px 0 rgba(134,24,29,0.2);
 }
 
 .c0:disabled {
-  color: rgba(203,36,49,.5);
-  background-color: #F3F4F6;
-  border: 1px solid #e1e4e8;
+  color: rgba(215,58,73,0.5);
 }
 
 <button