From 9a9c458d8d210eb1287ec92b6732e533b4ea318d Mon Sep 17 00:00:00 2001
From: sage <laymonage@gmail.com>
Date: Sun, 3 Oct 2021 17:45:53 +0700
Subject: [PATCH 1/7] Base themes from primer/primitives v5

---
 styles/base.css                          | 106 +++++------
 styles/globals.css                       |  22 +--
 styles/themes/custom_example.css         | 118 +++++-------
 styles/themes/dark.css                   | 114 +++++------
 styles/themes/dark_dimmed.css            | 114 +++++------
 styles/themes/dark_high_contrast.css     | 114 +++++------
 styles/themes/light.css                  | 115 +++++-------
 styles/themes/preferred_color_scheme.css | 229 ++++++++++-------------
 styles/themes/transparent_dark.css       | 111 +++++------
 9 files changed, 448 insertions(+), 595 deletions(-)

diff --git a/styles/base.css b/styles/base.css
index 329c2ea28..2f4a56b9f 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -6,11 +6,11 @@
  */
 
 * {
-  border-color: var(--color-border-primary);
+  border-color: var(--color-border-default);
 }
 
 a {
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
 }
 
 @media screen and (max-width: 320px) {
@@ -22,101 +22,101 @@ a {
 .color-text-link,
 .Link--primary:hover,
 .Link--secondary:hover {
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
 }
 
 .color-bg-primary {
-  background-color: var(--color-bg-primary);
+  background-color: var(--color-canvas-default);
 }
 
 .color-bg-secondary {
-  background-color: var(--color-bg-secondary);
+  background-color: var(--color-canvas-subtle);
 }
 
 .color-bg-tertiary {
-  background-color: var(--color-bg-tertiary);
+  background-color: var(--color-canvas-subtle);
 }
 
 .color-bg-canvas {
-  background-color: var(--color-bg-canvas);
+  background-color: var(--color-canvas-default);
 }
 
 .color-bg-canvas-inset {
-  background-color: var(--color-bg-canvas-inset);
+  background-color: var(--color-canvas-inset);
 }
 
 .color-bg-overlay {
-  background-color: var(--color-bg-overlay);
+  background-color: var(--color-canvas-overlay);
 }
 
 .color-bg-info {
-  background-color: var(--color-bg-info);
+  background-color: var(--color-accent-subtle);
 }
 
 .color-text-primary,
 .Link--primary {
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
 }
 
 .color-text-secondary,
 .Link--secondary {
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
 }
 
 .color-text-tertiary {
-  color: var(--color-text-tertiary);
+  color: var(--color-fg-muted);
 }
 
 .color-text-success {
-  color: var(--color-text-success);
+  color: var(--color-success-fg);
 }
 
 .color-text-danger {
-  color: var(--color-text-danger);
+  color: var(--color-danger-fg);
 }
 
 .color-border-primary {
-  border-color: var(--color-border-primary);
+  border-color: var(--color-border-default);
 }
 
 .color-border-tertiary {
-  border-color: var(--color-border-tertiary);
+  border-color: var(--color-border-default);
 }
 
 .color-border-info {
-  border-color: var(--color-border-info);
+  border-color: var(--color-accent-emphasis);
 }
 
 .form-control {
-  background-color: var(--color-input-bg);
-  border-color: var(--color-input-border);
+  background-color: var(--color-canvas-default);
+  border-color: var(--color-border-default);
 }
 
 .form-control:focus {
-  border-color: var(--color-state-focus-border);
+  border-color: var(--color-accent-emphasis);
   outline: none;
-  box-shadow: var(--color-state-focus-shadow);
+  box-shadow: var(--color-primer-shadow-focus);
 }
 
 .input-contrast {
-  background-color: var(--color-input-contrast-bg);
+  background-color: var(--color-canvas-inset);
 }
 
 .input-contrast:focus {
-  background-color: var(--color-input-bg);
+  background-color: var(--color-canvas-default);
 }
 
 .color-label-border {
-  border-color: var(--color-label-border);
+  border-color: var(--color-border-default);
 }
 
 .color-box-border-info {
-  border-color: var(--color-box-border-info);
+  border-color: var(--color-accent-muted);
 }
 
 .Counter--secondary {
-  color: var(--color-counter-secondary-text);
-  background-color: var(--color-counter-secondary-bg);
+  color: var(--color-fg-muted);
+  background-color: var(--color-neutral-subtle);
 }
 
 .btn {
@@ -171,12 +171,6 @@ a {
   @apply fill-current;
 }
 
-.flash-error {
-  color: var(--color-alert-error-text);
-  background-image: linear-gradient(var(--color-alert-error-bg), var(--color-alert-error-bg));
-  border-color: var(--color-alert-error-border);
-}
-
 /*! Compatibility shim for @primer/css to style GitHub-generated HTML */
 
 .border-0 {
@@ -186,7 +180,7 @@ a {
 .team-mention,
 .user-mention {
   @apply font-semibold whitespace-nowrap;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
 }
 
 .position-relative {
@@ -207,7 +201,7 @@ a {
 
 .btn .octicon {
   @apply align-bottom;
-  color: var(--color-text-tertiary);
+  color: var(--color-fg-muted);
 }
 
 .rounded-1 {
@@ -233,7 +227,7 @@ a {
 .commit-tease-sha {
   @apply font-mono;
   font-size: 90%;
-  color: var(--color-text-primary);
+  color: var(--color-fg-default);
 }
 
 .rounded-2 {
@@ -259,11 +253,11 @@ a {
 
 .blob-num {
   @apply w-[1%] min-w-[50px] px-[10px] font-mono text-xs leading-5 text-right whitespace-nowrap align-top cursor-pointer select-none;
-  color: var(--color-diff-blob-num-text);
+  color: var(--color-fg-subtle);
 }
 
 .blob-num:hover {
-  color: var(--color-diff-blob-num-hover-text);
+  color: var(--color-fg-default);
 }
 
 .blob-num:before {
@@ -281,15 +275,15 @@ a {
 
 .email-hidden-toggle a {
   @apply inline-block h-3 px-2 text-xs font-semibold leading-[6px] no-underline align-middle border;
-  color: var(--color-text-primary);
-  background: var(--color-hidden-text-expander-bg);
+  color: var(--color-fg-default);
+  background: var(--color-neutral-muted);
 }
 
 .email-quoted-reply,
 .email-signature-reply {
   @apply px-4 my-4 border-l-4;
-  color: var(--color-text-secondary);
-  border-left-color: var(--color-border-primary);
+  color: var(--color-fg-muted);
+  border-left-color: var(--color-border-default);
 }
 
 .email-hidden-reply {
@@ -314,7 +308,7 @@ a {
 
 .zeroclipboard-link {
   @apply p-0 m-0 cursor-pointer;
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
 }
 
 img.emoji {
@@ -339,7 +333,7 @@ img.emoji {
 /*! giscus-specific styles */
 
 .gsc-tl-line {
-  background-color: var(--color-border-secondary);
+  background-color: var(--color-border-muted);
 }
 
 .gsc-reactions-popover.open.popover::before {
@@ -347,7 +341,7 @@ img.emoji {
   top: -16px;
   left: 9px;
   border: 8px solid transparent;
-  border-bottom-color: var(--color-border-primary);
+  border-bottom-color: var(--color-border-default);
   content: '';
 }
 
@@ -356,7 +350,7 @@ img.emoji {
   top: -15px;
   left: 10px;
   border: 7px solid transparent;
-  border-bottom: 8px solid var(--color-bg-overlay);
+  border-bottom: 8px solid var(--color-canvas-overlay);
   content: '';
 }
 
@@ -365,7 +359,7 @@ img.emoji {
   top: -16px;
   right: 9px;
   border: 8px solid transparent;
-  border-bottom-color: var(--color-border-primary);
+  border-bottom-color: var(--color-border-default);
   content: '';
 }
 
@@ -374,7 +368,7 @@ img.emoji {
   top: -15px;
   right: 10px;
   border: 7px solid transparent;
-  border-bottom: 8px solid var(--color-bg-overlay);
+  border-bottom: 8px solid var(--color-canvas-overlay);
   content: '';
 }
 
@@ -390,7 +384,7 @@ img.emoji {
 }
 
 .gsc-homepage-bg {
-  background-color: var(--color-bg-canvas);
+  background-color: var(--color-canvas-default);
 }
 
 .blob-wrapper {
@@ -520,8 +514,8 @@ img.emoji {
 .gsc-social-reaction-summary-item {
   @apply px-[6px] rounded-full leading-[24px] border whitespace-nowrap;
   background-color: var(--color-social-reaction-bg);
-  border-color: var(--color-border-primary);
-  color: var(--color-text-secondary);
+  border-color: var(--color-border-default);
+  color: var(--color-fg-muted);
 }
 
 .gsc-social-reaction-summary-item:hover {
@@ -529,9 +523,9 @@ img.emoji {
 }
 
 .gsc-social-reaction-summary-item.has-reacted {
-  background-color: var(--color-bg-info);
+  background-color: var(--color-accent-subtle);
   border-color: var(--color-social-reaction-border);
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
 }
 
 .gsc-social-reaction-summary-item.has-reacted:hover {
@@ -567,7 +561,7 @@ img.emoji {
 }
 
 .gsc-reactions-button:hover {
-  color: var(--color-text-tertiary);
+  color: var(--color-fg-muted);
 }
 
 .gsc-reactions-button.popover-only {
@@ -575,7 +569,7 @@ img.emoji {
 }
 
 .gsc-reactions-button.popover-only:hover {
-  color: var(--color-text-link);
+  color: var(--color-accent-fg);
 }
 
 .gsc-reactions-popover {
diff --git a/styles/globals.css b/styles/globals.css
index b852a0565..7975ce55c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,5 +1,5 @@
 body * {
-  border-color: var(--color-border-primary);
+  border-color: var(--color-border-default);
 }
 
 a {
@@ -54,7 +54,7 @@ a:hover {
 
 .markdown h6 {
   @apply text-xs;
-  color: var(--color-text-secondary);
+  color: var(--color-fg-muted);
 }
 
 .markdown code,
@@ -71,7 +71,7 @@ a:hover {
 .markdown pre {
   @apply p-4 overflow-auto text-xs rounded-md;
   line-height: 1.45;
-  background-color: var(--color-bg-tertiary);
+  background-color: var(--color-canvas-subtle);
 }
 
 .markdown .highlight pre {
@@ -92,12 +92,12 @@ a:hover {
 }
 
 .markdown table tr:nth-child(2n) {
-  background-color: var(--color-bg-tertiary);
+  background-color: var(--color-canvas-subtle);
 }
 
 .markdown blockquote {
   @apply px-4 border-l-[3px];
-  color: var(--color-text-tertiary);
+  color: var(--color-fg-muted);
 }
 
 .markdown blockquote,
@@ -149,16 +149,16 @@ a:hover {
 
 .markdown kbd {
   @apply px-[5px] py-[3px] text-[11px] align-middle border rounded-md;
-  color: var(--color-auto-gray-7);
-  background-color: var(--color-bg-secondary);
-  border-bottom-color: var(--color-border-tertiary);
-  border: 1px solid var(--color-border-tertiary);
-  box-shadow: inset 0 -1px 0 var(--color-border-tertiary);
+  color: var(--color-None);
+  background-color: var(--color-canvas-subtle);
+  border-bottom-color: var(--color-border-default);
+  border: 1px solid var(--color-border-default);
+  box-shadow: inset 0 -1px 0 var(--color-border-default);
 }
 
 .markdown hr {
   @apply h-[.25em] my-6;
-  background-color: var(--color-border-primary);
+  background-color: var(--color-border-default);
 }
 
 .markdown .footnotes {
diff --git a/styles/themes/custom_example.css b/styles/themes/custom_example.css
index 98cd36a9b..2baa9a3ce 100644
--- a/styles/themes/custom_example.css
+++ b/styles/themes/custom_example.css
@@ -5,72 +5,6 @@
  */
 
 main {
-  --color-text-primary: #adbac7;
-  --color-text-secondary: #768390;
-  --color-text-tertiary: #768390;
-  --color-text-link: #58a6ff;
-  --color-text-danger: #f85149;
-  --color-text-success: #3fb950;
-  --color-border-primary: #30363d;
-  --color-border-secondary: #21262d;
-  --color-border-tertiary: rgba(110, 118, 129, 0.4);
-  --color-border-info: #1f6feb;
-  --color-border-muted: #373e47;
-  --color-bg-canvas: #15202b;
-  --color-bg-canvas-inset: rgba(21, 32, 43, 1);
-  --color-bg-primary: rgb(25, 39, 52);
-  --color-bg-secondary: rgb(37, 51, 65);
-  --color-bg-tertiary: rgba(21, 32, 43, 1);
-  --color-bg-overlay: #161b22;
-  --color-bg-info: rgba(56, 139, 253, 0.15);
-  --color-state-focus-border: #1f6feb;
-  --color-state-focus-shadow: 0 0 0 3px #0c2d6b;
-  --color-alert-error-text: #f85149;
-  --color-alert-error-bg: rgba(248, 81, 73, 0.15);
-  --color-alert-error-border: rgba(248, 81, 73, 0.4);
-  --color-counter-secondary-text: #8b949e;
-  --color-counter-secondary-bg: rgba(110, 118, 129, 0.1);
-  --color-box-border-info: rgba(56, 139, 253, 0.4);
-  --color-hidden-text-expander-bg: rgba(110, 118, 129, 0.4);
-  --color-label-border: #30363d;
-  --color-input-bg: #15202b;
-  --color-input-contrast-bg: rgba(21, 32, 43, 1);
-  --color-input-border: #30363d;
-  --color-diff-blob-num-text: #768390;
-  --color-diff-blob-num-hover-text: #adbac7;
-  --color-btn-text: #c9d1d9;
-  --color-btn-bg: #21262d;
-  --color-btn-border: rgba(240, 246, 252, 0.1);
-  --color-btn-shadow: 0 0 transparent;
-  --color-btn-inset-shadow: 0 0 transparent;
-  --color-btn-hover-bg: #30363d;
-  --color-btn-hover-border: #8b949e;
-  --color-btn-active-bg: #282e33;
-  --color-btn-active-border: #6e7681;
-  --color-btn-primary-text: #fff;
-  --color-btn-primary-bg: #238636;
-  --color-btn-primary-border: rgba(240, 246, 252, 0.1);
-  --color-btn-primary-shadow: 0 0 transparent;
-  --color-btn-primary-inset-shadow: 0 0 transparent;
-  --color-btn-primary-hover-bg: #2ea043;
-  --color-btn-primary-hover-border: rgba(240, 246, 252, 0.1);
-  --color-btn-primary-selected-bg: #238636;
-  --color-btn-primary-selected-shadow: 0 0 transparent;
-  --color-btn-primary-disabled-text: rgba(240, 246, 252, 0.5);
-  --color-btn-primary-disabled-bg: rgba(35, 134, 54, 0.6);
-  --color-btn-primary-disabled-border: rgba(240, 246, 252, 0.1);
-  --color-neutral-muted: rgba(99, 110, 123, 0.4);
-  --color-scale-gray-7: #373e47;
-  --color-scale-gray-8: #2d333b;
-  --color-scale-blue-8: #143d79;
-
-  /* Extensions from color-modes.scss */
-  --color-social-reaction-border: var(--color-scale-blue-8);
-  --color-social-reaction-bg: var(--color-scale-gray-8);
-  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
-  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  /* Extensions from syntax-theme-prettylights.scss */
   --color-prettylights-syntax-comment: #768390;
   --color-prettylights-syntax-constant: #6cb6ff;
   --color-prettylights-syntax-entity: #dcbdfb;
@@ -101,6 +35,54 @@ main {
   --color-prettylights-syntax-brackethighlighter-angle: #768390;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
   --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+  --color-btn-text: #adbac7;
+  --color-btn-bg: #373e47;
+  --color-btn-border: rgba(205, 217, 229, 0.1);
+  --color-btn-shadow: 0 0 transparent;
+  --color-btn-inset-shadow: 0 0 transparent;
+  --color-btn-hover-bg: #444c56;
+  --color-btn-hover-border: #768390;
+  --color-btn-active-bg: hsla(213, 12%, 27%, 1);
+  --color-btn-active-border: #636e7b;
+  --color-btn-primary-text: #ffffff;
+  --color-btn-primary-bg: #347d39;
+  --color-btn-primary-border: rgba(205, 217, 229, 0.1);
+  --color-btn-primary-shadow: 0 0 transparent;
+  --color-btn-primary-inset-shadow: 0 0 transparent;
+  --color-btn-primary-hover-bg: #46954a;
+  --color-btn-primary-hover-border: rgba(205, 217, 229, 0.1);
+  --color-btn-primary-selected-bg: #347d39;
+  --color-btn-primary-selected-shadow: 0 0 transparent;
+  --color-btn-primary-disabled-text: rgba(205, 217, 229, 0.5);
+  --color-btn-primary-disabled-bg: rgba(52, 125, 57, 0.6);
+  --color-btn-primary-disabled-border: rgba(205, 217, 229, 0.1);
+  --color-fg-default: #adbac7;
+  --color-fg-muted: #768390;
+  --color-fg-subtle: #545d68;
+  --color-canvas-default: rgb(25, 39, 52);
+  --color-canvas-overlay: #161b22;
+  --color-canvas-inset: rgba(21, 32, 43, 1);
+  --color-canvas-subtle: rgb(37, 51, 65);
+  --color-border-default: #444c56;
+  --color-border-muted: #373e47;
+  --color-neutral-muted: rgba(99, 110, 123, 0.4);
+  --color-neutral-subtle: rgba(99, 110, 123, 0.1);
+  --color-accent-fg: #539bf5;
+  --color-accent-emphasis: #316dca;
+  --color-accent-muted: rgba(65, 132, 228, 0.4);
+  --color-accent-subtle: rgba(56, 139, 253, 0.15);
+  --color-success-fg: #57ab5a;
+  --color-danger-fg: #e5534b;
+  --color-primer-shadow-focus: 0 0 0 3px #143d79;
+  --color-scale-gray-7: #373e47;
+  --color-scale-gray-8: #2d333b;
+  --color-scale-blue-8: #143d79;
+
+  /*! Extensions from @primer/css/alerts/flash.scss */
+  --color-social-reaction-border: var(--color-scale-blue-8);
+  --color-social-reaction-bg: var(--color-scale-gray-8);
+  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
 }
 
 main .pagination-loader-container {
@@ -137,3 +119,7 @@ main {
 .gsc-header {
   padding-bottom: 1rem;
 }
+
+.gsc-homepage-bg {
+  background-color: #15202b;
+}
diff --git a/styles/themes/dark.css b/styles/themes/dark.css
index d26af4053..cf2a624b9 100644
--- a/styles/themes/dark.css
+++ b/styles/themes/dark.css
@@ -4,72 +4,6 @@
  */
 
 main {
-  --color-text-primary: #c9d1d9;
-  --color-text-secondary: #8b949e;
-  --color-text-tertiary: #8b949e;
-  --color-text-link: #58a6ff;
-  --color-text-danger: #f85149;
-  --color-text-success: #3fb950;
-  --color-border-primary: #30363d;
-  --color-border-secondary: #21262d;
-  --color-border-tertiary: rgba(110, 118, 129, 0.4);
-  --color-border-info: #1f6feb;
-  --color-border-muted: #21262d;
-  --color-bg-canvas: #0d1117;
-  --color-bg-canvas-inset: #010409;
-  --color-bg-primary: #0d1117;
-  --color-bg-secondary: #161b22;
-  --color-bg-tertiary: #161b22;
-  --color-bg-overlay: #161b22;
-  --color-bg-info: rgba(56, 139, 253, 0.15);
-  --color-state-focus-border: #1f6feb;
-  --color-state-focus-shadow: 0 0 0 3px #0c2d6b;
-  --color-alert-error-text: #c9d1d9;
-  --color-alert-error-bg: rgba(248, 81, 73, 0.15);
-  --color-alert-error-border: rgba(248, 81, 73, 0.4);
-  --color-counter-secondary-text: #8b949e;
-  --color-counter-secondary-bg: rgba(110, 118, 129, 0.1);
-  --color-box-border-info: rgba(56, 139, 253, 0.4);
-  --color-hidden-text-expander-bg: rgba(110, 118, 129, 0.4);
-  --color-label-border: #30363d;
-  --color-input-bg: #0d1117;
-  --color-input-contrast-bg: #010409;
-  --color-input-border: #30363d;
-  --color-diff-blob-num-text: #8b949e;
-  --color-diff-blob-num-hover-text: #c9d1d9;
-  --color-btn-text: #c9d1d9;
-  --color-btn-bg: #21262d;
-  --color-btn-border: rgba(240, 246, 252, 0.1);
-  --color-btn-shadow: 0 0 transparent;
-  --color-btn-inset-shadow: 0 0 transparent;
-  --color-btn-hover-bg: #30363d;
-  --color-btn-hover-border: #8b949e;
-  --color-btn-active-bg: #282e33;
-  --color-btn-active-border: #6e7681;
-  --color-btn-primary-text: #fff;
-  --color-btn-primary-bg: #238636;
-  --color-btn-primary-border: rgba(240, 246, 252, 0.1);
-  --color-btn-primary-shadow: 0 0 transparent;
-  --color-btn-primary-inset-shadow: 0 0 transparent;
-  --color-btn-primary-hover-bg: #2ea043;
-  --color-btn-primary-hover-border: rgba(240, 246, 252, 0.1);
-  --color-btn-primary-selected-bg: #238636;
-  --color-btn-primary-selected-shadow: 0 0 transparent;
-  --color-btn-primary-disabled-text: rgba(240, 246, 252, 0.5);
-  --color-btn-primary-disabled-bg: rgba(35, 134, 54, 0.6);
-  --color-btn-primary-disabled-border: rgba(240, 246, 252, 0.1);
-  --color-neutral-muted: rgba(110, 118, 129, 0.4);
-  --color-scale-gray-7: #21262d;
-  --color-scale-gray-8: #161b22;
-  --color-scale-blue-8: #0c2d6b;
-
-  /* Extensions from color-modes.scss */
-  --color-social-reaction-border: var(--color-scale-blue-8);
-  --color-social-reaction-bg: var(--color-scale-gray-8);
-  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
-  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  /* Extensions from syntax-theme-prettylights.scss */
   --color-prettylights-syntax-comment: #8b949e;
   --color-prettylights-syntax-constant: #79c0ff;
   --color-prettylights-syntax-entity: #d2a8ff;
@@ -100,6 +34,54 @@ main {
   --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
   --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+  --color-btn-text: #c9d1d9;
+  --color-btn-bg: #21262d;
+  --color-btn-border: rgba(240, 246, 252, 0.1);
+  --color-btn-shadow: 0 0 transparent;
+  --color-btn-inset-shadow: 0 0 transparent;
+  --color-btn-hover-bg: #30363d;
+  --color-btn-hover-border: #8b949e;
+  --color-btn-active-bg: hsla(212, 12%, 18%, 1);
+  --color-btn-active-border: #6e7681;
+  --color-btn-primary-text: #ffffff;
+  --color-btn-primary-bg: #238636;
+  --color-btn-primary-border: rgba(240, 246, 252, 0.1);
+  --color-btn-primary-shadow: 0 0 transparent;
+  --color-btn-primary-inset-shadow: 0 0 transparent;
+  --color-btn-primary-hover-bg: #2ea043;
+  --color-btn-primary-hover-border: rgba(240, 246, 252, 0.1);
+  --color-btn-primary-selected-bg: #238636;
+  --color-btn-primary-selected-shadow: 0 0 transparent;
+  --color-btn-primary-disabled-text: rgba(240, 246, 252, 0.5);
+  --color-btn-primary-disabled-bg: rgba(35, 134, 54, 0.6);
+  --color-btn-primary-disabled-border: rgba(240, 246, 252, 0.1);
+  --color-fg-default: #c9d1d9;
+  --color-fg-muted: #8b949e;
+  --color-fg-subtle: #484f58;
+  --color-canvas-default: #0d1117;
+  --color-canvas-overlay: #161b22;
+  --color-canvas-inset: #010409;
+  --color-canvas-subtle: #161b22;
+  --color-border-default: #30363d;
+  --color-border-muted: #21262d;
+  --color-neutral-muted: rgba(110, 118, 129, 0.4);
+  --color-neutral-subtle: rgba(110, 118, 129, 0.1);
+  --color-accent-fg: #58a6ff;
+  --color-accent-emphasis: #1f6feb;
+  --color-accent-muted: rgba(56, 139, 253, 0.4);
+  --color-accent-subtle: rgba(56, 139, 253, 0.15);
+  --color-success-fg: #3fb950;
+  --color-danger-fg: #f85149;
+  --color-primer-shadow-focus: 0 0 0 3px #0c2d6b;
+  --color-scale-gray-7: #21262d;
+  --color-scale-gray-8: #161b22;
+  --color-scale-blue-8: #0c2d6b;
+
+  /*! Extensions from @primer/css/alerts/flash.scss */
+  --color-social-reaction-border: var(--color-scale-blue-8);
+  --color-social-reaction-bg: var(--color-scale-gray-8);
+  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
 }
 
 main .pagination-loader-container {
diff --git a/styles/themes/dark_dimmed.css b/styles/themes/dark_dimmed.css
index ab774ecd7..12bd8a848 100644
--- a/styles/themes/dark_dimmed.css
+++ b/styles/themes/dark_dimmed.css
@@ -4,72 +4,6 @@
  */
 
 main {
-  --color-text-primary: #adbac7;
-  --color-text-secondary: #768390;
-  --color-text-tertiary: #768390;
-  --color-text-link: #539bf5;
-  --color-text-danger: #e5534b;
-  --color-text-success: #57ab5a;
-  --color-border-primary: #444c56;
-  --color-border-secondary: #373e47;
-  --color-border-tertiary: rgba(99, 110, 123, 0.4);
-  --color-border-info: #316dca;
-  --color-border-muted: #373e47;
-  --color-bg-canvas: #22272e;
-  --color-bg-canvas-inset: #1c2128;
-  --color-bg-primary: #22272e;
-  --color-bg-secondary: #2d333b;
-  --color-bg-tertiary: #2d333b;
-  --color-bg-overlay: #2d333b;
-  --color-bg-info: rgba(65, 132, 228, 0.15);
-  --color-state-focus-border: #316dca;
-  --color-state-focus-shadow: 0 0 0 3px #143d79;
-  --color-alert-error-text: #adbac7;
-  --color-alert-error-bg: rgba(229, 83, 75, 0.15);
-  --color-alert-error-border: rgba(229, 83, 75, 0.4);
-  --color-counter-secondary-text: #768390;
-  --color-counter-secondary-bg: rgba(99, 110, 123, 0.1);
-  --color-box-border-info: rgba(65, 132, 228, 0.4);
-  --color-hidden-text-expander-bg: rgba(99, 110, 123, 0.4);
-  --color-label-border: #444c56;
-  --color-input-bg: #22272e;
-  --color-input-contrast-bg: #1c2128;
-  --color-input-border: #444c56;
-  --color-diff-blob-num-text: #768390;
-  --color-diff-blob-num-hover-text: #adbac7;
-  --color-btn-text: #adbac7;
-  --color-btn-bg: #373e47;
-  --color-btn-border: rgba(205, 217, 229, 0.1);
-  --color-btn-shadow: 0 0 transparent;
-  --color-btn-inset-shadow: 0 0 transparent;
-  --color-btn-hover-bg: #444c56;
-  --color-btn-hover-border: #768390;
-  --color-btn-active-bg: #3d444d;
-  --color-btn-active-border: #636e7b;
-  --color-btn-primary-text: #fff;
-  --color-btn-primary-bg: #347d39;
-  --color-btn-primary-border: rgba(205, 217, 229, 0.1);
-  --color-btn-primary-shadow: 0 0 transparent;
-  --color-btn-primary-inset-shadow: 0 0 transparent;
-  --color-btn-primary-hover-bg: #46954a;
-  --color-btn-primary-hover-border: rgba(205, 217, 229, 0.1);
-  --color-btn-primary-selected-bg: #347d39;
-  --color-btn-primary-selected-shadow: 0 0 transparent;
-  --color-btn-primary-disabled-text: rgba(205, 217, 229, 0.5);
-  --color-btn-primary-disabled-bg: rgba(52, 125, 57, 0.6);
-  --color-btn-primary-disabled-border: rgba(205, 217, 229, 0.1);
-  --color-neutral-muted: rgba(99, 110, 123, 0.4);
-  --color-scale-gray-7: #373e47;
-  --color-scale-gray-8: #2d333b;
-  --color-scale-blue-8: #143d79;
-
-  /* Extensions from color-modes.scss */
-  --color-social-reaction-border: var(--color-scale-blue-8);
-  --color-social-reaction-bg: var(--color-scale-gray-8);
-  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
-  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  /* Extensions from syntax-theme-prettylights.scss */
   --color-prettylights-syntax-comment: #768390;
   --color-prettylights-syntax-constant: #6cb6ff;
   --color-prettylights-syntax-entity: #dcbdfb;
@@ -100,6 +34,54 @@ main {
   --color-prettylights-syntax-brackethighlighter-angle: #768390;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
   --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+  --color-btn-text: #adbac7;
+  --color-btn-bg: #373e47;
+  --color-btn-border: rgba(205, 217, 229, 0.1);
+  --color-btn-shadow: 0 0 transparent;
+  --color-btn-inset-shadow: 0 0 transparent;
+  --color-btn-hover-bg: #444c56;
+  --color-btn-hover-border: #768390;
+  --color-btn-active-bg: hsla(213, 12%, 27%, 1);
+  --color-btn-active-border: #636e7b;
+  --color-btn-primary-text: #ffffff;
+  --color-btn-primary-bg: #347d39;
+  --color-btn-primary-border: rgba(205, 217, 229, 0.1);
+  --color-btn-primary-shadow: 0 0 transparent;
+  --color-btn-primary-inset-shadow: 0 0 transparent;
+  --color-btn-primary-hover-bg: #46954a;
+  --color-btn-primary-hover-border: rgba(205, 217, 229, 0.1);
+  --color-btn-primary-selected-bg: #347d39;
+  --color-btn-primary-selected-shadow: 0 0 transparent;
+  --color-btn-primary-disabled-text: rgba(205, 217, 229, 0.5);
+  --color-btn-primary-disabled-bg: rgba(52, 125, 57, 0.6);
+  --color-btn-primary-disabled-border: rgba(205, 217, 229, 0.1);
+  --color-fg-default: #adbac7;
+  --color-fg-muted: #768390;
+  --color-fg-subtle: #545d68;
+  --color-canvas-default: #22272e;
+  --color-canvas-overlay: #2d333b;
+  --color-canvas-inset: #1c2128;
+  --color-canvas-subtle: #2d333b;
+  --color-border-default: #444c56;
+  --color-border-muted: #373e47;
+  --color-neutral-muted: rgba(99, 110, 123, 0.4);
+  --color-neutral-subtle: rgba(99, 110, 123, 0.1);
+  --color-accent-fg: #539bf5;
+  --color-accent-emphasis: #316dca;
+  --color-accent-muted: rgba(65, 132, 228, 0.4);
+  --color-accent-subtle: rgba(65, 132, 228, 0.15);
+  --color-success-fg: #57ab5a;
+  --color-danger-fg: #e5534b;
+  --color-primer-shadow-focus: 0 0 0 3px #143d79;
+  --color-scale-gray-7: #373e47;
+  --color-scale-gray-8: #2d333b;
+  --color-scale-blue-8: #143d79;
+
+  /*! Extensions from @primer/css/alerts/flash.scss */
+  --color-social-reaction-border: var(--color-scale-blue-8);
+  --color-social-reaction-bg: var(--color-scale-gray-8);
+  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
 }
 
 main .pagination-loader-container {
diff --git a/styles/themes/dark_high_contrast.css b/styles/themes/dark_high_contrast.css
index 341110ee0..76ef4cb94 100644
--- a/styles/themes/dark_high_contrast.css
+++ b/styles/themes/dark_high_contrast.css
@@ -4,72 +4,6 @@
  */
 
 main {
-  --color-text-primary: #f0f3f6;
-  --color-text-secondary: #f0f3f6;
-  --color-text-tertiary: #f0f3f6;
-  --color-text-link: #71b7ff;
-  --color-text-danger: #ff6a69;
-  --color-text-success: #26cd4d;
-  --color-border-primary: #7a828e;
-  --color-border-secondary: #7a828e;
-  --color-border-tertiary: rgba(158, 167, 179, 0.4);
-  --color-border-info: #409eff;
-  --color-border-muted: #7a828e;
-  --color-bg-canvas: #0a0c10;
-  --color-bg-canvas-inset: #010409;
-  --color-bg-primary: #0a0c10;
-  --color-bg-secondary: #272b33;
-  --color-bg-tertiary: #272b33;
-  --color-bg-overlay: #272b33;
-  --color-bg-info: rgba(64, 158, 255, 0.15);
-  --color-state-focus-border: #409eff;
-  --color-state-focus-shadow: 0 0 0 3px #1e60d5;
-  --color-alert-error-text: #f0f3f6;
-  --color-alert-error-bg: rgba(255, 106, 105, 0.15);
-  --color-alert-error-border: #ff6a69;
-  --color-counter-secondary-text: #f0f3f6;
-  --color-counter-secondary-bg: rgba(158, 167, 179, 0.1);
-  --color-box-border-info: #409eff;
-  --color-hidden-text-expander-bg: rgba(158, 167, 179, 0.4);
-  --color-label-border: #7a828e;
-  --color-input-bg: #0a0c10;
-  --color-input-contrast-bg: #010409;
-  --color-input-border: #7a828e;
-  --color-diff-blob-num-text: #f0f3f6;
-  --color-diff-blob-num-hover-text: #f0f3f6;
-  --color-btn-text: #f0f3f6;
-  --color-btn-bg: #272b33;
-  --color-btn-border: #7a828e;
-  --color-btn-shadow: 0 0 transparent;
-  --color-btn-inset-shadow: 0 0 transparent;
-  --color-btn-hover-bg: #525964;
-  --color-btn-hover-border: #bdc4cc;
-  --color-btn-active-bg: #4c525d;
-  --color-btn-active-border: #9ea7b3;
-  --color-btn-primary-text: #0a0c10;
-  --color-btn-primary-bg: #09b43a;
-  --color-btn-primary-border: #4ae168;
-  --color-btn-primary-shadow: 0 0 transparent;
-  --color-btn-primary-inset-shadow: 0 0 transparent;
-  --color-btn-primary-hover-bg: #26cd4d;
-  --color-btn-primary-hover-border: #4ae168;
-  --color-btn-primary-selected-bg: #09b43a;
-  --color-btn-primary-selected-shadow: 0 0 transparent;
-  --color-btn-primary-disabled-text: rgba(10, 12, 16, 0.5);
-  --color-btn-primary-disabled-bg: rgba(9, 180, 58, 0.6);
-  --color-btn-primary-disabled-border: rgba(74, 225, 104, 0.4);
-  --color-neutral-muted: rgba(158, 167, 179, 0.4);
-  --color-scale-gray-7: #272b33;
-  --color-scale-gray-8: #272b33;
-  --color-scale-blue-8: #1e60d5;
-
-  /* Extensions from color-modes.scss */
-  --color-social-reaction-border: var(--color-scale-blue-8);
-  --color-social-reaction-bg: var(--color-scale-gray-8);
-  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
-  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  /* Extensions from syntax-theme-prettylights.scss */
   --color-prettylights-syntax-comment: #bdc4cc;
   --color-prettylights-syntax-constant: #91cbff;
   --color-prettylights-syntax-entity: #dbb7ff;
@@ -100,6 +34,54 @@ main {
   --color-prettylights-syntax-brackethighlighter-angle: #bdc4cc;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #7a828e;
   --color-prettylights-syntax-constant-other-reference-link: #addcff;
+  --color-btn-text: #f0f3f6;
+  --color-btn-bg: #272b33;
+  --color-btn-border: #7a828e;
+  --color-btn-shadow: 0 0 transparent;
+  --color-btn-inset-shadow: 0 0 transparent;
+  --color-btn-hover-bg: #525964;
+  --color-btn-hover-border: #bdc4cc;
+  --color-btn-active-bg: hsla(217, 10%, 33%, 1);
+  --color-btn-active-border: #9ea7b3;
+  --color-btn-primary-text: #0a0c10;
+  --color-btn-primary-bg: #09b43a;
+  --color-btn-primary-border: #4ae168;
+  --color-btn-primary-shadow: 0 0 transparent;
+  --color-btn-primary-inset-shadow: 0 0 transparent;
+  --color-btn-primary-hover-bg: #26cd4d;
+  --color-btn-primary-hover-border: #4ae168;
+  --color-btn-primary-selected-bg: #09b43a;
+  --color-btn-primary-selected-shadow: 0 0 transparent;
+  --color-btn-primary-disabled-text: rgba(10, 12, 16, 0.5);
+  --color-btn-primary-disabled-bg: rgba(9, 180, 58, 0.6);
+  --color-btn-primary-disabled-border: rgba(74, 225, 104, 0.4);
+  --color-fg-default: #f0f3f6;
+  --color-fg-muted: #f0f3f6;
+  --color-fg-subtle: #7a828e;
+  --color-canvas-default: #0a0c10;
+  --color-canvas-overlay: #272b33;
+  --color-canvas-inset: #010409;
+  --color-canvas-subtle: #272b33;
+  --color-border-default: #7a828e;
+  --color-border-muted: #7a828e;
+  --color-neutral-muted: rgba(158, 167, 179, 0.4);
+  --color-neutral-subtle: rgba(158, 167, 179, 0.1);
+  --color-accent-fg: #71b7ff;
+  --color-accent-emphasis: #409eff;
+  --color-accent-muted: #409eff;
+  --color-accent-subtle: rgba(64, 158, 255, 0.15);
+  --color-success-fg: #26cd4d;
+  --color-danger-fg: #ff6a69;
+  --color-primer-shadow-focus: 0 0 0 3px #1e60d5;
+  --color-scale-gray-7: #272b33;
+  --color-scale-gray-8: #272b33;
+  --color-scale-blue-8: #1e60d5;
+
+  /*! Extensions from @primer/css/alerts/flash.scss */
+  --color-social-reaction-border: var(--color-scale-blue-8);
+  --color-social-reaction-bg: var(--color-scale-gray-8);
+  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
 }
 
 main .pagination-loader-container {
diff --git a/styles/themes/light.css b/styles/themes/light.css
index 29732d968..2346c1e33 100644
--- a/styles/themes/light.css
+++ b/styles/themes/light.css
@@ -4,73 +4,6 @@
  */
 
 main {
-  --color-text-primary: #24292f;
-  --color-text-secondary: #57606a;
-  --color-text-tertiary: #57606a;
-  --color-text-link: #0969da;
-  --color-text-danger: #cf222e;
-  --color-text-success: #1a7f37;
-  --color-border-primary: #d0d7de;
-  --color-border-secondary: #d8dee4;
-  --color-border-tertiary: rgba(175, 184, 193, 0.4);
-  --color-border-info: #0969da;
-  --color-border-muted: hsla(210, 18%, 87%, 1);
-  --color-bg-canvas: #fff;
-  --color-bg-canvas-inset: #f6f8fa;
-  --color-bg-primary: #fff;
-  --color-bg-secondary: #f6f8fa;
-  --color-bg-tertiary: #f6f8fa;
-  --color-bg-overlay: #fff;
-  --color-bg-info: #ddf4ff;
-  --color-state-focus-border: #0969da;
-  --color-state-focus-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
-  --color-alert-error-text: #24292f;
-  --color-alert-error-bg: #ffebe9;
-  --color-alert-error-border: rgba(255, 129, 130, 0.4);
-  --color-counter-secondary-text: #57606a;
-  --color-counter-secondary-bg: rgba(234, 238, 242, 0.5);
-  --color-box-border-info: rgba(84, 174, 255, 0.4);
-  --color-hidden-text-expander-bg: rgba(175, 184, 193, 0.4);
-  --color-label-border: #d0d7de;
-  --color-input-bg: #fff;
-  --color-input-contrast-bg: #f6f8fa;
-  --color-input-border: #d0d7de;
-  --color-diff-blob-num-text: #57606a;
-  --color-diff-blob-num-hover-text: #24292f;
-  --color-btn-text: #24292f;
-  --color-btn-bg: #f6f8fa;
-  --color-btn-border: rgba(27, 31, 36, 0.15);
-  --color-btn-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
-  --color-btn-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-  --color-btn-hover-bg: #f3f4f6;
-  --color-btn-hover-border: rgba(27, 31, 36, 0.15);
-  --color-btn-active-bg: #ebecf0;
-  --color-btn-active-border: rgba(27, 31, 36, 0.15);
-  --color-btn-primary-text: #fff;
-  --color-btn-primary-bg: #2da44e;
-  --color-btn-primary-border: rgba(27, 31, 36, 0.15);
-  --color-btn-primary-shadow: 0 1px 0 rgba(27, 31, 36, 0.1);
-  --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
-  --color-btn-primary-hover-bg: #2c974b;
-  --color-btn-primary-hover-border: rgba(27, 31, 36, 0.15);
-  --color-btn-primary-selected-bg: #298e46;
-  --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0, 45, 17, 0.2);
-  --color-btn-primary-disabled-text: rgba(255, 255, 255, 0.8);
-  --color-btn-primary-disabled-bg: #94d3a2;
-  --color-btn-primary-disabled-border: rgba(27, 31, 36, 0.15);
-  --color-neutral-muted: rgba(175, 184, 193, 0.2);
-  --color-scale-gray-0: #f6f8fa;
-  --color-scale-gray-1: #eaeef2;
-  --color-scale-blue-1: #b6e3ff;
-  --color-scale-blue-8: #0a3069;
-
-  /* Extensions from color-modes.scss */
-  --color-social-reaction-border: var(--color-scale-blue-1);
-  --color-social-reaction-bg: var(--color-scale-gray-0);
-  --color-social-reaction-bg-hover: var(--color-scale-gray-1);
-  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
-
-  /* Extensions from syntax-theme-prettylights.scss */
   --color-prettylights-syntax-comment: #6e7781;
   --color-prettylights-syntax-constant: #0550ae;
   --color-prettylights-syntax-entity: #8250df;
@@ -101,6 +34,54 @@ main {
   --color-prettylights-syntax-brackethighlighter-angle: #57606a;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
   --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+  --color-btn-text: #24292f;
+  --color-btn-bg: #f6f8fa;
+  --color-btn-border: rgba(27, 31, 36, 0.15);
+  --color-btn-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
+  --color-btn-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  --color-btn-hover-bg: #f3f4f6;
+  --color-btn-hover-border: rgba(27, 31, 36, 0.15);
+  --color-btn-active-bg: hsla(220, 14%, 93%, 1);
+  --color-btn-active-border: rgba(27, 31, 36, 0.15);
+  --color-btn-primary-text: #ffffff;
+  --color-btn-primary-bg: #2da44e;
+  --color-btn-primary-border: rgba(27, 31, 36, 0.15);
+  --color-btn-primary-shadow: 0 1px 0 rgba(27, 31, 36, 0.1);
+  --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  --color-btn-primary-hover-bg: #2c974b;
+  --color-btn-primary-hover-border: rgba(27, 31, 36, 0.15);
+  --color-btn-primary-selected-bg: hsla(137, 55%, 36%, 1);
+  --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0, 45, 17, 0.2);
+  --color-btn-primary-disabled-text: rgba(255, 255, 255, 0.8);
+  --color-btn-primary-disabled-bg: #94d3a2;
+  --color-btn-primary-disabled-border: rgba(27, 31, 36, 0.15);
+  --color-fg-default: #24292f;
+  --color-fg-muted: #57606a;
+  --color-fg-subtle: #6e7781;
+  --color-canvas-default: #ffffff;
+  --color-canvas-overlay: #ffffff;
+  --color-canvas-inset: #f6f8fa;
+  --color-canvas-subtle: #f6f8fa;
+  --color-border-default: #d0d7de;
+  --color-border-muted: hsla(210, 18%, 87%, 1);
+  --color-neutral-muted: rgba(175, 184, 193, 0.2);
+  --color-neutral-subtle: rgba(234, 238, 242, 0.5);
+  --color-accent-fg: #0969da;
+  --color-accent-emphasis: #0969da;
+  --color-accent-muted: rgba(84, 174, 255, 0.4);
+  --color-accent-subtle: #ddf4ff;
+  --color-success-fg: #1a7f37;
+  --color-danger-fg: #cf222e;
+  --color-primer-shadow-focus: 0 0 0 3px rgba(9, 105, 218, 0.3);
+  --color-scale-gray-0: #f6f8fa;
+  --color-scale-gray-1: #eaeef2;
+  --color-scale-blue-1: #b6e3ff;
+
+  /*! Extensions from @primer/css/alerts/flash.scss */
+  --color-social-reaction-border: var(--color-scale-blue-1);
+  --color-social-reaction-bg: var(--color-scale-gray-0);
+  --color-social-reaction-bg-hover: var(--color-scale-gray-1);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
 }
 
 main .pagination-loader-container {
diff --git a/styles/themes/preferred_color_scheme.css b/styles/themes/preferred_color_scheme.css
index d8ad05797..aa61765c5 100644
--- a/styles/themes/preferred_color_scheme.css
+++ b/styles/themes/preferred_color_scheme.css
@@ -4,73 +4,6 @@
  */
 
 main {
-  --color-text-primary: #24292f;
-  --color-text-secondary: #57606a;
-  --color-text-tertiary: #57606a;
-  --color-text-link: #0969da;
-  --color-text-danger: #cf222e;
-  --color-text-success: #1a7f37;
-  --color-border-primary: #d0d7de;
-  --color-border-secondary: #d8dee4;
-  --color-border-tertiary: rgba(175, 184, 193, 0.4);
-  --color-border-info: #0969da;
-  --color-border-muted: hsla(210, 18%, 87%, 1);
-  --color-bg-canvas: #fff;
-  --color-bg-canvas-inset: #f6f8fa;
-  --color-bg-primary: #fff;
-  --color-bg-secondary: #f6f8fa;
-  --color-bg-tertiary: #f6f8fa;
-  --color-bg-overlay: #fff;
-  --color-bg-info: #ddf4ff;
-  --color-state-focus-border: #0969da;
-  --color-state-focus-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
-  --color-alert-error-text: #24292f;
-  --color-alert-error-bg: #ffebe9;
-  --color-alert-error-border: rgba(255, 129, 130, 0.4);
-  --color-counter-secondary-text: #57606a;
-  --color-counter-secondary-bg: rgba(234, 238, 242, 0.5);
-  --color-box-border-info: rgba(84, 174, 255, 0.4);
-  --color-hidden-text-expander-bg: rgba(175, 184, 193, 0.4);
-  --color-label-border: #d0d7de;
-  --color-input-bg: #fff;
-  --color-input-contrast-bg: #f6f8fa;
-  --color-input-border: #d0d7de;
-  --color-diff-blob-num-text: #57606a;
-  --color-diff-blob-num-hover-text: #24292f;
-  --color-btn-text: #24292f;
-  --color-btn-bg: #f6f8fa;
-  --color-btn-border: rgba(27, 31, 36, 0.15);
-  --color-btn-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
-  --color-btn-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-  --color-btn-hover-bg: #f3f4f6;
-  --color-btn-hover-border: rgba(27, 31, 36, 0.15);
-  --color-btn-active-bg: #ebecf0;
-  --color-btn-active-border: rgba(27, 31, 36, 0.15);
-  --color-btn-primary-text: #fff;
-  --color-btn-primary-bg: #2da44e;
-  --color-btn-primary-border: rgba(27, 31, 36, 0.15);
-  --color-btn-primary-shadow: 0 1px 0 rgba(27, 31, 36, 0.1);
-  --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
-  --color-btn-primary-hover-bg: #2c974b;
-  --color-btn-primary-hover-border: rgba(27, 31, 36, 0.15);
-  --color-btn-primary-selected-bg: #298e46;
-  --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0, 45, 17, 0.2);
-  --color-btn-primary-disabled-text: rgba(255, 255, 255, 0.8);
-  --color-btn-primary-disabled-bg: #94d3a2;
-  --color-btn-primary-disabled-border: rgba(27, 31, 36, 0.15);
-  --color-neutral-muted: rgba(175, 184, 193, 0.2);
-  --color-scale-gray-0: #f6f8fa;
-  --color-scale-gray-1: #eaeef2;
-  --color-scale-blue-1: #b6e3ff;
-  --color-scale-blue-8: #0a3069;
-
-  /* Extensions from color-modes.scss */
-  --color-social-reaction-border: var(--color-scale-blue-1);
-  --color-social-reaction-bg: var(--color-scale-gray-0);
-  --color-social-reaction-bg-hover: var(--color-scale-gray-1);
-  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
-
-  /* Extensions from syntax-theme-prettylights.scss */
   --color-prettylights-syntax-comment: #6e7781;
   --color-prettylights-syntax-constant: #0550ae;
   --color-prettylights-syntax-entity: #8250df;
@@ -101,6 +34,54 @@ main {
   --color-prettylights-syntax-brackethighlighter-angle: #57606a;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
   --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+  --color-btn-text: #24292f;
+  --color-btn-bg: #f6f8fa;
+  --color-btn-border: rgba(27, 31, 36, 0.15);
+  --color-btn-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
+  --color-btn-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  --color-btn-hover-bg: #f3f4f6;
+  --color-btn-hover-border: rgba(27, 31, 36, 0.15);
+  --color-btn-active-bg: hsla(220, 14%, 93%, 1);
+  --color-btn-active-border: rgba(27, 31, 36, 0.15);
+  --color-btn-primary-text: #ffffff;
+  --color-btn-primary-bg: #2da44e;
+  --color-btn-primary-border: rgba(27, 31, 36, 0.15);
+  --color-btn-primary-shadow: 0 1px 0 rgba(27, 31, 36, 0.1);
+  --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  --color-btn-primary-hover-bg: #2c974b;
+  --color-btn-primary-hover-border: rgba(27, 31, 36, 0.15);
+  --color-btn-primary-selected-bg: hsla(137, 55%, 36%, 1);
+  --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0, 45, 17, 0.2);
+  --color-btn-primary-disabled-text: rgba(255, 255, 255, 0.8);
+  --color-btn-primary-disabled-bg: #94d3a2;
+  --color-btn-primary-disabled-border: rgba(27, 31, 36, 0.15);
+  --color-fg-default: #24292f;
+  --color-fg-muted: #57606a;
+  --color-fg-subtle: #6e7781;
+  --color-canvas-default: #ffffff;
+  --color-canvas-overlay: #ffffff;
+  --color-canvas-inset: #f6f8fa;
+  --color-canvas-subtle: #f6f8fa;
+  --color-border-default: #d0d7de;
+  --color-border-muted: hsla(210, 18%, 87%, 1);
+  --color-neutral-muted: rgba(175, 184, 193, 0.2);
+  --color-neutral-subtle: rgba(234, 238, 242, 0.5);
+  --color-accent-fg: #0969da;
+  --color-accent-emphasis: #0969da;
+  --color-accent-muted: rgba(84, 174, 255, 0.4);
+  --color-accent-subtle: #ddf4ff;
+  --color-success-fg: #1a7f37;
+  --color-danger-fg: #cf222e;
+  --color-primer-shadow-focus: 0 0 0 3px rgba(9, 105, 218, 0.3);
+  --color-scale-gray-0: #f6f8fa;
+  --color-scale-gray-1: #eaeef2;
+  --color-scale-blue-1: #b6e3ff;
+
+  /*! Extensions from @primer/css/alerts/flash.scss */
+  --color-social-reaction-border: var(--color-scale-blue-1);
+  --color-social-reaction-bg: var(--color-scale-gray-0);
+  --color-social-reaction-bg-hover: var(--color-scale-gray-1);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
 }
 
 main .pagination-loader-container {
@@ -120,72 +101,6 @@ main {
    */
 
   main {
-    --color-text-primary: #c9d1d9;
-    --color-text-secondary: #8b949e;
-    --color-text-tertiary: #8b949e;
-    --color-text-link: #58a6ff;
-    --color-text-danger: #f85149;
-    --color-text-success: #3fb950;
-    --color-border-primary: #30363d;
-    --color-border-secondary: #21262d;
-    --color-border-tertiary: rgba(110, 118, 129, 0.4);
-    --color-border-info: #1f6feb;
-    --color-border-muted: #21262d;
-    --color-bg-canvas: #0d1117;
-    --color-bg-canvas-inset: #010409;
-    --color-bg-primary: #0d1117;
-    --color-bg-secondary: #161b22;
-    --color-bg-tertiary: #161b22;
-    --color-bg-overlay: #161b22;
-    --color-bg-info: rgba(56, 139, 253, 0.15);
-    --color-state-focus-border: #1f6feb;
-    --color-state-focus-shadow: 0 0 0 3px #0c2d6b;
-    --color-alert-error-text: #c9d1d9;
-    --color-alert-error-bg: rgba(248, 81, 73, 0.15);
-    --color-alert-error-border: rgba(248, 81, 73, 0.4);
-    --color-counter-secondary-text: #8b949e;
-    --color-counter-secondary-bg: rgba(110, 118, 129, 0.1);
-    --color-box-border-info: rgba(56, 139, 253, 0.4);
-    --color-hidden-text-expander-bg: rgba(110, 118, 129, 0.4);
-    --color-label-border: #30363d;
-    --color-input-bg: #0d1117;
-    --color-input-contrast-bg: #010409;
-    --color-input-border: #30363d;
-    --color-diff-blob-num-text: #8b949e;
-    --color-diff-blob-num-hover-text: #c9d1d9;
-    --color-btn-text: #c9d1d9;
-    --color-btn-bg: #21262d;
-    --color-btn-border: rgba(240, 246, 252, 0.1);
-    --color-btn-shadow: 0 0 transparent;
-    --color-btn-inset-shadow: 0 0 transparent;
-    --color-btn-hover-bg: #30363d;
-    --color-btn-hover-border: #8b949e;
-    --color-btn-active-bg: #282e33;
-    --color-btn-active-border: #6e7681;
-    --color-btn-primary-text: #fff;
-    --color-btn-primary-bg: #238636;
-    --color-btn-primary-border: rgba(240, 246, 252, 0.1);
-    --color-btn-primary-shadow: 0 0 transparent;
-    --color-btn-primary-inset-shadow: 0 0 transparent;
-    --color-btn-primary-hover-bg: #2ea043;
-    --color-btn-primary-hover-border: rgba(240, 246, 252, 0.1);
-    --color-btn-primary-selected-bg: #238636;
-    --color-btn-primary-selected-shadow: 0 0 transparent;
-    --color-btn-primary-disabled-text: rgba(240, 246, 252, 0.5);
-    --color-btn-primary-disabled-bg: rgba(35, 134, 54, 0.6);
-    --color-btn-primary-disabled-border: rgba(240, 246, 252, 0.1);
-    --color-neutral-muted: rgba(110, 118, 129, 0.4);
-    --color-scale-gray-7: #21262d;
-    --color-scale-gray-8: #161b22;
-    --color-scale-blue-8: #0c2d6b;
-
-    /* Extensions from color-modes.scss */
-    --color-social-reaction-border: var(--color-scale-blue-8);
-    --color-social-reaction-bg: var(--color-scale-gray-8);
-    --color-social-reaction-bg-hover: var(--color-scale-gray-7);
-    --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-    /* Extensions from syntax-theme-prettylights.scss */
     --color-prettylights-syntax-comment: #8b949e;
     --color-prettylights-syntax-constant: #79c0ff;
     --color-prettylights-syntax-entity: #d2a8ff;
@@ -216,6 +131,54 @@ main {
     --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
     --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
     --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+    --color-btn-text: #c9d1d9;
+    --color-btn-bg: #21262d;
+    --color-btn-border: rgba(240, 246, 252, 0.1);
+    --color-btn-shadow: 0 0 transparent;
+    --color-btn-inset-shadow: 0 0 transparent;
+    --color-btn-hover-bg: #30363d;
+    --color-btn-hover-border: #8b949e;
+    --color-btn-active-bg: hsla(212, 12%, 18%, 1);
+    --color-btn-active-border: #6e7681;
+    --color-btn-primary-text: #ffffff;
+    --color-btn-primary-bg: #238636;
+    --color-btn-primary-border: rgba(240, 246, 252, 0.1);
+    --color-btn-primary-shadow: 0 0 transparent;
+    --color-btn-primary-inset-shadow: 0 0 transparent;
+    --color-btn-primary-hover-bg: #2ea043;
+    --color-btn-primary-hover-border: rgba(240, 246, 252, 0.1);
+    --color-btn-primary-selected-bg: #238636;
+    --color-btn-primary-selected-shadow: 0 0 transparent;
+    --color-btn-primary-disabled-text: rgba(240, 246, 252, 0.5);
+    --color-btn-primary-disabled-bg: rgba(35, 134, 54, 0.6);
+    --color-btn-primary-disabled-border: rgba(240, 246, 252, 0.1);
+    --color-fg-default: #c9d1d9;
+    --color-fg-muted: #8b949e;
+    --color-fg-subtle: #484f58;
+    --color-canvas-default: #0d1117;
+    --color-canvas-overlay: #161b22;
+    --color-canvas-inset: #010409;
+    --color-canvas-subtle: #161b22;
+    --color-border-default: #30363d;
+    --color-border-muted: #21262d;
+    --color-neutral-muted: rgba(110, 118, 129, 0.4);
+    --color-neutral-subtle: rgba(110, 118, 129, 0.1);
+    --color-accent-fg: #58a6ff;
+    --color-accent-emphasis: #1f6feb;
+    --color-accent-muted: rgba(56, 139, 253, 0.4);
+    --color-accent-subtle: rgba(56, 139, 253, 0.15);
+    --color-success-fg: #3fb950;
+    --color-danger-fg: #f85149;
+    --color-primer-shadow-focus: 0 0 0 3px #0c2d6b;
+    --color-scale-gray-7: #21262d;
+    --color-scale-gray-8: #161b22;
+    --color-scale-blue-8: #0c2d6b;
+
+    /*! Extensions from @primer/css/alerts/flash.scss */
+    --color-social-reaction-border: var(--color-scale-blue-8);
+    --color-social-reaction-bg: var(--color-scale-gray-8);
+    --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+    --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
   }
 
   main .pagination-loader-container {
diff --git a/styles/themes/transparent_dark.css b/styles/themes/transparent_dark.css
index 784c9b8c2..7084976c7 100644
--- a/styles/themes/transparent_dark.css
+++ b/styles/themes/transparent_dark.css
@@ -5,70 +5,6 @@
  */
 
 main {
-  --color-text-primary: #c9d1d9;
-  --color-text-secondary: #8b949e;
-  --color-text-tertiary: #8b949e;
-  --color-text-link: #58a6ff;
-  --color-text-danger: #f85149;
-  --color-text-success: #56d364;
-  --color-border-primary: #30363d;
-  --color-border-secondary: #21262d;
-  --color-border-tertiary: #6e7681;
-  --color-border-info: rgba(56, 139, 253, 0.4);
-  --color-border-muted: #21262d;
-  --color-bg-canvas: transparent;
-  --color-bg-canvas-inset: transparent;
-  --color-bg-primary: transparent;
-  --color-bg-secondary: transparent;
-  --color-bg-tertiary: transparent;
-  --color-bg-overlay: rgba(22, 27, 34, 0.9);
-  --color-bg-info: transparent;
-  --color-state-focus-border: #388bfd;
-  --color-state-focus-shadow: 0 0 0 3px #0c2d6b;
-  --color-alert-error-text: #ff7b72;
-  --color-alert-error-bg: transparent;
-  --color-alert-error-border: rgba(248, 81, 73, 0.4);
-  --color-btn-text: #c9d1d9;
-  --color-btn-bg: transparent;
-  --color-btn-border: #30363d;
-  --color-btn-shadow: 0 0 rgba(0, 0, 0, 0);
-  --color-btn-inset-shadow: 0 0 rgba(0, 0, 0, 0);
-  --color-btn-hover-bg: transparent;
-  --color-btn-hover-border: #8b949e;
-  --color-btn-active-bg: transparent;
-  --color-btn-active-border: #6e7681;
-  --color-btn-primary-text: #ffffff;
-  --color-btn-primary-bg: transparent;
-  --color-btn-primary-border: #2ea043;
-  --color-btn-primary-shadow: 0 0 rgba(0, 0, 0, 0);
-  --color-btn-primary-inset-shadow: 0 0 rgba(0, 0, 0, 0);
-  --color-btn-primary-hover-bg: transparent;
-  --color-btn-primary-hover-border: #3fb950;
-  --color-btn-primary-selected-bg: transparent;
-  --color-btn-primary-selected-shadow: 0 0 rgba(0, 0, 0, 0);
-  --color-btn-primary-disabled-text: rgba(240, 246, 252, 0.5);
-  --color-btn-primary-disabled-bg: transparent;
-  --color-btn-primary-disabled-border: rgba(0, 0, 0, 0);
-  --color-counter-secondary-text: #8b949e;
-  --color-counter-secondary-bg: transparent;
-  --color-label-border: transparent;
-  --color-input-bg: transparent;
-  --color-input-contrast-bg: transparent;
-  --color-input-border: #21262d;
-  --color-box-border-info: rgba(56, 139, 253, 0.4);
-  --color-hidden-text-expander-bg: transparent;
-  --color-neutral-muted: rgba(110, 118, 129, 0.4);
-  --color-scale-gray-7: rgba(55, 62, 71, 0.5);
-  --color-scale-gray-8: rgba(45, 51, 59, 0.5);
-  --color-scale-blue-8: rgba(20, 61, 121, 0.5);
-
-  /* Extensions from color-modes.scss */
-  --color-social-reaction-border: var(--color-scale-blue-8);
-  --color-social-reaction-bg: transparent;
-  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
-  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
-
-  /* Extensions from syntax-theme-prettylights.scss */
   --color-prettylights-syntax-comment: #8b949e;
   --color-prettylights-syntax-constant: #79c0ff;
   --color-prettylights-syntax-entity: #d2a8ff;
@@ -99,6 +35,53 @@ main {
   --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
   --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
   --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+  --color-btn-text: #c9d1d9;
+  --color-btn-bg: #21262d;
+  --color-btn-border: rgba(240, 246, 252, 0.1);
+  --color-btn-shadow: 0 0 transparent;
+  --color-btn-inset-shadow: 0 0 transparent;
+  --color-btn-hover-bg: #30363d;
+  --color-btn-hover-border: #8b949e;
+  --color-btn-active-bg: hsla(212, 12%, 18%, 1);
+  --color-btn-active-border: #6e7681;
+  --color-btn-primary-text: #ffffff;
+  --color-btn-primary-bg: #238636;
+  --color-btn-primary-border: rgba(240, 246, 252, 0.1);
+  --color-btn-primary-shadow: 0 0 transparent;
+  --color-btn-primary-inset-shadow: 0 0 transparent;
+  --color-btn-primary-hover-bg: #2ea043;
+  --color-btn-primary-hover-border: rgba(240, 246, 252, 0.1);
+  --color-btn-primary-selected-bg: #238636;
+  --color-btn-primary-selected-shadow: 0 0 transparent;
+  --color-btn-primary-disabled-text: rgba(240, 246, 252, 0.5);
+  --color-btn-primary-disabled-bg: rgba(35, 134, 54, 0.6);
+  --color-btn-primary-disabled-border: rgba(240, 246, 252, 0.1);
+  --color-fg-default: #c9d1d9;
+  --color-fg-muted: #8b949e;
+  --color-fg-subtle: #484f58;
+  --color-canvas-default: transparent;
+  --color-canvas-overlay: transparent;
+  --color-canvas-inset: transparent;
+  --color-canvas-subtle: transparent;
+  --color-border-default: #30363d;
+  --color-border-muted: #21262d;
+  --color-neutral-muted: rgba(110, 118, 129, 0.4);
+  --color-neutral-subtle: rgba(110, 118, 129, 0.1);
+  --color-accent-fg: #58a6ff;
+  --color-accent-emphasis: #1f6feb;
+  --color-accent-muted: rgba(56, 139, 253, 0.4);
+  --color-accent-subtle: rgba(56, 139, 253, 0.15);
+  --color-success-fg: #3fb950;
+  --color-danger-fg: #f85149;
+  --color-primer-shadow-focus: 0 0 0 3px #0c2d6b;
+  --color-scale-gray-7: #21262d;
+  --color-scale-blue-8: #0c2d6b;
+
+  /*! Extensions from @primer/css/alerts/flash.scss */
+  --color-social-reaction-border: var(--color-scale-blue-8);
+  --color-social-reaction-bg: transparent;
+  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
 }
 
 main .pagination-loader-container {

From 040ae0e7a68fb6f61d85c38663ef5a6ec7086e3d Mon Sep 17 00:00:00 2001
From: sage <laymonage@gmail.com>
Date: Sun, 3 Oct 2021 18:26:52 +0700
Subject: [PATCH 2/7] Add fallback to old CSS variable names

---
 styles/base.css    | 109 ++++++++++++++++++++++++---------------------
 styles/globals.css |  22 ++++-----
 2 files changed, 70 insertions(+), 61 deletions(-)

diff --git a/styles/base.css b/styles/base.css
index 2f4a56b9f..765f5e359 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -6,11 +6,11 @@
  */
 
 * {
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-default, var(--color-border-primary));
 }
 
 a {
-  color: var(--color-accent-fg);
+  color: var(--color-accent-fg, var(--color-text-link));
 }
 
 @media screen and (max-width: 320px) {
@@ -22,101 +22,101 @@ a {
 .color-text-link,
 .Link--primary:hover,
 .Link--secondary:hover {
-  color: var(--color-accent-fg);
+  color: var(--color-accent-fg, var(--color-text-link));
 }
 
 .color-bg-primary {
-  background-color: var(--color-canvas-default);
+  background-color: var(--color-canvas-default, var(--color-bg-primary));
 }
 
 .color-bg-secondary {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--color-canvas-subtle, var(--color-bg-secondary));
 }
 
 .color-bg-tertiary {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--color-canvas-subtle, var(--color-bg-tertiary));
 }
 
 .color-bg-canvas {
-  background-color: var(--color-canvas-default);
+  background-color: var(--color-canvas-default, var(--color-bg-canvas));
 }
 
 .color-bg-canvas-inset {
-  background-color: var(--color-canvas-inset);
+  background-color: var(--color-canvas-inset, var(--color-bg-canvas-inset));
 }
 
 .color-bg-overlay {
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--color-canvas-overlay, var(--color-bg-overlay));
 }
 
 .color-bg-info {
-  background-color: var(--color-accent-subtle);
+  background-color: var(--color-accent-subtle, var(--color-bg-info));
 }
 
 .color-text-primary,
 .Link--primary {
-  color: var(--color-fg-default);
+  color: var(--color-fg-default, var(--color-text-primary));
 }
 
 .color-text-secondary,
 .Link--secondary {
-  color: var(--color-fg-muted);
+  color: var(--color-fg-muted, var(--color-text-secondary));
 }
 
 .color-text-tertiary {
-  color: var(--color-fg-muted);
+  color: var(--color-fg-muted, var(--color-text-tertiary));
 }
 
 .color-text-success {
-  color: var(--color-success-fg);
+  color: var(--color-success-fg, var(--color-text-success));
 }
 
 .color-text-danger {
-  color: var(--color-danger-fg);
+  color: var(--color-danger-fg, var(--color-text-danger));
 }
 
 .color-border-primary {
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-default, var(--color-border-primary));
 }
 
 .color-border-tertiary {
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-default, var(--color-border-tertiary));
 }
 
 .color-border-info {
-  border-color: var(--color-accent-emphasis);
+  border-color: var(--color-accent-emphasis, var(--color-border-info));
 }
 
 .form-control {
-  background-color: var(--color-canvas-default);
-  border-color: var(--color-border-default);
+  background-color: var(--color-canvas-default, var(--color-input-bg));
+  border-color: var(--color-border-default, var(--color-input-border));
 }
 
 .form-control:focus {
-  border-color: var(--color-accent-emphasis);
+  border-color: var(--color-accent-emphasis, var(--color-state-focus-border));
   outline: none;
-  box-shadow: var(--color-primer-shadow-focus);
+  box-shadow: var(--color-primer-shadow-focus, var(--color-state-focus-shadow));
 }
 
 .input-contrast {
-  background-color: var(--color-canvas-inset);
+  background-color: var(--color-canvas-inset, var(--color-input-contrast-bg));
 }
 
 .input-contrast:focus {
-  background-color: var(--color-canvas-default);
+  background-color: var(--color-canvas-default, var(--color-input-bg));
 }
 
 .color-label-border {
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-default, var(--color-label-border));
 }
 
 .color-box-border-info {
-  border-color: var(--color-accent-muted);
+  border-color: var(--color-accent-muted, var(--color-box-border-info));
 }
 
 .Counter--secondary {
-  color: var(--color-fg-muted);
-  background-color: var(--color-neutral-subtle);
+  color: var(--color-fg-muted, var(--color-counter-secondary-text));
+  background-color: var(--color-neutral-subtle, var(--color-counter-secondary-bg));
 }
 
 .btn {
@@ -171,6 +171,15 @@ a {
   @apply fill-current;
 }
 
+.flash-error {
+  color: var(--color-fg-default, var(--color-alert-error-text));
+  background-image: linear-gradient(
+    var(--color-danger-subtle, var(--color-alert-error-bg)),
+    var(--color-danger-subtle, var(--color-alert-error-bg))
+  );
+  border-color: var(--color-danger-muted, var(--color-alert-error-border));
+}
+
 /*! Compatibility shim for @primer/css to style GitHub-generated HTML */
 
 .border-0 {
@@ -180,7 +189,7 @@ a {
 .team-mention,
 .user-mention {
   @apply font-semibold whitespace-nowrap;
-  color: var(--color-fg-default);
+  color: var(--color-fg-default, var(--color-text-primary));
 }
 
 .position-relative {
@@ -201,7 +210,7 @@ a {
 
 .btn .octicon {
   @apply align-bottom;
-  color: var(--color-fg-muted);
+  color: var(--color-fg-muted, var(--color-text-tertiary));
 }
 
 .rounded-1 {
@@ -227,7 +236,7 @@ a {
 .commit-tease-sha {
   @apply font-mono;
   font-size: 90%;
-  color: var(--color-fg-default);
+  color: var(--color-fg-default, var(--color-text-primary));
 }
 
 .rounded-2 {
@@ -253,11 +262,11 @@ a {
 
 .blob-num {
   @apply w-[1%] min-w-[50px] px-[10px] font-mono text-xs leading-5 text-right whitespace-nowrap align-top cursor-pointer select-none;
-  color: var(--color-fg-subtle);
+  color: var(--color-fg-subtle, var(--color-diff-blob-num-text));
 }
 
 .blob-num:hover {
-  color: var(--color-fg-default);
+  color: var(--color-fg-default, var(--color-diff-blob-num-hover-text));
 }
 
 .blob-num:before {
@@ -275,15 +284,15 @@ a {
 
 .email-hidden-toggle a {
   @apply inline-block h-3 px-2 text-xs font-semibold leading-[6px] no-underline align-middle border;
-  color: var(--color-fg-default);
-  background: var(--color-neutral-muted);
+  color: var(--color-fg-default, var(--color-text-primary));
+  background: var(--color-neutral-muted, var(--color-hidden-text-expander-bg));
 }
 
 .email-quoted-reply,
 .email-signature-reply {
   @apply px-4 my-4 border-l-4;
-  color: var(--color-fg-muted);
-  border-left-color: var(--color-border-default);
+  color: var(--color-fg-muted, var(--color-text-secondary));
+  border-left-color: var(--color-border-default, var(--color-border-primary));
 }
 
 .email-hidden-reply {
@@ -308,7 +317,7 @@ a {
 
 .zeroclipboard-link {
   @apply p-0 m-0 cursor-pointer;
-  color: var(--color-accent-fg);
+  color: var(--color-accent-fg, var(--color-text-link));
 }
 
 img.emoji {
@@ -333,7 +342,7 @@ img.emoji {
 /*! giscus-specific styles */
 
 .gsc-tl-line {
-  background-color: var(--color-border-muted);
+  background-color: var(--color-border-muted, var(--color-border-secondary));
 }
 
 .gsc-reactions-popover.open.popover::before {
@@ -341,7 +350,7 @@ img.emoji {
   top: -16px;
   left: 9px;
   border: 8px solid transparent;
-  border-bottom-color: var(--color-border-default);
+  border-bottom-color: var(--color-border-default, var(--color-border-primary));
   content: '';
 }
 
@@ -350,7 +359,7 @@ img.emoji {
   top: -15px;
   left: 10px;
   border: 7px solid transparent;
-  border-bottom: 8px solid var(--color-canvas-overlay);
+  border-bottom: 8px solid var(--color-canvas-overlay, var(--color-bg-overlay));
   content: '';
 }
 
@@ -359,7 +368,7 @@ img.emoji {
   top: -16px;
   right: 9px;
   border: 8px solid transparent;
-  border-bottom-color: var(--color-border-default);
+  border-bottom-color: var(--color-border-default, var(--color-border-primary));
   content: '';
 }
 
@@ -368,7 +377,7 @@ img.emoji {
   top: -15px;
   right: 10px;
   border: 7px solid transparent;
-  border-bottom: 8px solid var(--color-canvas-overlay);
+  border-bottom: 8px solid var(--color-canvas-overlay, var(--color-bg-overlay));
   content: '';
 }
 
@@ -384,7 +393,7 @@ img.emoji {
 }
 
 .gsc-homepage-bg {
-  background-color: var(--color-canvas-default);
+  background-color: var(--color-canvas-default, var(--color-bg-canvas));
 }
 
 .blob-wrapper {
@@ -514,8 +523,8 @@ img.emoji {
 .gsc-social-reaction-summary-item {
   @apply px-[6px] rounded-full leading-[24px] border whitespace-nowrap;
   background-color: var(--color-social-reaction-bg);
-  border-color: var(--color-border-default);
-  color: var(--color-fg-muted);
+  border-color: var(--color-border-default, var(--color-border-primary));
+  color: var(--color-fg-muted, var(--color-text-secondary));
 }
 
 .gsc-social-reaction-summary-item:hover {
@@ -523,9 +532,9 @@ img.emoji {
 }
 
 .gsc-social-reaction-summary-item.has-reacted {
-  background-color: var(--color-accent-subtle);
+  background-color: var(--color-accent-subtle, var(--color-bg-info));
   border-color: var(--color-social-reaction-border);
-  color: var(--color-accent-fg);
+  color: var(--color-accent-fg, var(--color-text-link));
 }
 
 .gsc-social-reaction-summary-item.has-reacted:hover {
@@ -561,7 +570,7 @@ img.emoji {
 }
 
 .gsc-reactions-button:hover {
-  color: var(--color-fg-muted);
+  color: var(--color-fg-muted, var(--color-text-tertiary));
 }
 
 .gsc-reactions-button.popover-only {
@@ -569,7 +578,7 @@ img.emoji {
 }
 
 .gsc-reactions-button.popover-only:hover {
-  color: var(--color-accent-fg);
+  color: var(--color-accent-fg, var(--color-text-link));
 }
 
 .gsc-reactions-popover {
diff --git a/styles/globals.css b/styles/globals.css
index 7975ce55c..ce71a1152 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,5 +1,5 @@
 body * {
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-default, var(--color-border-primary));
 }
 
 a {
@@ -54,7 +54,7 @@ a:hover {
 
 .markdown h6 {
   @apply text-xs;
-  color: var(--color-fg-muted);
+  color: var(--color-fg-muted, var(--color-text-secondary));
 }
 
 .markdown code,
@@ -71,7 +71,7 @@ a:hover {
 .markdown pre {
   @apply p-4 overflow-auto text-xs rounded-md;
   line-height: 1.45;
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--color-canvas-subtle, var(--color-bg-tertiary));
 }
 
 .markdown .highlight pre {
@@ -92,12 +92,12 @@ a:hover {
 }
 
 .markdown table tr:nth-child(2n) {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--color-canvas-subtle, var(--color-bg-tertiary));
 }
 
 .markdown blockquote {
   @apply px-4 border-l-[3px];
-  color: var(--color-fg-muted);
+  color: var(--color-fg-muted, var(--color-text-tertiary));
 }
 
 .markdown blockquote,
@@ -149,16 +149,16 @@ a:hover {
 
 .markdown kbd {
   @apply px-[5px] py-[3px] text-[11px] align-middle border rounded-md;
-  color: var(--color-None);
-  background-color: var(--color-canvas-subtle);
-  border-bottom-color: var(--color-border-default);
-  border: 1px solid var(--color-border-default);
-  box-shadow: inset 0 -1px 0 var(--color-border-default);
+  color: var(--color-None, var(--color-auto-gray-7));
+  background-color: var(--color-canvas-subtle, var(--color-bg-secondary));
+  border-bottom-color: var(--color-border-default, var(--color-border-tertiary));
+  border: 1px solid var(--color-border-default, var(--color-border-tertiary));
+  box-shadow: inset 0 -1px 0 var(--color-border-default, var(--color-border-tertiary));
 }
 
 .markdown hr {
   @apply h-[.25em] my-6;
-  background-color: var(--color-border-default);
+  background-color: var(--color-border-default, var(--color-border-primary));
 }
 
 .markdown .footnotes {

From d8898c9e50e54a197806465dd4cf7ca5bad7b3ce Mon Sep 17 00:00:00 2001
From: sage <laymonage@gmail.com>
Date: Sun, 3 Oct 2021 18:35:59 +0700
Subject: [PATCH 3/7] Replace clippy icon with copy icon

---
 components/Configuration.tsx | 4 ++--
 lib/adapter.ts               | 6 +++---
 styles/base.css              | 3 +++
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/Configuration.tsx b/components/Configuration.tsx
index 2009e2e33..83faea316 100644
--- a/components/Configuration.tsx
+++ b/components/Configuration.tsx
@@ -1,4 +1,4 @@
-import { CheckIcon, ClippyIcon, SyncIcon, XIcon } from '@primer/octicons-react';
+import { CheckIcon, CopyIcon, SyncIcon, XIcon } from '@primer/octicons-react';
 import { ReactNode, useEffect, useState } from 'react';
 import { handleClipboardCopy } from '../lib/adapter';
 import { useDebounce } from '../lib/hooks';
@@ -117,7 +117,7 @@ function ClipboardCopy() {
         role="button"
         onClick={handleClipboardCopy}
       >
-        <ClippyIcon className="m-2 octicon octicon-clippy js-clipboard-clippy-icon" />
+        <CopyIcon className="m-2 octicon octicon-copy js-clipboard-copy-icon" />
         <CheckIcon className="m-2 octicon octicon-check js-clipboard-check-icon color-text-success d-none" />
       </button>
     </div>
diff --git a/lib/adapter.ts b/lib/adapter.ts
index 09b3077a3..542502858 100644
--- a/lib/adapter.ts
+++ b/lib/adapter.ts
@@ -13,8 +13,8 @@ import { clipboardCopy } from './utils';
 const COPY_BUTTON_HTML = `
 <div class="zeroclipboard-container position-absolute right-0 top-0">
   <button aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0 tooltipped-no-delay" data-copy-feedback="Copied!" tabindex="0" role="button">
-    <svg aria-hidden="true" viewBox="0 0 16 16" version="1.1" height="16" width="16" class="octicon octicon-clippy js-clipboard-clippy-icon m-2">
-      <path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path>
+    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2">
+      <path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
     </svg>
     <svg aria-hidden="true" viewBox="0 0 16 16" version="1.1" height="16" width="16" class="octicon octicon-check js-clipboard-check-icon color-text-success d-none m-2">
       <path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
@@ -123,7 +123,7 @@ export function handleClipboardCopy(event: ReactMouseEvent<HTMLElement, MouseEve
       '';
 
     clipboardCopy(contents).then(() => {
-      const clipboardIcon = button.querySelector<SVGElement>('svg.js-clipboard-clippy-icon');
+      const clipboardIcon = button.querySelector<SVGElement>('svg.js-clipboard-copy-icon');
       const checkIcon = button.querySelector<SVGElement>('svg.js-clipboard-check-icon');
 
       clipboardIcon.classList.add('d-none');
diff --git a/styles/base.css b/styles/base.css
index 765f5e359..a59b6dc13 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -210,6 +210,9 @@ a {
 
 .btn .octicon {
   @apply align-bottom;
+}
+
+.btn .octicon:not(.color-text-success) {
   color: var(--color-fg-muted, var(--color-text-tertiary));
 }
 

From 44af0809a395e3b6aa0287189b6e44c213873a5f Mon Sep 17 00:00:00 2001
From: sage <laymonage@gmail.com>
Date: Sun, 3 Oct 2021 18:45:38 +0700
Subject: [PATCH 4/7] Fix scrollbar appearing in code snippets in old comments

---
 lib/adapter.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/adapter.ts b/lib/adapter.ts
index 542502858..f504c2be1 100644
--- a/lib/adapter.ts
+++ b/lib/adapter.ts
@@ -175,6 +175,7 @@ export function processCommentBody(bodyHTML: string) {
     )
     .forEach((div) => {
       div.classList.add('position-relative');
+      div.classList.remove('overflow-auto'); // Old comments have this unnecessary class
       const copyButton = document.createElement('template');
       copyButton.innerHTML = COPY_BUTTON_HTML.trim();
       div.appendChild(copyButton.content.firstChild);

From d386b029f86db78195eda1ea6116dedf8bad13f0 Mon Sep 17 00:00:00 2001
From: sage <laymonage@gmail.com>
Date: Sun, 3 Oct 2021 18:55:41 +0700
Subject: [PATCH 5/7] Update octicons-react to v16

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e39c4f294..be01811bd 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@peculiar/webcrypto": "^1.1.6",
-    "@primer/octicons-react": "^12.1.0",
+    "@primer/octicons-react": "^16.0.0",
     "date-fns": "^2.19.0",
     "jsonwebtoken": "^8.5.1",
     "next": "^11.1.0",
diff --git a/yarn.lock b/yarn.lock
index 146337bc9..52262f70c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -286,10 +286,10 @@
     "@prefresh/core" "^1.3.1"
     "@prefresh/utils" "^1.1.0"
 
-"@primer/octicons-react@^12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-12.1.0.tgz#7556450199e0c10e72e99dd02c59f1ac33544767"
-  integrity sha512-eb/5Obsp6/pVkyzzGhobK6aPAkKqx6VleF/7HYeihGTYm3rGZc+prL/jhxD5Mo1P6U343YEkHjc2gKuvtENn1g==
+"@primer/octicons-react@^16.0.0":
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-16.0.0.tgz#964cf7eac896cf2afdc79dcdd900e6f7471424be"
+  integrity sha512-1/DszHbG39lJO5w5el/Eej3Qu2TW0ecDDeYGq5T1cwNsgCWgJmtk2bmyPYJRQyRtGzRQQ8db03E8OeM7ATPSbQ==
 
 "@rushstack/eslint-patch@^1.0.6":
   version "1.0.6"

From a0456aa60948cf77bc6fbc1e60cffeb8c2daaafb Mon Sep 17 00:00:00 2001
From: sage <laymonage@gmail.com>
Date: Sun, 3 Oct 2021 20:12:37 +0700
Subject: [PATCH 6/7] Add left margin to direct reaction button to match GitHub
 update

---
 styles/base.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/styles/base.css b/styles/base.css
index a59b6dc13..caeb6567a 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -616,6 +616,10 @@ img.emoji {
   @apply mb-1 mr-2 border dmd:mb-4;
 }
 
+.gsc-direct-reaction-button:not(:first-child) {
+  @apply ml-2;
+}
+
 .gsc-reply {
   @apply relative;
 }

From 84b028c045b6c24c6e02106b209ffb5f47ec9a7c Mon Sep 17 00:00:00 2001
From: sage <laymonage@gmail.com>
Date: Sun, 3 Oct 2021 20:16:48 +0700
Subject: [PATCH 7/7] Update changelog

---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46ad23026..9c0bf2f07 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,13 @@ writing, this is a rolling-release project without any meaningful versioning
 whatsoever. Tags/releases may be created for the sole purpose of documenting
 major updates to the project.
 
+## 2021-10-03
+
+### changed
+
+- Use primer/primitives v5 as theme base and update looks to match GitHub
+  updates ([#186](https://github.com/giscus/giscus/pull/186)).
+
 ## 2021-10-02
 
 ### changed