feat: add :focus and :active styles for clickable items

cft-group · Dec 2, 2020 · 20c9f33 · 20c9f33
1 parent 1fac50a
commit 20c9f33
Show file tree

Hide file tree

Showing 12 changed files with 176 additions and 4 deletions.
diff --git a/src/packages/core/src/action/action.css b/src/packages/core/src/action/action.css
@@ -6,10 +6,28 @@
 
   &:hover {
     & ._e_action__icon svg {
-      fill: var(--B400);
+      fill: var(--B500);
     }
     & ._e_action__text {
-      color: var(--B400);
+      color: var(--B500);
+    }
+  }
+
+  &:focus {
+    & ._e_action__icon svg {
+      fill: var(--B500);
+    }
+    & ._e_action__text {
+      color: var(--B500);
+    }
+  }
+
+  &:active {
+    & ._e_action__icon svg {
+      fill: var(--B600);
+    }
+    & ._e_action__text {
+      color: var(--B600);
     }
   }
 }

diff --git a/src/packages/core/src/banner/banner.css b/src/packages/core/src/banner/banner.css
@@ -14,6 +14,12 @@
     &:hover {
       background-color: var(--R600);
     }
+    &:focus {
+      background-color: var(--R600);
+    }
+    &:active {
+      background-color: var(--R700);
+    }
   }
 }
 
@@ -24,6 +30,12 @@
     &:hover {
       background-color: var(--O600);
     }
+    &:focus {
+      background-color: var(--O600);
+    }
+    &:active {
+      background-color: var(--O700);
+    }
   }
 }
 

diff --git a/src/packages/core/src/breadcrumbs/breadcrumbs.css b/src/packages/core/src/breadcrumbs/breadcrumbs.css
@@ -10,6 +10,12 @@
   &:hover {
     color: var(--B500);
   }
+  &:focus {
+    color: var(--B500);
+  }
+  &:active {
+    color: var(--B600);
+  }
 
   &::after {
     content: '/';

diff --git a/src/packages/core/src/button/button.css b/src/packages/core/src/button/button.css
@@ -12,6 +12,14 @@
   &:hover {
     background-color: var(--B50);
   }
+
+  &:focus {
+    background-color: var(--B50);
+  }
+
+  &:active {
+    background-color: var(--B100);
+  }
 }
 
 ._e_button_appearance_primary {
@@ -21,6 +29,14 @@
   &:hover {
     background-color: var(--B500);
   }
+
+  &:focus {
+    background-color: var(--B500);
+  }
+
+  &:active {
+    background-color: var(--B600);
+  }
 }
 
 ._e_button_appearance_danger {
@@ -30,6 +46,14 @@
   &:hover {
     background-color: var(--R600);
   }
+
+  &:focus {
+    background-color: var(--R600);
+  }
+
+  &:active {
+    background-color: var(--R700);
+  }
 }
 
 ._e_button_size_small {

diff --git a/src/packages/core/src/chip/chip.css b/src/packages/core/src/chip/chip.css
@@ -10,6 +10,14 @@
   &:hover {
     background-color: var(--N100);
   }
+
+  &:focus {
+    background-color: var(--N100);
+  }
+
+  &:active {
+    background-color: var(--B50);
+  }
 }
 
 ._e_chip_selected {
@@ -19,6 +27,14 @@
     background-color: var(--B100);
   }
 
+  &:focus {
+    background-color: var(--B100);
+  }
+
+  &:active {
+    background-color: var(--N10);
+  }
+
   & ._e_chip__check {
     display: block;
   }

diff --git a/src/packages/core/src/link/link.css b/src/packages/core/src/link/link.css
@@ -5,4 +5,12 @@
   &:hover {
     color: var(--B500);
   }
+
+  &:focus {
+    color: var(--B500);
+  }
+
+  &:active {
+    color: var(--B600);
+  }
 }
diff --git a/src/packages/core/src/menu/menu.css b/src/packages/core/src/menu/menu.css
@@ -22,4 +22,12 @@
   &:hover {
     background-color: var(--N50);
   }
+
+  &:focus {
+    background-color: var(--N50);
+  }
+
+  &:active {
+    background-color: var(--N100);
+  }
 }
diff --git a/src/packages/core/src/snackbar/snackbar.css b/src/packages/core/src/snackbar/snackbar.css
@@ -37,4 +37,14 @@
     background-color: var(--N700);
     color: var(--N0);
   }
+
+  &:focus {
+    background-color: var(--N700);
+    color: var(--N0);
+  }
+
+  &:active {
+    background-color: var(--N600);
+    color: var(--N0);
+  }
 }
diff --git a/src/packages/core/src/tabs/tabs.css b/src/packages/core/src/tabs/tabs.css
@@ -14,6 +14,14 @@
   &:hover {
     background-color: var(--N10);
   }
+
+  &:focus {
+    background-color: var(--N10);
+  }
+
+  &:active {
+    background-color: var(--N50);
+  }
 }
 
 ._e_tabs__item_selected {

diff --git a/src/packages/core/src/upload/upload.css b/src/packages/core/src/upload/upload.css
@@ -60,6 +60,16 @@
     border-color: var(--B400);
     background-color: var(--B50);
   }
+
+  &:focus {
+    border-color: var(--B400);
+    background-color: var(--B50);
+  }
+
+  &:active {
+    border-color: var(--B500);
+    background-color: var(--B100);
+  }
 }
 
 ._e_upload__control {
@@ -145,6 +155,14 @@
   &:hover svg {
     fill: var(--N600);
   }
+
+  &:focus svg {
+    fill: var(--N600);
+  }
+
+  &:active svg {
+    fill: var(--N700);
+  }
 }
 
 ._e_upload-file__error {

diff --git a/src/packages/layout/src/header/header.css b/src/packages/layout/src/header/header.css
@@ -40,16 +40,36 @@
   }
 
   &:hover {
-    background-color: var(--N1000);
+    background-color: var(--N900);
 
     & ._e_header-action__icon svg {
-      fill: var(--N0);
+      fill: var(--N50);
+    }
+
+    & > ._e_header-action__tooltip {
+      display: flex;
+    }
+  }
+
+  &:focus {
+    background-color: var(--N900);
+
+    & ._e_header-action__icon svg {
+      fill: var(--N50);
     }
 
     & > ._e_header-action__tooltip {
       display: flex;
     }
   }
+
+  &:active {
+    background-color: var(--N1000);
+
+    & ._e_header-action__icon svg {
+      fill: var(--N0);
+    }
+  }
 }
 
 ._e_header-action__icon {

diff --git a/src/packages/layout/src/sidebar/sidebar.css b/src/packages/layout/src/sidebar/sidebar.css
@@ -64,6 +64,20 @@
   &:hover {
     background-color: var(--N0);
 
+    & ._e_sidebar-item__text {
+      color: var(--N800);
+    }
+  }
+  &:focus {
+    background-color: var(--N0);
+
+    & ._e_sidebar-item__text {
+      color: var(--N800);
+    }
+  }
+  &:active {
+    background-color: var(--N10);
+
     & ._e_sidebar-item__text {
       color: var(--N800);
     }
@@ -98,6 +112,16 @@
         fill: var(--B500);
       }
     }
+    &:focus {
+      & svg {
+        fill: var(--B500);
+      }
+    }
+    &:active {
+      & svg {
+        fill: var(--B600);
+      }
+    }
   }
 
   & ._e_sidebar-item__text {