Add hover and active states to btn-invisible (#1808)

Related to github/primer#253 and github/primer#263 Adds hover and active states to `btn-invisible`, as proposed by `@vdepizzol`. https://user-images.githubusercontent.com/11280312/144511801-2a320990-36ca-4d67-b583-877ce540ed8a.mov
primer · Dec 3, 2021 · ee27583 · ee27583
1 parent b0544e2
commit ee27583
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/.changeset/shy-vans-draw.md b/.changeset/shy-vans-draw.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add hover and active states to btn-invisible
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
@@ -37,13 +37,12 @@
   color: var(--color-accent-fg);
   background-color: transparent; // Reset default gradient backgrounds and colors
   border: 0;
-  border-radius: 0;
   box-shadow: none;
 
   &:hover,
   &.zeroclipboard-is-hover {
     color: var(--color-accent-fg);
-    background: none;
+    background-color: var(--color-btn-hover-bg);
     outline: none;
     box-shadow: none;
   }
@@ -54,12 +53,17 @@
   &[aria-selected=true],
   &.zeroclipboard-is-active {
     color: var(--color-accent-fg);
-    background: none;
+    background-color: none;
     border-color: var(--color-btn-active-border);
     outline: none;
     box-shadow: var(--color-btn-focus-shadow);
   }
 
+  &:active
+  &.zeroclipboard-is-active {
+    background-color: var(--color-btn-selected-bg);
+  }
+
   &:disabled,
   &.disabled,
   &[aria-disabled=true] {