diff --git a/.changeset/rotten-kiwis-change.md b/.changeset/rotten-kiwis-change.md
new file mode 100644
index 0000000000..430ab66288
--- /dev/null
+++ b/.changeset/rotten-kiwis-change.md
@@ -0,0 +1,6 @@
+---
+"@primer/view-components": patch
+---
+
+- Remove manual fallbacks for CSS vars
+- Update PostCSS plugin to add fallbacks at build time
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/default.png
index b8239b358b..639384ef15 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/default.png differ
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/focused.png
index b8239b358b..639384ef15 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/focused.png differ
diff --git a/app/components/primer/alpha/action_list.pcss b/app/components/primer/alpha/action_list.pcss
index 1daccfcfd0..f9cbf8706a 100644
--- a/app/components/primer/alpha/action_list.pcss
+++ b/app/components/primer/alpha/action_list.pcss
@@ -1,12 +1,12 @@
 :root {
-  --actionListContent-paddingBlock: var(--control-medium-paddingBlock, 6px);
+  --actionListContent-paddingBlock: var(--control-medium-paddingBlock);
 }
 
 /* ActionList */
 
 .ActionListHeader {
-  margin-left: var(--base-size-8, 8px);
-  margin-bottom: var(--base-size-16, 16px);
+  margin-left: var(--base-size-8);
+  margin-bottom: var(--base-size-16);
 }
 
 /* <ul> */
@@ -15,7 +15,7 @@
 }
 
 .ActionListWrap--inset {
-  padding: var(--base-size-8, 8px);
+  padding: var(--base-size-8);
 }
 
 /* list dividers */
@@ -38,7 +38,7 @@
       top: calc(-1 * var(--actionListContent-paddingBlock));
       display: block;
       width: 100%;
-      height: var(--borderWidth-thin, 1px);
+      height: var(--borderWidth-thin);
       content: '';
       background: var(--color-action-list-item-inline-divider);
     }
@@ -76,7 +76,7 @@
   position: relative;
   list-style: none;
   background-color: transparent;
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
 
   /* state */
 
@@ -134,9 +134,9 @@
 
         &:not(.ActionListItem--navActive, :focus-visible) {
           /* Support for "Windows high contrast mode" */
-          outline: solid var(--borderWidth-thin, 1px) transparent;
-          outline-offset: calc(-1 * var(--borderWidth-thin, 1px));
-          box-shadow: var(--borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
+          outline: solid var(--borderWidth-thin) transparent;
+          outline-offset: calc(-1 * var(--borderWidth-thin));
+          box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
         }
       }
     }
@@ -146,9 +146,9 @@
 
       &:not(.ActionListItem--navActive) {
         /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
-        outline: solid var(--borderWidth-thin, 1px) transparent;
-        outline-offset: calc(-1 * var(--borderWidth-thin, 1px));
-        box-shadow: var(--borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
+        outline: solid var(--borderWidth-thin) transparent;
+        outline-offset: calc(-1 * var(--borderWidth-thin));
+        box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
       }
 
       & .ActionListItem-label::before,
@@ -161,7 +161,7 @@
   /* Autocomplete [aria-selected] items */
 
   &[aria-selected='true'] {
-    font-weight: var(--base-text-weight-normal, 400);
+    font-weight: var(--base-text-weight-normal);
     background: var(--color-action-list-item-default-selected-bg);
 
     @media (hover: hover) {
@@ -178,7 +178,7 @@
     /* blue accent line */
 
     &::after {
-      @mixin activeIndicatorLine calc(-1 * var(--base-size-4, 4px));
+      @mixin activeIndicatorLine calc(-1 * var(--base-size-4));
     }
   }
 
@@ -187,7 +187,7 @@
   &.ActionListItem--navActive {
     &:not(.ActionListItem--subItem) {
       & .ActionListItem-label {
-        font-weight: var(--base-text-weight-semibold, 600);
+        font-weight: var(--base-text-weight-semibold);
       }
     }
 
@@ -277,13 +277,13 @@
   display: grid;
   width: 100%;
   padding-block: var(--actionListContent-paddingBlock);
-  padding-inline: var(--control-medium-paddingInline-condensed, 8px);
+  padding-inline: var(--control-medium-paddingInline-condensed);
   color: var(--color-fg-default);
   text-align: left;
   user-select: none;
   background-color: transparent;
   border: none;
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
   transition: background 33.333ms linear;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
@@ -294,7 +294,7 @@
 
   /* column-gap persists with empty grid-areas, margin applies only when children exist */
   & > :not(:last-child) {
-    margin-right: var(--control-medium-gap, 8px);
+    margin-right: var(--control-medium-gap);
   }
 
   /* state */
@@ -333,28 +333,28 @@
       }
 
       & .ActionListContent {
-        padding-left: var(--base-size-24, 24px);
+        padding-left: var(--base-size-24);
       }
     }
 
     /* has 16px leading visual */
     &.ActionListContent--visual16 + .ActionList--subGroup {
       & .ActionListContent {
-        padding-left: var(--base-size-32, 32px);
+        padding-left: var(--base-size-32);
       }
     }
 
     /* has 20px leading visual */
     &.ActionListContent--visual20 + .ActionList--subGroup {
       & .ActionListContent {
-        padding-left: var(--base-size-36, 36px);
+        padding-left: var(--base-size-36);
       }
     }
 
     /* has 24px leading visual */
     &.ActionListContent--visual24 + .ActionList--subGroup {
       & .ActionListContent {
-        padding-left: var(--base-size-40, 40px);
+        padding-left: var(--base-size-40);
       }
     }
   }
@@ -375,7 +375,7 @@
 
     &.ActionListContent--hasActiveSubItem {
       & > .ActionListItem-label {
-        font-weight: var(--base-text-weight-semibold, 600);
+        font-weight: var(--base-text-weight-semibold);
       }
     }
   }
@@ -391,7 +391,7 @@
       overflow: hidden;
       visibility: hidden;
       opacity: 0;
-      transform: translateY(calc(-1 * var(--base-size-16, 16px)));
+      transform: translateY(calc(-1 * var(--base-size-16)));
     }
 
     /* show active indicator on parent collapse if child is active */
@@ -399,7 +399,7 @@
       background: var(--color-action-list-item-default-selected-bg);
 
       & .ActionListItem-label {
-        font-weight: var(--base-text-weight-semibold, 600);
+        font-weight: var(--base-text-weight-semibold);
       }
 
       &::before,
@@ -506,16 +506,16 @@
   /* sizes */
 
   &.ActionListContent--sizeLarge {
-    --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
+    --actionListContent-paddingBlock: var(--control-large-paddingBlock);
   }
 
   &.ActionListContent--sizeXLarge {
-    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));
+    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);
   }
 
   /* On pointer:coarse (mobile), all list items are large */
   @media (pointer: coarse) {
-    --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
+    --actionListContent-paddingBlock: var(--control-large-paddingBlock);
   }
 
   &.ActionListContent--blockDescription {
@@ -550,10 +550,10 @@
   grid-area: label;
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-4, 4px);
+  gap: var(--base-size-4);
 
   & .ActionListItem-label {
-    font-weight: var(--base-text-weight-semibold, 600);
+    font-weight: var(--base-text-weight-semibold);
   }
 }
 
@@ -562,14 +562,14 @@
   position: relative;
   flex-direction: row;
   align-items: baseline;
-  gap: var(--base-size-8, 8px);
+  gap: var(--base-size-8);
 }
 
 /* description */
 .ActionListItem-description {
-  font-size: var(--text-body-size-small, 12px);
-  font-weight: var(--base-text-weight-normal, 400);
-  line-height: var(--text-body-lineHeight-small, calc(20 / 12));
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-normal);
+  line-height: var(--text-body-lineHeight-small);
   color: var(--color-fg-muted);
 }
 
@@ -578,7 +578,7 @@
 .ActionListItem-visual,
 .ActionListItem-action {
   display: flex;
-  min-height: var(--control-medium-lineBoxHeight, 20px);
+  min-height: var(--control-medium-lineBoxHeight);
   color: var(--color-fg-muted);
   pointer-events: none;
   fill: var(--color-fg-muted);
@@ -588,9 +588,9 @@
 /* text */
 .ActionListItem-label {
   position: relative;
-  font-size: var(--text-body-size-medium, 14px);
-  font-weight: var(--base-text-weight-normal, 400);
-  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-normal);
+  line-height: var(--text-body-lineHeight-medium);
   color: var(--color-fg-default);
   grid-area: label;
 }
@@ -605,8 +605,8 @@
  target ActionListItem--subItem for padding-left to maintain :active :after state */
 
 .ActionListItem--subItem > .ActionListContent > .ActionListItem-label {
-  font-size: var(--text-body-size-small, 12px);
-  line-height: var(--text-body-lineHeight-small, calc(20 / 12));
+  font-size: var(--text-body-size-small);
+  line-height: var(--text-body-lineHeight-small);
 }
 
 /* trailing action icon button */
@@ -644,10 +644,10 @@
   &:not(:empty) {
     display: flex;
     padding-inline: var(--actionListContent-paddingBlock);
-    padding-block: var(--base-size-8, 8px);
-    font-size: var(--text-body-size-small, 12px);
-    line-height: var(--text-body-lineHeight-small, calc(20 / 12));
-    font-weight: var(--base-text-weight-semibold, 600);
+    padding-block: var(--base-size-8);
+    font-size: var(--text-body-size-small);
+    line-height: var(--text-body-lineHeight-small);
+    font-weight: var(--base-text-weight-semibold);
     color: var(--color-fg-muted);
     flex-direction: column;
   }
@@ -655,34 +655,34 @@
   /* no children */
   &:empty {
     display: block;
-    height: var(--borderWidth-thin, 1px);
+    height: var(--borderWidth-thin);
     padding: 0;
-    margin-block-start: calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));
-    margin-block-end: var(--base-size-8, 8px);
-    margin-inline: calc(-1 * var(--base-size-8, 8px));
+    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
+    margin-block-end: var(--base-size-8);
+    margin-inline: calc(-1 * var(--base-size-8));
     list-style: none;
     background: var(--color-action-list-item-inline-divider);
     border: 0;
   }
 
   & .ActionList-sectionDivider-title {
-    font-size: var(--text-body-size-small, 12px);
-    font-weight: var(--base-text-weight-semibold, 600);
+    font-size: var(--text-body-size-small);
+    font-weight: var(--base-text-weight-semibold);
     color: var(--color-fg-muted);
   }
 }
 
 .ActionList-sectionDivider--filled {
-  margin-block-start: calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));
-  margin-block-end: var(--base-size-8, 8px);
-  margin-inline: calc(-1 * var(--base-size-8, 8px));
+  margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
+  margin-block-end: var(--base-size-8);
+  margin-inline: calc(-1 * var(--base-size-8));
   background: var(--color-canvas-subtle);
-  border-top: solid var(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
-  border-bottom: solid var(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
+  border-top: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);
+  border-bottom: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);
 
   /* if no children, treat as divider */
   &:empty {
-    height: var(--base-size-8, 8px);
+    height: var(--base-size-8);
     box-sizing: border-box;
   }
 
diff --git a/app/components/primer/alpha/auto_complete.pcss b/app/components/primer/alpha/auto_complete.pcss
index 52808ab45b..82cd0b1236 100644
--- a/app/components/primer/alpha/auto_complete.pcss
+++ b/app/components/primer/alpha/auto_complete.pcss
@@ -69,8 +69,8 @@
   font-size: 13px;
   list-style: none;
   background: var(--color-canvas-overlay);
-  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium);
   box-shadow: var(--color-shadow-medium);
 }
 
@@ -82,7 +82,7 @@
   width: 100%;
   padding: 4px 8px;
   overflow: hidden;
-  font-weight: var(--base-text-weight-semibold, 600);
+  font-weight: var(--base-text-weight-semibold);
   color: var(--color-fg-default);
   text-align: left;
   text-decoration: none;
diff --git a/app/components/primer/alpha/banner.pcss b/app/components/primer/alpha/banner.pcss
index 852ddca425..f01cb01a66 100644
--- a/app/components/primer/alpha/banner.pcss
+++ b/app/components/primer/alpha/banner.pcss
@@ -3,11 +3,11 @@
 .Banner {
   position: relative;
   display: grid;
-  padding: var(--base-size-8, 8px);
+  padding: var(--base-size-8);
   color: var(--color-fg-default);
   background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
-  border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-accent-muted);
+  border-radius: var(--borderRadius-medium);
   grid-auto-flow: column;
   grid-template-areas: 'visual message actions close';
   grid-template-columns: min-content 1fr minmax(0, auto) min-content;
@@ -22,7 +22,7 @@
     grid-template-rows: min-content min-content;
 
     & .Banner-actions {
-      margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);
+      margin: var(--base-size-8) 0 0 var(--base-size-8);
     }
   }
 
@@ -30,12 +30,12 @@
 
   & .Banner-visual {
     display: grid;
-    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
+    padding: 0.375rem var(--base-size-8);
     grid-area: visual;
     align-self: start;
 
     & > .octicon {
-      margin-block: calc(var(--base-size-4, 4px) / 2);
+      margin-block: calc(var(--base-size-4) / 2);
     }
 
     & > * {
@@ -44,7 +44,7 @@
   }
 
   & .Banner-message {
-    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
+    padding: 0.375rem var(--base-size-8);
     grid-area: message;
     align-self: center;
 
@@ -54,7 +54,7 @@
 
     & .Banner-title:not(:only-child) {
       margin-bottom: 0;
-      font-weight: var(--base-text-weight-semibold, 600);
+      font-weight: var(--base-text-weight-semibold);
     }
   }
 
@@ -69,7 +69,7 @@
   /* is this used anywhere? could not find any use, but unsure */
   & .Banner-close {
     grid-area: close;
-    margin-left: var(--controlStack-medium-gap-condensed, 8px);
+    margin-left: var(--controlStack-medium-gap-condensed);
   }
 
   & .Banner-visual .octicon {
@@ -109,7 +109,7 @@
   /* Full-width */
 
   &.Banner--full {
-    margin-top: calc(var(--borderWidth-thin, max(1px, 0.0625rem)) * -1);
+    margin-top: calc(var(--borderWidth-thin) * -1);
     border-right: 0;
     border-left: 0;
     border-radius: 0;
@@ -117,7 +117,7 @@
 
   @media (max-width: 767.98px) {
     &.Banner--full-whenNarrow {
-      margin-top: calc(var(--borderWidth-thin, max(1px, 0.0625rem)) * -1);
+      margin-top: calc(var(--borderWidth-thin) * -1);
       border-right: 0;
       border-left: 0;
       border-radius: 0;
diff --git a/app/components/primer/alpha/button_marketing.pcss b/app/components/primer/alpha/button_marketing.pcss
index 0d57a4ae82..744089f8ff 100644
--- a/app/components/primer/alpha/button_marketing.pcss
+++ b/app/components/primer/alpha/button_marketing.pcss
@@ -8,15 +8,14 @@
 
   /* stylelint-disable-next-line primer/typography */
   font-size: 1rem;
-  font-weight: var(--base-text-weight-semibold, 600);
+  font-weight: var(--base-text-weight-semibold);
   line-height: 1;
   color: var(--color-canvas-default);
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),
+  background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
 
@@ -69,7 +68,7 @@
 
   /* default focus state */
   &:focus-visible {
-    @mixin focusOutline 2px, var(--color-accent-fg) ;
+    @mixin focusOutline 2px, var(--color-accent-fg);
   }
 
   &:active {
@@ -100,13 +99,11 @@
   }
 
   &:active {
-
     /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
   }
 
   &:disabled {
-
     /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
   }
@@ -127,7 +124,6 @@
 }
 
 .btn-signup-mktg {
-
   /* stylelint-disable-next-line primer/colors */
   color: #fff;
 
@@ -135,14 +131,13 @@
   background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;
 
   &::before {
-
     /* stylelint-disable-next-line primer/colors */
     background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;
   }
 
   /* fallback :focus state */
   &:focus {
-    @mixin focusOutline 2px, var(--color-accent-fg) ;
+    @mixin focusOutline 2px, var(--color-accent-fg);
 
     /* remove fallback :focus if :focus-visible is supported */
     &:not(:focus-visible) {
@@ -153,20 +148,18 @@
 
   /* default focus state */
   &:focus-visible {
-    @mixin focusOutline 2px, var(--color-accent-fg) ;
+    @mixin focusOutline 2px, var(--color-accent-fg);
   }
 }
 
 /* Size modifiers */
 
 .btn-small-mktg {
-
   /* stylelint-disable-next-line primer/spacing */
   padding: 0.625rem 1rem 0.8125rem;
 }
 
 .btn-large-mktg {
-
   /* stylelint-disable-next-line primer/spacing */
   padding: 16px 30px 20px !important;
 
diff --git a/app/components/primer/alpha/dialog.pcss b/app/components/primer/alpha/dialog.pcss
index e4d384c13f..6256f8cdce 100644
--- a/app/components/primer/alpha/dialog.pcss
+++ b/app/components/primer/alpha/dialog.pcss
@@ -19,7 +19,7 @@
   white-space: normal;
   flex-direction: column;
   background-color: var(--color-canvas-overlay);
-  border-radius: var(--borderRadius-large, 12px);
+  border-radius: var(--borderRadius-large);
   box-shadow: var(--color-overlay-shadow);
   opacity: 1;
 
@@ -154,25 +154,25 @@
   flex-direction: column;
 
   &.Overlay-header--divided {
-    padding-bottom: var(--stack-padding-condensed, 8px);
-    box-shadow: inset 0 calc(var(--borderWidth-thin, 1px) * -1) var(--color-border-default);
+    padding-bottom: var(--stack-padding-condensed);
+    box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--color-border-default);
 
     & + .Overlay-body {
-      padding-top: var(--stack-padding-normal, 16px);
+      padding-top: var(--stack-padding-normal);
     }
   }
 
   &.Overlay-header--large {
     & .Overlay-headerContentWrap {
       & .Overlay-titleWrap {
-        gap: var(--stack-gap-condensed, 8px);
+        gap: var(--stack-gap-condensed);
 
         & .Overlay-title {
-          font-size: var(--text-title-size-medium, 20px);
+          font-size: var(--text-title-size-medium);
         }
 
         & .Overlay-description {
-          font-size: var(--text-body-size-medium, 14px);
+          font-size: var(--text-body-size-medium);
         }
       }
     }
@@ -181,33 +181,33 @@
   & .Overlay-headerContentWrap {
     display: flex;
     align-items: flex-start;
-    gap: var(--stack-gap-condensed, 8px);
-    padding: var(--stack-gap-condensed, 8px) var(--stack-gap-condensed, 8px) 0 var(--stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed);
+    padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);
 
     & .Overlay-actionWrap {
       display: flex;
       flex-direction: row;
-      gap: var(--stack-gap-condensed, 8px);
+      gap: var(--stack-gap-condensed);
     }
 
     & .Overlay-titleWrap {
       display: flex;
-      padding: calc(var(--stack-gap-condensed, 8px) * 0.75) 0 calc(var(--stack-gap-condensed, 8px) * 0.75)
-        var(--stack-gap-condensed, 8px);
+      padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)
+        var(--stack-gap-condensed);
       flex-direction: column;
       flex-grow: 1;
-      gap: var(--control-small-gap, 4px);
+      gap: var(--control-small-gap);
 
       & .Overlay-title {
         margin: 0;
-        font-size: var(--text-body-size-medium, 14px);
-        font-weight: var(--base-text-weight-semibold, 600);
+        font-size: var(--text-body-size-medium);
+        font-weight: var(--base-text-weight-semibold);
       }
 
       & .Overlay-description {
         margin: 0;
-        font-size: var(--text-body-size-small, 12px);
-        font-weight: var(--base-text-weight-normal, 400);
+        font-size: var(--text-body-size-small);
+        font-weight: var(--base-text-weight-normal);
         color: var(--color-fg-muted);
       }
     }
@@ -216,15 +216,15 @@
 
 /* generic body content slot */
 .Overlay-body {
-  padding: var(--stack-padding-normal, 16px);
+  padding: var(--stack-padding-normal);
   padding-top: 0;
   overflow-y: auto;
   scrollbar-width: thin;
-  font-size: var(--text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium);
   flex-grow: 1;
 
   &.Overlay-body--paddingCondensed {
-    padding: var(--stack-padding-condensed, 8px);
+    padding: var(--stack-padding-condensed);
     padding-top: 0;
   }
 
@@ -237,29 +237,29 @@
 .Overlay-footer {
   z-index: 1;
   display: flex;
-  padding: 0 var(--stack-padding-normal, 16px) var(--stack-padding-normal, 16px) var(--stack-padding-normal, 16px);
+  padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);
   flex-direction: row;
   flex-shrink: 0;
   flex-wrap: wrap;
 
   &.Overlay-footer--divided {
-    padding-top: var(--stack-padding-normal, 16px);
-    box-shadow: inset 0 var(--borderWidth-thin, 1px) var(--color-border-default);
+    padding-top: var(--stack-padding-normal);
+    box-shadow: inset 0 var(--borderWidth-thin) var(--color-border-default);
   }
 
   &.Overlay-footer--alignStart {
     justify-content: flex-start;
-    gap: var(--stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed);
   }
 
   &.Overlay-footer--alignCenter {
     justify-content: center;
-    gap: var(--stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed);
   }
 
   &.Overlay-footer--alignEnd {
     justify-content: flex-end;
-    gap: var(--stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed);
   }
 }
 
@@ -267,15 +267,15 @@
 .Overlay-closeButton {
   position: relative;
   display: grid;
-  width: var(--base-size-32, 32px);
-  height: var(--base-size-32, 32px);
+  width: var(--base-size-32);
+  height: var(--base-size-32);
   padding: 0;
   color: var(--color-fg-muted);
   cursor: pointer;
   user-select: none;
   background-color: transparent;
-  border: var(--borderWidth-thin, 1px) solid transparent;
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid transparent;
+  border-radius: var(--borderRadius-medium);
   transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
   transition-property: color, background-color, border-color;
   place-content: center;
@@ -285,12 +285,12 @@
   &:hover,
   &:focus {
     background-color: var(--color-btn-hover-bg);
-    border: var(--borderWidth-thin, 1px) solid var(--color-btn-hover-bg);
+    border: var(--borderWidth-thin) solid var(--color-btn-hover-bg);
   }
 
   /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */
   &.close-button {
-    border: var(--borderWidth-thin, 1px) solid transparent;
+    border: var(--borderWidth-thin) solid transparent;
   }
 }
 
@@ -343,7 +343,7 @@
     & > .Overlay$(responsiveVariant) {
       height: 100vh;
       max-height: unset;
-      border-radius: var(--borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large);
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
 
@@ -360,7 +360,7 @@
     & > .Overlay$(responsiveVariant) {
       height: 100vh;
       max-height: unset;
-      border-radius: var(--borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large);
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
 
@@ -378,7 +378,7 @@
       width: 100vw;
       height: auto;
       max-height: calc(100vh - 2rem);
-      border-radius: var(--borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large);
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
 
@@ -393,7 +393,7 @@
     justify-content: center;
 
     & > .Overlay$(responsiveVariant) {
-      border-radius: var(--borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large);
       border-top-left-radius: 0;
       border-top-right-radius: 0;
 
diff --git a/app/components/primer/alpha/dropdown.pcss b/app/components/primer/alpha/dropdown.pcss
index 129efa563f..022df6f9ab 100644
--- a/app/components/primer/alpha/dropdown.pcss
+++ b/app/components/primer/alpha/dropdown.pcss
@@ -11,7 +11,7 @@
   vertical-align: middle;
   content: '';
   border-style: solid;
-  border-width: var(--borderWidth-thicker, 4px) var(--borderWidth-thicker, 4px) 0;
+  border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;
   border-right-color: transparent;
   border-bottom-color: transparent;
   border-left-color: transparent;
@@ -26,14 +26,14 @@
   left: 0;
   z-index: 100;
   width: 160px;
-  padding-top: var(--control-small-paddingBlock, 4px);
-  padding-bottom: var(--control-small-paddingBlock, 4px);
+  padding-top: var(--control-small-paddingBlock);
+  padding-bottom: var(--control-small-paddingBlock);
   margin-top: 2px;
   list-style: none;
   background-color: var(--color-canvas-overlay);
   background-clip: padding-box;
-  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium);
   box-shadow: var(--color-shadow-large);
 
   &::before,
@@ -64,7 +64,7 @@
   width: auto;
 
   & .dropdown-item {
-    padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);
+    padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
     overflow: visible;
     text-overflow: inherit;
   }
@@ -73,8 +73,8 @@
 /* Dropdown items (can be links or buttons) */
 .dropdown-item {
   display: block;
-  padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-condensed, 8px)
-    var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);
+  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)
+    var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
   overflow: hidden;
   color: var(--color-fg-default);
   text-overflow: ellipsis;
@@ -116,13 +116,13 @@
 .dropdown-divider {
   display: block;
   height: 0;
-  margin: var(--stack-gap-condensed, 8px) 0;
-  border-top: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  margin: var(--stack-gap-condensed) 0;
+  border-top: var(--borderWidth-thin) solid var(--color-border-default);
 }
 
 .dropdown-header {
-  padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);
-  font-size: var(--text-body-size-small, 12px);
+  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
+  font-size: var(--text-body-size-small);
   color: var(--color-fg-muted);
 }
 
diff --git a/app/components/primer/alpha/layout.pcss b/app/components/primer/alpha/layout.pcss
index e5e23f4cce..96da1d303a 100644
--- a/app/components/primer/alpha/layout.pcss
+++ b/app/components/primer/alpha/layout.pcss
@@ -73,7 +73,7 @@
       background: var(--color-canvas-inset);
       border-color: var(--color-border-default);
       border-style: solid;
-      border-width: var(--borderWidth-thin, 1px) 0;
+      border-width: var(--borderWidth-thin) 0;
     }
   }
 }
@@ -255,14 +255,14 @@
   }
 
   & .Layout-main-centered-md {
-    max-width: calc(var(--breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+    max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 
   & .Layout-main-centered-lg {
-    max-width: calc(var(--breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+    max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 
   & .Layout-main-centered-xl {
-    max-width: calc(var(--breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+    max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 }
diff --git a/app/components/primer/alpha/menu.pcss b/app/components/primer/alpha/menu.pcss
index 22ecb2f7c0..07244996a6 100644
--- a/app/components/primer/alpha/menu.pcss
+++ b/app/components/primer/alpha/menu.pcss
@@ -3,37 +3,37 @@
 /* A menu on the side of a page, defaults to left side. e.g. github.com/about */
 
 .menu {
-  margin-bottom: var(--stack-gap-normal, 16px);
+  margin-bottom: var(--stack-gap-normal);
   list-style: none;
   background-color: var(--color-canvas-default);
-  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium);
 }
 
 .menu-item {
   position: relative;
   display: block;
-  padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);
+  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
   color: var(--color-fg-default);
-  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
+  border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);
 
   &:first-child {
     border-top: 0;
-    border-top-left-radius: var(--borderRadius-medium, 6px);
-    border-top-right-radius: var(--borderRadius-medium, 6px);
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
 
     &::before {
-      border-top-left-radius: var(--borderRadius-medium, 6px);
+      border-top-left-radius: var(--borderRadius-medium);
     }
   }
 
   &:last-child {
     border-bottom: 0;
-    border-bottom-right-radius: var(--borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--borderRadius-medium, 6px);
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
 
     &::before {
-      border-bottom-left-radius: var(--borderRadius-medium, 6px);
+      border-bottom-left-radius: var(--borderRadius-medium);
     }
   }
 
@@ -65,14 +65,14 @@
 
   & .octicon {
     width: 16px;
-    margin-right: var(--control-medium-gap, 8px);
+    margin-right: var(--control-medium-gap);
     color: var(--color-fg-muted);
     text-align: center;
   }
 
   & .Counter {
     float: right;
-    margin-left: var(--control-small-gap, 4px);
+    margin-left: var(--control-small-gap);
   }
 
   & .menu-warning {
@@ -82,7 +82,7 @@
 
   & .avatar {
     float: left;
-    margin-right: var(--control-small-gap, 4px);
+    margin-right: var(--control-small-gap);
   }
 
   &.alert {
@@ -94,26 +94,26 @@
 
 .menu-heading {
   display: block;
-  padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);
+  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
   margin-top: 0;
   margin-bottom: 0;
   font-size: inherit;
-  font-weight: var(--base-text-weight-semibold, 600);
+  font-weight: var(--base-text-weight-semibold);
   color: var(--color-fg-default);
-  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
+  border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);
 
   &:hover {
     text-decoration: none;
   }
 
   &:first-child {
-    border-top-left-radius: var(--borderRadius-medium, 6px);
-    border-top-right-radius: var(--borderRadius-medium, 6px);
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
   }
 
   &:last-child {
     border-bottom: 0;
-    border-bottom-right-radius: var(--borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--borderRadius-medium, 6px);
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
   }
 }
diff --git a/app/components/primer/alpha/segmented_control.pcss b/app/components/primer/alpha/segmented_control.pcss
index 6cbad8bbcd..7a71d58452 100644
--- a/app/components/primer/alpha/segmented_control.pcss
+++ b/app/components/primer/alpha/segmented_control.pcss
@@ -4,15 +4,15 @@
   display: inline-flex;
   list-style: none;
   background-color: var(--color-segmented-control-bg);
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
 }
 
 .SegmentedControl-item {
   position: relative;
   display: inline-flex;
-  border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid transparent;
-  border-radius: var(--borderRadius-medium, 6px);
-  padding: var(--control-xsmall-paddingInline-condensed, 4px);
+  border: var(--borderWidth-thin) solid transparent;
+  border-radius: var(--borderRadius-medium);
+  padding: var(--control-xsmall-paddingInline-condensed);
 
   /* Selected ---------------------------------------- */
   &.SegmentedControl-item--selected {
@@ -20,7 +20,7 @@
     border-color: var(--color-segmented-control-button-selected-border);
 
     & .Button {
-      font-weight: var(--base-text-weight-semibold, 600);
+      font-weight: var(--base-text-weight-semibold);
 
       &:hover {
         background-color: transparent;
@@ -40,7 +40,7 @@
   & .Button-label[data-content]::before {
     display: block;
     height: 0;
-    font-weight: var(--base-text-weight-semibold, 600);
+    font-weight: var(--base-text-weight-semibold);
     visibility: hidden;
     content: attr(data-content);
   }
@@ -50,82 +50,73 @@
     &::before {
       position: absolute;
       inset: 0 0 0 -1px;
-      margin-top: var(--control-medium-paddingBlock, 6px);
-      margin-bottom: var(--control-medium-paddingBlock, 6px);
+      margin-top: var(--control-medium-paddingBlock);
+      margin-bottom: var(--control-medium-paddingBlock);
       content: '';
-      border-left: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);
+      border-left: var(--borderWidth-thin) solid var(--color-border-default);
     }
   }
 
   /* Button ----------------------------------------- */
   & .Button {
     border: 0;
-    font-weight: var(--base-text-weight-normal, 400);
+    font-weight: var(--base-text-weight-normal);
     transition: none;
     color: var(--color-btn-text);
 
     &:focus-visible {
-      outline-offset: calc(var(--control-xsmall-paddingInline-condensed, 4px) - var(--borderWidth-thin, 1px));
-      border-radius: calc(var(--borderRadius-medium, 6px) - 5px);
+      outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));
+      border-radius: calc(var(--borderRadius-medium) - 5px);
     }
   }
 
   & .Button--small {
     height: calc(
-      var(--control-small-size, 28px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-        var(--borderWidth-thin, 1px) * 2
+      var(--control-small-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
     );
-    padding: 0
-      calc(var(--control-small-paddingInline-condensed, 8px) - var(--control-xsmall-paddingInline-condensed, 4px));
+    padding: 0 calc(var(--control-small-paddingInline-condensed) - var(--control-xsmall-paddingInline-condensed));
 
     &.Button--iconOnly {
       width: calc(
-        var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-          var(--borderWidth-thin, 1px) * 2
+        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
       );
 
       &::before {
-        @mixin minTouchTarget var(--control-medium-size, 32px), var(--control-medium-size, 32px);
+        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);
       }
     }
   }
 
   & .Button--medium {
     height: calc(
-      var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-        var(--borderWidth-thin, 1px) * 2
+      var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
     );
-    padding: 0
-      calc(var(--control-medium-paddingInline-normal, 12px) - var(--control-xsmall-paddingInline-condensed, 4px));
+    padding: 0 calc(var(--control-medium-paddingInline-normal) - var(--control-xsmall-paddingInline-condensed));
 
     &.Button--iconOnly {
       width: calc(
-        var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-          var(--borderWidth-thin, 1px) * 2
+        var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
       );
 
       &::before {
-        @mixin minTouchTarget var(--control-medium-size, 32px), var(--control-medium-size, 32px);
+        @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);
       }
     }
   }
 
   & .Button--large {
     height: calc(
-      var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-        var(--borderWidth-thin, 1px) * 2
+      var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
     );
-    padding: 0
-      calc(var(--control-large-paddingInline-spacious, 16px) - var(--control-xsmall-paddingInline-condensed, 4px));
+    padding: 0 calc(var(--control-large-paddingInline-spacious) - var(--control-xsmall-paddingInline-condensed));
 
     &.Button--iconOnly {
       width: calc(
-        var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
-          var(--borderWidth-thin, 1px) * 2
+        var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2
       );
 
       &::before {
-        @mixin minTouchTarget var(--control-large-size, 40px), var(--control-large-size, 40px);
+        @mixin minTouchTarget var(--control-large-size), var(--control-large-size);
       }
     }
   }
diff --git a/app/components/primer/alpha/tab_nav.pcss b/app/components/primer/alpha/tab_nav.pcss
index ec57dcd491..2923d8c6a3 100644
--- a/app/components/primer/alpha/tab_nav.pcss
+++ b/app/components/primer/alpha/tab_nav.pcss
@@ -3,26 +3,26 @@
 /* Outer wrapper */
 .tabnav {
   margin-top: 0;
-  margin-bottom: var(--stack-gap-normal, 16px);
-  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  margin-bottom: var(--stack-gap-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--color-border-default);
 }
 
 .tabnav-tabs {
   display: flex;
-  margin-bottom: calc(var(--borderWidth-thin, 1px) * -1);
+  margin-bottom: calc(var(--borderWidth-thin) * -1);
   overflow: auto;
 }
 
 .tabnav-tab {
   display: inline-block;
   flex-shrink: 0;
-  padding: var(--base-size-8, 8px) var(--control-medium-paddingInline-spacious, 16px);
-  font-size: var(--text-body-size-medium, 14px);
+  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
+  font-size: var(--text-body-size-medium);
   line-height: 23px;
   color: var(--color-fg-muted);
   text-decoration: none;
   background-color: transparent;
-  border: var(--borderWidth-thin, 1px) solid transparent;
+  border: var(--borderWidth-thin) solid transparent;
   border-bottom: 0;
   transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
 
@@ -32,7 +32,7 @@
     color: var(--color-fg-default);
     background-color: var(--color-canvas-default); /* cover bottom border */
     border-color: var(--color-border-default);
-    border-radius: var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px) 0 0;
+    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
 
     & .octicon {
       color: inherit;
@@ -47,7 +47,7 @@
 
   &:focus,
   &:focus-visible {
-    border-radius: var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px) 0 0 !important;
+    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;
     outline-offset: -6px;
   }
 
@@ -56,12 +56,12 @@
   }
 
   & .octicon {
-    margin-right: var(--control-small-gap, 4px);
+    margin-right: var(--control-small-gap);
     color: var(--color-fg-muted);
   }
 
   & .Counter {
-    margin-left: var(--control-small-gap, 4px);
+    margin-left: var(--control-small-gap);
     color: inherit;
   }
 }
@@ -75,7 +75,7 @@
   display: inline-block;
   padding-top: 10px;
   margin-left: 10px;
-  font-size: var(--text-body-size-small, 12px);
+  font-size: var(--text-body-size-small);
   color: var(--color-fg-muted);
 
   & > .octicon {
@@ -96,5 +96,5 @@ a.tabnav-extra:hover {
 ** the buttons to be floated or inline-block. */
 
 .tabnav-btn {
-  margin-left: var(--controlStack-medium-gap-condensed, 8px);
+  margin-left: var(--controlStack-medium-gap-condensed);
 }
diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
index 5823e453dc..fb2c429916 100644
--- a/app/components/primer/alpha/text_field.pcss
+++ b/app/components/primer/alpha/text_field.pcss
@@ -4,7 +4,7 @@
 .FormControl {
   display: inline-flex;
   flex-direction: column;
-  gap: var(--base-size-4, 4px);
+  gap: var(--base-size-4);
 }
 
 /* fill container */
@@ -14,9 +14,9 @@
 
 /* <label> */
 .FormControl-label {
-  font-size: var(--text-body-size-medium, 14px);
-  font-weight: var(--base-text-weight-semibold, 600);
-  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+  line-height: var(--text-body-lineHeight-medium);
   color: var(--color-fg-default);
   user-select: none;
 }
@@ -24,23 +24,23 @@
 /* optional caption */
 .FormControl-caption {
   margin-bottom: 0;
-  font-size: var(--text-caption-size, 12px);
-  font-weight: var(--text-caption-weight, 400);
-  line-height: var(--text-caption-lineHeight, calc(16 / 12));
+  font-size: var(--text-caption-size);
+  font-weight: var(--text-caption-weight);
+  line-height: var(--text-caption-lineHeight);
   color: var(--color-fg-muted);
 }
 
 /* inline validation message */
 .FormControl-inlineValidation {
   display: flex;
-  font-size: var(--text-caption-size, 12px);
-  line-height: var(--text-caption-lineHeight, calc(16 / 12));
-  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: var(--text-caption-size);
+  line-height: var(--text-caption-lineHeight);
+  font-weight: var(--base-text-weight-semibold);
   color: var(--color-danger-fg);
   fill: var(--color-danger-fg);
   flex-direction: row;
   align-items: start;
-  gap: var(--base-size-4, 4px);
+  gap: var(--base-size-4);
 
   & p {
     margin-bottom: 0;
@@ -50,7 +50,7 @@
 .FormControl-inlineValidation--visual {
   align-items: center;
   display: flex;
-  min-height: var(--base-size-16, 16px);
+  min-height: var(--base-size-16);
 }
 
 .FormControl-spacingWrapper {
@@ -68,7 +68,7 @@
 @define-mixin Field {
   color: var(--color-fg-default);
   background-color: var(--color-canvas-default);
-  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  border: var(--borderWidth-thin) solid var(--color-border-default);
 
   &[disabled] {
     color: var(--color-primer-fg-disabled);
@@ -138,12 +138,12 @@
   @mixin Field;
 
   width: 100%;
-  font-size: var(--text-body-size-medium, 14px);
-  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
-  border-radius: var(--borderRadius-medium, 6px);
+  font-size: var(--text-body-size-medium);
+  line-height: var(--text-body-lineHeight-medium);
+  border-radius: var(--borderRadius-medium);
   transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
   transition-property: color, background-color, box-shadow, border-color;
-  padding-inline: var(--control-medium-paddingInline-condensed, 8px);
+  padding-inline: var(--control-medium-paddingInline-condensed);
   padding-block: calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));
 
   &[disabled] {
@@ -164,20 +164,20 @@
   /* sizes */
 
   &.FormControl-small {
-    height: var(--control-small-size, 28px);
-    padding-inline: var(--control-small-paddingInline-normal, 8px);
-    padding-block: var(--control-small-paddingBlock, 4px);
-    font-size: var(--text-body-size-small, 12px);
+    height: var(--control-small-size);
+    padding-inline: var(--control-small-paddingInline-normal);
+    padding-block: var(--control-small-paddingBlock);
+    font-size: var(--text-body-size-small);
   }
 
   &.FormControl-medium {
-    height: var(--control-medium-size, 32px);
+    height: var(--control-medium-size);
   }
 
   &.FormControl-large {
-    height: var(--control-large-size, 40px);
-    padding-inline: var(--control-large-paddingInline-normal, 12px);
-    padding-block: var(--control-large-paddingBlock, 10px);
+    height: var(--control-large-size);
+    padding-inline: var(--control-large-paddingInline-normal);
+    padding-block: var(--control-large-paddingBlock);
   }
 
   /* variants */
@@ -192,10 +192,7 @@
   }
 
   &.FormControl-monospace {
-    font-family: var(
-      --fontStack-monospace,
-      'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
-    );
+    font-family: var(--fontStack-monospace);
   }
 
   /* validation states */
@@ -216,7 +213,7 @@
 .FormControl-toggleSwitchInput {
   display: flex;
   align-items: flex-start;
-  gap: var(--base-size-16, 16px);
+  gap: var(--base-size-16);
 }
 
 /* positioning for leading/trailing items for TextInput */
@@ -226,11 +223,11 @@
 
   & .FormControl-input-leadingVisualWrap {
     position: absolute;
-    top: var(--base-size-8, 8px);
-    left: var(--base-size-8, 8px);
+    top: var(--base-size-8);
+    left: var(--base-size-8);
     display: block;
-    width: var(--base-size-16, 16px);
-    height: var(--base-size-16, 16px);
+    width: var(--base-size-16);
+    height: var(--base-size-16);
     color: var(--color-fg-muted);
     pointer-events: none;
 
@@ -244,12 +241,12 @@
   /* TODO: replace with new Button component */
   & .FormControl-input-trailingAction {
     position: absolute;
-    top: var(--base-size-4, 4px);
-    right: var(--base-size-4, 4px);
+    top: var(--base-size-4);
+    right: var(--base-size-4);
     z-index: 4;
     display: grid;
-    width: var(--control-xsmall-size, 24px);
-    height: var(--control-xsmall-size, 24px);
+    width: var(--control-xsmall-size);
+    height: var(--control-xsmall-size);
     padding: 0;
     color: var(--color-fg-muted);
     cursor: pointer;
@@ -283,7 +280,7 @@
       &::before {
         position: absolute;
         top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);
-        left: calc(var(--base-size-4, 4px) * -1);
+        left: calc(var(--base-size-4) * -1);
         display: block;
         width: var(--borderWidth-thin);
         height: var(--base-size-16);
@@ -293,11 +290,11 @@
     }
 
     &::after {
-      @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);
+      @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);
 
       @media (pointer: coarse) {
-        min-width: var(--control-minTarget-coarse, 44px);
-        min-height: var(--control-minTarget-coarse, 44px);
+        min-width: var(--control-minTarget-coarse);
+        min-height: var(--control-minTarget-coarse);
       }
     }
   }
@@ -315,7 +312,7 @@
   &.FormControl-input-wrap--leadingVisual {
     & .FormControl-input {
       padding-inline-start: calc(
-        var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px)
+        var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
       ); /* 32px */
     }
   }
@@ -332,7 +329,7 @@
   &.FormControl-input-wrap--trailingAction {
     & .FormControl-input {
       padding-inline-end: calc(
-        var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px)
+        var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
       ); /* 32px */
     }
 
@@ -350,8 +347,8 @@
     &.FormControl-input-wrap-trailingAction--divider {
       & .FormControl-input {
         padding-inline-end: calc(
-          var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-            var(--control-medium-gap, 8px) + var(--borderWidth-thin, 1px)
+          var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +
+            var(--borderWidth-thin)
         ); /* 33px */
       }
     }
@@ -361,8 +358,8 @@
   // sizes */
   &.FormControl-input-wrap--small {
     & .FormControl-input-leadingVisualWrap {
-      top: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
-      left: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
+      top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */
+      left: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */
     }
 
     /*
@@ -376,7 +373,7 @@
     &.FormControl-input-wrap--trailingAction {
       & .FormControl-input.FormControl-small {
         padding-inline-end: calc(
-          var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-small-gap, 8px)
+          var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)
         ); /* 28px */
       }
 
@@ -392,16 +389,16 @@
       &.FormControl-input-wrap-trailingAction--divider {
         & .FormControl-input.FormControl-small {
           padding-inline-end: calc(
-            var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-              var(--control-small-gap, 8px) + var(--borderWidth-thin, 1px)
+            var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +
+              var(--borderWidth-thin)
           ); /* 29px */
         }
       }
     }
 
     & .FormControl-input-trailingAction {
-      width: calc(var(--control-small-size, 28px) - var(--base-size-8, 8px));
-      height: calc(var(--control-small-size, 28px) - var(--base-size-8, 8px));
+      width: calc(var(--control-small-size) - var(--base-size-8));
+      height: calc(var(--control-small-size) - var(--base-size-8));
 
       &::before {
         top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
@@ -411,8 +408,8 @@
 
   &.FormControl-input-wrap--large {
     & .FormControl-input-leadingVisualWrap {
-      top: var(--control-medium-paddingInline-normal, 12px);
-      left: var(--control-medium-paddingInline-normal, 12px);
+      top: var(--control-medium-paddingInline-normal);
+      left: var(--control-medium-paddingInline-normal);
     }
 
     /*
@@ -426,7 +423,7 @@
     &.FormControl-input-wrap--leadingVisual {
       & .FormControl-input.FormControl-large {
         padding-inline-start: calc(
-          var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px)
+          var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
         ); /* 36px */
       }
     }
@@ -442,7 +439,7 @@
     &.FormControl-input-wrap--trailingAction {
       & .FormControl-input.FormControl-large {
         padding-inline-end: calc(
-          var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px)
+          var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
         ); /* 36px */
       }
 
@@ -457,18 +454,18 @@
       &.FormControl-input-wrap-trailingAction--divider {
         & .FormControl-input.FormControl-large {
           padding-inline-end: calc(
-            var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px) +
-              var(--borderWidth-thin, 1px)
+            var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +
+              var(--borderWidth-thin)
           ); /* 37px */
         }
       }
     }
 
     & .FormControl-input-trailingAction {
-      top: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
-      right: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
-      width: var(--control-small-size, 28px);
-      height: var(--control-small-size, 28px);
+      top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */
+      right: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */
+      width: var(--control-small-size);
+      height: var(--control-small-size);
 
       &::before {
         top: unset;
@@ -480,13 +477,13 @@
 
 .FormControl-select-wrap {
   display: grid;
-  grid-template-columns: minmax(0, auto) var(--base-size-16, 16px);
+  grid-template-columns: minmax(0, auto) var(--base-size-16);
 
   /* mask allows for background-color to respect themes */
   &::after {
-    width: var(--base-size-16, 16px);
-    height: var(--base-size-16, 16px);
-    padding-right: var(--base-size-4, 4px);
+    width: var(--base-size-16);
+    height: var(--base-size-16);
+    padding-right: var(--base-size-4);
     pointer-events: none;
     content: '';
     background-color: var(--color-fg-muted);
@@ -503,7 +500,7 @@
     grid-column: 1/-1;
     grid-row: 1;
     appearance: none;
-    padding-right: var(--base-size-20, 20px);
+    padding-right: var(--base-size-20);
   }
 }
 
@@ -522,13 +519,13 @@
 .FormControl-radio-wrap {
   display: inline-grid;
   grid-template-columns: min-content auto;
-  gap: var(--base-size-8, 8px);
+  gap: var(--base-size-8);
 
   & .FormControl-checkbox-labelWrap,
   & .FormControl-radio-labelWrap {
     display: flex;
     flex-direction: column;
-    gap: var(--base-size-4, 4px);
+    gap: var(--base-size-4);
   }
 
   & .FormControl-label {
@@ -559,25 +556,25 @@ input[type='checkbox'].FormControl-checkbox {
 
   position: relative;
   display: grid;
-  width: var(--base-size-16, 16px);
-  height: var(--base-size-16, 16px);
+  width: var(--base-size-16);
+  height: var(--base-size-16);
   margin: 0;
   margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
   cursor: pointer;
   border-color: var(--color-neutral-emphasis);
-  border-radius: var(--borderRadius-small, 3px);
+  border-radius: var(--borderRadius-small);
   transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
   appearance: none;
   place-content: center;
 
   &::before {
-    width: var(--base-size-16, 16px);
-    height: var(--base-size-16, 16px);
+    width: var(--base-size-16);
+    height: var(--base-size-16);
     visibility: hidden;
     content: '';
     background-color: var(--color-fg-on-emphasis);
     transition: visibility 0s linear 230ms;
-    clip-path: inset(var(--base-size-16, 16px) 0 0 0);
+    clip-path: inset(var(--base-size-16) 0 0 0);
 
     /* octicon checkmark image */
     mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
@@ -592,7 +589,7 @@ input[type='checkbox'].FormControl-checkbox {
 
   /* extend touch target */
   &::after {
-    @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);
+    @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);
   }
 
   &[disabled] {
@@ -653,23 +650,23 @@ input[type='radio'].FormControl-radio {
   @mixin Field;
 
   position: relative;
-  width: var(--base-size-16, 16px);
-  height: var(--base-size-16, 16px);
+  width: var(--base-size-16);
+  height: var(--base-size-16);
   margin: 0;
   margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
   cursor: pointer;
   border-color: var(--color-neutral-emphasis);
-  border-radius: var(--borderRadius-full, 100vh);
+  border-radius: var(--borderRadius-full);
   transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
   appearance: none;
 
   &::after {
-    @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);
+    @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);
   }
 
   &:checked {
     border-color: var(--color-accent-fg);
-    border-width: var(--base-size-4, 4px);
+    border-width: var(--base-size-4);
 
     &:disabled {
       cursor: not-allowed;
@@ -690,7 +687,7 @@ input[type='radio'].FormControl-radio {
 
 @keyframes checkmarkIn {
   from {
-    clip-path: inset(var(--base-size-16, 16px) 0 0 0);
+    clip-path: inset(var(--base-size-16) 0 0 0);
   }
 
   to {
@@ -704,6 +701,6 @@ input[type='radio'].FormControl-radio {
   }
 
   to {
-    clip-path: inset(var(--base-size-16, 16px) 0 0 0);
+    clip-path: inset(var(--base-size-16) 0 0 0);
   }
 }
diff --git a/app/components/primer/alpha/toggle_switch.pcss b/app/components/primer/alpha/toggle_switch.pcss
index ce229b876b..d15142ad87 100644
--- a/app/components/primer/alpha/toggle_switch.pcss
+++ b/app/components/primer/alpha/toggle_switch.pcss
@@ -9,7 +9,7 @@
 .ToggleSwitch {
   align-items: center;
   display: inline-flex;
-  gap: var(--controlStack-medium-gap-condensed, 8px);
+  gap: var(--controlStack-medium-gap-condensed);
 }
 
 .ToggleSwitch--checked {
@@ -27,16 +27,16 @@
 .ToggleSwitch-track {
   position: relative;
   display: block;
-  width: var(--base-size-64, 64px);
-  height: var(--control-medium-size, 32px);
+  width: var(--base-size-64);
+  height: var(--control-medium-size);
   padding: 0;
   overflow: hidden;
   text-decoration: none;
   cursor: pointer;
   user-select: none;
   background-color: var(--color-switch-track-bg);
-  border: var(--borderWidth-thin, 1px) solid var(--color-switch-track-border);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-switch-track-border);
+  border-radius: var(--borderRadius-medium);
   transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
   transition-duration: 80ms;
   transition-property: background-color, border-color;
@@ -158,8 +158,8 @@
   z-index: 1;
   width: 50%;
   background-color: var(--color-switch-knob-bg);
-  border: var(--borderWidth-thin, 1px) solid var(--color-switch-knob-border);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-switch-knob-border);
+  border-radius: var(--borderRadius-medium);
   box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
   transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
   transition-duration: 80ms;
@@ -172,26 +172,26 @@
 
 .ToggleSwitch-status {
   position: relative;
-  font-size: var(--text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium);
   line-height: 1.5;
   color: var(--color-fg-default);
   text-align: right;
 }
 
 .ToggleSwitch-statusIcon {
-  width: var(--base-size-16, 16px);
+  width: var(--base-size-16);
   display: flex;
   margin-top: 0.063rem;
 }
 
 .ToggleSwitch--small {
   & .ToggleSwitch-status {
-    font-size: var(--text-body-size-small, 12px);
+    font-size: var(--text-body-size-small);
   }
 
   & .ToggleSwitch-track {
-    width: var(--base-size-48, 48px);
-    height: var(--control-xsmall-size, 24px);
+    width: var(--base-size-48);
+    height: var(--control-xsmall-size);
   }
 }
 
diff --git a/app/components/primer/alpha/underline_nav.pcss b/app/components/primer/alpha/underline_nav.pcss
index 21cb6d6871..5823e81acd 100644
--- a/app/components/primer/alpha/underline_nav.pcss
+++ b/app/components/primer/alpha/underline_nav.pcss
@@ -2,7 +2,7 @@
 
 .UnderlineNav {
   display: flex;
-  min-height: var(--base-size-48, 48px);
+  min-height: var(--base-size-48);
   overflow-x: auto;
   overflow-y: hidden;
   box-shadow: inset 0 -1px 0 var(--color-border-muted);
@@ -10,7 +10,7 @@
   justify-content: space-between;
 
   & .Counter {
-    margin-left: var(--control-medium-gap, 8px);
+    margin-left: var(--control-medium-gap);
     color: var(--color-fg-default);
     background-color: var(--color-neutral-muted);
   }
@@ -24,15 +24,15 @@
 .UnderlineNav-body {
   display: flex;
   align-items: center;
-  gap: var(--control-medium-gap, 8px);
+  gap: var(--control-medium-gap);
   list-style: none;
 }
 
 .UnderlineNav-item {
   position: relative;
   display: flex;
-  padding: 0 var(--control-medium-paddingInline-condensed, 8px);
-  font-size: var(--text-body-size-medium, 14px);
+  padding: 0 var(--control-medium-paddingInline-condensed);
+  font-size: var(--text-body-size-medium);
   line-height: 30px;
   color: var(--color-fg-default);
   text-align: center;
@@ -40,7 +40,7 @@
   cursor: pointer;
   background-color: transparent;
   border: 0;
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
   align-items: center;
 
   &:hover,
@@ -57,7 +57,7 @@
   & [data-content]::before {
     display: block;
     height: 0;
-    font-weight: var(--base-text-weight-semibold, 600);
+    font-weight: var(--base-text-weight-semibold);
     visibility: hidden;
     content: attr(data-content);
   }
@@ -80,7 +80,7 @@
   &.selected,
   &[role='tab'][aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
-    font-weight: var(--base-text-weight-semibold, 600);
+    font-weight: var(--base-text-weight-semibold);
     color: var(--color-fg-default);
     border-bottom-color: var(--color-primer-border-active);
 
@@ -94,7 +94,7 @@
       height: 2px;
       content: '';
       background: var(--color-primer-border-active);
-      border-radius: var(--borderRadius-medium, 6px);
+      border-radius: var(--borderRadius-medium);
       transform: translate(50%, -50%);
     }
   }
@@ -117,13 +117,13 @@
 
   /* required for underline to align with additional wrapper element */
   & .UnderlineNav-body {
-    min-height: var(--base-size-48, 48px);
+    min-height: var(--base-size-48);
   }
 }
 
 .UnderlineNav-octicon {
   display: inline !important;
-  margin-right: var(--control-medium-gap, 8px);
+  margin-right: var(--control-medium-gap);
   color: var(--color-fg-muted);
   fill: var(--color-fg-muted);
 }
diff --git a/app/components/primer/beta/avatar.pcss b/app/components/primer/beta/avatar.pcss
index 95cb7d1d4f..57d817e2be 100644
--- a/app/components/primer/beta/avatar.pcss
+++ b/app/components/primer/beta/avatar.pcss
@@ -6,7 +6,7 @@
   line-height: 1;
   vertical-align: middle;
   background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
   flex-shrink: 0;
   box-shadow: 0 0 0 1px var(--color-avatar-border);
 }
@@ -27,47 +27,47 @@
 .avatar-1,
 .avatar-2,
 .avatar-small {
-  border-radius: var(--borderRadius-small, 4px);
+  border-radius: var(--borderRadius-small);
 }
 
 /* Sizes */
 
 .avatar-1 {
-  width: var(--base-size-16, 16px);
-  height: var(--base-size-16, 16px);
+  width: var(--base-size-16);
+  height: var(--base-size-16);
 }
 
 .avatar-2 {
-  width: var(--base-size-20, 20px);
-  height: var(--base-size-20, 20px);
+  width: var(--base-size-20);
+  height: var(--base-size-20);
 }
 
 .avatar-3 {
-  width: var(--base-size-24, 24px);
-  height: var(--base-size-24, 24px);
+  width: var(--base-size-24);
+  height: var(--base-size-24);
 }
 
 .avatar-4 {
-  width: var(--base-size-28, 28px);
-  height: var(--base-size-28, 28px);
+  width: var(--base-size-28);
+  height: var(--base-size-28);
 }
 
 .avatar-5 {
-  width: var(--base-size-32, 32px);
-  height: var(--base-size-32, 32px);
+  width: var(--base-size-32);
+  height: var(--base-size-32);
 }
 
 .avatar-6 {
-  width: var(--base-size-40, 40px);
-  height: var(--base-size-40, 40px);
+  width: var(--base-size-40);
+  height: var(--base-size-40);
 }
 
 .avatar-7 {
-  width: var(--base-size-48, 48px);
-  height: var(--base-size-48, 48px);
+  width: var(--base-size-48);
+  height: var(--base-size-48);
 }
 
 .avatar-8 {
-  width: var(--base-size-64, 64px);
-  height: var(--base-size-64, 64px);
+  width: var(--base-size-64);
+  height: var(--base-size-64);
 }
diff --git a/app/components/primer/beta/avatar_stack.pcss b/app/components/primer/beta/avatar_stack.pcss
index 8ddcb11f8a..9aaac215de 100644
--- a/app/components/primer/beta/avatar_stack.pcss
+++ b/app/components/primer/beta/avatar_stack.pcss
@@ -35,8 +35,8 @@
     box-sizing: content-box;
     margin-right: -11px;
     background-color: var(--color-canvas-default);
-    border-right: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);
-    border-radius: var(--borderRadius-small, 4px);
+    border-right: var(--borderWidth-thin) solid var(--color-canvas-default);
+    border-radius: var(--borderRadius-small);
     box-shadow: none;
     transition: margin 0.1s ease-in-out;
 
@@ -50,7 +50,7 @@
     }
 
     & img {
-      border-radius: var(--borderRadius-small, 4px);
+      border-radius: var(--borderRadius-small);
     }
 
     /* Account for 4+ avatars */
@@ -88,7 +88,7 @@
     height: 20px;
     content: '';
     border-radius: 2px;
-    outline: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);
+    outline: var(--borderWidth-thin) solid var(--color-canvas-default);
   }
 
   &::before {
@@ -136,6 +136,6 @@
     margin-right: 0;
     margin-left: -11px;
     border-right: 0;
-    border-left: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);
+    border-left: var(--borderWidth-thin) solid var(--color-canvas-default);
   }
 }
diff --git a/app/components/primer/beta/blankslate.pcss b/app/components/primer/beta/blankslate.pcss
index 71fc48425e..64fffe3505 100644
--- a/app/components/primer/beta/blankslate.pcss
+++ b/app/components/primer/beta/blankslate.pcss
@@ -2,7 +2,7 @@
 
 .blankslate {
   position: relative;
-  padding: var(--base-size-32, 32px);
+  padding: var(--base-size-32);
   text-align: center;
 
   & p {
@@ -11,10 +11,10 @@
 
   & code {
     padding: 2px 5px 3px;
-    font-size: var(--text-body-size-medium, 14px);
+    font-size: var(--text-body-size-medium);
     background: var(--color-canvas-default);
-    border: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
-    border-radius: var(--borderRadius-medium, 6px);
+    border: var(--borderWidth-thin) solid var(--color-border-muted);
+    border-radius: var(--borderRadius-medium);
   }
 
   & img {
@@ -24,38 +24,38 @@
 }
 
 .blankslate-icon {
-  margin-right: var(--control-small-gap, 4px);
-  margin-bottom: var(--stack-gap-condensed, 8px);
-  margin-left: var(--control-small-gap, 4px);
+  margin-right: var(--control-small-gap);
+  margin-bottom: var(--stack-gap-condensed);
+  margin-left: var(--control-small-gap);
   color: var(--color-fg-muted);
 }
 
 .blankslate-image {
-  margin-bottom: var(--stack-gap-normal, 16px);
+  margin-bottom: var(--stack-gap-normal);
 }
 
 .blankslate-heading {
-  margin-bottom: var(--base-size-4, 4px);
+  margin-bottom: var(--base-size-4);
 }
 
 .blankslate-action {
-  margin-top: var(--stack-gap-normal, 16px);
+  margin-top: var(--stack-gap-normal);
 
   &:first-of-type {
-    margin-top: var(--stack-gap-spacious, 24px);
+    margin-top: var(--stack-gap-spacious);
   }
 
   &:last-of-type {
-    margin-bottom: var(--stack-gap-condensed, 8px);
+    margin-bottom: var(--stack-gap-condensed);
   }
 }
 
 .blankslate-capped {
-  border-radius: 0 0 var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px);
+  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
 }
 
 .blankslate-spacious {
-  padding: var(--base-size-80, 80px) var(--base-size-40, 40px);
+  padding: var(--base-size-80) var(--base-size-40);
 }
 
 .blankslate-narrow {
@@ -72,14 +72,14 @@
   }
 
   & h3 {
-    margin: var(--stack-gap-normal, 16px) 0;
+    margin: var(--stack-gap-normal) 0;
 
     /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
     font-size: 24px;
   }
 
   & p {
-    font-size: var(--text-body-size-large, 16px);
+    font-size: var(--text-body-size-large);
   }
 }
 
diff --git a/app/components/primer/beta/border_box.pcss b/app/components/primer/beta/border_box.pcss
index ea4373b5e4..60f48966ff 100644
--- a/app/components/primer/beta/border_box.pcss
+++ b/app/components/primer/beta/border_box.pcss
@@ -5,8 +5,8 @@
   background-color: var(--color-canvas-default);
   border-color: var(--color-border-default);
   border-style: solid;
-  border-width: var(--borderWidth-thin, 1px);
-  border-radius: var(--borderRadius-medium, 6px);
+  border-width: var(--borderWidth-thin);
+  border-radius: var(--borderRadius-medium);
 }
 
 /* Box padding density options */
@@ -14,106 +14,105 @@
   line-height: 1.25;
 
   & .Box-header {
-    padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
   }
 
   & .Box-body {
-    padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
   }
 
   & .Box-footer {
-    padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
   }
 
   & .Box-btn-octicon {
     &.btn-octicon {
-      padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);
-      margin: calc(var(--controlStack-medium-gap-condensed, 8px) * -1)
-        calc(var(--controlStack-small-gap-spacious, 16px) * -1);
+      padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
+      margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);
       line-height: 1.25;
     }
   }
 
   & .Box-row {
-    padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
   }
 }
 
 .Box--spacious {
   & .Box-header {
-    padding: var(--stack-padding-spacious, 24px);
+    padding: var(--stack-padding-spacious);
     line-height: 1.25;
   }
 
   & .Box-title {
-    font-size: var(--text-title-size-medium, 20px);
+    font-size: var(--text-title-size-medium);
   }
 
   & .Box-body {
-    padding: var(--stack-padding-spacious, 24px);
+    padding: var(--stack-padding-spacious);
   }
 
   & .Box-footer {
-    padding: var(--stack-padding-spacious, 24px);
+    padding: var(--stack-padding-spacious);
   }
 
   & .Box-btn-octicon {
     &.btn-octicon {
-      padding: var(--stack-padding-spacious, 24px);
-      margin: calc(var(--stack-gap-spacious, 24px) * -1) calc(var(--stack-gap-spacious, 24px) * -1);
+      padding: var(--stack-padding-spacious);
+      margin: calc(var(--stack-gap-spacious) * -1) calc(var(--stack-gap-spacious) * -1);
     }
   }
 
   & .Box-row {
-    padding: var(--stack-padding-spacious, 24px);
+    padding: var(--stack-padding-spacious);
   }
 }
 
 .Box-header {
-  padding: var(--stack-padding-normal, 16px);
-  margin: calc(var(--borderWidth-thin, 1px) * -1) calc(var(--borderWidth-thin, 1px) * -1) 0;
+  padding: var(--stack-padding-normal);
+  margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;
   background-color: var(--color-canvas-subtle);
   border-color: var(--color-border-default);
   border-style: solid;
-  border-width: var(--borderWidth-thin, 1px);
-  border-top-left-radius: var(--borderRadius-medium, 6px);
-  border-top-right-radius: var(--borderRadius-medium, 6px);
+  border-width: var(--borderWidth-thin);
+  border-top-left-radius: var(--borderRadius-medium);
+  border-top-right-radius: var(--borderRadius-medium);
 }
 
 .Box-title {
-  font-size: var(--text-body-size-medium, 14px);
-  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
 }
 
 .Box-body {
-  padding: var(--stack-padding-normal, 16px);
-  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  padding: var(--stack-padding-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--color-border-default);
 
   /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
   &:last-of-type {
-    margin-bottom: calc(var(--borderWidth-thin, 1px) * -1);
-    border-bottom-right-radius: var(--borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--borderRadius-medium, 6px);
+    margin-bottom: calc(var(--borderWidth-thin) * -1);
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
   }
 }
 
 /* Box rows */
 .Box-row {
-  padding: var(--stack-padding-normal, 16px);
-  margin-top: calc(var(--borderWidth-thin, 1px) * -1);
+  padding: var(--stack-padding-normal);
+  margin-top: calc(var(--borderWidth-thin) * -1);
   list-style-type: none; /* To account for applying Box component to a list */
   border-top-color: var(--color-border-muted);
   border-top-style: solid;
-  border-top-width: var(--borderWidth-thin, 1px);
+  border-top-width: var(--borderWidth-thin);
 
   &:first-of-type {
-    border-top-left-radius: var(--borderRadius-medium, 6px);
-    border-top-right-radius: var(--borderRadius-medium, 6px);
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
   }
 
   &:last-of-type {
-    border-bottom-right-radius: var(--borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--borderRadius-medium, 6px);
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
   }
 
   /* Adds a blue vertical line to the left of the row
@@ -200,12 +199,12 @@
 }
 
 .Box-footer {
-  padding: var(--stack-padding-normal, 16px);
-  margin-top: calc(var(--borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */
+  padding: var(--stack-padding-normal);
+  margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */
   border-top-color: var(--color-border-default);
   border-top-style: solid;
-  border-top-width: var(--borderWidth-thin, 1px);
-  border-radius: 0 0 var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px);
+  border-top-width: var(--borderWidth-thin);
+  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
 }
 
 /* Option for a box with scrolling content */
@@ -278,9 +277,8 @@
 .Box-btn-octicon {
   /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
   &.btn-octicon {
-    padding: var(--control-medium-paddingInline-spacious, 16px) var(--control-medium-paddingInline-spacious, 16px);
-    margin: calc(var(--controlStack-small-gap-spacious, 16px) * -1)
-      calc(var(--controlStack-small-gap-spacious, 16px) * -1);
+    padding: var(--control-medium-paddingInline-spacious) var(--control-medium-paddingInline-spacious);
+    margin: calc(var(--controlStack-small-gap-spacious) * -1) calc(var(--controlStack-small-gap-spacious) * -1);
     line-height: 1.5; /* override btn-octicon line-height */
   }
 }
diff --git a/app/components/primer/beta/button.pcss b/app/components/primer/beta/button.pcss
index a1cdb9f349..0911c90ebc 100644
--- a/app/components/primer/beta/button.pcss
+++ b/app/components/primer/beta/button.pcss
@@ -9,25 +9,25 @@
 /* base button */
 .Button {
   position: relative;
-  font-size: var(--text-body-size-medium, 14px);
-  font-weight: var(--base-text-weight-medium, 500);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
   cursor: pointer;
   user-select: none;
   background-color: transparent;
-  border: var(--borderWidth-thin, 1px) solid;
+  border: var(--borderWidth-thin) solid;
   border-color: transparent;
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
   color: var(--color-btn-text);
   transition: var(--duration-fast) var(--easing-easeInOut);
   transition-property: color, fill, background-color, border-color;
   text-align: center;
-  height: var(--control-medium-size, 32px);
-  padding: 0 var(--control-medium-paddingInline-normal, 12px);
+  height: var(--control-medium-size);
+  padding: 0 var(--control-medium-paddingInline-normal);
   display: inline-flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  gap: var(--base-size-4, 4px);
+  gap: var(--base-size-4);
   min-width: max-content;
 
   /* mobile friendly sizing */
@@ -78,7 +78,7 @@ summary.Button {
   /* padding-bottom: 1px; optical alignment for firefox */
 
   & > :not(:last-child) {
-    margin-right: var(--control-medium-gap, 8px);
+    margin-right: var(--control-medium-gap);
   }
 }
 
@@ -103,7 +103,7 @@ summary.Button {
 .Button-label {
   grid-area: text;
   white-space: nowrap;
-  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
+  line-height: var(--text-body-lineHeight-medium);
 }
 
 .Button-leadingVisual {
@@ -115,40 +115,40 @@ summary.Button {
 }
 
 .Button-trailingAction {
-  margin-right: calc(var(--base-size-4, 4px) * -1);
+  margin-right: calc(var(--base-size-4) * -1);
 }
 
 /* sizes */
 
 .Button--small {
-  font-size: var(--text-body-size-small, 12px);
-  height: var(--control-small-size, 28px);
-  padding: 0 var(--control-small-paddingInline-condensed, 8px);
-  gap: var(--control-small-gap, 4px);
+  font-size: var(--text-body-size-small);
+  height: var(--control-small-size);
+  padding: 0 var(--control-small-paddingInline-condensed);
+  gap: var(--control-small-gap);
 
   & .Button-label {
-    line-height: var(--text-body-lineHeight-small, calc(20 / 12));
+    line-height: var(--text-body-lineHeight-small);
   }
 
   & .Button-content {
     & > :not(:last-child) {
-      margin-right: var(--control-small-gap, 4px);
+      margin-right: var(--control-small-gap);
     }
   }
 }
 
 .Button--large {
-  height: var(--control-large-size, 40px);
-  padding: 0 var(--control-large-paddingInline-spacious, 16px);
-  gap: var(--control-large-gap, 8px);
+  height: var(--control-large-size);
+  padding: 0 var(--control-large-paddingInline-spacious);
+  gap: var(--control-large-gap);
 
   & .Button-label {
-    line-height: var(--text-body-lineHeight-large, calc(48 / 32));
+    line-height: var(--text-body-lineHeight-large);
   }
 
   & .Button-content {
     & > :not(:last-child) {
-      margin-right: var(--control-large-gap, 8px);
+      margin-right: var(--control-large-gap);
     }
   }
 }
@@ -354,13 +354,13 @@ summary.Button {
   display: inline-grid;
   place-content: center;
   padding: unset;
-  width: var(--control-medium-size, 32px);
+  width: var(--control-medium-size);
 
   &.Button--small {
-    width: var(--control-small-size, 28px);
+    width: var(--control-small-size);
   }
 
   &.Button--large {
-    width: var(--control-large-size, 40px);
+    width: var(--control-large-size);
   }
 }
diff --git a/app/components/primer/beta/button_group.pcss b/app/components/primer/beta/button_group.pcss
index c40abca6d8..c26d973cd9 100644
--- a/app/components/primer/beta/button_group.pcss
+++ b/app/components/primer/beta/button_group.pcss
@@ -15,14 +15,13 @@
 
   & > :first-child,
   & > :first-child.Button-withTooltip button {
-    border-top-left-radius: var(--borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--borderRadius-medium, 6px);
+    border-top-left-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
   }
 
   & > :last-child,
   & > :last-child.Button-withTooltip button {
-    border-top-right-radius: var(--borderRadius-medium, 6px);
-    border-bottom-right-radius: var(--borderRadius-medium, 6px);
+    border-top-right-radius: var(--borderRadius-medium);
+    border-bottom-right-radius: var(--borderRadius-medium);
   }
-
 }
diff --git a/app/components/primer/beta/counter.pcss b/app/components/primer/beta/counter.pcss
index 786f7b2cd3..f21e0494f6 100644
--- a/app/components/primer/beta/counter.pcss
+++ b/app/components/primer/beta/counter.pcss
@@ -2,15 +2,15 @@
 
 .Counter {
   display: inline-block;
-  min-width: var(--base-size-20, 20px); /* makes sure it's a circle with just one digit */
+  min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */
   padding: 0 6px;
-  font-size: var(--text-body-size-small, 12px);
-  font-weight: var(--base-text-weight-medium, 500);
-  line-height: calc(var(--base-size-20, 20px) - var(--borderWidth-thin, 1px) * 2); /* 20px - 2px for the borders */
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-medium);
+  line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */
   color: var(--color-fg-default);
   text-align: center;
   background-color: var(--color-neutral-muted);
-  border: var(--borderWidth-thin, 1px) solid var(--color-counter-border);
+  border: var(--borderWidth-thin) solid var(--color-counter-border);
   border-radius: 2em;
 
   &:empty {
diff --git a/app/components/primer/beta/flash.pcss b/app/components/primer/beta/flash.pcss
index 2d43e7e5ed..e1b7d1c3fd 100644
--- a/app/components/primer/beta/flash.pcss
+++ b/app/components/primer/beta/flash.pcss
@@ -3,10 +3,10 @@
 /* Default flash */
 .flash:not(.Banner) {
   position: relative;
-  padding: var(--base-size-20, 20px) var(--control-medium-paddingInline-spacious, 16px);
+  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);
   border-style: solid;
-  border-width: var(--borderWidth-thin, 1px);
-  border-radius: var(--borderRadius-medium, 6px);
+  border-width: var(--borderWidth-thin);
+  border-radius: var(--borderRadius-medium);
 
   /* Default color */
   color: var(--color-fg-default);
@@ -15,7 +15,7 @@
 
   & .octicon {
     color: var(--color-accent-fg);
-    margin-right: var(--base-size-12, 12px);
+    margin-right: var(--base-size-12);
   }
 
   & p:last-child {
@@ -25,14 +25,14 @@
 
 /* Contain the flash messages */
 .flash-messages {
-  margin-bottom: var(--stack-gap-spacious, 24px);
+  margin-bottom: var(--stack-gap-spacious);
 }
 
 /* Close button */
 .flash-close:not(.Banner-close) {
   float: right;
-  padding: var(--control-medium-paddingInline-spacious, 16px);
-  margin: calc(var(--control-medium-paddingInline-spacious, 16px) * -1);
+  padding: var(--control-medium-paddingInline-spacious);
+  margin: calc(var(--control-medium-paddingInline-spacious) * -1);
   text-align: center;
   cursor: pointer;
 
@@ -58,11 +58,11 @@
 .flash-action:not(.Banner-actions) {
   float: right;
   margin-top: -3px;
-  margin-left: var(--stack-gap-spacious, 24px);
+  margin-left: var(--stack-gap-spacious);
   background-clip: padding-box;
 
   &.btn .octicon {
-    margin-right: var(--control-small-gap, 4px);
+    margin-right: var(--control-small-gap);
     color: var(--color-fg-muted);
   }
 
@@ -110,8 +110,8 @@
 /* Layout variations */
 
 .flash-full:not(.Banner) {
-  margin-top: calc(var(--borderWidth-thin, 1px) * -1);
-  border-width: var(--borderWidth-thin, 1px) 0;
+  margin-top: calc(var(--borderWidth-thin) * -1);
+  border-width: var(--borderWidth-thin) 0;
   border-radius: 0;
 }
 
@@ -137,6 +137,6 @@
 .warning {
   padding: 0.5em;
   margin-bottom: 0.8em;
-  font-weight: var(--base-text-weight-semibold, 600);
+  font-weight: var(--base-text-weight-semibold);
   background-color: var(--color-attention-subtle);
 }
diff --git a/app/components/primer/beta/label.pcss b/app/components/primer/beta/label.pcss
index 1c90d645cc..833f1b54e6 100644
--- a/app/components/primer/beta/label.pcss
+++ b/app/components/primer/beta/label.pcss
@@ -11,11 +11,11 @@
 .Label {
   display: inline-block;
   padding: 0 7px;
-  font-size: var(--text-body-size-small, 12px);
-  font-weight: var(--base-text-weight-medium, 500);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-medium);
   line-height: 18px;
   white-space: nowrap;
-  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  border: var(--borderWidth-thin) solid var(--color-border-default);
   border-radius: 2em;
 
   &:hover {
diff --git a/app/components/primer/beta/popover.pcss b/app/components/primer/beta/popover.pcss
index 53aba38d15..b26ed13e07 100644
--- a/app/components/primer/beta/popover.pcss
+++ b/app/components/primer/beta/popover.pcss
@@ -11,8 +11,8 @@
   margin-right: auto;
   margin-left: auto;
   background-color: var(--color-canvas-overlay);
-  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--borderRadius-medium, 6px);
+  border: var(--borderWidth-thin) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium);
 
   /* Carets */
   &::before,
@@ -209,12 +209,12 @@
     bottom: auto;
     left: auto;
     width: auto !important;
-    margin: var(--stack-gap-condensed, 8px);
+    margin: var(--stack-gap-condensed);
   }
 
   /* Increase tap area for touch input */
   .Popover-message > .btn-octicon {
-    padding: var(--control-medium-paddingInline-normal, 12px) !important;
+    padding: var(--control-medium-paddingInline-normal) !important;
   }
 
   /* Remove caret */
diff --git a/app/components/primer/beta/state.pcss b/app/components/primer/beta/state.pcss
index 60b831f35e..632a9730bf 100644
--- a/app/components/primer/beta/state.pcss
+++ b/app/components/primer/beta/state.pcss
@@ -5,10 +5,10 @@
 .state, /* TODO: Deprecate */
 .State {
   display: inline-block;
-  padding: 5px var(--control-medium-paddingInline-normal, 12px);
-  font-size: var(--text-body-size-medium, 14px);
-  font-weight: var(--base-text-weight-medium, 500);
-  line-height: var(--control-medium-lineBoxHeight, 20px);
+  padding: 5px var(--control-medium-paddingInline-normal);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
+  line-height: var(--control-medium-lineBoxHeight);
   text-align: center;
   white-space: nowrap;
   border-radius: 2em;
@@ -19,7 +19,7 @@
 .State--draft {
   color: var(--color-fg-on-emphasis);
   background-color: var(--color-neutral-emphasis);
-  border: var(--borderWidth-thin, 1px) solid transparent;
+  border: var(--borderWidth-thin) solid transparent;
 }
 
 .State--open {
@@ -41,8 +41,8 @@
 
 .State--small {
   padding: 0 10px;
-  font-size: var(--text-body-size-small, 12px);
-  line-height: var(--base-size-24, 24px);
+  font-size: var(--text-body-size-small);
+  line-height: var(--base-size-24);
 
   & .octicon {
     width: 1em; /* Ensures different icons don't change State indicator width */
diff --git a/app/components/primer/beta/subhead.pcss b/app/components/primer/beta/subhead.pcss
index d5fc2a4f21..b686200bf6 100644
--- a/app/components/primer/beta/subhead.pcss
+++ b/app/components/primer/beta/subhead.pcss
@@ -2,35 +2,35 @@
 
 .Subhead {
   display: flex;
-  padding-bottom: var(--stack-padding-condensed, 8px);
-  margin-bottom: var(--stack-gap-normal, 16px);
-  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
+  padding-bottom: var(--stack-padding-condensed);
+  margin-bottom: var(--stack-gap-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);
   flex-flow: row wrap;
   justify-content: flex-end; /* Keep actions right aligned. */
 }
 
 /* Modifier class to give a lot of breathing room between sections of content. */
 .Subhead--spacious {
-  margin-top: var(--base-size-40, 40px);
+  margin-top: var(--base-size-40);
 }
 
 /* <h2> sized heading with normal font weight */
 .Subhead-heading {
   font-size: 24px;
-  font-weight: var(--base-text-weight-normal, 400);
+  font-weight: var(--base-text-weight-normal);
   flex: 1 1 auto;
   order: 0;
 }
 
 /* Make the text bold and red for dangerous content */
 .Subhead-heading--danger {
-  font-weight: var(--base-text-weight-semibold, 600);
+  font-weight: var(--base-text-weight-semibold);
   color: var(--color-danger-fg);
 }
 
 /* One-liner of supporting text */
 .Subhead-description {
-  font-size: var(--text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium);
   color: var(--color-fg-muted);
   flex: 1 100%;
   order: 2;
@@ -38,12 +38,12 @@
 
 /* Add 1 or 2 buttons to the right of the heading */
 .Subhead-actions {
-  margin: var(--base-size-4, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);
+  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
   align-self: center;
   justify-content: flex-end;
   order: 1;
 
   & + .Subhead-description {
-    margin-top: var(--base-size-4, 4px);
+    margin-top: var(--base-size-4);
   }
 }
diff --git a/app/components/primer/beta/timeline_item.pcss b/app/components/primer/beta/timeline_item.pcss
index 5b7bb75d42..890b5b8588 100644
--- a/app/components/primer/beta/timeline_item.pcss
+++ b/app/components/primer/beta/timeline_item.pcss
@@ -3,8 +3,8 @@
 .TimelineItem {
   position: relative;
   display: flex;
-  padding: var(--stack-padding-normal, 16px) 0;
-  margin-left: var(--stack-gap-normal, 16px);
+  padding: var(--stack-padding-normal) 0;
+  margin-left: var(--stack-gap-normal);
 
   /* The Timeline */
   &::before {
@@ -13,7 +13,7 @@
     bottom: 0;
     left: 0;
     display: block;
-    width: var(--borderWidth-thick, 2px);
+    width: var(--borderWidth-thick);
     content: '';
     background-color: var(--color-border-muted);
   }
@@ -28,14 +28,14 @@
   position: relative;
   z-index: 1;
   display: flex;
-  width: var(--control-medium-size, 32px);
-  height: var(--control-medium-size, 32px);
-  margin-right: var(--controlStack-medium-gap-condensed, 8px);
-  margin-left: calc(var(--control-medium-size, 32px) / -2 + 1px);
+  width: var(--control-medium-size);
+  height: var(--control-medium-size);
+  margin-right: var(--controlStack-medium-gap-condensed);
+  margin-left: calc(var(--control-medium-size) / -2 + 1px);
   color: var(--color-fg-muted);
   align-items: center;
   background-color: var(--color-timeline-badge-bg);
-  border: var(--borderWidth-thick, 2px) solid var(--color-canvas-default);
+  border: var(--borderWidth-thick) solid var(--color-canvas-default);
   border-radius: 50%;
   justify-content: center;
   flex-shrink: 0;
@@ -44,13 +44,13 @@
 .TimelineItem-badge--success {
   color: var(--color-fg-on-emphasis);
   background-color: var(--color-success-emphasis);
-  border: var(--borderWidth-thin, 1px) solid transparent;
+  border: var(--borderWidth-thin) solid transparent;
 }
 
 .TimelineItem-body {
   min-width: 0;
   max-width: 100%;
-  margin-top: var(--base-size-4, 4px);
+  margin-top: var(--base-size-4);
   color: var(--color-fg-muted);
   flex: auto;
 }
@@ -64,28 +64,28 @@
 .TimelineItem-break {
   position: relative;
   z-index: 1;
-  height: var(--stack-gap-spacious, 24px);
+  height: var(--stack-gap-spacious);
   margin: 0;
-  margin-bottom: calc(var(--stack-gap-normal, 16px) * -1);
+  margin-bottom: calc(var(--stack-gap-normal) * -1);
   margin-left: -56px;
   background-color: var(--color-canvas-default);
   border: 0;
-  border-top: var(--borderWidth-thicker, 4px) solid var(--color-border-default);
+  border-top: var(--borderWidth-thicker) solid var(--color-border-default);
 }
 
 .TimelineItem--condensed {
-  padding-top: var(--base-size-4, 4px);
+  padding-top: var(--base-size-4);
   padding-bottom: 0;
 
   /* TimelineItem--condensed is often grouped. (commits) */
   &:last-child {
-    padding-bottom: var(--stack-gap-normal, 16px);
+    padding-bottom: var(--stack-gap-normal);
   }
 
   & .TimelineItem-badge {
-    height: var(--base-size-16, 16px);
-    margin-top: var(--base-size-8, 8px);
-    margin-bottom: var(--base-size-8, 8px);
+    height: var(--base-size-16);
+    margin-top: var(--base-size-8);
+    margin-bottom: var(--base-size-8);
     color: var(--color-fg-muted);
     background-color: var(--color-canvas-default);
     border: 0;
diff --git a/app/components/primer/beta/truncate.pcss b/app/components/primer/beta/truncate.pcss
index d421bfa432..ec390ccb04 100644
--- a/app/components/primer/beta/truncate.pcss
+++ b/app/components/primer/beta/truncate.pcss
@@ -13,7 +13,7 @@
     white-space: nowrap;
 
     & + .Truncate-text {
-      margin-left: var(--control-small-gap, 4px);
+      margin-left: var(--control-small-gap);
     }
 
     &.Truncate-text--primary {
diff --git a/lib/postcss_mixins/activeIndicatorLine.pcss b/lib/postcss_mixins/activeIndicatorLine.pcss
index 97b15a0d9e..5148b55c8d 100644
--- a/lib/postcss_mixins/activeIndicatorLine.pcss
+++ b/lib/postcss_mixins/activeIndicatorLine.pcss
@@ -1,11 +1,11 @@
 /* active indicator line for navlist items */
-@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8, 8px)) {
+@define-mixin activeIndicatorLine $padding-left: calc(-1 * var(--base-size-8)) {
   position: absolute;
   top: calc(50% - 12px);
   left: $padding-left;
-  width: var(--base-size-4, 4px);
-  height: var(--base-size-24, 24px);
+  width: var(--base-size-4);
+  height: var(--base-size-24);
   content: '';
   background: var(--color-accent-fg);
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
 }
diff --git a/postcss.config.js b/postcss.config.js
index 0b1a0c3ea8..4107514bd5 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,5 @@
 const path = require('path')
-const importedJSONFromPrimitives = require('./node_modules/@primer/primitives/tokens-next-private/fallbacks/color-fallbacks.json')
+const fs = require('fs')
 
 module.exports = {
   map: {
@@ -8,27 +8,50 @@ module.exports = {
   plugins: [
     require('postcss-import'),
     require('postcss-mixins')({
-        mixinsDir: path.join(__dirname, './lib/postcss_mixins/')
+      mixinsDir: path.join(__dirname, './lib/postcss_mixins/')
     }),
     require('postcss-custom-properties-fallback')({
-      importFrom: {
-        customProperties: importedJSONFromPrimitives
-      },
+      importFrom: [
+        () => {
+          const primitiveFallbacks = [
+            'color-fallbacks.json',
+            'base/size/size.json',
+            'base/typography/typography.json',
+            'functional/size/border.json',
+            'functional/size/breakpoints.json',
+            'functional/size/size-coarse.json',
+            'functional/size/size-fine.json',
+            'functional/size/size.json',
+            'functional/size/viewport.json',
+            'functional/typography/typography.json',
+          ]
+          let customProperties = {}
+          for (const filePath of primitiveFallbacks) {
+            const fileData = fs.readFileSync(path.join(__dirname, './node_modules/@primer/primitives/tokens-next-private/fallbacks/', filePath), 'utf8')
+            customProperties = {...customProperties, ...JSON.parse(fileData)}
+          }
+
+          return { customProperties: customProperties };
+        }
+      ]
     }),
     require('postcss-preset-env')({
       stage: 2,
       // https://preset-env.cssdb.org/features/#stage-2
       features: {
-        'nesting-rules': { noIsPseudoSelector: true },
+        'nesting-rules': {noIsPseudoSelector: true},
         'focus-visible-pseudo-class': false,
         'logical-properties-and-values': false,
-        'custom-media-queries':  {
+        'custom-media-queries': {
           importFrom: [
-            path.join(__dirname, './node_modules/@primer/primitives/tokens-next-private/css/functional/size/viewport.css')
+            path.join(
+              __dirname,
+              './node_modules/@primer/primitives/tokens-next-private/css/functional/size/viewport.css'
+            )
           ]
-        },
+        }
       }
     }),
     process.env.CI === 'true' ? require('cssnano') : null
-  ],
-};
+  ]
+}