From 98abbd3433d51d2205d0938ca2457473c80ad792 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 1 Nov 2021 16:05:43 +0800
Subject: [PATCH] chore: check colors visually

---
 src/styles/index.scss | 80 +++++++++++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 30 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index bd0a526..fbe1eee 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -13,7 +13,35 @@ $github-header-z-index: 32;
 $github-pull-request-float-header-z-index: 110;
 $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-z-index) + 1;
 
-@mixin interactive-background($default, $hover, $active, $focus: $hover) {
+@mixin interactive-frame() {
+  @include interactive-border;
+  @include interactive-background;
+}
+
+@mixin interactive-border(
+  $default: var(--gitako-btn-border),
+  $hover: var(--gitako-btn-hover-border),
+  $active: var(--gitako-btn-active-border),
+  $focus: $hover
+) {
+  border: 1px solid $default;
+  &:hover {
+    border: 1px solid $hover;
+  }
+  &:focus {
+    border: 1px solid $focus;
+  }
+  &:active {
+    border: 1px solid $active;
+  }
+}
+
+@mixin interactive-background(
+  $default: var(--gitako-btn-bg),
+  $hover: var(--gitako-btn-hover-bg),
+  $active: var(--gitako-btn-active-bg),
+  $focus: $hover
+) {
   background-color: $default;
   &:hover {
     background-color: $hover;
@@ -103,7 +131,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         }
 
         @include interactive-background-on-before(
-          var(--gitako-fg-default),
+          var(--gitako-fg-subtle),
           var(--gitako-fg-default),
           var(--gitako-fg-muted)
         );
@@ -118,7 +146,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           @include interactive-background-on-before(
             var(--gitako-fg-muted),
             var(--gitako-fg-default),
-            var(--gitako-fg-default)
+            var(--gitako-fg-subtle)
           );
         }
       }
@@ -149,11 +177,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         border: 1px solid var(--gitako-border-default);
         border-radius: 4px;
 
-        @include interactive-background(
-          var(--gitako-btn-bg),
-          var(--gitako-btn-hover-bg),
-          var(--gitako-btn-focus-bg)
-        );
+        @include interactive-background;
         .icon {
           width: 100%;
           height: 100%;
@@ -287,11 +311,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       height: 32px;
       padding: 4px;
       border-radius: 6px;
-      border: 1px solid var(--gitako-border-default);
-      background: var(--gitako-bg-subtle);
+      @include interactive-frame;
       color: var(--gitako-fg-default);
       &:active {
-        color: var(--gitako-fg-default);
+        color: var(--gitako-fg-subtle);
       }
       transition: all ease 0.3s;
       font-size: 16px;
@@ -307,13 +330,13 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       object-fit: contain;
       transition: all ease 0.4s;
       transform: translateX(-8px);
-      filter: drop-shadow(0 0 1px var(--gitako-bg-backdrop)); // REPLACE
+      filter: drop-shadow(0 0 1px var(--gitako-primer-canvas-backdrop));
     }
     &:active,
     &:hover {
       .tentacle {
         transform: translateX(-4px);
-        filter: drop-shadow(0 0 2px var(--gitako-bg-backdrop)); // REPLACE
+        filter: drop-shadow(0 0 2px var(--gitako-primer-canvas-backdrop));
       }
     }
   }
@@ -345,7 +368,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     font-weight: 600;
   }
   a {
-    color: var(--gitako-fg-accent);
+    color: var(--gitako-accent-fg);
   }
 
   $resizeHandlerWidth: 1px;
@@ -412,13 +435,13 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
     .octicon {
       transition: transform 0.3s ease;
-      color: var(--gitako-fg-default);
+      color: var(--gitako-fg-subtle);
       width: 100%;
       height: 100%;
     }
 
     .octicon-color {
-      color: var(--gitako-fg-default);
+      color: var(--gitako-fg-subtle);
     }
 
     .octicon-wrapper {
@@ -447,7 +470,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           line-height: 32px;
 
           a {
-            color: var(--gitako-fg-accent);
+            color: var(--gitako-accent-fg);
             white-space: normal;
           }
         }
@@ -475,11 +498,11 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             }
 
             &.active .octicon {
-              color: var(--gitako-fg-default);
+              color: var(--gitako-fg-subtle);
             }
 
             .action-icon {
-              color: var(--gitako-fg-default);
+              color: var(--gitako-fg-subtle);
               width: 20px;
               height: 20px;
               text-align: center;
@@ -553,6 +576,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           .search-input {
             width: 100%;
             box-shadow: none; // stay low
+            border-width: 1px 0 1px 0; // remove border on left&right to make UI clear
             border-color: var(--gitako-border-default);
             border-radius: 0; // its rounded corner not match with nearby elements
             color: var(--gitako-fg-default);
@@ -586,11 +610,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
               line-height: 1;
               outline: none;
 
-              @include interactive-background(
-                var(--gitako-bg-default),
-                var(--gitako-bg-subtle),
-                var(--gitako-bg-subtle)
-              );
+              @include interactive-frame;
             }
           }
         }
@@ -611,16 +631,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
           &.focused {
             @include interactive-background(
-              var(--gitako-bg-subtle),
-              var(--gitako-bg-subtle),
-              var(--gitako-bg-subtle)
+              var(--gitako-canvas-subtle),
+              var(--gitako-canvas-subtle),
+              var(--gitako-canvas-inset),
             );
           }
 
           @include interactive-background(
-            var(--gitako-bg-default),
-            var(--gitako-bg-subtle),
-            var(--gitako-bg-subtle)
+            var(--gitako-canvas-default),
+            var(--gitako-canvas-subtle),
+            var(--gitako-canvas-inset),
           );
 
           &.disabled {