RubyGems - jekyll-v4-theme-primer - Versions diffs - 0.11.0 → 0.13.0 - Mend

jekyll-v4-theme-primer 0.11.0 → 0.13.0

Files changed (263) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9dfaa65c1e703bfefd7cd880fa28973cbeaf584cc4fef6532ec80b0b1f3bba37
-  data.tar.gz: 710b50250a5f34bc3aedebfa61b1dff84eb657cbd6bcc4810864172c8421c827
+  metadata.gz: f2c3a3105dc3f9a7334189e5b1e04e4d07d07f3d1fd225fb5b8d8423b566cc9d
+  data.tar.gz: 01b63cd73216f49db5a8e54e4a9fd73e8682100fde79d27583b5bd66da148e91
 SHA512:
-  metadata.gz: 67be39a05d096442a92f5a43383dd8f287d489c14464254136b18ec0d36e5a34a7f9b9e0b80382f1dd9521bb2ee1e963661abeffcc9435a9ca3914f6539ee2e5
-  data.tar.gz: 19526e26387f459a8baaf63589d3eb3fba90fed8bbe474898687894798f319f13ffa69c3359f817797f3bbe7c983d402b2d7186c6aa3bce5bb9d4d4c7a3a183f
+  metadata.gz: e6c61ea66e138ac89619c640f8c83739d781cbcc181d3edaa1eb71b7bfb070e21fafc6ded70f97f3b627301fe2dd81b1adeee354d4a177a0a21e72ecf32c789b
+  data.tar.gz: 83c6de13d3bcf07b0bcf89cc7f39c5b5b859240ec00c3c56769601b2a1a2c61d63e3e956a3adbe1035b6e4ebc063e8884ddec742bd4d213d66ce6cf913993210

data/README.md CHANGED Viewed

@@ -2,7 +2,10 @@
 [![.github/workflows/ci.yaml](https://github.com/dunkmann00/primer/actions/workflows/ci.yaml/badge.svg)](https://github.com/dunkmann00/primer/actions/workflows/ci.yaml) [![Gem Version](https://badge.fury.io/rb/jekyll-v4-theme-primer.svg)](https://badge.fury.io/rb/jekyll-v4-theme-primer)
-*Primer is a Jekyll theme for GitHub Pages. You can [preview the theme to see what it looks like](https://georgeh2os.com/primer), or even [use it today](#usage).*
+*Primer is a Jekyll theme for GitHub Pages. You can [preview the theme to see what it looks like](https://www.georgeh2os.com/primer/), or even [use it today](#usage).*
+**This theme is not an official theme for Github Pages**. This is a fork of the original `primer` theme that I have
+modified to support Jekyll v4 and a newer version of [Primer CSS](https://primer.style/css/).
 ## Usage
@@ -12,7 +15,7 @@ To use the Primer theme:
 1. Add the following to your site's `_config.yml`:
     ```yml
-    remote_theme: dunkmann00/primer@v0.9.0
+    remote_theme: dunkmann00/primer@v0.12.0
     plugins:
     - jekyll-remote-theme # add this line to the plugins list if you already have one
     ```
@@ -36,13 +39,22 @@ To use the Primer theme:
 Primer will set the theme based on the theme value set in `_config.yml`. This
 can be overridden on a per page basis by setting a `theme` variable in the
-page's frontmatter. If neither is given, the default theme is used.
+page's frontmatter. If neither is given, the default theme (`auto`) is used.
 ```yml
 primer:
   theme: light
 ```
+Primer will not include the site title on the home page if the `home_heading`
+value is set to false in the `_config.yml`. This can be useful when you already
+include the title in the content on the home page, making it redundant.
+```yml
+primer:
+  home_heading: false
+```
 Primer will respect the following variables, if set in your site's `_config.yml`:
 ```yml
@@ -57,6 +69,15 @@ show_downloads: ["true" or "false" (unquoted) to indicate whether to provide a d
 google_analytics: [Your Google Analytics tracking ID]
 ```
+### Code block copy button
+Primer will automatically put a code copy button in any code blocks you write.
+This is similar to the behavior seen in Readmes on GitHub.
+```bash
+echo "Hello World"
+```
 ### Stylesheet
 If you'd like to add your own custom styles:

data/_layouts/default.html CHANGED Viewed

@@ -11,9 +11,10 @@
   </head>
   <body>
     <div class="container-lg px-3 my-5 markdown-body">
-      {% if site.title and site.title != page.title %}
+      {% capture heading %}{% if page.layout == "home" and site.primer.home_heading == false %}false{% else %}true{% endif %}{% endcapture -%}
+      {% if site.title and site.title != page.title and heading == "true" %}
       <h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
-      {% endif %}
+      {%- endif %}
       {{ content }}
@@ -25,5 +26,6 @@
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
     <script>anchors.add();</script>
+    <script type="module" src="{{ "/assets/js/primer-clipboard-copy.js?v=" | append: site.github.build_revision | relative_url }}"></script>
   </body>
 </html>

data/_sass/@primer/css/autocomplete/suggester.scss CHANGED Viewed

@@ -11,20 +11,20 @@
   margin-top: $spacer-4;
   list-style: none;
   cursor: pointer;
-  background: var(--color-canvas-overlay);
-  border: $border-width $border-style var(--color-border-default);
+  background: var(--overlay-bgColor, var(--color-canvas-overlay));
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
   border-radius: $border-radius;
-  box-shadow: var(--color-shadow-medium);
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
   li {
     display: block;
     padding: $spacer-1 $spacer-2;
     font-weight: $font-weight-semibold;
-    border-bottom: $border-width $border-style var(--color-border-muted);
+    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
     small {
       font-weight: $font-weight-normal;
-      color: var(--color-fg-muted);
+      color: var(--fgColor-muted, var(--color-fg-muted));
     }
     &:last-child {
@@ -39,12 +39,12 @@
     }
     &:hover {
-      color: var(--color-fg-on-emphasis);
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       text-decoration: none;
-      background: var(--color-accent-emphasis);
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
       small {
-        color: var(--color-fg-on-emphasis);
+        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       }
       .octicon {
@@ -54,12 +54,12 @@
     &[aria-selected='true'],
     &.navigation-focus {
-      color: var(--color-fg-on-emphasis);
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       text-decoration: none;
-      background: var(--color-accent-emphasis);
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
       small {
-        color: var(--color-fg-on-emphasis);
+        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       }
       .octicon {

data/_sass/@primer/css/avatars/avatar-parent-child.scss CHANGED Viewed

@@ -10,8 +10,8 @@
   position: absolute;
   right: -15%;
   bottom: -9%;
-  background-color: var(--color-canvas-default); // For transparent backgrounds
+  background-color: var(--bgColor-default, var(--color-canvas-default)); // For transparent backgrounds
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius-1;
-  box-shadow: var(--color-avatar-child-shadow);
+  box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow));
 }

data/_sass/@primer/css/avatars/circle-badge.scss CHANGED Viewed

@@ -4,9 +4,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   border-radius: 50%;
-  box-shadow: var(--color-shadow-medium);
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
 }
 .CircleBadge-icon {
@@ -46,7 +46,7 @@
     width: 100%;
     content: '';
     // stylelint-disable-next-line primer/borders
-    border-bottom: 2px dashed var(--color-border-default);
+    border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default));
   }
   .CircleBadge {

data/_sass/@primer/css/base/base.scss CHANGED Viewed

@@ -16,12 +16,12 @@ body {
   font-family: $body-font;
   font-size: var(--body-font-size, $body-font-size);
   line-height: $body-line-height;
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
 }
 a {
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
   text-decoration: none;
   &:hover {
@@ -46,7 +46,7 @@ label {
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
-  color: var(--color-fg-subtle);
+  color: var(--fgColor-muted, var(--color-fg-subtle));
   opacity: 1; // override opacity in normalize.css
 }
@@ -61,7 +61,7 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
   @include clearfix();
 }

data/_sass/@primer/css/base/kbd.scss CHANGED Viewed

@@ -7,13 +7,13 @@ kbd {
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography
   line-height: 10px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   // stylelint-disable-next-line primer/borders
-  border: $border-style $border-width var(--color-neutral-muted);
-  border-bottom-color: var(--color-neutral-muted);
+  border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted));
+  border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted));
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
+  box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted));
 }

data/_sass/@primer/css/base/normalize.scss CHANGED Viewed

@@ -7,6 +7,7 @@
  */
 html {
+  font-size: 16px; /* this can be removed when all of GitHub uses rem units */
   font-family: sans-serif; /* 1 */
   -ms-text-size-adjust: 100%; /* 2 */
   -webkit-text-size-adjust: 100%; /* 2 */
@@ -152,8 +153,8 @@ h1 {
  */
 mark {
-  background-color: var(--color-attention-subtle);
-  color: var(--color-fg-default);
+  background-color: var(--bgColor-attention-muted, var(--color-attention-subtle));
+  color: var(--fgColor-default, var(--color-fg-default));
 }
 /**

data/_sass/@primer/css/box/box-overlay.scss CHANGED Viewed

@@ -3,9 +3,9 @@
   width: 448px;
   margin-right: auto;
   margin-left: auto;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   background-clip: padding-box;
-  border-color: var(--color-border-default);
+  border-color: var(--borderColor-default, var(--color-border-default));
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
@@ -36,7 +36,7 @@
   .help {
     padding-top: $spacer-2;
     margin: 0;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     text-align: center;
   }
 }

data/_sass/@primer/css/branch-name/branch-name.scss CHANGED Viewed

@@ -7,25 +7,25 @@
   // stylelint-disable-next-line primer/spacing
   padding: 2px 6px;
   font: 12px $mono-font;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   word-break: break-all;
-  background-color: var(--color-accent-subtle);
+  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
   border-radius: $border-radius;
   .octicon {
     // stylelint-disable-next-line primer/spacing
     margin: 1px -2px 0 0;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
   }
 }
 // When a branch name is a link
 a.branch-name {
-  color: var(--color-accent-fg);
-  background-color: var(--color-accent-subtle);
+  color: var(--fgColor-accent, var(--color-accent-fg));
+  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
   .octicon {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
   }
 }

data/_sass/@primer/css/buttons/button.scss CHANGED Viewed

@@ -36,7 +36,7 @@
   .octicon {
     margin-right: $spacer-1;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     vertical-align: text-bottom;
     &:only-child {
@@ -50,7 +50,7 @@
     color: inherit;
     text-shadow: none;
     vertical-align: top;
-    background-color: var(--color-btn-counter-bg);
+    background-color: var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg));
   }
   .dropdown-caret {
@@ -62,42 +62,42 @@
 // Default button
 .btn {
-  color: var(--color-btn-text);
-  background-color: var(--color-btn-bg);
-  border-color: var(--color-btn-border);
-  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+  color: var(--button-default-fgColor-rest, var(--color-btn-text));
+  background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
+  border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
+  box-shadow: var(--button-default-shadow-resting, var(--color-btn-shadow)), var(--button-default-shadow-inset, var(--color-btn-inset-shadow));
   transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
   transition-property: color, background-color, box-shadow, border-color;
   &:hover,
   &.hover,
   [open] > & {
-    background-color: var(--color-btn-hover-bg);
-    border-color: var(--color-btn-hover-border);
+    background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
+    border-color: var(--button-default-borderColor-hover, var(--color-btn-hover-border));
     transition-duration: 0.1s;
   }
   &:active {
-    background-color: var(--color-btn-active-bg);
-    border-color: var(--color-btn-active-border);
+    background-color: var(--button-default-bgColor-active, var(--color-btn-active-bg));
+    border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
     transition: none;
   }
   &.selected,
   &[aria-selected='true'] {
-    background-color: var(--color-btn-selected-bg);
-    box-shadow: var(--color-primer-shadow-inset);
+    background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
+    box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
   }
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-btn-bg);
-    border-color: var(--color-btn-border);
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
+    border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
     .octicon {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     }
   }
 }
@@ -105,16 +105,16 @@
 // Primary button
 .btn-primary {
-  color: var(--color-btn-primary-text);
-  background-color: var(--color-btn-primary-bg);
-  border-color: var(--color-btn-primary-border);
-  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+  color: var(--button-primary-fgColor-rest, var(--color-btn-primary-text));
+  background-color: var(--button-primary-bgColor-rest, var(--color-btn-primary-bg));
+  border-color: var(--button-primary-borderColor-rest, var(--color-btn-primary-border));
+  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));
   &:hover,
   &.hover,
   [open] > & {
-    background-color: var(--color-btn-primary-hover-bg);
-    border-color: var(--color-btn-primary-hover-border);
+    background-color: var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg));
+    border-color: var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border));
   }
   // fallback :focus state
@@ -136,29 +136,29 @@
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    background-color: var(--color-btn-primary-selected-bg);
-    box-shadow: var(--color-btn-primary-selected-shadow);
+    background-color: var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg));
+    box-shadow: var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow));
   }
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--color-btn-primary-disabled-text);
-    background-color: var(--color-btn-primary-disabled-bg);
-    border-color: var(--color-btn-primary-disabled-border);
+    color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
+    background-color: var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg));
+    border-color: var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border));
     .octicon {
-      color: var(--color-btn-primary-disabled-text);
+      color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
     }
   }
   .Counter {
     color: inherit;
-    background-color: var(--color-btn-primary-counter-bg);
+    background-color: var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg));
   }
   .octicon {
-    color: var(--color-btn-primary-icon);
+    color: var(--button-primary-iconColor-rest, var(--color-btn-primary-icon));
   }
 }
@@ -185,17 +185,17 @@ a.btn-primary {
 // Outline button
 .btn-outline {
-  color: var(--color-btn-outline-text);
+  color: var(--button-outline-fgColor-rest, var(--color-btn-outline-text));
   &:hover,
   [open] > & {
-    color: var(--color-btn-outline-hover-text);
-    background-color: var(--color-btn-outline-hover-bg);
-    border-color: var(--color-btn-outline-hover-border);
-    box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
+    color: var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text));
+    background-color: var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg));
+    border-color: var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border));
+    box-shadow: var(--shadow-resting-small, var(--color-btn-outline-hover-shadow)), var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow));
     .Counter {
-      background-color: var(--color-btn-outline-hover-counter-bg);
+      background-color: var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg));
     }
     .octicon {
@@ -206,10 +206,10 @@ a.btn-primary {
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    color: var(--color-btn-outline-selected-text);
-    background-color: var(--color-btn-outline-selected-bg);
-    border-color: var(--color-btn-outline-selected-border);
-    box-shadow: var(--color-btn-outline-selected-shadow);
+    color: var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text));
+    background-color: var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg));
+    border-color: var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border));
+    box-shadow: var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow));
     // fallback :focus state
     &:focus {
@@ -231,76 +231,76 @@ a.btn-primary {
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--color-btn-outline-disabled-text);
-    background-color: var(--color-btn-outline-disabled-bg);
-    border-color: var(--color-btn-border);
+    color: var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text));
+    background-color: var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg));
+    border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
     box-shadow: none;
     .Counter {
-      background-color: var(--color-btn-outline-disabled-counter-bg);
+      background-color: var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg));
     }
   }
   .Counter {
     color: inherit;
-    background-color: var(--color-btn-outline-counter-bg);
+    background-color: var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg));
   }
 }
 // Danger button
 .btn-danger {
-  color: var(--color-btn-danger-text);
+  color: var(--button-danger-fgColor-rest, var(--color-btn-danger-text));
   .octicon {
-    color: var(--color-btn-danger-icon);
+    color: var(--button-danger-iconColor-rest, var(--color-btn-danger-icon));
   }
   &:hover,
   [open] > & {
-    color: var(--color-btn-danger-hover-text);
-    background-color: var(--color-btn-danger-hover-bg);
-    border-color: var(--color-btn-danger-hover-border);
-    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+    color: var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text));
+    background-color: var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg));
+    border-color: var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border));
+    box-shadow: var(--shadow-resting-small, var(--color-btn-danger-hover-shadow)), var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow));
     .Counter {
-      background-color: var(--color-btn-danger-hover-counter-bg);
+      background-color: var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg));
     }
     .octicon {
-      color: var(--color-btn-danger-hover-icon);
+      color: var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon));
     }
   }
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    color: var(--color-btn-danger-selected-text);
-    background-color: var(--color-btn-danger-selected-bg);
-    border-color: var(--color-btn-danger-selected-border);
-    box-shadow: var(--color-btn-danger-selected-shadow);
+    color: var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text));
+    background-color: var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg));
+    border-color: var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border));
+    box-shadow: var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow));
   }
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--color-btn-danger-disabled-text);
-    background-color: var(--color-btn-danger-disabled-bg);
-    border-color: var(--color-btn-border);
+    color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
+    background-color: var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg));
+    border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
     box-shadow: none;
     .Counter {
-      background-color: var(--color-btn-danger-disabled-counter-bg);
+      background-color: var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg));
     }
     .octicon {
-      color: var(--color-btn-danger-disabled-text);
+      color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
     }
   }
   .Counter {
     color: inherit;
-    background-color: var(--color-btn-danger-counter-bg);
+    background-color: var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg));
   }
 }