From 369b748b972e23dc6d7711e3de2500bb3dfd2284 Mon Sep 17 00:00:00 2001
From: Baptiste Grob <60621355+baptiste-grob@users.noreply.github.com>
Date: Fri, 9 Apr 2021 14:22:33 +0200
Subject: [PATCH] fix: remove focus outline artifacts

---
 .../javascripts/components/SearchOptions.tsx  |  3 +-
 .../javascripts/views/notes/notes-view.pug    |  2 +-
 app/assets/stylesheets/_sn.scss               | 92 ++++++++++++++++---
 app/assets/stylesheets/_stylekit-sub.scss     |  4 +
 package.json                                  |  2 +-
 5 files changed, 87 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/components/SearchOptions.tsx b/app/assets/javascripts/components/SearchOptions.tsx
index fca445481..2c24e6c44 100644
--- a/app/assets/javascripts/components/SearchOptions.tsx
+++ b/app/assets/javascripts/components/SearchOptions.tsx
@@ -66,8 +66,7 @@ function SearchOptions({ appState }: Props) {
       open={open}
       onChange={() => {
         const { height } = buttonRef.current.getBoundingClientRect();
-        const extraVerticalBreathingRoom = 4;
-        setOptionsPanelTop(height + extraVerticalBreathingRoom);
+        setOptionsPanelTop(height);
         setOpen((prevOpen) => !prevOpen);
       }}
     >
diff --git a/app/assets/javascripts/views/notes/notes-view.pug b/app/assets/javascripts/views/notes/notes-view.pug
index 26b4a8eb3..1b1e3efc7 100644
--- a/app/assets/javascripts/views/notes/notes-view.pug
+++ b/app/assets/javascripts/views/notes/notes-view.pug
@@ -29,7 +29,7 @@
             aria-role="button"
             ) ✕
           search-options(
-            class="ml-2 h-20px"
+            class="ml-2"
             app-state='self.appState'
           )
         no-account-warning(
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index b3103034e..6d74b17bc 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -1,4 +1,62 @@
-/* Components and utilities that have yet to be extracted to StyleKit. */
+/* Components and utilities that are good candidates for extraction to StyleKit. */
+
+.outline-none {
+  outline: none;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-background {
+  border-color: var(--sn-stylekit-background-color);
+}
+
+.focus-within\:border-background:focus-within {
+  border-color: var(--sn-stylekit-background-color);
+}
+
+.border-transparent {
+  border-color: var(--sn-stylekit-background-color);
+}
+
+.bg-clip-padding {
+  background-clip: padding-box;
+}
+
+.ring-info {
+  box-shadow: 0 0 0 2px var(--sn-stylekit-info-color);
+}
+
+.focus\:ring-info:focus {
+  @extend .ring-info;
+}
+
+.focus-within\:ring-info:focus-within {
+  @extend .ring-info;
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+/**
+ * A button that is just an icon. Separated from .sn-button because there
+ * is almost no style overlap.
+ */
+.sn-icon-button {
+  @extend .border-2;
+  @extend .border-transparent;
+  @extend .bg-clip-padding;
+  @extend .m-0;
+  @extend .p-0;
+  @extend .bg-transparent;
+  @extend .cursor-pointer;
+  @extend .rounded-full;
+  @extend .color-neutral;
+  @extend .focus\:outline-none;
+  @extend .focus\:ring-info;
+}
 
 .sn-dropdown {
   @extend .absolute;
@@ -17,33 +75,36 @@
     right: 0;
   }
 
-  &[data-state="collapsed"] {
+  &[data-state='collapsed'] {
     display: none;
   }
 }
 
+$switch-width: 35px;
+$switch-handle-size: 14px;
+$border-width: 2px;
+
 /** Lesser specificity will give priority to reach's styles */
 [data-reach-custom-checkbox-container].sn-switch {
   @extend .duration-150;
   @extend .ease-out;
   @extend .rounded-full;
   @extend .transition-background;
-  width: 31px;
-  height: 18px;
-
+  @extend .bg-clip-padding;
   @extend .cursor-pointer;
-  @extend .focus-within\:padded-ring-info;
+  @extend .border-transparent;
+  width: $switch-width;
+  height: 22px;
+  border-style: solid;
+  border-width: $border-width;
+  @extend .focus-within\:ring-info;
   @extend .focus-within\:outline-none;
+  @extend .focus-within\:border-background;
 }
 
 .sn-switch-handle {
   @extend .absolute;
   @extend .block;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  top: 50%;
-
   @extend .bg-default;
   @extend .rounded-full;
 
@@ -51,9 +112,16 @@
   @extend .transition-transform;
   @extend .duration-150;
 
+  left: $border-width;
+  width: $switch-handle-size;
+  height: $switch-handle-size;
+  top: 50%;
   transform: translate(0px, -50%);
 
   &.sn-switch-handle-right {
-    transform: translate(31px - 18px, -50%);
+    transform: translate(
+      $switch-width - $switch-handle-size - ($border-width * 4),
+      -50%
+    );
   }
 }
diff --git a/app/assets/stylesheets/_stylekit-sub.scss b/app/assets/stylesheets/_stylekit-sub.scss
index 7515853e5..6de7a6702 100644
--- a/app/assets/stylesheets/_stylekit-sub.scss
+++ b/app/assets/stylesheets/_stylekit-sub.scss
@@ -92,6 +92,10 @@ button.sk-a {
   min-height: 24px;
 }
 
+*:focus-visible {
+  outline: none;
+}
+
 *:focus {
   outline: none;
   box-shadow: 0 0 0 2px var(--sn-stylekit-info-color);
diff --git a/package.json b/package.json
index a0b8474ab..5f51aa22c 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "pug-loader": "^2.4.0",
     "sass-loader": "^8.0.2",
     "serve-static": "^1.14.1",
-    "sn-stylekit": "github:standardnotes/StyleKit#cd0b2f90e2d21818639baa28b1f6bc7991a8f6be",
+    "sn-stylekit": "github:standardnotes/StyleKit#c64573b229ac9154e480cde3b5fdab78c75b3530",
     "ts-loader": "^8.0.17",
     "typescript": "^4.1.5",
     "typescript-eslint": "0.0.1-alpha.0",