jekyll-v4-theme-primer 0.11.0 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9dfaa65c1e703bfefd7cd880fa28973cbeaf584cc4fef6532ec80b0b1f3bba37
-  data.tar.gz: 710b50250a5f34bc3aedebfa61b1dff84eb657cbd6bcc4810864172c8421c827
+  metadata.gz: 45c3c78fc424356151c29623de94840c9eb5e535d480af49a54c3b954f785cb6
+  data.tar.gz: 01100ce75f9fd4cf027f8b9e6b2c9062d1f19f9485736816ada3d4538fa6ee95
 SHA512:
-  metadata.gz: 67be39a05d096442a92f5a43383dd8f287d489c14464254136b18ec0d36e5a34a7f9b9e0b80382f1dd9521bb2ee1e963661abeffcc9435a9ca3914f6539ee2e5
-  data.tar.gz: 19526e26387f459a8baaf63589d3eb3fba90fed8bbe474898687894798f319f13ffa69c3359f817797f3bbe7c983d402b2d7186c6aa3bce5bb9d4d4c7a3a183f
+  metadata.gz: c60c2750089af7be8cc9210b635b1274f4eede726a09e07e097f71f50ad4c83ff05231ca9a8cc4a187e1f5bc38c1671fa505e952506259ee98027b2fbe9e40bc
+  data.tar.gz: a68ccc21a145ae64d8024d6d2c9e9ed82f418d534a64b9ae63c47069e74b7c7194de61c36d3213d49b8c8b778598333c88980539a0d6a3c2fbcd6cb36e94a5b8

data/README.md

@@ -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,7 +39,7 @@ 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:

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

@@ -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 */

data/_sass/@primer/css/core/index.scss

@@ -11,7 +11,6 @@
 // Color modes
 
 // Core modules
-@import '../actionlist/index.scss';
 @import '../base/index.scss';
 @import '../box/index.scss';
 @import '../breadcrumb/index.scss';

data/_sass/@primer/css/forms/form-group.scss

@@ -70,7 +70,8 @@
   }
 
   label {
-    position: relative;
+    // fix for chrome bug, see https://github.com/github/github/issues/53931
+    position: static;
   }
 
   &.flattened dt, // TODO: Deprecate

data/_sass/@primer/css/forms/index.scss

@@ -2,7 +2,6 @@
 @import './form-control.scss';
 @import './form-select.scss';
 @import './form-group.scss';
-@import './form-validation.scss';
 @import './input-group.scss';
 @import './radio-group.scss';
 // new pvc components

data/_sass/@primer/css/labels/index.scss

@@ -4,4 +4,3 @@
 @import './labels.scss';
 @import './states.scss';
 @import './counters.scss';
-@import './diffstat.scss';

data/_sass/@primer/css/layout/app-frame.scss

@@ -30,7 +30,7 @@
     width: 100%;
     padding: var(--base-size-16, 16px);
     background: var(--color-canvas-inset);
-    padding-block-end: calc(var(--base-size-16, 16px) - var(--primer-borderWidth-thin, 1px));
+    padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px));
     isolation: isolate;
     align-items: center;
     gap: var(--base-size-8, 8px);
@@ -67,7 +67,7 @@
       text-indent: var(--base-size-128, 128px);
       pointer-events: none;
       background: var(--color-border-default);
-      border-radius: var(--primer-borderRadius-full, 100vh);
+      border-radius: var(--borderRadius-full, 100vh);
     }
 
     &:focus {
@@ -75,17 +75,17 @@
       display: grid;
       width: auto;
       height: auto;
-      min-height: var(--primer-control-medium-size, 32px);
-      padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px);
+      min-height: var(--control-medium-size, 32px);
+      padding: 0 var(--control-medium-paddingInline-spacious, 16px);
       overflow: auto;
       color: var(--color-fg-on-emphasis);
       background: var(--color-accent-emphasis);
-      border-radius: var(--primer-borderRadius-full, 100vh);
+      border-radius: var(--borderRadius-full, 100vh);
       align-items: center;
 
       @media (pointer: coarse) {
         &::after {
-          @include minTouchTarget(var(--primer-control-minTarget-coarse, 44px));
+          @include minTouchTarget(var(--control-minTarget-coarse, 44px));
         }
       }
 

data/_sass/@primer/css/layout/stack.scss

@@ -25,7 +25,7 @@
   // │  ├─ &.Stack-item--expand-[ whenNarrow | whenRegular | whenWide ]
   // │  ├─ &.Stack-item--keepSize-[ whenNarrow | whenRegular | whenWide ]
 
-  $Stack-gap-default: var(--primer-stack-gap-normal, 16px);
+  $Stack-gap-default: var(--stack-gap-normal, 16px);
 
   --Stack-gap-whenRegular: #{$Stack-gap-default};
   --Stack-gap-whenNarrow: #{$Stack-gap-default};
@@ -65,18 +65,18 @@
   }
 
   .Stack--gap-condensed#{$viewportRange} {
-    --Stack-gap#{$viewportRange}: var(--primer-stack-gap-condensed, 8px);
+    --Stack-gap#{$viewportRange}: var(--stack-gap-condensed, 8px);
   }
 
   .Stack--gap-normal#{$viewportRange} {
-    --Stack-gap#{$viewportRange}: var(--primer-stack-gap-normal, 16px);
+    --Stack-gap#{$viewportRange}: var(--stack-gap-normal, 16px);
   }
 
   // There's no .Stack--gap-spacious-whenNarrow
   // Narrow viewports render `spacious` gap as `normal`
   @if $viewportRange != '-whenNarrow' {
     .Stack--gap-spacious#{$viewportRange} {
-      --Stack-gap#{$viewportRange}: var(--primer-stack-gap-spacious, 24px);
+      --Stack-gap#{$viewportRange}: var(--stack-gap-spacious, 24px);
     }
   }
 
@@ -161,14 +161,14 @@
 
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-divider,
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-item > .Stack-divider {
-    border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-block-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
     inline-size: auto;
     block-size: 0;
   }
 
   .Stack--dir-inline#{$viewportRange} > .Stack-divider,
   .Stack--dir-inline#{$viewportRange} > .Stack-item > .Stack-divider {
-    border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-inline-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
     inline-size: 0;
     block-size: auto;
   }

data/_sass/@primer/css/markdown/lists.scss

@@ -14,19 +14,19 @@
     }
   }
 
-  ol[type='a'] {
+  ol[type='a s'] {
     list-style-type: lower-alpha;
   }
 
-  ol[type='A'] {
+  ol[type='A s'] {
     list-style-type: upper-alpha;
   }
 
-  ol[type='i'] {
+  ol[type='i s'] {
     list-style-type: lower-roman;
   }
 
-  ol[type='I'] {
+  ol[type='I s'] {
     list-style-type: upper-roman;
   }
 

data/_sass/@primer/css/primitives/index.scss

@@ -1,10 +1,10 @@
-@import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size';
-@import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography';
+@import '@primer/primitives/tokens-next-private/css/base/size/size';
+@import '@primer/primitives/tokens-next-private/css/base/typography/typography';
+@import '@primer/primitives/tokens-next-private/css/functional/size/border';
+@import '@primer/primitives/tokens-next-private/css/functional/size/breakpoints';
+@import '@primer/primitives/tokens-next-private/css/functional/size/size-coarse';
+@import '@primer/primitives/tokens-next-private/css/functional/size/size-fine';
+@import '@primer/primitives/tokens-next-private/css/functional/size/size';
+@import '@primer/primitives/tokens-next-private/css/functional/size/viewport';
+@import '@primer/primitives/tokens-next-private/css/functional/typography/typography';
 @import './temp-typography-tokens.scss';

data/_sass/@primer/css/support/variables/misc.scss

@@ -4,7 +4,7 @@
 $border-width: 1px !default;
 $border-style: solid !default;
 $border: $border-width $border-style var(--color-border-default) !default;
-$border-rem: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !default;
+$border-rem: var(--borderWidth-thin, 1px) solid var(--color-border-default) !default;
 
 // Border Radius
 $border-radius-1:  4px !default;

data/_sass/@primer/css/utilities/borders.scss

@@ -31,11 +31,11 @@
     .border#{$variant}-left-0   { border-left: 0 !important; }
 
     // Rounded corners
-    .rounded#{$variant}   { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}   { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
     .rounded#{$variant}-0 { border-radius: 0 !important; }
-    .rounded#{$variant}-1 { border-radius: var(--primer-borderRadius-small, $border-radius-1) !important; }
-    .rounded#{$variant}-2 { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
-    .rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-large, $border-radius-3) !important; }
+    .rounded#{$variant}-1 { border-radius: var(--borderRadius-small, $border-radius-1) !important; }
+    .rounded#{$variant}-2 { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}-3 { border-radius: var(--borderRadius-large, $border-radius-3) !important; }
 
     @each $edge, $corners in $edges {
       .rounded#{$variant}-#{$edge}-0 {
@@ -46,19 +46,19 @@
 
       .rounded#{$variant}-#{$edge}-1 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-small, $border-radius-1) !important;
+          border-#{$corner}-radius: var(--borderRadius-small, $border-radius-1) !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-2 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-2) !important;
+          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-2) !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-3 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-3) !important;
+          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-3) !important;
         }
       }
     }
@@ -66,7 +66,7 @@
 }
 
 /* Add a 50% border-radius to make something into a circle */
-.circle { border-radius: var(--primer-borderRadius-full, 50%) !important; }
+.circle { border-radius: var(--borderRadius-full, 50%) !important; }
 
 /* Change the border style to dashed, in conjunction with another utility */
 .border-dashed {

data/_sass/@primer/css/utilities/visibility-display.scss

@@ -107,17 +107,18 @@
 
 // Only display content on focus
 .show-on-focus {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+
+  &:not(:focus) {
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    border: 0 !important;
+  }
 
   &:focus {
     z-index: 999;
-    width: auto;
-    height: auto;
-    clip: auto;
   }
 }