From 20c9f331b26e3f31630cb6916d0333ea2bda552f Mon Sep 17 00:00:00 2001
From: Alexey Pustoshilov <apust@hey.com>
Date: Wed, 2 Dec 2020 17:16:27 +0700
Subject: [PATCH] feat: add :focus and :active styles for clickable items

---
 src/packages/core/src/action/action.css       | 22 +++++++++++++++--
 src/packages/core/src/banner/banner.css       | 12 ++++++++++
 .../core/src/breadcrumbs/breadcrumbs.css      |  6 +++++
 src/packages/core/src/button/button.css       | 24 +++++++++++++++++++
 src/packages/core/src/chip/chip.css           | 16 +++++++++++++
 src/packages/core/src/link/link.css           |  8 +++++++
 src/packages/core/src/menu/menu.css           |  8 +++++++
 src/packages/core/src/snackbar/snackbar.css   | 10 ++++++++
 src/packages/core/src/tabs/tabs.css           |  8 +++++++
 src/packages/core/src/upload/upload.css       | 18 ++++++++++++++
 src/packages/layout/src/header/header.css     | 24 +++++++++++++++++--
 src/packages/layout/src/sidebar/sidebar.css   | 24 +++++++++++++++++++
 12 files changed, 176 insertions(+), 4 deletions(-)

diff --git a/src/packages/core/src/action/action.css b/src/packages/core/src/action/action.css
index 3480517..704aac3 100644
--- 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
index efc7efe..782f65b 100644
--- 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
index 1eff823..2f337ca 100644
--- 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
index 41f0ddd..4b2804d 100644
--- 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
index ec8e150..fd20fb9 100644
--- 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
index 222870a..a9d7481 100644
--- 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
index 729035e..0feca63 100644
--- 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
index 32ad5fc..6478fce 100644
--- 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
index fb13f4b..47dbd20 100644
--- 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
index 30c97a6..8ae0e2e 100644
--- 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
index 095d954..edb2758 100644
--- 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
index be21618..201abaf 100644
--- 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 {