Get hover and active states for invisible button (#1518)

Author: pksjce

src/Button/ButtonInvisible.tsx

@@ -12,12 +12,17 @@ const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps &
   box-shadow: none;
 
   &:disabled {
-    color: ${get('colors.fg.muted')};
+    color: ${get('colors.primer.fg.disabled')};
   }
-
   &:focus {
     box-shadow: ${get('shadows.btn.focusShadow')};
   }
+  &:hover {
+    background-color: ${get('colors.btn.hoverBg')};
+  }
+  &:active {
+    background-color: ${get('colors.btn.selectedBg')};
+  }
 
   ${buttonSystemProps};
   ${sx}

src/__tests__/__snapshots__/Button.test.tsx.snap

@@ -472,13 +472,21 @@ exports[`ButtonInvisible renders correct disabled styles 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
 }
 
 .c0:focus {
   box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
+.c0:hover {
+  background-color: #f3f4f6;
+}
+
+.c0:active {
+  background-color: hsla(220,14%,94%,1);
+}
+
 <button
   className="c0"
   disabled={true}