Use functional color variables in ButtonPrimary

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

Hide file tree

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

diff --git a/src/__tests__/__snapshots__/Button.tsx.snap b/src/__tests__/__snapshots__/Button.tsx.snap
@@ -647,9 +647,9 @@ exports[`ButtonPrimary renders consistently 1`] = `
   text-align: center;
   font-size: 14px;
   color: #ffffff;
-  background-color: #2EA44F;
-  border: 1px solid #22863a;
-  box-shadow: 0px 1px 0px rgba(20,70,32,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
+  border: 1px solid rgba(27,31,35,0.15);
+  background-color: #2ea44f;
+  box-shadow: 0 1px 0 rgba(27,31,35,0.1);
 }
 
 .c0:hover {
@@ -670,26 +670,21 @@ exports[`ButtonPrimary renders consistently 1`] = `
 }
 
 .c0:hover {
-  background-color: #2C974B;
+  background-color: #2c974b;
   border-color: rgba(27,31,35,0.15);
 }
 
 .c0:focus {
   border-color: transparent;
-  box-shadow: 0 0 0 3px #94D3A2;
-  background-color: #2C974B;
 }
 
 .c0:active {
-  background-color: #128031;
-  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: #2a8f47;
+  box-shadow: inset 0 1px 0 rgba(20,70,32,0.2);
 }
 
 .c0:disabled {
-  color: rgba(255,255,255,0.50);
-  background-color: #94D3A2;
-  border-color: rgba(34,134,58,0.1);
+  color: rgba(255,255,255,0.8);
 }
 
 <button
@@ -721,9 +716,9 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
   text-align: center;
   font-size: 14px;
   color: #ffffff;
-  background-color: #2EA44F;
-  border: 1px solid #22863a;
-  box-shadow: 0px 1px 0px rgba(20,70,32,0.1),inset 0px 2px 0px rgba(255,255,255,0.03);
+  border: 1px solid rgba(27,31,35,0.15);
+  background-color: #2ea44f;
+  box-shadow: 0 1px 0 rgba(27,31,35,0.1);
 }
 
 .c0:hover {
@@ -744,26 +739,21 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
 }
 
 .c0:hover {
-  background-color: #2C974B;
+  background-color: #2c974b;
   border-color: rgba(27,31,35,0.15);
 }
 
 .c0:focus {
   border-color: transparent;
-  box-shadow: 0 0 0 3px #94D3A2;
-  background-color: #2C974B;
 }
 
 .c0:active {
-  background-color: #128031;
-  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: #2a8f47;
+  box-shadow: inset 0 1px 0 rgba(20,70,32,0.2);
 }
 
 .c0:disabled {
-  color: rgba(255,255,255,0.50);
-  background-color: #94D3A2;
-  border-color: rgba(34,134,58,0.1);
+  color: rgba(255,255,255,0.8);
 }
 
 <button