Use new GitHub color variables (#7313)

source/features/clean-conversation-headers.css

@@ -1,9 +1,15 @@
 :root .rgh-clean-conversation-headers-non-default-branch {
- background-color: var(--color-state-hover-primary-bg, #0366d6);
+ background-color: var(
+ --control-checked-bgColor-hover,
+ var(--color-state-hover-primary-bg, #0366d6)
+ );
 }
 
 .rgh-clean-conversation-headers-non-default-branch a {
- color: var(--color-state-hover-primary-text, #fff);
+ color: var(
+ --control-checked-fgColor-rest,
+ var(--color-state-hover-primary-text, #fff)
+ );
 }
 
 /* Removes: every text (but not icons) */

source/features/clean-footer.css

@@ -13,5 +13,5 @@
 }
 
 .footer > div:nth-last-child(2) a {
- color: var(--color-text-disabled, #666);
+ color: var(--fgColor-disabled, var(--color-text-disabled, #666));
 }

source/features/conflict-marker.css

@@ -3,5 +3,5 @@
 }
 
 [data-color-mode='dark'] .rgh-conflict-marker svg {
- color: var(--color-fg-muted);
+ color: var(--fgColor-muted, var(--color-fg-muted));
 }

source/features/emphasize-draft-pr-label.css

@@ -8,7 +8,7 @@
  /* Global PR lists */
  [aria-label='Draft Pull Request']
 ) svg {
- stroke: var(--color-fg-muted);
+ stroke: var(--fgColor-muted, var(--color-fg-muted));
  stroke-width: 1.2px;
  color: var(--rgh-background) !important;
  paint-order: stroke;

source/features/extend-diff-expander.css

@@ -5,8 +5,17 @@
  .blob-num:not(:hover) .directional-expander:first-child,
  .blob-num:not(:hover) + .blob-code
  ) {
- color: var(--color-state-hover-primary-text, #fff);
- background: var(--color-state-hover-primary-bg, #0366d6);
- border-color: var(--color-state-hover-primary-border, #0366d6);
+ color: var(
+ --control-checked-fgColor-rest,
+ var(--color-state-hover-primary-text, #fff)
+ );
+ background: var(
+ --control-checked-bgColor-hover,
+ var(--color-state-hover-primary-bg, #0366d6)
+ );
+ border-color: var(
+ --control-checked-borderColor-hover,
+ var(--color-state-hover-primary-border, #0366d6)
+ );
  cursor: pointer;
 }

source/features/github-bugs.css

@@ -2,7 +2,7 @@
 .js-commits-list-item code, /* `isCommitList` commit message */
 .Box-header .commit-author + span code /* `isRepoTree` commit message */ {
  padding: 2px 4px;
- background-color: var(--color-neutral-muted);
+ background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
  font-size: 0.9em;
  line-height: 1;
  border-radius: 6px;

source/features/hide-low-quality-comments.css

@@ -1,7 +1,7 @@
 .rgh-low-quality-comments-note {
  margin: 15px 0 10px 60px;
  font-size: 12px;
- color: var(--color-fg-muted);
+ color: var(--fgColor-muted, var(--color-fg-muted));
 }
 
 .rgh-hidden-comment .timeline-comment {

source/features/highest-rated-comment.css

@@ -1,14 +1,19 @@
 .rgh-highest-rated-comment.timeline-comment {
  /* Same as GitHub's `.timeline-chosen-answer` */
- border: 2px solid var(--color-success-emphasis);
+ border: 2px solid
+ var(--borderColor-success-emphasis, var(--color-success-emphasis));
 }
 
 .rgh-highest-rated-comment.timeline-comment--caret::before {
- background-color: var(--color-success-emphasis);
+ background-color: var(
+ --borderColor-success-emphasis,
+ var(--color-success-emphasis)
+ );
 }
 
 a.rgh-highest-rated-comment {
- border: 2px solid var(--color-success-emphasis) !important;
+ border: 2px solid
+ var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important;
 }
 
 a.rgh-highest-rated-comment .avatar {

source/features/highlight-collaborators-and-own-conversations.css

@@ -1,5 +1,5 @@
 .rgh-collaborator {
- border: 1px solid var(--color-border-default);
+ border: 1px solid var(--borderColor-default, var(--color-border-default));
  border-radius: 2em;
  padding: 2px 5px;
 

source/features/link-to-compare-diff.css

@@ -1,4 +1,4 @@
 .rgh-link-to-compare-diff:hover
  > :is(.octicon-file-diff, .octicon-file-diff ~ span) {
- color: var(--color-accent-fg) !important;
+ color: var(--fgColor-accent, var(--color-accent-fg)) !important;
 }

source/features/mark-private-repos.css

@@ -1,4 +1,7 @@
 li.private .Label--secondary {
- border-color: var(--color-attention-muted);
- color: var(--color-attention-emphasis);
+ border-color: var(
+ --borderColor-attention-muted,
+ var(--color-attention-muted)
+ );
+ color: var(--fgColor-attention, var(--color-attention-emphasis));
 }

source/features/mobile-tabs.css

@@ -23,12 +23,16 @@
  flex-flow: row wrap;
  padding: 5px;
  flex-basis: 0;
- background: var(--color-action-list-item-default-hover-bg);
+ background: var(
+ --control-transparent-bgColor-hover,
+ var(--color-action-list-item-default-hover-bg)
+ );
  }
 
  [rgh-mobile-tabs] .UnderlineNav-item:hover {
  background: var(
- --color-action-list-item-default-active-bg
+ --control-transparent-bgColor-hover,
+ var(--color-action-list-item-default-active-bg)
  ); /* From: Counter background color */
  }
 
@@ -56,7 +60,7 @@
  visibility: inherit;
  height: auto;
  font-size: 10px;
- color: var(--color-fg-default);
+ color: var(--fgColor-default, var(--color-fg-default));
  font-weight: inherit;
  }
 

source/features/parse-backticks.css

@@ -1,6 +1,9 @@
 /* Style copied from GitHub's <code> */
 .rgh-parse-backticks {
- background-color: var(--color-neutral-muted, rgb(27 31 35 / 5%));
+ background-color: var(
+ --bgColor-neutral-muted,
+ var(--color-neutral-muted, rgb(27 31 35 / 5%))
+ );
  border-radius: 6px;
  font-size: 85%;
  margin: 0;

source/features/resolve-conflicts.css

@@ -1,4 +1,7 @@
 /* Fix bug caused by feature https://user-images.githubusercontent.com/1402241/54978279-d6663c80-4fda-11e9-9638-af25480fb988.png */
 .rgh-resolve-conflicts .CodeMirror-linenumber {
- background-color: var(--color-auto-yellow-1, #fffbdd);
+ background-color: var(
+ --color-scale-yellow-1,
+ var(--color-auto-yellow-1, #fffbdd)
+ );
 }

source/features/show-associated-branch-prs-on-fork.css

@@ -17,9 +17,9 @@
 }
 
 .rgh-pr-link {
- color: var(--color-fg-muted);
+ color: var(--fgColor-muted, var(--color-fg-muted));
  align-items: center;
- border: solid 1px var(--color-border-default);
+ border: solid 1px var(--borderColor-default, var(--color-border-default));
  text-decoration: none !important;
  border-radius: 999px;
  display: inline-flex;
@@ -30,5 +30,5 @@
 }
 
 .rgh-pr-link:hover {
- background-color: var(--color-canvas-subtle);
+ background-color: var(--bgColor-muted, var(--color-canvas-subtle));
 }

source/features/sticky-csv-header.css

@@ -19,7 +19,8 @@
 }
 
 .markdown-body .csv-data tbody tr:last-child td:first-child {
- border-bottom: 1px solid var(--color-border-default);
+ border-bottom: 1px solid
+ var(--borderColor-default, var(--color-border-default));
 }
 
 /*

source/features/table-input.css

@@ -62,7 +62,10 @@
  ):has(~ :hover:nth-of-type(5n + 5))
  div {
  border-color: #79b8ff;
- background-color: var(--color-diff-blob-hunk-num-bg, #dbedff);
+ background-color: var(
+ --diffBlob-hunk-bgColor-num,
+ var(--color-diff-blob-hunk-num-bg, #dbedff)
+ );
 }
 
 /* https://github.com/refined-github/refined-github/issues/6515 */

source/github-helpers/heat-map.css

@@ -9,7 +9,7 @@
  color: color-mix(
  in srgb,
  var(--rgh-heat-color) 100%,
- var(--color-fg-muted)
+ var(--fgColor-muted, var(--color-fg-muted))
  ) !important;
 }
 
@@ -18,7 +18,7 @@
  color: color-mix(
  in srgb,
  var(--rgh-heat-color) 90%,
- var(--color-fg-muted)
+ var(--fgColor-muted, var(--color-fg-muted))
  ) !important;
 }
 
@@ -27,7 +27,7 @@
  color: color-mix(
  in srgb,
  var(--rgh-heat-color) 80%,
- var(--color-fg-muted)
+ var(--fgColor-muted, var(--color-fg-muted))
  ) !important;
 }
 
@@ -36,7 +36,7 @@
  color: color-mix(
  in srgb,
  var(--rgh-heat-color) 70%,
- var(--color-fg-muted)
+ var(--fgColor-muted, var(--color-fg-muted))
  ) !important;
 }
 
@@ -45,7 +45,7 @@
  color: color-mix(
  in srgb,
  var(--rgh-heat-color) 60%,
- var(--color-fg-muted)
+ var(--fgColor-muted, var(--color-fg-muted))
  ) !important;
 }
 
@@ -54,7 +54,7 @@
  color: color-mix(
  in srgb,
  var(--rgh-heat-color) 50%,
- var(--color-fg-muted)
+ var(--fgColor-muted, var(--color-fg-muted))
  ) !important;
 }
 
@@ -63,7 +63,7 @@
  color: color-mix(
  in srgb,
  var(--rgh-heat-color) 40%,
- var(--color-fg-muted)
+ var(--fgColor-muted, var(--color-fg-muted))
  ) !important;
 }
 
@@ -72,7 +72,7 @@
  color: color-mix(
  in srgb,
  var(--rgh-heat-color) 30%,
- var(--color-fg-muted)
+ var(--fgColor-muted, var(--color-fg-muted))
  ) !important;
 }
 
@@ -81,7 +81,7 @@
  color: color-mix(
  in srgb,
  var(--rgh-heat-color) 20%,
- var(--color-fg-muted)
+ var(--fgColor-muted, var(--color-fg-muted))
  ) !important;
 }
 
@@ -90,6 +90,6 @@
  color: color-mix(
  in srgb,
  var(--rgh-heat-color) 0%,
- var(--color-fg-muted)
+ var(--fgColor-muted, var(--color-fg-muted))
  ) !important;
 }

source/refined-github.css

@@ -53,7 +53,7 @@ https://github.com/notifications?query=reason%3Acomment (which is an unsaved fil
 
 /* Lighten deletions in Markdown */
 .markdown-body del {
- color: var(--color-fg-muted);
+ color: var(--fgColor-muted, var(--color-fg-muted));
 }
 
 /* Make <details> visibly clickable */
@@ -120,7 +120,10 @@ pr-branches
  right: 50%;
  transform: translate(50%, 50%);
  min-width: 380px; /* Avoids a width change on the last step which causes the YES button to be where NO was */
- box-shadow: var(--color-shadow-large, var(--color-toast-shadow));
+ box-shadow: var(
+ --shadow-floating-large,
+ var(--color-shadow-large, var(--color-toast-shadow))
+ );
  z-index: 2147483647;
 }