diff --git a/.changeset/twelve-badgers-beg.md b/.changeset/twelve-badgers-beg.md
new file mode 100644
index 0000000000..c7f6028bca
--- /dev/null
+++ b/.changeset/twelve-badgers-beg.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Upgrade Primitives and PCSS, rename tokens to pre-v8 release
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/auto_complete_item/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/auto_complete_item/default.png
index 5ede11aa65..9716205221 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/auto_complete_item/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/auto_complete_item/default.png differ
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/auto_complete_item/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/auto_complete_item/focused.png
index f4bfd2c534..59a7ef0d28 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/auto_complete_item/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/auto_complete_item/focused.png differ
diff --git a/app/components/primer/alpha/action_list.pcss b/app/components/primer/alpha/action_list.pcss
index 03f7d6e723..89b79b6641 100644
--- a/app/components/primer/alpha/action_list.pcss
+++ b/app/components/primer/alpha/action_list.pcss
@@ -1,5 +1,5 @@
 :root {
-  --primer-actionListContent-paddingBlock: var(--primer-control-medium-paddingBlock, 6px);
+  --actionListContent-paddingBlock: var(--control-medium-paddingBlock, 6px);
 }
 
 /* ActionList */
@@ -18,7 +18,7 @@
 .ActionListWrap--divided {
   & .ActionListItem-label::before {
     position: absolute;
-    top: calc(-1 * var(--primer-actionListContent-paddingBlock));
+    top: calc(-1 * var(--actionListContent-paddingBlock));
     display: block;
     width: 100%;
     height: 1px;
@@ -30,10 +30,10 @@
   & .ActionListItem-descriptionWrap--inline {
     &::before {
       position: absolute;
-      top: calc(-1 * var(--primer-actionListContent-paddingBlock));
+      top: calc(-1 * var(--actionListContent-paddingBlock));
       display: block;
       width: 100%;
-      height: var(--primer-borderWidth-thin, 1px);
+      height: var(--borderWidth-thin, 1px);
       content: '';
       background: var(--color-action-list-item-inline-divider);
     }
@@ -71,7 +71,7 @@
   position: relative;
   list-style: none;
   background-color: transparent;
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium, 6px);
 
   /* state */
 
@@ -129,9 +129,9 @@
 
         &:not(.ActionListItem--navActive, :focus-visible) {
           /* Support for "Windows high contrast mode" */
-          outline: solid var(--primer-borderWidth-thin, 1px) transparent;
-          outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));
-          box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
+          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);
         }
       }
     }
@@ -141,9 +141,9 @@
 
       &:not(.ActionListItem--navActive) {
         /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
-        outline: solid var(--primer-borderWidth-thin, 1px) transparent;
-        outline-offset: calc(-1 * var(--primer-borderWidth-thin, 1px));
-        box-shadow: var(--primer-borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
+        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);
       }
 
       & .ActionListItem-label::before,
@@ -189,7 +189,7 @@
       & .ActionListItem-multiSelectIconRect {
         fill: var(--color-accent-fg);
         stroke: var(--color-accent-fg);
-        stroke-width: var(--primer-borderWidth-thin, 1px);
+        stroke-width: var(--borderWidth-thin, 1px);
       }
 
       & .ActionListItem-multiSelectCheckmark {
@@ -232,13 +232,13 @@
       & .ActionListItem-multiSelectIconRect {
         fill: var(--color-canvas-default);
         stroke: var(--color-border-default);
-        stroke-width: var(--primer-borderWidth-thin, 1px);
+        stroke-width: var(--borderWidth-thin, 1px);
       }
     }
 
     & .ActionListItem-multiSelectIconRect {
       fill: var(--color-canvas-default);
-      border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+      border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
     }
   }
 
@@ -360,14 +360,14 @@
   position: relative;
   display: grid;
   width: 100%;
-  padding-block: var(--primer-actionListContent-paddingBlock);
-  padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
+  padding-block: var(--actionListContent-paddingBlock);
+  padding-inline: var(--control-medium-paddingInline-condensed, 8px);
   color: var(--color-fg-default);
   text-align: left;
   user-select: none;
   background-color: transparent;
   border: none;
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium, 6px);
   transition: background 33.333ms linear;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
@@ -378,7 +378,7 @@
 
   /* column-gap persists with empty grid-areas, margin applies only when children exist */
   & > :not(:last-child) {
-    margin-right: var(--primer-control-medium-gap, 8px);
+    margin-right: var(--control-medium-gap, 8px);
   }
 
   /* state */
@@ -501,16 +501,16 @@
   /* sizes */
 
   &.ActionListContent--sizeLarge {
-    --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
+    --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
   }
 
   &.ActionListContent--sizeXLarge {
-    --primer-actionListContent-paddingBlock: var(--primer-control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));
+    --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));
   }
 
   /* On pointer:coarse (mobile), all list items are large */
   @media (pointer: coarse) {
-    --primer-actionListContent-paddingBlock: var(--primer-control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
+    --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
   }
 
   &.ActionListContent--blockDescription {
@@ -562,9 +562,9 @@
 
 /* description */
 .ActionListItem-description {
-  font-size: var(--primer-text-body-size-small, 12px);
+  font-size: var(--text-body-size-small, 12px);
   font-weight: var(--base-text-weight-normal, 400);
-  line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));
+  line-height: var(--text-body-lineHeight-small, calc(20 / 12));
   color: var(--color-fg-muted);
 }
 
@@ -573,7 +573,7 @@
 .ActionListItem-visual,
 .ActionListItem-action {
   display: flex;
-  min-height: var(--primer-control-medium-lineBoxHeight, 20px);
+  min-height: var(--control-medium-lineBoxHeight, 20px);
   color: var(--color-fg-muted);
   pointer-events: none;
   fill: var(--color-fg-muted);
@@ -583,9 +583,9 @@
 /* text */
 .ActionListItem-label {
   position: relative;
-  font-size: var(--primer-text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium, 14px);
   font-weight: var(--base-text-weight-normal, 400);
-  line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));
+  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
   color: var(--color-fg-default);
   grid-area: label;
 }
@@ -600,8 +600,8 @@
  target ActionListItem--subItem for padding-left to maintain :active :after state */
 
 .ActionListItem--subItem > .ActionListContent > .ActionListItem-label {
-  font-size: var(--primer-text-body-size-small, 12px);
-  line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));
+  font-size: var(--text-body-size-small, 12px);
+  line-height: var(--text-body-lineHeight-small, calc(20 / 12));
 }
 
 /* trailing action icon button */
@@ -638,10 +638,10 @@
   /* with children */
   &:not(:empty) {
     display: flex;
-    padding-inline: var(--primer-actionListContent-paddingBlock);
+    padding-inline: var(--actionListContent-paddingBlock);
     padding-block: var(--base-size-8, 8px);
-    font-size: var(--primer-text-body-size-small, 12px);
-    line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));
+    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);
     color: var(--color-fg-muted);
     flex-direction: column;
@@ -650,9 +650,9 @@
   /* no children */
   &:empty {
     display: block;
-    height: var(--primer-borderWidth-thin, 1px);
+    height: var(--borderWidth-thin, 1px);
     padding: 0;
-    margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));
+    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));
     list-style: none;
@@ -661,19 +661,19 @@
   }
 
   & .ActionList-sectionDivider-title {
-    font-size: var(--primer-text-body-size-small, 12px);
+    font-size: var(--text-body-size-small, 12px);
     font-weight: var(--base-text-weight-semibold, 600);
     color: var(--color-fg-muted);
   }
 }
 
 .ActionList-sectionDivider--filled {
-  margin-block-start: calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));
+  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));
   background: var(--color-canvas-subtle);
-  border-top: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
-  border-bottom: solid var(--primer-borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
+  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);
 
   /* if no children, treat as divider */
   &:empty {
diff --git a/app/components/primer/alpha/auto_complete.pcss b/app/components/primer/alpha/auto_complete.pcss
index 6ea46502d3..52808ab45b 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(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium, 6px);
   box-shadow: var(--color-shadow-medium);
 }
 
diff --git a/app/components/primer/alpha/banner.pcss b/app/components/primer/alpha/banner.pcss
index f6014ed751..852ddca425 100644
--- a/app/components/primer/alpha/banner.pcss
+++ b/app/components/primer/alpha/banner.pcss
@@ -6,11 +6,11 @@
   padding: var(--base-size-8, 8px);
   color: var(--color-fg-default);
   background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
-  border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);
+  border-radius: var(--borderRadius-medium, 6px);
   grid-auto-flow: column;
   grid-template-areas: 'visual message actions close';
-  grid-template-columns: min-content 1fr minmax(0,auto) min-content;
+  grid-template-columns: min-content 1fr minmax(0, auto) min-content;
   grid-template-rows: min-content;
 
   /* `sm` breakpoint variantion */
@@ -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, 8px) 0 0 var(--base-size-8, 8px);
     }
   }
 
@@ -69,7 +69,7 @@
   /* is this used anywhere? could not find any use, but unsure */
   & .Banner-close {
     grid-area: close;
-    margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);
+    margin-left: var(--controlStack-medium-gap-condensed, 8px);
   }
 
   & .Banner-visual .octicon {
@@ -109,7 +109,7 @@
   /* Full-width */
 
   &.Banner--full {
-    margin-top: calc(var(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);
+    margin-top: calc(var(--borderWidth-thin, max(1px, 0.0625rem)) * -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(--primer-borderWidth-thin, max(1px, 0.0625rem)) * -1);
+      margin-top: calc(var(--borderWidth-thin, max(1px, 0.0625rem)) * -1);
       border-right: 0;
       border-left: 0;
       border-radius: 0;
diff --git a/app/components/primer/alpha/dialog.pcss b/app/components/primer/alpha/dialog.pcss
index 3265abba1f..e4d384c13f 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(--primer-borderRadius-large, 12px);
+  border-radius: var(--borderRadius-large, 12px);
   box-shadow: var(--color-overlay-shadow);
   opacity: 1;
 
@@ -154,25 +154,25 @@
   flex-direction: column;
 
   &.Overlay-header--divided {
-    padding-bottom: var(--primer-stack-padding-condensed, 8px);
-    box-shadow: inset 0 calc(var(--primer-borderWidth-thin, 1px) * -1) var(--color-border-default);
+    padding-bottom: var(--stack-padding-condensed, 8px);
+    box-shadow: inset 0 calc(var(--borderWidth-thin, 1px) * -1) var(--color-border-default);
 
     & + .Overlay-body {
-      padding-top: var(--primer-stack-padding-normal, 16px);
+      padding-top: var(--stack-padding-normal, 16px);
     }
   }
 
   &.Overlay-header--large {
     & .Overlay-headerContentWrap {
       & .Overlay-titleWrap {
-        gap: var(--primer-stack-gap-condensed, 8px);
+        gap: var(--stack-gap-condensed, 8px);
 
         & .Overlay-title {
-          font-size: var(--primer-text-title-size-medium, 20px);
+          font-size: var(--text-title-size-medium, 20px);
         }
 
         & .Overlay-description {
-          font-size: var(--primer-text-body-size-medium, 14px);
+          font-size: var(--text-body-size-medium, 14px);
         }
       }
     }
@@ -181,31 +181,32 @@
   & .Overlay-headerContentWrap {
     display: flex;
     align-items: flex-start;
-    gap: var(--primer-stack-gap-condensed, 8px);
-    padding: var(--primer-stack-gap-condensed, 8px) var(--primer-stack-gap-condensed, 8px) 0 var(--primer-stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed, 8px);
+    padding: var(--stack-gap-condensed, 8px) var(--stack-gap-condensed, 8px) 0 var(--stack-gap-condensed, 8px);
 
     & .Overlay-actionWrap {
       display: flex;
       flex-direction: row;
-      gap: var(--primer-stack-gap-condensed, 8px);
+      gap: var(--stack-gap-condensed, 8px);
     }
 
     & .Overlay-titleWrap {
       display: flex;
-      padding: calc(var(--primer-stack-gap-condensed, 8px) * 0.75) 0 calc(var(--primer-stack-gap-condensed, 8px) * 0.75) var(--primer-stack-gap-condensed, 8px);
+      padding: calc(var(--stack-gap-condensed, 8px) * 0.75) 0 calc(var(--stack-gap-condensed, 8px) * 0.75)
+        var(--stack-gap-condensed, 8px);
       flex-direction: column;
       flex-grow: 1;
-      gap: var(--primer-control-small-gap, 4px);
+      gap: var(--control-small-gap, 4px);
 
       & .Overlay-title {
         margin: 0;
-        font-size: var(--primer-text-body-size-medium, 14px);
+        font-size: var(--text-body-size-medium, 14px);
         font-weight: var(--base-text-weight-semibold, 600);
       }
 
       & .Overlay-description {
         margin: 0;
-        font-size: var(--primer-text-body-size-small, 12px);
+        font-size: var(--text-body-size-small, 12px);
         font-weight: var(--base-text-weight-normal, 400);
         color: var(--color-fg-muted);
       }
@@ -215,15 +216,15 @@
 
 /* generic body content slot */
 .Overlay-body {
-  padding: var(--primer-stack-padding-normal, 16px);
+  padding: var(--stack-padding-normal, 16px);
   padding-top: 0;
   overflow-y: auto;
   scrollbar-width: thin;
-  font-size: var(--primer-text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium, 14px);
   flex-grow: 1;
 
   &.Overlay-body--paddingCondensed {
-    padding: var(--primer-stack-padding-condensed, 8px);
+    padding: var(--stack-padding-condensed, 8px);
     padding-top: 0;
   }
 
@@ -236,29 +237,29 @@
 .Overlay-footer {
   z-index: 1;
   display: flex;
-  padding: 0 var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px) var(--primer-stack-padding-normal, 16px);
+  padding: 0 var(--stack-padding-normal, 16px) var(--stack-padding-normal, 16px) var(--stack-padding-normal, 16px);
   flex-direction: row;
   flex-shrink: 0;
   flex-wrap: wrap;
 
   &.Overlay-footer--divided {
-    padding-top: var(--primer-stack-padding-normal, 16px);
-    box-shadow: inset 0 var(--primer-borderWidth-thin, 1px) var(--color-border-default);
+    padding-top: var(--stack-padding-normal, 16px);
+    box-shadow: inset 0 var(--borderWidth-thin, 1px) var(--color-border-default);
   }
 
   &.Overlay-footer--alignStart {
     justify-content: flex-start;
-    gap: var(--primer-stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed, 8px);
   }
 
   &.Overlay-footer--alignCenter {
     justify-content: center;
-    gap: var(--primer-stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed, 8px);
   }
 
   &.Overlay-footer--alignEnd {
     justify-content: flex-end;
-    gap: var(--primer-stack-gap-condensed, 8px);
+    gap: var(--stack-gap-condensed, 8px);
   }
 }
 
@@ -273,8 +274,8 @@
   cursor: pointer;
   user-select: none;
   background-color: transparent;
-  border: var(--primer-borderWidth-thin, 1px) solid transparent;
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, 1px) solid transparent;
+  border-radius: var(--borderRadius-medium, 6px);
   transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
   transition-property: color, background-color, border-color;
   place-content: center;
@@ -284,12 +285,12 @@
   &:hover,
   &:focus {
     background-color: var(--color-btn-hover-bg);
-    border: var(--primer-borderWidth-thin, 1px) solid var(--color-btn-hover-bg);
+    border: var(--borderWidth-thin, 1px) solid var(--color-btn-hover-bg);
   }
 
   /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */
   &.close-button {
-    border: var(--primer-borderWidth-thin, 1px) solid transparent;
+    border: var(--borderWidth-thin, 1px) solid transparent;
   }
 }
 
@@ -342,7 +343,7 @@
     & > .Overlay$(responsiveVariant) {
       height: 100vh;
       max-height: unset;
-      border-radius: var(--primer-borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large, 12px);
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
 
@@ -359,7 +360,7 @@
     & > .Overlay$(responsiveVariant) {
       height: 100vh;
       max-height: unset;
-      border-radius: var(--primer-borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large, 12px);
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
 
@@ -377,7 +378,7 @@
       width: 100vw;
       height: auto;
       max-height: calc(100vh - 2rem);
-      border-radius: var(--primer-borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large, 12px);
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
 
@@ -392,7 +393,7 @@
     justify-content: center;
 
     & > .Overlay$(responsiveVariant) {
-      border-radius: var(--primer-borderRadius-large, 12px);
+      border-radius: var(--borderRadius-large, 12px);
       border-top-left-radius: 0;
       border-top-right-radius: 0;
 
@@ -436,7 +437,7 @@
 
 /* responsive variants */
 
-/* --primer-viewportRange-narrowLandscape */
+/* --viewportRange-narrowLandscape */
 @media (max-width: 767px) {
   .Overlay-backdrop--center-whenNarrow {
     @mixin Overlay-backdrop--center;
diff --git a/app/components/primer/alpha/dropdown.pcss b/app/components/primer/alpha/dropdown.pcss
index 093a6c1616..129efa563f 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(--primer-borderWidth-thicker, 4px) var(--primer-borderWidth-thicker, 4px) 0;
+  border-width: var(--borderWidth-thicker, 4px) var(--borderWidth-thicker, 4px) 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(--primer-control-small-paddingBlock, 4px);
-  padding-bottom: var(--primer-control-small-paddingBlock, 4px);
+  padding-top: var(--control-small-paddingBlock, 4px);
+  padding-bottom: var(--control-small-paddingBlock, 4px);
   margin-top: 2px;
   list-style: none;
   background-color: var(--color-canvas-overlay);
   background-clip: padding-box;
-  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium, 6px);
   box-shadow: var(--color-shadow-large);
 
   &::before,
@@ -64,7 +64,7 @@
   width: auto;
 
   & .dropdown-item {
-    padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);
+    padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);
     overflow: visible;
     text-overflow: inherit;
   }
@@ -73,7 +73,8 @@
 /* Dropdown items (can be links or buttons) */
 .dropdown-item {
   display: block;
-  padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-condensed, 8px)
+    var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);
   overflow: hidden;
   color: var(--color-fg-default);
   text-overflow: ellipsis;
@@ -115,13 +116,13 @@
 .dropdown-divider {
   display: block;
   height: 0;
-  margin: var(--primer-stack-gap-condensed, 8px) 0;
-  border-top: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  margin: var(--stack-gap-condensed, 8px) 0;
+  border-top: var(--borderWidth-thin, 1px) solid var(--color-border-default);
 }
 
 .dropdown-header {
-  padding: var(--primer-control-small-paddingBlock, 4px) var(--primer-control-medium-paddingInline-spacious, 16px);
-  font-size: var(--primer-text-body-size-small, 12px);
+  padding: var(--control-small-paddingBlock, 4px) var(--control-medium-paddingInline-spacious, 16px);
+  font-size: var(--text-body-size-small, 12px);
   color: var(--color-fg-muted);
 }
 
diff --git a/app/components/primer/alpha/layout.pcss b/app/components/primer/alpha/layout.pcss
index 33ccd6901a..e5e23f4cce 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(--primer-borderWidth-thin, 1px) 0;
+      border-width: var(--borderWidth-thin, 1px) 0;
     }
   }
 }
@@ -255,14 +255,14 @@
   }
 
   & .Layout-main-centered-md {
-    max-width: calc(var(--primer-breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+    max-width: calc(var(--breakpoint-medium, 768px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 
   & .Layout-main-centered-lg {
-    max-width: calc(var(--primer-breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+    max-width: calc(var(--breakpoint-large, 1012px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 
   & .Layout-main-centered-xl {
-    max-width: calc(var(--primer-breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
+    max-width: calc(var(--breakpoint-xlarge, 1280px) + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 }
diff --git a/app/components/primer/alpha/menu.pcss b/app/components/primer/alpha/menu.pcss
index fcfc59b5af..22ecb2f7c0 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(--primer-stack-gap-normal, 16px);
+  margin-bottom: var(--stack-gap-normal, 16px);
   list-style: none;
   background-color: var(--color-canvas-default);
-  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium, 6px);
 }
 
 .menu-item {
   position: relative;
   display: block;
-  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);
   color: var(--color-fg-default);
-  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
 
   &:first-child {
     border-top: 0;
-    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
-    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-left-radius: var(--borderRadius-medium, 6px);
+    border-top-right-radius: var(--borderRadius-medium, 6px);
 
     &::before {
-      border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+      border-top-left-radius: var(--borderRadius-medium, 6px);
     }
   }
 
   &:last-child {
     border-bottom: 0;
-    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-right-radius: var(--borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--borderRadius-medium, 6px);
 
     &::before {
-      border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+      border-bottom-left-radius: var(--borderRadius-medium, 6px);
     }
   }
 
@@ -65,14 +65,14 @@
 
   & .octicon {
     width: 16px;
-    margin-right: var(--primer-control-medium-gap, 8px);
+    margin-right: var(--control-medium-gap, 8px);
     color: var(--color-fg-muted);
     text-align: center;
   }
 
   & .Counter {
     float: right;
-    margin-left: var(--primer-control-small-gap, 4px);
+    margin-left: var(--control-small-gap, 4px);
   }
 
   & .menu-warning {
@@ -82,7 +82,7 @@
 
   & .avatar {
     float: left;
-    margin-right: var(--primer-control-small-gap, 4px);
+    margin-right: var(--control-small-gap, 4px);
   }
 
   &.alert {
@@ -94,26 +94,26 @@
 
 .menu-heading {
   display: block;
-  padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);
   margin-top: 0;
   margin-bottom: 0;
   font-size: inherit;
   font-weight: var(--base-text-weight-semibold, 600);
   color: var(--color-fg-default);
-  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
 
   &:hover {
     text-decoration: none;
   }
 
   &:first-child {
-    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
-    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-left-radius: var(--borderRadius-medium, 6px);
+    border-top-right-radius: var(--borderRadius-medium, 6px);
   }
 
   &:last-child {
     border-bottom: 0;
-    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-right-radius: var(--borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--borderRadius-medium, 6px);
   }
 }
diff --git a/app/components/primer/alpha/segmented_control.pcss b/app/components/primer/alpha/segmented_control.pcss
index baafb60df8..17d8e754eb 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(--primer-borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium, 6px);
 }
 
 .SegmentedControl-item {
   position: relative;
   display: inline-flex;
-  border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid transparent;
-  border-radius: var(--primer-borderRadius-medium, 6px);
-  padding: var(--primer-control-xsmall-paddingInline-condensed, 4px);
+  border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid transparent;
+  border-radius: var(--borderRadius-medium, 6px);
+  padding: var(--control-xsmall-paddingInline-condensed, 4px);
 
   /* Selected ---------------------------------------- */
   &.SegmentedControl-item--selected {
@@ -49,10 +49,10 @@
   &::before {
     position: absolute;
     inset: 0 0 0 -1px;
-    margin-top: var(--primer-control-medium-paddingBlock, 6px);
-    margin-bottom: var(--primer-control-medium-paddingBlock, 6px);
+    margin-top: var(--control-medium-paddingBlock, 6px);
+    margin-bottom: var(--control-medium-paddingBlock, 6px);
     content: '';
-    border-left: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);
+    border-left: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);
   }
 
   /* Button ----------------------------------------- */
@@ -63,78 +63,67 @@
     color: var(--color-btn-text);
 
     &:focus-visible {
-      outline-offset: calc(
-        var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px)
-      );
-      border-radius: calc(var(--primer-borderRadius-medium, 6px) - 5px);
+      outline-offset: calc(var(--control-xsmall-paddingInline-condensed, 4px) - var(--borderWidth-thin, 1px));
+      border-radius: calc(var(--borderRadius-medium, 6px) - 5px);
     }
   }
 
   & .Button--small {
     height: calc(
-      var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
-        var(--primer-borderWidth-thin, 1px) * 2
+      var(--control-small-size, 28px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
+        var(--borderWidth-thin, 1px) * 2
     );
     padding: 0
-      calc(
-        var(--primer-control-small-paddingInline-condensed, 8px) -
-          var(--primer-control-xsmall-paddingInline-condensed, 4px)
-      );
+      calc(var(--control-small-paddingInline-condensed, 8px) - var(--control-xsmall-paddingInline-condensed, 4px));
 
     &.Button--iconOnly {
       width: calc(
-        var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
-          var(--primer-borderWidth-thin, 1px) * 2
+        var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
+          var(--borderWidth-thin, 1px) * 2
       );
 
       &::before {
-        @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
+        @mixin minTouchTarget var(--control-medium-size, 32px), var(--control-medium-size, 32px);
       }
     }
   }
 
   & .Button--medium {
     height: calc(
-      var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
-        var(--primer-borderWidth-thin, 1px) * 2
+      var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
+        var(--borderWidth-thin, 1px) * 2
     );
     padding: 0
-      calc(
-        var(--primer-control-medium-paddingInline-normal, 12px) -
-          var(--primer-control-xsmall-paddingInline-condensed, 4px)
-      );
+      calc(var(--control-medium-paddingInline-normal, 12px) - var(--control-xsmall-paddingInline-condensed, 4px));
 
     &.Button--iconOnly {
       width: calc(
-        var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
-          var(--primer-borderWidth-thin, 1px) * 2
+        var(--control-medium-size, 32px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
+          var(--borderWidth-thin, 1px) * 2
       );
 
       &::before {
-        @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
+        @mixin minTouchTarget var(--control-medium-size, 32px), var(--control-medium-size, 32px);
       }
     }
   }
 
   & .Button--large {
     height: calc(
-      var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
-        var(--primer-borderWidth-thin, 1px) * 2
+      var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
+        var(--borderWidth-thin, 1px) * 2
     );
     padding: 0
-      calc(
-        var(--primer-control-large-paddingInline-spacious, 16px) -
-          var(--primer-control-xsmall-paddingInline-condensed, 4px)
-      );
+      calc(var(--control-large-paddingInline-spacious, 16px) - var(--control-xsmall-paddingInline-condensed, 4px));
 
     &.Button--iconOnly {
       width: calc(
-        var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
-          var(--primer-borderWidth-thin, 1px) * 2
+        var(--control-large-size, 40px) - var(--control-xsmall-paddingInline-condensed, 4px) * 2 -
+          var(--borderWidth-thin, 1px) * 2
       );
 
       &::before {
-        @mixin minTouchTarget var(--primer-control-large-size, 40px), var(--primer-control-large-size, 40px);
+        @mixin minTouchTarget var(--control-large-size, 40px), var(--control-large-size, 40px);
       }
     }
   }
diff --git a/app/components/primer/alpha/tab_nav.pcss b/app/components/primer/alpha/tab_nav.pcss
index 7d615baa3c..ec57dcd491 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(--primer-stack-gap-normal, 16px);
-  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  margin-bottom: var(--stack-gap-normal, 16px);
+  border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-default);
 }
 
 .tabnav-tabs {
   display: flex;
-  margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);
+  margin-bottom: calc(var(--borderWidth-thin, 1px) * -1);
   overflow: auto;
 }
 
 .tabnav-tab {
   display: inline-block;
   flex-shrink: 0;
-  padding: var(--base-size-8, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
-  font-size: var(--primer-text-body-size-medium, 14px);
+  padding: var(--base-size-8, 8px) var(--control-medium-paddingInline-spacious, 16px);
+  font-size: var(--text-body-size-medium, 14px);
   line-height: 23px;
   color: var(--color-fg-muted);
   text-decoration: none;
   background-color: transparent;
-  border: var(--primer-borderWidth-thin, 1px) solid transparent;
+  border: var(--borderWidth-thin, 1px) 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(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0;
+    border-radius: var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px) 0 0;
 
     & .octicon {
       color: inherit;
@@ -47,7 +47,7 @@
 
   &:focus,
   &:focus-visible {
-    border-radius: var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px) 0 0 !important;
+    border-radius: var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px) 0 0 !important;
     outline-offset: -6px;
   }
 
@@ -56,12 +56,12 @@
   }
 
   & .octicon {
-    margin-right: var(--primer-control-small-gap, 4px);
+    margin-right: var(--control-small-gap, 4px);
     color: var(--color-fg-muted);
   }
 
   & .Counter {
-    margin-left: var(--primer-control-small-gap, 4px);
+    margin-left: var(--control-small-gap, 4px);
     color: inherit;
   }
 }
@@ -75,7 +75,7 @@
   display: inline-block;
   padding-top: 10px;
   margin-left: 10px;
-  font-size: var(--primer-text-body-size-small, 12px);
+  font-size: var(--text-body-size-small, 12px);
   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(--primer-controlStack-medium-gap-condensed, 8px);
+  margin-left: var(--controlStack-medium-gap-condensed, 8px);
 }
diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
index 4cd107a849..255bd3aa59 100644
--- a/app/components/primer/alpha/text_field.pcss
+++ b/app/components/primer/alpha/text_field.pcss
@@ -14,9 +14,9 @@
 
 /* <label> */
 .FormControl-label {
-  font-size: var(--primer-text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium, 14px);
   font-weight: var(--base-text-weight-semibold, 600);
-  line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));
+  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
   color: var(--color-fg-default);
   user-select: none;
 }
@@ -24,16 +24,16 @@
 /* optional caption */
 .FormControl-caption {
   margin-bottom: 0;
-  font-size: var(--primer-text-caption-size, 12px);
-  font-weight: var(--primer-text-caption-weight, 400);
-  line-height: var(--primer-text-caption-lineHeight, calc(16 / 12));
+  font-size: var(--text-caption-size, 12px);
+  font-weight: var(--text-caption-weight, 400);
+  line-height: var(--text-caption-lineHeight, calc(16 / 12));
   color: var(--color-fg-muted);
 }
 
 /* inline validation message */
 .FormControl-inlineValidation {
   display: flex;
-  font-size: var(--primer-text-caption-size, 12px);
+  font-size: var(--text-caption-size, 12px);
   font-weight: var(--base-text-weight-semibold, 600);
   color: var(--color-danger-fg);
   fill: var(--color-danger-fg);
@@ -61,7 +61,7 @@
 @define-mixin Field {
   color: var(--color-fg-default);
   background-color: var(--color-canvas-default);
-  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
 
   &[disabled] {
     color: var(--color-primer-fg-disabled);
@@ -131,13 +131,13 @@
   @mixin Field;
 
   width: 100%;
-  font-size: var(--primer-text-body-size-medium, 14px);
-  line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  font-size: var(--text-body-size-medium, 14px);
+  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
+  border-radius: var(--borderRadius-medium, 6px);
   transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
   transition-property: color, background-color, box-shadow, border-color;
-  padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
-  padding-block: calc(var(--primer-control-medium-paddingBlock, 6px) - var(--primer-borderWidth-thin, 1px));
+  padding-inline: var(--control-medium-paddingInline-condensed, 8px);
+  padding-block: calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));
 
   &[disabled] {
     &::placeholder {
@@ -157,20 +157,20 @@
   /* sizes */
 
   &.FormControl-small {
-    height: var(--primer-control-small-size, 28px);
-    padding-inline: var(--primer-control-small-paddingInline-normal, 8px);
-    padding-block: var(--primer-control-small-paddingBlock, 4px);
-    font-size: var(--primer-text-body-size-small, 12px);
+    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);
   }
 
   &.FormControl-medium {
-    height: var(--primer-control-medium-size, 32px);
+    height: var(--control-medium-size, 32px);
   }
 
   &.FormControl-large {
-    height: var(--primer-control-large-size, 40px);
-    padding-inline: var(--primer-control-large-paddingInline-normal, 12px);
-    padding-block: var(--primer-control-large-paddingBlock, 10px);
+    height: var(--control-large-size, 40px);
+    padding-inline: var(--control-large-paddingInline-normal, 12px);
+    padding-block: var(--control-large-paddingBlock, 10px);
   }
 
   /* variants */
@@ -185,11 +185,10 @@
   }
 
   &.FormControl-monospace {
-    font-family:
-      var(
-        --primer-fontStack-monospace,
-        'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
-      );
+    font-family: var(
+      --fontStack-monospace,
+      'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
+    );
   }
 
   /* validation states */
@@ -242,14 +241,14 @@
     right: var(--base-size-4, 4px);
     z-index: 4;
     display: grid;
-    width: var(--primer-control-xsmall-size, 24px);
-    height: var(--primer-control-xsmall-size, 24px);
+    width: var(--control-xsmall-size, 24px);
+    height: var(--control-xsmall-size, 24px);
     padding: 0;
     color: var(--color-fg-muted);
     cursor: pointer;
     background: transparent;
     border: 0;
-    border-radius: var(--primer-borderRadius-small);
+    border-radius: var(--borderRadius-small);
     transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
     transition-property: color, background-color, border-color;
     align-items: center;
@@ -276,10 +275,10 @@
     &.FormControl-input-trailingAction--divider {
       &::before {
         position: absolute;
-        top: calc((var(--primer-control-xsmall-size) - var(--base-size-16)) / 2);
+        top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);
         left: calc(var(--base-size-4, 4px) * -1);
         display: block;
-        width: var(--primer-borderWidth-thin);
+        width: var(--borderWidth-thin);
         height: var(--base-size-16);
         content: '';
         background: var(--color-border-default);
@@ -287,11 +286,11 @@
     }
 
     &::after {
-      @mixin minTouchTarget var(--primer-control-medium-size, 32px) var(--primer-control-medium-size, 32px);
+      @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);
 
       @media (pointer: coarse) {
-        min-width: var(--primer-control-minTarget-coarse, 44px);
-        min-height: var(--primer-control-minTarget-coarse, 44px);
+        min-width: var(--control-minTarget-coarse, 44px);
+        min-height: var(--control-minTarget-coarse, 44px);
       }
     }
   }
@@ -308,11 +307,9 @@
 
   &.FormControl-input-wrap--leadingVisual {
     & .FormControl-input {
-      padding-inline-start:
-        calc(
-          var(--primer-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-          var(--primer-control-medium-gap, 8px)
-        ); /* 32px */
+      padding-inline-start: calc(
+        var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px)
+      ); /* 32px */
     }
   }
 
@@ -327,11 +324,9 @@
   /* if trailingAction is present */
   &.FormControl-input-wrap--trailingAction {
     & .FormControl-input {
-      padding-inline-end:
-        calc(
-          var(--primer-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-          var(--primer-control-medium-gap, 8px)
-        ); /* 32px */
+      padding-inline-end: calc(
+        var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px)
+      ); /* 32px */
     }
 
     /*
@@ -347,11 +342,10 @@
     ** can be refactored to has(.FormControl-input-trailingAction--divider) */
     &.FormControl-input-wrap-trailingAction--divider {
       & .FormControl-input {
-        padding-inline-end:
-          calc(
-            var(--primer-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-            var(--primer-control-medium-gap, 8px) + var(--primer-borderWidth-thin, 1px)
-          ); /* 33px */
+        padding-inline-end: calc(
+          var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
+            var(--control-medium-gap, 8px) + var(--borderWidth-thin, 1px)
+        ); /* 33px */
       }
     }
   }
@@ -360,8 +354,8 @@
   // sizes */
   &.FormControl-small {
     & .FormControl-input-leadingVisualWrap {
-      top: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
-      left: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
+      top: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
+      left: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
     }
 
     /*
@@ -374,11 +368,9 @@
 
     &.FormControl-input-wrap--trailingAction {
       & .FormControl-input.FormControl-small {
-        padding-inline-end:
-          calc(
-            var(--primer-control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-            var(--primer-control-small-gap, 8px)
-          ); /* 28px */
+        padding-inline-end: calc(
+          var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-small-gap, 8px)
+        ); /* 28px */
       }
 
       /*
@@ -392,29 +384,28 @@
 
       &.FormControl-input-wrap-trailingAction--divider {
         & .FormControl-input.FormControl-small {
-          padding-inline-end:
-            calc(
-              var(--primer-control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
-              var(--primer-control-small-gap, 8px) + var(--primer-borderWidth-thin, 1px)
-            ); /* 29px */
+          padding-inline-end: calc(
+            var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
+              var(--control-small-gap, 8px) + var(--borderWidth-thin, 1px)
+          ); /* 29px */
         }
       }
     }
 
     & .FormControl-input-trailingAction {
-      width: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
-      height: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
+      width: calc(var(--control-small-size, 28px) - var(--base-size-8, 8px));
+      height: calc(var(--control-small-size, 28px) - var(--base-size-8, 8px));
 
       &::before {
-        top: calc((var(--primer-control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
+        top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
       }
     }
   }
 
   &.FormControl-large {
     & .FormControl-input-leadingVisualWrap {
-      top: var(--primer-control-medium-paddingInline-normal, 12px);
-      left: var(--primer-control-medium-paddingInline-normal, 12px);
+      top: var(--control-medium-paddingInline-normal, 12px);
+      left: var(--control-medium-paddingInline-normal, 12px);
     }
 
     /*
@@ -427,11 +418,9 @@
 
     &.FormControl-input-wrap--leadingVisual {
       & .FormControl-input.FormControl-large {
-        padding-inline-start:
-          calc(
-            var(--primer-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
-            var(--primer-control-large-gap, 8px)
-          ); /* 36px */
+        padding-inline-start: calc(
+          var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px)
+        ); /* 36px */
       }
     }
 
@@ -445,11 +434,9 @@
 
     &.FormControl-input-wrap--trailingAction {
       & .FormControl-input.FormControl-large {
-        padding-inline-end:
-          calc(
-            var(--primer-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
-            var(--primer-control-large-gap, 8px)
-          ); /* 36px */
+        padding-inline-end: calc(
+          var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px)
+        ); /* 36px */
       }
 
       /*
@@ -462,20 +449,19 @@
 
       &.FormControl-input-wrap-trailingAction--divider {
         & .FormControl-input.FormControl-large {
-          padding-inline-end:
-            calc(
-              var(--primer-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
-              var(--primer-control-large-gap, 8px) + var(--primer-borderWidth-thin, 1px)
-            ); /* 37px */
+          padding-inline-end: calc(
+            var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px) +
+              var(--borderWidth-thin, 1px)
+          ); /* 37px */
         }
       }
     }
 
     & .FormControl-input-trailingAction {
-      top: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
-      right: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
-      width: var(--primer-control-small-size, 28px);
-      height: var(--primer-control-small-size, 28px);
+      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);
 
       &::before {
         top: unset;
@@ -572,7 +558,7 @@ input[type='checkbox'].FormControl-checkbox {
   margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
   cursor: pointer;
   border-color: var(--color-neutral-emphasis);
-  border-radius: var(--primer-borderRadius-small, 3px);
+  border-radius: var(--borderRadius-small, 3px);
   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;
@@ -599,7 +585,7 @@ input[type='checkbox'].FormControl-checkbox {
 
   /* extend touch target */
   &::after {
-    @mixin minTouchTarget var(--primer-control-medium-size, 32px) var(--primer-control-medium-size, 32px);
+    @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);
   }
 
   &[disabled] {
@@ -666,12 +652,12 @@ input[type='radio'].FormControl-radio {
   margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
   cursor: pointer;
   border-color: var(--color-neutral-emphasis);
-  border-radius: var(--primer-borderRadius-full, 100vh);
+  border-radius: var(--borderRadius-full, 100vh);
   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(--primer-control-medium-size, 32px) var(--primer-control-medium-size, 32px);
+    @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);
   }
 
   &:checked {
diff --git a/app/components/primer/alpha/toggle_switch.pcss b/app/components/primer/alpha/toggle_switch.pcss
index bfcf677895..7d4dd42b35 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(--primer-controlStack-medium-gap-condensed, 8px);
+  gap: var(--controlStack-medium-gap-condensed, 8px);
 }
 
 .ToggleSwitch--checked {
@@ -28,15 +28,15 @@
   position: relative;
   display: block;
   width: var(--base-size-64, 64px);
-  height: var(--primer-control-medium-size, 32px);
+  height: var(--control-medium-size, 32px);
   padding: 0;
   overflow: hidden;
   text-decoration: none;
   cursor: pointer;
   user-select: none;
   background-color: var(--color-switch-track-bg);
-  border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-track-border);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, 1px) solid var(--color-switch-track-border);
+  border-radius: var(--borderRadius-medium, 6px);
   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(--primer-borderWidth-thin, 1px) solid var(--color-switch-knob-border);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, 1px) solid var(--color-switch-knob-border);
+  border-radius: var(--borderRadius-medium, 6px);
   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,7 +172,7 @@
 
 .ToggleSwitch-status {
   position: relative;
-  font-size: var(--primer-text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium, 14px);
   line-height: 1.5;
   color: var(--color-fg-default);
   text-align: right;
@@ -186,12 +186,12 @@
 
 .ToggleSwitch--small {
   & .ToggleSwitch-status {
-    font-size: var(--primer-text-body-size-small, 12px);
+    font-size: var(--text-body-size-small, 12px);
   }
 
   & .ToggleSwitch-track {
     width: var(--base-size-48, 48px);
-    height: var(--primer-control-xsmall-size, 24px);
+    height: var(--control-xsmall-size, 24px);
   }
 }
 
diff --git a/app/components/primer/alpha/underline_nav.pcss b/app/components/primer/alpha/underline_nav.pcss
index c590b20a6f..21cb6d6871 100644
--- a/app/components/primer/alpha/underline_nav.pcss
+++ b/app/components/primer/alpha/underline_nav.pcss
@@ -10,7 +10,7 @@
   justify-content: space-between;
 
   & .Counter {
-    margin-left: var(--primer-control-medium-gap, 8px);
+    margin-left: var(--control-medium-gap, 8px);
     color: var(--color-fg-default);
     background-color: var(--color-neutral-muted);
   }
@@ -24,15 +24,15 @@
 .UnderlineNav-body {
   display: flex;
   align-items: center;
-  gap: var(--primer-control-medium-gap, 8px);
+  gap: var(--control-medium-gap, 8px);
   list-style: none;
 }
 
 .UnderlineNav-item {
   position: relative;
   display: flex;
-  padding: 0 var(--primer-control-medium-paddingInline-condensed, 8px);
-  font-size: var(--primer-text-body-size-medium, 14px);
+  padding: 0 var(--control-medium-paddingInline-condensed, 8px);
+  font-size: var(--text-body-size-medium, 14px);
   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(--primer-borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium, 6px);
   align-items: center;
 
   &:hover,
@@ -94,7 +94,7 @@
       height: 2px;
       content: '';
       background: var(--color-primer-border-active);
-      border-radius: var(--primer-borderRadius-medium, 6px);
+      border-radius: var(--borderRadius-medium, 6px);
       transform: translate(50%, -50%);
     }
   }
@@ -123,7 +123,7 @@
 
 .UnderlineNav-octicon {
   display: inline !important;
-  margin-right: var(--primer-control-medium-gap, 8px);
+  margin-right: var(--control-medium-gap, 8px);
   color: var(--color-fg-muted);
   fill: var(--color-fg-muted);
 }
diff --git a/app/components/primer/beta/auto_complete.rb b/app/components/primer/beta/auto_complete.rb
index 7b96bc250b..dd20d32215 100644
--- a/app/components/primer/beta/auto_complete.rb
+++ b/app/components/primer/beta/auto_complete.rb
@@ -41,7 +41,7 @@ class AutoComplete < Primer::Component
         system_arguments[:tag] = :ul
         system_arguments[:id] = @list_id
         system_arguments[:classes] = class_names(
-          "ActionList",
+          "ActionListWrap",
           system_arguments[:classes]
         )
 
diff --git a/app/components/primer/beta/auto_complete/item.html.erb b/app/components/primer/beta/auto_complete/item.html.erb
index deedf2d5ee..d37170473b 100644
--- a/app/components/primer/beta/auto_complete/item.html.erb
+++ b/app/components/primer/beta/auto_complete/item.html.erb
@@ -1,20 +1,20 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <span class="ActionList-content">
+  <span class="ActionListContent">
     <% if leading_visual %>
-        <span class="ActionList-item-visual ActionList-item-visual--leading">
+        <span class="ActionListItem-visual ActionListItem-visual--leading">
             <%= leading_visual %>
         </span>
     <% end %>
-    <% if description %>
-        <span class="ActionList-item-descriptionWrap <%= description_variant_class %>">
-            <span class="ActionList-item-label"><%= content %></span>
-            <span class="ActionList-item-description"><%= description %></span>
+    <%= render(Primer::ConditionalWrapper.new(condition: description?, tag: :span, **@description_wrapper_arguments)) do %>
+      <span class="ActionListItem-label"><%= content %></span>
+      <% if description? %>
+        <span class="ActionListItem-description">
+          <%= description %>
         </span>
-    <% else %>
-        <span class="ActionList-item-label"><%= content %></span>
+      <% end %>
     <% end %>
    <% if trailing_visual %>
-        <span class="ActionList-item-visual ActionList-item-visual--trailing">
+        <span class="ActionListItem-visual ActionListItem-visual--trailing">
             <%= trailing_visual %>
         </span>
     <% end %>
diff --git a/app/components/primer/beta/auto_complete/item.rb b/app/components/primer/beta/auto_complete/item.rb
index c209bf7007..b2b06742f7 100644
--- a/app/components/primer/beta/auto_complete/item.rb
+++ b/app/components/primer/beta/auto_complete/item.rb
@@ -8,7 +8,12 @@ class AutoComplete
       class Item < Primer::Component
         status :beta
 
-        ALLOWED_DESCRIPTION_VARIANTS = [:inline, :block].freeze
+        DEFAULT_DESCRIPTION_VARIANT = :block
+        DESCRIPTION_VARIANT_MAPPINGS = {
+          :inline => "ActionListItem-descriptionWrap--inline",
+          DEFAULT_DESCRIPTION_VARIANT => "ActionListItem-descriptionWrap"
+        }.freeze
+        DESCRIPTION_VARIANT_OPTIONS = DESCRIPTION_VARIANT_MAPPINGS.keys.freeze
 
         # The leading visual rendered before the link.
         #
@@ -48,8 +53,10 @@ class Item < Primer::Component
         # @param description_variant [Hash] Changes the description style. Allowed values are :inline, :block
         # @param description [String] Display description text below label
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(value:, selected: false, disabled: false, description_variant: :block, **system_arguments)
-          @description_variant = ALLOWED_DESCRIPTION_VARIANTS.include?(description_variant) ? description_variant : :block
+        def initialize(value:, selected: false, disabled: false, description_variant: DEFAULT_DESCRIPTION_VARIANT, **system_arguments)
+          @description_variant = fetch_or_fallback(
+            DESCRIPTION_VARIANT_OPTIONS, description_variant, DEFAULT_DESCRIPTION_VARIANT
+          )
 
           @system_arguments = deny_tag_argument(**system_arguments)
           @system_arguments[:tag] = :li
@@ -60,19 +67,16 @@ def initialize(value:, selected: false, disabled: false, description_variant: :b
           @system_arguments[:"aria-disabled"] = true if disabled
 
           @system_arguments[:classes] = class_names(
-            "ActionList-item",
+            "ActionListItem",
             system_arguments[:classes]
           )
-        end
 
-        # Description variant class.
-        def description_variant_class
-          case @description_variant
-          when :block
-            "ActionList-item-blockDescription"
-          when :inline
-            "ActionList-item-descriptionWrap--inline"
-          end
+          @description_wrapper_arguments = {
+            classes: class_names(
+              "ActionListItem-descriptionWrap",
+              DESCRIPTION_VARIANT_MAPPINGS[@description_variant]
+            )
+          }
         end
       end
     end
diff --git a/app/components/primer/beta/avatar.pcss b/app/components/primer/beta/avatar.pcss
index 20b4872b82..95cb7d1d4f 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(--primer-borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium, 6px);
   flex-shrink: 0;
   box-shadow: 0 0 0 1px var(--color-avatar-border);
 }
@@ -27,7 +27,7 @@
 .avatar-1,
 .avatar-2,
 .avatar-small {
-  border-radius: var(--primer-borderRadius-small, 4px);
+  border-radius: var(--borderRadius-small, 4px);
 }
 
 /* Sizes */
diff --git a/app/components/primer/beta/avatar_stack.pcss b/app/components/primer/beta/avatar_stack.pcss
index b725be43ce..8ddcb11f8a 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(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);
-    border-radius: var(--primer-borderRadius-small, 4px);
+    border-right: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);
+    border-radius: var(--borderRadius-small, 4px);
     box-shadow: none;
     transition: margin 0.1s ease-in-out;
 
@@ -50,7 +50,7 @@
     }
 
     & img {
-      border-radius: var(--primer-borderRadius-small, 4px);
+      border-radius: var(--borderRadius-small, 4px);
     }
 
     /* Account for 4+ avatars */
@@ -88,7 +88,7 @@
     height: 20px;
     content: '';
     border-radius: 2px;
-    outline: var(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);
+    outline: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);
   }
 
   &::before {
@@ -136,6 +136,6 @@
     margin-right: 0;
     margin-left: -11px;
     border-right: 0;
-    border-left: var(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);
+    border-left: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);
   }
 }
diff --git a/app/components/primer/beta/blankslate.pcss b/app/components/primer/beta/blankslate.pcss
index 92d7a3b41b..71fc48425e 100644
--- a/app/components/primer/beta/blankslate.pcss
+++ b/app/components/primer/beta/blankslate.pcss
@@ -11,10 +11,10 @@
 
   & code {
     padding: 2px 5px 3px;
-    font-size: var(--primer-text-body-size-medium, 14px);
+    font-size: var(--text-body-size-medium, 14px);
     background: var(--color-canvas-default);
-    border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
-    border-radius: var(--primer-borderRadius-medium, 6px);
+    border: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
+    border-radius: var(--borderRadius-medium, 6px);
   }
 
   & img {
@@ -24,14 +24,14 @@
 }
 
 .blankslate-icon {
-  margin-right: var(--primer-control-small-gap, 4px);
-  margin-bottom: var(--primer-stack-gap-condensed, 8px);
-  margin-left: var(--primer-control-small-gap, 4px);
+  margin-right: var(--control-small-gap, 4px);
+  margin-bottom: var(--stack-gap-condensed, 8px);
+  margin-left: var(--control-small-gap, 4px);
   color: var(--color-fg-muted);
 }
 
 .blankslate-image {
-  margin-bottom: var(--primer-stack-gap-normal, 16px);
+  margin-bottom: var(--stack-gap-normal, 16px);
 }
 
 .blankslate-heading {
@@ -39,19 +39,19 @@
 }
 
 .blankslate-action {
-  margin-top: var(--primer-stack-gap-normal, 16px);
+  margin-top: var(--stack-gap-normal, 16px);
 
   &:first-of-type {
-    margin-top: var(--primer-stack-gap-spacious, 24px);
+    margin-top: var(--stack-gap-spacious, 24px);
   }
 
   &:last-of-type {
-    margin-bottom: var(--primer-stack-gap-condensed, 8px);
+    margin-bottom: var(--stack-gap-condensed, 8px);
   }
 }
 
 .blankslate-capped {
-  border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);
+  border-radius: 0 0 var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px);
 }
 
 .blankslate-spacious {
@@ -72,14 +72,14 @@
   }
 
   & h3 {
-    margin: var(--primer-stack-gap-normal, 16px) 0;
+    margin: var(--stack-gap-normal, 16px) 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(--primer-text-body-size-large, 16px);
+    font-size: var(--text-body-size-large, 16px);
   }
 }
 
diff --git a/app/components/primer/beta/border_box.pcss b/app/components/primer/beta/border_box.pcss
index fb38a79547..ea4373b5e4 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(--primer-borderWidth-thin, 1px);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border-width: var(--borderWidth-thin, 1px);
+  border-radius: var(--borderRadius-medium, 6px);
 }
 
 /* Box padding density options */
@@ -14,105 +14,106 @@
   line-height: 1.25;
 
   & .Box-header {
-    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+    padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);
   }
 
   & .Box-body {
-    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+    padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);
   }
 
   & .Box-footer {
-    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+    padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);
   }
 
   & .Box-btn-octicon {
     &.btn-octicon {
-      padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
-      margin: calc(var(--primer-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
+      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);
       line-height: 1.25;
     }
   }
 
   & .Box-row {
-    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+    padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);
   }
 }
 
 .Box--spacious {
   & .Box-header {
-    padding: var(--primer-stack-padding-spacious, 24px);
+    padding: var(--stack-padding-spacious, 24px);
     line-height: 1.25;
   }
 
   & .Box-title {
-    font-size: var(--primer-text-title-size-medium, 20px);
+    font-size: var(--text-title-size-medium, 20px);
   }
 
   & .Box-body {
-    padding: var(--primer-stack-padding-spacious, 24px);
+    padding: var(--stack-padding-spacious, 24px);
   }
 
   & .Box-footer {
-    padding: var(--primer-stack-padding-spacious, 24px);
+    padding: var(--stack-padding-spacious, 24px);
   }
 
   & .Box-btn-octicon {
     &.btn-octicon {
-      padding: var(--primer-stack-padding-spacious, 24px);
-      margin: calc(var(--primer-stack-gap-spacious, 24px) * -1) calc(var(--primer-stack-gap-spacious, 24px) * -1);
+      padding: var(--stack-padding-spacious, 24px);
+      margin: calc(var(--stack-gap-spacious, 24px) * -1) calc(var(--stack-gap-spacious, 24px) * -1);
     }
   }
 
   & .Box-row {
-    padding: var(--primer-stack-padding-spacious, 24px);
+    padding: var(--stack-padding-spacious, 24px);
   }
 }
 
 .Box-header {
-  padding: var(--primer-stack-padding-normal, 16px);
-  margin: calc(var(--primer-borderWidth-thin, 1px) * -1) calc(var(--primer-borderWidth-thin, 1px) * -1) 0;
+  padding: var(--stack-padding-normal, 16px);
+  margin: calc(var(--borderWidth-thin, 1px) * -1) calc(var(--borderWidth-thin, 1px) * -1) 0;
   background-color: var(--color-canvas-subtle);
   border-color: var(--color-border-default);
   border-style: solid;
-  border-width: var(--primer-borderWidth-thin, 1px);
-  border-top-left-radius: var(--primer-borderRadius-medium, 6px);
-  border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+  border-width: var(--borderWidth-thin, 1px);
+  border-top-left-radius: var(--borderRadius-medium, 6px);
+  border-top-right-radius: var(--borderRadius-medium, 6px);
 }
 
 .Box-title {
-  font-size: var(--primer-text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium, 14px);
   font-weight: var(--base-text-weight-semibold, 600);
 }
 
 .Box-body {
-  padding: var(--primer-stack-padding-normal, 16px);
-  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  padding: var(--stack-padding-normal, 16px);
+  border-bottom: var(--borderWidth-thin, 1px) 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(--primer-borderWidth-thin, 1px) * -1);
-    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+    margin-bottom: calc(var(--borderWidth-thin, 1px) * -1);
+    border-bottom-right-radius: var(--borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--borderRadius-medium, 6px);
   }
 }
 
 /* Box rows */
 .Box-row {
-  padding: var(--primer-stack-padding-normal, 16px);
-  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);
+  padding: var(--stack-padding-normal, 16px);
+  margin-top: calc(var(--borderWidth-thin, 1px) * -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(--primer-borderWidth-thin, 1px);
+  border-top-width: var(--borderWidth-thin, 1px);
 
   &:first-of-type {
-    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
-    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-left-radius: var(--borderRadius-medium, 6px);
+    border-top-right-radius: var(--borderRadius-medium, 6px);
   }
 
   &:last-of-type {
-    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
-    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-right-radius: var(--borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--borderRadius-medium, 6px);
   }
 
   /* Adds a blue vertical line to the left of the row
@@ -199,12 +200,12 @@
 }
 
 .Box-footer {
-  padding: var(--primer-stack-padding-normal, 16px);
-  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */
+  padding: var(--stack-padding-normal, 16px);
+  margin-top: calc(var(--borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */
   border-top-color: var(--color-border-default);
   border-top-style: solid;
-  border-top-width: var(--primer-borderWidth-thin, 1px);
-  border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);
+  border-top-width: var(--borderWidth-thin, 1px);
+  border-radius: 0 0 var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px);
 }
 
 /* Option for a box with scrolling content */
@@ -277,8 +278,9 @@
 .Box-btn-octicon {
   /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
   &.btn-octicon {
-    padding: var(--primer-control-medium-paddingInline-spacious, 16px) var(--primer-control-medium-paddingInline-spacious, 16px);
-    margin: calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
+    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);
     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 cdb93d631f..7d9207dc23 100644
--- a/app/components/primer/beta/button.pcss
+++ b/app/components/primer/beta/button.pcss
@@ -2,27 +2,27 @@
 
 /* temporary, pre primitives release */
 :root {
-  --primer-duration-fast: 80ms;
-  --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
+  --duration-fast: 80ms;
+  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
 /* base button */
 .Button {
   position: relative;
-  font-size: var(--primer-text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium, 14px);
   font-weight: var(--base-text-weight-medium, 500);
   cursor: pointer;
   user-select: none;
   background-color: transparent;
-  border: var(--primer-borderWidth-thin, 1px) solid;
+  border: var(--borderWidth-thin, 1px) solid;
   border-color: transparent;
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium, 6px);
   color: var(--color-btn-text);
-  transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);
+  transition: var(--duration-fast) var(--easing-easeInOut);
   transition-property: color, fill, background-color, border-color;
   text-align: center;
-  height: var(--primer-control-medium-size, 32px);
-  padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);
+  height: var(--control-medium-size, 32px);
+  padding: 0 var(--control-medium-paddingInline-normal, 12px);
   display: inline-flex;
   flex-direction: row;
   justify-content: space-between;
@@ -40,7 +40,7 @@
   /* base states */
 
   &:hover {
-    transition-duration: var(--primer-duration-fast);
+    transition-duration: var(--duration-fast);
   }
 
   &:active {
@@ -78,7 +78,7 @@ summary.Button {
   /* padding-bottom: 1px; optical alignment for firefox */
 
   & > :not(:last-child) {
-    margin-right: var(--primer-control-medium-gap, 8px);
+    margin-right: var(--control-medium-gap, 8px);
   }
 }
 
@@ -103,7 +103,7 @@ summary.Button {
 .Button-label {
   grid-area: text;
   white-space: nowrap;
-  line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));
+  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
 }
 
 .Button-leadingVisual {
@@ -121,34 +121,34 @@ summary.Button {
 /* sizes */
 
 .Button--small {
-  font-size: var(--primer-text-body-size-small, 12px);
-  height: var(--primer-control-small-size, 28px);
-  padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);
-  gap: var(--primer-control-small-gap, 4px);
+  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);
 
   & .Button-label {
-    line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));
+    line-height: var(--text-body-lineHeight-small, calc(20 / 12));
   }
 
   & .Button-content {
     & > :not(:last-child) {
-      margin-right: var(--primer-control-small-gap, 4px);
+      margin-right: var(--control-small-gap, 4px);
     }
   }
 }
 
 .Button--large {
-  height: var(--primer-control-large-size, 40px);
-  padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);
-  gap: var(--primer-control-large-gap, 8px);
+  height: var(--control-large-size, 40px);
+  padding: 0 var(--control-large-paddingInline-spacious, 16px);
+  gap: var(--control-large-gap, 8px);
 
   & .Button-label {
-    line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));
+    line-height: var(--text-body-lineHeight-large, calc(48 / 32));
   }
 
   & .Button-content {
     & > :not(:last-child) {
-      margin-right: var(--primer-control-large-gap, 8px);
+      margin-right: var(--control-large-gap, 8px);
     }
   }
 }
@@ -330,13 +330,13 @@ summary.Button {
   display: inline-grid;
   place-content: center;
   padding: unset;
-  width: var(--primer-control-medium-size, 32px);
+  width: var(--control-medium-size, 32px);
 
   &.Button--small {
-    width: var(--primer-control-small-size, 28px);
+    width: var(--control-small-size, 28px);
   }
 
   &.Button--large {
-    width: var(--primer-control-large-size, 40px);
+    width: var(--control-large-size, 40px);
   }
 }
diff --git a/app/components/primer/beta/counter.pcss b/app/components/primer/beta/counter.pcss
index c7042efad2..786f7b2cd3 100644
--- a/app/components/primer/beta/counter.pcss
+++ b/app/components/primer/beta/counter.pcss
@@ -4,13 +4,13 @@
   display: inline-block;
   min-width: var(--base-size-20, 20px); /* makes sure it's a circle with just one digit */
   padding: 0 6px;
-  font-size: var(--primer-text-body-size-small, 12px);
+  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(--primer-borderWidth-thin, 1px) * 2); /* 20px - 2px for the borders */
+  line-height: calc(var(--base-size-20, 20px) - var(--borderWidth-thin, 1px) * 2); /* 20px - 2px for the borders */
   color: var(--color-fg-default);
   text-align: center;
   background-color: var(--color-neutral-muted);
-  border: var(--primer-borderWidth-thin, 1px) solid var(--color-counter-border);
+  border: var(--borderWidth-thin, 1px) 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 e17307cfd4..2d43e7e5ed 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(--primer-control-medium-paddingInline-spacious, 16px);
+  padding: var(--base-size-20, 20px) var(--control-medium-paddingInline-spacious, 16px);
   border-style: solid;
-  border-width: var(--primer-borderWidth-thin, 1px);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border-width: var(--borderWidth-thin, 1px);
+  border-radius: var(--borderRadius-medium, 6px);
 
   /* Default color */
   color: var(--color-fg-default);
@@ -25,14 +25,14 @@
 
 /* Contain the flash messages */
 .flash-messages {
-  margin-bottom: var(--primer-stack-gap-spacious, 24px);
+  margin-bottom: var(--stack-gap-spacious, 24px);
 }
 
 /* Close button */
 .flash-close:not(.Banner-close) {
   float: right;
-  padding: var(--primer-control-medium-paddingInline-spacious, 16px);
-  margin: calc(var(--primer-control-medium-paddingInline-spacious, 16px) * -1);
+  padding: var(--control-medium-paddingInline-spacious, 16px);
+  margin: calc(var(--control-medium-paddingInline-spacious, 16px) * -1);
   text-align: center;
   cursor: pointer;
 
@@ -58,11 +58,11 @@
 .flash-action:not(.Banner-actions) {
   float: right;
   margin-top: -3px;
-  margin-left: var(--primer-stack-gap-spacious, 24px);
+  margin-left: var(--stack-gap-spacious, 24px);
   background-clip: padding-box;
 
   &.btn .octicon {
-    margin-right: var(--primer-control-small-gap, 4px);
+    margin-right: var(--control-small-gap, 4px);
     color: var(--color-fg-muted);
   }
 
@@ -75,7 +75,6 @@
   }
 }
 
-
 /* Color variations */
 
 .flash-warn:not(.Banner) {
@@ -111,8 +110,8 @@
 /* Layout variations */
 
 .flash-full:not(.Banner) {
-  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);
-  border-width: var(--primer-borderWidth-thin, 1px) 0;
+  margin-top: calc(var(--borderWidth-thin, 1px) * -1);
+  border-width: var(--borderWidth-thin, 1px) 0;
   border-radius: 0;
 }
 
diff --git a/app/components/primer/beta/label.pcss b/app/components/primer/beta/label.pcss
index 7e60dfafec..1c90d645cc 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(--primer-text-body-size-small, 12px);
+  font-size: var(--text-body-size-small, 12px);
   font-weight: var(--base-text-weight-medium, 500);
   line-height: 18px;
   white-space: nowrap;
-  border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+  border: var(--borderWidth-thin, 1px) 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 92a7243ea7..53aba38d15 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(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: var(--borderRadius-medium, 6px);
 
   /* Carets */
   &::before,
@@ -209,12 +209,12 @@
     bottom: auto;
     left: auto;
     width: auto !important;
-    margin: var(--primer-stack-gap-condensed, 8px);
+    margin: var(--stack-gap-condensed, 8px);
   }
 
   /* Increase tap area for touch input */
   .Popover-message > .btn-octicon {
-    padding: var(--primer-control-medium-paddingInline-normal, 12px) !important;
+    padding: var(--control-medium-paddingInline-normal, 12px) !important;
   }
 
   /* Remove caret */
diff --git a/app/components/primer/beta/state.pcss b/app/components/primer/beta/state.pcss
index 3f59ea4b92..60b831f35e 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(--primer-control-medium-paddingInline-normal, 12px);
-  font-size: var(--primer-text-body-size-medium, 14px);
+  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(--primer-control-medium-lineBoxHeight, 20px);
+  line-height: var(--control-medium-lineBoxHeight, 20px);
   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(--primer-borderWidth-thin, 1px) solid transparent;
+  border: var(--borderWidth-thin, 1px) solid transparent;
 }
 
 .State--open {
@@ -41,7 +41,7 @@
 
 .State--small {
   padding: 0 10px;
-  font-size: var(--primer-text-body-size-small, 12px);
+  font-size: var(--text-body-size-small, 12px);
   line-height: var(--base-size-24, 24px);
 
   & .octicon {
diff --git a/app/components/primer/beta/subhead.pcss b/app/components/primer/beta/subhead.pcss
index 5c3a32ac9e..d5fc2a4f21 100644
--- a/app/components/primer/beta/subhead.pcss
+++ b/app/components/primer/beta/subhead.pcss
@@ -2,9 +2,9 @@
 
 .Subhead {
   display: flex;
-  padding-bottom: var(--primer-stack-padding-condensed, 8px);
-  margin-bottom: var(--primer-stack-gap-normal, 16px);
-  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);
+  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);
   flex-flow: row wrap;
   justify-content: flex-end; /* Keep actions right aligned. */
 }
@@ -30,7 +30,7 @@
 
 /* One-liner of supporting text */
 .Subhead-description {
-  font-size: var(--primer-text-body-size-medium, 14px);
+  font-size: var(--text-body-size-medium, 14px);
   color: var(--color-fg-muted);
   flex: 1 100%;
   order: 2;
diff --git a/app/components/primer/beta/timeline_item.pcss b/app/components/primer/beta/timeline_item.pcss
index 303ba66f42..5b7bb75d42 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(--primer-stack-padding-normal, 16px) 0;
-  margin-left: var(--primer-stack-gap-normal, 16px);
+  padding: var(--stack-padding-normal, 16px) 0;
+  margin-left: var(--stack-gap-normal, 16px);
 
   /* The Timeline */
   &::before {
@@ -13,7 +13,7 @@
     bottom: 0;
     left: 0;
     display: block;
-    width: var(--primer-borderWidth-thick, 2px);
+    width: var(--borderWidth-thick, 2px);
     content: '';
     background-color: var(--color-border-muted);
   }
@@ -28,14 +28,14 @@
   position: relative;
   z-index: 1;
   display: flex;
-  width: var(--primer-control-medium-size, 32px);
-  height: var(--primer-control-medium-size, 32px);
-  margin-right: var(--primer-controlStack-medium-gap-condensed, 8px);
-  margin-left: calc(var(--primer-control-medium-size, 32px) / -2 + 1px);
+  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);
   color: var(--color-fg-muted);
   align-items: center;
   background-color: var(--color-timeline-badge-bg);
-  border: var(--primer-borderWidth-thick, 2px) solid var(--color-canvas-default);
+  border: var(--borderWidth-thick, 2px) solid var(--color-canvas-default);
   border-radius: 50%;
   justify-content: center;
   flex-shrink: 0;
@@ -44,7 +44,7 @@
 .TimelineItem-badge--success {
   color: var(--color-fg-on-emphasis);
   background-color: var(--color-success-emphasis);
-  border: var(--primer-borderWidth-thin, 1px) solid transparent;
+  border: var(--borderWidth-thin, 1px) solid transparent;
 }
 
 .TimelineItem-body {
@@ -64,13 +64,13 @@
 .TimelineItem-break {
   position: relative;
   z-index: 1;
-  height: var(--primer-stack-gap-spacious, 24px);
+  height: var(--stack-gap-spacious, 24px);
   margin: 0;
-  margin-bottom: calc(var(--primer-stack-gap-normal, 16px) * -1);
+  margin-bottom: calc(var(--stack-gap-normal, 16px) * -1);
   margin-left: -56px;
   background-color: var(--color-canvas-default);
   border: 0;
-  border-top: var(--primer-borderWidth-thicker, 4px) solid var(--color-border-default);
+  border-top: var(--borderWidth-thicker, 4px) solid var(--color-border-default);
 }
 
 .TimelineItem--condensed {
@@ -79,7 +79,7 @@
 
   /* TimelineItem--condensed is often grouped. (commits) */
   &:last-child {
-    padding-bottom: var(--primer-stack-gap-normal, 16px);
+    padding-bottom: var(--stack-gap-normal, 16px);
   }
 
   & .TimelineItem-badge {
diff --git a/app/components/primer/beta/truncate.pcss b/app/components/primer/beta/truncate.pcss
index 92ceadf06b..d421bfa432 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(--primer-control-small-gap, 4px);
+      margin-left: var(--control-small-gap, 4px);
     }
 
     &.Truncate-text--primary {
diff --git a/demo/app/assets/stylesheets/application.css b/demo/app/assets/stylesheets/application.css
index 2574cf1330..e5b50ba3e6 100644
--- a/demo/app/assets/stylesheets/application.css
+++ b/demo/app/assets/stylesheets/application.css
@@ -4,7 +4,6 @@
  *= require @primer/css/dist/primitives.css
  *= require @primer/css/dist/color-modes.css
  *= require @primer/css/dist/base.css
- *= require @primer/css/dist/actionlist.css
  *= require @primer/css/dist/buttons.css
  *= require @primer/css/dist/layout.css
  *= require @primer/css/dist/utilities.css
diff --git a/demo/package-lock.json b/demo/package-lock.json
index b920045c2c..a1382e24e2 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -8,7 +8,7 @@
       "name": "demo",
       "version": "0.1.0",
       "dependencies": {
-        "@primer/css": "^21.0.0",
+        "@primer/css": "^21.0.1",
         "@rails/actioncable": "^7.0.4",
         "@rails/ujs": "^7.0.4",
         "turbolinks": "^5.2.0",
@@ -150,11 +150,11 @@
       "integrity": "sha512-iHMRuu8YWDJIdqCi1krx0cyFNeqszNKTOb0dXFu2wQ5BeIqxqPJLD7rjZ2Vjf/+YaPSbWuIQE1H6TaGMMsDfdA=="
     },
     "node_modules/@primer/css": {
-      "version": "21.0.0",
-      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.0.tgz",
-      "integrity": "sha512-bIiBv/qKUzYMoy9dDeAM2qOHBj/AX/1obG0Cbwcg2mCFBhfxIGl49AOyMx3EcYNDPO86ZHPFhF91gYUvlguKiQ==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.1.tgz",
+      "integrity": "sha512-yHBDYnNQk0W7e3h0Eadh/RCbPl4WEvuO5dwj/qLE/kZodBn7JGhU7xMQKDnj37ck27dS311ngXUuLH42s3wXBw==",
       "dependencies": {
-        "@primer/primitives": "^7.11.3",
+        "@primer/primitives": "^7.11.7",
         "@primer/view-components": "^0.1.0"
       },
       "engines": {
@@ -162,9 +162,12 @@
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "7.11.3",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.3.tgz",
-      "integrity": "sha512-od+rjE04X5sAtGncn9v7/ehZS2O9/tBpQpRsNirU5d4EuOwWMXTt3c6zMBkke136jbmJ0VbGhU+DrLwhj0AM9w=="
+      "version": "7.11.7",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.7.tgz",
+      "integrity": "sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==",
+      "dependencies": {
+        "markdown-table-ts": "^1.0.3"
+      }
     },
     "node_modules/@primer/view-components": {
       "version": "0.1.4",
@@ -1734,6 +1737,11 @@
         "node": ">=6.11.5"
       }
     },
+    "node_modules/markdown-table-ts": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-table-ts/-/markdown-table-ts-1.0.3.tgz",
+      "integrity": "sha512-lYrp7FXmBqpmGmsEF92WnSukdgYvLm15FPIODZOx9+3nobkxJxjBYcszqZf5VqTjBtISPSNC7zjU9o3zwpL6AQ=="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -3192,18 +3200,21 @@
       "integrity": "sha512-iHMRuu8YWDJIdqCi1krx0cyFNeqszNKTOb0dXFu2wQ5BeIqxqPJLD7rjZ2Vjf/+YaPSbWuIQE1H6TaGMMsDfdA=="
     },
     "@primer/css": {
-      "version": "21.0.0",
-      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.0.tgz",
-      "integrity": "sha512-bIiBv/qKUzYMoy9dDeAM2qOHBj/AX/1obG0Cbwcg2mCFBhfxIGl49AOyMx3EcYNDPO86ZHPFhF91gYUvlguKiQ==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.1.tgz",
+      "integrity": "sha512-yHBDYnNQk0W7e3h0Eadh/RCbPl4WEvuO5dwj/qLE/kZodBn7JGhU7xMQKDnj37ck27dS311ngXUuLH42s3wXBw==",
       "requires": {
-        "@primer/primitives": "^7.11.3",
+        "@primer/primitives": "^7.11.7",
         "@primer/view-components": "^0.1.0"
       }
     },
     "@primer/primitives": {
-      "version": "7.11.3",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.3.tgz",
-      "integrity": "sha512-od+rjE04X5sAtGncn9v7/ehZS2O9/tBpQpRsNirU5d4EuOwWMXTt3c6zMBkke136jbmJ0VbGhU+DrLwhj0AM9w=="
+      "version": "7.11.7",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.7.tgz",
+      "integrity": "sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==",
+      "requires": {
+        "markdown-table-ts": "^1.0.3"
+      }
     },
     "@primer/view-components": {
       "version": "0.1.4",
@@ -4425,6 +4436,11 @@
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
       "peer": true
     },
+    "markdown-table-ts": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-table-ts/-/markdown-table-ts-1.0.3.tgz",
+      "integrity": "sha512-lYrp7FXmBqpmGmsEF92WnSukdgYvLm15FPIODZOx9+3nobkxJxjBYcszqZf5VqTjBtISPSNC7zjU9o3zwpL6AQ=="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
diff --git a/demo/package.json b/demo/package.json
index a4591324d2..7bccbf13bc 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.1.0",
   "dependencies": {
-    "@primer/css": "^21.0.0",
+    "@primer/css": "^21.0.1",
     "@rails/actioncable": "^7.0.4",
     "@rails/ujs": "^7.0.4",
     "turbolinks": "^5.2.0",
diff --git a/lib/postcss_mixins/activeIndicatorLine.pcss b/lib/postcss_mixins/activeIndicatorLine.pcss
index 523bfa9b36..97b15a0d9e 100644
--- a/lib/postcss_mixins/activeIndicatorLine.pcss
+++ b/lib/postcss_mixins/activeIndicatorLine.pcss
@@ -7,5 +7,5 @@
   height: var(--base-size-24, 24px);
   content: '';
   background: var(--color-accent-fg);
-  border-radius: var(--primer-borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium, 6px);
 }
diff --git a/package-lock.json b/package-lock.json
index 710de96cba..fb52d9fd2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,8 +29,8 @@
         "@github/markdownlint-github": "^0.2.2",
         "@github/prettier-config": "0.0.4",
         "@playwright/test": "^1.27.1",
-        "@primer/css": "20.4.7",
-        "@primer/primitives": "^7.11.1",
+        "@primer/css": "21.0.1",
+        "@primer/primitives": "^7.11.7",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-typescript": "^8.3.3",
         "@typescript-eslint/eslint-plugin": "^5.31.0",
@@ -1037,22 +1037,46 @@
       "integrity": "sha512-iHMRuu8YWDJIdqCi1krx0cyFNeqszNKTOb0dXFu2wQ5BeIqxqPJLD7rjZ2Vjf/+YaPSbWuIQE1H6TaGMMsDfdA=="
     },
     "node_modules/@primer/css": {
-      "version": "20.4.7",
-      "resolved": "https://registry.npmjs.org/@primer/css/-/css-20.4.7.tgz",
-      "integrity": "sha512-/6sQ8oSyXmXWi1QWkohVcGNi87W6YCRyLOQdp/aoxjtWYDjk39xgi6lbEbjJ9LOjwPLfb0RqGkSkKZXFcJQQDQ==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.1.tgz",
+      "integrity": "sha512-yHBDYnNQk0W7e3h0Eadh/RCbPl4WEvuO5dwj/qLE/kZodBn7JGhU7xMQKDnj37ck27dS311ngXUuLH42s3wXBw==",
       "dev": true,
       "dependencies": {
-        "@primer/primitives": "^7.9.0"
+        "@primer/primitives": "^7.11.7",
+        "@primer/view-components": "^0.1.0"
       },
       "engines": {
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "7.11.1",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.1.tgz",
-      "integrity": "sha512-Sdss4XG96nqBqrTAyg+RuFOj+U5wkICK8n2hafcyT+lpSlZoIwcbmhyFjmDy9f88FkhHe2q0uCpQ8PjKd8ILTQ==",
-      "dev": true
+      "version": "7.11.7",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.7.tgz",
+      "integrity": "sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==",
+      "dev": true,
+      "dependencies": {
+        "markdown-table-ts": "^1.0.3"
+      }
+    },
+    "node_modules/@primer/view-components": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.1.6.tgz",
+      "integrity": "sha512-WlK9yPNyBobnIpByxMh1UHAmE6n8Cd5tbsMvLyRVpaRuNZjZyivjAkFaJYFxHZHaGgCgm7v7g6h4yQDR4Z/taA==",
+      "dev": true,
+      "dependencies": {
+        "@github/auto-check-element": "^5.2.0",
+        "@github/auto-complete-element": "^3.3.4",
+        "@github/catalyst": "^1.6.0",
+        "@github/clipboard-copy-element": "^1.1.2",
+        "@github/details-menu-element": "^1.0.12",
+        "@github/image-crop-element": "^5.0.0",
+        "@github/include-fragment-element": "^6.1.1",
+        "@github/mini-throttle": "^2.1.0",
+        "@github/relative-time-element": "^4.0.0",
+        "@github/tab-container-element": "^3.1.2",
+        "@oddbird/popover-polyfill": "^0.1.1",
+        "@primer/behaviors": "^1.2.0"
+      }
     },
     "node_modules/@rollup/plugin-node-resolve": {
       "version": "13.3.0",
@@ -5161,6 +5185,12 @@
         "markdown-it": "bin/markdown-it.js"
       }
     },
+    "node_modules/markdown-table-ts": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-table-ts/-/markdown-table-ts-1.0.3.tgz",
+      "integrity": "sha512-lYrp7FXmBqpmGmsEF92WnSukdgYvLm15FPIODZOx9+3nobkxJxjBYcszqZf5VqTjBtISPSNC7zjU9o3zwpL6AQ==",
+      "dev": true
+    },
     "node_modules/markdownlint": {
       "version": "0.26.2",
       "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.26.2.tgz",
@@ -10078,19 +10108,43 @@
       "integrity": "sha512-iHMRuu8YWDJIdqCi1krx0cyFNeqszNKTOb0dXFu2wQ5BeIqxqPJLD7rjZ2Vjf/+YaPSbWuIQE1H6TaGMMsDfdA=="
     },
     "@primer/css": {
-      "version": "20.4.7",
-      "resolved": "https://registry.npmjs.org/@primer/css/-/css-20.4.7.tgz",
-      "integrity": "sha512-/6sQ8oSyXmXWi1QWkohVcGNi87W6YCRyLOQdp/aoxjtWYDjk39xgi6lbEbjJ9LOjwPLfb0RqGkSkKZXFcJQQDQ==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.1.tgz",
+      "integrity": "sha512-yHBDYnNQk0W7e3h0Eadh/RCbPl4WEvuO5dwj/qLE/kZodBn7JGhU7xMQKDnj37ck27dS311ngXUuLH42s3wXBw==",
       "dev": true,
       "requires": {
-        "@primer/primitives": "^7.9.0"
+        "@primer/primitives": "^7.11.7",
+        "@primer/view-components": "^0.1.0"
       }
     },
     "@primer/primitives": {
-      "version": "7.11.1",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.1.tgz",
-      "integrity": "sha512-Sdss4XG96nqBqrTAyg+RuFOj+U5wkICK8n2hafcyT+lpSlZoIwcbmhyFjmDy9f88FkhHe2q0uCpQ8PjKd8ILTQ==",
-      "dev": true
+      "version": "7.11.7",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.7.tgz",
+      "integrity": "sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==",
+      "dev": true,
+      "requires": {
+        "markdown-table-ts": "^1.0.3"
+      }
+    },
+    "@primer/view-components": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.1.6.tgz",
+      "integrity": "sha512-WlK9yPNyBobnIpByxMh1UHAmE6n8Cd5tbsMvLyRVpaRuNZjZyivjAkFaJYFxHZHaGgCgm7v7g6h4yQDR4Z/taA==",
+      "dev": true,
+      "requires": {
+        "@github/auto-check-element": "^5.2.0",
+        "@github/auto-complete-element": "^3.3.4",
+        "@github/catalyst": "^1.6.0",
+        "@github/clipboard-copy-element": "^1.1.2",
+        "@github/details-menu-element": "^1.0.12",
+        "@github/image-crop-element": "^5.0.0",
+        "@github/include-fragment-element": "^6.1.1",
+        "@github/mini-throttle": "^2.1.0",
+        "@github/relative-time-element": "^4.0.0",
+        "@github/tab-container-element": "^3.1.2",
+        "@oddbird/popover-polyfill": "^0.1.1",
+        "@primer/behaviors": "^1.2.0"
+      }
     },
     "@rollup/plugin-node-resolve": {
       "version": "13.3.0",
@@ -12915,6 +12969,12 @@
         "uc.micro": "^1.0.5"
       }
     },
+    "markdown-table-ts": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-table-ts/-/markdown-table-ts-1.0.3.tgz",
+      "integrity": "sha512-lYrp7FXmBqpmGmsEF92WnSukdgYvLm15FPIODZOx9+3nobkxJxjBYcszqZf5VqTjBtISPSNC7zjU9o3zwpL6AQ==",
+      "dev": true
+    },
     "markdownlint": {
       "version": "0.26.2",
       "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.26.2.tgz",
diff --git a/package.json b/package.json
index a3ef0ec2be..ec2490dd6e 100644
--- a/package.json
+++ b/package.json
@@ -64,8 +64,8 @@
     "@github/markdownlint-github": "^0.2.2",
     "@github/prettier-config": "0.0.4",
     "@playwright/test": "^1.27.1",
-    "@primer/css": "20.4.7",
-    "@primer/primitives": "^7.11.1",
+    "@primer/css": "21.0.1",
+    "@primer/primitives": "^7.11.7",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
diff --git a/postcss.config.js b/postcss.config.js
index 08fd79d99c..e59c2e5047 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -18,7 +18,7 @@ module.exports = {
         'logical-properties-and-values': false,
         'custom-media-queries':  {
           importFrom: [
-            path.join(__dirname, './node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css')
+            path.join(__dirname, './node_modules/@primer/primitives/tokens-next-private/css/functional/size/viewport.css')
           ]
         },
       }
diff --git a/static/classes.json b/static/classes.json
index fd07aa4d73..462235ca78 100644
--- a/static/classes.json
+++ b/static/classes.json
@@ -372,10 +372,10 @@
   "ActionListWrap--inset": [
     "Primer::Alpha::ActionList"
   ],
-  "ActionListItem-action": [
+  "ActionListItem-visual": [
     "Primer::Alpha::ActionList"
   ],
-  "ActionListItem-visual": [
+  "ActionListItem-action": [
     "Primer::Alpha::ActionList"
   ],
   "SegmentedControl-item": [
@@ -510,10 +510,10 @@
   "FormControl-inlineValidation": [
     "Primer::Alpha::TextField"
   ],
-  "FormControl-check-group-wrap": [
+  "FormControl-radio-group-wrap": [
     "Primer::Alpha::TextField"
   ],
-  "FormControl-radio-group-wrap": [
+  "FormControl-check-group-wrap": [
     "Primer::Alpha::TextField"
   ],
   "Popover-message--bottom-left": [
diff --git a/test/components/beta/auto_complete/item_test.rb b/test/components/beta/auto_complete/item_test.rb
index 0b927ad4ba..ffbe6702ab 100644
--- a/test/components/beta/auto_complete/item_test.rb
+++ b/test/components/beta/auto_complete/item_test.rb
@@ -8,19 +8,19 @@ class PrimerBetaAutoCompleteItemTest < Minitest::Test
   def test_renders_item_with_correct_attributes
     render_inline(Primer::Beta::AutoComplete::Item.new(value: "foo")) { "Item" }
 
-    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionList-item", text: "Item")
+    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionListItem", text: "Item")
   end
 
   def test_renders_selected_item
     render_inline(Primer::Beta::AutoComplete::Item.new(value: "foo", selected: true)) { "Item" }
 
-    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"][aria-selected=\"true\"].ActionList-item", text: "Item")
+    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"][aria-selected=\"true\"].ActionListItem", text: "Item")
   end
 
   def test_renders_disabled_item
     render_inline(Primer::Beta::AutoComplete::Item.new(value: "foo", disabled: true)) { "Item" }
 
-    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"][aria-disabled=\"true\"].ActionList-item", text: "Item")
+    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"][aria-disabled=\"true\"].ActionListItem", text: "Item")
   end
 
   def test_renders_with_leading_visual_icon
@@ -29,9 +29,9 @@ def test_renders_with_leading_visual_icon
       "Item text"
     end
 
-    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionList-item", text: "Item text") do
-      assert_selector("span.ActionList-content") do
-        assert_selector("span.ActionList-item-visual.ActionList-item-visual--leading")
+    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionListItem", text: "Item text") do
+      assert_selector("span.ActionListContent") do
+        assert_selector("span.ActionListItem-visual.ActionListItem-visual--leading")
       end
     end
   end
@@ -42,9 +42,9 @@ def test_renders_with_leading_visual_avatar
       "Item text"
     end
 
-    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionList-item", text: "Item text") do
-      assert_selector("span.ActionList-content") do
-        assert_selector("span.ActionList-item-visual.ActionList-item-visual--leading")
+    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionListItem", text: "Item text") do
+      assert_selector("span.ActionListContent") do
+        assert_selector("span.ActionListItem-visual.ActionListItem-visual--leading")
       end
     end
   end
@@ -55,9 +55,9 @@ def test_renders_with_trailing_visual
       "Item text"
     end
 
-    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionList-item", text: "Item text") do
-      assert_selector("span.ActionList-content") do
-        assert_selector("span.ActionList-item-visual.ActionList-item-visual--trailing")
+    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionListItem", text: "Item text") do
+      assert_selector("span.ActionListContent") do
+        assert_selector("span.ActionListItem-visual.ActionListItem-visual--trailing")
       end
     end
   end
@@ -68,10 +68,10 @@ def test_renders_with_description
       "Item text"
     end
 
-    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionList-item", text: "Item text") do
-      assert_selector("span.ActionList-content") do
-        assert_selector("span.ActionList-item-descriptionWrap") do
-          assert_selector("span.ActionList-item-description", text: "Item description")
+    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionListItem", text: "Item text") do
+      assert_selector("span.ActionListContent") do
+        assert_selector("span.ActionListItem-descriptionWrap") do
+          assert_selector("span.ActionListItem-description", text: "Item description")
         end
       end
     end
@@ -83,9 +83,9 @@ def test_renders_with_inline_description
       "Item text"
     end
 
-    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionList-item", text: "Item text") do
-      assert_selector("span.ActionList-content") do
-        assert_selector("span.ActionList-item-descriptionWrap.ActionList-item-descriptionWrap--inline")
+    assert_selector("li[role=\"option\"][data-autocomplete-value=\"foo\"].ActionListItem", text: "Item text") do
+      assert_selector("span.ActionListContent") do
+        assert_selector("span.ActionListItem-descriptionWrap.ActionListItem-descriptionWrap--inline")
       end
     end
   end
diff --git a/test/components/beta/auto_complete_test.rb b/test/components/beta/auto_complete_test.rb
index dd91c13863..3abf90493f 100644
--- a/test/components/beta/auto_complete_test.rb
+++ b/test/components/beta/auto_complete_test.rb
@@ -48,7 +48,7 @@ def test_renders_input_without_explicitly_calling_it
 
     assert_selector('auto-complete[for="my-list-id"][src="/url"]') do
       assert_selector('input[id="test-input"].FormControl-input')
-      assert_selector('ul[id="my-list-id"].ActionList')
+      assert_selector('ul[id="my-list-id"].ActionListWrap')
     end
   end
 
@@ -57,7 +57,7 @@ def test_renders_results_without_explicitly_calling_it
 
     assert_selector('auto-complete[for="my-list-id"][src="/url"]') do
       assert_selector('input[id="test-input"].FormControl-input')
-      assert_selector('ul[id="my-list-id"].ActionList')
+      assert_selector('ul[id="my-list-id"].ActionListWrap')
     end
   end
 
@@ -107,7 +107,7 @@ def test_renders_results_with_custom_classes
     end
 
     assert_selector('auto-complete[for="my-list-id"][src="/url"]') do
-      assert_selector('ul[id="my-list-id"].ActionList.my-class')
+      assert_selector('ul[id="my-list-id"].ActionListWrap.my-class')
     end
   end
 
diff --git a/test/system/beta/auto_complete_component_test.rb b/test/system/beta/auto_complete_component_test.rb
index cec4770021..cbdf8db179 100644
--- a/test/system/beta/auto_complete_component_test.rb
+++ b/test/system/beta/auto_complete_component_test.rb
@@ -9,9 +9,9 @@ def test_renders_component
 
       assert_selector("auto-complete[for=\"list-id\"][src=\"/auto_complete\"]") do
         assert_selector("input.FormControl-input")
-        assert_selector("ul[id=\"list-id\"].ActionList", visible: false)
+        assert_selector("ul[id=\"list-id\"].ActionListWrap", visible: false)
       end
-      refute_selector(".ActionList-item")
+      refute_selector(".ActionListItem")
     end
 
     def test_search_items
@@ -21,8 +21,8 @@ def test_search_items
       fill_in "input-id", with: "a"
 
       # results are now visible
-      assert_selector("ul[id=\"list-id\"].ActionList", visible: true)
-      assert_selector(".ActionList-item")
+      assert_selector("ul[id=\"list-id\"].ActionListWrap", visible: true)
+      assert_selector(".ActionListItem")
     end
 
     def test_renders_non_visible_label