Merge pull request #186 from ryanrishi/master

Use new Primer color names

Author: berzniz

src/js/style.css

@@ -30,23 +30,25 @@
 }
 
 /* Define fallbacks in dark mode */
-[data-color-mode=dark] .__better_github_pr {
-    --bgpr-background: #0d1117;
-    --bgpr-color: #bebebe;
-    --bgpr-border: #484848;
+@media (prefers-color-scheme: dark) {
+    .__better_github_pr {
+        --bgpr-background: #0d1117;
+        --bgpr-color: #bebebe;
+        --bgpr-border: #484848;
 
-    --bgpr-filter-background: #42433e;
-    --bgpr-filter-color: #fff;
-    --bgpr-filter-border: #333;
-    --bgpr-filter-border-focus: #000;
-    --bgpr-filter-placeholder-color: #fff;
+        --bgpr-filter-background: #42433e;
+        --bgpr-filter-color: #fff;
+        --bgpr-filter-border: #333;
+        --bgpr-filter-border-focus: #000;
+        --bgpr-filter-placeholder-color: #fff;
 
-    --bgpr-item-hover-background: #42433e;
+        --bgpr-item-hover-background: #42433e;
 
-    --bgpr-file-highlight-background: #42433e;
-    --bgpr-file-filter-color: #333;
-    --bgpr-file-filter-background: #e4af3c;
-    --bgpr-file-changes-color: #999;
+        --bgpr-file-highlight-background: #42433e;
+        --bgpr-file-filter-color: #333;
+        --bgpr-file-filter-background: #e4af3c;
+        --bgpr-file-changes-color: #999;
+    }
 }
 
 ._better_github_pr_resizer {
@@ -73,9 +75,9 @@
     padding: 0 10px 0;
     width: 330px;
     height: calc(100vh - 60px);
-    background-color: var(--color-bg-canvas, var(--bgpr-background));
-    border: 1px solid var(--color-border-primary, var(--bgpr-border));
-    color: var(--color-text-primary, var(--bgpr-color));
+    background-color: var(--color-canvas-default, var(--bgpr-background));
+    border: 1px solid var(--color-border-default, var(--bgpr-border));
+    color: var(--color-fg-default, var(--bgpr-color));
     box-sizing: border-box;
     border-radius: 3px;
 }
@@ -108,25 +110,26 @@
     width: 100%;
 }
 .__better_github_pr .actions button {
-    color: var(--color-text-primary, var(--bgpr-color));
+    color: var(--color-fg-default, var(--bgpr-color));
 }
 
 .__better_github_pr .actions-filter {
     flex: 1;
     padding: 5px 10px;
     border-radius: 4px;
     outline: none;
-    background: var(--color-bg-secondary, var(--bgpr-filter-background));
-    color: var(--color-diff-blob-hunk-text, var(--bgpr-filter-color));
-    border: 1px solid var(--color-input-border, var(--bgpr-filter-border));
+    background: var(--color-canvas-subtle, var(--bgpr-filter-background));
+    color: var(--color-fg-default, var(--bgpr-filter-color));
+    border: 1px solid var(--color-border-default, var(--bgpr-filter-border));
     transition: border .2s;
 }
 .__better_github_pr .actions-filter::placeholder {
-    color: var(--bgpr-filter-placeholder-color);
+    color: var(--color-fg-muted, var(--bgpr-filter-placeholder-color));
 }
+
 .__better_github_pr .actions-filter:focus {
     outline: none;
-    border: 1px solid var(--color-border-primary, var(--bgpr-filter-border-focus));
+    border: 1px solid var(--color-border-default, var(--bgpr-filter-border-focus));
 }
 
 .__better_github_pr .actions-small-button
@@ -183,7 +186,7 @@
 }
 
 .tree-view_item:hover {
-    background-color: var(--color-bg-info, var(--bgpr-item-hover-background));
+    background-color: var(--color-accent-subtle, var(--bgpr-item-hover-background));
 }
 
 .tree-view_arrow {
@@ -239,7 +242,7 @@
 }
 
 .github-pr-file.github-pr-file-highlight {
-    background: var(--color-bg-info, var(--bgpr-file-highlight-background));
+    background: var(--color-accent-subtle, var(--bgpr-file-highlight-background));
 }
 
 .github-pr-file.github-pr-file-deleted {
@@ -251,7 +254,7 @@
 }
 
 .github-pr-file > span.changes > .number {
-  color: var(--color-text-secondary, var(--bgpr-file-changes-color));
+  color: var(--color-fg-muted, var(--bgpr-file-changes-color));
   margin-left: 8px;
   margin-right: 4px;
 }
@@ -269,7 +272,7 @@
 }
 
 .github-pr-file span.deletion {
-    background-color: var(--color-diffstat-deletion-bg, var(--bgpr-deletion-color));
+    background-color: var(--color-danger-emphasis, var(--bgpr-deletion-color));
 }
 
 .github-pr-file-highlight-filter {