implement functional color variables for Button

primer · Mar 3, 2021 · 170876e · 170876e
1 parent 565f198
commit 170876e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 29 deletions.
diff --git a/.changeset/tame-chicken-warn.md b/.changeset/tame-chicken-warn.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in Button
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -5,33 +5,33 @@ import {ComponentProps} from '../utils/types'
 import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 
 const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
-  color: ${get('buttons.default.color.default')};
-  background-color: ${get('buttons.default.bg.default')};
-  border: 1px solid ${get('buttons.default.border.default')};
-  box-shadow: ${get('buttons.default.shadow.default')};
+  color: ${get('colors.btn.text')};
+  background-color: ${get('colors.btn.bg')};
+  border: 1px solid ${get('colors.btn.border')};
+  box-shadow: ${get('shadows.btn.shadow')}, ${get('shadows.btn.insetShadow')}};
 
   &:hover {
-    background-color: ${get('buttons.default.bg.hover')};
-    border-color: ${get('buttons.default.border.hover')};
-    box-shadow: ${get('buttons.default.shadow.hover')};
+    background-color: ${get('colors.btn.hoverBg')};
+    border-color: ${get('colors.btn.hoverBorder')};
+    box-shadow: ${get('shadows.btn.focusShadow')}, ${get('shadows.btn.insetShadow')};
   }
 
   // focus must come before :active so that the active box shadow overrides
   &:focus {
-    border-color: rgba(27, 31, 35, 0.15);
-    box-shadow: ${get('buttons.default.shadow.focus')};
+    border-color: ${get('colors.btn.focusBorder')};
+    box-shadow: ${get('shadows.btn.focusShadow')};
   }
 
   &:active {
-    background-color: ${get('buttons.default.bg.active')};
-    box-shadow: ${get('buttons.default.shadow.active')};
-    border-color: ${get('buttons.default.border.active')};
+    background-color: ${get('colors.btn.selectedBg')};
+    box-shadow: ${get('shadows.btn.shadowActive')};
+    border-color: ${get('colors.btn.border')};
   }
 
   &:disabled {
-    color: ${get('buttons.default.color.disabled')};
-    background-color: ${get('buttons.default.bg.disabled')};
-    border-color: ${get('buttons.default.border.disabled')};
+    color: ${get('colors.text.disabled')};
+    background-color: ${get('colors.btn.bg')};
+    border-color: ${get('colors.btn.border')};
   }
 
   ${buttonSystemProps};

diff --git a/src/__tests__/__snapshots__/Button.tsx.snap b/src/__tests__/__snapshots__/Button.tsx.snap
@@ -25,8 +25,8 @@ exports[`Button renders consistently 1`] = `
   font-size: 14px;
   color: #24292e;
   background-color: #fafbfc;
-  border: 1px solid rgba(27,31,35,0.12);
-  box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,35,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -47,8 +47,9 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0:hover {
-  background-color: #F3F4F6;
-  box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1);
+  background-color: #f3f4f6;
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0 0 0 3px rgba(3,102,214,0.3),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:focus {
@@ -58,14 +59,14 @@ exports[`Button renders consistently 1`] = `
 
 .c0:active {
   background-color: #edeff2;
-  box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1);
-  border-color: #d1d5da;
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
   color: #959da5;
   background-color: #fafbfc;
-  border-color: #eaecef;
+  border-color: rgba(27,31,35,0.15);
 }
 
 <button
@@ -98,8 +99,8 @@ exports[`Button respects the "disabled" prop 1`] = `
   font-size: 14px;
   color: #24292e;
   background-color: #fafbfc;
-  border: 1px solid rgba(27,31,35,0.12);
-  box-shadow: 0px 1px 0px rgba(27,31,35,0.04),inset 0px 2px 0px rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,35,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -120,8 +121,9 @@ exports[`Button respects the "disabled" prop 1`] = `
 }
 
 .c0:hover {
-  background-color: #F3F4F6;
-  box-shadow: 0px 1px 0px rgba(209,213,218,0.2),inset 0px 2px 0px rgba(255,255,255,0.1);
+  background-color: #f3f4f6;
+  border-color: rgba(27,31,35,0.15);
+  box-shadow: 0 0 0 3px rgba(3,102,214,0.3),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:focus {
@@ -131,14 +133,14 @@ exports[`Button respects the "disabled" prop 1`] = `
 
 .c0:active {
   background-color: #edeff2;
-  box-shadow: inset 0px 2px 0px rgba(149,157,165,0.1);
-  border-color: #d1d5da;
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
+  border-color: rgba(27,31,35,0.15);
 }
 
 .c0:disabled {
   color: #959da5;
   background-color: #fafbfc;
-  border-color: #eaecef;
+  border-color: rgba(27,31,35,0.15);
 }
 
 <button