From bd69007f4f870f6e3db02186b04632a45f5cd408 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 1 Nov 2021 15:25:33 +0800
Subject: [PATCH] chore: update GitHub color references

---
 src/styles/index.scss  | 185 +++++++++++++++++------------------------
 src/styles/themes.scss |   7 ++
 2 files changed, 82 insertions(+), 110 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 452d858..bd0a526 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -59,41 +59,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
 .#{$name}-ready {
   // github
-  &.shrink-github-header {
-    .js-header-wrapper {
-      background: var(--gitako-bg-canvas-inverse); // REPLACE
-    }
-    .Header {
-      max-width: 1280px;
-      margin: 0 auto;
-      @media (max-width: 1020px) {
-        overflow: hidden; // prevent blank scroll area when Gitako is open and window is narrow
-      }
-      @media (min-width: 1280px) {
-        padding: 0 32px !important;
-      }
-    }
-    main {
-      // overflow: hidden;
-      // This prevents blank scroll area when Gitako is open and window is narrow.
-      // But it conflicts with the pr toolbar. Keep it here as a reminder.
-
-      & > *:first-child {
-        // repo info and nav bar
-        box-shadow: inset 0 -1px 0 var(--gitako-border-overlay); // from .UnderlineNav // REPLACE
-
-        & > * {
-          max-width: 1280px;
-          margin: 0 auto;
-        }
-
-        nav {
-          overflow: auto !important;
-        }
-      }
-    }
-  }
-
   // code folding start
   .blob-wrapper table .blob-num {
     position: relative; // for positioning
@@ -138,9 +103,9 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         }
 
         @include interactive-background-on-before(
-          var(--gitako-icon-tertiary), // REPLACE
-          var(--gitako-icon-primary), // REPLACE
-          var(--gitako-icon-secondary) // REPLACE
+          var(--gitako-fg-default),
+          var(--gitako-fg-default),
+          var(--gitako-fg-muted)
         );
       }
 
@@ -151,9 +116,9 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           }
 
           @include interactive-background-on-before(
-            var(--gitako-icon-secondary), // REPLACE
-            var(--gitako-icon-tertiary), // REPLACE
-            var(--gitako-icon-primary) // REPLACE
+            var(--gitako-fg-muted),
+            var(--gitako-fg-default),
+            var(--gitako-fg-default)
           );
         }
       }
@@ -181,13 +146,13 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       .clippy {
         width: 32px;
         height: 32px;
-        border: 1px solid var(--gitako-border-tertiary); // REPLACE
+        border: 1px solid var(--gitako-border-default);
         border-radius: 4px;
 
         @include interactive-background(
-          var(--gitako-btn-bg), // REPLACE
-          var(--gitako-btn-hover-bg), // REPLACE
-          var(--gitako-btn-focus-bg) // REPLACE
+          var(--gitako-btn-bg),
+          var(--gitako-btn-hover-bg),
+          var(--gitako-btn-focus-bg)
         );
         .icon {
           width: 100%;
@@ -221,7 +186,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
 .with-gitako-spacing {
   @media screen {
-    margin-left: var(--gitako-width); // REPLACE
+    margin-left: var(--gitako-width);
   }
 
   // gitee
@@ -268,8 +233,8 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
 @mixin icon-button(
   $default: transparent,
-  $hover: var(--gitako-btn-hover-bg), // REPLACE
-  $active: var(--gitako-btn-focus-bg), // REPLACE
+  $hover: var(--gitako-btn-hover-bg),
+  $active: var(--gitako-btn-focus-bg),
   $focus: $hover
 ) {
   @include flex-center();
@@ -282,10 +247,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
 // Why does not TextInput get theme properly?
 @mixin input {
-  color: var(--gitako-text-primary); // REPLACE
-  background-color: var(--gitako-input-bg); // REPLACE
-  border-color: var(--gitako-border-primary); // REPLACE
-  box-shadow: var(--gitako-input-shadow); // REPLACE
+  color: var(--gitako-fg-default);
+  background-color: var(--gitako-canvas-default);
+  border-color: var(--gitako-border-default);
+  box-shadow: var(--gitako-primer-shadow-inset);
 }
 
 .#{$name}-toggle-show-button-wrapper {
@@ -322,11 +287,11 @@ $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-tertiary); // REPLACE
-      background: var(--gitako-bg-tertiary); // REPLACE
-      color: var(--gitako-icon-primary); // REPLACE
+      border: 1px solid var(--gitako-border-default);
+      background: var(--gitako-bg-subtle);
+      color: var(--gitako-fg-default);
       &:active {
-        color: var(--gitako-icon-tertiary); // REPLACE
+        color: var(--gitako-fg-default);
       }
       transition: all ease 0.3s;
       font-size: 16px;
@@ -358,10 +323,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     margin-left: 4px;
     padding: 2px 4px;
     font-size: 12px;
-    color: var(--gitako-text-red); // REPLACE
-    border: 1px solid var(--gitako-border-overlay); // REPLACE
+    color: var(--gitako-danger-fg);
+    border: 1px solid var(--gitako-border-default);
     border-radius: 2px;
-    background-color: var(--gitako-bg-tertiary); // REPLACE
+    background-color: var(--gitako-bg-subtle);
   }
 
   &:hover {
@@ -380,7 +345,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     font-weight: 600;
   }
   a {
-    color: var(--gitako-text-link); // REPLACE
+    color: var(--gitako-fg-accent);
   }
 
   $resizeHandlerWidth: 1px;
@@ -402,12 +367,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       left: 0;
       transition: all 0.25s cubic-bezier(0.55, 0.06, 0.68, 0.19); // values from Chrome devtools
       &.collapsed {
-        left: calc(0px - #{$resizeHandlerWidth} - var(--gitako-width)); // REPLACE
+        left: calc(0px - #{$resizeHandlerWidth} - var(--gitako-width));
       }
     }
 
     .gitako-side-bar-body-wrapper-content {
-      width: var(--gitako-width); // REPLACE
+      width: var(--gitako-width);
     }
   }
   .#{$name}-resize-handler {
@@ -416,15 +381,15 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     cursor: ew-resize;
     user-select: none;
     width: 0;
-    background: var(--gitako-bg-tertiary); // REPLACE
-    border-right: $resizeHandlerWidth solid var(--gitako-border-tertiary); // REPLACE
+    background: var(--gitako-bg-subtle);
+    border-right: $resizeHandlerWidth solid var(--gitako-border-default);
     overflow: hidden;
     box-sizing: content-box;
     &:hover,
     &:active {
       width: 16px;
-      background: var(--gitako-bg-secondary); // REPLACE
-      border-left: 1px solid var(--gitako-border-tertiary); // REPLACE
+      background: var(--gitako-bg-subtle);
+      border-left: 1px solid var(--gitako-border-default);
     }
 
     .octicon.Grabber {
@@ -441,19 +406,19 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     height: 100%;
     display: flex;
     flex-direction: column;
-    background: var(--gitako-bg-secondary); // REPLACE
-    border-left: 1px solid var(--gitako-border-overlay); // REPLACE
+    background: var(--gitako-bg-subtle);
+    border-left: 1px solid var(--gitako-border-default);
     overflow: hidden;
 
     .octicon {
       transition: transform 0.3s ease;
-      color: var(--gitako-icon-tertiary); // REPLACE
+      color: var(--gitako-fg-default);
       width: 100%;
       height: 100%;
     }
 
     .octicon-color {
-      color: var(--gitako-icon-tertiary); // REPLACE
+      color: var(--gitako-fg-default);
     }
 
     .octicon-wrapper {
@@ -472,7 +437,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       .header {
         position: relative;
         min-height: 62px; // GitHub header height if login
-        background: var(--gitako-bg-tertiary); // REPLACE
+        background: var(--gitako-bg-subtle);
         padding: 6px 10px;
         flex-shrink: 0;
         position: relative; // prevent overlap by outline of other elements
@@ -482,7 +447,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           line-height: 32px;
 
           a {
-            color: var(--gitako-text-link); // REPLACE
+            color: var(--gitako-fg-accent);
             white-space: normal;
           }
         }
@@ -490,8 +455,8 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         .branch-name {
           margin-left: 4px;
           padding: 4px 6px; // did not align well for some reason :/
-          color: var(--gitako-branch-name-text); // REPLACE
-          background-color: var(--gitako-branch-name-bg); // REPLACE
+          color: var(--gitako-fg-muted);
+          background-color: var(--gitako-accent-subtle);
         }
 
         .close-side-bar-button-position {
@@ -510,11 +475,11 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             }
 
             &.active .octicon {
-              color: var(--gitako-icon-primary); // REPLACE
+              color: var(--gitako-fg-default);
             }
 
             .action-icon {
-              color: var(--gitako-icon-tertiary); // REPLACE
+              color: var(--gitako-fg-default);
               width: 20px;
               height: 20px;
               text-align: center;
@@ -543,12 +508,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         width: 100%;
         height: 100%;
         @include flex-center();
-        border-top: 1px solid var(--gitako-border-overlay); // REPLACE
+        border-top: 1px solid var(--gitako-border-default);
 
         .loading-indicator {
           display: flex;
           align-items: center;
-          color: var(--gitako-text-placeholder); // REPLACE
+          color: var(--gitako-fg-subtle);
 
           &-icon {
             width: 20px;
@@ -588,14 +553,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           .search-input {
             width: 100%;
             box-shadow: none; // stay low
-            border-color: var(--gitako-border-overlay); // REPLACE
+            border-color: var(--gitako-border-default);
             border-radius: 0; // its rounded corner not match with nearby elements
-            color: var(--gitako-text-primary); // REPLACE
-            background: var(--gitako-bg-canvas); // REPLACE
+            color: var(--gitako-fg-default);
+            background: var(--gitako-bg-default);
             padding-right: 40px; // save space for actions
 
             &.error {
-              border-color: var(--gitako-border-danger); // REPLACE
+              border-color: var(--gitako-danger-emphasis);
             }
           }
 
@@ -613,18 +578,18 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
               margin: 0;
               padding: 2px 4px;
               min-width: 32px;
-              border: 1px solid var(--gitako-border-secondary); // REPLACE
+              border: 1px solid var(--gitako-border-muted);
               border-radius: 8px;
-              color: var(--gitako-text-secondary); // REPLACE
+              color: var(--gitako-fg-muted);
               font-size: 12px;
               font-weight: 500;
               line-height: 1;
               outline: none;
 
               @include interactive-background(
-                var(--gitako-bg-primary), // REPLACE
-                var(--gitako-bg-secondary), // REPLACE
-                var(--gitako-bg-tertiary) // REPLACE
+                var(--gitako-bg-default),
+                var(--gitako-bg-subtle),
+                var(--gitako-bg-subtle)
               );
             }
           }
@@ -646,21 +611,21 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
           &.focused {
             @include interactive-background(
-              var(--gitako-bg-tertiary), // REPLACE
-              var(--gitako-bg-tertiary), // REPLACE
-              var(--gitako-bg-secondary) // REPLACE
+              var(--gitako-bg-subtle),
+              var(--gitako-bg-subtle),
+              var(--gitako-bg-subtle)
             );
           }
 
           @include interactive-background(
-            var(--gitako-bg-primary), // REPLACE
-            var(--gitako-bg-tertiary), // REPLACE
-            var(--gitako-bg-secondary) // REPLACE
+            var(--gitako-bg-default),
+            var(--gitako-bg-subtle),
+            var(--gitako-bg-subtle)
           );
 
           &.disabled {
             pointer-events: none;
-            color: var(--gitako-text-disabled); // REPLACE
+            color: var(--gitako-fg-muted);
           }
           display: flex;
           justify-content: space-between;
@@ -671,17 +636,17 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           white-space: nowrap;
           transition: padding 0.3s ease; // on toggle expansion in search results
 
-          border-bottom: 1px solid var(--gitako-border-secondary); // REPLACE
+          border-bottom: 1px solid var(--gitako-border-muted);
           &.compact {
             border-bottom: none;
             &.focused {
-              border-top: 1px solid var(--gitako-border-secondary); // REPLACE
-              border-bottom: 1px solid var(--gitako-border-secondary); // REPLACE
+              border-top: 1px solid var(--gitako-border-muted);
+              border-bottom: 1px solid var(--gitako-border-muted);
             }
           }
 
           &:not(:hover) {
-            color: var(--gitako-text-primary); // REPLACE
+            color: var(--gitako-fg-default);
           }
 
           @mixin icon-size() {
@@ -728,7 +693,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
           &:not(:hover) {
             .node-item-label .prefix {
-              color: var(--gitako-text-tertiary); // REPLACE
+              color: var(--gitako-fg-muted);
             }
           }
 
@@ -740,7 +705,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
               display: inline-block;
               width: 48px;
               padding: 0 4px;
-              color: var(--gitako-text-tertiary); // REPLACE
+              color: var(--gitako-fg-muted);
 
               .octicon-wrapper {
                 margin: 0; // make it closer to the comment amount label
@@ -781,12 +746,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
     .#{$name}-settings-bar {
       z-index: 2;
-      background: var(--gitako-bg-tertiary); // REPLACE
+      background: var(--gitako-bg-subtle);
       display: flex;
       flex-direction: column;
       max-height: calc(100vh - 120px);
       &-title {
-        border-top: 1px solid var(--gitako-border-secondary); // REPLACE
+        border-top: 1px solid var(--gitako-border-muted);
         padding: 10px;
         box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
           0 3px 3px -2px rgba(0, 0, 0, 0.12);
@@ -804,7 +769,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           height: 10px;
           top: 0;
           left: 0;
-          background: var(--gitako-bg-tertiary); // REPLACE
+          background: var(--gitako-bg-subtle);
           z-index: 1;
         }
         .settings-section {
@@ -835,10 +800,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
               // make it look like text inputs
               height: 36px;
               border-radius: 6px;
-              border: 1px solid var(--gitako-input-border); // REPLACE
-              background: var(--gitako-input-bg); // REPLACE
-              color: var(--gitako-text-primary); // REPLACE
-              box-shadow: var(--gitako-input-shadow); // REPLACE
+              border: 1px solid var(--gitako-border-default);
+              background: var(--gitako-canvas-default);
+              color: var(--gitako-fg-default);
+              box-shadow: var(--gitako-primer-shadow-inset);
             }
             &.field-checkbox {
               padding-left: 20px;
@@ -863,7 +828,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         margin-bottom: 4px;
       }
       .hint {
-        color: var(--gitako-text-placeholder); // REPLACE
+        color: var(--gitako-fg-subtle);
       }
       .access-token-input-control {
         display: flex;
@@ -885,10 +850,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         justify-content: space-between;
         align-items: center;
         padding: 2px 6px 2px 10px;
-        border-top: 1px solid var(--gitako-border-secondary); // REPLACE
+        border-top: 1px solid var(--gitako-border-muted);
 
         .version {
-          color: var(--gitako-text-tertiary); // REPLACE
+          color: var(--gitako-fg-muted);
         }
 
         .header-right {
diff --git a/src/styles/themes.scss b/src/styles/themes.scss
index 668f9aa..d306427 100644
--- a/src/styles/themes.scss
+++ b/src/styles/themes.scss
@@ -13,6 +13,13 @@
 :root {
   // default, e.g. when not login
   @include setVariables(light.$variables);
+
+  // mapping 'canvas' to 'bg', this should be removed once GitHub exposes 'bg' colors
+  --gitako-bg-default-transparent: var(--gitako-canvas-default-transparent);
+  --gitako-bg-default: var(--gitako-canvas-default);
+  --gitako-bg-inset: var(--gitako-canvas-inset);
+  --gitako-bg-overlay: var(--gitako-canvas-overlay);
+  --gitako-bg-subtle: var(--gitako-canvas-subtle);
 }
 
 :root {