jekyll-v4-theme-primer 0.11.0 → 0.13.0

data/_sass/@primer/css/tooltips/tooltips.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable primer/spacing */
+
 .tooltipped {
   position: relative;
 }
@@ -7,10 +9,10 @@
   position: absolute;
   z-index: 1000000;
   display: none;
-  padding: $em-spacer-5 $em-spacer-6;
-  font: normal normal 11px/1.5 $body-font;
+  padding: var(--overlay-paddingBlock-condensed, 0.25rem) var(--overlay-padding-condensed, 0.5rem);
+  font: var(--text-body-shorthand-small, normal normal 11px/1.5 $body-font);
   -webkit-font-smoothing: subpixel-antialiased;
-  color: var(--color-fg-on-emphasis);
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
   text-align: center;
   text-decoration: none;
   text-shadow: none;
@@ -20,23 +22,9 @@
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: var(--color-neutral-emphasis-plus);
-  border-radius: $border-radius;
-  opacity: 0;
-}
-
-// This is the tooltip arrow
-.tooltipped::before {
-  position: absolute;
-  z-index: 1000001;
-  display: none;
-  width: 0;
-  height: 0;
-  color: var(--color-neutral-emphasis-plus);
-  pointer-events: none;
-  content: '';
+  background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   // stylelint-disable-next-line primer/borders
-  border: 6px $border-style transparent;
+  border-radius: var(--borderRadius-medium);
   opacity: 0;
 }
 
@@ -63,7 +51,6 @@
     animation-duration: $tooltip-duration;
     animation-fill-mode: forwards;
     animation-timing-function: ease-in;
-    animation-delay: $tooltip-delay;
   }
 }
 
@@ -91,18 +78,8 @@
   &::after {
     top: 100%;
     right: 50%;
-    // stylelint-disable-next-line primer/spacing
     margin-top: 6px;
   }
-
-  &::before {
-    top: auto;
-    right: 50%;
-    bottom: -7px;
-    // stylelint-disable-next-line primer/spacing
-    margin-right: -6px;
-    border-bottom-color: var(--color-neutral-emphasis-plus);
-  }
 }
 
 .tooltipped-se {
@@ -124,18 +101,8 @@
   &::after {
     right: 50%;
     bottom: 100%;
-    // stylelint-disable-next-line primer/spacing
     margin-bottom: 6px;
   }
-
-  &::before {
-    top: -7px;
-    right: 50%;
-    bottom: auto;
-    // stylelint-disable-next-line primer/spacing
-    margin-right: -6px;
-    border-top-color: var(--color-neutral-emphasis-plus);
-  }
 }
 
 .tooltipped-ne {
@@ -161,19 +128,9 @@
   &::after {
     right: 100%;
     bottom: 50%;
-    // stylelint-disable-next-line primer/spacing
     margin-right: 6px;
     transform: translateY(50%);
   }
-
-  &::before {
-    top: 50%;
-    bottom: 50%;
-    left: -7px;
-    // stylelint-disable-next-line primer/spacing
-    margin-top: -6px;
-    border-left-color: var(--color-neutral-emphasis-plus);
-  }
 }
 
 // tooltipped to the right
@@ -181,19 +138,9 @@
   &::after {
     bottom: 50%;
     left: 100%;
-    // stylelint-disable-next-line primer/spacing
     margin-left: 6px;
     transform: translateY(50%);
   }
-
-  &::before {
-    top: 50%;
-    right: -7px;
-    bottom: 50%;
-    // stylelint-disable-next-line primer/spacing
-    margin-top: -6px;
-    border-right-color: var(--color-neutral-emphasis-plus);
-  }
 }
 
 // Tooltip align right and left
@@ -218,7 +165,7 @@
 }
 
 .tooltipped-align-left-1,
-.tooltipped-align-left-2, {
+.tooltipped-align-left-2 {
   &::after {
     left: 0;
     margin-left: 0;
@@ -245,7 +192,7 @@
 .tooltipped-multiline {
   &::after {
     width: max-content;
-    max-width: $tooltip-max-width;
+    max-width: var(--overlay-width-small, 20rem);
     word-wrap: break-word;
     white-space: pre-line;
     border-collapse: separate;

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

@@ -1,5 +1,5 @@
 // Core border utilities
-// stylelint-disable block-opening-brace-space-before, primer/borders
+// stylelint-disable primer/borders
 
 /* Add a gray border to the left and right */
 .border-x {
@@ -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/box-shadow.scss

@@ -3,19 +3,23 @@
 // Box shadows
 
 .color-shadow-small {
-  box-shadow: var(--color-shadow-small) !important;
+  box-shadow: var(--shadow-resting-small, var(--color-shadow-small)) !important;
 }
 
 .color-shadow-medium {
-  box-shadow: var(--color-shadow-medium) !important;
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)) !important;
 }
 
 .color-shadow-large {
-  box-shadow: var(--color-shadow-large) !important;
+  box-shadow: var(--shadow-floating-large, var(--color-shadow-large)) !important;
 }
 
 .color-shadow-extra-large {
-  box-shadow: var(--color-shadow-extra-large) !important;
+  box-shadow: var(--shadow-floating-xlarge, var(--color-shadow-extra-large)) !important;
+}
+
+.shadow-floating-small {
+  box-shadow: var(--shadow-floating-small, var(--color-overlay-shadow)) !important;
 }
 
 // Turn off box shadow

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

@@ -1,95 +1,94 @@
-// stylelint-disable block-opening-brace-space-before
 
 // Foreground
 
-.color-fg-default     { color: var(--color-fg-default) !important; }
-.color-fg-muted       { color: var(--color-fg-muted) !important; }
-.color-fg-subtle      { color: var(--color-fg-subtle) !important; }
+.color-fg-default, .fgColor-default     { color: var(--fgColor-default, var(--color-fg-default)) !important; }
+.color-fg-muted, .fgColor-muted      { color: var(--fgColor-muted, var(--color-fg-muted)) !important; }
+.color-fg-subtle      { color: var(--fgColor-muted, var(--color-fg-subtle)) !important; }
 
-.color-fg-accent    { color: var(--color-accent-fg) !important; }
-.color-fg-success   { color: var(--color-success-fg) !important; }
-.color-fg-attention { color: var(--color-attention-fg) !important; }
-.color-fg-severe    { color: var(--color-severe-fg) !important; }
-.color-fg-danger    { color: var(--color-danger-fg) !important; }
-.color-fg-open      { color: var(--color-open-fg) !important; }
-.color-fg-closed    { color: var(--color-closed-fg) !important; }
-.color-fg-done      { color: var(--color-done-fg) !important; }
-.color-fg-sponsors  { color: var(--color-sponsors-fg) !important; }
+.color-fg-accent, .fgColor-accent    { color: var(--fgColor-accent, var(--color-accent-fg)) !important; }
+.color-fg-success, .fgColor-success   { color: var(--fgColor-success, var(--color-success-fg)) !important; }
+.color-fg-attention, .fgColor-attention { color: var(--fgColor-attention, var(--color-attention-fg)) !important; }
+.color-fg-severe, .fgColor-severe    { color: var(--fgColor-severe, var(--color-severe-fg)) !important; }
+.color-fg-danger, .fgColor-danger    { color: var(--fgColor-danger, var(--color-danger-fg)) !important; }
+.color-fg-open, .fgColor-open      { color: var(--fgColor-open, var(--color-open-fg)) !important; }
+.color-fg-closed, .fgColor-closed    { color: var(--fgColor-closed, var(--color-closed-fg)) !important; }
+.color-fg-done, .fgColor-done      { color: var(--fgColor-done, var(--color-done-fg)) !important; }
+.color-fg-sponsors, .fgColor-sponsors  { color: var(--fgColor-sponsors, var(--color-sponsors-fg)) !important; }
 
-.color-fg-on-emphasis { color: var(--color-fg-on-emphasis) !important; }
+.color-fg-on-emphasis, .fgColor-onEmphasis { color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important; }
 
 // Background
 
-.color-bg-default  { background-color: var(--color-canvas-default) !important; }
-.color-bg-overlay  { background-color: var(--color-canvas-overlay) !important; }
-.color-bg-inset    { background-color: var(--color-canvas-inset) !important; }
-.color-bg-subtle   { background-color: var(--color-canvas-subtle) !important; }
-.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; }
+.color-bg-default, .bgColor-default  { background-color: var(--bgColor-default, var(--color-canvas-default)) !important; }
+.color-bg-overlay  { background-color: var(--overlay-bgColor, var(--color-canvas-overlay)) !important; }
+.color-bg-inset, .bgColor-inset    { background-color: var(--bgColor-inset, var(--color-canvas-inset)) !important; }
+.color-bg-subtle, .bgColor-muted   { background-color: var(--bgColor-muted, var(--color-canvas-subtle)) !important; }
+.color-bg-emphasis, .bgColor-emphasis { background-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important; }
 
-.color-bg-accent          { background-color: var(--color-accent-subtle) !important; }
-.color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; }
+.color-bg-accent, .bgColor-accent-muted          { background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)) !important; }
+.color-bg-accent-emphasis, .bgColor-accent-emphasis { background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
 
-.color-bg-success          { background-color: var(--color-success-subtle) !important; }
-.color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; }
+.color-bg-success, .bgColor-success-muted          { background-color: var(--bgColor-success-muted, var(--color-success-subtle)) !important; }
+.color-bg-success-emphasis, .bgColor-success-emphasis { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis)) !important; }
 
-.color-bg-attention          { background-color: var(--color-attention-subtle) !important; }
-.color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; }
+.color-bg-attention, .bgColor-attention-muted          { background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)) !important; }
+.color-bg-attention-emphasis, .bgColor-attention-emphasis { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
 
-.color-bg-severe          { background-color: var(--color-severe-subtle) !important; }
-.color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; }
+.color-bg-severe, .bgColor-severe-muted          { background-color: var(--bgColor-severe-muted, var(--color-severe-subtle)) !important; }
+.color-bg-severe-emphasis, .bgColor-severe-emphasis { background-color: var(--bgColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
 
-.color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
-.color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
+.color-bg-danger, .bgColor-danger-muted          { background-color: var(--bgColor-danger-muted, var(--color-danger-subtle)) !important; }
+.color-bg-danger-emphasis, .bgColor-danger-emphasis { background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
 
-.color-bg-open          { background-color: var(--color-open-subtle) !important; }
-.color-bg-open-emphasis { background-color: var(--color-open-emphasis) !important; }
+.color-bg-open, .bgColor-open-muted          { background-color: var(--bgColor-open-muted, var(--color-open-subtle)) !important; }
+.color-bg-open-emphasis, .bgColor-open-emphasis { background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis)) !important; }
 
-.color-bg-closed          { background-color: var(--color-closed-subtle) !important; }
-.color-bg-closed-emphasis { background-color: var(--color-closed-emphasis) !important; }
+.color-bg-closed, .bgColor-closed-muted          { background-color: var(--bgColor-closed-muted, var(--color-closed-subtle)) !important; }
+.color-bg-closed-emphasis, .bgColor-closed-emphasis { background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
 
-.color-bg-done          { background-color: var(--color-done-subtle) !important; }
-.color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
+.color-bg-done, .bgColor-done-muted          { background-color: var(--bgColor-done-muted, var(--color-done-subtle)) !important; }
+.color-bg-done-emphasis, .bgColor-done-emphasis { background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis)) !important; }
 
-.color-bg-sponsors          { background-color: var(--color-sponsors-subtle) !important; }
-.color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
+.color-bg-sponsors, .bgColor-sponsors-muted          { background-color: var(--bgColor-sponsors-muted, var(--color-sponsors-subtle)) !important; }
+.color-bg-sponsors-emphasis, .bgColor-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
-.color-bg-transparent { background-color: transparent !important; }
+.color-bg-transparent, .bgColor-transparent { background-color: transparent !important; }
 
 // Border
 
-.color-border-default { border-color: var(--color-border-default) !important; }
-.color-border-muted   { border-color: var(--color-border-muted) !important; }
-.color-border-subtle  { border-color: var(--color-border-subtle) !important; }
+.color-border-default, .borderColor-default { border-color: var(--borderColor-default, var(--color-border-default)) !important; }
+.color-border-muted, .borderColor-muted   { border-color: var(--borderColor-muted, var(--color-border-muted)) !important; }
+.color-border-subtle  { border-color: var(--borderColor-muted, var(--color-border-subtle)) !important; }
 
-.color-border-accent          { border-color: var(--color-accent-muted) !important; }
-.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }
+.color-border-accent, .borderColor-accent-muted          { border-color: var(--borderColor-accent-muted, var(--color-accent-muted)) !important; }
+.color-border-accent-emphasis, .borderColor-accent-emphasis { border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
 
-.color-border-success          { border-color: var(--color-success-muted) !important; }
-.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; }
+.color-border-success, .borderColor-success-muted          { border-color: var(--borderColor-success-muted, var(--color-success-muted)) !important; }
+.color-border-success-emphasis, .borderColor-success-emphasis { border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important; }
 
-.color-border-attention          { border-color: var(--color-attention-muted) !important; }
-.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; }
+.color-border-attention, .borderColor-attention-muted          { border-color: var(--borderColor-attention-muted, var(--color-attention-muted)) !important; }
+.color-border-attention-emphasis, .borderColor-attention-emphasis { border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
 
-.color-border-severe          { border-color: var(--color-severe-muted) !important; }
-.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; }
+.color-border-severe, .borderColor-severe-muted          { border-color: var(--borderColor-severe-muted, var(--color-severe-muted)) !important; }
+.color-border-severe-emphasis, .borderColor-severe-emphasis { border-color: var(--borderColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
 
-.color-border-danger          { border-color: var(--color-danger-muted) !important; }
-.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
+.color-border-danger, .borderColor-danger-muted          { border-color: var(--borderColor-danger-muted, var(--color-danger-muted)) !important; }
+.color-border-danger-emphasis, .borderColor-danger-emphasis { border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
 
-.color-border-open          { border-color: var(--color-open-muted) !important; }
-.color-border-open-emphasis { border-color: var(--color-open-emphasis) !important; }
+.color-border-open, .borderColor-open-muted          { border-color: var(--borderColor-open-muted, var(--color-open-muted)) !important; }
+.color-border-open-emphasis, .borderColor-open-emphasis { border-color: var(--borderColor-open-emphasis, var(--color-open-emphasis)) !important; }
 
-.color-border-closed          { border-color: var(--color-closed-muted) !important; }
-.color-border-closed-emphasis { border-color: var(--color-closed-emphasis) !important; }
+.color-border-closed, .borderColor-closed-muted          { border-color: var(--borderColor-closed-muted, var(--color-closed-muted)) !important; }
+.color-border-closed-emphasis, .borderColor-closed-emphasis { border-color: var(--borderColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
 
-.color-border-done          { border-color: var(--color-done-muted) !important; }
-.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }
+.color-border-done, .borderColor-done-muted          { border-color: var(--borderColor-done-muted, var(--color-done-muted)) !important; }
+.color-border-done-emphasis, .borderColor-done-emphasis { border-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)) !important; }
 
-.color-border-sponsors          { border-color: var(--color-sponsors-muted) !important; }
-.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; }
+.color-border-sponsors, .borderColor-sponsors-muted          { border-color: var(--borderColor-sponsors-muted, var(--color-sponsors-muted)) !important; }
+.color-border-sponsors-emphasis, .borderColor-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
 // Misc
 
-.color-fg-inherit {
+.color-fg-inherit, .fgColor-inherit {
   color: inherit !important;
 }

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

@@ -15,7 +15,7 @@
 
 .details-overlay-dark[open] > summary::before {
   z-index: 111;
-  background: var(--color-primer-canvas-backdrop);
+  background: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
 }
 
 .details-reset {

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

@@ -1,5 +1,4 @@
 // Flex utility classes
-// stylelint-disable block-opening-brace-space-before
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     // Flexbox classes

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

@@ -1,5 +1,5 @@
 // Layout
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
+// stylelint-disable comment-empty-line-before
 
 /* Position */
 @each $breakpoint, $variant in $responsive-variants {
@@ -71,13 +71,15 @@
 // Width and height utilities, helpful in combination
 // with display-table utilities and images
 /* Max width 100% */
-.width-fit   { max-width: 100% !important; }
+.width-fit         { max-width: 100% !important; }
 /* Set the width to 100% */
-.width-full  { width: 100% !important; }
+.width-full        { width: 100% !important; }
+/* Set the max-width to 65 characters */
+.width-comfortable { max-width: 65ch !important; }
 /* Max height 100% */
-.height-fit  { max-height: 100% !important; }
+.height-fit        { max-height: 100% !important; }
 /* Set the height to 100% */
-.height-full { height: 100% !important; }
+.height-full       { height: 100% !important; }
 
 /* Remove min-width from element */
 .min-width-0 { min-width: 0 !important; }

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

@@ -1,6 +1,4 @@
 // Margin spacer utilities
-// stylelint-disable block-opening-brace-space-before
-// stylelint-disable declaration-colon-space-before
 // stylelint-disable comment-empty-line-before
 // stylelint-disable primer/spacing
 

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

@@ -1,5 +1,4 @@
 // Padding spacer utilities
-// stylelint-disable block-opening-brace-space-before
 // stylelint-disable comment-empty-line-before
 // stylelint-disable primer/spacing
 

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

@@ -66,7 +66,7 @@
 .h4,
 .h5,
 .h6 {
-  font-weight: var(--base-text-weight-semibold, $font-weight-bold) !important;
+  font-weight: $font-weight-bold !important;
 }
 
 // Type utilities that match type sale
@@ -120,7 +120,7 @@
 /* Set the font size to 40px and weight to light */
 .f00-light {
   font-size: var(--h00-size-mobile, $h00-size-mobile) !important;
-  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
+  font-weight: $font-weight-light !important;
 
   @include breakpoint(md) {
     font-size: var(--h00-size, $h00-size) !important;
@@ -130,7 +130,7 @@
 /* Set the font size to 32px and weight to light */
 .f0-light {
   font-size: var(--h0-size-mobile, $h0-size-mobile) !important;
-  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
+  font-weight: $font-weight-light !important;
 
   @include breakpoint(md) {
     font-size: var(--h0-size, $h0-size) !important;
@@ -140,7 +140,7 @@
 /* Set the font size to 26px and weight to light */
 .f1-light {
   font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
-  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
+  font-weight: $font-weight-light !important;
 
   @include breakpoint(md) {
     font-size: var(--h1-size, $h1-size) !important;
@@ -150,7 +150,7 @@
 /* Set the font size to 22px and weight to light */
 .f2-light {
   font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
-  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
+  font-weight: $font-weight-light !important;
 
   @include breakpoint(md) {
     font-size: var(--h2-size, $h2-size) !important;
@@ -161,7 +161,7 @@
 /* Set the font size to 18px and weight to light */
 .f3-light {
   font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
-  font-weight: var(--base-text-weight-light, $font-weight-light) !important;
+  font-weight: $font-weight-light !important;
 
   @include breakpoint(md) {
     font-size: var(--h3-size, $h3-size) !important;
@@ -181,7 +181,7 @@
   // stylelint-disable-next-line primer/spacing
   margin-bottom: 30px;
   font-size: var(--h3-size, $h3-size);
-  font-weight: var(--base-text-weight-light, $font-weight-light);
+  font-weight: $font-weight-light;
 }
 
 // Line-height variations
@@ -308,7 +308,7 @@
 }
 
 .text-emphasized {
-  font-weight: var(--base-text-weight-semibold, $font-weight-bold);
+  font-weight: $font-weight-bold;
 }
 
 // List styles

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;
   }
 }

data/_sass/@primer/primitives/dist/scss/base/size/size.scss

@@ -0,0 +1,17 @@
+$base-size-4: 0.25rem;
+$base-size-8: 0.5rem;
+$base-size-12: 0.75rem;
+$base-size-16: 1rem;
+$base-size-20: 1.25rem;
+$base-size-24: 1.5rem;
+$base-size-28: 1.75rem;
+$base-size-32: 2rem;
+$base-size-36: 2.25rem;
+$base-size-40: 2.5rem;
+$base-size-44: 2.75rem;
+$base-size-48: 3rem;
+$base-size-64: 4rem;
+$base-size-80: 5rem;
+$base-size-96: 6rem;
+$base-size-112: 7rem;
+$base-size-128: 8rem;

data/_sass/@primer/primitives/dist/scss/base/typography/typography.scss

@@ -0,0 +1,4 @@
+$base-text-weight-light: 300;
+$base-text-weight-normal: 400;
+$base-text-weight-medium: 500;
+$base-text-weight-semibold: 600;